Major Takeaways
This video goes over building the html for the project. Kevin walks us through his thoughts as he starts building out the html for the front end.
Aria Labels and Roles
Progressive Enhancement is KING. You want to make sure that you are servicing as many people as possible with any project. Making sure that screen readers can effectively understand the structure of your site ensures accessibility to as many as possible.
Always consider setting aria labels around navigation sections and in this case it came up first when Kevin viewed the social links.
Roles in regards to this project is also for screen readers and accessibility. Since we will be altering the look of list with list-style: none; there are some screen readers that no longer treat it as a list and will not announce it as such.
Aria labels and roles look like this:
<ul aria-label="Primary" role="list" class="nav-list">
This is under the header nav tag so this is saying that we have an unordered list and its the primary nav list. We gave it a role of list because of the aforementioned list styling of none will mess with some screen readers.
Here is another example of the establishing aria-labels to distinguish that this navigation is for the footer.
<nav class="footer-nav">
``<ul aria-label="Footer" role="list">
Constructing Page Using Containers
Take a look at section and give it a container to hold everything. When you edit the container in CSS, its about setting widths, paddings and margins so that container sits on the page correctly.
Inside your container, are you shooting for two columns? Three columns? Set a class for how you want the contents to be displayed. This setting will be about setting your flex or grid display option.
Now that you have those two things set, you can start adding the contents themselves.
So under the main tag, you will have a section and in that section you will have a div class container.
Looks like <main> -> <section> -> <div class="container"> -> <div class="even-columns"> all cascading as normal.
Using Clean Semantics over Appearance
In our reset styling, we removed anything that would automatically make our html display our headings differently. A major reason for that was to make sure we were being purposeful with our html element choices.
Should that be an H2 or an H3 or do I just want this to be bigger and draw more attention? Be purposeful about selecting your elements and utilize the premade css selectors when crafting your classes for each element. If there is any styling you anticipate using in more than one place, consider making a CSS variable and use it when creating your elements.
Example:
h1.fs-primary-heading.fw-bold
This says, 'Make an h1 element with a class of fs-primary-heading and another class of fw-bold'. It will yield the following:
<h1 class="fs-primary-heading fw-bold">
Remember that you can have multiple classes separated with just a space
Using Emmet Effectively
Here are the most interesting shortcuts featured in this video using Emmet.
You can create a container div quickly by typing .container. You can create a div using any class you want by using a period. For example you could create a div with class paper by typing .paper this will yield
<div class="paper">
You can create several lines of items like this: ul>li*5>a
This will create an unordered list with 5 list items and each one has a link in it! Then if you middle mouse click down, you can erase and edit them all at once.
button.button will create a button with the class of button
If you do div*2 it will generate two divs for you.
h1.fs-primary-heading.fw-bold
This will create your H1 and give it the class of fs-primary-heading and fw-bold which you have already established in your css!
You can add elements after an initial element. For example p+button will return a paragraph opening and closing tag and then a button opening and closing tag.
.container>.even-columns This will create a div class container and a div class even-columns
ul[role="list"]>li*3
This will create a `<ul> element with the role="list" and 3