0
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
Shared Class Web Server vs. Schoology
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...
Box Model
Let’s build this …
Start with …
template.html
style.css

Save as …
box_model.html
box_model.css
Box Model
Apply this to …
Wendy G. Bite
index.html
resume.html
Nested Selectors
Not needed to complete Assignment
Makes more sense once the following is
introduced in the next lesson:
<...
Getting Started
Assignment: Build Fashion Blog
starter code
image_1
image_2
Lab Time
Assignment: Build Fashion Blog
starter code > add external stylesheet
image_1
image_2
Homework
Complete Fashion Blog
Upcoming SlideShare
Loading in...5
×

Lesson 03

151

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "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 Shared Class Web Server vs. Schoology
  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. Box Model Let’s build this … Start with … template.html style.css Save as … box_model.html box_model.css
  9. 9. Box Model Apply this to … Wendy G. Bite index.html resume.html
  10. 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. 11. Getting Started Assignment: Build Fashion Blog starter code image_1 image_2
  12. 12. Lab Time Assignment: Build Fashion Blog starter code > add external stylesheet image_1 image_2
  13. 13. 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.

×