Transcript
If you haven't already, visit the repository for this series.
Once you arrive on the repository page, choose the clone or download button.
If you're already using GitHub, you can certainly clone the repository, or choose to download the zip.
Once you have downloaded the zip and unpacked it, you can navigate within the lessons directory and you will see the 00 lesson and the 01 lesson - unless you're joining this project at a later time, in which case there may be additional lessons available under the lessons directory
If you are planning to complete the full course, copy the contents of the 00 directory into a brand new project so that you can complete all of the steps throughout the course. The individual lesson directories are intended to be a checkpoint if you miss any steps along the way, or need to refer back to what was done in a particular lesson.
In addition, you could navigate back to the repository and open the lessons directory and a particular lesson. And by selecting the history tool, you can see a commit for the initial - which would be the starting point for that lesson - as well as a completed commit. And by clicking on the completed version, you can see what is called the "diff" showing you what was previously in the file and what changes were made. This is another way you can easily see what occurred during a particular lesson and make any changes that you missed in your own project.
All lessons in this course have the same build functionality as was discussed in the foundation's project.
If you need a review, visit that project and review episode 1: Setup Your Working Environment
Once you have donwloaded the project and have it running, open up the style.css.
I've already made the modifications that we will do for this lesson, and I will be just discussing what is called a "CSS reset."
Browsers have many inconsistencies [between them] and how they treat a variety of properties around common elements.
A reset is often used to reset some of those properties so that as we continue to build we have a more common baseline to build from.
The first rule that is put in place uses the universal selector - * - which means that this is applied to absolutely every element that is encountered in your HTML document. The rule applied is called box-sizing with the value border-box. This means that properties such as padding and border will not add width or height to the element that they are applied to.
Next, as noted, we remove default margin from body and a selection of headline elements.
And then for the body itself, we set a min-height of a 100vh (100 viewheights) which means we expect our body to be at minimum taking up the full-height of the viewport.
We add a behavior for scroll so that when using anchor links the browser provides an animation that smoothly scrolls from one to another.
Then, we handle for a few font properties. Again, this is providing a baseline for all typography related elements.
Following that is a block related to images, and this essentially allows images to be responsive by setting max-width: 100%.
display-block handles for a quirk where images have a bit of extra space at the bottom, and this is the way that is able to be cleared.
Some form inputs don't use our font by default, so the next block ensures that they inherit the font, meaning that the nearest ancestor - which is the body to begin with - will supply them the font to use. Which, if we refer back to the body, that font was sans-serif.
Finally, the smooth scroll behavior that I mentioned that we applied on the body may not be desirable for those who have motion-related sensitivities. So this rule - which once again applies to the universal selector (*) - directs that any element that we assign animation to has that animation removed including the scroll behavior.
This reset gives us the foundation to continue building the rest of our styles for our full website project by reducing browser inconsistencies and smoothing out some quirks that are legacy to various browser rendering engines.