Introduction to Web Development Exercise 1: Solution

Transcript from the "Exercise 1: Solution" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: You can put the HTML here if you want to, not required, I probably will stop doing it after this. But we'll just do it so you know what it looks like.
>> Speaker 2: Brian, you can change your name by just clicking your username and going into settings.
>> Brian Holt: That's probably a good idea.

[00:00:31]
>> Speaker 2: Go to Editor Settings.
>> Speaker 2: And then just push the Classic or Solarized.
>> Brian Holt: Let's actually do Classic, that looks good to me. Can I use Source Pro? Yeah, cool.
>> Brian Holt: And then I can just, grandmas use CodePen too. Let's go with for projection. How funny.
>> Brian Holt: Any of you ever read CSS-Tricks?

[00:01:08] It's, first of all, awesome blog to read for CSS related stuff. CodePen is done by the guy that does CSS-Tricks, or he is a part of that company. Super great guy, but he's really cheeky sometimes, which is also great.
>> Speaker 2: So now do Ctrl+0 to reset your browser.

[00:01:37]
>> Brian Holt: There we go. That's nice, cool.
>> Brian Holt: Does that look good, legible?
>> Speaker 2: Yeah, much better.
>> Brian Holt: Cool.
>> Brian Holt: I just totally messed that up, all right.
>> Brian Holt: All right and then you put head. All right, so we have to give it a title, right, so this title is going to be an h1 and it's gonna be MY SUPER AWESOME LIST OF CAR RELATED GREAT THINGS, cuz I like to yell when I type.

[00:02:34]
>> Brian Holt: Cool, so something else I noticed with CSS is like you notice how I'm like indenting everything and not indenting some other things, like that kind of implies hierarchy. You can put this back in like that. And it's not going to affect the way the CSS, or the HTML works.

[00:02:55] We do it, again, for our future selves when we're reading it so we can see the hierarchy that makes it much more readable for yourself, right? You look at this, you see no hierarchy, right? You assume that the h1 is in a higher hierarchy than the body is when in reality, it's not.

[00:03:09] It's actually nested inside the body. So the rule of thumb here is that if something is nested in something else, it gets further indented, right? So the h1 is nested inside the body, right? So the body's here, then the h1 goes here, right? Or if it was nested, there was the body, a div, and then the h1.

[00:03:31] That's why you kind of see that hierarchy. Or in other words, white space like tabs, spaces, new lines, are not important in HTML. Right, I can also do this if I wanted to do that. Which you'll see a lot, right? So I have this h1 and then I have my text inside the h1.

[00:03:54] See, this white space right here is not important, the new line. It's just do whatever is the most readable for you. In my opinion, putting the text on a new line is the most readable. All right, so, we have an h1 here. This lets us know this is the title of my page, right?

[00:04:16] I believe the next one was an unordered list of what you look for in a car, okay? So if we're gonna do an unordered list, we're gonna use a ul, right? So ul, and then something else I prefer to do is every time I create my opening tag, I just write my closing tag right at the same time.

[00:04:37] It just makes it really easy to not forget to do that, okay? And then now since I'm doing a ul, I'm gonna nest some lis inside of it. So, I'm going to indent a little bit further. Okay, so my first list element is, I don't know, price cuz I'm cheap, right?

[00:05:04] Do you like my beautiful styling? It has this huge bold header and little tiny price, okay? So, let's put another thing in there. It needs to have a huge stereo, so we're gonna say stereo. And maybe some sweet rims.
>> Brian Holt: [LAUGH] You guys probably think I'm an idiot, which is totally fine.

[00:05:31] You can think I'm an idiot. Okay, so those are [LAUGH], that's what I look for in a car apparently. Price, stereo, and sweet rims. Probably gonna end up driving like a 92 Corolla with these blinged out Walmart rims or something like that. [LAUGH] And a huge boombox, right, not even a stereo in it.

[00:05:55] Okay, so that's what I look for in a ul. Is, you have the ul and then you have the list elements inside of it, which is what that li is, right? It's a list element. Okay, so now let's do an order list of my top three favorite cars.

[00:06:16] Okay, so ol, and again, we'll just close it right now cuz that's easiest. So this one, it's gonna have some order implied to it. So I'm just gonna do li again, and say, I don't know, 92 Corolla, since apparently that's my favorite car. I don't know if I'm spelling that right.

[00:06:41]
>> Brian Holt: Okay?
>> Brian Holt: Maybe after that's a 91 Corolla, that's my second favorite car. And then my third favorite car is probably let's say, a Tesla Model S. It's my third favorite car after the two Corollas. [LAUGH] Okay? So, notice that these look really similar, right? You have the ul and the ol and they just have li's inside of it but one of them just has bullets and one of them has like numbers next to it.

[00:07:23] It's kind of the semantic difference there is that you can put sweet rims on top of price, it wouldn't make any difference, right? It's all just kind of a conglomerate of information whereas the ol's steps, right, this is number one, number two, number three. But they both just take lis, right?

[00:07:40] Because let's say, my gosh, I forgot really my second favorite one is the 88 Corolla,
>> Brian Holt: Right, and then it just does all that renumbering magically for you. So you don't have, many of these things is also because programmers are lazy. I don't want to have to go renumber stuff, that's dumb.

[00:08:08] Right, so let's make the computer reorder stuff for us.
>> Brian Holt: So laziness and then like flexibility, right? Cuz say dynamically, later, I wanna be able to add things to this list using JavaScript or something like that. Append this as the third element, so it goes in there and then I don't have to use JavaScript to programmatically renumber everything.

[00:08:33] The browser just automatically does it for you. So, it's like getting free programming for yourself. All right, so, specifically on this, do we have any questions so far? I think I have to do titles for each one as well so I'll do that real quick, okay? So we're gonna put in some h2s here saying like,

[00:09:02]
>> Brian Holt: Sweet stuff for my car. And then this is like, sweet cars for my stuff. [LAUGH] Apparently, I make myself laugh. That's great. Yeah, so you just giving titles right there. So notice this is kind of all mixed together. The HTML's kind of not divided very well. So in order to make this easier for yourself to read later, something you might do is you might wrap these in a div, right?

[00:09:44] So I'll put like a div around each one of these.
>> Brian Holt: And then I need to indent these as well, so I'll show you a little trick that works in Sublime as well as in CodePen. So just select all this text that's inside the div, right? So, you might not be able to see it, but I've selected that h2 and the ul and then I'm gonna hit Cmd and actually, can you just hit Tab?

[00:10:10] You can just actually hit Tab, let's just stick with that, that's easier cuz I think it'll work in both browsers. You'll hit Tab and it'll actually indent it a little bit further for you, right? Because now it's nested inside that div. It's needs to be nested a little bit further so it's easier to read.

[00:10:24] We follow? Does that make sense? That work for you?
>> Speaker 2: Shift+Tab moves it back up.
>> Brian Holt: Shift+Tab.
>> Brian Holt: Nope, okay, yeah. And then we'll do the same thing for this one.
>> Brian Holt: Oops.
>> [INAUDIBLE]
>> Brian Holt: I'm sorry.
>> [INAUDIBLE]
>> Brian Holt: I didn't-
>> Speaker 3: [INAUDIBLE] command, [INAUDIBLE] command.
>> Brian Holt: Sorry.

[00:11:08]
>> Speaker 3: [LAUGH]
>> Brian Holt: You don't have to hit Cmd, you can just hit Tab.
>> Speaker 3: Okay.
>> Brian Holt: Yeah, there's a couple ways to do it, but that one works.
>> Brian Holt: So, again, reason why I did this, it's because you notice the styling over here actually didn't change anything, right?

[00:11:28] But now you look and say this one, this div right here is all related, everything in here is related to one thing and then everything in here, this other div up here, it's all related to a different thing. So you're putting separation in your HTML. And it's going to save you so much time if you just kind of start thinking like that, like everything in here should have its own container.

[00:11:53] It's also gonna make your CSS way easier. You're not gonna have these crazy CSS things, so.