Your SlideShare is downloading. ×
Lesson 03
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Lesson 03

63
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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