Introduction to Web Development Exercise 2 - Giving Classes

Transcript from the "Exercise 2 - Giving Classes" Lesson

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

[00:00:03]
>> Brian Holt: Remember that blog post that we were looking at earlier. Open the code pen right here. I believe it's the same one. And I want you to go give names to everything. So let's just take a look.
>> Brian Holt: Any questions about it?
>> Brian Holt: So when I say names to everything, everything inside the body.

[00:00:41] You're not gonna ever give classes to things in your head or something like that. Your body will never have a class cuz there's only one body. Your HTML will never have class cuz there's only one HTML on your page. So everything inside the body needs a class.
>> Brian Holt: Another caveat I will give you is that most things will have a class, and I wiould say most things do not have an ID.

[00:01:12] This is kind of getting into the way that Brian develops versus the way that other developers develop. I only use IDs when I absolutely have to address something individually right? I'm not gonna go and give, like I was showing blog post one, blog post two, I would like never actually like do that.

[00:01:31] Unless I actually had to always address blog post two or something like that then I would go do it. Whereas everything will have a class. Right? Even if I'm not even styling or doing something to it based on class, I will give it a class just to label it later.

[00:01:46] Kind of just like if you have non see-through Tupperware you don't want to have to open it every time to see what is it. You just wanna stick a label on it so that you can pull it out, say this is meatloaf or something like that, and then you can just stick it back or something like that.

[00:02:03]
>> Brian Holt: So don't worry about IDs. You can skip those. Just give everything a class.
>> Brian Holt: And if there's also any of those that you don't know what they are. First of all, that's kind of the good thing cuz any would look kind of hit home the points that it's good to label everything so when you come back to it or right now you're looking at my code and I wrote bad code cuz I didn't label anything.

[00:02:34]
>> Brian Holt: So it will kind of drive home the point that when you're writing code for other people, you wanna give them indicators of what you're doing.
>> Brian Holt: Another point to hit home is that this paragraph, and this paragraph, they're just paragraphs in a blog post, right? So, ideally, they would have the same class name, right?

[00:03:04] Because we wanna treat them the same. Or if you're talking about this Blog post 1 and Blog post 2 titles, they're both blog post titles. And so they should both be named the same thing, right? Cuz we wanna treat them the same way.
>> Brian Holt: Makes sense? Cool.
>> Brian Holt: This seems kind of like a pain in the ass it's cuz it is, it's a pain in the ass.

[00:03:48] But you did not come to this class for comfort.
>> Brian Holt: Front and masters is not a comfortable experience.
>> Class: [LAUGH]
>> Brian Holt: You should make that your tag line, I'm just kidding. [LAUGH]
>> Brian Holt: Yeah.
>> Speaker 3: So [INAUDIBLE]. Conflicting attributes in your CSS between a class and the ID, which one takes priority?

[00:04:34]
>> Brian Holt: The ID.
>> Brian Holt: Which we'll also talk about later.
>> Brian Holt: Cool.
>> Speaker 4: Typing about the exercise, she's asking for naming blog title or, would you name it something blog titled?
>> Brian Holt: Yeah, that's a really good, one that's probably what I would call it.
>> Brian Holt: If you like see it's lots of typing so four, five more minutes, that feel good.

[00:05:16]
>> Speaker 4: And then just kind of asking. I'm not quite sure if I understand, but if you want to use the same style in another part, how would you do that? Just by using that same class right, that applies?
>> Brian Holt: Yeah, definitely.
>> Speaker 4: Thanks for answering.
>> Brian Holt: Cool.
>> Brian Holt: And again we'll go in depth once we hit the CSS section, which is next.

[00:05:41] Probably after lunch.
>> Brian Holt: So I can go back to the requirements, if you want to.
>> Brian Holt: Yeah. Worry more about two, if you get to three than that's cool too, but I'm more concerned about classes, that's the more important part here.
>> Brian Holt: Is anyone having trouble discerning what the container is actually?

[00:06:46]
>> Speaker 5: Yeah [INAUDIBLE]
>> Brian Holt: So which one is giving you issues?
>> Speaker 5: [INAUDIBLE] class. Right? And paragraphs, right?
>> Brian Holt: Yeah.
>> Speaker 5: Just giving them names?
>> Brian Holt: Mm-hm.
>> `
>> Brian Holt: So essentially I've given you a marker and told you to label all the tupperware in the fridge.
>> Class: [LAUGH]

[00:07:19]
>> Brian Holt: That's kind of the exercise here.
>> Speaker 5: But it's already labeled, I guess I'll just-
>> Brian Holt: So it is, I mean in as much that you know it's a dip or you know it's an H-1, right?
>> Speaker 5: Yeah.
>> Brian Holt: But what kind of H-1 is this? Let's say I have a page and this is only one tenth of what's on the page and I have 50 different kinds of paragraphs on there, what kind of paragraph is this?

[00:07:46] So this is a blog, right? And so, these kind of paragraphs are blog paragraphs, right?
>> Brian Holt: Might be kind of a good thing to call it. If you call it a blog paragraph, I'm just throwing out answers left and right.
>> Speaker 5: That would be for P, right?
>> Brian Holt: Yeah.

[00:08:04]
>> Speaker 6: So, you said they're already labelled, they're already labelled Tupperware.
>> Brian Holt: Yeah. I mean it's like I can go give you 50 different Tupperwares that have, I mean, they're all Tupperware. You can just say go and give a mark and say this is the Tupperware, this is the Tupperware, this is the Tupperware.

[00:08:22] Not very useful, right? Rather, you wanna say this type of work contains this. So this paragraph contains a blog paragraph, right? It contains blog type text. Or like that first div up there, like what's inside of that div?
>> Brian Holt: It's an entire blog post right? Might can be called of that.

[00:08:54]
>> Brian Holt: Something else I didn't quite. So let's see, yeah we'll just start going through it. Or does anyone need more time? All right, let's do this. Cool, so. Yeah.
>> Speaker 4: Before you start, he's saying you want separate classes for blog posts but titles and paragraphs and share the same classes.

[00:09:21]
>> Brian Holt: I want, so different, I want the blog posts to all have the same class, right? Everything that is semantically the same should have the same class. But they might have different IDs. In fact, if they have IDs, they should be different IDs.