Practice building a basic web page using semantic layout and incremental development.

• Learning Objectives
• Instructions
• Mock-Up
• Study Links

• Develop from a mock-up
• Plan steps ahead of time
• Start from an empty project
• Develop each step on one branch
• Use semantic HTML5 elements
• Write clean and readable code
• Deploy a polished repository

TOP

1. Fork this repository, turn on GitHub pages, and clone
2. Study the mock-up
   1. You only need to replicate the design, not the functionality!
3. Plan your user stories in ./development-strategy.md
4. Develop one story at a time
   1. Create a new branch before beginning each story
   2. Code the story entirely. Make sure the code is pretty and everything works
   3. Push the new branch to GitHub
   4. Merge the completed story into master
   5. Push master to GitHub
   6. Repeat!
5. have a nice day!

TOP

TOP

• Demo project to study

• Why, How and When? (css-tricks)
• What is "semantics"? (MDN)
• Using Sections and Outlines (MDN)
• Semantic Elements (FreeCodeCamp)
• Semantic Elements (w3schools)
• HTML5 Semantic Elements vs. CSS

• cascade & inheritance
• CSS Specificity
• CSS Positioning

• How to inspect an element
• Inspecting the DOM?
• Live DOM Viewer
• DOM Tutor
• Modify the DOM - does the source change?