10.2 There’s no place like home - Video Tutorials & Practice Problems

<v ->Now that we've set up our site to use a proper template,</v> let's return to CSS and style this homepage before moving on to adding extra pages to our site. So there's a lot of extra work we need to do here, Lee, right? To start styling this properly. <v ->Yeah, we need to move some things around</v> and put some of the content for our homepage in some extra containers, just to make it easier to target things and to make things more modular. <v ->Okay, so let's take a look at this.</v> So now we're, instead of working on default iHTML, we're mainly gonna be working on index iHTML. <v ->Exactly, right.</v> <v ->And also, (indistinct) .css.</v> We can prep that there. I'd like to kind of move things around. In fact, we don't really need to use this right now at all. <v ->No, we can close that.</v> <v ->We've got this all set up,</v> so we're gonna be doing our work on the specific pages now. All right. <v ->So the first thing,</v> we can go ahead and delete that test paragraph. <v ->Ah, okay.</v> <v ->And this whole section of content,</v> the founders and the bio boxes. <v ->Yeah.</v> <v ->We can put that in a new,</v> just generic homepage a wrapper div that will give a class. <v ->Okay.</v> <v ->Just call it home section.</v> <v ->Okay, home section.</v> <v ->Yep, idea here being that on a site,</v> you might have multiple sections that are kind of similar to this where you have just text content. Not all of it. You don't want that text. (speaking simultaneously) <v ->How much of, is it down to here?</v> <v ->Yeah.</v> <v ->Okay.</v> <v ->And you might want some of these sections</v> to have very similar margins, padding, size, all of that. So, it's easy sometimes to wrap your content like this in a generic section, that way you can target these things individually. <v ->Okay.</v> <v ->And then what we're gonna do</v> with that text at the bottom is actually cut that out and move it up to the top. <v ->Okay.</v> <v ->Right above our new home section.</v> And we're gonna wrap this in a div with a class of home call out. And so this is gonna be a little break between our hero and the main content on the page with just some extra information. <v ->Okay.</v> <v ->And what we're gonna do here is</v> we're gonna actually add in a title with a class of call out title, and it's gonna say the learn enough story. <v ->Okay, so in each one.</v> <v ->Mm-hmm.</v> And then we're gonna wrap the rest of the content in a div with a class of call out copy. So we're gonna style this up later. <v ->Yeah.</v> <v ->But the idea here is that we've got</v> one section of content that has the bios and is more just like a page of content. And then one that is gonna be more graphical and is more like when you're reading a magazine and you see a pull quote, something that just gets your attention and breaks up the flow of content. So it's not just one giant page of white background with black text. <v ->Yeah, and there was something else I think we deleted.</v> This here, this extra. <v ->Oh yeah, we deleted the extra bio box.</v> Originally I put that in there so that the math would be easier. So we didn't have to use fractional units. <v ->Right, for when we were talking about</v> putting things next to each other. <v ->Exactly.</v> <v ->Right, yeah.</v> <v ->Yeah.</v> Wanted it to all fit on the page better without having to have remainders. <v ->Yep, all right.</v> Is this what it should look like or. <v ->Yeah, it shouldn't look very good at this point</v> because up to this point, our status have been focused on making it, what was there look decent-ish. So now we're gonna take our new changes and make a whole bunch of style declarations that'll make it look a lot better. <v ->Okay, so let's just double check</v> that we've gotta everything. So there's the full hero, hero home on and then social list. Okay, that's right. So we've added another div here and another div inside just to make it easier to target things. And we'll learn more about this philosophy of adding wrappers as we go through the rest of this chapter. Then there's a home section, just double checking my indentation levels too. That's good, all right, cool. So where are we gonna get started with our styling? <v ->So we should probably just start at the top.</v> <v ->Okay.</v> <v ->So we'll make some changes to the hero first.</v> <v ->All right.</v> <v ->So currently our full hero</v> is set to 50% or 50 view height, which doesn't exactly make it full, like full screen. <v ->Yeah.</v> <v ->So let's change that to 100 view height.</v> So that'll make it so that this section of the page will be the only thing that you see when you load the page. <v ->Ah, like that, okay.</v> <v ->And we should add an image in there</v> because we can. <v ->Okay, yeah, it'll look nice.</v> <v ->So we have one on the cdn.</v> <v ->Right.</v> <v ->But we can add the style for it first.</v> <v ->Right.</v> <v ->So if you know the name of the image,</v> you don't have to first download it to put it in there. You can just write out the styles. So a lot of times, when working on a page, I know that the hero is gonna be called something hero, or I already have it, so I'll just go ahead and add the styles in. So in this case it's gonna be shark.JPEG. <v ->Right, okay, so this is the background image</v> of declaration, right? <v ->Right.</v> <v ->And then we can give it a URL</v> and we will use an absolute path again, the way we did with the header, right? <v ->Yeah, and background image works like background color,</v> except instead of a solid color, it's an image. <v ->Right.</v> <v ->And then there's some</v> additional things that you can play around with for that. <v ->Okay, and it looks like there's a little bit more</v> padding too in the full hero, there's some extra styling in terms of ... <v ->Right, so one thing, if you go back to the site.</v> <v ->Yeah.</v> <v ->You'll notice that we do have an h1 up there</v> in the HTML, but you can't see it, and ... <v ->Oh, it's true.</v> <v ->And it's underneath that.</v> <v ->Yeah, it's this one.</v> It's though I'm in h1 it's missing. <v ->So we need to add some padding</v> to the top of this full hero to move that text out. But at the same time, we don't want the padding to increase the size of it, so we need to use our box sizing trick so that- <v ->All right.</v> <v ->everything stays the same.</v> <v ->What happened here,</v> we wanna use the box sizing border box because otherwise what this is extending down too far. <v ->That's correct, yeah.</v> <v ->Yeah, so right now it's like the view height, 100% plus-</v> <v ->Another 10, yeah.</v> <v ->Right, plus the 10 VH.</v> That's another 10%. <v ->Yeah, we want it to be exact.</v> so that it fills the screen. <v ->Like that, and now it should,</v> if we scroll down and we should see it immediately change. <v ->Right.</v> <v ->There it is, good.</v> <v ->One thing to note is that we added the background image</v> on hero home instead of full hero. And the reason for that is that this way we can reuse that full hero and we're not gonna have to undo a background image every time that we put it on the site. <v ->Right, so we could use it on a different page</v> with a different image thing. <v ->Exactly, 'cause we might wanna have the exact same sizing</v> and everything for a full screen hero, which is a different background image. <v ->That makes sense.</v> Right, and here is where it's specified at home. This is we could do like hero about or hero to some other page. <v ->Exactly.</v> <v ->Cool, and one of the things that you might notice here</v> is that it's still working. This page is still working, even though there is no file called shark.JPEG currently. So this is one of the aspects of CSS that's important to understand, which is that it's quite fault tolerant. It's designed to basically work even if you mess something up like this. So rather than just crashing the page, it gracefully degrades. Of course, that can make it hard sometimes to track things down if something isn't working. So let's download that image now. So on the line of cdn. There we go. So here's what the image looks like. Just to give us a sense of what it ought to look like on the page more or less. <v ->And yes, I took that picture.</v> <v ->Oh yes.</v> If you look at Lee's bio, it says that something about literally swimming with sharks. Well, that was actually swimming with sharks. So it's ... <v ->Although I wasn't really swimming,</v> I was in a cage. <v ->Well, okay.</v> You don't have to tell 'em that. He was free swimming with the great white sharks. So this is a great white shark though. And let's take a look. Aha! Well, we saw what the image looked like, but now looks like the shark is swimming off the page. <v ->Yeah.</v> <v ->It's like, see you later guys. (laughs)</v> <v ->It might be better to have that fixed.</v> So the problem here is that when you insert an image into an element using the background image, it's throwing the whole image in there. There's nothing that's changing about the size of it, the shape of it, nothing is being done to it. It doesn't even know anything about the image really. It's just attaching it in. But there are styles that we can use and thankfully they've come into existence because otherwise this would be impossible to do, but there's styles we can use that actually will resize the background image and make it fit the space. So for the full hero, we can change the styles to add in background size and we're gonna use a value of cover. And what that means is it's gonna resize the image so that the whole element has the background covered. <v ->Okay.</v> <v ->So it's trying to do whatever possible to make it so that</v> nothing is showing through the background of the element. <v ->Right.</v> <v ->Yep.</v> <v ->Okay, well this is not quite</v> what you might want though, right? It would be nice to center it maybe. <v ->Right, well, just real quick to show another example,</v> there's another background size value that you can use called contain. And what that does is let's try that it resizes the image so that the entire image fits into the element. <v ->Ah, like it's trying refresh.</v> <v ->So you can see there's a little bit of</v> background coming through. <v ->Yeah, now the bottom here is showing ...</v> Yes, it's the bottom of the hero. <v ->Right, so we don't want that.</v> We want to use cover so that the whole thing is covered. But like Michael was just saying, we also want it to be centered because if we go back and change it to cover and then open up the page in a new window and then resize it, we'll see that it doesn't fit right depending on the size of your browser, it just keeps moving around. Oh, that was actually a very cool effect. (laughs) <v ->That was a cool effect.</v> <v ->I was a little surprised by that honestly. (laughs)</v> <v ->Yeah, me too.</v> You can see there were kind of lined up here. It's amazing. Is that just a coincidence? <v ->That was just a coincidence.</v> <v ->That was really cool.</v> But yeah, so that was actually, let's move it around here. We can see that as we resize the window, the shark gets cut off like that. <v ->Yeah, and that's not so good.</v> So there's another background image style that we can use or property, which is background position. <v ->Okay.</v> <v ->And we'll add that in,</v> and like other positioning styles, the values for this are first X axis and then second Y axis although there's no comma here. <v ->Yeah.</v> <v ->So Michael will type in background position on hero.</v> <v ->Yeah and we're gonna put it in the hero home.</v> Why are we putting background size cover in the full hero, and then the specific rule here- <v ->Because we always want the image to cover</v> these full screen heroes, but depending on the image that we're using, we might not want it to be the same position. <v ->Okay.</v> <v ->Yeah.</v> <v ->'Cause if it's a different image,</v> we might wanna move it around in a different way. <v ->Exactly, it might just be better to have it</v> so that the right hand side gets cut off like we just saw when you're resizing. It just depends on the image. So just for full flexibility, we're gonna do it here on the hero home. So this is the X axis, and we can actually use a value of center, which means that it's gonna be centered left and right. <v ->Okay.</v> <v ->And then for the Y axis,</v> we can pin it to the top. <v ->Okay.</v> <v ->And so that'll make sure that the top of the image</v> is always at the top of the element that it's the background of. <v ->So again, something we've mentioned before,</v> this is not the kind of thing that you have to memorize. There are lots of online resources where you can just look up all of the different kinds of values you can give to background position. So this tutorial is not designed to be an encyclopedia or a dictionary. Remember we talked about you can't learn how to do this using the dictionary. That doesn't mean the dictionary isn't useful though. So we're not gonna provide you with the dictionary. We're giving you the tools you need to understand it. So let's take a look and refresh. Aha, nice. <v ->And if we were to open up another window and resize it,</v> <v ->Right.</v> <v ->We'll see that the shark stays center top.</v> <v ->Now look at that, even resizes the shark.</v> And I can see already how this is going to make it look better on mobile. <v ->Exactly.</v> <v ->Like if you make it thin.</v> Yeah, that makes a huge difference. That's really cool. I don't know if I've seen this where you can resize it and it makes me makes things smaller, bigger. That's great. <v ->Welcome to the world of responsive designs.</v> <v ->Yeah, this is great.</v> I mean, I'm learning stuff. This is really exciting. All right, we've got a couple more things to add, is that right? <v ->Yep.</v> <v ->So this is really a massive improvement on the hero,</v> but we're gonna add a little bit more, and we've got this kind of background, h1. We're gonna change this I'm an h1 to something that's a little nicer. And it looks like we're adding another div, is that right? <v ->Yep. Once again, we are adding another div.</v> <v ->And this time it's gonna be the class hero content.</v> <v ->And we're adding this so it'll be easier to</v> position our h1 and ul. <v ->Okay, let's cut these and then paste them in.</v> And let's change this to something that actually reflects the site a little. We're gonna say code dangerously. Doesn't have to be all caps, but for some reason typed it that way. <v ->Looks pretty cool.</v> Yeah, we could have used a text transform, I suppose, on the hero content, but in this case, yeah, I mean, this is another example of the subjective aspects of this design. <v ->Yep, and the reason that we're wrapping this</v> in a new wrapper is that we're going to position this vertically and horizontally in the center. And it's really hard to do that when you have two elements. So before we added the wrapper, we had both the h1 and the ul with all its allies. <v ->Yeah.</v> <v ->So getting them both to play nicely,</v> and center vertically and horizontally would be difficult if they were separate. So by putting them into a wrapper, we only are then positioning one thing, and that makes our job a lot easier. <v ->Okay, cool.</v> So let's actually do that. It's gonna be in the hero content, which this is new, right? We don't have any styles for this. We just added that class. And so one option here would be, if you remember, from the positioning section, we could position everything absolutely, and give values for this hero content and make sure that we set a position relative so that this is contained within the home hero. But I think it might be easier for us to use the translate trick. <v ->Okay, yeah, let's do the</v> positioning stuff first here, position. <v ->Yeah, we need a position relative on this</v> so that we're setting a position that'll allow us to also then set a top of 50%. <v ->Yeah.</v> So I'm gonna take a look at what that does. Okay, so this is 50% of ... <v ->It is, there's ...</v> <v ->Of what?</v> Of the size of the container? <v ->Yes, it's starting at the 50% point</v> of the whole full hero. <v ->Okay, and then we're going to translate it</v> but to the right of half of its distance to center, right? <v ->No, we're gonna use textline center</v> to center it horizontally. <v ->Oh, okay.</v> <v ->We're gonna use translate to translate it up.</v> And it'll be translating up half of the height of hero content. <v ->I got it.</v> <v ->So that'll move it to the center.</v> And now we're gonna move it up half. <v ->So that's with the transform ...</v> <v ->Yeah, the transform translate.</v> And remember the first value is an X value, which we're gonna not make any changes to so zero, and then we want it to move up by half of the size of the element. <v ->Got it, so take a look at that.</v> <v ->There we go.</v> <v ->And now I noticed that we actually do have</v> a text transform here to uppercase. This is kind of a little bit of a belt and suspenders approach to do it both ways. <v ->Yeah, I think that was added in there</v> just to make sure that if we add any other content in it'll match. <v ->Yeah.</v> <v ->Sometimes when you're working on something like this,</v> even if you type it in all in uppercase, you aren't ever certain that someone isn't gonna come along later and type in something that's gonna be mixed case. <v ->Yeah.</v> <v ->So sometimes it's nice to make sure that you are</v> covering your butt and making sure that someone else's changes won't change the way that the site looks. This becomes especially important when you start making real web applications that have dynamic content. So in that case, you always want to do this thing where you are specifying exactly how you want it to be displayed, because you can never be assured of what content is gonna be spit out by the application. <v ->Cool, all right.</v> We've got a few more changes here. So in the hero content, we're just gonna make all of the text white. <v ->Mm-hmm, and again, this is the same idea.</v> So what we're doing here is we are making it so that if anything is added in there, any other text, then it'll be white. But we are gonna add in some specific styles for the h1. <v ->Right.</v> <v ->And instead of pure white,</v> like we added for the hero content, in general, we're gonna make this one partially transparent. <v ->Right, which is, so this is rgba.</v> where a is the alpha level, and white in this case is 255 maxed out. But then we'll say 0.8. So that's, is that 20% transparent? <v ->Yeah.</v> <v ->Okay, so let's take a look at that.</v> Oh yeah, it's very subtle. <v ->You can see the shark fin through it.</v> And that was the effect that we were going through. <v ->Right, so if we cover this out,</v> we can see right here. Yeah, now it cuts across the fin, but with the alpha level set. Oh, that's really nice. <v ->So then the other thing that we should do here,</v> because this is our homepage header is let's change the font size to something that adapts to the screen size. So Michael, if you open this up in another window. <v ->Yeah, I'll do that.</v> <v ->And resize it.</v> <v ->Right, well, yeah, we can, I'll not save it.</v> Let's do a demo here. So is it resizing now? Looks like it is. <v ->Oh, did we add that before?</v> <v ->I don't think so.</v> Is it a Safari theme? <v ->No, it's in, yeah.</v> We added that before. <v ->Where is it?</v> <v ->It's in the general global section.</v> So we added a h1 have a seven view height. <v ->Oh, look at that.</v> Seven view width. <v ->Or view width, sorry.</v> <v ->Oh yeah, that's what it is here.</v> Okay, so we actually have set that up, what do we wanna do about that? <v ->So we wanna move it so that this full hero,</v> the hero content always has that. Because there's a chance that that might get changed for h1s across the site. <v ->Exactly, so if we did this here.</v> <v ->Right.</v> <v ->Now it's always,</v> well, we could do it as something bigger. If this were say, I don't know, is this too big? <v ->That's gonna be gigantic.</v> (Lee and Michael laughing) Seven is even gonna be huge, but. <v ->Okay, (chuckles) let's do it like a 4m.</v> Right, so here it's not adapting. It's just always the same size. <v ->Yeah.</v> <v ->All right.</v> So let's restore that. And so this is basically just a little bit of future proofing again. There's no harm in some redundancy if it actually serves a purpose, right. This says, if someone later on is styling the global h1s, we still want this one to be, what is it? 7% of the view port width. <v ->Right.</v> <v ->Got it.</v> So if we save that and refresh, now it actually scales. It's coming. Yeah, look at that. Because remember I was looking at the height mainly here, but of course it's scaling with the width not the height. <v ->Mm-hmm.</v> <v ->Cool.</v> <v ->So again, this is modularizing this hero thing.</v> So like Michael said, it is a little redundant to have that thing in there, but if you're making a module, like we are for the hero, you wanna be able to drop this in on other pages or have it just display the same, no matter what the context is. <v ->Right.</v> <v ->Yeah.</v> <v ->Great, and there's one more thing there's,</v> we were gonna add a little margin. <v ->Yeah, just to move the social icons</v> a little bit away from the text. <v ->Yeah, that is a little tight there.</v> So let's do that. Yeah, looks nicer now. <v ->Yeah, a little space is always a helpful thing.</v> <v ->All right, and now we're gonna look at these</v> social links, right? <v ->Yeah, they don't do anything.</v> We never added a hero state for them. And in this case we want a hero state that works well with our content in the hero. I mean, a hover state that works well with our content in the hero. So we should change these to have a background color of black. <v ->So black or white?</v> <v ->Background color of black.</v> And we'll change the color of the text to white. <v ->I think that's for the hover state though, right?</v> <v ->Oh, I'm sorry.</v> I was jumping to the hover state. Yeah, we actually wanna style these first. <v ->Let's do that.</v> <v ->Actually gonna use the same thing here.</v> <v ->Yeah.</v> <v ->This is the same we used up here.</v> <v ->Right, so that it matches the title.</v> <v ->Right.</v> <v ->And then we'll use a color</v> that I picked from a color picker just by sampling a blue that was in the background image. <v ->Ah, yeah.</v> Okay, yeah, we can see nothing happens on hover so let's fix that up. Copy this here. So this is the pseudo class hover, right? We've used this before, but so now we'll change the background color. You said you wanted to make it black. <v ->Mm-hmm.</v> <v ->And then I'm done change the color.</v> Yeah, so if we do this, then it probably won't look all that great. <v ->No, it'll be difficult to read the text.</v> <v ->Right, so we wanna change the color to white.</v> Well, that looks good. All right, so this is starting to come together and we'll be polishing it up even more. But this is a really good start on the hero image. You can see, actually, we can do a trick here. I'm gonna add things and then I'm gonna stash. This says get stash, which basically just removes all the stuff we just did. So we went from here to here. That's a lot better. <v ->And now we're going to tackle the rest of the page too.</v> <v ->All right, let's get going.</v>