This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML Playground" Lesson
[00:00:00]
>> Brian Holt: I have embedded down. This isn't from CodePen. The CodePen is on another page. So ignore this little part about CodePen. Down here I left you a really big playground. I have just like a bunch of different HTML elements.
>> Brian Holt: And I want you to just toy around with this a little bit.
[00:00:20] So this just is a bunch of HTML, right? So you can see here I have h1's through h6's, a bunch of links. We didn't talk about strong and. So you can think of strong, it's basically bold. Here it's like, you're making a very strong assertion, so it's gonna be bolded.
[00:00:39] Usually it's bolded. Maybe in a different context, it won't be bold, it'll be a different color or something like that. But it's a strong emphasis, or let's not say that, it's a strong display of some sort, right? So this text is strong, right? Whereas you have here m, e, m stands for emphasis that's usually italic.
[00:01:01] Right, and you're like you're trying to stick emphasis on something. So, that's what those two are. This is a bunch of paragraphs right here. Have most of you seen Lorem Ipsum text before? That's what Lorem Ipsum is, right there. If you've ever worked with a designer or something like that, usually they'll put placeholder text in there.
[00:01:25] And usually it starts with Lorem Ipsum, that's why it's called Lorem Ipsum text. It's meant to look like English, or look like a readable language, but it's also meant to be nonsensical. The reason why they put it in there is so, it looks like there's real text in there, but it doesn't distract from what you're doing.
[00:01:42] So in this particular case, we're trying to figure out what paragraphs look like. But we don't wanna spend time reading text. There's studies that show if there's readable text on something. Someone will read it, I think that follows [LAUGH]. So, that's why Lorem Ipsum text is there, it's placeholder text.
[00:02:01] I intentionally put this in here because if you work with web development at all, you will definitely see Lorem Ipsum text, it's just everywhere.
>> Brian Holt: There's some images in here. Notice everything is grouped together by divs. That's something that you can expect to see. You can see here that there are comments letting you know what each of these are.
[00:02:24] Here's a bunch of different kinds of inputs.
>> Brian Holt: I put it in here with the trailing slash and without just so you can see that it does both work. Text area. Here's a select. Here's a button, a table, and a marquee. So we'll get down there. So here's all the text.
[00:02:52] And please play with these, right. The reason why I put these playgrounds on here is so that you can mess around with them and see what changes when you change things. So here's all the links.
>> Brian Holt: So you can't really see it on here, but if you hover over a link, you can see in the bottom left of Firefox, it'll show you where the link goes.
[00:03:16]
>> Brian Holt: Here's the various h1's through h6. Here's strong text. Here's emphasized text. Now notice here strong and are on different lines in my HTML. But if you go down here.
>> Brian Holt: They're on the same line. This is because, like I was saying before, white space is ignored. So all the spaces, and tabs, and enters are ignored here.
[00:03:49] So these are put together on the same line. You can change that with CSS, but by default it does that.
>> Brian Holt: Here's all the paragraphs for the Lorem Ipsum text. Here's the three images. Here's all of the different. You can select a file. Here's an input that you can put stuff into.
[00:04:11] Here's a color picker.
>> Brian Holt: A text area, there's a check box right there. There's a radio button.
>> Brian Holt: I bet you didn't know, well, I didn't know those were called radio buttons until I started writing web development. Those are called radio buttons, you know where you can only select one of them and you can't select all of them.
[00:04:39] That's called a radio button. There's a select drop down, right. There's a button. And here's a marquee. So do you remember those super old websites that were like, on like, Geocities that were super annoying and had like, played music. That's what marquee, marquee is from a bygone era.
[00:05:05] This doesn't work in some browsers now, right? There used to be blink as well, that would blink the text. Blink does not work anymore. [LAUGH] It's probably for the best. [LAUGH] But for whatever reason, Marquis still works. So I was talking to someone that works on Firefox about this.
[00:05:23] They purposefully made it janky. [LAUGH] If you actually look at this on Chrome, let's look because I'm so wildly entertained by this. So if you go down here on Chrome, it's moves right. So there they made it janky on purpose, I thought that was amazing.
>> Brian Holt: Cool, any questions about tags so far?
[00:06:00] Please.
>> Speaker 2: So for the dropdown button, I've always wondered, is there the option to do something where you can autofill the drop down? Where you can start typing and then it'll autofill with the drop down.
>> Brian Holt: Okay so you can like basically like search for something and it'll like populate it?
[00:06:21]
>> Speaker 2: Yeah, like if you start instead of doing the button and then going all the way down to Minneapolis. If you start typing Minneapolis-
>> Brian Holt: It kind of just already works like that. So if I select here. So I just haven't selected and I start typing, it will actually just do that.
[00:06:42] But if you want a more intuitive, better interface, there are libraries that will do it for you. The one that comes to mind is Harvest, which I used to use all the time. We'll just look. jQuery, it's a jQuery plugin.
>> Speaker 3: It's at the bottom, chosen.
>> Brian Holt: Chosen, it's Chosen from Harvest.
[00:07:01] Thank you. So it'll be like this, right?
>> Speaker 2: Yeah, okay.
>> Brian Holt: This is more like what you were looking for?
>> Speaker 2: Yeah.
>> Brian Holt: Yeah, so, one of the beauties of what we do as developers is, really smart people like the people over at Harvest will write things like this and then it just open sources like hey if you wanna use this then, use it.
[00:07:23] So share and share alike.
>> Brian Holt: Good question, and it's something you could totally write yourself, too. There's no reason that you have to use what they're doing. There's nothing that they're doing that you couldn't do. They did it really well, so that's why I used theirs.