Columns & Cover Overview

[00:00:00]
>> So let's move on to our second challenge, so called challenge 1B, which is called Columns and Cover. So this is a longer piece of text plus an image. The markup is gonna remain the same while your layout is gonna change significantly through your breakpoints. So what was step one of our four-step process?

[00:00:24]
What is step one?
>> Study the screenshots.
>> Study these screenshots and evaluate what's going on here. So let us do that. All right, so this is the desktop version of the web page. Anybody wanna make any comments on this?
>> Text is in three columns
>> Text is in three columns.

[00:00:50]
>> The same width as the image, the whole text area.
>> It's all lined up there very nicely with the image, yeah, what else?
>> There's sizable margins at the side.
>> Kind of sizable margins at the side here on desktop, yeah.
>> Everything is left aligned within the overall centered boxes.

[00:01:10]
>> We're definitely left aligned, yeah. Anybody wanna comment on that content? So notice that we're going from preparing a cup of instant coffee more than made up for our perceived inferior taste. So these are not three separate chunks of text. This is the same article laid out in three columns.

[00:01:41]
Okay, that header, does that look familiar to you? Ha, that looks like something we might recycle, yeah, okay?
>> Is it intentional that Instant is a little bit different size than Coffee Facts?
>> Yes, it is.
>> Okay.
>> Okay, all right, when I go here, what's going on now?

[00:02:02]
>> Side by side.
>> Yeah, so now we have the image side by side with a column of text, and look at that, it's the same image. See the coffee packet here? Same image.
>> Nice, instead of making itself smaller to fit the new margins size that we wanna fit, it's instead zooming in and slicing out the image.

[00:02:24]
>> Yeah.
>> There's a better word for that.
>> Kind of masking is what we would call it in Photoshop, right? We call it masking. Okay, how do we do that magic? All right, with all the text here and one column on the side, yeah? And then here for mobile.

[00:02:43]
What's different here?
>> The order of the elements.
>> The order of the elements, right? For desktop, the image is at the bottom. For mobile, the image is at the top. Boy, yeah? Okay, so let's take a look real quick. Now at your beginning CodePen, or in the questions as well.

[00:03:08]
So when any developers see columns, they think about Flexbox or grid. Is that the best approach here? Anybody have any comment on that? So when developers see grid columns like this, they think about Flexbox or grid. Is that the right approach here?
>> I think so.
>> You think so, why?

[00:03:31]
>> I think yes because I took a class with you-
>> [LAUGH]
>> And we literally had things to rearrange orders of elements based on some fancy properties we would give them. And those would be able to be determined by media breakpoints, or media query breakpoints.
>> Yeah, there's some media query magic going on here to make the columns.

[00:03:53]
But Anna, you were disagreeing.
>> I was gonna say no just because I have not seen it applied this way [CROSSTALK]. I'm very excited to learn how to do that.
>> Okay, so remember that that break happened in the middle of a sentence. Okay, so Flexbox and grid assume that you're gonna have an HTML element bordering that chunk of text, right?

[00:04:17]
This is presumably in the middle of a paragraph that we have this break happening. Ooh.
>> These are three separate paragraphs.
>> There are three paragraphs, but the break in the text here is happening in the middle of the paragraph. Whoa, so I will point you to, the name of the challenge is Columns and Cover, okay?

[00:04:46]
There are some hints and spoilers down here that you can take a look at if you need to that might help you with this. Also, the other thing to think about is that the image is remaining the same in the same location in the code. So how do we get it to change the sizes so radically?

[00:05:02]
Again, the name of the challenge is columns and cover.
>> Cover.
>> Cover, cover, columns and cover, might be two things. If you wanna look at the hints and the spoilers, it might help you out here, okay? So if we open up our CodePen, let me just show you.

[00:05:21]
Your first step is going to be to take all of this content that you see here and mark it up semantically, okay? And then we're gonna go through the answer for that. The other thing I just wanna point you to here, this is the only time I have to point this out, is that I now have this thing around the styles, it's called @layer base.

[00:05:41]
And I put it in here, @layer is a way of managing the cascade inside of CSS. We are fake using it here just to group those base styles together that we wrote in the stylesheet, so that's what's in here. This is all the stuff that we just wrote in the stylesheet carrying over, all right?

[00:06:01]
And we can fold it up and forget about it now, cuz it's just going to apply to the semantic HTML, makes sense, okay.