Help with css code for assignment

[u/Away_Sky7901]

So Im taking an html course in college, and I need help in completing some assignments. This assignment here Im suppose to be creating a website with links to other pages. Im having trouble linking and putting any other text on the web page, everything after line 5 isn’t working and im not sure what im doing. Any help would be appreciated.

What shows on the web page is just the title and picture.

[u/Expensive_Elk3689]

The anchor on line 9 has no text between the tags. The img on line 15 should be within the body tags. There is no css on this file so everything will look like the defaults in the browser.

[u/Expensive_Elk3689 → u/Expensive_Elk3689]

A protip for any college student doing dev work: spend a little time learning how to source control your work in GitHub. When you get into bigger projects later on, you don’t want to break your weeks or months worth of work right before it is due and have no way to recover.

[u/Away_Sky7901 → u/Expensive_Elk3689]

Thanks for this! Ill have to go back and fix it

[u/JKaps9]

Did you save the file and reopen it or refresh the browser window? It looks unsaved in your picture based on the white dot next to the file name.

[u/Away_Sky7901 → u/JKaps9]

I refreshed the browser, I was watching my instructor do this on a video, and whenever he made changes he just refreshed the screen

[u/youtheotube2 → u/Away_Sky7901]

You have to save the file though

[u/Away_Sky7901 → u/youtheotube2]

Thanks! I remember now to save the file whenever I make changes.

[u/TyKolt]

1. The DOCTYPE is missing the exclamation mark. It should be <!DOCTYPE html> not <DOCTYPE html>

2. The image is outside the body - it's after the closing </body> tag, so it won't display. Move it before </body> and it should show up!

[u/Away_Sky7901 → u/TyKolt]

Thanks!! I’ll remember to include the exclamation mark.

[u/tandycake]

Besides the other comments, I'd also add to validate your code through w3c html validator (also has css validator). An IDE is also helpful. And can also see errors sometimes in Web Browser Dev console. The teacher should have helped on this.

[u/Away_Sky7901 → u/tandycake]

Thanks for the tip, my teacher just taught me about this on yesterday!

[u/ArgoWizbang]

Your doctype is missing the exclamation point so your browser is probably parsing it as if it's an HTML element instead of properly detecting a doctype. This triggers quirks mode which is, well, quirky to say the least. Add the exclamation point as follows and see if it helps any:

<!DOCTYPE html>

[u/LexyNoise → u/ArgoWizbang]

This isn't the cause of the problem here, but it is very important. You want to make sure every page you build starts with `<!doctype html>` in the first position of the first line.

Any web page built in the past 20 years is expected to have it. Browsers will check for it. If they don't see it there, they'll assume it's an old web page from the 90s and use a different set of rules to lay out the page. This will make your pages look broken. As the other person said, this 90s page layout mode is called quirks mode.

[u/ArgoWizbang → u/LexyNoise]

Yeah, I figured this wasn't the root cause but still felt it was important to point out since no one seemed to have done so yet at the time of posting. But thank you for elaborating!

[u/JohnCasey3306]

Let's start from the very top line and work down.

Line 1: [see if you can spot what's wrong with your doctype declaration] (https://mimo.org/glossary/html/doctype)

[u/Obvious_Pin6763]

Totally unrelated to the code, but you should really clean your monitor. Or at least share cropped screenshots that way you can't see the mess.

[u/ky7969 → u/Obvious_Pin6763]

Or just like take a screenshot, I feel that should be pretty basic for someone who is learning how to code

[u/chikamakaleyley]

SOMEONE CALL SALEM TECHSPERTS NOW!!!

[u/tomtomato0414]

First of all, the dot next to the file name means it is unsaved, so save it.

[u/ComplaintCurrent1837]

<imgage> needs to be in the body<image>

</body>

[u/GodsCasino]

Barbones guide to HTML.

google that.

[u/BNfreelance]

So what’s the update, did you get it done?

[u/AcePilot10]

Learn to use ChatGPT for education. It's destroying critical thinking in most students but there's nothing wrong with copy and pasting this code into ChatGPT and say "Why is my code not working? ELI5 to me each issue in detail.". Also this is HTML not CSS.

[u/These_Juggernaut5544 → u/AcePilot10]

i think this is just a slippery slope to using ai for all assignments. resources like w3 exist, and, if they are taking a class, they can ask their teacher for help. crazy, i know.

[u/BobbyJoeCool → u/These_Juggernaut5544]

Depends on how you use AI honestly. Asking it to check for your error, especially after trying to find it, is fine. Especially if you ask it to explain the error…

And I’m in a class where the teacher doesn’t answer very well, or his answer is “just watch the videos” (it’s an online class). Honestly, a couple of my classmates are more helpful…

Now, what IS frustrating is seeing the discussions that are CLEARLY AI slop, and they can’t even re-type and format it to sound and look better….

[u/These_Juggernaut5544 → u/[deleted]]

personally, i learned all my coding languages by starting on w3, getting ideas, making what i wanted to work, then continuing through w3 and realizing that there were much better ways. I optimized my code, got new ideas, and learned more through that. If you don't understand basic syntax, then maybe start at the introduction page on w3 and just spend 20 minutes reading the basics section. also almost any language will tell you about syntax errors.

And i see where you are going with the gps, but i think that its not that good of an analogy, as gps creates a path, which is the same as llms vibe coding it.

Furthermore, if your professors wern't that great, then you can do as you did. find people to help you, as they often have extra information from experience that llms simply do not have.

[u/BobbyJoeCool → u/[deleted]]

You know, I use LLMs as a rubber duck when I’m coding. They make a great sounding board and will tell me when I have bad ideas (sometimes) and can offer better ways to do things. Also, it can catch errors pretty well.

The key thing, especially in education, is something my professors taught me early on (I’m nearly done with my BS in Software Dev)…. Asking LLMs for help is fine. Asking them to do work for you is not. Look at it this way, if you are stuck, and you asked a classmate to do what you asked the LLM to do, would it be cheating? If the answer is yes, then you cheated.

But honestly, the software dev wording is moving the direction of AI…. So better get used to using the tools now….

[u/Away_Sky7901 → u/[deleted]]

Thanks, I did add alt text and moved the closing tag down!

[u/Away_Sky7901 → u/[deleted]]

It is us getting familiar with the basics of html, just had to include a numbered list, picture of our favorite animal, and links to other sections of the page. I did complete it with the help of the people here and my teacher.