Lesson 03
0 likes283 views
This document outlines the agenda for a lesson on advanced CSS. It will cover the CSS box model, nested selectors, and templates. Students will then work on an assignment during lab time to build a fashion blog using these CSS concepts. They will be expected to complete the blog for homework. Key topics include the box model dimensions including padding and borders, applying CSS to HTML templates, and starting on the fashion blog assignment.
Lesson 03
- 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