The Basics of HTML and Building a Website

To get started with building a website, one needs to know about HTML tags. There are certain tags that we think you put like TM, which can be used to get things such as trademarks and copyrights. Additionally, there's something called the "code trademark copyright" which is likely related to these concepts.

In order to use these tags effectively, it's best to just google them rather than trying to memorize every single one of them. This will save time and effort in the long run. For example, if you want to get a TM symbol, you can simply search for "TM symbol" or "trademark symbol" online.

Another useful tag is the copyright symbol, which can be used to indicate ownership of a particular work. To use this symbol, simply type it into your HTML code. There are also various symbols that can be used in HTML, such as stars, and colors.

To build a website, one needs to have a basic understanding of HTML and CSS. The former is used for the structure and content of a website, while the latter is used for styling and designing the layout. For example, you can use the

tag to create paragraphs of text, and the tag to add images.

In terms of CSS, there are many different styles that can be applied to HTML elements. For instance, the "center" style can be used to center an element horizontally, while the "color" style can be used to change the color of text or other elements. There are also various font styles available, such as bold and italic.

One of the most useful features of CSS is its ability to control the layout of a website. By applying different styles to different elements, you can create complex layouts that showcase your content in a visually appealing way. However, for now, we won't be covering all the intricacies of CSS.

For those who are new to HTML and CSS, it's best to start with the basics. This includes learning about header tags (H1-H6), body tags, div tags, and other fundamental elements that make up a website. These concepts may seem simple at first, but they form the foundation upon which more complex designs can be built.

The importance of practicing what you've learned cannot be overstated. To truly understand how HTML and CSS work together, you need to build a project from scratch. This will help you to solidify your knowledge and develop problem-solving skills that are essential for any aspiring web developer.

Creating a website is not just about following tutorials or watching videos. It requires hands-on experience and experimentation. By building your own projects, you'll be able to apply what you've learned in real-world situations and develop the skills that will serve you well in the long run.

For those interested in freelancing as a web developer, our team has put together an extensive training program that covers everything from HTML to advanced CSS techniques. The goal of this training is not only to teach you the basics but also to give you the tools and skills needed to succeed in the field. By the end of the program, you'll be well-equipped to take on freelance projects and start earning a living as a web developer.

The training program includes access to our team's proprietary resources, including coding tools and software that will make your life easier as a freelancer. We've also included video tutorials and interactive exercises that will help you to solidify your knowledge and develop practical skills.

One of the unique features of our training program is its focus on freelance development. While HTML and CSS are essential for building websites, there's more to being a successful web developer than just coding skills. Our team has put together a comprehensive guide that covers everything from setting up a client base to delivering high-quality work on time.

The training program includes access to our "Earn Me" product, which provides a structured approach to learning how to become a freelance web developer. This product is designed for those who want to take their skills to the next level and start earning a living as a freelancer.

By enrolling in our training program, you'll be able to transform your career and start building a successful business as a web developer. Don't miss out on this opportunity to learn from experts in the field and start achieving your goals today.

"WEBVTTKind: captionsLanguage: enwhat's up guys this is Kazi here from clever programmer calm this is we are gonna be your instructors for this html5 crash course for beginners so if you're a complete beginner you are in the right place we're not gonna go into the theory we're gonna can just jump right into it this HTML crash course we're gonna go through all of the basics and we're gonna go through fast you know how we do it here we get dirty we get down into it and we just start coding things up and you're not gonna listen to a bunch of boring fluff here that's not what this channel is about so we're gonna get into it really fast now we're gonna be covering how unordered lists work order list works what the hell or header tags how do you actually use tags and how do you create a basic looking web page that's what you're gonna get out of it it's gonna be awesome and before we get into it I do want to say that my team and I have put together a pretty amazing one-hour training for you that's absolutely free if you want to become a web developer or a freelance developer now this training is called top three secrets to become a Python freelancer but it will work perfectly well for you even if you're not a Python freelancer and you want to become a freelancer as a web developer okay it has the main principles that you need and it's unbelievable content and we have made it free for a limited amount of time so go ahead and click that link make sure you sign up for a seat in the webinar and then show off with your notepad or something cuz gonna be really valuable information what that's that let's jump right into this tutorial first things first there are multiple text editors that you can use the one that we recommend is free and it's also one of the best so visual studio code go ahead and download this whichever version you're on I'm on a Mac so I'm gonna just download the Mac version and then as soon as you're done downloading it just open it up install it and then open up a new file in it okay once you open up a new file your screen should look like this we're gonna create a new folder on our desktop I'm going to call it HTML HTML crash course and then inside of this folder we're gonna open this folder from our visual studio code okay so I'll go click here open and we're gonna just select this folder and go ahead and open it let's create a new file okay so let's go back to our visual studio code and we are going to create a new file and hit this and we'll call it index.html now remember this is important if your cursor doesn't look like mine don't worry about that yours will just look like this how it's supposed to I'm using something called vim for more advanced users but again this is a come for a complete beginner so we want you to be able to follow along now I'm just gonna hit save and I'm gonna show you that this file that I just made is actually this file that I just made is gonna be right over here on your computer now okay it should look empty alright now if I type in things here and save them and then I open this up and if I open this file you should see hello things here okay now there are different browsers that you can use you can use Internet Explorer you could use a Mozilla Firefox you could and you could use what else Chrome but you know probably don't use Internet Explorer it's not gonna be good for you so if you want to challenge a real challenge right let's try to stick with using Chrome because this is gonna be the best for you and the easiest way to go now because that's my default browser that's why this index.html file turns into this the extension is very important if you're on Windows or in some other computer and it turns it into dot txt at the end or dot make sure that you change it to dot HTML okay and if you double click it or you open it from your chrome and it looks like this then you're good okay so I hope that you're following along so far now what I'm gonna do is I'm just gonna do that so I have more space on the left-hand side to code I'll also open up this file on the right-hand side so that you can see it so I'll put this here okay let's go right here all right so now if I type in things like you know headings in if you ever go to a website you see things in big giant letters what they're using is something called header tags okay if I go to for example give me a website that's Wikipedia that's a good one okay so let's go to Wikipedia BPD oh all right Wikipedia and let's type in from programming whoops I miss what I put in HTML there you go programming okay so if we look at the structure of how this page is set up mostly it's through HTML there's very little CSS actually used here and in this video we're not gonna be using CSS so things are gonna look ugly things are gonna kind of look like Wikipedia Craigslist all right yeah or Craigslist so let's go here and if I hit inspect right what I'll find out here is that this says h1 so this is actually a heading tag okay so going back to my code if I actually do h1 hit tab and do programming language refresh here these are the heading tags this is why there's this big - cool so let's go ahead and remove this now we need to give our page a structure the first thing you always want to do in your HTML page the reason why I'm just jumping in right away is so there's not so much theory you got to get through I'll explain we'll explain the theory to you as we go through each step not necessarily just in the start so one thing you want to do is you want to do doctype HTML for html5 this is something you always have to do to make sure that your document is interpreted correctly from the browser okay so I'm using Chrome and this will make sure that it's doing it correctly then other tags that we actually need are things like a head tag okay and a body tag all the code you'd you generally write goes in your body tag like this okay yeah all right and then um if you have things like title which is over here where if you see it says index.html well I can change that to cause ease website like this and hit body supposed to be outside of it let me leave your header oh hello eyes watch three yeah I think I'm thinking of theirs head body and then what's the other one that covers everything Oh HTML oh no body contains everything body contains everything body is outside of head and it also contains on your right head or body footer okay okay let me let me redo that okay good cat just get a good catch another session okay so the the first thing you need in your code so we had HTML tags first of all right yeah so now I'm gonna so let's go here and let's remove everything from our page I'm gonna save and I'm gonna go here and refresh okay so I'm doing command s to save and then command or to refresh on Windows is gonna be ctrl s and then ctrl our first thing we need is we're gonna create a head tag and then inside of head we have things like title so if I go coding website or if I do my coding up side save it refresh but you see that title at the top change yeah on the tab on the tabs that name of the web page kind of pretty much right well the title of the page I guess it as its called an HTML yep so we have changed the title now another thing we need are is body tag and inside of body tag is where we write most of the code so now we can put that programming language thing we had earlier in here if I hit refresh you C programming language shows up and all the tags are similar to this right so for example if I change this h4 h5 h6 header tags go all the way to header six and header one is the one with the the biggest one and then header six is these tiniest point right so let's go ahead and do that here mmm magic yeah okay so we have it's almost like this is the most popular programming language all the way to the least popular the tiniest so this is how header tags work now there's something called comments in HTML comments or H first of all hTML is not a programming language it's a markup language but every programming language or most languages general have this ability to write comments comments are not for the computer to interpret they're for the human to read so we can add comments by doing this and I can say header tags okay if I go in here and refresh it doesn't change anything on the page but it definitely puts them here all right now I can show you paragraph tags okay they're also known as P tags and what they allow you to do is just write stuff so let's say I wanted to write things right and I wanted to break them apart well how would I do it let's that right Aaron then I write Kazi and if I hit save and I go here and look it's in the same line yeah it's just like chunking them together exactly and that's not what we want we want them to be separate into new lines right yep yeah so Wikipedia if we go here and if I fullscreen this page you can see that there's a paragraph here and then there's a new paragraph here so what is actually happening can I hit inspect and dig deep into it well what you see here is there's something there using called the P so if I hit in this button over here to inspect element if I hover over this this says you see that little P and purple I can't move my mouse over to that I hope you see where it says color font margin you see it yeah yeah this oh you little box bit up right the box that popped up right underneath where it says article and talk well that P means that this is a P tag if I hover here you see the P show up again so that's the P tag okay now let's go back to our code and put P tags around this okay so let's go P tag like this and then do this copy and I'll take Ozzy and then I'll delete this and if I go here and refresh you can see that now it separated them out into actually two separate lines two separate paragraphs yeah yeah two separate terms and if we have like Aaron is an epic developer oh right fire emoji you don't need to do the fire emoji but I'm just adding that in and then we can say cause II is a better developer sometimes okay yeah and sometimes the end of both of these okay sometimes right okay and you can see that we have different paragraphs now you can also do lorem and hit autocomplete and it it basically creates this lorem ipsum which just means dummy text okay it's a fancy weird way of staying just dummy text most text editors probably have this capability so if you do lorem and you hit tab it will autocomplete it but what we want to do is we want to make sure that we put P tags around it whoops P tags and then I'll do lorem hit tab now you hit tab to autocomplete so when you type stuff it allows you to autocomplete it right so if I do P I can actually just hit tab here and it'll autocomplete it I can do h1 and I can hit tab and then autocomplete it which was BS code and most editors allow you to do that but yet the Lord it's up to you oh yeah it's easier to do the lungs have so if I do refresh it's a translate because it detected this to be like Latin his lines is like yeah so there we have our lorem ipsum now a what are some other things that are really useful that we need to know in HTML well some other common things you need to be able to do is one you want to be able to let's say you're making a video hosting blog post right you want to be able to host videos well you can do that with HTML it's pretty cool so for example let's go to youtube.com/scishow let's take a video so let's take this giant crash course video we have okay so let's take this video alright so let's now go to share so I'll click share right over here and inside a share click embed on a YouTube video copy this code alright you can also hit the button copy here and now just get out of here you don't need to be here anymore okay and you can paste this code alright now if i refresh you'll see that that video is actually embedded into your website now in this tutorial we're not gonna be teaching you how to host this website online yet but we want to show you how to make a useful HTML website that people could actually use and that you would even want to use so now this is using something called the iframe tag here right and some of the things that you might be seeing here is like oh width and height height what's going on here well we're gonna talk about that in a second we're building up to it alright so we've covered P tags we've covered that when you start a tag you got to end the tag so h1 when you start it you got to end it you started here is to you got to end it P tag you start it you got to end it the /p part is a part that allows you to end it yeah it's like a ND tag exactly start tagging ending tag yep for most tags now when you see code to write what you should try to do oftentimes it's play with it mess it up see what happens so for example if I go again to YouTube that video right you can actually change code on the fly right and now what I can do is let's say I do hit inspect element and I highlight it and I hit inspect element right right over here and I can click into it and says python full course for beginners and I can say JavaScript crash course by Aaron Wright and all of a sudden it's changed I can go here and I can hit inspect and over here it says 18,000 views I can say - - built put ten billion right - two million three hundred eighty-seven thousand views on this video and I can also go click here and I can change this to 0.5 to be like alright so a great job when the jobs from crash course right teleports the future you guys yeah so you killed it make sure you don't forget that so there you have it right you can go and play with HTML code already you can go and play with it on the websites you know do funny jokes with your friends I mean there's a lot that you can do with HTML it's gonna zoom out here a little bit so we have more space and and then zoom in here zoom out here okay great now let's go back okay so this shows you that you can you can play with HTML code now it won't stay there if i refresh this page is gonna go away it's just temporary it's only on your computer but it's still really important to be able to practice and play like that because when you practice that's how you improve you want to be able to tinker these things and change them and then you keep improving your skillset that way all right let's continue so if you see this with try changing it and do 300 and come here and refresh and see what happens oh it changed right let's go here and change the height and go here and refresh oh now the height is bigger and this is how you're gonna get a lot better by constantly practicing it right this one video or one crash course you see from somebody is not gonna change everything but if you keep practicing it that's how you'll improve okay let's add more things to this let's add maybe what you would do we had images oh yeah okay we skipped images illustrate the videos with right we we went in more advanced so let's add images right so let's just so easy since it's even simpler the videos I like a chess board so chess board I'll type that in let's go to images nice and we'll find some image here was it's just which which one should we pick that one this one yeah sure okay so I'll right click here and I'll say copy image address so if I open a new tab and I hit it should ya get this I just hosted at that URL yep so now I'll go here I'll type in IMG and I he'll hit tab and it'll auto complete it okay so in here now there's this thing called source source is asking what's the source is it local or is it online well we're not gonna host this locally we're gonna pull it from online because most of the times I'm pulling stuff from online right and most people aren't makes your life easier and I'm just gonna hit paste on that link that I had found so this link might actually not work because kind of fun yeah it doesn't actually look like that you doesn't look like a URL does it how long does I think you copied the wrong thing man I did you know it's showing huh so I'm fine Jesus Christ let's say there's three dots at the end so it keeps going is this three okay so well we can get is we can say copy link address maybe but then that doesn't get us what we want so I'm fine so if you can do this there you go you can get an image like this okay apparently it's a convoluted URL what would be the better way to get it copy image address that's what we did right so I guess this is a better link right by clicking into it so what I can do is I can do image and then paste it and now you have a more normal URL whew that URL freaks you yeah it was like data : or something so there you go you have the image okay and now to play around with this image well you can actually have there are these attributes you can have in images okay so you can pass a inside of HTML tag you can also pass it attributes so here we'll pass it for alt well alt is mostly useful for one the computers and the crawlers for example if the computer comes here and it doesn't know what damage is having an alternative description will tell the computer what it actually is and another thing is useful for I don't know if you know this it's useful for if there's a somebody who's blind and they're on your website yeah yeah you know a lot of blind people actually use websites and use computers I have I have I had a friend yeah I had a friend who was blind and he had a laptop and he would open it up and he would go and go through his search directory he would search up stuff he would know when the internet is down really like dizzy no seriously he had a contact book everything wait does it read it out to you like verbally or something no they they have Braille oh but we don't have Braille here while you do blind people know how to read Braille their computer is like a Braille tool as well yeah I seen that before yeah so there you go that's why you need an alternative description now other times you can add is definitely width and height so let's say with we make the width 400 and if I go here well you can see the board size just changed okay and then we can make the height of it you know 300 it might actually be around that so there it made the height a little bit yeah that kind of skewed work the image a little bit yep so this is how you make images right so I'll put image tag because images are useful now some other things you can do that are useful is what if you need to make something in link so if it says Erin and if it says Kazi well what if it linked to Erin's Instagram profile or a cause ease Instagram profile so let's go here and let's go instagram.com slash clever cause E and if we actually go here this is my Instagram correct so now I'm gonna grab this URL copy it X out of this and what I'll do is I'll put cause the inside of something called an 8a tag okay so I'll try it here and I'll do a and hit tab little autocomplete it it's asking for a link so I'll link it to Instagram comm slash clever cos e then I'll put the text here that says if okay so first of all watch what happens right if I hit save and I go to the website okay I'm just gonna delete the lorem ipsum because it's getting in the way it keeps asking about the translation there we go so I'm gonna go here now can you find on the screen where it's showing the link no no yeah well the reason why it's not showing is because you have to add text here yeah I saw that I could display this blaze exactly I display it so now we add the text I'll say cause ease profile safe and hit refresh well you have cause ease profile now if I click this it'll actually to it yeah it's the URL that we put in the HOF which is just a reference it's like where does it where as this text going to refer to yep now what if we don't want the people all who are on our website to leave from our website instead we want them to set open up a new tab okay well we do something called we pass in an attribute called target and we say go to blank all right which is it's kind of a weird way of doing this it should be something like target new tab instead of underscore blank but you'll see what it does if I hit it now I open up a new tab rather than rather than it going to a completely new website okay okay now what if I want to make this causey a link which is inside of a P tag well you can do that you can nest tags however deeply you want so I can actually go a tag here I can say href equals and I can do the same Instagram link right I can go like this and then in between here I can put causey where did we go they're all right so watch what happens now when i refresh Kazi is now a link if I click it it opens 10 Instagram profile all right and I can do the same thing I can add that target yep you tap target statement like that oops done if I go refresh now if I hit cause II you'll open up a new tab rather than go redirect during the website and I can remove this now where it said Cosby's profile okay so we can do header tags we can do paragraph tags we can do images you just learned how to actually embed a YouTube video what else can we do with HTML there's a lot you can create tables don't do that next or lists actually let's do list yeah we can do tape so we can create lots of other things like for example let's say we wanted to have a list of programming languages okay so first there's something called unordered list and then there's something called ordered list let's start with unordered lists all right so what we're gonna do is we're gonna say ul and then inside of this ul tag we want to do list item like this and I will say JavaScript and we will say Python Python JavaScript and then we'll say Java and then PHP or something right and if I hit refresh you'll see we have an unordered list at the bottom which is actually pretty difficult to see so what I'm gonna do is let's actually I'm gonna add in a bunch of gibberish at the bottom okay so I'm going to create a P tag and then I'm gonna say gibberish ignore and then I'm just going to keep pasting it good little bunch of line great Smitty or just empty key tags actually okay hold on okay cool so I wrote gibberish and I'm gonna put a HR to basically separate separate the garbage at the bottom okay you can use H HR for you know if you're trying to fire somebody from Facebook just kidding it is a charm for that's a mean one huh yeah what's next so again you can use HR for just this horizontal row they can add but we here is we have the unordered list and you can see them clearly like so all right now we're gonna do and we're gonna create an ordered list so I'm gonna copy this I'm gonna paste it here I'm gonna change this o to a you I mean you do an O so now it's an ordered list like that and if I hit and refresh you'll see now that it has order of the languages now the correct order would be this and you have each of the items in a list you have them in an ordered list now a lot of people who are Python developers on this channel the reason why learning HTML could be useful for and important for you is a lot of web scraping that you do you need to know how HTML works ok I'm going to zoom in so you guys can see everything a lot clearly a lot more clearly so when you're doing development and you're trying to a lot of web scraping well you need to know how the HTML pages are structured how they work in order for you to actually do web scraping otherwise is gonna be really hard and literally everything on the internet uses HTML literally yeah except for that data colon thing about how that was did hit a chord image but yeah that was probably some API it's unrelated let's just never talk about that one again so we have order lists we have unordered lists and this is important for you know obvious reasons and it does a lot of the logic automatically okay again we're not doing any styling right now okay another things that are important to learn about our well if you want it to have like you know if somebody could put in their phone number on your website or their email on your website or their name your website or maybe what item you know you wanted to take some a quiz maybe how do you actually ask for those inputs yeah okay so when you have a forum on a page where does the forum take you that's the action for example if you go on facebook.com and you hit login you hit that submit button your luck oh well it takes you to the Facebook homepage correct that's the action so action is for example Facebook on facebook.com alright or that's the action and when you have something like a index.html or you or on your local website if you actually write this this basically is the this basically means like a slash I'm gonna write this in comments like a slash it means means facebook.com for example and it about like a slash about would mean that does that make sense mm-hmm wait about means facebook.com slash about okay because your slash about that I mean I know it's a little convoluted how it's written but so here if you wrote slash that would be the equivalent of the action being facebook.com/ or yourwebsite.com okay then we have something called method and Method will what that means is you can either have a get method or a post method so an example is when you go on Facebook and you put in your login information you hit that submit button well what request is it sending what's the method that it's using there post yes so using it's hard to lose it so it's using it's really early here guys that's like it's a damn now we've been going since 6:00 a.m. so II was gonna say so ATM so that's what's happening right this is the the post method when you are trying to get some information to retrieve some kind of information for example when you go to your best friend's homepage wall and you type in their name and you go there and it shows you their latest photos their latest post what method is that yet that's the get method how it's fast at that time so when you're getting stuff you're getting you're using the get method when you update your post that's gonna be the update method and when you delete your post that's the obviously delete method but here we're just gonna do get method now but this is all for server-side for HTML this is not gonna the method is not going to be making that much difference right now now what we're going to do is we're going to put in an input and this input can have a type of text and we'll give it a name this is for server-side that's some more important so we're gonna say name we can actually just say name here like this just go here and refresh so you see that there's something here input okay now there are different ways to go about how you can actually use labels so I wanted to bring this up for some people who are maybe a little bit more advanced I generally like to use this way whenever I can but again don't read too much into what's happening here it might be too advanced for you for most people most beginners you don't have to worry about it but you can just focus on understanding the idea of it okay and Stack Overflow is one of the most common places you've got to get used to so it's better if you take your fear out of using it at an earlier stage so we're gonna go back and we're gonna you this type of thing right so I'm going to copy this and we can paste it here and we'll delete what we had earlier and I'll format this and let's get out of here okay so what you want to do here is I'll refresh okay now idea I don't want you to worry about the ID you can just remove that and hit refresh so whatever your input is the input is going to go here and this is the title so if you want people to write in their name well this is where you gotta write write it so that's gonna be the label okay you can call this whatever you want you call this name sure here again you can call it whatever you want but we can call it name this is gonna be useful for the server side not necessarily the HTML side okay so we have something we can do something with right but we can't do it any further because like you can see just broke my computer did something weird so I can't actually submit this anywhere yet I can't it's not a form yet so what we want to do is add in maybe a few more things for example you can have a name well what other things do people put in a huge edge email gender whatever numbers so let's go and put an email okay I'll go email like this and we'll put in this and for type we're actually going to change it to email now if I hit refresh you'll see there's an email here and we got that another thing we want to do is let's use div tags because these are pretty important and let's start putting things into divs because what you'll see is they like start organizing them in a nicer way so we'll put that one into div and then we'll do the same thing here why are you finished okay there so I have a name I have email and I have them formatted in a correct way and they're under the form tag so that's the important part the reason why we created a type called email is it's built into HTML and this adds in email validation so if you're typing in stuff and you're not typing in the correct email it eventually tell you and it'll give you an error if you type in the wrong emails it won't let you submit the form and then last thing we need is a submit button all right so we can have just any kind of button or we can let's go like this we can do input and do submit and we do label okay so we can just have a regular input with the type submit and that by default shows the text of it being submit right and you can change it's what it says in the button by changing the value over here so you can change the value to click me if you want if I go here it'll say click me and I can click it ok so there you go you can type in stuff here you can do this and then you can say click me and as you can see the email one complains that it's not a proper email so now if I do Kazi right now it didn't complain it actually allowed me to click it and in the URL you can see that it's passing in the argument name ffrr which you typed in and the email is causing a clip yep and it's taking me to my home page because of this action that I have here so it's taking me to some weird page let's refresh right if I don't do anything if I just do this at gmail.com and I hit refresh it'll just bring me back here so you can actually you can also just leave it blank as well so these are these are my forms what are other useful things for us to be able to use well there are a few things that we can also add to form so we can add things that allow us to select right and we can also add things that allow us to create tables okay so let's go ahead and create a table and table needs two things it needs a head so we're gonna leave that here and then it needs a table body so inside the table head we're gonna create a row and inside of that row we're gonna create a cell and this we're gonna call it we can call it or should we call it should be th rate title headers not too deep oh yeah you're right so th what you gonna call it let's just put age or name email age name email age yep and boom look at this it shows up right over here cool cool now let's add in the body so we'll have a row and then I'll do table cell taste with data table data so we're defining a table row that's TR and then within that row we're gonna have table data over and over each of those is like one of the elements yeah kind of like the columns but you you define it by Road not by column so you say in a row this is all the data one by one we'll have Aaron we'll have Aaron at and calm and then we'll have please don't leave money well have age is 24 so there you go it doesn't look like a useful table generally you're not writing many tables directly in HTML if you are creating tables you're gonna be using some kind of themes like CSS stylesheets and yeah you're not openly writing tables right in here like this but this is how you would do it and just to give you an idea how you can add more cells is you can just keep doing this table bro you just add more and more rows for each different row in the table right and then it'll just keep adding it over and over again so I can change this to 20 cause II well that's not true five Kazi at aaron calm there we go you go in so I got my age I got my name I got my email and this is how you create a table all right this is the important thing that you have to understand behind how you create tables though you're not spending a lot of time creating tables okay so create it just if you have to use it for basic use cases just because you're doing some dummy testing but don't actually create it in like full-on projects because it doesn't look that beautiful now I want to show you some important things that people don't show is the googling skills required to be able to do stuff this is gonna be very common so how do you create a drop-down in HTML right so if I do drop-down in HTML well how do I do that luckily w3 school is gonna come up a lot in your journey there's something you got to get used to and inside of here it talks about well if you write this code will create a drop-down try it yourself so I'm gonna copy this and I'm just going to go ahead and paste it inside of that form that we actually created earlier and let's go here and hit refresh and now you'll see that and I'll make sure I'll put everything in its own div so I'll wrap it up in a div like this whoa so I'll make sure I wrap it up in a div I'll hit refresh and now I can see my name email and also my form requires me to put whether I'm putting Volvo or Saab or Mercedes or Audie alright and then I can hit click me and then it'll like pass in all of those values and I can see some of them right for example name fef email cause yet whatever cool so you can actually put that inside of your form so this is how you will add in drop down into your code so w3 and these things are gonna be common learn how to use them this is how you're gonna actually write a lot of your code and figure out a lot of problems by yourself okay so this is pretty good what else do we need I was looking at that okay another thing that we can add in our form that I want to show you guys that could be important is maybe say you're making a website where somebody could have a contact view form so you want them to put their name you want them to put in you want them to put their choice of their car but you also want them to send you a message okay right like what their message should be so we want we don't want it to just be like a text field because that's kind of annoying for somebody to write a full message in a text like I feel like this so what we're gonna do instead is we're gonna create if new thing and first of all I'm gonna I'm gonna create a div I'm gonna put it inside of here and it's called text area so you want to put it in the text area okay so I detects area I hit tab and it auto-completed it with a lot of these defaults well we'll say the name is message the ID is message an ID right now for this tutorial doesn't matter at all sit refresh and let's go here now you can see messages there box like this so I can change it by doing instead of having it's at 30 I can say 10 and hit refresh I'll change the size of it so the default is good and the cool thing about messages they can drag it up and down they can write a lot in it yeah so that's what's great about it okay guys that's it for now we have to go to the gym this has been your instructor Rafa cozy and Erin Burnett we love your face and we're gonna pick back up from here in part two okay guys welcome back we are here for part two as your instructors for this HTML crash course damn I like that we weren't anything hurt there all right let's go so a few things what we want to do is um we want to make sure is first of all just add an HTML tag here cuz we forgot to add at last video so have yeah it's it's really not it's still working okay and then make sure you grab everything and you indent it inside all right so everything should be inside of the HTML tag us a proper proper yeah I don't know why I put air quotation say this is a proper way to do it so do that now what I want to show you guys is how do you link back and forth between like files so say you had another file locally well how would you link between that so let's create a new file okay yep so I'm gonna go here I'm gonna go a new file like that and we'll call it you - oh whoops let's hit save on it command s and I'm saving it in my HTML crash course page and I'm gonna call it YouTube dot HTML like that alright so it should have this HTML symbol next to it maybe yours might not but should have that extension at least now if you click here and you go here you should have YouTube HTML like that alright now depending on what text editor you were on if you type in HTML and hit auto complete it'll all auto complete it to a bunch of things but on vs code it won't so on vs code you'll have to type doc hit tab and it'll autocomplete it to this so a few of these things is just good practice to have how vs code has it so you can kind of leave that without worrying about what it does too much okay but if we look at you know for example this meta tag here this makes it easier for mobile devices this adds utf-8 which again if you're learning if you're just learning about HTML you probably don't have to worry that much about what this is this part over here document well this is my you to site okay now let's open this up in Chrome desktop HTML crash course YouTube HTML and something you had you can't see probably so I'll close out of other tabs is it says my YouTube site here at the top now what I want to do is just add some things here like my YouTube site and hit refresh now this is here okay what I want to do is I want this file index.html file to link to the YouTube got HTML file and I also want the YouTube at HTML file to link back to D index dot HTML file yeah exactly so we'll say I'm gonna create a a link so here I want you to pause and think about how you would do it solve this problem before actually continuing the video now if you have solved it will give you four seconds four three two one alright let's jump right back into it so for H ref I will just simply say index dot HTML then we also want to add text so I'll say go or I'll just say homepage home home is fine and if i refresh here now home comes up and if I click here it'll take me to the home page alright and if I go to index dot HTML and if I add it somewhere like here and I add that in right basically add a header tag inside of the body and what you want to add in there are things like you know your webpage links you know right at the top or maybe you know what else goes in the header I mean theoretically in HTML you can put anything anywhere and it'll still do something but usually good practice is just stuff that gotta be at the top so like maybe yeah like a navbar your logo some people put it in the actual head tag up there like up there mm-hmm I mean way of there as long as you understand the general idea of what's going on then yeah header just put kind of like stuff that would be at the top of the page in the header tag so it's just kind of when somebody comes to your HTML code they don't the heck is going on like if somebody's trying to web scrape you our web site just make it easier them you know yep so let's go over here and we'll add in a link to the you know YouTube website so I'm going to do link we will do YouTube dot HTML and I'll say my YouTube site boom so now I can navigate back and forth between the two sites that I've created you can't this type of path this path file path is called a relative path because they are close to each other so that's relative you can also do absolute paths which is the absolute path from the start of your computer to this file but from the root of your computer to this file but we just want to care about the relative path generally and using the same type of pads you can add in images or whatnot all right so we got a link we can navigate back and forth between these now what else do you want to do well okay a good way to go about increasing your skills and developing projects is like look at something that you want to be able to build and then kind of model that try to build that so that's kind of what we're gonna do here let's go ahead to this page right that we had opened earlier and if I look at this I want to kind of mimic this page basically I want to build my own personal type of personal style YouTube so what I want to do is I will first of all take the embed code of this so I will say embed I will copy and I'm gonna paste that here alright now when i refresh this should be there perfect okay also in the header whoops we're gonna go ahead and put the home page so we stay consistent this refresh great now what I'm gonna do is I'm gonna put the title of this so again try this on your own before you follow anything that we're doing you should always try to pause do it on your own otherwise you will not learn these things to put up with the title at the bottom right just like how YouTube has it yeah yeah a smart ok perfect let's do that so well another thing we want to do is we want to add these hashtags that I have in the video python tutorial clever program or Python programming so we'll add that in and what we'll do to add that in is we will use something called the small tag and I'll do clever programmer Python programming and you know hash tag tutorial and just kind of leave it like that yeah perfect looking better huh so now we have that we can do probably a similar thing with views or publish so we can say like when I was published and I think we can also do that in small tags nice wait is that below or above the views on the actual YouTube it's below the views so we'll just pop the views above it yeah sure you can pop the views above it if we want so let's go here we can put that in small tags as well right or no or something for her head or five whatever we want this is what YouTube you should look like in its first iteration so like we're pretty like much pioneers at this point right this is looking great so there we have a pretty much simple version of a YouTube clone I wonder what else we should add yeah we can add the logo copy image address and we can do that right next to the right underneath the views right we can do image and I can pop that in oh no this is HTTP this is a fairly normal and it ends yep and what I want to do is I want to create a div that has both of these guys in there the clever programmer title and D premiered like I wanted in one place or sorry the clever programmer logo and then that should be good and I'm gonna create ap tag put this image in there and then after this image let's just put the words clever programmer keep it really basic let's go back and we have the clever program or logo a long way premiered and clever programmer okay so something limited with HTML yeah like I can adjust the width and the size of this I can do with 300 and then I can do oh let's make it fifty by fifty even better right now now it looks more like the actual logo and why don't we build the the channel channel name because I think it's bold on the YouTube YouTube page right channel name you're clever programmer oh okay so yeah I'm strong tags we can begin bold at two so let's use strong tag they're so strong tag you can use that to bold things you can use the emphasis tag to I don't think there's a bold tags unless there is no bold is actually not used anymore they try not to use it i I think it still works but I think they don't use it anymore let's see oh maybe they're just completely bold tag html5 write deprecated that's what I was trying to say be tag not bold tag that's right BJ yeah it's deprecated since HTML 4 yep so remove but another one you can use is M and this will italicize what you are trying to do so let's delete this as well all right now if i refresh we can link back and forth we have actual clone of the Youtube version which is pretty good and then obviously like if you want to kind of add this in a footer you can create a footer and in the footer so if footer tags is generally the stuff at the bottom the copyright stuff you'll see or so you can say I can say clever programmer make sure it's a P tag right and 2019 or something like that and how did they do copy 5% copies illegal there's like little codes here to get things I think you put like TM you can get TM to or like like all those different little symbols like there's something there just google it like there's no point memorizing them all just google it and then you'll find the code trademark copyright I guess you can use a reg registered register so you can also do like this trade okay and now shows up there like that oh yeah apparently now we are so there you have a basic you have a basic looking website it has most of the functionality you want it to have and we have covered a lot of things up until this point we can show you very basic CSS and I'll show it kind of right in here so for example I can go into this P tag and remember we talked about attributes so you can have width and height of an image for example we can also do style of something and I can say text align and I can say Center and if I go here and refresh now you can see how it's hiding behind our video so I have to move it here and now you can actually see it okay it's centered it so i'll uncensor it just so you can see it's better so that's what centering does right now if I remove that and save it refresh let's try something else let's try star font so just color and you can pick whatever color you want what which color do you want Aran's go red for youtube or its copyright right alright so if i refresh you can see that it's colored guys this is not HTML anymore now we're starting to get into styling this is the CSS part of things so we are not going to get into the CSS any further we just wanted to share the very basics with you but that's actually how any website gets designed and it goes beyond just like the most basic HTML that you see right here anything else we need to cover Aaron or we did a pretty good job for somebody who's trying to learn for the first time yeah I mean there's there's way more you can find but whatever you need to do and achieve for the website you just google it because you're never gonna memorize all of it but I mean we've pretty much gone over all the basic ideas the main the most used tags like use your HTML tags use the header tag the head tag body tag images and high frames all the different h1 through h6 all that stuff div tags these are very common so definitely memorize those but I mean there's there's like I don't know how many there are but it's probably hundreds of tags out there there was a little design and write and whatever yeah I think I think people get the idea so that's it for this video guys we really hope that you got something out of it I mean Aaron and I put a lot of work and effort into it but what's most important for you is to get something out of it you need to actually build something using this and you to build it right away because the the thing that people get stuck in the tutorial purgatory that often happens because people aren't taking the additional time to build things that's their own they're only following a tutorial and then they go okay I follow this tutorial but I still don't know how to use this and fridge we've all been there so you get stuck and to get unstuck you want to build your own projects you want to do your own things that's how you'll get better now in the description we'll try to link the source code for you so you can have access to it whenever you want and we really hope you enjoyed it so if you have enjoyed this so far and you're maybe interested in something like how can you actually freelance from coding how can you earn an income from coding this is something that's advanced will take you time and skill an effort but we've put together a pretty awesome training so our plus training it's earn me and our other team member Franky and we have taken kind of the best tools and skills you actually need to become a successful freelance developer and put it into this training the catch of this training is that around after the one hour mark we pitch you a paid product so we if you know if you enjoyed the trainee value out of it we pitch you a paid product of course that's how our team survives and we go to the next level but the goal is that in that one hour we really want to help you potentially change your the trajectory of your career and give you just massive amounts of value in that time ok so you really have nothing to lose it's a recorded training just in the description below click up on some link and then jump into the training program and we would love to have your face in there that's it for me guys this is Kazi this is Erin we love your face and we'll see you in the next videowhat's up guys this is Kazi here from clever programmer calm this is we are gonna be your instructors for this html5 crash course for beginners so if you're a complete beginner you are in the right place we're not gonna go into the theory we're gonna can just jump right into it this HTML crash course we're gonna go through all of the basics and we're gonna go through fast you know how we do it here we get dirty we get down into it and we just start coding things up and you're not gonna listen to a bunch of boring fluff here that's not what this channel is about so we're gonna get into it really fast now we're gonna be covering how unordered lists work order list works what the hell or header tags how do you actually use tags and how do you create a basic looking web page that's what you're gonna get out of it it's gonna be awesome and before we get into it I do want to say that my team and I have put together a pretty amazing one-hour training for you that's absolutely free if you want to become a web developer or a freelance developer now this training is called top three secrets to become a Python freelancer but it will work perfectly well for you even if you're not a Python freelancer and you want to become a freelancer as a web developer okay it has the main principles that you need and it's unbelievable content and we have made it free for a limited amount of time so go ahead and click that link make sure you sign up for a seat in the webinar and then show off with your notepad or something cuz gonna be really valuable information what that's that let's jump right into this tutorial first things first there are multiple text editors that you can use the one that we recommend is free and it's also one of the best so visual studio code go ahead and download this whichever version you're on I'm on a Mac so I'm gonna just download the Mac version and then as soon as you're done downloading it just open it up install it and then open up a new file in it okay once you open up a new file your screen should look like this we're gonna create a new folder on our desktop I'm going to call it HTML HTML crash course and then inside of this folder we're gonna open this folder from our visual studio code okay so I'll go click here open and we're gonna just select this folder and go ahead and open it let's create a new file okay so let's go back to our visual studio code and we are going to create a new file and hit this and we'll call it index.html now remember this is important if your cursor doesn't look like mine don't worry about that yours will just look like this how it's supposed to I'm using something called vim for more advanced users but again this is a come for a complete beginner so we want you to be able to follow along now I'm just gonna hit save and I'm gonna show you that this file that I just made is actually this file that I just made is gonna be right over here on your computer now okay it should look empty alright now if I type in things here and save them and then I open this up and if I open this file you should see hello things here okay now there are different browsers that you can use you can use Internet Explorer you could use a Mozilla Firefox you could and you could use what else Chrome but you know probably don't use Internet Explorer it's not gonna be good for you so if you want to challenge a real challenge right let's try to stick with using Chrome because this is gonna be the best for you and the easiest way to go now because that's my default browser that's why this index.html file turns into this the extension is very important if you're on Windows or in some other computer and it turns it into dot txt at the end or dot make sure that you change it to dot HTML okay and if you double click it or you open it from your chrome and it looks like this then you're good okay so I hope that you're following along so far now what I'm gonna do is I'm just gonna do that so I have more space on the left-hand side to code I'll also open up this file on the right-hand side so that you can see it so I'll put this here okay let's go right here all right so now if I type in things like you know headings in if you ever go to a website you see things in big giant letters what they're using is something called header tags okay if I go to for example give me a website that's Wikipedia that's a good one okay so let's go to Wikipedia BPD oh all right Wikipedia and let's type in from programming whoops I miss what I put in HTML there you go programming okay so if we look at the structure of how this page is set up mostly it's through HTML there's very little CSS actually used here and in this video we're not gonna be using CSS so things are gonna look ugly things are gonna kind of look like Wikipedia Craigslist all right yeah or Craigslist so let's go here and if I hit inspect right what I'll find out here is that this says h1 so this is actually a heading tag okay so going back to my code if I actually do h1 hit tab and do programming language refresh here these are the heading tags this is why there's this big - cool so let's go ahead and remove this now we need to give our page a structure the first thing you always want to do in your HTML page the reason why I'm just jumping in right away is so there's not so much theory you got to get through I'll explain we'll explain the theory to you as we go through each step not necessarily just in the start so one thing you want to do is you want to do doctype HTML for html5 this is something you always have to do to make sure that your document is interpreted correctly from the browser okay so I'm using Chrome and this will make sure that it's doing it correctly then other tags that we actually need are things like a head tag okay and a body tag all the code you'd you generally write goes in your body tag like this okay yeah all right and then um if you have things like title which is over here where if you see it says index.html well I can change that to cause ease website like this and hit body supposed to be outside of it let me leave your header oh hello eyes watch three yeah I think I'm thinking of theirs head body and then what's the other one that covers everything Oh HTML oh no body contains everything body contains everything body is outside of head and it also contains on your right head or body footer okay okay let me let me redo that okay good cat just get a good catch another session okay so the the first thing you need in your code so we had HTML tags first of all right yeah so now I'm gonna so let's go here and let's remove everything from our page I'm gonna save and I'm gonna go here and refresh okay so I'm doing command s to save and then command or to refresh on Windows is gonna be ctrl s and then ctrl our first thing we need is we're gonna create a head tag and then inside of head we have things like title so if I go coding website or if I do my coding up side save it refresh but you see that title at the top change yeah on the tab on the tabs that name of the web page kind of pretty much right well the title of the page I guess it as its called an HTML yep so we have changed the title now another thing we need are is body tag and inside of body tag is where we write most of the code so now we can put that programming language thing we had earlier in here if I hit refresh you C programming language shows up and all the tags are similar to this right so for example if I change this h4 h5 h6 header tags go all the way to header six and header one is the one with the the biggest one and then header six is these tiniest point right so let's go ahead and do that here mmm magic yeah okay so we have it's almost like this is the most popular programming language all the way to the least popular the tiniest so this is how header tags work now there's something called comments in HTML comments or H first of all hTML is not a programming language it's a markup language but every programming language or most languages general have this ability to write comments comments are not for the computer to interpret they're for the human to read so we can add comments by doing this and I can say header tags okay if I go in here and refresh it doesn't change anything on the page but it definitely puts them here all right now I can show you paragraph tags okay they're also known as P tags and what they allow you to do is just write stuff so let's say I wanted to write things right and I wanted to break them apart well how would I do it let's that right Aaron then I write Kazi and if I hit save and I go here and look it's in the same line yeah it's just like chunking them together exactly and that's not what we want we want them to be separate into new lines right yep yeah so Wikipedia if we go here and if I fullscreen this page you can see that there's a paragraph here and then there's a new paragraph here so what is actually happening can I hit inspect and dig deep into it well what you see here is there's something there using called the P so if I hit in this button over here to inspect element if I hover over this this says you see that little P and purple I can't move my mouse over to that I hope you see where it says color font margin you see it yeah yeah this oh you little box bit up right the box that popped up right underneath where it says article and talk well that P means that this is a P tag if I hover here you see the P show up again so that's the P tag okay now let's go back to our code and put P tags around this okay so let's go P tag like this and then do this copy and I'll take Ozzy and then I'll delete this and if I go here and refresh you can see that now it separated them out into actually two separate lines two separate paragraphs yeah yeah two separate terms and if we have like Aaron is an epic developer oh right fire emoji you don't need to do the fire emoji but I'm just adding that in and then we can say cause II is a better developer sometimes okay yeah and sometimes the end of both of these okay sometimes right okay and you can see that we have different paragraphs now you can also do lorem and hit autocomplete and it it basically creates this lorem ipsum which just means dummy text okay it's a fancy weird way of staying just dummy text most text editors probably have this capability so if you do lorem and you hit tab it will autocomplete it but what we want to do is we want to make sure that we put P tags around it whoops P tags and then I'll do lorem hit tab now you hit tab to autocomplete so when you type stuff it allows you to autocomplete it right so if I do P I can actually just hit tab here and it'll autocomplete it I can do h1 and I can hit tab and then autocomplete it which was BS code and most editors allow you to do that but yet the Lord it's up to you oh yeah it's easier to do the lungs have so if I do refresh it's a translate because it detected this to be like Latin his lines is like yeah so there we have our lorem ipsum now a what are some other things that are really useful that we need to know in HTML well some other common things you need to be able to do is one you want to be able to let's say you're making a video hosting blog post right you want to be able to host videos well you can do that with HTML it's pretty cool so for example let's go to youtube.com/scishow let's take a video so let's take this giant crash course video we have okay so let's take this video alright so let's now go to share so I'll click share right over here and inside a share click embed on a YouTube video copy this code alright you can also hit the button copy here and now just get out of here you don't need to be here anymore okay and you can paste this code alright now if i refresh you'll see that that video is actually embedded into your website now in this tutorial we're not gonna be teaching you how to host this website online yet but we want to show you how to make a useful HTML website that people could actually use and that you would even want to use so now this is using something called the iframe tag here right and some of the things that you might be seeing here is like oh width and height height what's going on here well we're gonna talk about that in a second we're building up to it alright so we've covered P tags we've covered that when you start a tag you got to end the tag so h1 when you start it you got to end it you started here is to you got to end it P tag you start it you got to end it the /p part is a part that allows you to end it yeah it's like a ND tag exactly start tagging ending tag yep for most tags now when you see code to write what you should try to do oftentimes it's play with it mess it up see what happens so for example if I go again to YouTube that video right you can actually change code on the fly right and now what I can do is let's say I do hit inspect element and I highlight it and I hit inspect element right right over here and I can click into it and says python full course for beginners and I can say JavaScript crash course by Aaron Wright and all of a sudden it's changed I can go here and I can hit inspect and over here it says 18,000 views I can say - - built put ten billion right - two million three hundred eighty-seven thousand views on this video and I can also go click here and I can change this to 0.5 to be like alright so a great job when the jobs from crash course right teleports the future you guys yeah so you killed it make sure you don't forget that so there you have it right you can go and play with HTML code already you can go and play with it on the websites you know do funny jokes with your friends I mean there's a lot that you can do with HTML it's gonna zoom out here a little bit so we have more space and and then zoom in here zoom out here okay great now let's go back okay so this shows you that you can you can play with HTML code now it won't stay there if i refresh this page is gonna go away it's just temporary it's only on your computer but it's still really important to be able to practice and play like that because when you practice that's how you improve you want to be able to tinker these things and change them and then you keep improving your skillset that way all right let's continue so if you see this with try changing it and do 300 and come here and refresh and see what happens oh it changed right let's go here and change the height and go here and refresh oh now the height is bigger and this is how you're gonna get a lot better by constantly practicing it right this one video or one crash course you see from somebody is not gonna change everything but if you keep practicing it that's how you'll improve okay let's add more things to this let's add maybe what you would do we had images oh yeah okay we skipped images illustrate the videos with right we we went in more advanced so let's add images right so let's just so easy since it's even simpler the videos I like a chess board so chess board I'll type that in let's go to images nice and we'll find some image here was it's just which which one should we pick that one this one yeah sure okay so I'll right click here and I'll say copy image address so if I open a new tab and I hit it should ya get this I just hosted at that URL yep so now I'll go here I'll type in IMG and I he'll hit tab and it'll auto complete it okay so in here now there's this thing called source source is asking what's the source is it local or is it online well we're not gonna host this locally we're gonna pull it from online because most of the times I'm pulling stuff from online right and most people aren't makes your life easier and I'm just gonna hit paste on that link that I had found so this link might actually not work because kind of fun yeah it doesn't actually look like that you doesn't look like a URL does it how long does I think you copied the wrong thing man I did you know it's showing huh so I'm fine Jesus Christ let's say there's three dots at the end so it keeps going is this three okay so well we can get is we can say copy link address maybe but then that doesn't get us what we want so I'm fine so if you can do this there you go you can get an image like this okay apparently it's a convoluted URL what would be the better way to get it copy image address that's what we did right so I guess this is a better link right by clicking into it so what I can do is I can do image and then paste it and now you have a more normal URL whew that URL freaks you yeah it was like data : or something so there you go you have the image okay and now to play around with this image well you can actually have there are these attributes you can have in images okay so you can pass a inside of HTML tag you can also pass it attributes so here we'll pass it for alt well alt is mostly useful for one the computers and the crawlers for example if the computer comes here and it doesn't know what damage is having an alternative description will tell the computer what it actually is and another thing is useful for I don't know if you know this it's useful for if there's a somebody who's blind and they're on your website yeah yeah you know a lot of blind people actually use websites and use computers I have I have I had a friend yeah I had a friend who was blind and he had a laptop and he would open it up and he would go and go through his search directory he would search up stuff he would know when the internet is down really like dizzy no seriously he had a contact book everything wait does it read it out to you like verbally or something no they they have Braille oh but we don't have Braille here while you do blind people know how to read Braille their computer is like a Braille tool as well yeah I seen that before yeah so there you go that's why you need an alternative description now other times you can add is definitely width and height so let's say with we make the width 400 and if I go here well you can see the board size just changed okay and then we can make the height of it you know 300 it might actually be around that so there it made the height a little bit yeah that kind of skewed work the image a little bit yep so this is how you make images right so I'll put image tag because images are useful now some other things you can do that are useful is what if you need to make something in link so if it says Erin and if it says Kazi well what if it linked to Erin's Instagram profile or a cause ease Instagram profile so let's go here and let's go instagram.com slash clever cause E and if we actually go here this is my Instagram correct so now I'm gonna grab this URL copy it X out of this and what I'll do is I'll put cause the inside of something called an 8a tag okay so I'll try it here and I'll do a and hit tab little autocomplete it it's asking for a link so I'll link it to Instagram comm slash clever cos e then I'll put the text here that says if okay so first of all watch what happens right if I hit save and I go to the website okay I'm just gonna delete the lorem ipsum because it's getting in the way it keeps asking about the translation there we go so I'm gonna go here now can you find on the screen where it's showing the link no no yeah well the reason why it's not showing is because you have to add text here yeah I saw that I could display this blaze exactly I display it so now we add the text I'll say cause ease profile safe and hit refresh well you have cause ease profile now if I click this it'll actually to it yeah it's the URL that we put in the HOF which is just a reference it's like where does it where as this text going to refer to yep now what if we don't want the people all who are on our website to leave from our website instead we want them to set open up a new tab okay well we do something called we pass in an attribute called target and we say go to blank all right which is it's kind of a weird way of doing this it should be something like target new tab instead of underscore blank but you'll see what it does if I hit it now I open up a new tab rather than rather than it going to a completely new website okay okay now what if I want to make this causey a link which is inside of a P tag well you can do that you can nest tags however deeply you want so I can actually go a tag here I can say href equals and I can do the same Instagram link right I can go like this and then in between here I can put causey where did we go they're all right so watch what happens now when i refresh Kazi is now a link if I click it it opens 10 Instagram profile all right and I can do the same thing I can add that target yep you tap target statement like that oops done if I go refresh now if I hit cause II you'll open up a new tab rather than go redirect during the website and I can remove this now where it said Cosby's profile okay so we can do header tags we can do paragraph tags we can do images you just learned how to actually embed a YouTube video what else can we do with HTML there's a lot you can create tables don't do that next or lists actually let's do list yeah we can do tape so we can create lots of other things like for example let's say we wanted to have a list of programming languages okay so first there's something called unordered list and then there's something called ordered list let's start with unordered lists all right so what we're gonna do is we're gonna say ul and then inside of this ul tag we want to do list item like this and I will say JavaScript and we will say Python Python JavaScript and then we'll say Java and then PHP or something right and if I hit refresh you'll see we have an unordered list at the bottom which is actually pretty difficult to see so what I'm gonna do is let's actually I'm gonna add in a bunch of gibberish at the bottom okay so I'm going to create a P tag and then I'm gonna say gibberish ignore and then I'm just going to keep pasting it good little bunch of line great Smitty or just empty key tags actually okay hold on okay cool so I wrote gibberish and I'm gonna put a HR to basically separate separate the garbage at the bottom okay you can use H HR for you know if you're trying to fire somebody from Facebook just kidding it is a charm for that's a mean one huh yeah what's next so again you can use HR for just this horizontal row they can add but we here is we have the unordered list and you can see them clearly like so all right now we're gonna do and we're gonna create an ordered list so I'm gonna copy this I'm gonna paste it here I'm gonna change this o to a you I mean you do an O so now it's an ordered list like that and if I hit and refresh you'll see now that it has order of the languages now the correct order would be this and you have each of the items in a list you have them in an ordered list now a lot of people who are Python developers on this channel the reason why learning HTML could be useful for and important for you is a lot of web scraping that you do you need to know how HTML works ok I'm going to zoom in so you guys can see everything a lot clearly a lot more clearly so when you're doing development and you're trying to a lot of web scraping well you need to know how the HTML pages are structured how they work in order for you to actually do web scraping otherwise is gonna be really hard and literally everything on the internet uses HTML literally yeah except for that data colon thing about how that was did hit a chord image but yeah that was probably some API it's unrelated let's just never talk about that one again so we have order lists we have unordered lists and this is important for you know obvious reasons and it does a lot of the logic automatically okay again we're not doing any styling right now okay another things that are important to learn about our well if you want it to have like you know if somebody could put in their phone number on your website or their email on your website or their name your website or maybe what item you know you wanted to take some a quiz maybe how do you actually ask for those inputs yeah okay so when you have a forum on a page where does the forum take you that's the action for example if you go on facebook.com and you hit login you hit that submit button your luck oh well it takes you to the Facebook homepage correct that's the action so action is for example Facebook on facebook.com alright or that's the action and when you have something like a index.html or you or on your local website if you actually write this this basically is the this basically means like a slash I'm gonna write this in comments like a slash it means means facebook.com for example and it about like a slash about would mean that does that make sense mm-hmm wait about means facebook.com slash about okay because your slash about that I mean I know it's a little convoluted how it's written but so here if you wrote slash that would be the equivalent of the action being facebook.com/ or yourwebsite.com okay then we have something called method and Method will what that means is you can either have a get method or a post method so an example is when you go on Facebook and you put in your login information you hit that submit button well what request is it sending what's the method that it's using there post yes so using it's hard to lose it so it's using it's really early here guys that's like it's a damn now we've been going since 6:00 a.m. so II was gonna say so ATM so that's what's happening right this is the the post method when you are trying to get some information to retrieve some kind of information for example when you go to your best friend's homepage wall and you type in their name and you go there and it shows you their latest photos their latest post what method is that yet that's the get method how it's fast at that time so when you're getting stuff you're getting you're using the get method when you update your post that's gonna be the update method and when you delete your post that's the obviously delete method but here we're just gonna do get method now but this is all for server-side for HTML this is not gonna the method is not going to be making that much difference right now now what we're going to do is we're going to put in an input and this input can have a type of text and we'll give it a name this is for server-side that's some more important so we're gonna say name we can actually just say name here like this just go here and refresh so you see that there's something here input okay now there are different ways to go about how you can actually use labels so I wanted to bring this up for some people who are maybe a little bit more advanced I generally like to use this way whenever I can but again don't read too much into what's happening here it might be too advanced for you for most people most beginners you don't have to worry about it but you can just focus on understanding the idea of it okay and Stack Overflow is one of the most common places you've got to get used to so it's better if you take your fear out of using it at an earlier stage so we're gonna go back and we're gonna you this type of thing right so I'm going to copy this and we can paste it here and we'll delete what we had earlier and I'll format this and let's get out of here okay so what you want to do here is I'll refresh okay now idea I don't want you to worry about the ID you can just remove that and hit refresh so whatever your input is the input is going to go here and this is the title so if you want people to write in their name well this is where you gotta write write it so that's gonna be the label okay you can call this whatever you want you call this name sure here again you can call it whatever you want but we can call it name this is gonna be useful for the server side not necessarily the HTML side okay so we have something we can do something with right but we can't do it any further because like you can see just broke my computer did something weird so I can't actually submit this anywhere yet I can't it's not a form yet so what we want to do is add in maybe a few more things for example you can have a name well what other things do people put in a huge edge email gender whatever numbers so let's go and put an email okay I'll go email like this and we'll put in this and for type we're actually going to change it to email now if I hit refresh you'll see there's an email here and we got that another thing we want to do is let's use div tags because these are pretty important and let's start putting things into divs because what you'll see is they like start organizing them in a nicer way so we'll put that one into div and then we'll do the same thing here why are you finished okay there so I have a name I have email and I have them formatted in a correct way and they're under the form tag so that's the important part the reason why we created a type called email is it's built into HTML and this adds in email validation so if you're typing in stuff and you're not typing in the correct email it eventually tell you and it'll give you an error if you type in the wrong emails it won't let you submit the form and then last thing we need is a submit button all right so we can have just any kind of button or we can let's go like this we can do input and do submit and we do label okay so we can just have a regular input with the type submit and that by default shows the text of it being submit right and you can change it's what it says in the button by changing the value over here so you can change the value to click me if you want if I go here it'll say click me and I can click it ok so there you go you can type in stuff here you can do this and then you can say click me and as you can see the email one complains that it's not a proper email so now if I do Kazi right now it didn't complain it actually allowed me to click it and in the URL you can see that it's passing in the argument name ffrr which you typed in and the email is causing a clip yep and it's taking me to my home page because of this action that I have here so it's taking me to some weird page let's refresh right if I don't do anything if I just do this at gmail.com and I hit refresh it'll just bring me back here so you can actually you can also just leave it blank as well so these are these are my forms what are other useful things for us to be able to use well there are a few things that we can also add to form so we can add things that allow us to select right and we can also add things that allow us to create tables okay so let's go ahead and create a table and table needs two things it needs a head so we're gonna leave that here and then it needs a table body so inside the table head we're gonna create a row and inside of that row we're gonna create a cell and this we're gonna call it we can call it or should we call it should be th rate title headers not too deep oh yeah you're right so th what you gonna call it let's just put age or name email age name email age yep and boom look at this it shows up right over here cool cool now let's add in the body so we'll have a row and then I'll do table cell taste with data table data so we're defining a table row that's TR and then within that row we're gonna have table data over and over each of those is like one of the elements yeah kind of like the columns but you you define it by Road not by column so you say in a row this is all the data one by one we'll have Aaron we'll have Aaron at and calm and then we'll have please don't leave money well have age is 24 so there you go it doesn't look like a useful table generally you're not writing many tables directly in HTML if you are creating tables you're gonna be using some kind of themes like CSS stylesheets and yeah you're not openly writing tables right in here like this but this is how you would do it and just to give you an idea how you can add more cells is you can just keep doing this table bro you just add more and more rows for each different row in the table right and then it'll just keep adding it over and over again so I can change this to 20 cause II well that's not true five Kazi at aaron calm there we go you go in so I got my age I got my name I got my email and this is how you create a table all right this is the important thing that you have to understand behind how you create tables though you're not spending a lot of time creating tables okay so create it just if you have to use it for basic use cases just because you're doing some dummy testing but don't actually create it in like full-on projects because it doesn't look that beautiful now I want to show you some important things that people don't show is the googling skills required to be able to do stuff this is gonna be very common so how do you create a drop-down in HTML right so if I do drop-down in HTML well how do I do that luckily w3 school is gonna come up a lot in your journey there's something you got to get used to and inside of here it talks about well if you write this code will create a drop-down try it yourself so I'm gonna copy this and I'm just going to go ahead and paste it inside of that form that we actually created earlier and let's go here and hit refresh and now you'll see that and I'll make sure I'll put everything in its own div so I'll wrap it up in a div like this whoa so I'll make sure I wrap it up in a div I'll hit refresh and now I can see my name email and also my form requires me to put whether I'm putting Volvo or Saab or Mercedes or Audie alright and then I can hit click me and then it'll like pass in all of those values and I can see some of them right for example name fef email cause yet whatever cool so you can actually put that inside of your form so this is how you will add in drop down into your code so w3 and these things are gonna be common learn how to use them this is how you're gonna actually write a lot of your code and figure out a lot of problems by yourself okay so this is pretty good what else do we need I was looking at that okay another thing that we can add in our form that I want to show you guys that could be important is maybe say you're making a website where somebody could have a contact view form so you want them to put their name you want them to put in you want them to put their choice of their car but you also want them to send you a message okay right like what their message should be so we want we don't want it to just be like a text field because that's kind of annoying for somebody to write a full message in a text like I feel like this so what we're gonna do instead is we're gonna create if new thing and first of all I'm gonna I'm gonna create a div I'm gonna put it inside of here and it's called text area so you want to put it in the text area okay so I detects area I hit tab and it auto-completed it with a lot of these defaults well we'll say the name is message the ID is message an ID right now for this tutorial doesn't matter at all sit refresh and let's go here now you can see messages there box like this so I can change it by doing instead of having it's at 30 I can say 10 and hit refresh I'll change the size of it so the default is good and the cool thing about messages they can drag it up and down they can write a lot in it yeah so that's what's great about it okay guys that's it for now we have to go to the gym this has been your instructor Rafa cozy and Erin Burnett we love your face and we're gonna pick back up from here in part two okay guys welcome back we are here for part two as your instructors for this HTML crash course damn I like that we weren't anything hurt there all right let's go so a few things what we want to do is um we want to make sure is first of all just add an HTML tag here cuz we forgot to add at last video so have yeah it's it's really not it's still working okay and then make sure you grab everything and you indent it inside all right so everything should be inside of the HTML tag us a proper proper yeah I don't know why I put air quotation say this is a proper way to do it so do that now what I want to show you guys is how do you link back and forth between like files so say you had another file locally well how would you link between that so let's create a new file okay yep so I'm gonna go here I'm gonna go a new file like that and we'll call it you - oh whoops let's hit save on it command s and I'm saving it in my HTML crash course page and I'm gonna call it YouTube dot HTML like that alright so it should have this HTML symbol next to it maybe yours might not but should have that extension at least now if you click here and you go here you should have YouTube HTML like that alright now depending on what text editor you were on if you type in HTML and hit auto complete it'll all auto complete it to a bunch of things but on vs code it won't so on vs code you'll have to type doc hit tab and it'll autocomplete it to this so a few of these things is just good practice to have how vs code has it so you can kind of leave that without worrying about what it does too much okay but if we look at you know for example this meta tag here this makes it easier for mobile devices this adds utf-8 which again if you're learning if you're just learning about HTML you probably don't have to worry that much about what this is this part over here document well this is my you to site okay now let's open this up in Chrome desktop HTML crash course YouTube HTML and something you had you can't see probably so I'll close out of other tabs is it says my YouTube site here at the top now what I want to do is just add some things here like my YouTube site and hit refresh now this is here okay what I want to do is I want this file index.html file to link to the YouTube got HTML file and I also want the YouTube at HTML file to link back to D index dot HTML file yeah exactly so we'll say I'm gonna create a a link so here I want you to pause and think about how you would do it solve this problem before actually continuing the video now if you have solved it will give you four seconds four three two one alright let's jump right back into it so for H ref I will just simply say index dot HTML then we also want to add text so I'll say go or I'll just say homepage home home is fine and if i refresh here now home comes up and if I click here it'll take me to the home page alright and if I go to index dot HTML and if I add it somewhere like here and I add that in right basically add a header tag inside of the body and what you want to add in there are things like you know your webpage links you know right at the top or maybe you know what else goes in the header I mean theoretically in HTML you can put anything anywhere and it'll still do something but usually good practice is just stuff that gotta be at the top so like maybe yeah like a navbar your logo some people put it in the actual head tag up there like up there mm-hmm I mean way of there as long as you understand the general idea of what's going on then yeah header just put kind of like stuff that would be at the top of the page in the header tag so it's just kind of when somebody comes to your HTML code they don't the heck is going on like if somebody's trying to web scrape you our web site just make it easier them you know yep so let's go over here and we'll add in a link to the you know YouTube website so I'm going to do link we will do YouTube dot HTML and I'll say my YouTube site boom so now I can navigate back and forth between the two sites that I've created you can't this type of path this path file path is called a relative path because they are close to each other so that's relative you can also do absolute paths which is the absolute path from the start of your computer to this file but from the root of your computer to this file but we just want to care about the relative path generally and using the same type of pads you can add in images or whatnot all right so we got a link we can navigate back and forth between these now what else do you want to do well okay a good way to go about increasing your skills and developing projects is like look at something that you want to be able to build and then kind of model that try to build that so that's kind of what we're gonna do here let's go ahead to this page right that we had opened earlier and if I look at this I want to kind of mimic this page basically I want to build my own personal type of personal style YouTube so what I want to do is I will first of all take the embed code of this so I will say embed I will copy and I'm gonna paste that here alright now when i refresh this should be there perfect okay also in the header whoops we're gonna go ahead and put the home page so we stay consistent this refresh great now what I'm gonna do is I'm gonna put the title of this so again try this on your own before you follow anything that we're doing you should always try to pause do it on your own otherwise you will not learn these things to put up with the title at the bottom right just like how YouTube has it yeah yeah a smart ok perfect let's do that so well another thing we want to do is we want to add these hashtags that I have in the video python tutorial clever program or Python programming so we'll add that in and what we'll do to add that in is we will use something called the small tag and I'll do clever programmer Python programming and you know hash tag tutorial and just kind of leave it like that yeah perfect looking better huh so now we have that we can do probably a similar thing with views or publish so we can say like when I was published and I think we can also do that in small tags nice wait is that below or above the views on the actual YouTube it's below the views so we'll just pop the views above it yeah sure you can pop the views above it if we want so let's go here we can put that in small tags as well right or no or something for her head or five whatever we want this is what YouTube you should look like in its first iteration so like we're pretty like much pioneers at this point right this is looking great so there we have a pretty much simple version of a YouTube clone I wonder what else we should add yeah we can add the logo copy image address and we can do that right next to the right underneath the views right we can do image and I can pop that in oh no this is HTTP this is a fairly normal and it ends yep and what I want to do is I want to create a div that has both of these guys in there the clever programmer title and D premiered like I wanted in one place or sorry the clever programmer logo and then that should be good and I'm gonna create ap tag put this image in there and then after this image let's just put the words clever programmer keep it really basic let's go back and we have the clever program or logo a long way premiered and clever programmer okay so something limited with HTML yeah like I can adjust the width and the size of this I can do with 300 and then I can do oh let's make it fifty by fifty even better right now now it looks more like the actual logo and why don't we build the the channel channel name because I think it's bold on the YouTube YouTube page right channel name you're clever programmer oh okay so yeah I'm strong tags we can begin bold at two so let's use strong tag they're so strong tag you can use that to bold things you can use the emphasis tag to I don't think there's a bold tags unless there is no bold is actually not used anymore they try not to use it i I think it still works but I think they don't use it anymore let's see oh maybe they're just completely bold tag html5 write deprecated that's what I was trying to say be tag not bold tag that's right BJ yeah it's deprecated since HTML 4 yep so remove but another one you can use is M and this will italicize what you are trying to do so let's delete this as well all right now if i refresh we can link back and forth we have actual clone of the Youtube version which is pretty good and then obviously like if you want to kind of add this in a footer you can create a footer and in the footer so if footer tags is generally the stuff at the bottom the copyright stuff you'll see or so you can say I can say clever programmer make sure it's a P tag right and 2019 or something like that and how did they do copy 5% copies illegal there's like little codes here to get things I think you put like TM you can get TM to or like like all those different little symbols like there's something there just google it like there's no point memorizing them all just google it and then you'll find the code trademark copyright I guess you can use a reg registered register so you can also do like this trade okay and now shows up there like that oh yeah apparently now we are so there you have a basic you have a basic looking website it has most of the functionality you want it to have and we have covered a lot of things up until this point we can show you very basic CSS and I'll show it kind of right in here so for example I can go into this P tag and remember we talked about attributes so you can have width and height of an image for example we can also do style of something and I can say text align and I can say Center and if I go here and refresh now you can see how it's hiding behind our video so I have to move it here and now you can actually see it okay it's centered it so i'll uncensor it just so you can see it's better so that's what centering does right now if I remove that and save it refresh let's try something else let's try star font so just color and you can pick whatever color you want what which color do you want Aran's go red for youtube or its copyright right alright so if i refresh you can see that it's colored guys this is not HTML anymore now we're starting to get into styling this is the CSS part of things so we are not going to get into the CSS any further we just wanted to share the very basics with you but that's actually how any website gets designed and it goes beyond just like the most basic HTML that you see right here anything else we need to cover Aaron or we did a pretty good job for somebody who's trying to learn for the first time yeah I mean there's there's way more you can find but whatever you need to do and achieve for the website you just google it because you're never gonna memorize all of it but I mean we've pretty much gone over all the basic ideas the main the most used tags like use your HTML tags use the header tag the head tag body tag images and high frames all the different h1 through h6 all that stuff div tags these are very common so definitely memorize those but I mean there's there's like I don't know how many there are but it's probably hundreds of tags out there there was a little design and write and whatever yeah I think I think people get the idea so that's it for this video guys we really hope that you got something out of it I mean Aaron and I put a lot of work and effort into it but what's most important for you is to get something out of it you need to actually build something using this and you to build it right away because the the thing that people get stuck in the tutorial purgatory that often happens because people aren't taking the additional time to build things that's their own they're only following a tutorial and then they go okay I follow this tutorial but I still don't know how to use this and fridge we've all been there so you get stuck and to get unstuck you want to build your own projects you want to do your own things that's how you'll get better now in the description we'll try to link the source code for you so you can have access to it whenever you want and we really hope you enjoyed it so if you have enjoyed this so far and you're maybe interested in something like how can you actually freelance from coding how can you earn an income from coding this is something that's advanced will take you time and skill an effort but we've put together a pretty awesome training so our plus training it's earn me and our other team member Franky and we have taken kind of the best tools and skills you actually need to become a successful freelance developer and put it into this training the catch of this training is that around after the one hour mark we pitch you a paid product so we if you know if you enjoyed the trainee value out of it we pitch you a paid product of course that's how our team survives and we go to the next level but the goal is that in that one hour we really want to help you potentially change your the trajectory of your career and give you just massive amounts of value in that time ok so you really have nothing to lose it's a recorded training just in the description below click up on some link and then jump into the training program and we would love to have your face in there that's it for me guys this is Kazi this is Erin we love your face and we'll see you in the next video\n"