Alternating Layout Practice

[00:00:00]
>> All right, so let's wrap up chapter number five. This is the last piece of this. Here's what I would like for you to do. This is the additional projects portion of the course. So what we've got here is a series of projects. And you'll see that there's that first project.

[00:00:18]
We've already got that coded. We've got the projects I'm proud of, that's all coded. But now we've got two more. And so one of these looks very similar. That's the Wall of Wonder collection. But then we have this Feed-A-Star-Mole game that is a reverse layout. So instead of having the image on the left and the text on the right, we reverse those two.

[00:00:42]
So that is your next challenge. And I have given you your beginning CodePen. I'm giving you answers for all of the images on the left, all of the text on the right. If it feels like too much for you to try to make one go the other way, there's an answer for that.

[00:00:57]
That would probably be the best approach to start with. And then if you have time, see if you can make that middle one and just the middle one do the reverse layout. And then we'll come back and I will give you my answer. Let's take a look at the same side layout CodePen here and see what happened.

[00:01:24]
So I gave you all of the text and the pictures and everything that you needed. So the big challenge here in making the same side-by-side layout like this was very simply just making sure the HTML is the same for all of the projects. So what you hopefully did was you went through each one of these projects, turned it into an article, gave it that div with a class of text.

[00:01:51]
Marked up each one of these projects the same way with the h3s and the h4s and the paragraphs with the class of blackbox, and so forth. And so in theory, it should all then look exactly like this because we established the pattern with the first project. And the other two projects then, if they're marked up the same way, they should wind up looking the same way, too.

[00:02:15]
You shouldn't have to adjust any CSS for those succeeding projects. And, of course, if you wanted to make your screen a little bit smaller, you should see how nicely everything stacks on top of each other. Okay, so that's the same side part of that. Once you have that working, so the markup is correct and it's on the same side, then the next question is how do we get that alternating layout?

[00:02:44]
And so the way that you would go about doing that is this. So in the HTML for that second project, I set up an article with a class of reverse, because that's what it is, it's reversing. And then we just set up some exceptions with that reverse class.

[00:03:01]
So in our CSS, what we'll do inside the media query, so here, for projects reverse, I just read a few styles to reverse this. So instead of projects or just the regular old text, here I've said projects reverse text, has a different configuration for our grid column, a different configuration for the order, and so forth.

[00:03:25]
So some of those numbers change. And instead of saying flex-end for our list that we have here at the end, we go back and tell it to do a flex-start again. So it's really just these three classes here that you would need in order to reverse this. We're just gonna change what columns and the ordering of the image and the text to make these things then overlap each other.

[00:03:52]
So that's all there is to that and making all of the rest of this go in place.