Week 2

Notes

CSS Basics

• CSS Terminology
• Basic Selectors
• Divs, Spans, Id's, and Classes [Comm 244 Review]
• Attaching CSS to Your Document [Comm 244 Review]
• The HTML Document Tree [Comm 244 Review]

Watch the following videos from Lynda.com to review key concepts in CSS to help with laying elements out in CSS using floats.

The CSS Box Model

• The Box Model [CSS Essential Training 1]
  • Key concepts for how all elements are contained within a box
  • Spacing of boxes can be modified with margin, padding, and borders
  • How block elements and inline elements differ when adding margin and padding
• The Box Fix [CSS Essential Training 1]
  • Understand what the box model fix is and how to use it

Layouts (with floats and positioning)

• Practicing Layouts [CSS Essential Training 1]
  • Centering content blocks with margin: auto
  • Using flexible measurements when possible to ensure good scaling on various screen sizes
• Floats [CSS Essential Training 1]
• Practicing with Floats [CSS Essential Training 1]
• Layouts (all videos in section 2) [CSS Essential Training 2]
  • Basic floats for layouts. How to create columns in layouts.
  • How to clear floats with overflow or the clearfix hack
  • Create circular images with border-radius
  • Navigation list styling: Pros and cons of using display: inline-block or floating the list items
  • Positioning elements with relative, absolute and fixed
  • Creating fixed navigation bars
  • Layering or stacking elements with the z-index

Reading

Read for week 3:

• CSS Review: Read the following sections from Shay Howe’s excellent Learn to Code HTML & CSS website. This should all be review for you and should be pretty straight forward.
  • Building Your First Web Page (start at Understanding Common CSS Terms)
  • Getting to Know CSS
  • Working with Typography
  • Creating Lists

Homework

Continue marking up the Airbnb Surf page with basic HTML and CSS. For CSS, focus on the basic typography and putting together the overall page structure (ie. arranging content chunks on the page where they should go) You can download all of the files here:

• Airbnb Surf Exercise files

Use the document you annotated in Sketch to help you understand how to structure your HTML and CSS. You may also want to make use of either a normalize or reset styleshet.

You can use the DigitalColor Meter application on all Macs to get the exact colors. It's located in /Applications/Utilities/ on the computers (you can also do a Spotlight search). You do not need to worry about getting the exact typeface, just one that is close in style. If you want to explore the Developer Tools in the browsers, you can also use those to get the exact colors and typefaces.