Flexbox Review Exercise

[00:00:00]
>> Jen Kramer: So just to get you started and to refresh your memory, here in the classroom we have a lot of people who work with JavaScript on a regular basis, maybe not so much CSS on a daily basis. So to get those juices flowing and get you to remember how to work with CSS again, and plain old CSS, not CSS in JavaScript.

[00:00:17]
Plain old CSS, we're gonna start with a CodePen. So what I've given you here in this folder is a screenshot of a thing I'd like you to layout. Super simple, all right? And here in the instructions, what I'm going to have you do is simply code this layout using Flexbox.

[00:00:36]
There's the starting CodePen right there. If you don't have a CodePen account, you can create one. If you don't wanna create one, that's fine. But if you do wanna save your work, you will need to create a CodePen account. Fork the CodePen, go on ahead and code it using Flexbox.

[00:00:50]
Okay, don't change the HTML. This is one of our favorite academic exercises. Don't change the HTML. Just go on ahead and write CSS to lay the page out the way it looks, okay? Which means that you're gonna have to use some CSS selectors, no. And then my hint here to you is to remember to keep the flex in Flexbox.

[00:01:11]
One of the most common mistakes that I see with people working with Flexbox is that they tend to use the CSS width property. And the width property is the wrong thing to use when you're working with Flexbox. Instead, you work with the flex-basis property, yeah? Okay, so try to work with that flex-basis property as you're adjusting widths within that layout.

[00:01:32]
If you have some more time, there is a part two here. This is working with CSS grid. I used three different syntaxes with CSS grid to lay this out, and the page looks exactly the same at the end. But I've used the line based placement, which is like grid column one slash three, okay?

[00:01:50]
I've also used the span keyword, like span two. And I've also used grid area notation, so I've coded it all those ways as well. There's some answers that are there in the starting CodePen. So why don't you go on ahead and get started with this, just to get warmed up.

[00:02:05]
This is like the lap around the football field before practice, just to get the muscles warmed up.