Front-End Web Development

Lesson 3Advanced CSS

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

Review

Wendy G. Bite● index● resume

Review

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

HTML Template

template.html

reset.css > sourcenormalize.css > source

style.css

Box Model

Every element on a web page is a box.

What is an element?

Box Model

Box Model

Width = width +

padding-left + padding-right +

border-left + border-right

Height = height +

padding-top + padding-bottom +

border-top + border-bottom

Box Model

Let’s build this … Start with …

template.htmlstyle.css

Save as …box_model.htmlbox_model.css

Box Model

Apply this to … Wendy G. Bite

index.htmlresume.html

Nested Selectors

Not needed to complete Assignment

Makes more sense once the following is introduced in the next lesson:

<div> tagsIDs and classes

Getting Started

Assignment: Build Fashion Blog

starter codeimage_1image_2

Lab Time

Assignment: Build Fashion Blog

starter code > add external stylesheetimage_1image_2

Homework

Complete Fashion Blog