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

Check out a free preview of the full Introduction to Web Development course:
The "My First Web 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:

Brian introduces the audience to Codepen which is a web app that will instantly render HTML code. In this exercise, he creates a simple website and demonstrates adding different types of tags to a website. - http:/codepen.io/btholt/pen/hadGL

Get Unlimited Access Now

Transcript from the "My First Web Page" Lesson

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

[00:00:03]
>> Brian Holt: All right, so this is called code pen, it's essentially like a little web app that you can kind of write your own code in and it'll instantly execute it for you, which is kind of fun. So this exactly what you were seeing before on the slides. So you can start like editing this and the part on the right will reflect it.

[00:00:31] So as you can see here, we have our html, which is kind of like then entire html document will be wrapped in the html, that's just how you're letting the browser know I'm giving you html please render it. Something you'll find out as you get more and more into programming is that computers will always do exactly what you tell them to do.

[00:00:50] There's no inference, there's no intelligence about this, your computer is only as smart as you are, and probably a little bit dumber. But I mean let's go ahead and add another paragraph so you can put this p tag right and say I love this so much. And then you have to let the browser know okay I'm done telling you about this paragraph, please stop displaying a paragraph.

[00:01:21] And there you go.
>> Brian Holt: Or you can put like another tag in there, H1, and say, this is great.
>> Speaker 2: So does it matter that this is your account on Codepen? Are we changing it just on our browser?
>> Brian Holt: You're changing it just on your browser.
>> Speaker 2: Okay.

[00:01:45]
>> Brian Holt: So please feel free, you can't overwrite me so.
>> Speaker 2: [LAUGH]
>> Brian Holt: I did that on purpose.
>> Speaker 2: [LAUGH]
>> Speaker 3: Brian, can you bump the font?
>> Brian Holt: Sure. Is that up good? Better? Okay. Yeah, that brown's kind of hard to read, I also don't know how to change it so feel free to toy around with that.

[00:02:13] We have lots of examples coming so there'll be plenty of opportunity to mess around with this.
>> Brian Holt: Cool. So you'll notice that there is some style to this, right? The browser knows if it's an H1, make stuff really big, if it's a paragraph then make sure stuff is spaced out, right?

[00:02:36] Cuz if I just start typing in here, which you can, but I try and put spaces in here, it's not gonna give them new lines. That's because the browser doesn't know what to do with it, so it just kind of smashes it together. It's like I don't know why you're giving me lines, so I'm assuming that you don't want new lines.

[00:02:55] [LAUGH] So that's why you have to put in paragraphs, paragraphs kind of separate stuff.
>> Brian Holt: Cool, any questions on that?
>> Brian Holt: All right.
>> Brian Holt: By the way this is a really bad idea. What I just did right there, please do not do that. Okay.