Background & Overflow Project Overview

[00:00:00]
>> All right, great, so let's move on then. Woo, we're going on to the second challenge. We're going on to backgrounds and overflow, okay? So this is another crazy one. And I think, well, let's see. Let me show it to you this way. Instead of showing you the screenshots, Let's just start here.

[00:00:31]
And let's go to Full Page View. Okay, so here's the way this one is gonna work. So when we're at small screen sizes, we're going to have a scroll bar here. And we can scroll over and see all of the various kinds of images that we have here in place, okay?

[00:00:51]
And I will give you a little hint, this is a standard browser scroll bar, okay? Cuz there's no JavaScript in this. Obviously, one of the things that you could do to take this to the next level is put in some JavaScript and give it some arrows and make it a little nicer looking, but this is just a horizontal scroll bar here.

[00:01:12]
And then when we get to a larger size, Now we got rid of all those images somehow. We have our numbers here. We have a picture. And we have some text and so forth over here on the side. And when we get to the even larger size here, Look at that image.

[00:01:35]
Notice how that image moves, right? So this is what we're gonna see here at larger screen sizes. So let's talk about it, What do you see here in the mobile view? Anybody wanna talk about what you see here in the mobile view of things you have to consider?

[00:01:58]
>> Everything in the single column, all stacked. But if it is over the display, the scroll bar is automatically up here and then we scroll and see the items
>> And we're gonna have scroll to see the items, yeah. So somehow, we have to set all of those items up individually and then we have to make them go such that we can scroll side to side.

[00:02:22]
Make sense? What styles can we reuse that we already have?
>> fancy-text.
>> fancy-text. Yeah, so there, that's already done. We just apply fancy-text there. What is worrying you at this point? What are you looking at and going, my gosh, I have no idea how to do that?

[00:02:44]
>> Make sure the scroll bar shows up.
>> Make sure the scroll bar shows up, yeah?
>> I'm interested, cuz I've run into this problem before, the problem of actually ensuring that the last thing that's visible on your screen isn't completely visible so the user is encouraged to scroll.

[00:03:03]
So I'm wondering if there's something in the code that determines that it will actually spill over, force it to spill over.
>> Okay, I think if you just make things big enough, you'll find that it will magically do that, cuz this is for tiny screens. If we were doing this on desktop, I would completely understand what you're talking about, but this is a small enough screen that I think it's gonna it's gonna happen for you.

[00:03:23]
You won't have to worry too much about that, other points?
>> See the paragraphs is not.
>> Yeah, we had a paragraph of information somewhere which is no longer here. So we've got things appearing and disappearing, right? Okay, let's take a look at the tablet one. Talking about things that are appearing and disappearing, what's going on?

[00:03:47]
>> Paragraph text appears, but only for the main one.
>> Only for the first one, what else happened?
>> Justify to the end of the number. While the image in there is justified to the header.
>> Yeah, so we're gonna have something going on here. Yeah, what else?

[00:04:05]
>> Extra content is in a separate section, or maybe section below the main content instead of scrolling to the side.
>> Yeah, we got that going on. Nobody's mentioning this image here, what happened to it?
>> I assume it's available with the extra content when you click on the header for that.

[00:04:24]
>> Yeah, so we're just doing HTML and CSS. So yeah, in JavaScript, you could make things appear and disappear on click. We don't have an onclick in CSS, that's not a thing. So you don't have to worry about that, but somehow you're gonna have to hide those images, right, in here, okay?

[00:04:42]
And then for our max-width.
>> Very similar to the last one, except moving that bottom content to a side.
>> Move the bottom content to the side, right? Take that and now we're gonna put it next to that information to take up more room horizontally, okay? So this is kinda crazy.

[00:05:07]
So here's a couple of things to think about. So usually when working with CSS layouts, we have flexible widths on each cell. Units like percents or rems or fr, that fraction unit or vw, does it ever make sense to use a fixed width in a layout?
>> In this case, yes.

[00:05:28]
>> Look at those numbers, what do you think about those numbers? [INAUDIBLE]
>> Yeah, they kinda all have the same widths, don't they? They're always a skinny width, not really a fraction. So you may wanna play around with some another units of measure for those. And you might also wanna have a range of widths.

[00:05:52]
Sometimes things can get too wide, okay? So there's some hints and spoilers here if you wanna take a look at them. And I'll just point out that I've given you some next level ideas, right? How could you load the content? You need to achieve each layout at each breakpoint rather than loading it all and turning it on and off, which is what we're going to do here.

[00:06:13]
And of course, you could also think about some JavaScript to make that mobile version look a little bit nicer too if you wanted to go next level, but I won't go over that. So we now talked about these designs and looked at them and thought about them, what's our next step?

[00:06:31]
>> HTML.
>> Semantic HTML. So that is the next thing you're going to do. Here's your starting CodePen. I've given you, once again, here's your base styles that we wrote in our first exercise. You'll see here, there's all of the text, and I've given you the images as well.

[00:06:49]
How will you mark these up? So go on ahead and see if you can mark these up. All right, so let's take a look at the HTML and how we mark this up. So everybody here in the room, how did we start?
>> The header.
>> We started with the header.

[00:07:10]
Yay, looks kind of familiar. Header is up here at the start, slash header at the end, okay? And what did we do in between the header tags?
>> h1.
>> h1, that's definitely an h1. And what else?
>> We have a span for the fancy-text.
>> Span for the fancy-text around the word five.

[00:07:38]
So span class="fancy-text", Five. Awesome. Okay, good. All right, so then there's the rest of it. [LAUGH] Okay, so what do you guys think? I'm gonna focus on just marking up one card because all the rest of them are gonna be exactly the same, make sense? Okay, so clearly, we need to have a bunch of cards, right?

[00:08:13]
How did you mark up those cards?
>> First, by separating it out and putting it all in a div.
>> So you put a div here?
>> Yeah, around the outside of things.
>> Okay, and did you give a class to that or anything?
>> I actually didn't yet, but I assume.

[00:08:28]
>> Okay.
>> There should be something, because that would determine its own boundaries
>> Great, so you called this div with a class of wrapper that started all those things. And then down at the very end, you put in a slash div, right?
>> You're getting ahead of me.

[00:08:43]
That was smarter. No, I was thinking of a wrapper for each individual card. But you're right, we do need something for all of them to be put into.
>> Okay, so we need both of those things. We need one that goes around everything. So there's our div with a class of wrapper.

[00:08:55]
And then around each card, we also need to have some kind of item. And these are not, they're kind of vaguely related, right? Those are related, headline and an image and a paragraph of text. They're not syndicated, right? They're not really stand-alone. So my sense of this was that a div is just fine here because it's really not communicating a whole lot of meaning.

[00:09:24]
This is kind of one of those patterns that you might find on a news website, that would be our top five articles today are these five things, or whatever. So I've just used a div with a class of what? Something super creative like card? And that of course will end at each card.

[00:09:46]
So slash div around each of those cards. What else did we know that was true?
>> We need to separate out the number 1, the numeral 1 there.
>> We need to somehow separate this number 1 from the heading, right? And the purpose of that separation is just to stick a class on it.

[00:10:09]
And if you put fancy-text here, that would be fine. Slash div, something like that.
>> Maybe eventually.
>> Maybe eventually, or what I actually did was I put in a class here of number, because it's a number. [LAUGH] And we're gonna use something like fancy-text, but there's some other styling that goes with that, okay?

[00:10:42]
And then after Coffee Shops Boost Creativity, what do we say? Heading 2, maybe. Remember, if it doesn't look exactly as you want, you can always change that later by adding a class to it, but the markup is an h2 cuz we have an h1 at the start of the page.

[00:11:01]
So these should be h2s. We'll probably wind up putting some kind of div around the image, class of card-image, right? Often, that's needed for styling purposes. And then we have our paragraph of information. And then we have our slash div. So if you format HTML there, it'll do all the indents for you right here inside of CodePen.

[00:11:29]
Just a little drop-down window here, it'll do that for you. Okay, so that is the pattern here for the card. And you would continue that pattern all the way down for the remaining two, three, four and five. It's gonna be exactly the same pattern, but it is going to be just repeated over and over again.

[00:11:55]
Any questions on that?
>> Is there any advantage to using the, sorry, I'm forgetting, but the image thing where we have the built-in caption. I so apologize that I don't remember that
>> Figure.
>> Figure.
>> Yeah, I mean, you could always argue that maybe a figure makes sense somewhere along the way.

[00:12:21]
You can certainly do that. I tend to use figure when I have a caption, and I tend to use a div when I don't.
>> Sure.
>> Yeah.
>> Would you say this paragraph fits like a caption. I suppose by your choice you'd say not really?
>> I'd say not really, because the article titles Coffee Shops Boosts Creativity.

[00:12:37]
And then whether it's just enough noise or the continuous stream of people, studies show that coffee shops boost creativity. So that's the deck, the introduction.
>> Sure, sure.
>> And there's probably a read more link in here, even though I haven't put one in, yeah.