Sections and Web Components
In this section, we'll explore the semantic sectioning elements introduced in HTML5 like <main>, <header>, and <footer>.
We'll also learn about Web Components, which will allow us to refactor out common elements to be shared/reused across pages.
Learning Objectives
| <main> <header> <footer> | https://thethousandyearweb.com/ref/html/#section |
| CSS Organization (SMACSS) | http://smacss.com/book/categorizing |
| Layout: colors, fonts, and padding |
https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model |
Theme: :root selector and CSS variables (technically "CSS custom properties") |
https://developer.mozilla.org/en-US/docs/Web/CSS/:root https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties |
| Base: basic element styling | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Lengths |
| Module: custom classes | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors#Types_of_selectors |
| Web Components: refactoring the footer | https://developer.mozilla.org/en-US/docs/Web/Web_Components |