Complete Intro to Web Development, v2 HTML & CSS Project Solution

Transcript from the "HTML & CSS Project Solution" Lesson

[00:00:00]
>> So, let's go ahead and start styling these. Let's start by styling a story. So if we come back over here and look at our mock up here, the whole thing has these kind of black bars on the top and black bars on the bottom. Let's kind of start with kind of the borders looking here.

[00:00:20] So, I'm gonna say border, how do I do it inside of here? I did it with just, okay, so, a story has a border of 1px solid, we'll say, you can say black, black is like the blackest black that it can do. A really nice black that I quite like is #333, it's a nice like a little bit softer black.

[00:00:49] So that's what I tend to use. So you can see here, these now have a black border on them. Typically you don't want text pushed up right against the side, it looks a little mushed together. Just a nice, a little bit of padding gives it a little bit of breathing room.

[00:01:05] So if you put it like 5px or something like that, it just pushes things away from the sides and makes it look a little nicer. Okay, I'm gonna do something with the row here, I'm gonna make this display: flex; right, make sense? And I'm gonna do align-items, and I want everything to be the same height, right?

[00:01:37] That's something that we kind of see over here, everything is the same height. Even though like this is not actually taking up this, there's a lot of white space down here, that's okay. So we're gonna do align-items:stretch;, and now if we come back over here, refresh, now it's kind of starting to take some shape, kind of fix these titles a little bit.

[00:02:05] So, come up here and do story-title, we're gonna make this font-weight:normal;, I made it italics in there as well so this is gonna be text-style, no, font-style: Italic. Let's do font-size:, maybe 30px and give it a bit of margin on both sides so I'm gonna say margin: maybe let's go with 15px 0, and then text-align:center.

[00:02:46] Starting to look a little bit more like what we have over here. Yeah, looking better. Another pro tip is if you have dense text like this, this is kind of hard to read for people. So, we can give it maybe a little bit more, we're gonna go under here and do story-text.

[00:03:10] There's a thing called line-height, which is how much like space to put between things, like how things can be double spaced or whatever. Usually, at least for dense text like that, you want it to be at least 1.2, which is like 1.2 normal spacing. It's a multiplier, you can think of that as being like a multiplier.

[00:03:27] I'll give it like 1.5 just so it looks a little bit more spaced out. And now it breathes a little bit more, it's a little bit easier to see. Cool, So that looks pretty good, we want this to be a little bit more, we wanted this one to be bigger in the middle rather than the ones on the side.

[00:03:55] Right now it's split into thirds and we would like it to be more like split into 25, 50, 25. A couple ways we could do that. The easiest way is to set the quarter to be 25% width, oops, width: 25%. Now, if we come back over here that looks terrible, [LAUGH] not at all what I was intending to do.

[00:04:25] And then have the half be width 50%, Yeah, that looks like a little bit more of spaced out. Another way you could do this is you can use what's called flex grow, we look at Flexbox. This one I have to look up cuz I can't always remember. So there's order, flex-grow, yep, that's what I thought.

[00:04:53] So instead of doing width 25%, you could do is say flex-grow and for quarter you want it to be one unit, right? And then you want this one to be flex-grow:2 cuz you want it to be two units, right? So you can have one unit, two units, one unit, that basically means that this half is going to be double what quarter is.

[00:05:14] So now we can get rid of these widths. Maybe not, Flex-basis, maybe that's what it is, anyway, you can get a little bit more clever with it. The thing with flex-box is, it's gonna make sure everything has a proper width to take as much as it wants. For now we'll just stick with width 25% cuz I think that's a little bit easier to deal with.

[00:05:58] Let's get this image centered really quick, So, a couple of ways you could do this, the easiest way I think is gonna be I think we could just say, what did we say it was, story-image? Is that what we called it? I don't think we gave it a class, did we?

[00:06:20] We didn't, so this image here, we're gonna say, story-image, save that and then refer to story-image, and let's just make it take up 100% of its space. And that way, now it gets a little bit bigger, it's gonna stretch the image a little bit but also puppies so I'm okay with it.

[00:06:46] Good, how do we feel about this? You can see it's a really iterative process, you just kind of like, do something is like how does that look? Then you do something and let's say okay, now how does it look? And a lot of times, I'll just do this directly in the dev tools as well.

[00:07:01] Yeah, this story text is a little small, let's make that little bit bigger as well. Maybe like font-size:16px, or something like that. That's exactly what it is, good job Brian, let's try 18. Yeah, there we go, that looks a bit better. Okay, how do we feel about the middle row?

[00:07:27] Did that go okay, do you kind of understand how we worked out here?
>> Yeah.
>> Cool, Let's go do the bottom row, so let's go look at our picture, our design. And we're gonna have another story here, so we can pretty much just use this styling that we have up here on this one, right?

[00:07:50] So, we're gonna have here another row, section.row, and the first thing that we're gonna have is another one of these stories. I'm just gonna again copy and paste it cuz, Not super interested in rewriting it, but you would just yeah, say another have another story there, come back here and look at our picture and now we have another image right there.

[00:08:21] Okay and then the next thing that we're gonna have is we're gonna have another article or actually, this looks more like a navigation, right? Because it looks like how you would navigate to the rest of the site. So there's actually one called nav. So I'm going to call this site-nav.

[00:08:42] Right, and there's an element called nav. And that's really useful because assistive technologies like screen readers can say, okay, this is a navigation. I know that all the navigating links are in there. So it's also helpful for accessibility technology. And it's just useful to you in the future and I was like, okay, this is where I stuck all my navigation.

[00:09:07] Okay, cool. So what would you call these, right? I don't really know what I would call it, it's kind of a list actually. So I might call this an unordered list because it doesn't actually matter what order these come in. So I'm gonna call it an unordered list.

[00:09:21] I'm gonna call this nav-list in fact I might, yeah, whatever this is fine. Let's actually even make this. Let's do it this way. We're gonna get rid of the nav. And we're just gonna make this an unordered list and I think that's okay. Okay, I'm gonna do an li and then this is gonna be like nav-item, and I'm gonna have five of those, And what did I have?

[00:09:54] I had sports, I had politics, I had local, I had.
>> Technology.
>> Technology good one. And opinion maybe, I don't know doesn't really matter. Okay, so now I have these five list items on there. Come back over here. There you see them and we're gonna make this a three quarter as well.

[00:10:20] Three quarter. Cool. So, now we have here underneath this, this is gonna be a three quarter and this takes up 75% Come back over here, look. Yeah, looks more or less like it's doing that. Okay, and now we're gonna come inside of the nav-list. And inside of here, we're gonna have another display flex, right?

[00:10:55] Because this is going to be flex in the column direction, right. So let's do that. So display, flex, it's gonna be flex direction column And then each one of these is going to be a nav-item right, that's what we called it. This going to be with 100%. See what that looks like so far And let's see inspect element.

[00:11:52] Okay, those are all taking 100% So what we wanna do is, we want each one of these to take up as much space as it possibly can, right? So that's gonna be What did I do here? I can't even remember. Spectacular. I remember the way I got this I really liked it.

[00:12:18] Line items center and flex 1. That's what it is. So there's a thing here that you can say to basically which is take up as much space as you possibly can, which is flex 1. Make sure that's actually what I'm going for. Yeah. So let's talk about what flex 1 is for just a second.

[00:12:38] As you can see here I still have to refer back to like what stuff I've done before, I have to look at this page literally like twice a day so what I did here is I used flex which is a combination of flex-grow, flex-shrink, and flex basis, which is what I was not doing before I needed to combine flex-grow and flex-shrink.

[00:12:58] And if you do flex 1 that basically says take up as much space as you can. And in fact, if I went up here and I made these flex 1, flex 2 and flex 3, then that's how what I was going for before. So in any case. So it kind of makes sense that if you say flex 1 is just basically each one of these is one item, and I want you to take up as much space as possible.

[00:13:22] And each one of these is going to take up 20% because there's five of them, but if I deleted one of them, it would take up 25% it kind of just automatically does that adjusting for you. Cool. Okay. So that's what flex 1 is gonna do here for us.

[00:13:41] We wanted to color them each kind of different colors. So what we can do here is we can say nav- item, nth child(1). And we can say background color. I'm gonna copy these colors because I could not come up with these colors on my own. Okay? And we're going to have five of these.

[00:14:15] So I'm just gonna do nth child (3), (4), (5). You could go through and give each one of these like their own class then style that on the class, but this is a lot easier because then if we change things around, we don't have to change the classes.

[00:14:31] And then I can just go and copy all these colors. Oops Questions about this so far while I'm copying pasting colors. Okay, so if we come back over here to fronted masters, now notice they all have nice colors, right. So, this is annoying. We have this like annoying padding here, which is what we added ourselves.

[00:15:27] We kind of have to go back and override that. So what we're gonna do here with nav-list, we're gonna say have margin 0 and padding 0. Refresh that, that looks a little bit better, okay? This still has bullets, right? It's getting that from the unordered list part. And in this particular case, we don't want it to have bullets.

[00:15:53] So you can just come in here and say, list style, none. Come back over here if that drop that And now we would like all of these things to be centered inside of them. This would be another really easy case that we could just come in here and say, display: flex and we're gonna have it do align-items center.

[00:16:21] And we won't mess with the justify-content, we still want it to be sort of left justified. So that's going to center it vertically in here. We're going to give it a bit of a padding on the left to kind of get a little indented. So we're going to say padding-left, maybe 25 pixels.

[00:16:43] Get that nice and inside. And then we'll get another font size on that to be more like a 30 pixels. Looks a little bit more like what we're going for, right? I think I made the font color a nice little kind of grey. Maybe let's go with maybe a CCC or something like that.

[00:17:13] Sorry, not font color, just color. No, a bit darker than that, let's go with maybe like a 999, 666? That's not lucky, looks nice though. [LAUGH] Someone's gonna be upset, we're gonna do 555. Okay, underneath that, then we're gonna do a font-weight: bold. We could change the font-family as well to be more like a Arial or something like that.

[00:17:53] So that's another nice thing that Visual Studio Code will do for you. Notice here, it actually has this font stack, it's like, hey, here's a good group of fonts to group together. So I just hit Enter, if like if the computer has Arial, it will use Arial. If it doesn't have Arial, it will use Helvetica.

[00:18:10] And if it doesn't have Helvetica, it'll say, just give me something that's sans serif. Which I do not wanna get into typography. Also, you don't wanna listen about typography from me. But sans serif is just something that doesn't have caps on the letters, basically, or serifs, I guess, as they are technically called.

[00:18:29] So that looks kind of nice, right? I made those links originally, so I guess I probably should go through and make these links. So I'm going to show you another cool trick that you can do with Visual Studio Code. So Command, no, so if I hold Alt, so I'm holding my Alt key and I click multiple times, I can have multiple cursors going at once.

[00:19:00] And then I can just start typing in all of them at once. We'll just make this go nowhere. Okay? And then I'm going to go to the next after that, paste that. And then I was able to do all of those all at once, pretty cool, right? Rather than having to type and retype that five different times or copy and paste a bunch of times.

[00:19:30] Again, you just hold alt, and then you just click multiple times. So if I just click holding Alt here, you'll notice that I just get a bunch of different cursors, I can type in all of them. Yeah, anyway. Sublime does that as well. So that's not a unique thing to code.

[00:19:53] Actually most, I would say at this point, most editors will do that. Okay, so now these are a different color, because links have a default color. So we come back over here, and we're gonna say, .nav-link dash a's, right, so we want to style every anchor tag inside of nav links.

[00:20:19] We're gonna say text-decoration: none, color we'll move this color that we have down here. Or, sorry nav-item rather. Okay, so now there is a link, you can hover over them, it'll change the cursor. If you remember, if you looked at this one, you'll notice that if you hover over it, it'll underline it.

[00:20:51] Easy way to do that, is to do nav-link or rather nav.item a:hover. And then I say text-decoration: underline. So now if I come back over here, refresh, if I hover over it, it underlines it, just to let you know, this is definitely a link. It's just a good kind of thing to do for your users is if they hover over it and then they see something change about it, they know that it's an interactive thing.

[00:21:30] Yes.
>> So mine has the error right now that it's underlining everything all the time.
>> Okay.
>> So, and I tested it on just one, like sports, for example. And then I assigned it the hover, just like you showed us. Do you know why possibly it could be?

[00:21:47]
>> Yeah, so the first thing you need to do is you need to remove it right here. So do text-decoration: none first. Because links by default have a underline. So you have to explicitly say, please remove this first. And it has to be specifically on the anchor tag, your class, you have to be styling specifically the anchor link.

[00:22:09] You can't be styling the li, right, so going here, I can't style this and say text-decoration: none. I have to actually be styling the anchor tag. That's another common thing to do, does that help? Okay. So pretty close here, actually, I mean, that's more or less it. Let's try this just for fun, to make sure that I'm not crazy, flex: 1, flex: 2, and flex: 3.

[00:22:49] Yeah, so that more or less arrives to the same, if you do flex: 1, flex: 2, and flex: 3. Any questions? Yeah.
>> Can you speak to when it's best practice to use margin versus padding to move content around?
>> It's a great question. When should you use margins and when should use padding?

[00:23:14] There are definitely cases where it's just a total toss up and it doesn't really matter. In those cases, I tend to lean, actually, I don't even really know. I would say I'd lean towards margins, but I don't even know if that's necessarily true. I guess kind of the rule of thumb is margins are for spacing things between each other, right?

[00:23:35] So if I was trying to like add space between this section and this section over here, they're two separate elements. And so if I put margins between them, it would be like a no man's land that really no thing would own, either one of those things. In that case, you definitely want to use a margin between the two.

[00:23:52] Whereas I'll use padding more if it's included inside of that element, right? So inside of these links here where I'm creating spacing inside of the element, that's when you want to use padding. So you have to ask yourself is, am I just spacing things out? Or am I actually spacing things inside of something?

[00:24:11] Is that sufficiently vague? [LAUGH] That's the best I got for you. It's just one of those things that you kinda look at it and you just kinda know. And I think that kind of knowing just comes from doing it a lot. It's a really crappy answer. [LAUGH] It's what I got though.

[00:24:31] Yeah, please?
>> I have a quick question. When you're doing the sports, politics, local, how did you get the text to line up within those each individual little color box?
>> Like how did I get into like center?
>> Yeah.
>> I used flex again. So this is flex within flex within flex.

[00:24:49] We're not joking, it's literally three times. So let's look at that, that's a really good question, though. Right nav item, so we're using flex: 1. So flex: 1 actually interacts with the nav-list, which this is display: flex, then itself is doing display: flex on the things inside of it.

[00:25:13] And you're doing that with align-items: center, that's actually what's going to get it to center in the middle there. Make sense? Cool. I don't expect you to have totally arrived here by yourself, by the way. Like this is actually a quite a difficult, if I had given this to you without flex, first of all, this would have been totally impossible.

[00:25:32] This would have been advanced, pay someone a lot of money to do this. Flex makes this possible that I could teach this to you on the first day that you're learning HTML and CSS. But if you got most of the way there by yourself, you should feel pretty damn good about that, cuz this is not, this is pretty industry stuff.

[00:25:51] These are things you would find yourself doing at a job, which is pretty cool.