Introduction to Web Development

Introduction to Web Development Exercise 1: Creating a New Page


This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.

Check out a free preview of the full Introduction to Web Development course:
The "Exercise 1: Creating a New Page" Lesson is part of the full, Introduction to Web Development course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will create a new web page. The web page will have an unordered list of things to look for in a car. It will also have an ordered list of your favorite cars. Finally, you will give titles to each list.

Get Unlimited Access Now

Transcript from the "Exercise 1: Creating a New Page" Lesson

>> Brian Holt: Exercise time. Let's open, so go to CodePen. So you can go to, it'll take you straight to creating a new pen. I'm pretty sure you can go to and just like there's a new button there as well. Let's go back here and let's get the requirements again.

[00:00:38] So I want you on this new page. So first of all, let's talk a little bit, just specifically about CodePen. You don't have to put that HTML tag on CodePen. CodePen actually automatically does that for you. So if you wanna be lazy like I am, you don't have to.

[00:00:55] If you want to actually like be complete and kinda get the full experience, you're welcome to as well. It won't hurt anything. Anyway, so what I want you to do on this new page is I want you to make a title, right? If you remember the titles are like the H1 through the H6, and the reason why you would choose an H1 versus an H2 versus an H3 is it just implies hierarchy, right?

[00:01:19] So the H1 should be the most important title. Typically, you only have, there's kind of different schools of thought on this, but you have one H1 on a page, right? Like, this is my blog. Like my blog would be your H1 like blog, like this is blog post number one, that'd be an H2.

[00:01:35] And blog post number three would be an H2 as well, right? And then you would have like different headers inside your blogs. The first part of my day, H3. The second part of my day, H3, right? It's hierarchy that you define yourself. Whatever makes sense to you, that's what you should do, okay?

[00:01:57] So in your new CodePen, create a new page that has a title and then I want you to create an unordered list of things that you look for in a car, and then I want you to create an ordered list of your favorite cars, right? And then after you've done that, give each one of those a title.

[00:02:17] It could be like my favorite cars and things I look for in a car. I'm doing half your work for you. Just kidding. Actually writing copy is probably one of the hardest parts of my job because I'm just really bad at it. Okay, are those instructions clear to everybody?

>> Speaker 2: Their asking more to explain the heading tags.
>> Brian Holt: Sure. All right.
>> Brian Holt: So you can click these nice little arrow things. You can collapse it. Right now we're not worrying about anything. CSS and JavaScript, we'll come back to that later.
>> Brian Holt: So just to talk a little bit about H1s right, like this is a title.

[00:03:08] Page two, a smaller title. Page three, yet smaller title. Yet smalled like it's spelled. Okay, so it implies hierarchy, right? Like as we've seen with HTML, it is very hierarchical based, right? You'll find that a lot of this stuff that I am teaching you like it just teaches you kind of how to define your own hierarchy, right?

[00:03:47] Like there's no special rules of how you can use H1s, like there's nothing that says like you can't have an H2 on a page if you don't have an H1, right? Like this, it's purely just what it means to you. So for example, like we'll talk about the project that I work on, which is redditgifts, right?

[00:04:09] An H1, there's only one H1 in a page, and it defines like this is what is entire page is about, right? And then I'll have H2's, like this is what this particular section of this whole page means. And then an H3 would be like what this particular section inside this section of the whole page is.

[00:04:29] But that is all defined by me, right, what does an H1 mean to me? So they're essentially giving you tools, like different markers, right, for your Tupperware, of how to define things. So, in this particular case, like they don't really have any meaning, right? It's only meaning that you assign to it.

[00:04:50] Or you'll look at different websites and they'll have like an H4 next to an H2, right? There's no meaning to it and in that's case it's not very useful because it's just chaos. Anyway, they're just titles and then the number only has significance as much as you assign to it.

[00:05:12] And I guess the other difference is that the browser has different default stylings for it. But very rarely will you just leave it with the default stylings. You'll change it to be whatever you want it to look like. Does that make more sense? Hopefully, as we keep using them it will make more and more sense to you.

>> Brian Holt: Okay.
>> Brian Holt: So how did we do?
>> Brian Holt: People still working.
>> Brian Holt: Looks like I'll give you a couple more minutes. I'll give you like three more minutes, is that good for people?
>> Nina Zakharenko: I have a question.
>> Brian Holt: Sure.
>> Nina Zakharenko: When we are creating the unordered and ordered list, it's in the body, not the paragraph, right?

>> Brian Holt: Right.
>> Brian Holt: So, yeah, it's just kind of to, you don't actually have to put the body. When you're making HTML documents, you do have to have a body, but Codepen actually wraps everything in a body before you, right?
>> Nina Zakharenko: Okay.
>> Brian Holt: Just to be nice to you.

[00:06:31] So you are welcome to put it but you also don't have to in this particular case.
>> Nina Zakharenko: [INAUDIBLE] code would be [INAUDIBLE].
>> Brian Holt: Yeah, let me throw those back up.
>> Brian Holt: Yeah?
>> Speaker 4: So do you div or basically wrap anything or everything in? Can you explain the difference between a div and span.

>> Brian Holt: Sure. So something we have not addressed yet which is actually a really good point to bring up is span.
>> Brian Holt: Span and div are similar because they are simply like generic containers for something, right? The difference is, is like a div is like a big container that contains a lot of smaller containers, whereas span is just like its actually like the smallest container, right?

[00:07:38] So like you can have a paragraph and it can have a like couple spans that will surround like a certain words. So I will go over it after we finish this example.
>> Speaker 2: Maybe you're covering it later but he's asking about black level as well, do you want those explained?

>> Brian Holt: Yeah, we will definitely go over that as well. We'll address that more in the CSS part, which is a little bit later today.
>> Speaker 2: Okay.