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

4. Review
Homework (sharing files)
● Schoology
● Shared Class Web Server
● GitHub

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

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

7. Box Model

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

9. Box Model
Let’s build this …
Start with …
template.html
style.css
Save as …
box_model.html
box_model.css

10. Box Model
Apply this to …
Wendy G. Bite
index.html
resume.html

11. Nested Selectors
Not needed to complete Assignment
Makes more sense once the following is
introduced in the next lesson:
<div> tags
IDs and classes

12. Getting Started
Assignment: Build Fashion Blog
starter code
image_1
image_2

13. Lab Time
Assignment: Build Fashion Blog
starter code > add external stylesheet
image_1
image_2

14. Homework
Complete Fashion Blog