Grid Project Overview

[00:00:00]
>> Let's move on to the next one. So, we're going on to 3. The Wacky Grid. Okay, so as you can see here for the Wacky Grid. We're gonna start with mobile. We have a bunch of images stacked on top of each other. We're gonna go to a tablet where we've got our images side by side.

[00:00:21]
One big one in the middle. And the we go on to this weirdo layout, they sort of look like they're kinda thrown in space, don't they? Okay, so let's look at these one at a time. Anyone wanna make a comment about this particular design? What is one of the things that stands out about this design?

[00:00:40]
>> One column and six rows.
>> Okay, one column, six rows. What else?
>> Everything identical size.
>> Everything's an identical size, including the height. That should bring to mind that object fit, object cover trick, right? Object position thing. Okay, so somehow we're gonna have to do that to make everything the same height and the same width.

[00:01:01]
So, that should be relatively straightforward, right? Okay? Then we go to one like this. What's going on here?
>> Coffee imposter in the middle.
>> Yes, the coffee imposter is in the middle. [LAUGH]
>> We've rearranged the croissant picture from the bottom to the middle.
>> Yeah.
>> And we've made it bigger taking up to columns.

[00:01:26]
>> Exactly. So, the croissant. This is the source order for the webpage. So, this is the order that the pictures are in the text and everything. Croissants at the bottom here. But, when we get to our tablet, we've put the croissant in the middle, okay? So, now we have to do something with our grid cells right for the layout here.

[00:01:47]
Okay, and then we get to the whacked out one. And this is not really obvious what's going on here, right? It's totally not possible, doesn't it? [LAUGH] How on earth could you make images do this weird thing? Only by accident, right?
>> It looks like maybe you might have an odd number of columns.

[00:02:12]
>> Yeah.
>> And be sort of staggering what appears where.
>> Yeah.
>> Look less gritty.
>> There you go. So, rather than saying, well, we have two images here. This obviously must be two columns, right? Does it have to be? No, you could have many more columns than that, right?

[00:02:32]
So, here's a hint for you. Here's a 12-column grid system. These were very popular in the bootstrap days, okay? So, here's your 12-column grid system and here are your images underneath. That should give you a hint about how this might be done, right? Your images are spanning various cells and rows here as you go along the way.

[00:02:58]
But fortunately, we don't start with desktop, do we? What do we start with? No, no, not mobile. What do we start with? Semantic HTML. Shame on you. Okay, so we start with semantic HTML. So, let's go ahead and do that first. There's make time for coffee. [LAUGH] There it is.

[00:03:25]
I've given you links to all of the images here inside of code pen. So, what I'm gonna need for you to do is to mark this up appropriately, and we'll talk about it in a moment, all right? All right. So, how did everybody do with the semantic HTML?

[00:03:47]
Good? Fantastic, tell me about what you did for your code? Yeah, Andrew.
>> I put absolutely everything in a wrapper.
>> Everything should go in a wrapper, okay? And what element did you use for your wrapper?
>> Div.
>> You can use a div. I use a section for my wrapper, because I felt like this was all kind of vaguely related information.

[00:04:12]
So, might be some sort of homepage layout kind of thing. But, you can certainly use a div as well that would be okay. What else? How did you mark up make time for coffee?
>> Put that all in an H1 put coffee in the span class with fancy text.

[00:04:27]
>> Yep.
>> But, I also put that in what I call the card div as well. Because, I know that going forward, we know that that make time for coffee had the same size as the images themselves. So, I noticed, maybe, they'll all wanna be in the same kind of wrapper.

[00:04:45]
>> Okay, so you put another wrapper around your H1?
>> Yeah, I called it little card.
>> Little card, okay. [LAUGH] All right. I did not put my H1 in that, but that is something to think about. We'll follow that away when we get to our mobile layout.

[00:05:02]
We might wanna put a div around that. And then for each of the images, you're gonna need to put a div around each one of your images. So, we have the image itself with the image element, right? The source I gave you and then, hopefully, you all put in Alt text.

[00:05:16]
Shame, shame if you did not. Put in your Alt text. And then around each one of those I put a div with and I gave mine a class of image hyphen wrapper. You might have called your something else, okay? So, the markup is really not terribly semantic. [LAUGH] Also not terribly difficult.

[00:05:35]
Because, the challenge here is really gonna be on the grid true. Okay, fantastic.