These two HTML challenges (1 | 2) are very important! Basically, every HTML page needs to have
Since a lot of people use CodePen to host their projects, I think these basic HTML structure elements can sometimes feel less important since they’re technically not needed in CodePen. CodePen allows one to put what they would normally put in the head element into the CodePen HTML settings instead and wraps the HTML content in a
<body> element automatically (I think), so technically the elements are there whether one chooses to use them or not. My suggestion, in order to make this valid HTML markup second nature, is to add the full HTML page (including these elements) to the CodePen HTML content manually and not use the settings.
Another suggestion is to use Glitch instead of CodePen because that more closely simulates a production environment in an easy to use web-based interface.
Linking a stylesheet to HTML is briefly mentioned in the CSS section (step 3 of 4). You’ll need to do this in order to successfully use Glitch, if you’re following best practices about separating content from design. Here’s a Khan Academy video about using external stylesheets and how to link to them in your HTML. I don’t agree with the video about when to use an external stylesheet. I think we should always be using one! It’s called Separation of Concerns.
In some of the projects I review, I notice that they don’t take advantage of styling the
<body> element, as mentioned in this fCC challenge. On some level, I think (and this is totally speculative) that this is a result of not focusing on valid HTML markup and relying on CodePen, so the
<body> element isn’t always in the front of people’s minds. Sometimes they’ll create a master container to hold everything instead of using
<body>. There’s nothing wrong with this in terms of how the browser will render the page, but I feel like the
<body> element is there anyway so one might as well take advantage of it when possible, instead of creating another level of complexity.