Mosaic Grid Exercise

[00:00:00]
>> So now that you've had some time to work with grid a little bit, see a couple of things demonstrated here. Now it's time to apply this to the webpage that we were working on at a sort of as an isolation first. And then you're going to incorporate it into the homepage of the website.

[00:00:17]
So let's start with 12 A, we're in chapter 12 now that's all of the files are available up on GitHub. And if you take a look inside of the website for the course, you'll see the instructions here for this part of the course in what you need to do and so forth.

[00:00:35]
So what we've got here first is the mosaic grid, so one of the popular things that people are doing these days, is taking a bunch of images that are perhaps portrait and orientation and landscape and orientation. And they're putting them together in some kind of cool looking layout.

[00:00:53]
And so we've done that here with the pop art collection of images. And this is what it should look like here on desktop. You see the layout of all of these images here. This is something that we wouldn't be able to achieve with flexbox. Before we were just put a series of images on our rows.

[00:01:11]
Now we need to think about this in two dimensions. So this is how I'd like it to look here on desktop. It will actually work just fine as well on tablet. And then, when we go to a mobile layout, this is the way then it's going to look.

[00:01:25]
We're gonna pile these on top of each other. So in this first exercise, what I'm gonna need for you to do is to, first of all, of course, repeat what I just showed you, take your fingers and your finger captions and get them to overlap each other, write the code to do that.

[00:01:42]
And then what I'd like for you to do is to write the grid layout here for desktop. Get all of the images here looking great in this one document in isolation. And get it working on mobile. So that will be step number one. Once you have that in place, if you still have a little bit of extra time, then I'd like you to go to the homepage of the website, and I'd like you to drop in pop art.

[00:02:08]
So we're gonna take out the collections layout that we just had, everything row by row, and we're gonna drop in this pop art layout in the web page instead. If you wanna keep the collections part of the homepage and just add on the pop art piece of this, that's totally okay too.

[00:02:26]
So when you put together your code for the first part of this challenge the 12A mosaic grid by itself, think about the code that you used in this homepage. So you probably want to set this up as a section, you probably want to set up the HTML accordingly to match kind of what we did but we're going to now apply grid for the layout instead of using flexbox for our particular layout.

[00:02:49]
Then you're gonna need to bring those styles that you write in isolation for the mosaic portion of 12A part of this challenge, and incorporate that into the homepage, that to sort of raise the level of look here in the homepage that we've been working on throughout the course.