Week 6

Notes

CSS Boxes

• CSS Box Model
• CSS Box Sizing Property
• Interactive Box Layout Demo
• How to Center a Layout

More CSS Properties

• Rounded Corners with border-radius
• Drop Shadows with box-shadow
• Text Shadows with text-shadow
• CSS Gradients

Moby Class Demo

• Completed Moby Demo (without @font-face)
• Moby Class Demo files (start of class)
  • Zipped version
• Moby Class Demo Handout

Thumbnail Grid Demo

• Files
• Instructions

Revised Listomatic Demo

• Nav Lists Demo (revised from Listomatic)

Homework

Remember, no class next week - 10/15

Reading

• Read Chapter 13:
  • pages 319-324: Start at "Other Pseudo-Class Selectors", stop at "Background Images"
• Read Chapter 14:
  • pages 380-382: "Assigning Display Types" section
• Read Chapter 15:
  • pages 387-398: Start of chapter, stop at "Fancy Text Wrap With CSS Shapes"
  • pages 405-418: Start at "Positioning Basics", stop at end of chapter
• Read Chapter 16:
  • pages 419-444: Start of chapter, stop at "Browser support for flexbox" section - This chapter will tell you how to style your navigation!

Exercises

Class Exercise

Complete both the Moby and Thumbnail Grid demos. For each:

• Upload the entire demo folder
• Link to your complete exercise from the Week 6 section of your class website

Recipe Book

Your final recipe book project will be due at 6pm on 10/22. All files must be uploaded to your web site at this time. Make sure there is a working link to your recipe book site from you class website.

• Recipe Book Project Page