CSS Grids and Flexbox for Responsive Web Design Flexbox Exercise 1 Setup: Content Manipulation

Transcript from the "Flexbox Exercise 1 Setup: Content Manipulation" Lesson

[00:00:00]
>> Jen: Here's what I'd like for you to do, in your HTML, I want you to add a fifth row.
>> Jen: Okay, so let me hit Return a few times so you can see what I'm doing.
>> Jen: All right, so here's what I'd like for you to do, I'm gonna copy row number one

[00:00:23]
>> Jen: Just for its content and stuff, I'm gonna paste it down here at the bottom, after the end of row four. So on line 79, I'll go ahead and paste in effectively what is row one again. What I want you to do is, I want you to do this as a row five, and what we're gonna do is we're gonna do a 1-2-1 layout.

[00:00:46] So in other words, a left column, a wider center column, and a narrow right column, okay? So we need three articles to achieve that, so you're gonna get rid of the pumpkin pie at the end. And obviously these are not the right classes, so I'm gonna remove those as well.

[00:01:10]
>> Jen: So I want you to do the following in this row number five that we've just created. First of all, what I'd like you to do is to figure out how you can get it to work on desktop, one, two, one, okay, one, two, one, all right? And then, as an additional step, I want you give some thought as to what this would look like on, let's say tablet or mobile.

[00:01:38] And the order that I'd like to have is that center column of information to be listed first, followed by the left and right columns next to each other.
>> Jen: Okay, do I need to draw a diagram, or? Yes, draw a diagram.
>> Jen: Draw a diagram.
>> Jen: Okay, desktop dimensions, that's how I want the row to look, 1, 2, 1, okay?

[00:02:18] And then when you go to, say tablet dimensions, I want it to look this way, 2 at the top, 1 and 1 underneath, don't rearrange your HTML.
>> [SOUND]
>> Jen: See if you can do it without rearranging your HTML.
>> Speaker 2: Why are you using 44%?
>> Jen: Why am I using 44%?

[00:02:44] Because in our first row where we had the four boxes. Gonna go back to my PowerPoint here.
>> Jen: [COUGH] Each of these boxes is 20% red, so 20%, 20%, 20%, 20%. If I combine two of these, so I've got column 1 here and column 1 here, so 20 and 20 is 40.

[00:03:09] Don't forget the margin in between these, which is 4%, so it becomes 44%, okay? Other questions?
>> Speaker 2: Regarding the column names, what does column-1-4 mean exactly?
>> Jen: So it's gonna go from from one column wide to four columns wide. This is my convention, and as Peter was pointing out earlier, maybe it doesn't work for you, maybe it's not understandable for you.

[00:03:41] That's totally okay, you can call your classes whatever you want.
>> Speaker 2: So it'll be one item at a certain screen width?
>> Jen: Yes.
>> Speaker 2: And then four items wide at the greatest screen width.
>> Jen: Correct, one column wide to four columns wide, or one column wide to two columns wide, that's where my numbers are coming from.

[00:04:01]
>> Speaker 2: Are you looking for that much margin below the first row?
>> Jen: 4% under the first row? That would really be a design decision. If you wanna have margin in between your rows, you can certainly add that. I think most float-based grid systems don't have that, but you can certainly add that easily enough.

[00:04:24]
>> Speaker 2: Can you make your style sheet visible, trying to recall follow the naming convention?
>> Jen: Sure, put up the style sheet.
>> Speaker 2: I mean, is that in the repo that we can just-
>> Jen: Yep, it's in the answers.
>> Speaker 2: I can just link to it.
>> Jen: Yep, you can take a look at the end state, and that's got all of the CSS in it.

[00:04:44] So in the chapter three folder, if you look inside of the end folder, you can take a look at what's there in terms of the HTML and the CSS. In this particular exercise, what we're going to do is,
>> Jen: You've added a fifth row to your HTML.
>> Speaker 2: I think they're talking about the files

[00:05:02]
>> Jen: There are no files, just keep working with the files that you have.
>> Speaker 3: Okay, so you can still create new classes, right?
>> Jen: Yes, absolutely, absolutely, create new classes. If you can't do it without rearranging the HTML, feel free to rearrange the HTML.