CSS: Layout
Posted on Jul 16th, 2020
Today’s topics
- CSS layout with flexbox
- Responsive web design, media queries, and breakpoints
- Basic web design principles
Project
Build a professional portfolio site
Link to the assignment invitation
You can start work on this tomorrow, Friday, after you turn in the dog adoption website.
This assignment is due on Tuesday, July 21, at 9:30 am.
Links and resources
- CSS-Tricks A Complete Guide to Flexbox
- How Flexbox Works with gifs
- More Flexbox with gifs
- CSS-Tricks Flexbox Layout Thought Process
- CSS-Tricks flex property
- CSS-Tricks Guide to Centering Things
- 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
⭐️EXTRA/TMI
We aren’t using grid or floats in class, but you may want to familiarize yourself at some point. Here are some references.
Jen Simmons is a Mozilla developer and educator with a great series on YouTube to teach you css layout best practices using grid and flexbox.
Code, slides, and video from class
- class slides PDF
- flexbox demo code
- morning video Password: 0z.@@*&3
- afternoon video Password: 1f!F#D5#