Introduction to Web Development Exercise 2 - Solution

Transcript from the "Exercise 2 - Solution" Lesson

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

[00:00:04]
>> Brian Holt: So class, this is a blog post, right? Everything inside of this div contains a blog post or is a blog post, right? So likewise here, this is as well a blog post, right? Because these are two tupperwares that contain exactly the same thing, they should have the same label.

[00:00:29] Also, as a side note, notice I'm using hyphens. That's just kind of like the way that CSS is typically named. You don't have to, underscores work, you can do camel casing, that all works and there's nothing inherently wrong with it, just the standard way of doing it, the way the community has done it.

[00:00:53] Is this way is separated by hyphens, and you'll find that once we start talking about JavaScript, it's camel case, and if you do Python, it's underscores, right? Every language has it's little different semantic way of doing things. So what is this? It's a title of some sort, right?

[00:01:18] So, this could be a blog-title, right? That'd make sense to call it that.
>> Brian Holt: Okay. What's inside this div? Like I feel like seriously like we're sitting, like going through, okay, this has this, this has this, right? I mean, it's essentially what this process is right now. This contains a bunch of paragraphs, right?

[00:01:43] This contains all of the blog posts, right? So, you can call this like Bbog-text, or blog-paragraphs, right? Something to that effect. We'll go with text, right, because this contains all of the text in the blog post. And then here, class = what, this is a blog-paragraph or if your lazy like me, you just know that like this is a paragraph, right?

[00:02:17] So that's what p stands for so you can just say blog-p. They have a good rule over at Google that kind of adopted is that shorten things as much as it make sense to you, right? So, like in the example that they give is like, if it's called navigation, if you call it nav, right?

[00:02:35] Everyone knows what nav means, but if you call, if you're trying to like label an author and you see atr, that makes sense to you, it's not gonna make sense to someone else. So, stick with author. Write out all of author.
>> Brian Holt: So, I implore you to shorten things as much as it makes sense to.

[00:02:56] And I think in this sense blog-p makes sense. So, these are all the same so we are going to give them all the same classes, okay? Now, the key here is that we're going through the second post. But we've already given these names out, right, we should definitely not re-invent the wheel.

[00:03:23] So, this was a blog-title, right? Because I believe that's what we called it up here, right?
>> Brian Holt: Blog-text
>> Brian Holt: Blog-p.
>> Brian Holt: And blog-p, oops.
>> Speaker 2: Eduardo's asking, I thought that a blog post can target the p tag using .blog-post, P, why use classes on the paragraphs? Isn't that using a lot of extra classes?

[00:04:12] Bad design?
>> Brian Holt: That's a good question. We're going to start talking about Brian's opinion versus everyone else's opinion. There's certain people that would definitely say that. There's a couple of good reasons why I feel like it's a good idea to give everything a class. The first one being that, it's nice to just give everything a label, right?

[00:04:34] Just assume that everything you stick in the fridge is gonna have a label. Because when you pull it back out later, you're gonna know instantly what it is. The second part of that, and let's just delve into the way the browser works real quick. When you're talking about CSS, I guess we'll address more on that later, but there's CSS performance implementations that make it better to use a class rather than to use an ID.

[00:05:03] It's a minor consideration, because the browser's CSS engine is really, really fast. But it makes your CSS faster to use classes. But going back more towards
>> Brian Holt: Like the semantic thing. It's just easier to label everything. It's more of ribose for sure right? You have to type a lot more.

[00:05:32] But in my opinion this makes things easier. Now, let's say, I have a blog post, right? But now I have, let's say I put a paragraph at the top, that's like a TLDR. Do you know what that is? Too Long, Didnt Read. That's essentially, like a little summary, right?

[00:05:50] Say, I put a little summary text at the top, right? And I said, like up here, like p.blog-summary. Sorry. There's a special trick that you can use. I'm super lazy I don't like typing things so you can hit p.blog-summary and hit tab, it'll I'll complete it for you.

[00:06:16]
>> Brian Holt: Anyway.
>> Speaker 3: Is that just this good pen or?
>> Brian Holt: You can get sublimed at the same thing, but it's called EMMET, you have to install it. Yeah, E-M-M-E-T, I can't live without it, I use it every day. So, force of habit. Okay so, discussing what Eduardo I think asked, is that now I have two different kinds of paragraphs in here, right?

[00:06:45] This was when I added later. If I styled everything based on just paragraphs or just the p tag, Now this would receive the same style which is not what I want, right? I want to have them different styles. So, now that I have different classes on each one of them, if I had another different type of the same tag later?

[00:07:04] I can style it differently.
>> Brian Holt: If that doesn't make complete sense to you right now, it will make sense later so, but that kind of address is that? And the other thing is you're learning like Brian Holt flavoured CSS right now, which I think I'm pretty good at.

[00:07:25] Someone pays me to do it and they've done it for a while. So, it can't be that bad or maybe it can. [LAUGH] Yeah?
>> Speaker 4: My question is about the new container tags in HTML5, so at what point do you leverage those in this approach? Or do you, what's the trade off to do it yourself versus use those?

[00:07:47]
>> Brian Holt: So, that's a good question. HTML5 has a bunch of like new kind of like container tags, and when I say container tags, something like div. One of them that we've already talked about is article, right?. These are actually kind of articles, right, like blog posts or like individual little articles.

[00:08:04] It would be better to call these articles for sure. So, rather then call this like div, call this article. And again you have to change this down here, right? Because now your Tupperware just got a little bit more specialized, right? That you look at this, and he's like, this is like some sort of complete article in here, that's why you would use it.

[00:08:31] As far as, you notice, that it's still rendering the exact same thing over there. Nothing has changed over here. It's just little cues for yourself later to pick up later. It's like, that's what this does. It also has accessibility implications. So, like e-readers, right? So, when someone that's blind is using the internet, they have things called e-readers that go through and essentially read the internet to them.

[00:08:57] And so these e-readers pick up really well on these article queues. It's like. There's an article right here, this is important. Like this is what you, this is kinda wanna read, right? Because the e-reader doesn't want it like, here's the homepage, it doesn't want to go to like the navigation, so it'll skip the nav part of this side but it'll go straight to the articles which is awesome.

[00:09:16] We wanna make the internet accessible to everyone. Great question, so article, section is another one, if you have different sections of your website, it's a good one to use. Nav is another one, like where you have navigation. Again, the e-readers will just automatically just skip over nav, because who wants to know about your navigation unless they wanna use it?

[00:09:38]
>> Brian Holt: Stuff like that.
>> Speaker 4: Are you still gonna use classes within those new tags then?
>> Brian Holt: Definitely.
>> Speaker 4: Just so that you can point to those things uniquely at CSS.
>> Brian Holt: Yep, precisely. And again, I have an article right there that's called blog post. But lets say, two years down the road, I want a different type of article, all right?

[00:10:04] This is a guest article or something like that. They are now individually labeled. I do not have to go back and change things. Like, that's, I hate going back and changing code that didn't have to change, right? Like if I had just named it better the first place, I wouldn't have had to change it.

[00:10:22] So, that I'm always guarding about doing future work, right? I'd rather do five minutes of work now rather than two hours of work later.
>> Brian Holt: Good questions. More questions?
>> Brian Holt: Cool.
>> Brian Holt: So was this painful? Was this really shitty to do? It should be, cuz I don't like it, but.

[00:10:50]
>> Brian Holt: This become extremely useful once we get in in the CSS because now this is all labeled up and like all the Tupperware's labeled. We can just like now send CSS to go in, change everything and it's really easy to do. So again, spending a little bit of time now will make things a lot easier later.

[00:11:14] So we didnt do the IDs. I mean what I would do here, let's just go do it real quick. So, first of all I'm just gonna change this back to div.
>> Brian Holt: Something you might notice I'm doing as well. Is you can have multiple cursors in code pen as well as in sublime.

[00:11:37] Which is the thing that we had you all install. So, like i can select this and I can select this and this and I can change them all at once. So, know this is thing, right. I'm just doing that with Cmd-click in Mac, I'm pretty sure it's like Ctrl-Click in Windows, maybe window button, I don't remember.

[00:11:58]
>> Brian Holt: Anyway, if that's weirding you out, that's what I'm doing. Okay, so I said let's go get the blog post IDs. So, let's just say, this would be like blog-post-1. Id=blog-post-2, something like that. Something that is, you can guarantee to your future self, there will never be another one of these on the page, right.

[00:12:29] So like if I said like Blog post primary or something like that, that's harder to say, I can guarantee I'm never going to have a primary blog post on the page again. That's kinda the difference there. If you say, there's only going to be one first blog post, right?

[00:12:47] So, that's a good one to use. That make sense? Again, I only put ID's when I absolutely have to use them. On the whole, I try to just make everything a class.
>> Brian Holt: Cuz IDs are inherently not reusable, right? Because they are unique you can never use them again, classes are not and I'm always looking to like right one piece of code and have to apply in many places.

[00:13:18]
>> Brian Holt: Which again, once we arrive to CSS we'll make more sense.