CSS: Layout

🗓️ Today’s topics

• CSS backgrounds
• CSS layout with flexbox

READ:

• MDN: CSS Layout Reference

OPTIONAL: In this class, we will focus on flexbox. A popular alternative to flexbox for layout is called “grid”, also built into CSS. With flexbox you choose to line up your boxes either vertically or horizontally, but with grid you can specify both horizontal and vertical arrangement in the same box.

• CSS-Tricks Complete Guide to Grid
• Grid Garden (from the makers of Flexbox Froggy)

Jen Simmons is a former Mozilla developer and educator with a great series on YouTube to teach you css layout best practices using grid and flexbox.

• Jen Simmons: Layout Land

💻 Project: Dog Adoption

• Link to accept Due Thursday morning, 1/26

• Optional practice:

  • Practice Flexbox with Flexbox Froggy
  • Practice Grid with Grid Garden

🦉 Notes & Code Examples

• Notes on CSS Layout
• Notes on Responsive CSS
• CSS Flexbox interactive CodePen
• Flexbox Frogger from class

🔖 References

Flexbox

• CSS-Tricks A Complete Guide to Flexbox
• Flexbox Froggy
• How Flexbox Works with gifs
• More Flexbox with gifs
• CSS-Tricks Flexbox Layout Thought Process
• CSS-Tricks flex property
• demo flexbox nav menu with adjustable property values

General CSS

• CSS-Tricks Guide to Centering Things
• CSS-Tricks Tinted Images with Multiple Backgrounds
• MDN: Use CSS to solve common problems

Responsive CSS

• MDN Using Media Queries
• How to use media queries alongside Grid and Flexbox

Design

• 10 Cheat Codes for designing user interfaces
• 7 Rules for Creating Gorgeous UIs
• 7 Rules Part Two
• Practical Color Theory for People Who Code
• Typography for Developers