CSS: Layout
Posted on May 13th, 2021
Today’s topics
- CSS backgrounds
- CSS layout with flexbox
🎯 Weekend Project: Dog Adoption
Continue working on your dog adoption website assignment, which is due Monday morning.
🧁 Optional project: Portfolio
If you finish the dog adoption site and want to forge ahead on your own, check this one out:
This assignment requires you to use CSS techniques to adapt your layout to smaller screen sizes. If you’re using flexbox that gets much easier, but you’ll also need other responsive web design strategies like media queries.
Check your CSS layout notes about repsonsive design, and check out the resources listed below.
🔖 Resources
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
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
Layout techniques for CSS include a lot of options other than flexbox. This reference summarizes them and gives you a good sense of other things you might see.
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.
Before we had flexbox or grid built into CSS, we relied on floats for layout. You should not be using floats to lay out your pages, but you may still see them in other people’s code. Because of that, you may want to familiarize yourself at some point.