This document outlines the agenda for an advanced CSS lesson. It includes a review of previous material, an introduction to HTML templates and the CSS box model, a discussion of nested selectors, and instructions for a fashion blog assignment to be completed during lab time and as homework. Students will learn how every element on a webpage is a box with properties that determine its size, they will apply CSS box model concepts to sample code, and they will work on building a fashion blog site.

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
Shared Class Web Server vs. Schoology

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. Box Model
Let’s build this …
Start with …
template.html
style.css
Save as …
box_model.html
box_model.css

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

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

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

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

13. Homework
Complete Fashion Blog