Sounds cool, go with it! 
Your page looks good @jonjames1986. Some things to revisit;
- Run your HTML code through the W3C validator.
- There are HTML syntax/coding errors you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors.
- There are HTML syntax/coding errors you should be aware of and address.
- Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
- The one for CSS is good. Use it and address the issue(s).
(The one for HTML misses things which is why I recommend W3C)
- The one for CSS is good. Use it and address the issue(s).
- Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.- Reference MDN Docs
- Make your page responsive. Remember, the R in RWD stands for Responsive
- There’s a horizontal scrollbar on smaller screens
To help, start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
- There’s a horizontal scrollbar on smaller screens
Why does it say there’s an unclosed element? In the html analysis it says tag must be paired, wtf is that? In W3 it says there’s “garbage after </” wtf does that mean? It’s pretty useless with no explanation.
You don’t give much context.
Learning to describe problems is an important part of learning how to code. The more information you give, the more likely we are to be able to help. And you don’t need to swear.
I’m going to guess you’re talking about this line you get when using codepen’s analyze;
Tag must be paired, no start tag: [ </br> ]
</br> is not a valid HTML5 tag. You can search and find that out.
And once again, you do not want to/should not use the <br> tag to force line breaks or spacing. That’s what CSS is for.
If <br> is not a valid tag, why is it listed here? List of HTML5 Tags/Elements - Tutorial Republic. I thought it was pretty clear. when I use the analyze HTML, which is what you told me to do, it says things like “special characters must be escaped” with no explanation of that what means. Did someone actually think that was helpful? Or, were they not smart enough to know that unless you explain what that is, it’s utterly useless to say “special characters must be escaped?”
I didn’t say <br> wasn’t valid. I said </br> is not valid. And that’s what the analyzers are telling you too.
What I did say was not to use the <br> tag to force line breaks or spacing.
gotcha, it won’t let me post shorter than 20 characters, so I’m typing this
How would you create spacing? you never clarified, which would be helpful. And what does “special characters must be escaped” mean? the analyzer isn’t useful if it doesn’t explain what the problem is. What are special characters, why do I need to escape them? Are they trying to get me?
You learned about this in the lessons. And can expand with searches but basically you use margin and / or padding to create spacing.
If you’re talking about this;
</section id="history">
Special characters must be escaped : [ < ].
Special characters must be escaped : [ > ].
an id in a closing tag is not valid HTML. The message is vague because it doesn’t know how to handle invalid HTML so it does the best it can.
One thing you can do, as a suggestion, is to switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.
No one is out to get you.
Something to revisit;
codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
Mentioning because you have elements out of order.
Review this for an understanding of the HTML boilerplate tags.
I deleted the ids in the closing section tags and it seems better now. Thanks for that help. oh my gosh, I just realized how similar this is to wikipedia’s syntax. Man, I used to edit that site all the time. As an example, when inserting a reference you could name them, like <ref name=author>Yahoo! website reference </ref> It’s just like that. It’s like editing wikipedia.
Yes, HTML and CSS are markup languages as is wikitext.
Error : Element head is missing a required instance of child element title .
How important is it that I fix this? I didn’t even know what it was. I read something that suggested it wasn’t required for HTML5. HTML <head> Tag - GeeksforGeeks
In one of the first messages I sent that told you to run your code through the W3C validator I mentioned;
“Since copy/paste from codepen you can ignore the first warning and first two errors.”
It’s also mentioned in the link I provided about the HTML boilerplate tags.
Briefly, the title is what appears in the browser tab when the page is opened.
Hope that helps.
Sorry, I didn’t mean to ignore what you said. This is part of why I’m not sure I can do this. I keep forgetting simple things like this. Thanks for your help, though. You’ve been very patient and kind
No worries, there’s a lot to go through and remember. I was mainly pointing out that the info was in this thread in case you needed to review it more. And sometimes, hearing it repeated makes it stick a little better.
I don’t mind retyping something because I can cut & paste. 
And if I need to say it a different way I’ll do that too.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.