CSS Grids and Flexbox for Responsive Web Design Flexbox Exercise 2 Setup: Full Webpage Layout

Transcript from the "Flexbox Exercise 2 Setup: Full Webpage Layout" Lesson

[00:00:00]
>> Jen Kramer: The next thing to do is to take this real world, now that we've done all this work on pie. What I'd like for you to do next is the following. We're gonna move on here to folder number four. This is gonna be an exercise that is very real world in a lot of cases, so.

[00:00:20] This is the Pie in the Sky web site. The colors are horrendous on this projector. Trust me that they're way better on the computer that's in front of you. Hoo, those are bad colors. So if you take a look at this, this is actually laid out currently using floats.

[00:00:38] So this is a full webpage that's laid out with floats, and what I'd like for you to do now, is I'd like for you to take, basically, the grid system that you just wrote with Flexbox, and I'd like you to apply it to this particular webpage. So you're gonna need to think about how exactly you're gonna lay this out differently, using with your Flexbox styles, and classes, going ahead, and apply them to this particular page.

[00:01:04] And basically, the end result should look exactly like this, but it should be coded with Flexbox in a Grid system, instead of being coded with floats. So that's the desktop.
>> Jen Kramer: Here is the tablet size. We've got these guys stacked underneath. And then, finally, of course, is mobile, all right?

[00:01:29] With everything stacked on top of each other. Normally, you might go to a hamburger button here on the navigation. In the interest of keeping JavaScript out of things, I've just gone ahead and changed the order here of the navigation to work with fat fingers. So let's go ahead, and take, let's say, a half an hour?

[00:01:48] Sound good? Then, go on ahead and hack up at this page, and this is all in folder number four, chapter four, and the name of that folder is pie 4-pie-flexbox. Have fun.