CSS: Layout
Posted on May 21st, 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, May 26, 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.