HTML 201: Intermediate HTML web development

1. HTML 201: Intermediate HTML web development: Hello and welcome to HTML 201A, learning intermediate HTML. So in this course we're going to be skipping over a lot of the basics. You should already know the basics such as HTML syntax, things like creating links, underlines, bold, adding images, you know the simple things like that. So if you don't know how to do that already in HTML, please go back to the HTML 101 course or a begin an HTML course and take that one. Otherwise, you're going to be a little bit lost in this one. Otherwise, if you have taken HTML 101 or you're familiar with HTML Basics already, this course is going to be for you. We're going to be going through a lot of different things, such as some semantic internal links, fabrications, pathing. That's a really big one. We're going to create a Web page layout using tables. Tables are very important here. We're going to look a little more into CSS such as inline CSS classes, IDs, code formatting, forms, form fields like when you type in your email address or your password, things like that. And a few bits and bobs in-between. Hi, my name is Caleb Pauline. I'm going to be your instructor today. We we're going to be learning intermediate HTML. I've taught over 300 thousand students how to code. I'm a senior web developer and an online coding instructor. At the end of this course, together we are going to be creating an each ML based webpage was a proper layout. So if you took the HTML 101 course, that would actually doesn't have a proper layout. We sort of just throw a bunch of elements on a page. This one's going to have a proper layout, so we're going to have a title and navigation, a content section. We're going to embed a YouTube video, a bunch of images, but some more content and there's some written content, it's going to be fantastic. Now if this all sounds like it's up your alley, I look forward to seeing you in that first lesson. 2. No more underlines: Alright, first things first we need to clarify a few things. So when we created a base structure in the HTML 101 course, and let's just change this over from plain text to HTML. And by the way, I'm using VS code if you're using a different editor, all I did was go to File which is just outside of my recording area and then new file, so Command or Control, and we'll create a new file for you. And it automatically thought it was a plain text file. So I clicked down here where it uses a plain text typed in HTML and selected HTML. And that just gives us nice little goodies like this. We can do HTML colon five, hit Tab for auto-complete using VS Code. And it gives us a bunch of stuff in here. So I'm going to actually go ahead and delete some of this. And I'm going to call this HTML2 01. Now, we learned at some points that we have paragraph we could put some Lorem Ipsum in there. And we could say, for instance, that this should be underlined, something like that. Now, if I save this as let's go in here and nameless index.html. And I just save that into particular folder that I had called HTML to 01. And I call it index.html. But if I open up Google Chrome or any sort of browser, whichever your favorite browser is, you can go to file and then open file. So Control or Command O. Go to my folder here. And let's just open this up and we can see that this, once I zoom in, is underlined. And that's cool, it does what we want, but unfortunately underlying is deprecated. So it was OK to learn this a little while ago just because we needed to make that underlined. But there's a better way to do this. And the better way to do this would probably be to add a span in here. And let's go ahead and change this to a span element. And all this is, is a simple in-line element. And you should be familiar with block helminths versus inline elements at this point. And what we're going to do is work with this style attribute. And this style attribute allows us to write CSS. So you don't need to actually know too much CSS right now. But if you want underline, I would say maybe maybe try to memorize this particular one. I tell people all the time you don't need to memorize too much. I mean, you can always Google it, how to add underlying using CSS, that'll work as well. So I'm gonna do text, decoration, colon space, underline. Now if I save that, go back to my page and refresh, it should look like nothing changed. And that's perfect. And I can always check by right-clicking and clicking Inspect. And you can see in my inspect tool down here that there is in fact a span with text decoration underlined. And if I wanted to, I can actually toggle that on and off now, which is really, really nice. So moving forward, whenever we use underlines, let's go ahead and use text-decoration underlying. Instead of using the UI elements, just because the UI element is deprecated, it's from old versions of HTML and CSS can now do this, and we prefer to use CSS whenever we can. 3. Internal links: Okay, let's take a look at internal links. So actually let's recap first. So how do we create a link? We create a link and I'll make this just a touch bigger here. We create a link with the a anchor at element and the HREF attribute. And that could go to HTTP, website.com, go to website.com. And this is just going to show us a little link up here. And it's gonna go to website.com, whatever's on that site. So that's how we create a link. But what if we wanted to link to something else in the page? So let's go ahead and actually make us page look a little nicer. So lets say one. Welcome to HTML 201. And let's create a link. And we don't know what this link is going to be yet, but we know it's going to say scroll to bottom of page. And we can get rid of this one because that's not necessary anymore. That was just an example. So now when I do this, I click scroll to bottom of page and it does nothing. It's because it's going nowhere. You can see that there's no HREF, No, there's no hyperlink reference. So let's say we had this really, really long page and let's go ahead and copy this a bunch of times. And I don't really care too much about the formatting at this moment. I just want the page just scroll like this. And I want when we click the link to go to the bottom of the page and maybe have a link at the bottom of the page to bring us back up to the top. So let's do that. Let's say there's going to be, let's say like an H3. And we're going to give this an ID, and this is a unique identifier for this element, so it should never have to have the same ID in the same page. So let's call this bottom, and this is the bottom of the page. And when I refresh, you can see it just as the bottom of the page, nothing happened to the ID didn't do anything particular. But if we go back up to our link, we can actually type in number sign ID. Now whatever that ID is going to be, and now that ID that we wrote was bottom, go down here, ID is equal to bottom. Save that. And I'm just going to refresh up here. And you can see my link actually changed color. And you can actually see it says index.html number sign bottom. And when I click this, boom, it brings me to the bottom so it doesn't do a smooth scroll, but it does jumped me to the very bottom of the page, which was actually quite important for long content pages. Now let's go ahead and create a link to bring us back up to the top. So maybe let's remove this as an H3 and this makes this a little more hidden. Let's create a div in here. And you can see we're going to be getting a little more advanced with this. Id is equal to bottom, but we know IDs can or should be completely unique. So let's go ahead and get rid of this one. You can actually get rid that whole line. And let's put a link in here that's going to go back up to the top. Back to top. Now because this is an internal link, this needs an ID somewhere on the page called top. So let's scroll back up to our code here, and let's give this an ID of top. And let's refresh your page and give this a shot. And that zoomed way out for me, I wanna zoom back in. And this should scroll me all the way to the bottom. Boom, just like that or not scroll but jumping to the bottom and this should jumping back up to the top, just like that. So now we have internal links. What I would like you to do is create a page that's long enough that you actually create a scroll bar here. Or what I did was because this page actually wasn't very long. You can always just open up your inspect tool and if you shrink it or if you bring it up high enough, it'll sort of shrink your viewport and you'll have a scroll bar and you can test it out that way like this. Go ahead and give that a shot once you're ready, let's head on over to that next lesson. 4. Favicons: Let's take a look at fab icons. Fabrications are these little icons that show up right next to your page title. Now we don't actually have a favicon set. We have a title, which is cool, but what if we want something a little bit custom? We can actually add that as well. We can customize it to be whatever we want. Know. Typically it should be an image as 32 pixels by 32 pixels, so it's pretty small. I'm not exactly going to follow that rule because I know it's going to shrink it down, but if you want it to be properly sized, maybe have proper translucency or transparency or anything like that. Then yeah, you're gonna wanna 32 by 32 image. But I'm just gonna use random image that I have from the coding, from coding for everybody branding. So let's open up our code here. And in our head, what we are going to create is the link element. And we can do link colon, favicon. And he gives us all sorts of stuff in here. Now by default it wants us to use a dot ICO. That's an older format. We don't have to do that. We can use, let's say a dot PNG. Now, this is just like linking to an image or a CSS or a JavaScript file, we actually need to make sure that this works. And you'll notice that we're using three attributes here. So we've got the link element. We've got the rail or the relation like what is it? It's a shortcut and it's an icon, a hyperlink reference to wherever that image is going to be and then the image type. And we don't want the image type to be X icon, we want the image to be P&G because I'm going to be using a PNG. Likewise, if you're using a JPEG, it would be JPEG. Alternatively, JPEG with an e, But we're using P&G. Now it's at this point I might actually want to use my editor a little bit more. So what I would like to do is instead of just having one file open, I'm gonna open this whole folder. I'm going to go file open. I'm gonna go to my desktop where this folder is, and I only have index.html in there. Let's go ahead and open that. And it really looks like it didn't do a whole lot except added this Explorer bar. Now if that explored bar does not show up, you can always go to where are you at somewhere in your view explorer right there. View Explorer that it'll always turn it on for you. So let's click index.html. And this is just the page that I was working on. And in here I also want some sort of image to link two. So I'm gonna open up my Finder. I'm going to copy this particular image. I came prepared to this lesson with an image called coding for everybody, favicon dot PNG. I'm just gonna copy that entire name. And you can see as I copied it into that folder, VS Code was like, oh, there's a new file. Okay, let's, let's put that in there as well, and now we can preview it. So this is what the image is going to look like. And all I have to do is because I copied that filename, I'm just gonna paste that file name. And we're not using slashes or dot, dots or anything like that. We're, we're not using this, or let's say fav cons, we're not doing anything like that. We want to make sure this is in the same folder as our index.html, just to keep this simple for now. And you can tell it in the same folder because we're in the HTML2, uh, one folder over here. And there's index.html and coding for everybody, favicon dot PNG. Let's go ahead and save this. And let's refresh this page. And you can see that favicon now showed up. Now if you're using another browser and it does not show up, that could be because of one of two reasons. There's a typo and you haven't actually added the image properly. I'll show you how to debug that in just a second. Or there is caching and I know browsers like Microsoft Edge like to cash pretty hard. So you might actually have to do a hard reload or open up another browser. I just because your browser's gonna try to get this, this image once and then try to cache it for very, very long time. Now if this doesn't show up for you, and let's go ahead and do this wordy. It doesn't show up in there. And you can actually see with my inspect Tools open, there's one error. If I go over to my console, you can see network error err file not found and is looking for a query coding for everybody, favicon dot PNG. And that just simply does not exist. So if you open up your inspect tools and there's a typo in there, or the file doesn't exist, you'll see the error right there. And I'm going to undo that. And there we go. We have a favicon. So if you're following along with me, what I'd like you to do is find a small little image, something like this, and add it as your favicon to the page that you're working on. 5. Pathing: Alright, let's talk about something that's kind of complex and kind of tricky because this one is going to trick a lot of people for a very long time, including myself. And I'm talking about pathing. So we've put everything into one particular folder right now, but what if we wanted another folder? What if we wanted to move our favicon into a folder called images slash fab icons. And we could just click and drag that right in there. We've got a folder in here called images, and then another folder called fab icons, and then a file in here called coding for everybody. So in the last lesson we created a favicon. But when I refresh this page, we're going to see that we get that air file not found. It does not exist because it's not in that same folder anymore. It's on the same folder as index.html. But what we can do is we can say and go to the images folder slash, the fab icons folder slash, and then our filename. So let's go ahead and save this refresh anyways and shows up for us. So that's pathing. That's how we get into a path. So we just had folder name slash another folder name, and by the way, don't use spaces. I know a lot of Windows users like to use spaces, but in things like this, do not use spaces is a lot easier if you use underscores or dashes, but please don't use spaces, you're going to run into a lot of problems. So a folder named slash, folder name slash, and then the filename, Simple as that. Now let's go ahead and add an image into the just the images folder here, not the favicon folder, but just the images. So let's go ahead and go to earn splash dot com. And let's get an image of a computer because we're working on computers. Good enough. And let's download this one for free. Let's get the small version of this one because that's all we need. I would like to say thank you to Glenn Carsten. Peter's. This is a sweet photo. Thanks for let me use it. Let's go ahead and show this in the Finder. And I'm gonna open this up. I'm just copying this file. Let's go ahead and throw this into here. And I'm going to rename this to computer ab.js JPEG and editor. You can actually see this turned into a proper folder now. And now there's sub folders in here, but in images, I've got a folder called fav icons and a folder, and not a folder but an image, a file called Computer dot J peg. Now, I'm gonna get rid of a bunch of these p elements because now we don't really need them and we're gonna make this page long anyway. So that internal link to the top and the bottom of the page is going to work perfectly fine. Eventually, Probably not right now because the page is kind of short. But let's go ahead and add an image. And that SRC is going to be images, that's the folder name. And then the file name is Computer dot JPEG is given an alt computer. And that's it. So if we go back to our page and we refresh, we can see this image shows up now. And that's in the Images folder now, again, if that doesn't work for you, let's just make sure that you always have things typed properly. It is case sensitive. So if your folders called images lowercase, do not write images uppercase and that's just not going to work for you. So let's do images. Break me and let's refresh. We can see the alt text shows up there and in my console, you can actually see error not found. So that's passing into a folder. Now, let's say someone goes into the images folder because we can do this. We know that HTML 201 is a folder. And we also know that images is a folder. So let's do this. Let's go to slash images. And we can actually see that we have fabric on a folder and we have computer dotted JPEG. But let's say we actually wanted something to show up here. What we can do is go into our images folder, create a new file. We want to call this index.html. And that just means use this page by default. This is the default page that your browser's going to look for. So even if you don't land on this page, is going to try to use this page. Anyways, just by default. My VS code is set up to use Django templates by default, but let's change it to HTML5. And let's do HTML colon five. Images folder is going to be the title, name, and in the body, let's just say, hi, hi, hi, hi, hi. Alright, so I just refresh the page that we have, this index.html file and it's not showing our page by default byte, this is a good practice because once it gets onto a server, index.html is going to be the page that shows up by default. So it's going to look just like you click into it, just like this. But it's not necessarily going to say index.html. That's not a thing you need to really remember at this point in time, but it is a cool little thing that you can do with live servers, live websites down the road. So now we have this index.html file, inner images folder. Let's link up a page. So let's say h3. This is the Images folder. And let's create a Lincoln here, an anchor link with the hypertext, hypertext reference. And we're going to use a relative page. So we're going to say go up one folder, and that's how we do that. We go dot dot up one folder. If we needed to go up one more folder because this is already in the Images folder. We needed to be outside. We could do dot, dot slash, dot, dot slash, dot, dot slash. Every one of these you can actually see is going up a folder in my computer. Now I don't want any of that. I just want up one. And I want to be able to select not the images folder, but index.html. And that's going to be referencing this one here. The naming gets a little bit confusing because we have to index.html file is but okay, and VS Code was smart enough to figure out what we were trying to do. Go back home is what I'm going to say in their three freshers page. Make this just a big, bigger. And we can go back home. And when I click it, it goes back to the HTML to a one homepage. So that's pathing in a nutshell to move up a folder, use dot dot slash. To move into a folder. You don't use the dot dot slash, you just specify the folder name slash, sub-folder named If there is one slash and then your filename. And that is pathing in a nutshell. 6. Introduction to tables: Okay, let's take a look at tables. Tables are wildly important to us right now because there are going to enable us to actually create some sort of layout for our page. Now admittedly, layouts, orange really created with tables anymore. This is a very old way of doing things, but because we don't know CSS and we don't know JavaScript yet. This is the only way that we have and that is 100% acceptable because even though we're going to be using tables in a way that's not really used anymore. We are going to be learning all about how to use tables properly because there's still used for things like feature sets or pretty much any government website because they all still use tables for some reason. Yes. So tables are still used. Emails use table tables all the time. It's a really important skill to have. So I'm gonna go down here and in this lesson I'm just going to show you how a table is created, but we're not actually going to do anything with it yet. So don't feel like you have to code along with me. So a table is a table element just like this. And inside of this, we have table rows called TR's and, or I can do TR. And then tab. We can have another table row TR tab. And then inside of each table row the cells are called table cells or T Ds table data cells. Cell one. And let's go in here and do TD cell two. And by the way, if you're sort of just new to this course, I'm going a little too fast for you. What I did there was I could type in Table and because it's an HTML element, I can type in table. And as soon as I see that Emmett abbreviation, I can hit the tab key on my keyboard and it just creates it into HTML elements for me. So now we're getting into some nice nesting and an HTML 101 we learned all about nesting. So we know that this whole thing is going to be a table including the child and grandchild elements. This whole thing is a row including its child elements. And this single element here is going to be a cell, and this one is going to be cell two. And if we just refresh our page here, scroll on. We can see cell one, cell two, nothing fancy really happening there doesn't look like anything's happened. But what if we give this a border of one? We now actually have a table. We can do more with us to, we can say the width is going to be a 100%. And it takes up the whole thing, how we could add another cell. And this one's going to be so 1.2, I guess. And we could add 1.3 and we can go up, so on and so on. So anyways, we're going to get into this in much more depth in the next couple of lessons. But I just wanted to quickly show you that this is how we create a table. 7. Table rows and cells: Let's take a look at table rows and cells. So to create a table, we do this table slash table. And that is all we really need to do to create a table. But inside of a table consists of two primary elements, a table row. And that's what TR stands for. T r is equal to a table row. And inside of each row we have cells are table data cells. So a td is equal to a table data cell. And so it's through TD tab. And let's create a first cell, first cell here. And let's flip over to a browser and just hit refresh. We're gonna see our first sell. Well, we can't actually see it and we can inspect it if we wanted to. And we can see that we are in fact in a table and our browser is smart enough to say, hey, there's actually supposed to be a body here. So wrap the TR's in a t body. So this actually goes one level deeper. So it goes table T Body TR td. Now I don't have to write the t body because I'm assuming that everything that I'm writing is going to be in the table body anyways, and the browser is making that same assumption so we can shortcut it that way. Now to see our progress, I always like to throw border on here and then just get rid of that border later. So let's do a border of one and a width of 100%. Let's refresh. And now we can see we have our first cell. And if we go ahead and add a second cell, and this is going to be side-by-side, which is something we weren't able to achieve with block elements in HTML 101. But now we can, and we can keep doing this, so on and so on. So instead of seconds L We could do third cell and we can keep adding more and more and more. And we get rid of that third Salomon and copy this whole thing over. Actually, I'm not going to copy it. Let's write this out by hand because this is good practice to write this out by hand. Ted row to sell one. And if I do another TV hit Tab R2, L2. And there we go. We have first sell, second cell row 2l, one row to sell to. And that's how we create a table rows and cells. Now what I would like you to do is give this shot. I want you to create a two-by-two table, create four cells. So you have two rows to columns and four cells in total. Go ahead and give that a shot once you're ready, let's head on over that next lesson where we dive a little bit more into tables. 8. Merging table cells and rows: Let's take a look at merging cells and rows. So this gets really, really interesting and it's not actually super intuitive at first, but it gets a little easier the more you do it. So in the last lesson, we created a two-by-two table, two rows, two columns. This one, we want to create a three-by-three. So I'm gonna do a table here and I want to see my border. I wanna see my progress here. And then change that width to 100% because I wanted to take up as much space on my page as possible. I don't really want to leave any extra space off to the right. Now for good measure, we could always do a t body if we wanted to. I didn't do that in the last lesson. I talked about it, didn't do it. That's okay. I'm gonna do it this time just to show you that we can do it. So we've got a table row here. We know that this is going to be our first table row. Second row, third row. And all I'm doing is hashing this autumn, roughing this out. I'm making it a little bit easier to work with. And now I need, because I have three rows and three columns and let's go ahead and create TD 12. And all I'm doing here to copy the whole row is Command C, Command V or control C, control V. And I'm going to select all of that, copy that, paste it, and paste it in there. Let's go ahead and take a look at what our table now looks like. We've got row one, row to row three. Are actually, those are columns. I got that backwards. So in column one, column two, column three, row one, row two, row three. Now there's a way to merge cells together. And we can do this actually in a very interesting way. We can do colspan. So column span is equal to three. So we have to take a look here. How many columns do we have? 123. We can spend three columns. Let's go ahead and save this and see what happens. This number one in row one takes up three spaces, but now there's two more cells in here. Now if you ever see something like that, you can safely delete those extra cells because they're not needed. We said colspan of three, so take up three column widths. And then we also had some old HTML in there and we just got rid of that. When we refresh our page, we're going to see that rho one takes up three columns. Now. Now let's go ahead and merge this one and this two together. Let's not do that. Let's do this two and this three. So we need to go down to row two. So we've got row one here. Let's do row two. And we want to merge these two together. So we can say colspan is equal to two because we want this to take up all of number two and number three. Let's go ahead and save that refresh. And now it's taking up that extra spacing as well. Now let's go ahead and merge this one. So row to sell one and row three cell one. Let's go ahead and merge those together. So we can actually wrote, we can merge pieces of rows together as well. So in here, because we want to merge downwards, let's do a row span two. And let's see what this looks like. If I don't adjust this, you can see a displaced another cell which is not what we want. So we still have 123 and row three and we don't want that. Let's go ahead and just delete that rho one because we've got we've got a one here and we have a one here. We don't need both of them. Let's just, let's just delete this one. So delete, save, go back to our browser and refresh and look at that. So we've got three column widths. In our first row. Over here, we've got two column widths. In here, we have two row heights. And we do that with these attributes called rowspan and colspan or column span. This is going to be really important to your final projects. And what I would like you to do is give this a shot, do exactly what I did. Create a three by three table. And then start merging rows and cells together and see how it displaces cells and then try to delete the proper cells and just make it actually work the way you want it to work. Go ahead and give that a shot. If you get stuck, don't forget, you can always ask questions down below or in the Facebook group called learning to code. There's over 56 thousand members. We can help you within just a few minutes of posting a question. Go ahead and give that a shot and I'll see you in the next lesson. 9. Table and cell widths: Okay, welcome back. Let's take a look at table widths and cell widths. So I'm gonna delete that table from the last lesson, create a new one. And let's give this a border of one, and let's just create some default content in here we've got a table row, table cell, cell in here, standard table. We should be somewhat familiar with that by now. So if I go over to my browser and this is from the last video, if I just refresh, I've got to sell in here. It's not taking up very much space, maybe a one, it's take up 50% of the space on this page. And so if I zoom out, you can actually see it's super, super tiny. And what I can do is I can say width is equal to 50%. So far I've been saying with is equal to a 100% and it takes up all this width through here. But now I'm saying actually only take up 50%. And I can go into responsive mode here. And I can see that as my page gets smaller, so does that table. Now that's actually super, super hard to see because that's super, super tiny. But it is becoming smaller and smaller. So it is maintaining that 50% width. And all he did there was click this little icon in Google Chrome and that sends me into responsive mode. So you can see how things are going to look like on tablets, on mobile, things like that. Now, I'm just gonna zoom back in here. And let's change this back to a 100% because I want to use more width. So I can take up more real estate just for demonstration purposes in the video, it just looks a little bit better. You don't have to follow exactly what I'm doing. So I'm gonna add a second row in here. And let's say I had a selling here and I didn't want it to take up exactly 50% of the table. So what our browser here is doing is saying, hey, there's a table, it's 100% width. There's two cells, 100 divided by two is each one is 50%. That's all it's doing here. Let's say I wanted that first one to be smaller. We could say in here, width is equal to, and let's give it a 20% in here. Now, before I show you what that looks like, I also want to mention that you can get rid of the percent sign and you can do this in pixels as well. Now that's a little bit harder. It's a little more hard-coded. Not always what you want percent is usually what people are looking for. But you could also say instead of a width of 100%, because a width of 500 pixels. But I'm gonna stick with percentage for now. I save that, refresh my page. And you can see that the cell actually got smaller. Now you're probably thinking, well, what's, what's the use of that? But if I do this, I can do a new table row and new cell in here. And I can do colspan of equal to, it's supposed to be equal to two. So it's like there's two of them, but it's going to be merged together. Welcome to my web site. And in this one, the one where the width is only 20%, we could say something like H3. Let's put this on new lines so we can read it. H3 navigation. And in here we could do H3 content. Let's go ahead and refresh this and we can see welcome to my website. That's like the title of my page. We've got navigation so we can make a list of links in there. And we put some content in here. So now we're working on an actual layout. Now what I would like you to do is create a table and with just one particular cell, I want you to tell it exactly how wide it should be, give it a width. And as a recap, all we did there was add the width attribute to either the table or the cell. In my case I did both. So the table is a 100% width. And then I said the cell should be 20% of that table width. 10. Table headers: Okay, let's take a look at table headers. Now this one is actually super easy because we've been using the TD elements for table data cell. Let's go ahead and use a table header. And all we do here is T h. And I'm gonna change this to an HTML file. Th represents a header cell in a table. And let's go ahead and change the closing tag as well. And you're gonna see from the last lesson to this lesson, this is what it used to look like, and this is what it's going to look like as soon as I hit Refresh. It's now centered and bold. That's a table header. And that's really all there is to add a table header works the exact same way as a table data cell. The only difference is instead of TED, we said th, that's it. Next in short. Once you think you've got the hang of that, let's head on over to that next lesson and I'll meet you over there. 11. Inline CSS: Okey-dokey, welcome back. Let's take a look at inline CSS now we actually already covered this in the very first lesson where we said style is equal to text-decoration underlying. We can do that on pretty much every single element in the body of our page. And by body, I mean the body element. So any element in here, we can add that style attribute too. So let's go ahead and create a div. And in here let's give it a style attribute, and let's change a few things. And I'm just gonna give you a little glimpse into CSS. So let's give it a padding of like 40 pixels. Let's give it a font color of white and a background color of, let's say black. So we can read it nicely on the screen. And in here I can say lower tab. And that's all I'm going to do. So you can actually see the syntax here. And at this point I probably don't need to explain this syntax to you anymore, but just for good housekeeping, let's go through it anyways. So I created a Div, space. Style is the attribute is equal to and then I have everything between quotation marks. Then I've got a CSS declaration in here. So this whole thing is a declaration. You don't need to remember the CSS part by the way. But this is a CSS declaration, were saying add padding 40 pixels to the top, right, bottom and left. Change the font color to white, background color to black. And in-between each of these declarations, such as this one, we have a semicolon, so it's a little different than HTML, but still very, very readable. And this whole thing here is called inline CSS. So let's go back to our page and I'm going to hit refresh and look at that with just a little bit of effort and knowing just a tiny amount of CSS, we were able to create a padding in here. So we've got spacing here, over here, over here, and over here. We change the background color to black and the font color to white. We can also right-click inspect. And if I click on this particular element, we can toggle these on and off. This is what padding does. We can change that padding to be higher or lower if we wanted to, which is what we're doing here. And all I did was click in there and I hit the up arrow or down arrow. You can also type if you wanted to. If you wanted to, you could scroll all the way down in this little window here and you can see that it'll tell you right away that there's a padding of 40 on all four sides. And that is in line CSS, that's really all there is to it. And we can write all of our CSS in there. Now that's actually not a very good way to do it. But occasionally you're going to see that that's actually going to be required. And this is just something that you should be very aware of. Now, this CSS again, at this point in time, do not feel like you need to know this. After you, after you're finished HTML2, O1, this course, definitely feel free to pick up CSS. I have a course on CSS called the CSS masterclass. It's a huge, huge course that goes through everything you could think of. But for now, let's just keep focusing on HTML. Now if you want to follow along and do exactly what I did, go ahead and pause the video and give us a padding. Remember it goes whatever we're trying to change colon space and then a value and then a semicolon. And then what we're trying to change, like the color colon space, and then the value, and then a semicolon. And that's how we put three in a row like that. So feel free to give that a shot or not. And when you're done, when you're comfortable, when you're ready. Let's head on over to that next lesson. 12. HTML classes: All right, as we dive more and more into HTML, we're going to end up, we're going to end up transitioning a little bit more into CSS. And in this lesson I want to show you exactly how we can do that right away. So in the last lesson, we looked at padding color and white background, white color and background color of black. Now let's say we wanted to add that to another div. And so we could write another div in here, and we can fill this with some Lorem Ipsum. And then we would have to copy and paste this like that, which is not a big deal, but if we have that 20 or 30 times and then we have to make one change all of them. So let's say we needed to change white to blue and change whites to blue here. We have to do that 20 times. And that gets really well for lack of a better term because really irritating. And it takes way too long and there's a better way to live your life. So I'm going to, first of all, create another div here. And this could just as easily be paragraphs. And let's go ahead and see what we have on our page. Got a lorem ipsum. A lorem ipsum into lorem ipsum. So we've got 123. And let's say I wanted to apply this styling to this third one, but not the second one. What we could do is we could actually pull this style attribute out into a style element. Now it just happens to be that they're named the same thing. You can't necessarily pull an attribute name out and turn it into an element and just hope that it works. But in this case we can, so it's just coincidence there. So what I'm gonna do is I'm gonna select all of that deleted, Come up here, paste that in my style. And so this is not going to do anything, but what I'm looking at here is reusability. So I have this div and I have this div. And I wanted to be able to give these three attributes, these three CSS attributes to both of them. And we can do this with a CSS class, and we can say Class Name here. And select those three, moving back up, put them in there. And so this syntax looks a little weird. We're not going to spend too much time here. But the class starts with a dot. Then the name. There's no spaces or anything in it. It is case-sensitive curly brackets. And then the stuff we put inside of our style attribute that we now put it into a style element. And what we can do here is I'm going to copy this, but first and foremost, I want to show you that when I refresh the page, nothing happens. My console's not breaking, it's not complaining. I just have three divs with lorem ipsum in it. And what I want to do here is say, in this first one, class is equal to class name here. And you can see VS Code is trying to auto-fill that for me. And I could also do class is equal to class name here. And so instead of writing style is equal to paddings, 40 pixels, color is white, background color is black. Instead of writing that twice, we wrote it once, looks a little different. And we said classes equal to className. Hear classes equal to className here. Now when I refresh my page, I save that and refresh the page. You'll see that it applies the styling to both sections for me. Now, careful with typos here because I'm using uppercase and lowercase characters here. But if you don't do it right. And I purposely titled that one, it's not going to show up, but your console's not going to complain either. So you have to keep an eye out for that, make sure you're typing things properly. If that means you type slower, that means you type slower. That's okay. Now the other thing with classes is we can add multiple classes. So we could add another class here, call it uppercase, and we could do text transform uppercase. Now, I already know these because I write a lot of CSS in my day-to-day life. But VS Code is also pretty helpful here. So as soon as I typed text, you can see is trying to give me all sorts of different options in here. There's a lot to CSS. Again, you don't need to memorize all of it if you don't really want to. You can always just figure out how to Google is, as long as you can figure out how to get the answer, that's what's important. But going back glasses. So I have a second-class here. Again, class starts with a dot. That's what this means. It's a lot like saying dot is equal to or up here it's a lot like saying class is equal to. We just use dot as a shorthand method. And then let's make one of these uppercase and we can add uppercase to the second one. Now we need to add a space. And here, if you don't add a space, just looks like this. And your browser's gonna think that the class name is called class_name here, uppercase. Like all one word, it's not its className here, space, and then uppercase as well. And we can add more and more and more if we wanted to, as long as they actually do something. So I've got className here, space, uppercase. And when I refresh this, we should see that this inherits this same styling, but should also be all uppercase. And look at that. It's like it's shouting at me. And that's all there is to really classes in HTML. A class is a re-usable piece of code. It has this little dot here that says as a class, it has this sort of syntax. Again, you don't need to know this part at this point in time. Please focus on the HTML. Html that we want to focus on is the attribute called class. And how it works, we can have one class name, space, second-class name, space, third class name, so on and so on and so on. 13. HTML ID's: Okay, welcome back. We have one more thing to cover when it comes to CSS, and it's this idea of an ID. And we've actually done this when we were creating internal links. So we can create a link that goes to bottom or like this one, a link that goes back up to the top of the page. But we're using this ID attribute here, and we can actually style things based on an idea as well. So in the last lesson, we took a look at classes. Classes use a period. But if I scroll on back down here, you can actually see that id, like I'm linking here back up to the top and do, do, do, do, do, do, do. Id is equal to top. But down here, I'm still linking to it with a number sign, number, sign top. And that's going to bring me back up to ID top. Now what that is saying is basically number sign is equal to top. Id is equal to top. It's the same thing. So if we scroll on down inside of our style attribute here, we can create an ID testing id. And in here, and you'll see that it starts with a number sign, no spaces, no special characters. It's just regular texting here. So don't try to get too fancy with your class names or your ID names. And here we could do something like border, five pixels, solid red. Let's actually make this a lot more obnoxious and do 15 pixels solid red. Now, out of the box, this is not going to do anything because we haven't applied this particular testing ID anywhere. Let's go ahead and add it to this middle one. So we've got three divs here. We've got a top div with class name here, bottom div with class name here and uppercase. And in the middle we have ID is equal to. And I'll scroll up testing ID and you can see that these both match right here. Now the thing with IDs is they are supposed to be 100% unique. No browsers don't always honor that, but JavaScript will always run into a problem if you have two IDs that are the same. So you don't really need to know what that means at this point in time. But what you do need to know is an ID is just like your driver's licence. There should only ever be one copy of it. There should only ever be one version of it. That's your ID. So let's go back to our browser here. And when I hit refresh, we're going to see a 15 pixel red border around here. Just like that super obnoxious. So just like classes, we can select things by IDs and then add styling to it. And that's where this ID attribute comes from. Now there is nothing to do here. Don't worry, you don't have to actually know all of this right now you're gonna get tons of experience with this in CSS and JavaScript when you go and learn those things. But for now again, let's just keep focusing on HTML. It's just good to know that there's a class attribute and an ID attribute, and this is how it works. Oh, and one last thing. You don't add multiple IDs here. So like how we have class name here, and then a space and then uppercase. And that is selecting this stuff and this stuff with an ID. We don't do that with an ID. We just say there's one single thing in here. So we don't do testing ID. And another one, and another one. We don't do that. We just say there's one. So let that sink in for a couple of minutes. Feel free to meet me over and the next lesson, and we'll get back to HTML. 14. Code formatting: Okay, welcome back. Let's take a look at a few different ways to format code, format code or code formatting. The first way is this pre tag p e. And if we just hover over that long enough, MD n is going to tell us that the pre tag is a pre element that represents a block of preformatted text in which structure is represented by a type of Alibaba by the first, the most important thing here is that if represents preformatted text, some stuff here. And let's go ahead and let's just check out what this looks like at first. So that's near the bottom here. And look at that. It actually did something weird. It added a bunch of spaces. So in HTML 101, if you remember, I preached about this. Html or not HTML, but your browser does not care about whitespace. However, there are a couple of cases where it does. Pre is one of those cases. So the pre tag is very white sensitive. And what if we did a second line here, second line here. Now in regular HTML, we need to add a BAR or some sort of block element to get onto a new line like this. But we actually don't need to do that, not in a pre tag anyways. And a pre tag. Look at that shows up perfectly. Now the thing to keep in mind is that the pre tag cares about white space. So let's go ahead and add a bunch of spaces here. Make this just like real terrible. It also lines up our text by the way, so it doesn't really matter what our default font is, because our text editor is going to try to make sure that every font is mono or every letter is monospaced, so that h is the same width as E, as the same width as ours is the same width as e is the same width as eyes. The same way that zed is saying where this m, yeah, you get the point. In the pre tag. It's going to do the exact same thing. Whereas if you look at here that r is not as wide as the EFF. Whereas here the SOM either all the same width, even the spaces are the same width. That is called Mano spacing. So that's one way to format your code. Another way to format your code is if we wanted to do something inline because PRE as a block element, we could say, let's add some Lorem text here, code slash code. And this is going to be in line for us. And this is going to make it look a little more code like, little more like this. And look at that. It actually took lorem ipsum dolor seat, seat, sit. I don't know. And it formatted it a lot like this. Now is it whitespace sensitive? Let's explore. Let's add a bunch of spaces between lorem ipsum. This one is not whitespace sensitive. Would you look at that? But pre is whitespace sensitive. So that's a good distinction to keep in mind. So I'm just gonna undo that because that's not needed. And those are two ways in which you can format your code. So you can write some code like this. It's still going to try to render HTML inside of it. Don't forget about that. You're still going to need HTML entities. That's a thing we'll talk about in the future. But you can still format your code like this or like this. Block element, inline element, pretty code element. 15. HTML entities: Okay, let's take a look at HTML entities. Now in the last lesson, we looked at pre and code elements. And let's say I wanted to put something in here like B. This is bold. And let's say I actually wanted to display this. I didn't necessarily want to just say like This is bold text. I wanted to actually show this tag. Now we're gonna run into a problem when I hit refresh. It, just bold my text. So it's still rendering regular HTML, and that's not what we want. We actually want this tag to show up. Now we have these things called HTML elements. And an HTML element starts with an ampersand or the end, and ends with a semicolon. And it's really just shortcuts to show less than, greater than copyright, things like that. And now there are so many of them, I cannot possibly cover all of them. And you're going to have to do a little Googling for it. But we can do less than, which is this symbol here, B. And then we can do ampersand greater than g t. And this looks really, really weird, but what this is going to do is turn it into that. And this one is going to turn it into that. But only while we're displaying it. So let's go ahead and refresh your page. And we can see that this now actually shows up. Let's go ahead and copy this whole thing over to our closing body tag. And let's add a slash in here. Look at that. So our text is no longer bold and it's showing us the HTML tags. Now we can do the same thing, the exact same thing inside of our code elements that we use in our last class or last lesson. Same thing, and we don't have to do it inside of the code element. We could do it really anywhere. It doesn't really matter. You'll see down here it says B, this is bold, so that that's an HTML element or an entity. And an entity, all it is is taking some sort of way of regularly reading the code that you're browser. We tried to interpret and showing it the way you want to show it in a human-readable way. Now a really good example is if we were to add like a footer to our page here. So let's say this is our footer. We could say something like and copy. And then we could put the year in here so we can put like 2022, if that's the year. Scroll on down and there it is, a copyright. Now just for funds these, I'm gonna throw into extras here. We can do for super, and that makes it up. So it brings it up a little bit instead of being centered. And we can also do SUB, SUB for subscript, superscript and subscript. And that brings it down. So I'm gonna undo that if feel free to play with those if you'd like to, but they're not really necessary. Just thought out, throw them in there for fun because they're sort of working along lines of copyright. Copyright is usually that little tiny see, at the top of the line, you'd use superscript for that. 16. Introduction to forms: Okay, let's talk about forms Real quickly. Forms. Now we are going to be spending a little bit of time on forms, but it's not actually going to be incredibly useful to us. Forms are how we send data to a server. But we don't actually have a server just because we've opened in HTML file in your browser does not mean it's a server. Server usually runs a programming language like Python or PHP, Java, C, some other proper formatting, proper programming language we're using not a programming language. Html is not a programming language, it is a scripting language. And thus, we don't have a server, we don't need the server to run it. However, forms are important for creating contact forms, update forms, login form sign-up forms, forgot your password forms, things like that. Now form typically looks like this. You have the form element. You have some sort of method. And you can actually see that it's suggesting to here, well three, but really you're going to be using GET or post for the most part. I, let's go ahead and use get. And the action is going to go to some page dot HTML. Now just as an example here, let's go ahead and create a button. And the type is going to be Submit, and we'll cover all of this individually, individually as well. Submit this form. And if I go back to my page and refresh and click submit this form, watch what it does to my URL. It goes to some page dot HTML. So it changed the page for us, which is kinda cool. And it would try to also collect the information from the form and put it in the URL, which is not great for passwords or credit cards or things like that, but it is a good way to work with forms when you're just learning. Let's take a look at what else we can do with a form. And again, you don't need to follow along with this, will cover all of this on its own. So input, we've gotten input and we can do a text area. And I just let my VS code, my editor autofill stuff so it would show me things. This is an input field. It's one single line, like your email or your password or something like that. And this is a text area like you're adding your address. So let's go ahead and take a look at some of this individually. What I'm gonna do is just delete that because it's not going to be useful in the next lesson. Although wanted to do here was show you, hey, this is how forms work. And in the next lesson, we're going to actually get started with forms. 17. Input elements: Okay, welcome back. In the last lesson, we took a look at what a form does, an action. We don't want this to go anywhere. Let's just do this. Let's make it go to the same page we're already on. So when we have certain elements, like input, text area or button, or there's one were actually select. We're going to cover all of these individually. But when we have these, these should all be wrapped in a form element. Now this is sort of mix and match and do what you like. There's not a lot of rules to it. As in you don't have to have an input text area button then select. You can mix and match these in any way, shape, or form that you like. But let's start with input. So we can do input. And I'm just going to hit Tab. And by default it's type is text, so just regular text, but there's lots of different types. There's button which would look like a button, a checkbox colored datetime, datetime, local, date, email file hidden. Which is nice because that one shows up not at all, but you can still put information in an image upload, month, number, password, Radio Research, such search, submit, towel, text time, URL, week, so on and so on and so on until one and so on. Let's just work with one to begin with regular text. So this is our element. This is our attribute, type is the attribute, and this is our value. We're saying it's a text field. Then we can give it a default value and say hello world. And we can give it a placeholder as well. Placeholder is equal to enter your name. Let's go ahead and let's just take a look at what this looks like. Oh, no, scroll to the bottom. Thank you. This has HelloWorld. And when I delete this, delete, delete, delete, delete, delete, delete, delete, delete, delete. This last one, that little text in the background that's placeholder text. But when I refresh the page by default, it says hello world. And that's because of the value that I gave it. Now another example would be password. Let's go ahead and, and you can see that it turns it into little dots that we can't actually see what it's doing. So that's the input field, that's really all there is to it. In the next lesson, let's go ahead and take a look at our text area field. 18. Textareas: Hello and welcome back. In the last lesson, we created an input field in this one, let's go ahead and create a text area. Now this one is a little bit different. You'll notice that the input field was a self-closing tag. The form was not, so it wraps a bunch of stuff in here, but the input field actually takes a value in the form of an attribute called value. The text area does not. We can get rid of name and ID because we're not doing any of that stuff. We also have a little bit of rule-breaker here where we're saying, hey, this one's not actually using value. The attribute is not doing this. This one actually wants us to put our text in here. And this is interesting because if I refresh this page, says text in here. But what makes us more interesting is this is one of those rare cases where whitespace does matter. White space does matter in here. And the reason I'm showing you this is because I have on my first line text in here, but then on the second line, I have like 15 or what does that 12 spaces before the word whitespace. Let's go ahead and see what that does. Who are text area. It makes it not very nice and gives us all the extra spaces in there. So if you ever run into something like this, just go ahead and throw that to the very left of your your document, your page you're file that you're working on. Let's go ahead and refresh. And that brings it back to the left, and that's our default value. Now this can also take a Placeholder. Placeholder is equal to, wow, a Placeholder. Placeholder. Okay, refresh. Go ahead and let's grab all this and you can see I've got extra white-space in there as well. Let's go ahead and clean that up and grab all of this Delete. And it says, wow, well place holder. Now we also have columns and rows just like a table. We can say the columns, let's say instead of 30, let's say there's going to be 50. Columns go up and down. So this is going to be 30. So 50 is going to be, I'm going to guess somewhere around here are pretty close. And then we've got rows which go up and down. A ten rows here we can say five rows. Let's make it just a little shorter. So we've had 12345 and then after this, the little scroll bar is going to show up for us, 6789. And you can see that scrollbar here. We can also resize these, which is pretty nice. The biggest difference between a text area and an input field as it has columns and rows, the placeholder is the exact same, but the value actually goes between the opening and closing HTML tag. At this point in time, I would like you to give this a shot, create an input, and then create a text area. Don't forget if you get stuck, you can ask a questions down below. Or alternatively, you can join the learning to code Facebook group. We're 56 thousand plus members can help yoga at any given time. 19. Buttons: Okay, let's take a look at buttons. What is so important about a button? Well, if we go back to our page here, we have a password field and we've got some text area in here, but we actually don't have a way to submit this form. There's no button to submit this form, and that's what a button does. Now, button can do one of three things. So let's do button is equal to button and click me. So the important thing here is we're saying type, just like our input, type is equal to password, button type is equal to button. Now when I go here and refresh, I click this, nothing is happening. And that's because we said Type Is equal to button. This is largely for JavaScript, where JavaScript can actually do something with the click of a button. For us, this is completely useless. Next we have reset. Now, reset doesn't look like it's going to be doing anything. But if I go ahead and delete that and delete that and do a bunch of random stuff in your does, does as, as, as, as datas. And Click Me. Because this is set to Type Is equal to reset. It's going to reset my entire form. So this is going to automatically fill with a default value, and this is going to show up with its default value. Just like that, it reset the form for us. So pretty cool, honestly not used too often these days. The one you're going to be using most often is submit. And now if I refresh my page and refresh, click me. It actually reloaded my page. And you can see that it went to index.html question mark. And then put me back to the bottom. Now that question mark is because we're using a method called get. And when that method is get, what we can do is here we can say name is equal to password and the text area we can see the name is equal to, I don't know someone's address. For example, let's go ahead and refresh this page. And when I submit this form once more, you can see the password is equal to hello world. That's what shows up in here. And the address is equal to text in here. A new line, whitespace does not matter in here. And so that put it in or URL. Now this is actually a really, really bad practice. Don't put things like your password, inner URL ever. That's not really something you need to be too concerned with right now, but I am going to preach it just so that you're familiar with sort of how security works. If you ever put a password or a credit card or a social insurance number, social security number in your URL. Google can take that URL and store it on the internet and it won't know better. It will think it's a legitimate page. Not just Google, but being or other search engines, bots will be able to submit the form and get that information as well. People will share the links with their password in and things like that. You just want to avoid basically being able to share a password or a credit card number, social security numbers, social insurance number, anything like that, anything that's private. You don't ever want to put in your URL. So again, I'm getting a little preachy about security here, but it's really good to know. The thing to note here though, is test1. Test2. Password is equal to test two addresses equal to test one, just like we said. And that form is now submitting because we have button type is equal to submit. 20. Dropdown menus: Okay, let's go ahead and look at dropdown options. Now this one is really interesting. I really like this one, but before we do that, let's clean this up just a touch because our form is looking a little bit gross and it'll show you what this looks like before and after. So I'm gonna add a bunch of divs. And here, knowing that a div is a dummy element does absolutely nothing, but it is a block elements. So it's going to sort of put these on their own lines. And let's do this as well. And this is what our form looked like at first. I'll zoom in here. This is what the form looks like at first. And when I refresh the page, that's on its own line online. Online. So that's a little bit better in my opinion. Let's go ahead and create one more div in here just so that we can have a select element. And this select element is pretty interesting. So what we can do is name. We can give it a name selected underscore option. We don't need to give it an ID. And this one's interesting because it works a little differently than the input and text area. What this does is it allows us to use the option element where we can put a value and a text representation of that value in here. So value one, and we can say this is value one. We do the same thing on the second line, value two and this is value to, let's go ahead and see what this looks like. This is a little drop down now, and we can do this over and over and over again. I'll just make a bunch here. Not really good example, but an example nonetheless. And we can select one of these. Now the reason why we add a value in year plus the text representation of that value is because if I select Value one, submit this form. You can see up here. So selected option is equal to value one, and that value one matches here. So when you submit your form, your server-side programming language like Python is going to read this value, is going to say it is value one is not going to look for this is value one, it's going to be looking for just value one. Now we can also make things disabled and we can also make things pre-selected. So let's go ahead and make a new option in here that's disabled by default. Option value is going to be nothing. And let's say this is disabled as equal to disabled. Disabled, just like that. Let's go ahead and maybe throw this on a new line just so it's a little more readable. And let's refresh our page. Zoom back in. We have an option here that's disabled. I cannot select it and I can select value one or two, but not disabled. Now let's say I have an option in here that I always want to be selected by default. And say default. Selected is the value. Selected by default is the text representation of this value. And we can say, said elected is equal to selected, selected by default. And so even if I come back to this page and Lake, clear out all this stuff as if I'm a brand new user, I scroll to the bottom of the page, selected by default, even though it's a third option, it, it has not selected value1 and value2 by default, it is selected by default. Now the last thing to know about these form fields is you can make them required. So let's say required and required. So the password in the address fields are required. Let's go ahead and refresh this page. Let's go ahead and clear this out and click me and says please fill out this field. Now where this gets interesting is we can say this isn't a password. We can say this is an email address. Let's refresh the page. And actually what I need to do is change that type to email and even changed the name to email as well. So the default value is Hello World. But if I click this is please include an ad in the email address. It knows that it's looking for an email address. Hello world at something.com. Okay, so validation past this first one, it didn't pass the second one. It wants me to fill out this field here. Once I fill that out, it will submit the page or submit the form for me. Now, this is forms in a nutshell, forms are incredibly important. They're also quite complex. So I would highly recommend just taking a few minutes and messing around with it. Now it's not going to be immediately applicable to you right now until you start working with a server-side programming language. Again, like Node.js, Python, C, PHP, something like that. But you can still get hands-on practice understanding that something can be required, that it has a name that he could go in the URL if it's a getMethod that the type could be email, password, text, reset. This could even technically even BY button if we wanted it to, let's change that to button and see what happens there. Changes it to a button. Although I like using this form of a button, it's a little more explicit, verbosely named Even. And yeah, so just give this a shot and play with it a little bit. Don't try to achieve anything in particular, just tried to break things. What happens when you type Kohls is equal to 500 or one? See if that looks any different or rows, or see if you can make this selected, this select element required as well. Go ahead and just play with that. There is no goal here, but I would say spend at least ten minutes playing with this and just getting an idea of how this works because these are incredibly important down the road. 21. Embedding videos: Okay, welcome back. Let's take a look at embedding some sort of content. Now we do this typically with an element called an iframe. And iframe takes an SRC and a frame border while it actually takes a lot of different things. But the frame border is going to be 0 because we don't want a border around it. But let's, let's add that border. And there anyways, let's do SRC is equal to HTTPS. Caleb dot i, let's see if this even works. Yet. My website won't let you do that. But you can see that there's a frame border around here. And the example is frame border one versus print frame border 0. We like frame border 0 these days it just looks a little bit better. But let's go ahead and add a YouTube video. So I'm just on the coding for everybody YouTube channel. And let's go to the web development fundamentals. Let's pause that. And if I go ahead and click share, I can share on Facebook, Twitter, or I can click Embed. And it gives me an iframe and a bunch of code. And I can just copy that. And let's delete this iframe. Paste that in here. And you'll notice it's an iFrame. It has a width and a height as well. Its source is the YouTube URL. So dub, dub, dub dot youtube.com slash embed slash j, y arc PIH DG. That's the unique video idea, yes, frame border of 0. And YouTube also doesn't want us to have a frame border and allow a bunch of other things in here which we can get rid of Except allow full screen. Let's keep that in there. That seems useful. And so we can go back to our page and refresh and look at that. We have a YouTube video on our page just like that. And that's literally as easy as it gets. So that one's literally copy and paste. But let's see what happens when we do with those nine width of 900, but the height stays the same at 315. Gets a little bit squishy there, doesn't it? Let's say the width is going to be 900 and the height is 100. And now it actually looks like it's getting cut off a little bit. So there are ways to control this. And I'm going to undo that because YouTube suggested the right dimensions for me. And I can just go ahead and play this and it just works for me right out of the box. Now what I would like you to do is go find a YouTube video, click that share link or that share button, and then get the iframe and put it in your page. I want you to get a little bit of experience with this because in the next video we're going to dive into your final project where you're going to need to use an embed, such as an iframe. 22. Your Project: Okey-dokey, welcome back. We are finally at your final project for HTML2 01. Now, here's what I want you to do is I want you to create a page layout. So I want you to have some sort of header and navigation section and a content section. And it has to have a layout and it has to use tables or a single table, multiple table, it doesn't matter. I'll leave that up to you. Your navigation should have at least one link to another existing page of yours. Content area. Should have an image, a paragraph, a header, and a YouTube video. Lastly, your footer should have a copyright symbol and the year that you've created this page. So it could be like Copyrights 20-20 and copyright 20-25. And then when you're done that, I would like you take to take a screenshot of your page and share it with the rest of the class. I think it's really useful to get some feedback if you don't want to share with the class, that's ok. You can always go to the Facebook learning to code Group and share it with the group and get some feedback there as well. But feedback is absolutely vital and don't be too nervous about feedback. Thousands of people do this every single day. It's totally okay. We can give you all sorts of positive feedback to help you write better code, to make things look a little bit, little bit better, a little bit more modern, things like that. It's always nice to have another pair of eyes on your code. So go ahead and give this a shot. What I'm going to do is I'm going to pause this video for about, I don't know, five seconds or so. And then I'm going to create my version of this right in front of you. So go ahead and pause the video here and you know it if you get stuck, you can just watch me do mine and then you can try it on your own as well. But I highly recommend that you try it on your own first, make your brains sweat a little bit. That's really, really important. Okay, let's go ahead and create our project page. So I'm gonna go to File, New File and let changes from plain text to an HTML file. And the first thing I need to do is create that HTML5 structure. This document is going to be called Caleb's project. And the first thing we needed in here was to create a page layout using tables or a table. And so I'm suddenly leave some room for us to work here. And we want something that's going to look a little bit like this. Due to Doo-doo-doo-doo. Misses the hardest way to draw something. But yeah, so we could have something like that. So we've got like our header in here. They could say like Caleb's project, Caleb's website, your website, your favorite food, favorite pet, your favorite furniture or anything like that. We have some sort of navigation on the left. Over here. We've got a content and the right, and we've got some sort of footer at the bottom. That's the sort of look that I'm going for. Your style might be a little bit different, your layout might be a little bit different. But first things first is I know I need a table and I know I need to work with this table and see exactly what's going on. And I want the width to be 100% of this page. Next, I know I have at least one row here. So I've got a table row, and I want the table heading in here. Now it's nice to have the table heading is going to bold it for me, but I don't want it to be bold. I want an H1, I want this to be huge and say Caleb Tolkien's project. Next we have another row here. So let's go ahead and create another table row. This one has two cells though. So we do TD cell one, TDs L2. And let's go ahead and preview this by saving this as my project dot HTML. And I can go to file, open file, my project dot HTML. And we can see that the cells aren't really working. And this is expected because we want this to take up the entire width. But this is saying, well there's two cells, we have to display them somehow. What we can do here is th colspan is equal to two. And this is saying there's two cells down here. Make sure this also pretends that it's two cells. And there we go. That's looking a little bit better. Now we have a navigation over here in cell one. So let's just go ahead and label this navigation and let's label this content. Okay. You can actually see that that bumped my navigation over. Let's change the width here. The width of this one is going to be something like 20%. That looks better. Lastly, what I wrote in here, which by the way, I could rap in a pre tag, is I need this bottom row in here. So let's go ahead and add this bottom row, table row, td, footer in here. Let's see what this is shaping out to look like. Not bad, not bad. But we also want this to have a colspan of two. Let's do colspan of two. There we go. We've got some footer in here and we want to center it. So let's not make it a TD, let's make it a th. And let's start with the easiest thing in here. So we have our layout finished. The footer should have a copyright symbol. We know that's an HTML entity. It's that little c with a circle around it. So we could say and copy Caleb's website as of us live in the future, 20-30. There we go. Not bad, not bad. Navigation. We know that the rules were navigation should have a link to another existing page. Let's go ahead and give ourselves some room to work here. And let's create an unordered list. And let's change this to a HTML file. We have an unordered list and that first link is going to be an anchor tag that goes to index.html. Index.html. Go to our HTML to a one-page. Okay? Okay, that's coming together. I'm gonna zoom in here. So that's coming together. Let's go ahead and create another ally with a anchor inside of it, a list item with an anchor inside of it. And let's tell this one to go to, I don't know, Facebook.com, but this is an external links. We need the HTTPS colon slash slash. And this could say, Go to Facebook. Dot com. There we go. We've got a couple links in there. We know this one exists because that was the page when we were working on or it's a page I was working on from all the other videos. Lastly, we have some content in here. What did we want to add in your content should have an image of paragraph, a header, and a YouTube video. Let's go ahead and add that header first. And so you actually realize what I did there was content was just a place holder piece of text for me. All I really wanted to do was tell me that that's where it was supposed to be so I can quickly select it and start working. Let's go ahead and add some header in here. And it doesn't have to be real contents by the way, some header in there. It just needs to check off this acceptance criteria. So the header is done. We can get rid of that. Link to another page, get rid of that. Create a page layout using tables. Get rid of that footer should have a copyright symbol. Get rid of that. So now we just have an image, a paragraph, and a YouTube video. Let's go ahead and add a paragraph in here. P. Laura. Okay. That one is done. We no longer need the paragraph in there. We need an image. Do we have any images yet? We've got a computer, so let's go ahead and add that. Img. The source is going to be images that this folder here slash computer, dot-dot-dot JPEG. And the alt is going to be computer just in case the image doesn't load. Does this work for me? Yep, there it is. There's a big image in there. Let's lastly, add a YouTube video. So I'm just gonna boot up YouTube here and go to the coding for everybody channel. And let's go ahead and let's do Python formatting. Let's go ahead and click share, and let's get that embed. And all I'm doing is I'm selecting that text going to copy. And down here, paste. And that width is still going to be 560, that height's still going to be 316. I'm going to leave this allow Excel accelerometer clipboard, right? All that stuff. I'm gonna leave that in there because that's what Google is suggesting. We don't need to know what that really is at this particular time because this is intermediate HTML, not advanced HTML. Let's go ahead and let's go back to our page. And we have a title. We have some navigation in there. We have a header, a paragraph, an image, we have a YouTube video, and we have a footer. The last thing I wanna do is get rid of this border and this pre in here. So let's get rid of that preformatted text and that border can be removed. And let's see what we got. There we go. We have an HTML page with a proper layout. And that's all there is. So thank you for taking this course. My name is Caleb Eataly and thank you for taking the time to learn HTML 201 or intermediate HTML with me today. Don't forget if you like the way I teach you can always follow me on skill share as well. Thousands of people are following me already. But you'll get little updates. A boat like when I have a new course that's come out, things like that and then you can watch New Course has as I put them out. So thank you again for taking the time to learn all of this with me. I really look forward to seeing you in another course. If I don't see you in another course, I hope to see you in the Facebook learning to code Group is a completely free group. It's completely optional. But there's about 56 thousand members in there right now. Everybody is willing to help you out at any moment. And if I don't see you in there, then once again, just thank you and happy coding. See you around. Bye.