Front-End Web
Development
Lesson 3
Advanced CSS
Agenda
●
●
●
●
●
●

Review (15 minutes)
HTML Template (10 minutes)
Box Model (50 minutes)
Nested Selectors (20 minutes)
Ge...
Review
Wendy G. Bite
● index
● resume
Homework
HTML Template
template.html
reset.css > source
normalize.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 + paddin...
Nested Selectors
Getting Started
Lab Time
Homework
Complete Fashion blog
Upcoming SlideShare
Loading in...5
×

Lesson 03

90

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
90
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 03

  1. 1. Front-End Web Development Lesson 3 Advanced CSS
  2. 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. 3. Review Wendy G. Bite ● index ● resume Homework
  4. 4. HTML Template template.html reset.css > source normalize.css > source style.css
  5. 5. Box Model Every element on a web page is a box. What is an element?
  6. 6. Box Model
  7. 7. Box Model Width = width + padding-left + padding-right + border-left + border-right Height = height + padding-top + padding-bottom + border-top + border-bottom
  8. 8. Nested Selectors
  9. 9. Getting Started
  10. 10. Lab Time
  11. 11. Homework Complete Fashion blog
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×