CSS: Layout
Posted on Sep 11th, 2020
Today’s topics
- CSS backgrounds
- CSS layout with flexbox
Project
Continue working on your dog adoption website assignment, which is due Monday morning.
Links and resources
- 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
- CSS-Tricks Guide to Centering Things
- CSS-Tricks Tinted Images with Multiple Backgrounds
⭐️EXTRA/TMI
Another option for CSS 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.
Code & Video from class
- Flexbox example code
- Morning class video Access Passcode: 0A9Uq$?G