1. Front-End Web
Development
Lesson 3
Advanced CSS

2. Agenda
●
●
●
●
●
●
Review (15 minutes)
HTML Template (10 minutes)
Box Model (50 minutes)
Nested Selectors (20 minutes)
Getting Started (10 minutes)
Lab Time (60 minutes)

3. Review
Wendy G. Bite
● index
● resume
Homework

4. HTML Template
template.html
reset.css > source
normalize.css > source
style.css

5. Box Model
Every element on a web page is a box.
What is an element?

6. Box Model

7. Box Model
Width = width +
padding-left + padding-right +
border-left + border-right
Height = height +
padding-top + padding-bottom +
border-top + border-bottom

8. Nested Selectors

9. Getting Started

10. Lab Time

11. Homework
Complete Fashion blog