Learn HTML5 and CSS3 For Beginners - Crash Course

hadar my gorgeous friends on the internet in this episode santa came early he's on the roof right now damnit Santa get off the roof I don't have cookies nor JavaScript so you know recently I released my creative HTML and CSS course on my own platform developed by addcom and I know a lot of people could not join or couldn't afford that so the least I can do for the Christmas holidays is give you the first around two hours or two three chapters for free here on YouTube so what we're gonna do is take a look at the HTML everything you need to know about HTML and everything you need to know about CSS so I hope you enjoy it make sure to to let me know what you think and from next week on you're gonna go back to our normal routine just doing fun creative stuff on this channel so thank you again very much for everybody who purchased the course I want to give you a big shout out and the first day 350 people joined awesome gorgeous friends so it's unbelievable I I did not expect as much support so thank you from the bottom of my heart alright let's get going enjoy hello there and thank you for joining the course alright so we're gonna take this kind of easy at first we're gonna just kind of take a look at the basics of things if you feel like you're very comfortable with HTML and CSS you can skip ahead towards the mobile-responsive in this section that's where you're probably gonna get most of the information and building out the actual projects is gonna give you a bit of practice and everything so if you are already experienced then you can go all the way to that section but I still recommend kind of skimming through all of these sections because maybe you might find specific things in HTML and CSS that you might have not known and if you're a beginner obviously we're gonna start right here and it's gonna be very exciting and let's start with a magic trick is this gonna be good hopefully you didn't catch it how I did it if you did Dannan congratulations you have passed the first test okay let's get going this is gonna be okay let's get started the first thing we're gonna do is install Visual Studio code which basically is just a text editor that allows us to write code has all these cool extensions and it just makes it very easy for us to write code now there are different alternatives out there like atom and sublime text but Visual Studio code is just it's just so lovely to use so that's what we're gonna be using for this one but after a while if you want you get you can feel free to switch to anything else but for now we're gonna use Visual Studio code so just go to your google and write Visual Studio it should be let's take a look make sure you write Visual Studio code because there is another one specifically for dotnet to write c-sharp code and we don't want that we want Visual Studio code so make sure you get that one alright I'm on Windows so you can get Windows but if you are a Mac on Linux this is pretty much available everywhere for you so let's get these table built hit download we're gonna get the file here we're gonna keep it let's open this up we're gonna hit accept on this page hits next we can leave the default hit next all right this next again we can also create a desktop icon here and make sure you also have add to path here checked okay then we're gonna do next and install and that should be it pretty simple next up what we're gonna do is take a look at the interface a bit and also take a look at some extensions to make writing code a bit easier okay so here we are this is what you're probably gonna get when you open up vs code the first time and it's it's pretty simple there's not much to it as you can see the most that we're gonna spend our time in is gonna be this Explorer so here is where are all of our files and folders are gonna be then we have the search so later on in our code if we want to search for something specific we can do that here and we can also replace it to you these two we're not gonna cover yet because you're not gonna be helpful for us for now but then we have this marketplace here and so the X tensions and here we can basically add different functionalities to our vs code and we can also add some teams and new icons if we prefer so I'm gonna add a few and I'm kind of gonna explain what they do the first one is I cannot want to change the color of this I'm not a huge fan of it if you want you can leave it like this but I'm gonna change mine so what I'm gonna search for is material team and this one is a pretty nice-looking one soon it's the first one here it's by Mattia as Torino I'm sorry if I misspelled your name but you're gonna hit install here I'm just gonna enable it and then what you can do is set color theme here alright you can click that and then you have all of these different themes what I'm gonna set it to is this pella night high contrast I believe this looks very good I like the way it looks and so I'm gonna keep this one another one it's gonna be right the one below it the material icon team this just changes up the icons again this is super optional you don't really have to install it but I'm gonna install it okay and then we're gonna choose material icon team here another way you can access if maybe you want to change it again is you can go to the wrench down here and go to the command palette and for some reason when you're in the extensions here it closes it's bugging out I'm not sure why but if we close this up it should open up now and here you can search for color team okay you can just type in here or maybe it might pop up here but if it doesn't you can search color team and here you're later on you can pick one that you like okay so those are the first two now I'm gonna install just one more and then throughout the course we might add another one or two - it's okay but these two I want to change and there's another one that's very important which is gonna be live server so make sure you search for a live server it's gonna be this one by ritwik Bay and with 3 million downloads and make sure to install that as well and that's gonna be it we're gonna close this up and let's start writing our first HTML code okay exciting so right now I'm on my test here in my file structure what we're going to do is just create a new folder and create our first HTML file and our first HTML tag so what we're going to do is go up here to file and what we're gonna do is create and go to open folder and then I'm gonna just navigate to desktop okay and in here I'm gonna create another folder and I'm gonna name it HTML and CSS course okay and we're gonna open this up I'm gonna select the folder and click as you can see this brings us in here and it's there's nothing in the folder so that's good I'm gonna close this welcome message get out we don't want you and to create a new file we can go up here so as you can see this is a new file here the second one is a new folder here what we can also do is refresh the Explorer in case something doesn't update properly but to be honest I never really use this it it always kind of worked fine for me and we also had this to collapse this whole structure so what we're gonna do is click the new file and we're gonna name this index dot HTML so this is how we can create our first HTML file now why do we name it index the extension okay it's kind of obvious we're learning HTML so it's probably about HTML but why index well when we upload our website to a web server the first thing that that web server is gonna do is it's gonna look for this specific name it's gonna look for index dot index not not HTML for the index as soon as it recognizes that that's the first thing it's gonna display because eventually we can have multiple HTML files and here we can have maybe an about dot HTML maybe we have an About section on on our page so we can have that maybe a contact and our HTML but as soon as we upload it online the first thing that the users are going to be served is this index dot HTML so this is gonna be always the default all right so you're gonna mostly create a next HTML when you create your website so let's delete this for now we're just gonna keep the index and just to keep this simple we're just gonna write one HTML tag in here and then we're gonna set up a proper layout or kind of a structure that you're gonna be using for all of your websites and then I'm also gonna show you is the shortcut that's very awesome and a vs code that's that's just gonna make it super fast and you're gonna be up and running in two seconds okay had stopped talking show me how to do this so all I'm gonna do is I'm gonna write a smaller than sign and h1 and as you can see this is basically a heading on your website so this is how it looks now yes code automatically automatically completes it for us so it tries to help us but let me kind of get rid of it so this is what the HTML tag is alright and we can close this up the second one kind of looks the same but we have an an additional slash here like this alright so it kind of looks like a sandwich not a Subway sandwich but just a normal sandwich so basically whatever you put in between here it's gonna be displayed on the screen so whatever you put in between these HTML tags so in this case I just put hello sandwich boy like that and hit save so I can do ctrl safe okay and now to visualize this on the screen what we can do base hit the right click and then hit open with live server and that's gonna put it up on the screen here for us let me drag the screen on the side of the page that doesn't work okay let me just do this and as you can see we have a heading that says hello sandwich boy so everything worked ok this is super basic so in the next section we're gonna set up a proper structure okay if you've seen this you probably get an error message here with this yelling at you sing live reload is not possible without body or head tank oh my goodness leave me alone why you do this so basically it's telling you that hey this needs a proper structure so you kinda need to define a HTML tag and there's something else called the head and a body so I'm gonna kind of explain everything as we go on so the first thing we need to do is basically specify and to the browsers that hey we are working here with a HTML document so the way we can do that is there's a special tag here called you do an exclamation point and you can see doctype like this and you can write HTML okay so you don't need to kind of memorize this this is just the thing that we do once and that's kind of it all right so this is you can imagine that this is just one type thing we never really go back to this and we're gonna do it in all of our pages so don't really worry too much about this okay but essentially what it's saying is yo i'ma hitch the ML document so very cool okay so here's where we're gonna see the sandwich effect with these HTML tags so what we're gonna do is define our HTML document now here's a cool trick you can hit tab and that's automatically gonna complete everything so you just write HTML and tap and the same thing works with the h1 as well that we saw okay so this basically takes two things so this is our documents or HTML document and this has a head I'm gonna hit tab again and also a body which I'm gonna do down here alright so as you can see these are kind of separate this is kind of like the parent element to these two children in here okay and what this head is is basically where your meta information goes in your title that you see displayed on the website so up here in the corner and things of that sort for search engine optimization for Google to find your page to index your page and also you're gonna see that here is where we're gonna link our CSS and our fonts and things of that sort okay so things that are kind of in the background that we'd necessarily see on the screen and the body basically holds all the information that we do see on the screen so for now let's just do one here I'm gonna say title and I'm gonna save it for a sandwich boy let's go back to the sound okay so that's one here alright so if we hit save all right let's see if this refresh is automatically okay there we go sandwich boy we have there okay and whatever we put in our body here so I'm gonna just write the h1 sandwich and hit save ctrl save and you're gonna see this popping up here so the main part of your website is gonna be in this body and all the rest is gonna be in the head the information about the website linking style sheets and things of that sort bonds okay but you probably saw that when I tap this over like this and I had saved it automatically reloaded and made it nice for me so even if I have these extra spaces it can organize everything for me so let's introduce another extension this one is called prettier so go here to the extension tab and search for prettier prettier like this click on this one it looks like this hit install and once you do that what you can do is go to the wrench tool here go to settings and you can search format and you can enable this format on save and basically it it formats the code for you if a formatter is available so pretty R is a formatter and it's just gonna keep your structure very organized even if you're right sloppy code or you can give random spaces here so this kind of looks hard to read but when you say if it does it automatically for you and it's kind of nice because you can see what parent is whose parent and who are the children so I know that the head is the parent of the title and the body has a parent of age one okay so this kind of keeps everything nice okay next up what I want to show you is a bunch of awesome meta tags that we can add to our head here so again just a few more things that are not visible and we're gonna get straight into the fun I promise so here what we can do is add some SEO that's gonna improve our search engine optimization all right so website is gonna be more easy to find so we added one which is the title here and actually you can make this longer like this Devitt professional cooking boy I just added this for fun and as you can see it updated right there you can also view this on a bunch of websites a few service like YouTube here you're gonna notice that the title well they just have YouTube but okay let's search another one Amazon as you can see amazon online shopping for electronics apparel so it has a pretty long title okay so let's add another one the other one we're gonna add is called meta and hit tab but as you can see this one is actually it doesn't have this closing tag like like h1 or like title it just it's just like meta and that's it so you're gonna find some some tags that do closed some that don't close and I don't really want you to beat your head over and like sweat and and invest a lot of time in remembering which tags closed and which tag which tags don't so what I recommend you to do is just hit tab it just write h1 tab and vyas code is automatically gonna know what to do so this way you're gonna write them and you don't have to worry about it and if you keep writing more HTML you are gonna remember it because you keep using them a lot so it's gonna go into your memory so don't really sweat about which attacks close which tags don't just hit tab and let the autocomplete do it for you and then yeah it's just you're just gonna remember it easier this way so meta another thing I want to introduce you is if we come here after right inside this this this tag here and just add a space we can add something called an attribute and all all an attribute is it just basically changes the behavior of your of the meta tag that you are on and you're gonna see this being used a ton especially here when we're in the body and we're gonna inputs and we're gonna add a bunch of other things we're gonna add a bunch of attributes in here that's gonna change the behavior or maybe just give a a name to our tags so let me show you what I mean and the meta we're gonna add an attribute called name and we're gonna set this equal to description so this is a meta that's gonna handle the description on our page so if I'll go back to the Amazon if I still have it open let me go amazon.com and pull it up here on the screen so as you can see it has a description down here so that's gonna be our our meta tag and here we can add an other attribute called content alright and here if we add hit enter it's as you can see autocomplete set for us just like it did before here we just set it equal and we just add two quotes okay and here we can say that ad is a professional cook with Italian dish expert I don't know I'm really bad at adding these but when if you do a portfolio or something you're probably gonna mention a lot of keywords here like front-end web developer HTML and CSS and things of that sort okay but a title is still gonna be way more important than this description meta tag but it's very good to add this as well okay that's the first one the second one is gonna be a bit weird but I'm gonna write it down here for you you're gonna say meta and the attribute is gonna be called character set okay and we're gonna set it equal to utf-8 this is something again I don't really want you to worry about that much but it's pretty much in encoding it's an encoding that our browser can understand so basically all the the words like ABCD efg and one two three four and these symbols like like dollar sign and these symbols is basically a you're telling the browser what kind of character is to use an encoding to use you can kind of hover over this care car set and you can parse it and you can see kind more of the meaning it's kind of it's not that clear the attribute declares the page character is encoding it must contain standard Jana my name for yeah it's a bit weird but all it basically is it's just an encoding that recognizes the characters that we generally use here especially in Europe or us right it's not Chinese characters or however any other things like of that sort okay so again this is just something we had I wouldn't worry too much about it but it's good to have it here okay so that's another one let's do another one we're gonna say meta again all right we're gonna come here and this one is gonna be called robots now it's not it's not as cool as it sounds unfortunately but what the robots meta tag does it basically provides instructions to the web crawlers whether to index your web page or not so so it has an easier time finding your webpage or you can declare it for for it to not be visible if you don't want it to so the way we can add this is we can go meta here and we can say let's say name just like we did with the description and set this equal to robots and then the content here is basically going to be I mean you can do two things here you can say index and follow or optionally you can say no index and no follow but I wouldn't recommend that anyways so basically what followed us basically this search engine crawler will follow all the links in that web page okay and the index is the crawler will index your whole webpage okay so you add this and it just helps out the crawlers it's gonna find your webpage easier and you're probably gonna appear on Google faster okay so that's another one I kind of want to change this little logo here because I don't really like it this is just a default that it gave to us but I don't like the globe I don't want to be mr. worldwide I want to have my own how can I change that well what we can do is we can go to Google again our dear friend and we can search for some icons so what we can do is we can say dot ICO files here and I don't remember the name icons that icons this was the website they kind of provide you some some simple icons here let's just use one in France is for fun and let's get to this one and I don't know which one do you like I like the little house I want to get the house so let's go on the house em we're gonna download this ICO file okay so hit on that it should download for you and after it does we're just gonna drag it in here drop it in here and now what we're gonna do it is right here we're gonna say link this time not meta anymore and as you can see the link element allows you we're not going to hit tab here and I'll tell you why if we hit tab it's automatically gonna generate us this rel stylesheet page rafting now it does this because it's very commonly used to link our stylesheet so this link thing you basically use to connect your CSS to your HTML or to connect different things to your HTML however I don't want to do the CSS right now but this is kind of similar to the way you attach the logo so all we do is we have this attribute well here I'm actually not going to delete it and as you can see it's just the attributes name a relationship of the linked document to the current document you must be space separate lens okay so I told I think they even have a a link type here so let's open up let's actually see what they show pus okay we have otter bookmark there's a bunch of here but look there's one called icon so we can replace that with icon because that's what we have and hate ref is basically on it gonna be the URL or the location of our icon and the way we can find that is we can just add a slash and that's automatically gonna pull up the whole file structure that we have in the left and we can just click on it and hit ctrl save and take a look we have our little house yay thank you so much that's so cool it's so cozy already and our HTML is empty but hey it's a good step there's one last one I want to introduce you which can be a bit kind of weird but it's very very helpful so we're gonna say meta alright we're gonna click on it and then we're gonna say name and this is gonna be viewport okay and the content is gonna be equal just follow along with me here a bit it's gonna be weird we're gonna say with equal to device wit and then we're gonna add 8 comma and we're gonna say initial and then let me make sure I in this show - scale it's gonna be equal to 1 all right let me make more space here so you guys can see okay here we go so initial scale 1 ok so this kind of looks weird but all it does is well like 10 years ago websites weren't really made for for mobile it was all desktop so what what this helped with is basically scaled the website all the way up till it filled the whole screen for maybe a smartphone or something so as you can see you can kind of read it what equals device width so the width of the website should be the width of the device and the scale should be basically so you can see the whole content so it should be scaled like one and not zoomed in like this or zoomed out like this it should be fit perfectly and I actually want to show you a quick example here and I quickly want to show you this example right here on v3 schools which is a really good resource as you can see without the viewport meta tag this is how our content looks on a mobile screen however if we add the viewport meta tag and makes it more responsive it takes advantage of the full space of the device of the width of the device so that's it we just usually add this as well without actually worrying about it and there we go we have a proper structure of our website and I you're gonna be mad at me because I'm gonna show you a cool new trick to set this up from scratch super fast so I'm gonna delete everything here I'm just gonna cut it out and take a look right here if I hold shift and press 1 we're gonna add an exclamation point I'm gonna hit tab and take a look that's automatically done just gonna generate us this whole structure there we go look how quickly we can do this just shift tab and boom we have our boilerplate generated now it doesn't actually add those other meta tags like the the ones that we had here like the robots and the the icon and the the description here but I kind of wanted to show you the two ways we can do it you can add it after if you want but I'm gonna stay with our original one that we have let's take a look at some fairly common HTML elements that we use so we did the h1 which is heading 1 now there are a few others there's h2 as well and let's say hello there as you can see this is gonna be smaller and it goes all the way to 6 so we and there's actually a cool trick you can do you can hold shift alt and press down on your arrow key and we can rename this to h3 h4 h5 and h6 so let's do that really quickly oh my goodness there we go h3 and as you can see my visual studio code editor autocompletes the last thing if I want to change it to you so if I change this to h4 it changes automatically there to h5 changes there automatically as well and this is again just a small little extension that you can add if you go to the marketplace here and you can search auto rename tag and install that how to rename tag here install it and you are ready to go so h5 and let's do h6 as well let's also copy this and just say hello there so these are all the different headings that you can use I'm gonna zoom in a bit here so you can see okay and basically you would use these as titles you would use these as logos and also what I want to clarify is that the importance mattress here so heading one is way more important than a heading 3 or a heading 4 okay so to give a proper example let's go and navigate to a website and see what's up here is a quick example that I want to show you on this website you can use the headings to give importance to the things that you have on the page so maybe the logo here towards data science can be a heading 1 because that is very important the site of your name is very important so you would add it as we heading the title of this article can be a heading 2 because it has its still very important you might want this to show up in search results and then you have some paragraphs going on here and if you go down this might be heading 3 so it's kind of like a subtitle and another heading 3 another heading 3 okay so you basically have one and Fortson title up here and then you would go down and the headings and so on and so forth okay so that's a very quick example on headings we're gonna obviously implement this in our website and as you can see besides these headings we also have paragraphs I'm gonna get rid of all of those we're just gonna have the h1 to create a paragraph what you're gonna say is just say P a hit tab and boom we have a paragraph element so here again hello there this could be just some normal text and there we go you could use this now I'm zoom then so it's probably not as big for you so let me zoom out something like this and as you can see the browser also puts like a basic font size on it it styles it a bit for you this is bold and just create some basic styles and it kind of varies from browser to browser as you can see there's also some space in here if i duplicate this paragraph and hit save the space in between these are not necessarily exactly the same as with the header so as you can see the space is bigger here so the browser does do some basic styling automatically for you and I also want to point out when we are going to get to styling you don't really want to use headings just to give your text some bold font to it or make it larger alright that's that's not why we use headings headings should be used to give importance of the structure of our HTML and the importance of of the text on our website that's why you use the headings all right you wouldn't use a paragraph as as the title of maybe an article post okay because we can style this if we want to look like this that wouldn't be a problem and also you might just want some bigger text I don't want you to straight-up jump to a heading just because it gives this automatic styling for you okay I want to show you some elements that help us format our text here and our heading everything helps so what we can do is we can actually rap so we can go nd paragraph here and we can wrap something inside another tag so again we can do this nesting that we can already tit in here we have the body right that's the parent element and then we have all these small ones nested inside same thing I can do here with the paragraph I can nest another element inside here so maybe I want to make this last one italic okay so this could just be some normal text I want to make this italic so what I can do is go here and just add a space I'm going to say hi and hit tab as you can see that's going to generate it for me and I can take the ending ending closing tag and just wrap it around this like this so this looks a bit weird but it's it's actually very simple you just have the paragraph and then you just wrap the following text that you have inside this eye and if we hit save as you can see I'm gonna zoom in a bit here that's gonna make it italic and there is a bunch of them let's replace this with strong hit save as you can see that's gonna make it bold for us there's a bunch of them here I'm not gonna go through all of them because we're not gonna be using these as much as you might be thinking and but let me just show you a few for fun there's one called small and as you can see it kind of pulls it up here for you you can kind of see what it does represent a side comment such as a small print so if we had save we have this we have small we also have mark let's hit save and as you can see this kind of marks it like with the pen with a blue not yellow with a yellow marker it's kind of like you've drawn over it to market there is also one delete which is kind of gonna cross it out like that and there's just a bunch of them that you can use but again we're rarely gonna use this it's and we're not gonna be using it as much but if you ever me that you you know at least what to look for you can just search up a you can just search up a formatting 4d text next up let's take a look at some images that we can add to this little website that we made here there is not that it's it's not amazing but hey we are getting there so what I want to do is I'm gonna show you a cool website for images it's called pixels and they have some very high quality images so let's search for once you have autumn mood it's almost winter here but hey I don't ever mind this is like a photo submission thing okay let's move on let's hey who doesn't like mountains everybody likes mountains I've never been to actually I've been to like one or two you know not too big of a mountain but okay this lady on the mountain take a look at that very nice the boat is underneath perfect so it actually gives you multiple sizes here I'm gonna get a medium one and hit download and all I want to do is just drag this inside the folder here now I don't have that open so let me open this up I just closed it so I have extra space and drop it in there perfect so we can close this up let's make the screen bigger here now as you can see the file structure already starts getting a bit weird so what you can do is actually create a folder here a new folder and we are going to name this image like this shorthanded image perfect so now we can take the woman with the boat and the bird house and just drag it in there and then its gonna say hey are you sure you want to move it in there and you're gonna be like dona to ask me again please and then move it there perfect okay let's refresh but take a look our icon is gone why well because we gave it a path here that's not there anymore so if we add a slash now as you can see there's no image there so it's automatically it's gonna be like okay I don't know what to do goodbye it's not even gonna bother looking for it oh my goodness mr. HTML why you do this to us why you did this so what we need to do is navigate to the image and now hit T birdhouse and then we're gonna get the logo the icon back okay great so let's put the image here how do we do that I'm gonna close this up here just so we have more space and all we have to do is gonna be very simple just hit enter and we're gonna see image and we're gonna hit tab again okay and take a look this is again one of those elements that are that doesn't have a closing to it it's just simple like this and it's gonna give us an alt any source I'm gonna delete this alt because we're gonna cover this in another section but all it means to quickly explain it to you it's just an alternative text for the people who cannot view this image maybe that image doesn't load maybe people cannot see the image for various reasons so you can add a description here too to whatever you have on the image okay you basically described the image in words but for now we're gonna remove it we're gonna get back to it so don't worry but we have this attribute called source which kind of works the same way as this link thing so you just add the path to the image that you want to use source and as you can see we have the woman standing on the cliff so we're gonna have control save and take a look we have this now it's gonna put it in the original file size so it's gonna be extra large here as you can see we can scroll and go crazy now there are a few attributes that you can also add here to make this smaller so you can actually set a height and a width to it this later on we're gonna do it in CSS before now take a look just to make this a bit more more pleasurable to look at we can just add a width of 300 for example or 500 and a height of let's say a thousand okay let's see if that's too large okay this kind of looks a bit squished as you can see it doesn't look that nice so let's change the height to 800 maybe okay we're getting there let's do 700 that's gonna be fine so there we go that's kind of the original aspect ratio of the end perfect so looking good okay let's quickly jump into the video so to add a video you can see video and we can hit tab and as you can see it automatically gives us a source I can just see thoughts clash and I have a video here with my cat so there she is she's doing mischief she's very bad but she's cute okay so this is super large again so what we can do is just add some attributes here like height I'm gonna give it this 500 and add a width of something like 1000 it's safe okay made it small again well I cannot play this and it's just a picture so what we can do is I want controls I want to be able to play this scroll through this and make this fullscreen and things of that sort so to do that we can actually add an attribute called controls controls there we go hit save and take a look now we can play the video and we make this a bit larger we can skip forward we can also mute the sound if we want this video doesn't really have any sound and we can also fullscreen this so hey everything works perfect okay so that's that's pretty much the video there for you you can also how to play this if you want so when the page loads up you can just say how to play we can add this attribute hit save and boom there we go it's out of place for us I wouldn't really recommend doing this if you just have videos laying around here but it might work well if you want to do it as a presentational style maybe maybe you have a website where you have those big large videos playing and kind of like in the background just as a visual aesthetic so that kind of works okay but hey we have this as well there's so much we can do with video now actually what we can do is we can not if we want we can not give the source here on video we can actually provide so let me remove this we can actually provide a source and here so I'm gonna open up the video let me just close this make more space I'm gonna open up here so we are inside the video tag and here I can provide multiple sources if I so I can see source and set the source here to video and before and I can also add the type of video and before in - and before to make it clear so what's what's the deal with this well it generally kind of the same thing but if you have maybe the mp4 might not be supported so what you can do is you can add multiple sources here and the ones that's gonna be supported is gonna play okay so you can add multiple formats of your video just in case it's not gonna work but generally you can be fine just using the video here without the source and the most common types of supported video formats or mp4 web em and OGG so as long as you use those you're probably gonna be fine okay next up what I wanted to do is actually clear everything up here because it's starting to get kind of messy so let's remove the video the images actually we clear the whole body okay everything is removed so ctrl save and that's gonna get rid of everything so I want to show you how the links work so let me just add each one here so we do have something on the screen hello there a link and hit save so we get that and now under this I want to add a link maybe to my YouTube or let's just do something simple so what I can do is I can press a and hit tab and that's gonna generate us an anchor tag and as you can see it has this hate ref which all it means is that you need to add a link kind of like this link up here so this can be a bit confusing here anchor is gonna be the link that you click on to visit a page but this link is actually different this is basically for linking your icon or linking your style sheets and the header so anchor is used to actually have links on your website okay so let's provide one which one shall we do let me pull up let's search for dev ed here I'll do my YouTube channel for an but all you have to do is just copy the link and we're gonna drop it into da tag here and to the H ref my apologies and hit safe and you might be wondering it okay well there's nothing here but it what is this pretty well we also need to add some text here so it shows up as a link so what we can do is say dev adds YouTube like that and hit save there we go and as you can see now we have that and as you can see this again has some basic styling on top of it so you have this kind of blueish color is it bluish purplish purplish color and an underline there so when we click this it navigates to the link that we provided here okay that's cool but as you can see it actually opens up the page here and we we left our original destination and sometimes you don't necessarily want to do that especially if you have a website or maybe you have your portfolio right and people are looking at it and then you click on maybe a project that you made and then they leave your website basically right so what you want to do is you can also click on this and it's gonna open up in a new tab so what this means is there's an actually an attribute here called target and by default that that target attribute is gonna leave the page and it's gonna just go straight to the link that you sent it well we can go here to the a tag and we can say target like this and as you can see there are a few it's very nice video scope this is just fantastic it gives you all the options that you have so as you can see it has self alright this is the default behavior so it's gonna redirect but then you have this blank and all its gonna do is it's gonna open up in a new tab so this is exactly what you have to write target and underscore blank so let's do that forget underscore blank that's it safe and see if that works click and take a look we have arrived to our new page awesome now I actually want to show you something we can also combine the anchor tag with a link you might not necessarily want to text in here you might want an image or a logo so take a look let me show you something very cool we can go to icon monster and this is a website where you can get a ton of super awesome icons and I'm gonna search for YouTube here so let's start YouTube and let's just get this one this is fine I'm gonna hit OK and download and I'm just gonna open up the file directory here and drag it inside here for now okay perfect let's close this up I'm also gonna get rid of the scent before we don't need this anymore and you know what let's get also rid of the images folder here so now take a look I can just go here and I'm not gonna add the text anymore I'm gonna take everything out here and I'm just gonna drop in an image so you can actually nest an image inside this anchor tag let me make more space here so it's a bit more visible okay so let's make even more space this link tag is a bit too long so it's a bit might be a bit difficult to to see what's going on but I'm just basically adding the image between the anchor tag so the in between the the opening and the closing one where we add the text so in here I'm just gonna write image and hit tab and that's gonna give me a source here again I'm gonna talk a bit about the alt later so let's get rid of that but in here I can just add a slash and link to that icon monster and as you can see we have the button now as a logo so when we click on this it still works the same way but you can also have images PNG JPEGs whatever you want here to show up as a link so there we go next up let's cover the forums and we will actually be using one forum on our first project where we are gonna submit some user data and we're gonna receive an email so forms that are typically used again to collect some user data so you probably know this but whenever you sign up on a website there's a forum there you enter your email you enter your your password your username and then they receive that information and they're gonna create an account for you same thing goes with contact when you hit submit they're gonna receive an email so basically all it does it collects some user data and it gets sent somewhere depends where who knows there's a lot of options you can deal with forms so how can we create a form well we just use the form tag so I'm gonna save form and hit tab and as you can see it automatically gives me one attribute which is called action we're not gonna be using this for now because all this action does is it submits the form somewhere so after we submit the form this action gets executed but for right now let's remove it we're gonna add it a bit later and in this form we can add a bunch of different kinds of inputs so the first one that's gonna be probably the most common one is gonna be called input type text so if I just type input and hit tab obviously it's gonna give me the most default one and this one's call text so if I could save I can type just normal text in here all right so now it's very hard to see what this does because it's unclear it doesn't have like a a title or maybe something a label to it so we can actually add a label to it so if I go up here I can type label and I'm gonna hit tab and as you can see it gives me four alright so for what well I knew it for this input I need to describe where this label belongs to and it's to this impose so to give an identifier to this you just add an ID and I can set an ID as you can see it's a unique identifier and it's also heavily used to to basically to modify an CSS or to identify it in JavaScript if you want you can use there as well so if I give an ID here we can access this input basically through our CSS and JavaScript and then here I'm just gonna give it an ID of name alright or user let's call it user I want to have the user so I can see the label is for user and I can add a descriptive text that you see on on like every website is in this label here I can say user name and this doesn't have to match the text that we add here can be anything that we want but as you can see here I kind of keep it simplified and easy but here I can use the full name I can do user name here as well but I like to keep it very simple everything lowercase just use your okay so as you can see now we have user name and we have our label and our input so super cool now besides this the label it's very useful because let me show you something if I add another input here I'm actually going to change this to type email right now check this out if I add another label here and I'm not gonna name this in any way I'm just gonna say email all right well what's the difference between this and this like these two and these two like what what does it actually help me with by adding for user here and binding it to this input what's the difference I'll check this out if I'm gonna click on email here on this label it doesn't really do anything I have to click in the input here however if you specify on the label they hey this is specifically for this idea of user this input well if I click on the label now it automatically jumps me in to the input tab here so boom as you can see it just it activates the input so I can start writing so this makes it a bit more accessible and a bit more easy for the users to write the inputs so lastly what I want to show you and I also want to show you the difference between text and email here is at the end if I just add a simple button here and I'm gonna say say submit and like this and take a look I can add a attribute of type submit' and all this is gonna do is it's gonna submit all the information that we have in the form so if I hit save and I'm gonna just type something and I'm gonna add an email alright just a random old email that I have I'm gonna hit submit boom the form gets submitted now it doesn't get submitted yet and anywhere unfortunately because we don't have an action here but it works then that's all that matters so here's the difference between the type text and type email I can add any text I want here however here if I don't add an email as you can see we get an error here saying please include an ad in the email address so it doesn't actually submit the form so HTML actually does some validation for us if we specifically specify that hey this is an email okay we only want to have an email so the form doesn't get submitted anymore until this is actually an email so that's super awesome now let's go up here to the form and I'm actually gonna add an action okay and I want to show you that we can also use action to navigate to another piece I made a contact up HTML here it's super simple there's nothing really in it and I can add a slash contact HTML hit save and I'll take a look whenever I submit something it's gonna jump me over to that page so you can also do that if you want and this by the way also works with an anchor tag so if I add an anchor tag here and I'm gonna say link me to another page we saw that we could abuse this with links but we can also navigate to another HTML page I'm gonna say contact on HTML and I'm also gonna add a target of blank so hit save and take a look even this link tag can also navigate to another HTML so I thought I'd show you that as well however the way we will be using action here is we are actually going to use a third-party website and we're gonna submit the information there for them or later on when you're gonna work with JavaScript and nodejs or maybe another programming language you gonna submit this one to a specific URL so you get that in your back-end server or somewhere else so for now this this is is kind of useless for us so we covered this we covered the labels we covered the inputs and we covered the ID which is again just used specifically so we can access this specific input and our CSS or JavaScript okay and let's see what I want to show you is something called name so on the input here we can also add a name called user so I'm gonna use the same as the ID here and for the input type email I'm also gonna give a name of email and the reason I am doing this oh the only fields that get submitted in this form are the ones that have a name on it so make sure you put a name of all the inputs that you want to submit and the form and just to kind of quickly show you what gets submitted if I type here edie and just provide a random email and I've highlighted submit you're gonna see up here and the URL we're gonna get user equals edy and this is basically the name so user equals and this is the value that we gave it and then we have email so the name email equals add magician at gmail.com okay next up I want to take a look at a drop-down where you can select multiple different values to create a drop-down all you have to do is say select and hit tab and now this also gives you a name and an ID I'm just gonna call this product alright and I'm gonna give it an ID of product so if we ever want to select this and our CSS or JavaScript we also have a unique identifier and and here if we save this we just have the simple drop down here but it doesn't really do anything so to add options well we just write option that's a HTML element that we can use and in here I can give a name to my product maybe I have a MacBook right so there we go we have a MacBook um I can duplicate this bring this down and call this a iPhone or something it's safe and now we have two so there we go and what this value does is this is actually the thing that gets submitted in the form right this is kind of the text that we want to give it this can just be whatever we want but when we hit submit the thing that's in the value is gonna be submitted in the form so I can see MacBook 2018 like this for the value and I can say I phoned 11 like this so when we actually add our information here I select MacBook hit submit if we expand this you're gonna see that product is going to be equal to mag buck 2018 so the actual value that's in here is the thing that's going to be sent to the to wherever we are sending it to okay but what if we want to submit a message having the small input is not that great because if we write a lot we cannot really see anything else that we write but that we previously wrote right and I cannot add a you line if I hit enter then the form is getting submitted so how can we get around that well we have another element called a text areas I'm gonna just say text and as you can see it appears there I'm gonna hit enter and oh my goodness what's going on here well we know name so I'm gonna give it a message I'm gonna give it a message ID as well but we haven't this calls and rows if we had saved as you can see now we have a multi-line element here that we can write a lot of text to and we can also expand this if we want like that take a look that's pretty cool there are a few attributes that we can add to these inputs and I want to show you a quick few ones that might be useful if we go up here to the input tag we can also limit the number of texts that we can add in here so let's go here and all I'm gonna do is tap type in Max Lent like this and I can set a max length equal to I can see 12 or 16 maybe I don't want more than 16 I'm gonna do something low like 8 for now just so I can show you and now if I have something super ibly long I cannot type anymore as you can see it limits me from typing so you can do a limit of something like 60 here just so it's not like super spam or 30 and we can also do a mid-length here so we can say minimum length should be at least 6 characters so this is probably a bit more useful for you so if I add something like 1 to 3 and hit submit as you can see it's gonna give me hey you need 6 characters you're using only 4 right now so this is another great check that you can add to your text inputs if you want to limit it so we have limited our input here for the username and we also did it for the email now if you don't want to have this autocomplete thing you can also turn this off I wouldn't recommend turning it off it's a nice option to have but you can do that as well so if we go to the let's see where are you email here and you can see auto auto complete as you can seen you can turn that off like this so when we go here now it doesn't display that for us still displays here but it doesn't display here anymore you can also add the autocomplete on top of the form if you want to disable everything so if you don't want it to be appear here or either on the email you can just go here and say autocomplete 'off and that's gonna get rid of everything for you the one that might be useful as you can also add some placeholder text and here and the username and the email and textarea so maybe let's go here add another attribute of placeholder and maybe we can add something like characters should be six minimum or something like that as you can see that appears in there as well or I've seen some people not use the label and they just use a placeholder to be honest I'm not a super big fan of that but you could see a user name in here so when you click on it and you start typing as you can see it disappears so it just stays there until you start typing might also have some elements that might not be required it might be just optional maybe we want to have the user name and email and the message so we can go here and on the user name we can add a required we can also do the same for the email here and we can also do for the text area so for this one we might necessarily not even need a value selected so what I can do is just add another option here and just leave this empty all right so no value and just empty okay and then I'm gonna move the selected I'm gonna get rid of it so nothing is selected so now if we add some text and an email let's make this longer because I think I have a limit on and if I submit this is gonna work just fine so as you can see the value there is gonna be submitted with nothing so let's take a look where is it mmm select products as you can see it doesn't have anything and the products it's equal to nothing I'll show you another quick one that might be useful this one is called input type radio' so let's type an input type radio' and here again we basically can give it a name whatever name we want let's say macbook alright and we can basically copy this multiple times so like four times okay and what we can do is change the value of it so I'm gonna say value and this is gonna be D mad book all right now here's the interesting part let me also add a button type submit' type submit' and there we go we're gonna see submit so here's basically the difference between this and this this one we want to make general kind of what is this about its product alright so we don't want the actual product name in here because this is the value that's gonna be submitted so here we're gonna actually rename this to products like this product okay and I'm gonna copy and paste it here this is gonna be the same value across the whole name alright then only the value is gonna be different so I'm gonna say value with this one's iPhone and let's do another one value I don't know Amazon we are buying Amazon everybody value and this is gonna be cooked boy which is me so let's hit save alright so when we're submitting this so if I click on one and hit submit as you can see the products it's gonna be equal to MacBook so this is kind of a general one that we're gonna give to the name we're gonna give it to all of them and then this is gonna be the actual product or value that's gonna be submitted okay okay next up I want to cover list which is gonna be fairly simple so if you want to have a list of some sort all you have to do is we're gonna type in ul and hit tab alright and what ul is there there's basically two types of lists there's ordered list and unordered list and you're going to see the difference in a bit this is the unordered list so you pal an ordered list would be okay okay so ul for unordered and ol4 ordered and inside this ul you basically take the individual lists that you have so list is Li and in here we can say let's see whole and there we go we have one I'm gonna zoom in for this one so you can see a bit easier and as you can see the unordered list all it has is basically just this simple dot here so if I add another one let's say that's a contact and hit save and as you can see we have that if I change this whole thing to hotel everything is gonna be numbered one two three four five now you're going to use lists often like this but where where the most common is where you're gonna find lists the most common is have in a navigation bar and cannot speak anymore oh my goodness and a navigation bar so home contact you might have projects and live projects this is where you're gonna see it most common now we're gonna do some CSS magic of course and and we're gonna get rid of these numbers or usually what we do is we just use an Li here and then we're gonna get rid of these now I have an empty one here because I accidentally added a list to another list and that's something you can have as well you can have multiple types of lists so let's change this to oh well again like this so we have one two entry and you might have a ordered list inside another ordered list this is something that can happen as well let me copy these and paste them in here so as you can see if you have another list it's just gonna kind of push it to the side so maybe if you have like a book or something and you want to have like chapters or something you might have something like this so chapter one like this chapter one so that's the first one and then underneath we might have an ordered list again where we have Li the homecoming or something and I'm not sure so there we go take a look now we have have it like this and we can have multiple ones under and then after that we can just go outside of this ordered list and start again Li chapter two and boom we can start from here okay so we can stack those together as well if we want that's it lists are very simple as you can see they're not too hard what we're gonna do eventually is remove these dots and see SNS and what we can do is we can also add an protect inside here to actually link it to somewhere so we can say Li and inside the Li we can add this and maybe this navigates us to another page like about dot HTML but since this is the index one we can go to the index.html like this and you know what when you are on the base HTML you don't actually need to even link it anywhere you can just add a simple slash and that's gonna recognize it that hey index is the hope and we can also copy the home from here and add it inside the a tag like this so when we click this as you can see it brings at home now here if we want to do this let's just paste it in here this can't just can go to about dot HTML and here we can see it about and this is gonna work just fine now it's not gonna work because we don't have one well we have a contact one we can change it to that but let me just show you really quickly so there we go we can go to another page very easily okay okay let me quickly talk about comments because this is something fairly important that a lot of people don't use but it's very important to make your code look nice and it doesn't actually change your code in any way but it helps you organize everything a bit more so comments are basically text that you add to your HTML that does not have any impact to it so it's just something for you to know and to remember and to help out maybe other people to know what's going on in your code so maybe I might have a section like that form that we created it here and it does something right so let me just add just these empty form here and you might have some things in here okay so what you can do is go up here and you can leave a comment on what the functionality of this form down here is okay just to make everything clear so to create a comment what you can do is say you can add this arrow to the left the arrow to the left oh my goodness the smaller than sign and then the exclamation and then you do two lines like this okay and it autocompletes everything for me but it adds two more lines and a bigger than sign so basically everything that you're right here it doesn't matter it's not gonna show up anywhere as you can see we only have these inputs it doesn't show up but it helps you kind of know what what you did so maybe here I can say this is a forum for submitting user or submitting a login or something or a register okay so now you can have a section like this and then you can go down here maybe you can add another comment like this and then maybe you have a section here with some content maybe some images this is going to be an image gallery so when you're navigating through the code it's gonna be very easy to identify these small comments and you know what the code below is doing so it's very important I highly recommend you to add as many codes as you want but also keep these simple because if you have like a super big stack of codes and then you add a lot of code in between the elements as well like this then it can get quite messy so try to keep them as simple as possible and as short and useful as possible I quickly want to jump and cover tables and I want to say quickly because it's not used as much as you might think any more and early days people would use tables to kind of organize and structure all the elements on the page so it was used a lot for structuring and to move things in certain positions but these days you're gonna use tables probably if you really need a table if you want to show like some kind of statistic or something or you want to display some information in a table form then you can use that but generally you're not gonna find yourself doing this a lot but let me show you nonetheless so to create a table what you can do is say table and hit tab and inside this table it basically takes two different elements it takes a PR which means table bro alright so the horizontal ones that are gonna go this way so inside this table row we can add a th like this and let's write something in here so let's say first first name or something okay okay that's one let's duplicate these two more times let's write last name and let's write H in here okay there we go and outside of this table row what I want to do is add a table another table row and then here I'm gonna say T D like this and this is gonna be add this is gonna be you and finally shoutout to my mom she made the course yay and hit save so as you can see this is basically the title the header the table header in here and these are the individual values that you can provide down here so if you want to have more of these I'm just gonna copy this table row multiple times like this and boom there we go we have more so again this is connects kind of like the title and this is the list that you have down here with the names and with the last names and with the age well ages mom that's kind of weird so we can change that to you how old is she Oh mom I don't know 23:53 23 goodness I am 25 i believe and you are 23 21 am i guessing correct me now okay so this is tables very very simple if you want to have another column you just add another one in here like this and you have another column and if you want to have another value you can add it like that and then we can modify this to data serve or something and there we go it's very simple I wouldn't worry too much about it it's nothing too complicated if you ever need it though and it's not that difficult to create and later on we can also style this in CSS if we really want you but that again is just it's gonna be a very very simple process so those are tables in a nutshell let's cover classes and ID's because these are so important and you're gonna see that you're gonna use it Diaz I am speaking of that language and we're gonna use these across every every website whenever you start building your own projects you're gonna use these constantly they're very very important so what I want to show you is hey maybe we have some elements on the screen maybe we have a h1 here that maybe might be our logo of our website and then we might have an article here let's do a hates you article title like this and then we might have some paragraphs and we can actually generate random text here by writing lorem and typing a number if I want 30 characters I can type 30 and hit tab and as you can see that generates us some random text here and Google Chrome is like they wanna translate now I don't want to translate this so what we can do is we can copy these multiple times you can kind of imagine like we have a blog or something on our web site okay a small little blog okay now what we're gonna write to CSS you might want to style these in certain ways but right now what happens if if we might have some something some paragraph here that's totally unrelated maybe this is this is some text that has nothing to do with the articles well here is where classes and ID's are gonna help us it class and an IB is basically a selector and it allows us to select certain parts of our HTML so later on in our CSS and in our JavaScript we can manipulate and style in different ways so we saw the ID before and our input and what an ID is is basically a unique identifier as you can see it's a unique identifier of a particular HTML element so here a great example is the logo here this can be an ID and the reason why it's special is because an ID cannot have the same name you can only one you can have multiple IDs but the name can needs to be unique you cannot have another each one here with logo ok that's not good you only can have one but in classes you can have the same name very easily and let's take a look on how we can add a class we just write class so it can work the same way and we can just say something like article text and I'm gonna do it with like a small - between like this all right if this is very simple and clear to read and you you usually want to give names to your classes and ID's that resemble of basically what the HTML element does so what is this well it's the article text so that's what I'm gonna name it and also separated by a small dash here just makes everything clear and very breathable okay so that's the difference between the two this is unique you can only have one of these and again a great example is maybe a logo on your website that is probably only one so it's very unique so you would name it logo and here classes we can have the same name added multiple times so I can have it across all of these different paragraphs so later on you can imagine that we can select this class by the name article text and we can style only these specifically and the difference is that it's not gonna affect this right at the ones that don't have this specific class so what we're gonna do is select this class and it's only gonna style the clinton the classes or the paragraphs that have the specific class that's kind of a tongue twister there you go make it I'm not sure if that made any sense but again because we're gonna see later on in CSS if you just select our P tags and you want to style them it's gonna affect everything that you have all the P tags in your HTML however with classes and ID's you can select them by the name that you provide and here okay and we're gonna also see some differences with classes and ID's when we arrive to CSS because there's like a specificity going on which is more important in which but that's all you have to remember for now logos if you have something unique on your website and you want to give it a name so later on you can style it in your CSS and JavaScript then you can use an ID as long as the name is completely unique when you have multiple things or less important things or things that you want to name the same then you can use classes for that also very quickly the the character needs to be at least one character along okay and you also cannot have spaces or anything like that make sure you negate any spaces don't do something like this because what you can also have is two classes on one element you can have article text and maybe article text active alright so these are two separate classes here alright that's the difference so we can maybe style this in one way and we can style the active in another way if we want okay so without confusing you too much I'm gonna leave you to it like this and I promise it's gonna make way more sense when we get to CSS because right now we're just naming these for no reason and nothing's happening okay so one problem that we might be facing is let's say we want to create a website so we add our h1 here we this is this can be our logo and then we have our UL with our lists maybe this is our contact so this is our navigation so let's say let's say home here let's say contact projects and I don't know maybe we have a sign up or something sign up okay and then let's say we have another section here that we want to write about ourselves so we can add h2 this is us and then yet we might have a paragraph here as well form 20 and then we might want to add some images below here so image and we might have multiple images like this so what's the problem with this the problem with this is that everything is kind of chaotic and everything just kind of flows here together there are no clear distinct sections between our header here or our navigation or our paragraph here or the image gallery that we have down here below so we have a HTML elements called div which is mainly used as a wrapper to kind of organize everything together for you and this is also going to help us tremendously in our CSS so what you can do is you can grab all the necessary things that you want inside a div so maybe this is gonna be an image gallery so we rather than having them floating in space you can wrap them inside a div like this and now everything is wrapped inside this div so maybe we can add a clasp to this and we can call it gallery so now in our CSS we can just grab this gallery and position it and modify it the way we want but it's way easier to do it like this and everything is organized then just have everything floating out here on the screen now one thing that we're gonna get into in just a bit is called the new html5 semantic elements which are very important because the difference the the thing with these divs is that they're they're non semantics okay they don't actually have a special meaning at all as you can see it even says it to us element has no special meaning it just represents its children it can be used with a class Lang and title to group consecutive elements together so it has no meaning just as we had span the port this is also called a non semantic element it doesn't actually tell us anything about this Fujii adhere okay however a semantic element just kind of give it give you a good example for you is something like a form this also acts as a wrapper to our input elements like this but this is some this has meaning to it rather than heed if it doesn't say anything to us but a form is a clear semantic element that has a clear purpose and what we want to do is we want to replace these empty things with specific semantic elements that have a purpose so even this thing this h1 here should be like our header so we could drop this in a div like this and we can wrap actually everything here the whole thing until here so this can be maybe our class of Heather and this UL thing can be our navigation right so let's do another and here's a quick shortcut also to create a class very quickly with a div you just add a dot and you give it a name nav and the hip tab and that's automatically gonna generate you a div with the class of nav so I'm gonna wrap this everything in here together and there we go that's kind of the gist of it but then again this is kind of problematic because it doesn't actually have any semantic meaning to it so with html5 and the recent years we got some new elements that perfectly describe what what we have on the screen so rather than wrapping everything in these empty divs that don't mean nothing we have these semantic elements so let me show you rather than naming this div I'm gonna get rid of the header I can just name it Heather there we go and as you can see you also get a small description it says the header represents introductory content for its nearest ancestors okay so a element a header typically contains a group of introductory or navigation aids so it doesn't actually describe any of your content that you're gonna have on the page later on if you have a section with some images maybe you have a blog post and things of that sort you don't want that in the header it's just kind of a introductory thing that's gonna help you with navigating and things of that sort so we have our header here and good thing to have is our logo so there we go we have our logo which is a haitch one so it's very important it's a big heading and rather than naming this a class of nav what we can do is replace this with nav as well so this perfectly describes as you can see represents a section of the page that links to other pages or parts within the page so it's specifically made for navigating okay perfect so now we are using the correct semantic HTML elements so let me quickly show you a part of the page like this one that work eventually going to build out so we have this part here and maybe I want to group it together so rather than making one big tip here we can create a HTML element called section and a section is usually used just to group together some content typically with a headache all right so it just says section is a thematic grouping of some content okay so what we can do is we can write section like this and here maybe we can have a h2 that's gonna say here is my image gallery like this okay so that would be a section and in here we can have all of our images but typically we used images like this boom boom boom boom boom boom and there is nothing wrong with this there is absolutely nothing wrong with using images like this but recently there has been a new element added that's called figure and all a figure does it helps add some visual explanation to an image alright because there was no proper way of adding semantically adding a caption to an image but now you can do that you can do a figure like this and inside this figure you can add your image at any year we can also add something called a fig let me not make a mistake here it get fig caps and like this alright it's not working for some reason let's say faked on there we go figcaption now it appears so fake action elements represents a or a legend for the rest of the contents of the thick caption elements parents figure elements oh my goodness that's very long so we can add a fake caption like this and we can describe the image so just add a simple cache caption let's say major picture by dev head alright and this is gonna be different from the alt tag because this actually describes what the image is so maybe I have a picture with a mountain I don't like that okay so we can also use this figure to add captions and it's gonna be semantically good okay so section we use it to group in together a part or a section of our website and also figure that helps us add some semantics to our images with captions at the end of our website we also have the footer that typically gives some more information about your website or maybe some social links so we can use that as well at the bottom of the page and rather than again making the simple div with a class of footer we can just use a footer so let's rename this to footer like this and in here in a fitter typically you have the author of the document copyright information contact information social links and things of that sort so maybe created the website was created 2018 copyright whatever things of that sort and maybe you have some social links in here so maybe you can have a ul with an Li a alright so we had an anchor tag and we have some a link to my Twitter comm slash whatever we have and this says here Twitter alright so this is a footer we're gonna add this later on to all of our websites as well but just more information about social links again and um contains just information about the author or about the website okay there's two more I want to cover and I was quickly google searching here and I didn't find anything that looks remotely decent but there is one called a side so let's go up here and you write it exactly like this a side and this typically can I open this image alright this a side is this part of the website okay as you can see down here and all it does is it acts kind of like a sidebar okay it has content that is typically used in a sidebar and all you have to know is that the sidebar should have content that is related to the surrounding content so this so this can act like maybe you have a book here or something and then you have an a site with all the chapters that you can select so you can click through the chapters that can be a perfect a site but we have an article and that can look similar to a section we might have a heading here as well my little book and we might have some paragraphs as well and maybe some images too so what's the difference between this and this well a section is well imagine like we only have this section on our page okay so this section only well this doesn't tell us too much it doesn't really make any sense right but if you have multiple sections and you can see all of it then it makes more sense right you need to have the general scope of the website however an article needs to make sense on its own so you can imagine it as you can read this whole thing in here and and you get the context it makes perfect sense you can imagine it as being like a blog post or an article right you can breathe an article you don't need to know anything else about the website and it's gonna make perfect sense lastly what I want to cover is the HTML element called main and main is used only once in our document and it covers basically your main content so not navigation links not anything else so basically for example on this web page the main content would be from here all the way here alright the header and the heading and the navigations and footer that we're gonna add eventually down here has nothing to do with the main content of our website so here what I would do is I would have my header ok that's fine and then we have our nav which is fine and these sections and articles and everything else we can wrap it once in main because this is the main content of the website so let's go all the way to here and wrap everything up okay and actually I'm going to take this article and cut it out here and add it to these sections so maybe I have multiple articles like this alright perfect so let's take a look at this again we have our header with our logo in navigation we have our main which holds the main content of our website and then we can have a section that holds all all the articles we might have another section that has an image gallery of some sort and we can add a class of gallery now just to make it clear that we might still need divs just because we had these html5 semantic elements doesn't mean that we are not gonna use this because in certain cases you might want to groups specific things together in some way so in this gallery we might have a title are you heading so we can say these are my images and I might want to group some things in specific way so maybe I want to group these two images like this and maybe I have two more so I want to group these in different ways than this I want to maybe manipulate these styling and everything different from these so what you could do is you can add two tips around these so let me just make one called let's say row one alright and group this and row two or maybe I wanted these to be styled differently maybe I want these to have a black background so I'm gonna name these black and maybe I want to have this on a red background so I'm gonna name these red so I'm grouping these together just for styling per not really for semantic purposes so that are still important and we're gonna use them a lot but for these big main sections you should use these html5 semantic elements that they provide us so there we go these are the html5 semantics and don't worry if you don't get them straight from the start and you don't remember all these work and then we're gonna practice when we're gonna build projects and we're gonna reuse them and it's gonna make more and more sense but don't worry if you don't get them at the first try and you don't know where to place things because even these days people are still debating what is semantically correct and where they should put what so so so don't worry too much about it but what I want to clarify is that we can also reuse these so headers are actually you can use it more times so maybe in an article you can wrap your introductory elements inside of a header so maybe the title here it can be wrapped inside of a header and that's perfectly fine and you can do that header and maybe we can also add a subtitle and here maybe with a header tree so we can say this is a book about love or something like that and then you can have your text and your the rest of your content so you can still use headers just to give information about the title of of your article and here and also we saw that we can reuse articles as well we can reuse sections as well those figures that we saw footer cannot you only have one footer usually and main can be only used once as well to represent the main content of your website okay but we're gonna get more practice with this okay I'm not gonna go to - you're too deep into this and yeah let's continue let's keep going and soon the fun will begin hey congratulations you have reached the end of the first section we have finished HTML and we can start with CSS and this is where things are gonna get fun in just a bit so the last thing I really want to cover is HTML entities and this one's very simple it's all it is is basically characters that you might not have on the keyboard that you want to add in your HTML code and also certain characters that might break your HTML code if you add it so for example on this HTML entities title I want to add a lesser than sign at the end okay just maybe I just want to add it for some reason well if I do that here it's gonna break the code because this is reserved as a tag right this is how we create tags and the the HTML is gonna think that oh we're trying to add an under attack here and it's not complete that's well that's why we're getting that red underline so we cannot do that we cannot add this tag without messing up our HTML code so what do we do we use HTML entity character ISM and you can find this you can look it up online because there's certain codes that you need to adhere to add those characters so I'm gonna show you one here is the character for the lesser than sign it looks like this a hand symbol and then you have LT and if I save this as you can see it appears on the screen so if you want to look for these specifically you can just search up a huge huge list of HTML entities and you can just copy and paste them you don't need to please don't remember these because there are a lot of them and there's really no point to it so a lot of them can start with and symbol so let me show you so if we I go here we can do the + symbol I'm not sure if it gives you some kind of auto correction actually look at this all you have to do is add the + symbol and then hold ctrl space and when you do that as you can see it kind of gives you this short description actually some of them during being clear I believe only if I click on it so yeah okay so if you go down with your arrow then it displays all the characters each of them what they mean so there we go so maybe you can go through up them like this but I still don't recommend maybe I want to add a copyright symbol that one is actually very simple you can just say copy like this and save and there we go we have our copyright symbol so very simple these are HTML entities if you ever find yourself in need of using a character and it might break your your HTML code then search up hitch the amount entities or special characters like the copyright sign that you might use in the web site or maybe euro or pound and things of that sort if you don't have that on your keyboard search of the code for the HTML entity on that specific one and you should be good ok that's it let's have some fun now let's start with CSS it's gonna be awesome ok so we have successfully passed through the boring stuff as some people might say because hey we just have text on the screen that's not exciting to anyone maybe some old people but let's not say that so in the next section we're actually going to take a look on how we can style things how we can create layouts how we can make things look pretty and this is where web development starts getting fun so let's get going we have finally arrived to CSS the exciting part of this course CSS is just a large monstrosity of a technology you can do so many crazy things with CSS you can start styling some people even created animations like full-on cartoons with CSS or like 3d looking objects faking 3d models and just a bunch of crazy stuff but let's get started very simple for now super simple just tiling this red h1 that we have here so before we start I actually want to show you a few ways we can connect our CSS 2 to our HTML so there's 3 ways you can start styling your EML so first of all what I want to do is actually get rid of this contact and just everything else I don't want your message windows goodbye okay so the first method is to directly style the element using an attribute so I can go directly to the element and style it here so the way you do that is you add an attribute of style like this and if you hit Enter you can choose from all of these different styles the one we're gonna look at is color so let's do this color and let's choose one here crimson why not so as you can see the syntax kind of looks like this you say color then you have a colon then you give it the name and then you do a semicolon and that's it if we hit save boom there we go we have our red color yay awesome okay so is this a good method to do it not really there's two problems with it I would say it kind of blows your HTML it adds unnecessary things and here and it just makes it harder for you to read so I wouldn't really recommend this method and also if you want to style multiple elements you would have to add the style tag to all of them and it just makes it a bit more cumbersome so we are not gonna do that let's get rid of it like this perfect the second way you can do is you can go all the way down here and you can add a style tag like this and you can hit tab okay and in this style tag you can start styling your CSS so I'm gonna show you a quick way we can select it but I'm gonna cover this in a later video here you can do something like this color red alright hit save and as you can see we have two color red this is a bit of a better way just because you're not really adding anything on top of the HTML elements but it's still not a super nice way because we're still adding both HTML and CSS in the same file so it can get quite large after a while and it's just not as nice so the best way is to remove everything and just just keep your HTML here nothing else you just have your HTML in here and we specifically create another file for that typically let's go here you're gonna see a file named style dot CSS that's what people most commonly use so let's name it like that okay so style dot CSS and I've actually kind of covered this and it's a bit of a spoiler but we kind of did it the same way with the link here so the icon all we have to do is literally just come here and ahead and say a link hit tab and the relationship here is gonna be style sheet so we clarify what kind of file we want to attach you're in the header and the head my apologies not header and and the H ref is just gonna wing it to the file so I can say slash style dot CSS and literally that's it so simple so let's move on to the next video and we're gonna see how we can mess around and make this fun next up I want to kind of show you how we can select multiple things on this page I want to show you these syntax and the way these selectors work so let's get started and we are gonna keep this h1 for now but we're gonna also add a few different elements I want to add ap tag here it's gonna be some random text like this actually that's let's just keep it short here I don't need anything too crazy actually let's just have each training because that's a bit easier to see this is gonna say mom is cooking the good stuff like that and I also want to duplicate this a few times because I want to show you a few things so we have this three more times and let's also add maybe an anchor tag here if I add this this hold on let me change my language again if I add this hash tag here it just basically means that this link is not taking me anywhere so here I'm just gonna say this is a MT link okay I just want to have a few things here so we can start styling okay I'm gonna add a class to this I'm gonna say let's name it first title like this okay and on the anchor tag I want to say ID we're gonna throw an ID on this and the ID on this is gonna be youtube link like this okay we're gonna hit save so when we go to CSS here all we have to do to select something is write the name of the element so that's one way we can do it h3 alright so we write h3 the name of the element we want to pick and then we do these curly braces okay the squiggly wormy curly brace I sometimes forget in case I say it squiggly worms that just means curly braces okay so we just open it up like this and all these styles that we add will be in here so everything that I want to add to this hates tree in the center tree will be inside here so let's do the color it cuz we that the color and we can choose a color color like this if we want and save and as you can see here the syntax is kind of like the same that we did inside here and when we styled it with the attribute is just you say color or the name of the property you want to attach and then you do call on you say the name and then you can put a semicolon okay so now we can add more things in here if we want now you don't necessarily need these names you can also color pick choose one with RGB it likes like this so vs code has this awesome thing so that's very cool let's go down here something that we can see a bit easier maybe a bit darker we can use RGB and we can also use hex like this I don't know what this hex means but it's probably not the color but anyway let's get rid of that so as you can see we can add it like this so when we use it like this we just say h3 well hmmm all the heat trees on our page are gonna get this style so as you can see every time here gets the style alright but what if I want to do something specific so maybe I want this huge tree here the first one well we can do that by just using the class so I can say first title alright I'm targeting directly this elements this is the only thing I want to style so rather than doing it like this I can just get that class and by the way you can get classes in your CSS because you just add a dot okay just he dot and then you say first title I believe it was and then the same syntax applied with the curly worms and you just write your color color red hit save and I'll take a look only the first one gets changed so when you're applying it like that when you are getting one specific element because this is the only one that has a class on top of it well this is the only one that's gonna get it okay so this is how these syntax works let's also check out the one with the ID and the way you can select an ID is by adding this hash tag okay and by doing this hash tag you can just do youtube link again and that's gonna work just fine so we can change the color of this to black because the default is gonna be that bluish color so there we go everything works fine in the next video we're gonna get more into more specifically into the specificity how we can select specific elements what we can do with specific elements the importance of class and ID how does it prioritize what style it's gonna get and things of that sort so this is just kind of the syntax on how you can select elements you have three so you have selecting the element directly you can do it with a class or this is how it looks like with the ID okay so let's get into specificity and some more tips and tricks okay so before I get into the specificity of like what's more important class or the normal selector or with ID like how CSS know what to apply where before we get into it I can I want to show you a few selectors that are very commonly used so I added a bit of text here I just added one h1 a paragraph here these are not contained in anything okay they're just general here this is just for example purposes we have a section here here I did add a h1 and a P tag then we have a section here that has a class on it and then a h1 with a ul and an Li okay so the first one we saw is just selecting h1 like this now the problem with this is that sometimes we just want to style one h1 alright maybe just this one but if we just select it generally like this we just say h1 then basically what CSS is gonna be like as oh okay I'm gonna look at all the H ones on your page so it's gonna look at everything it's gonna analyze it up there's a h1 okay so I'm gonna style that hey this h1 and this h1 okay so if we have a color of red here I don't like red I want cornflakes blue oh it's cornflower okay nevermind so it just Styles all the H ones okay this is a very very general tso selector sometimes you might want to do this but a lot of times you might want something specific these are generally good again when you want to style all d H ones in one specific way that can work or maybe you want your paragraphs to look in one specific way so all of them then then this is fine the general selector can be very good other times you want to do something more specific so how can I select this if I just want this to be selected on its own well I can either add a class on it or I can add an ID on it okay depending how important and unique this is if it's something very unique like a logo then I'm gonna add an ID if it's something more basic then I can add a class if I just want to select it for the sake of selecting and and styling it but sometimes you might have one here and like in this section and this section might also has have might have a class on it I apologize but but not necessarily but for this one let's just add a class of this is just a random section okay let's name it a random section that we might have on the page sometimes when you might just have one here and you want to select it you can actually access that with the section so take a look I can actually chain together multiple words here I can say I want to get that random section and in that random section I want to style the H ones okay so I just write the class and h1 okay so the way CSS looks at this is okay let me get all the H ones it looks at all the H ones and then it's gonna be like okay but only the H ones in the random class so now if we add a color to this let's do dark magenta then it's only gonna style that one as you can see only this one gets styled because it takes a look at the random class and only the H ones in the random class now obviously if you have more H ones in this random class it is gonna apply to it sometimes you might want that sometimes you might not it kind of depends sometimes you might have this wrapped around these like this to avoid running into that issue and then you might have multiple H ones here then you would select the div and the h1 or you might have a class specifically added to this so they in Title VII or something and then you could select main title h1 so it kind of depends on how your H your HTML looks like so you're gonna get most of the experience out of this when we're actually building out some projects okay but those are a few ones another selector that I want to show you and that is the star selector and all this does is it basically selects everything on your page I'm going to show you a new property here which is called font - sighs this just changes the font size of everything that you have on the page so if I go something like 20 here 20 pixels it's gonna change every element to 20 pixels so it looks at everything h1b section I don't care I'm changing everything so this is the star selector this is greatly used if you maybe want to get rid of some basic styling that is usually provided on elements so as you can see these spaces that the h1 has and the paragraphs and things of that sort sometimes you might want to just get rid of everything because every browser can behaves differently so what you would do is you would remove all these pieces and everything and then you would add it on your own where you want to just to have a bit more control so this is this can be used greatly and it is used actually in almost all projects let me show you two more selectors that you might encounter one is maybe sometimes you want to target on this h1 I added the class of my list sometimes you want to target something that's below it so in this case if maybe I have the h1 selected I can forget something below it like this ul the way I can target something below is by adding a plus symbol so I can get the my list I can get that h1 and if I add a plus I can select that ul below it okay and then here let's introduce a new one maybe I want to get rid of the style on that those dots on the unordered list we can add a list style oops and we can say none and hit save and as you can see that gets rid of that so anytime you want to target something below you can have the element above selected and you can target that would be plus in this case h1 you can you need to add h1 plus B and it would select this P tag okay other way we can select elements is maybe I have this list here and maybe I don't have a class on it or anything and maybe I have enough learn another list out here maybe I just have some list laying here I mean normally you wouldn't have this anyway probably just list lane here but you might have it on a different side of your page so what we can do is I can select the lists that are specific to a UL okay so I know that just want to select the listed belong specifically to a ul so what we can do is we can say Li excuse me we can say ul that has list in it like this and if I change the color of this tooth let's do what shall we do focus yeah hit save as you can see it only changes the allies that belong to a parent that's the UL so whatever is the parents of the big element that holds all of these small allies are the only elements that are going to be applied to you so like this now again this you might probably also have it in a ul to be semantically correct so this wouldn't work but what you might have is a class on top here so let's say this is my navigation or something nav links like this you can also add a class here so you can combine these with classes ID so everything I'm showing you here you can add classes and ID's as well all of these symbols so here I cannot I can get rid of this UL and I just say that hey every li that belongs to this specific class to this nav links like this and as you can see now this only changes but make sure when you're using this symbol it only applies to when your parent is nav links so only the allies that have a parent of nav links so make sure you just look outside so here are the mavs links oh what's my parent well the thing that wraps me which is nav links in this case oh okay what is my parent well just this ul it doesn't have that class of nav links so obviously it's not gonna be applied and the other case when we didn't have the class well it was the same oh the parent is tul perfect I'm gonna apply the styles oh the parent is ul I'm gonna apply the styles but here it's a bit more specific but sometimes this is kind of redundant and you might not want to do this since you have a class already already on top of it you can just get this by saying nav links Li and you're gonna be just as fine so there's different ways of selecting elements and there's no one specific right way of doing it there you have a lot of choices here that you can mess around so yeah it's just about messing around with it and trying to figure out what would be the best choice without even like over blowing and adding a class to everything right sometimes it's enough to just add it to a parent element and you can drill down using the selectors by saying elements using the element and then or maybe having gate or any random class and then saying li sometimes that might be fine and it might be just enough to do it okay but technically you can chain together as many as you want imagine that you we can have an li and then we might have an A in here so an anchor tag that's gonna link us somewhere let me just drop this here and real quick we're gonna add a hash tag to quickly get rid I mean switch the keyboard I mean there we go so you might have a anchor tag here so to access that you would need to drill down you will need to go from ul to Li to a so we can do that like this let's select the class I forgot my memory is very short today nav links so we can get that nav links like this Li a so this works just as fine to color black okay hit save boom pick out rid of it right but sometimes again it's this is if you want to go all the way down and be very specific if you have only this anchor tag here you can even get rid of this Li because there's no real reason we should add this Li in here because what the specificity means is what the selector means is I should go to the nav links which is here and then take a look inside the Allies modify only the anchor tags because if I have another anchor tag in here let's say hello if we have another anchor tag and here as you can see it doesn't modify it why because I selected it specifically I said nav links only the a tags inside the ally okay so by doing that only this one is gonna be black and this one stays blue if I want both of these blue then I would have to get rid of this Li so oh there we go now both are dark perfect so those are if he wants we can also select elements by by their number by their where they are positioned inside he group here so I'm gonna clean this up a bit to make this a bit more simple to read so let's get rid of everything I'm just gonna get a ul here and I'm gonna add a few allies hello hello and then we're gonna duplicate these few or more times okay so the way we can do this I'm gonna add a class of links in here we can get rid of everything we can select those links like this again if we add a style here here color red it's basically gonna apply everything so if you add just a color of red to this or something it's gonna apply the color red to everything that you have inside here okay but maybe I want to do something specifically to the only one so what we can do is with this links so the class the big UL that we have we can select a specific number and here right so on the position that's what I'm trying to say so this would be a 1 2 3 4 5 right the numbers of the elements and your positions inside this um so the way we can do that if I want to select one specific one we can say links like this and then we can add a colon like this and say end and to the child alright and here we can provide the number if I want the first element inside this links I can say 1 and then I can say color red I don't like this red I need to change it that's so awful blue god bless okay there we go so if I say ends child 1 so if I say ends child 1 as you can see everything gets turned into blue well why is that happening well we need to add specifically what element we want to target because right now we just say hey the lengths and child 1 which is only 1 we only have one class of lengths so what I need to say here is in the links the Li the first li with the ends child ok so let me change the color of this because it's I get hard to see so as you can see I need to write the class that we want to take a look at and then the Li and which Li and this list of groups while the first one so and child 1 if I want to third one I just write three and let me make this clear why that happen so if I go back here this happened as you can see nothing applies now but if I say one it applies and the reason why this is happening is because we only have one class of links so it takes a look here and adds that color to everything basically that we have in this links but if if we have two of these then take a look if I do to it only applies to this one if I do one it only applies to this class so we strictly looked at the classes and the links class when it came to the end child and not the ally or something else more specific okay so that's why when we added one it just applied the color to the whole Tang because it was like okay well I just apply you can read it like this links color blue that's basically what happened because we had one so this had no effect on it but if we have multiple ones like this like one and two links then you can specifically select one or two of these all right so let's get rid of this we're only going to keep this one and let's change this back to Li and we are specifically selecting the second one okay here is where we are going to understand CSS way more how it words my throat hurts a bit so I apologize if if I if you're not gonna hear me in a bit but I need to take a break a bit after this one but your noggin I know that because yeah you can just watch the next video and it's like three days past okay anyways let's move on so I kept this as simple as possible I just have a h1 here and ap tag okay so take a look if I select that h1 and I change that color to coral okay we have that nice coral of color what happens when we write h1 again here and we say color cornflower blue well the color changes to cornflower blue why is this happening well CSS works from up to down okay it reads the first one it says okay each one should be coral and then goes goes goes and gets to h1 again and says okay color should be cornflower blue so the last style always gets applied okay if we select the same thing the one further down is the one gonna be applied so if I write h1 again and change this again it's gonna change cyan okay so it's cyan now but if I move this up here well cornflake is gonna court like you think roughly cornflower blue is gonna be the one that's gonna be applied to okay however okay so we know that it goes from up to down and the last one gets selected okay what happens if I add a clasp to this I'm gonna say class of Heather okay and then we go in here and I just write Heather and we change the color to cornflower again like this save okay that's blue that's what we expected right because we read it from up to down but what happens if I move this up here well as it gonna change to Coral no it's still cornflower blue why is this happening well the reason why this is happening is because the class has a bigger priority over the element selector a good way you can see this is just by hovering over the element and you're gonna see that the selector specificity zero zero one whereas this one is zero one zero so the one further on the left is gonna be more and more important okay so this is 0 0 1 this is 0 1 0 so what is 1 0 0 well 1 0 0 is an ID that's the most valuable one because it's the most unique one so if I add an ID to this head I'm just gonna say head like this if I say head and I apply a color of dark red now this is gonna be the most important one it doesn't matter where this is it can stay here it can stay here it can stay here it doesn't matter this is the least important one zero zero one this is secondary zero one zero and this is the most important one one zero zero however this is mostly what you are gonna encounter these three and here but there are certain cases where you might have hey style on the element if you have a style on this element so I'm gonna say style color and I'm just gonna say black and hit enter this you can imagine it as this having a greater priority over everything that you have here in CSS okay it's more important than everything you have whether it's h1 whether it's a class whether it's an ID as soon as you have the style directly applied to the h1 that's gonna win however there is one more oh my goodness what did they do there they smoked something probably but there's one more if if you have no idea how to change the style and you cannot find in your code what's happening what you can do on whichever elements you want you can add a exclamation point important like this and this is basically gonna override everything this is like the last solution this is this is not good to do you don't want to add this important usually almost never but this overrides everything so it doesn't matter this is kind of like a fifth level of specificity that you can add important but generally what you're gonna be sticking to is h1 class and and this one okay you're you're never gonna use this important okay so let's remove at this you you're better off trying to figure out why why this importance is not working right because the problem here is if later on let's say later on we're gonna work on something and I won't change something about that h1 I want to change the color to maybe a dark slate blue and it's not working okay I'm gonna select it like this with a header not working so you're gonna mess around and try all of these different selectors and you cannot get this to change so again to overwrite this again you're gonna have to say in for it's in here so it's gonna overwrite the one on top because again we are reading it from top to bottom so it gets really messy so try to ignore this try to ignore styling it was important and also ignore styling it and the h1 here the only ones you should be sticking to our normal selector like this class and ID and that's gonna make everything super clear on which is how important okay even if you have multiple classes the one that's below is still the one that's gonna apply however we can also select elements I'm gonna show you a new one that we haven't covered so far what if I do h1 active like this so basically I want to select only the classes that rh1 so now if I say color the pink well that's a new one in deep pink it changes and I can even move it up here why is that well if we take a look again zero one zero the one in the middle is the class so that's get that gets one point however here we also have the element so zero one one right the first zero being ID this the second zero being the class and the third one being the element so here we define specifically that I want to select I want to select the h1 specifically that have a class of active so it's a bit more specific than just throwing out a random class because hey we can have this as active class technically on anything we want I can add the active on here plus active ok so I can have the same thing but that doesn't mean that I want to apply that deep end to it so this is more specific okay margins and padding's what are these things and why are they so important well we're gonna use these a ton and so I really want to cover this so you understand everything okay so we talked about how the browser basically put some default styles already on our elements and we saw that there's this big space with the header and having one here so look at the space between this and the button and the way we can look at that is if we tap f12 in the browser and then if we go over to this tool here click it and if we hover over or optionally you can just go down here to the elements and if I hover over you're gonna see that there's the element which has a blue color to it and then there's an orange color that has that space so that orange color is actually the margin okay and as you can see it just gives space between the elements and if we go down to the button this is kind of hard to see so let me zoom in you're gonna see that there is a a green one as well besides the the orange one so what is that that's weird all right well let's see the green one is depending but why how is that any different than the margin okay let's take a look at the difference so I'm gonna zoom a bit back out but I'm still gonna be zoomed in so you guys can see okay so here it is let's actually see how we can add a margin and padding so let's just get the button here okay and if I add a margin I just write margin and I'm gonna say 100 pixels so that's gonna add 100 pixels of margin hit save as you can see it actually applies the margin everywhere top left bottom and right okay so if you just say it like this margin 100 that's gonna add space up left bottom and right everywhere all right if we change this 50 you can see that as well if we check here you're gonna see that that orange grew a ton okay so that's cool but what happens if we add a padding so if I have a padding of 50 pixels that's gonna grow the element but it's gonna be the inner space as you can see so if we take a look again as you can see the element itself grew okay so that's the difference between padding and margin the margin is gonna be on the outside of the element and the padding is gonna be on the inside of the element now if we do this on the h1 it might be hard to see as you can see it kind of looks the same as margin so if I change this to margin two it looks identical however this gets changed a bit as soon as we start adding a background color so take a look on the padding if I add a background color of crimson as you can see this is the size of the element and if we click on this button you're going to see that if I hover over the h1 look how large does hate one God okay this is gonna be the inside space however if I just be margin then the element itself is gonna stay the same size and it's just gonna add these facing outside okay so let's take a look and there we go look at that that just gives the empty space so that's all you have to remember margin is gonna add the space outside and the padding is gonna be on the inside okay that's the only difference now let's see different ways that we can add padding's and margins I apologize so this is the first way we saw if we just add 50 pixels like this and that's gonna apply it everywhere on on each side however if I add another value here let's actually do this on the button because it's gonna be a bit easier to see button hit save and I'm gonna what I'm gonna do is change this to padding just because it's gonna be a bit easier to visualize okay so we have 50 50 50 50 if I add another value here and let's see 20 pixels then what's gonna happen is as soon as you have two values the first value is gonna be applied to top and bottom and the second value is gonna be applied to left and right so here we have 50 on top 50 on bottom and here we have 20 on left and 20 on right if I want to add a custom on all four then I can add two more values I can see ten pixels and five pixels so what happens here is we count clockwise from up here all the way around so the first 150 pixels is going to be top the second 120 pixels is gonna be right so there's many pixel space here and the third one is gonna be 10 pixels here on the bottom and 5 pixels here on the left so if I say zero pixels here there's not gonna be any additional space as you can see the button hits the corner perfectly there so you just count from top all the way around and that's how you can have it so this is actually a very simple way of doing it you need to wrap your head around it a bit you need to drink your coffee first in the morning and then it's gonna click with you more but there's an other there's another way you can do this is by actually typing it out like this padding top and then you can add 20 pixels or padding left and right and bottom and all the other ones you can type them out like this individually too but this is a bit more and then let me change this so it kind of matches the one up here 15 and then down here the left is gonna let's do right is 20 and then we have on the bottom we have 10 and then having left is gonna be 0 okay so just take a look this should technically overwrite this up here so if I remove this it's gonna be the same thing as you can see okay if I change this to hundreds now this is going to change but take a look at how much code we write here and how much code we write here so I highly recommend you to practice with this and in case you don't need a proper team maybe I just want to add 50 maybe I just want to have 50 top right I want zero and bottom I want zero I can just change these to see a row like this and it's still gonna work the same way as you can see oh never mind I messed something up so let's take a look again 50 top okay that's good alright so here it would be zero because we have zero here and your zero and that should work fine but in this case if we only have one then it's fine to just use padding top if you just only want to add it to one side but generally you're gonna see that you're gonna use a lot of either one value or with two values so either adding it everywhere or having top and bottom and left and right so this top bottom and now it's left and right okay so it's gonna take a bit of practice but it's okay because we're gonna get eight of it with these headings and these margins so as you can see again now if I just add have two values the first one's gonna be top and bottom 50 and on the left and right it's gonna be zero okay so it's not that complicated it's quite simple all you have to remember is that margins are gonna be on the outside of the element are gonna add spacing on the outside and padding's are gonna be added on the inside of the element okay perfect next up we are gonna use Bach the mountain we're gonna explain the box model to determine what's a box model well you will find out in the next episode so stay tuned okay let's cover the box model sound so fancy but it's not this is something that you might not use per se but it's it's very important to know about so holly box model is again I just have a tip here with a h2 ap and a button all a box model is if we hover if we grab this tool and we hover over all of these elements you're gonna see that you're inside a rectangle or some sort of box and even this even the P tag even the button has some sort of outline with like orange and different colors sometimes as you can see on this button if i zoom in it has even green and everything so what is that well if we take a look let's say on this text here is the box model the blue part of the box model is the element itself so the text in this case right padding it doesn't have any padding and neither does it have a border however it does have a margin so take a look okay let's take a look at the button the button has the border which is that yellow it has the green which is the padding and the blue which is C text so that's basically the mob box model all of these different properties bunched up together makes the box model the padding's the margins the borders and the element itself okay now how is this useful or why is this useful well it's just good to know about because let me oh you if I go to CSS and I just grab me live here and maybe I just want to add a background color or maybe I have multiple cards here so let me kind of duplicate these and a few times like this all right I'm gonna hit save and imagine like we have some sort of card system now we haven't talked about how we can position these elements kind of the way we want but we're gonna cover that in just a bit so let's just add a background color to this that's good nice I wanted something beautiful this is not gorgeous he bluish I loved it bluish colors and let's also add a color of white so we can kind of see the text inside there okay perfect so we have this okay now what if I add and change the width of this so maybe I just had a width of around let's do 300 pixels okay so it's this size perfect okay what happens if I add a padding to this so I want to add a padding of 20 pixels to this well oh okay hold on the thing grew the thing grew a lot and sometimes this can be problematic because we might add padding and margins and different places sometimes it might look good but the problem is that the amount of pixels that our original box had has changed so if we take a look on the dev now if we go over to the computed section here you're gonna see that our ality where where can we see the size basically what I'm trying to tell you is that look at this the size of the div grew so as you can see it's 340 by 163 pixels so that means that the padding that was added actually grew the element itself so now our whole box is way bigger than we intended and sometimes we might want to have some fixed amount of sizes for these things and this might cause a lot of problem because I might calculate something that should be around 300 pixels but if I add some padding to it it's gonna grow so as you can see if I'll make it something more dramatic for you if I add something like 50 here you're gonna see that it grows a lot and let me just add the top bottom actually like this let me have pixels here so as you can see if I increase the size it keeps growing a ton and I don't want that I just want to have this width precise here okay and we can also do this by take a look I'll give you another example maybe I Abbie they width of 100% like this okay perfect let me close this up but take a look if I add a padding of 20 pixels or actually we also have the margin look my my scrollbar appeared I don't want this to happen I might just want to add some padding so the text is not stuck there like this as you can see it's stuck there so I want to just have some padding but now the element grooves of course it's like a hundred percent plus twenty padding all right so that's why we can scroll this way so there is a good fix for this and I highly recommend you to do this what we're gonna do is we're gonna grab all elements and we're gonna remove all the basic stylings so the body has some styling on it with margins as you can see and the h1 as well so first of all I want to get rid of those issues by adding margin zero as you can see now we don't have those empty weird lines okay so that's step number one okay let's also add a margin 20 to this just so it's a bit more Spacey let's just do top margin top I'm gonna do 20 pixels okay all right there we go that's what I want to have okay we can still scroll because the padding affects it and now what I want to do is also remove additional padding's from all the elements just because the reason why I'm doing this is because I don't want the box model and the elements itself to control how I design my things I want to start from scratch and I want to add it myself but here's the property that's gonna change everything we're gonna say box sizing border box and as you can see now we cannot scroll anymore because everything that we add all the padding's all the borders that we add to our our elements now are going to be contained within so if we check right now as you can see the padding is gonna be on the inside just like that if I remove this take a look if I remove this then we can scroll again and that's not what we want but if we add this back now we cannot because take a look the element size stays the same so another way I can illustrate this is if I add a width of something very large so let's do a width of 300 pixels all right 300 pixels there we go I cannot see this but it's okay so let's take a look at the size of this if I close this up oh never mind I messed it up I didn't close this there we go now our element is 300 pixels long exactly how I want even with the padding it's not gonna be a problem but when I when I start removing this box I says you couldn't see it grew a bit and now it's 340 so that's a simple example that I wanted to show you that can mess it up like the scroll thing where you might add some padding and then you're like why can i scroll on my website or why is my CSS behaving the way it is it's because the Box sizing is set by default on content content box all right and this can give us trouble because it's gonna set the padding and everything out and the borders on the outside so I'll show you again I'll show you another property with border we can add a border of 3 pixels and the second property and it's gonna be solid and we're gonna say black ok so there we go and now let's increase the size by 10 so as you can see it keeps getting added on the inside there we go but if we go back to 5 pixels and we start removing this border box its save as start increasing this oh no oh okay that's too large let's do 50 oh look at that Oh No we are overflowing and everything is growing so that's basically border box just make sure whenever you are starting out your website or anything just add margin:0 padding:0 and add the head box sizing border box because it's gonna save you a ton of issues okay I promise you we are almost done with the boring stuff and and just it we are gonna experiment with some more fun things you can do in CSS such as adding images and backgrounds and creating some cool styles with some cool properties but there are a few essential things that we still have to get true unfortunately but it's gonna gratefully help you and make you understand what's really going on because you're gonna have some certain cases where you're gonna be confused and you're not sure why your CSS is behaving the way it is and these are some things that again we just have to go through and one of them is the sizes of pixels and M's and REMS so these units what are these units and how are they behaving so let me quickly show you an example here we have a section here I just gave it a class of text section because it has only a paragraph but I also created a div here with another paragraph okay so typically we've seen pixels and that's like most common pixels are everywhere when they get and the new iPhone gets announced they tell you how many pixels pixels per inch they have so everybody knows pixels so let's take that class and let me kind of show you something let's put the class here oops there we go okay so if I set the size a font size of this to 20 pixels well everything is gonna be 20 pixels so all the paragraphs are gonna have 20 pixels and we can take a look at that if we open up with f12 this developer tools and we click on one of these paragraphs as you can see here it says font size is what Texans okay I'm very cool now the interesting thing is I can go maybe inside this div and set this paragraph as well okay so we can say text section div so we can get this div and I can say font size are 30 pixels in here so that grows this to 30 pixels okay well cool as you can see okay well we have 30 metal here okay so what's the problem with this well there are a few problems with this even though this might seem super simple the problem is that accessibility wise this knot might be that ideal and I want to quickly show you this here even though I have an accessibility session coming up later and the course this pixel that is set here is fixed it can it it cannot be modified it's set in stone so maybe if a user wants to change the size of their font in the browser because they might not see your text very well maybe this text thing cannot see it very well well if they go to settings here and they want to change the font size which I'm not sure where it is it's here font size if I change this to small maybe well nothing changes very small oops very big as you can see nothing gets affected and that can be a problem and especially for people who use different font sizes and they might want to have some they might want to have the text very easily be easy to read I need one for speaking to because I cannot speak so accessibility wise pixels is not that great of an idea also it's not a great idea for responsive design because you have a fixed set of value here you have 20 and 30 so maybe if we go on mobile so if we go smaller like this we have to do some tricks to change each and every value to match a mobile screen font so you might have to modify this section and this action to get the results we want again and we're gonna get into that and later a bit when we cover media queries which basically just allows you to change all your elements based on the size of the screen so basically when you go to mobile you can change the font sizes you can change the styles the colors and everything else so pixels make it a bit tricky because you have to keep changing them because they are fixed so another alternative that we have is ends so MZ units are written like this let me quickly show you I mean let's get rid of everything I'm gonna say font size 1m alright hit save and by default that's gonna be 16 pixels and there is actually a secret little bastard here that we don't know but hTML sets the pixel size and HTML by the way is the root element of our website here so this one it gets set by default to a font size of 16 pixels okay we cannot see this but this is happening kind of behind the scenes and as you can see if I save it nothing really changes so I'm gonna comment this out and I didn't show you how you can comment things happen CSS so let me show you now you just basically add a slash and a star sign and everything you wrap inside this slash star sign and then star sign slash basically it doesn't get executed in your code okay so if I want to wrap this the code is not gonna work anymore take a look okay but this is actually the default so if I change this to something like 10 nothing happens okay so let's go back let's get rid of this all right so it's 16 pixels very cool so if I want something like 24 I can set it to 1.5 right and then we get 25 pixels there we go okay now the cool thing is if I do that calculation correct you do 16 times 1.5 you get excused myself excuse me all right okay we good we good it's 24 it's 24 okay so basically you multiply everything by the element that you have so the the parent element so m's basically take a look at the parent element but I want to show you where it gets a bit tricky if I go here and I want to say maybe I want to have a font size and I'm gonna say in 1.5 okay it's gonna be the same font size this one which is kind of useless to add to be honest because we already defined it up here but I just want to show you the difference okay so basically I'm going to add it to this B tanks and the div and this P tag if I add a 1.5 10 well why is this bigger now what M does is it takes a look at the parent element so it takes a look at the parent element and it multiplies it and then this parent element takes a look at its parent element and then multiplies it so take a look what happens we added 1.5 m to this and it's gonna be like okay I'm gonna multiply it by my parent element spawn signs so it's gonna take a look at these section and it's gonna be like oh you're 1.5 ok 1.5 times 1.5 times what's the parent of this element is the body and what's the body's parent it's HTML which has the default size of 16 so this is what is basically happening you add 16 times 1.5 because it looks at the root element and then down here it at 16 times 1.5 so the parent and then this element that we here okay now check this out this is kind of interesting what if we add a margin top to this div that's at 1m all right how is that calculated well let's look at the div as you can see the font size is 36 pixels and the margin top is 36 pixels but what happens if I change this again to something like 2m well then it's in 72 so now you have to say 16 times 1.5 times 1.5 times 2 all right so hopefully this is getting clearer you just keep adding more and more and you're duplicating more so now it takes into consideration this this and this times this alright so wherever you have to find a font size you're gonna have to keep multiplying and this can get quite crazy and as you can see if it makes things not fun okay I never use this by the way so you can catch a breath right now you can sit back and watch this enjoy it and knowing that you're almost never gonna use this but I want to make make it even weirder for you if you want to break this you can just add a font size if you set a pixel font size then it doesn't inherit it anymore okay but if we change this to a font size like this and then we add an EM unit so margin top as 2ms again now it's gonna inherit only this one we're not gonna be doing the multiplications anymore because if we set a big hole here it's gonna destroy that inheritance it's not gonna take a look any more at the parent div and the parent of the parent stiff so now it just looks at okay it's 20 pixel times 2 okay oh my goodness this is so confusing okay don't worry because we have a new unit here to the rescue we have something called random and the only difference between the ramp and the is that we are not gonna inherit from parents to parent to parent we are only gonna inherit from one single one which is the root parent which is this HTML element so when we set a REM it's only gonna take a look at this HTML font size okay so let me show you how this clears everything up so simply we can go to the text section and maybe I want this to have 16 pixels so I can set a font size of 1 R and if I hit enter we can take a look this heads this has 16 so if I want 24 I put 1.5 okay so now it's 24 okay but maybe on this one I want to change it to something bigger or maybe accidentally I put it the same size 1.5 Ram it doesn't matter because this one exclusively looks at the HTML and this one still exclusively looks at the HTML so only in the root we don't have to worry about taking the look where this thing is not nested where is that here is it there it doesn't matter you're always gonna know that whatever Ram you but here is always gonna be relative to the font size of the HTML which makes it actually super easy you know why because we can modify this HTML so if I remove this HTML I can set a fonts a specific font size here so that this brand calculation is gonna be easier because right now 1.5 Ram is kind of tricky to calculate right you have to say okay so what 16 times 1.5 so that can get a bit annoying so what we can do is set a percentage here which is sixty two point five I believe five percent like this which is gonna give us exactly one Ram is gonna be exactly 10 pixels as you can see here 1.5 is exactly we're gonna be six 15 pixels so this way we can style everything the way we want I can come here if I want this sixteen pixels I can just save 1.6 bream boom we have 16 maybe on this day I won 24 I can say 2.4 Ram boom everything is the way I want there is no weird things happening with inheritance nothing is going crazy and the best part is I still have my accessibility here so if I want to change the font size of this to something bigger like large it's gonna affect it it's gonna work perfectly fine very small as you can see things work perfectly and this is gonna be extremely easy to also make the text responsive so when we resize the screen we don't even have to add those media queries that we are going to see later on we can just mess around with these in a specific way again when we're gonna get to the media responsive website and we can make this responsive very easily okay so highly recommend highly recommend you to use REM highly recommend you to avoid pixels and ms/ms might come into play and even pixels but very rarely I really want you to put a heavy focus on using grams so just set your HTML font size to 16 62.5 and that way it's very easy to add the numbers here because one is gonna be 10 so 1.5 is gonna be 16 2.4 is gonna be 24 okay so those are REMS MSM pixels Wow can we can we do some fun stuff now I think the time has finally come for us to actually build out something nice for once so let's look at borders and we're gonna create a nice-looking button for once okay so by default if you're gonna put a button on the screen let's say sign up it's gonna look so ugly take a look at that what is that get it off my screen please that looks terrible okay so we're gonna take a look at a few properties that we can add to this to make it look very beautiful so we can get the button here like this and first of all what I want to do is make this a bit larger alright because right now it doesn't look that good okay so what we can do yes you can add maybe some padding and some margin to this so first of all I want to just add some margin so it's not stuck up there and the corner so let's do something like let's do 10 REMS okay and hit save all right so it's a bit kind of dare 20 okay there we go so we have the button position in there perfect so next what I want to do is add some padding to this because the button right now is kind of small so the way we can do that is we can see having and we can add a padding of let's experiment top and bottom I don't want it to be that high so I want to say to you wrap and on the left and right let's try for rim okay that looks that looks way better perfect let me zoom in actually a bit actually that's fine okay so there we go we have that and what I want to do is get rid of that background color because oh my goodness it's ugly so the way we can get rid of it is we can see background color and we can see none and as you can see that doesn't work so the one we actually need to use here is background and when we hit save it's gonna get rid of it perfect but we still have this ugly border on top so to remove that we can just save border and we can say none and that's gonna remove the border as well however if we want to have the border and we want to change it here what we can do is we can add a size to it so I can say 10.1 bram and I can say so this is the first property size the second is gonna be solid which we're gonna take a look at it in a bit and the third one is gonna be D color so I can say blue and hit save and as you can see we have it right there now let's change this blue color to something let's also increase this a bit like that and let's change this color we hover over it sometimes it doesn't want to work let's get a nicer blue color I like a purplish something like that but more vibrant that's add some color to this okay perfect so there we go okay so this is the size this is the color is this while solid makes the whole border full there are a few other ones here that we can experiment which is gonna be and the cool thing that you can do is sometimes just type like this and sometimes it can give you sometimes it cannot I believe when you first start typing like this solid let's see all right and then we have I believe it only gives you the colors unfortunately but there's one called dotted like this and as you can see that just adds thoughts to it there's also ones that add lines to it but generally to be honest you're rarely gonna use these I mean if you find some edge cases or you own or you want to add dots to your buttons or just border dots for some reason but it looks like something from the 90s so I'm just gonna keep it solid here and mostly you're probably gonna have solid borders anyways okay so we added a border of solid here okay next up what I want to do is I want to change the color of this text as well so we can see color and we can say we can actually just copy paste this color from up here save and there we go we can also adjust the font size a bit font size 1 Ram there we go oh that's gonna be 10 so let's do maybe two point four is that gonna be too long that's gonna be fine so there we go we have a nice-looking button going on here there's another property that I want to cover maybe you want to make these edges round a bit you don't want this to be so boxing so what we can do is add a border radius to this and by adding a border radius we can smooth this out and we can make it rounder so if I add something like 1 Ram that's gonna add 16 pixels of border radius to this 10 pixels I apologize we have this HTML thing here and that makes one Ram 10 pixels okay so there we go that makes it look way way nicer if you want to add specifically maybe to the top left or bottom left a border radius you can also do border and let's do you left top left radius alright so this is gonna be this one top left and you can add two around here so as you can see that's gonna make it even rounder for you there we go so you can do top left you can do top-right bottom-left bottom-right but this kind of adds it to all of it which mostly this is what you're gonna use anyway if you want to make this perfectly round what you can do is at 50% so 50% is gonna make it round now it's not round here because the element size also needs to be round so this kind of looks rectangular right now but what we need here is to have a perfect square for this to be round so if I just set a height of five R M here and a width of 5 r M I think we need a bit more that's too small so let's do 10 and 10 is that too small do 20 and 20 all right so there we go so if the element is way larger here and if we set the border radius to 50 then we are gonna get a perfect circle awesome so let's remove these for now and what I wanted to do is also show you something else so let's change this back I believe we had one REM and we can also change this button if we want to make it full we can add a background of the this color that we had up here so let's add this color up here but now the problem is that the text is okay we cannot see the text so we need to change this to white so there are two alright not to color to white alright so there's two different styles of buttons there for you if you want to experiment but yeah that's how you can create a simple nice-looking button let's take a look at display block and line and inline block so many of them alright what are these things so we have noticed there whenever we start adding like heavier for example so we can say that yeah had save we're gonna see that as soon as we hover over it it's gonna take up the full width of our page here interesting and the more interesting part is if we add another one and we're gonna say you know then this is gonna be propped underneath so some elements have a display type of block which basically means that they're gonna take up the whole space here on the full wet here and they're gonna have a line break so they're gonna drop the next element down the low okay now if we get this h1 that we did we can still add a height to it if we want we can do for example like two Rams to it and let's take a look really quickly let's also add a background color to this background light light gray there we go perfect so let's increase the size of this because it was too small 50 all right so we can add some height to it if we want that's perfectly fine but there are a few elements that act a bit differently so let me show you one if I add an anchor tag down here below and I'm gonna say link to my website all right it's same so there we have let's copy this and add it again let's see what happens then hmm that's strange the link is on the right why is this not on the bottom so there are a few elements that are displayed differently this is called displayed inline and what it means is that it doesn't do a line break and it doesn't take up more space than the element itself so if we add something else another inline element it's gonna be here right next to it and I can show you another one we can do it with an image as well that is and line so if we go back here I'll just drop in an image of this green leaves now I'm not sure if we go down here and I'm gonna add an image let's add the source of green leaved so okay this is here and you know what this is a bit still too large so I'm gonna change the size of it to height 100 pixels and whit why am i doing pixels let's do REMS let's do 10 REMS and width of 10 rims hit save all right so it's way smaller now okay take a look this one is here as well and if i duplicate this again as you can see this is still coming next to it now if it doesn't have any space anymore here it's probably gonna jump down so let's do it and let's add another one as you can see it jumps down because it just doesn't have any space okay let's remove it because I want to show you something else so that's the first thing the other interesting thing about these in Liza's let's take a look let's remove the image and add the anchor tag so I want to add a background to this of light gray okay what if I want to add some height to this let's add a height of 10 R M hit save and oh nothing happens all right let me try to add the width to this pendulum still nothing happened started um what does this sort of study oh my goodness well basically inline elements you you cannot add the height or width to them it just doesn't work it doesn't like it it doesn't like it okay what if we try to add some padding to them or some margin let's try a margin 3m okay margin works kind of in a weird way so when you add margins to inline elements only the left and the right property is gonna work it's not gonna add on top or on bottom okay so only the left and right so basically all you need to remember is that in line respects left and right margins and padding's but not top and bottom all right we cannot have a height or width that doesn't work it allows you to add other elements next to it and and that's kind of it okay now there is one last one a special one we can add display and by the way we can change these if we want take a look let me remove everything here like this and what I'm gonna do is add this play block to the apex look we just transform them to display block they take up the full width and they drop to a new line so there we go now I can I have a height to it I can see that we ran and now take a look if you wonder how you can align that to the center you can add the text align Center and it's gonna move it straight there 9 it's perfect if you wonder what else you can do you can do effects the line and you can move it to the end and start obviously is gonna move to these starts there are a few other ones but these are kind of the basic ones that we might use okay perfect so we moved it there we can also move this down a bit if we want we can add a bit of a padding top if we want I don't know let's do like one rim and then that should be fine that looks okay okay so this is what we have we can modify it and lastly what I want to show you is maybe I do want to have these links one next to each other and I do want to add some height and padding to them so how can I do that let me remove everything again so we start from scratch actually I want that sexy background color there we go and this I'm gonna remove this so it's in line we can change it to something called display:inline-block and this is kind of like a a combination of the two but the difference is here with the inline block is that it respects the top and bottom margins and padding and it also respects height and width so if I try to add a height of 20 Ram to this I can do it if I want to add what of 20 Ram I can do that as well look at that we have two boxes now and I can also mess around with margin if I have a margin of two Ram here that's gonna jump it over because it doesn't have any space anymore but as you can see it does add it to the top and it does add it to the bottom as well take a look the anchor tag has top and bottom same goes with padding so if I drop a padding up to rep that's gonna work just fine as you can see the text moved here just because we have this box sizing border box so it adds that padding on the inside so the element doesn't grow we covered this in the last video because if you remove this oh no that's not what we want so let's add that back okay there is two more things that I want to cover before we start building out something is super simple project here before we move on to the media queries and making mobile friendly things and then building out those three nice projects so what I want to cover is positioning things and let's go into our HTML here what I did I would just added a div with a class of container and three boxes inside so what I want to do is tile them a bit so what we're gonna do here is we're gonna get that container like this container perfect and I'm just gonna add a dark background color so we can see this and I want to show you a few cool new tricks and CSS that we can do so background I'll just add a color like this and I'll change it afterwards so as you can see right now we cannot see anything and the reason why we cannot see anything is because we don't have any content in our body so if your content is empty then you're not gonna see any background color as soon as we start adding something to it so maybe a drop in h1 here you're gonna see that that the background is gonna appear and the reason why this happens is because by default we cannot see the HTML or the body because as long as there's no content in it the height is not gonna be set so we can change that that's okay so if we want to see something here what we can do is we can add a width that we can see so if I had 100% here well we still cannot see because we don't have any height so the interesting thing is if I try to set a height this of 100% to take up the full screen we cannot see anything and again that's the reason why because we have no content here and the body is said - it doesn't have a height so when you try to set the height of 100% of nothing then nothing's going to happen so a quick fix for this it is gonna be to take the HTML and the body and just a have a height of 100 percent to it and that's gonna stretch all the way down here okay and now if I change the height of the container to something like 50% then it's gonna take 50% of the height of the body now we're gonna look at a better solution than this when we get to responsive media with VH MV w you're gonna see that I mean it's gonna be more fun okay but for now we're gonna set it like this which is completely fine so I actually want this to be round let's do it 80% and the width let's also to 80% on the width okay so something like that and what if I want to Center this in the middle there's a cool trick that you can do with margin if we set margin to auto it's automatically gonna allocate the space on the left side and on the right side it's going to split up the remaining width here so 10% and 10% and it's gonna drop it on the left and on the right so whenever you want to take a div or a container or some sort and you want to position it in the middle you can do a margin Auto as long as your width is smaller than 100% because if it's 100% then it's gonna take up the whole screen okay so let's do something here with the boxes I'm gonna take box 1 box 2 and comma box string so I can select all of them and addy went to them secondly 20% any height of 20% like this ahead save okay now if I go down here I can add a background color to all of them I can do background let's do something intense like this amazing and what I can do now is just like box two and just change the background color so the reason why it did this was so I'm not so I don't duplicate these settings over and over again so we change the background color there let's change it here as well so let's do something like an intense blue alright these colors make me sad I don't like the way they look I want to make them obvious but I don't want them to make your eyes hurt so let's also take box three here and add it back let's try a green color Oh No Darkrai that's how we do direct one lets you directly there we go that's two green poor green as Dan we can or like an ocean ocean color and the red can leave as well with a nice pink purple okay there we go some new colors there for you so let's take a look at these positions what our position is how do we apply them what do they do let's try it with the box that's let's try it with the box we want okay the first one the purple lovely box so what happens if I add by default all elements are positioned static like this and as you can see it says the box is a normal box laid according to the normal flow alright so the way we basically add the elements in our HTML that's the way they're positioned so what's static so if I add some content in here I had a h1 block hit save so they're just going with the normal flow of the HTML okay so nothing really special however if I change the position static as you can see nothing happens to position absolute let's say absolute what's gonna happen is that this element is gonna be ripped out of the normal document flow you can think of it as we literally just take out the element and it doesn't care about where it is in deep position anymore so what happened and it's a bit hard to see but as soon as we had this these two get pushed up all right so it's kind of like this doesn't exist anymore so it's kind of like we grabbed this out of here and these other boxes just get pushed up because it's like oh I have empty space I shouldn't be down here so they get pushed up so if I had saved this gets taken out and those elements get pushed up and now we have access to four new properties called top left bottom and right and what happens if we add so let's try what if I do bottom zero ramp it's safe as you can see it gets stuck at the bottom of the page here okay what happens if I add left left zero we can even see zero pixels that's fine it gets stuck to the left here now as you can see these got pushed up here and it doesn't care about this box that it was in you can imagine like it doesn't care about anything it gets ripped out of the page and it just sits where you want it to sit so zero basically means here let zero basically zero pixels away from the left side of the screen here so if I move this around as you can see zero if I add some pixels here or let's do rem-1 rem-3 left if I want to push it up a bit I can do one room from the bottom there we go so it's very easy to position this kind of the way you want maybe I want it top and kind of down here so I can do top and right it's saved and now it's here maybe I want to push it down it's 220 there we go so I can move this anywhere I want but if I want to Center this here well we can also use percentages now something's weird is gonna happen so I'm gonna add 50% and hit save and as you can see this doesn't look in the middle for some reason and it actually is in the middle but I want to explain this and how this works so if we look from up here all the way down in the center here what this is the center this is where the element starts so this is where it puts it but right now the content so the box actually has some height to it and went to it right so 20% so obviously it's gonna go a bit down right and it doesn't look centered so what we want to do it would be really cool if we would have a property that would take justice elements just this purple thing take this and just move it up by half so just the size of this and take half of it and push it up and there is actually a property that can do that which is called translate transform translate okay so let's do that but before we do that let's move the right one to 50% as well 50% is we can use something called transform translate alright and you can move the X and the y or optionally you can do translate like this and you can add two values with translate X you would add one value here so like minus 50% and with no value here you can add to X and the y so we can say x + y - 50 - 50 and as you can see if that's gonna move it perfectly in the center so let me illustrate that translate even up here so it's a bit easier to see if I add to the box - you a transform and let's just translate X if I move this by % then it's gonna perfectly move it the size of the box to the right okay if I want to do the opposite way I can say - and there we go also what we did here which is to 50% because I wanted the element to be centered so like this as you can see perfectly moved 50% to the left and upwards so it's centered okay let's get rid of this and I want to show you something else so this is how you can position it perfectly in the middle you add top 50 left 50 and the transform translate back by - 50 - 50 okay but what if I want this to be relative to the let me get rid of this let's just move this top to 0% there we go and let's move it to the right 0% what if I want this to be relative to the box okay I don't want this to be out here I want it to stick basically to this box so to do that all you have to do is if you have a box one here if you add position relative to the parent element or any parent you want to add this is gonna basically detect the first position relative you're gonna add to a parent so it can be either this one or this one it's gonna detect it the first time it hits positional relative on an element that's what it's it is gonna stick to so if I go here and add a position relative and it's saved as you can see now it constrains itself to the thing that we added relative so you can imagine that as okay I have position absolute but what am i relative to my relative to do this and if it is then you just have position relative so now if I change this to top zero as you can see it's there I can modify this to bottom zero and you're gonna see that it's gonna be they're perfectly fine so now everything works the same way it's just that everything is stuck in here okay now what position:relative also does is if we go to talks to here and add a position and relative alright now this is not going to jump in there because it's not its parent right it's just gonna look at parents these are kind of siblings and here so it's just gonna look up there when you add the position:absolute but if you just add position relative to an element all its gonna mean is that if we move this with top left right and bottom it's gonna move away from this exact position so it's gonna keep account of where its initial position is and then if we just add something like left 20 R M alright it's gonna move 20 REM from its original position ok so let me show you if they leave one room so it's gonna move left one REM from its original position okay so that it that's very simple actually a relative just moves from its original position okay and the next one I want to show you is position static and let's go to the dark box here we're gonna add positions epic yeah my apologies position fixed static is the one it has and what happens right now is we cannot really see anything but if I go up here and I just change the body and the height to like 200 just so we can scroll a bit as you can see what happens is that this element stays fixed alright and I can scroll as much as I want and I can position it wherever I want it's always gonna be fixed there now I can modify its position it's fixed positions I can see pop let's do two REM and see what happens there so it's here maybe I want to move it left ten REM and again I can add percentages very just like the other ones as to let's do i've REM more 10 REM you want Oh even more this is not enough 20 right okay so I can position that the way I want I can scroll and it's always gonna stay there okay and even if I go outside it doesn't matter where I go it's always gonna be fixed okay so that is fixed you might be using this if you have maybe some kind of chat or something or maybe a footer already nav that's always stuck up there and that's where you can use this so maybe you have your content but you have a Neve so we can even add height and width to this so I can stretch this out with 100% if I want hit save all right and then let's move the left to zero so I'm gonna say 0% like that and top is gonna be 0% and close this up and there we go you can imagine this as being your navigation and it's always there well it wouldn't be so thick but you can be general idea okay Sam that's the one now there's another one I want to show you which is called positions tickity so let's remove everything from here and we are back to this now let's change back these sides to 100 all right actually I need a bit more height here so I'm going to add 200 even though these are kind of stretched we can kind of fix this if we want if we go to the boxes and change the type to 10 okay just make them a bit shorter but I want to have some scrollable space here so if I go to the box tree and add a position the key hits save nothing's gonna happen but as soon as I add top zero percent and hit save as soon as I start scrolling as you can see that black thing sticks there but as soon as that sounds weird the black thing there but as soon as I move up it it kind of stops so it gets sticky and as soon as I move up its back to normal so what this does it switches from position relative to position fixed so when we scroll down and it hits that top zero so as soon as it hits that top zero it's gonna stick there all right you can come up with some cool things here as well with this and you can do the same thing with whenever it hits the bottom or the right or the left okay so this works on all of those properties so these are a deep positions now we're not gonna be using this to exclusively align everything so this is not how you're we're gonna position the nav this is not how we're gonna position like this section and everything these can be used sometimes for very specific purposes then we're gonna cover when we are gonna get into building out the projects that's where you're gonna see exactly when and how we're gonna use these but these are very helpful and they're gonna help us a ton so now let's get into aligning and floats and that was a super old way of aligning content and positioning content that we're not gonna use but I'm gonna show it to you just for fun okay after this episode we are finally gonna build something at is it gonna be good no it's not gonna be good because we're gonna use a super old method of aligning and positioning our elements so basically creating our structure for our website we're gonna be using something called floats and I don't recommend this at all what we're gonna do it just a weekend create a super basic website after that we're gonna jump into flexbox which enables us to do some some designs very simply some layouts responsive layouts and all of those wonderful stuff so bear with me we're gonna do two more quick episodes and later on if we're also in the projects we're also gonna cover other CSS properties and some other tips and tricks okay so I'm not gonna cover all everything that you can do in CSS because frankly that's honestly just a waste of time we want to know all the important stuff and when we're actually building projects it's gonna be more valuable to see it there that just means spewing it out here for zero reason so one I want to cover which i think is fairly important that you're gonna use it a lot is something called pseudo classes all right so I'm gonna add a button here I'm just gonna keep it very simple and I'm gonna add a submit okay so there we go so we can get that button here I'm gonna say button that's not a class just a simple button and I'm gonna say padding we're gonna do two RAM m4r m4d wit and B D for the width and that's that's what I drag the same so take a look at this we can style this the way we want but let me kind of show you what these pseudo classes are you can select the button and you can add this Col on here and what you do is let me show you a few cuter classes one is called hover and when we add it like this what happens is if we change if we add another property like background lights blue or light gray when we hover over it as you can see that background changes its color so only when your mouse gets hovered over that link that's button the properties change now we can do this on almost everything so I can take the padding here and maybe I can make this longer so that works as as well take a look so this is one that we're gonna use a lot when we want to hover over something to give like an indication that when we hover over it it's gonna have some kind of effect let me also show you when we hover over this as you can see it's just a normal Mouse we can also change the cursor so I can go to the button and I have a cursor:pointer to this and when we hit save you're gonna see that it changes the cursor so now it's like a clickable pointer cursor and that's what I tried to say okay so another one I want to show you is called focus so let me copy this over here I'm gonna change this focus which all means that when the button is we'll be selected it's gonna change its color so let me select a greenish color so when we click on this since you can see the button turned green and when we unclick from it it's gonna turn back to normal so hover focus on hover I can show you a better example with the input like this so we add an input text and then I'm gonna copy this over and just change it to input so when we hit tab you're gonna see if we hit tab here now that's focused if I hit tab again that's gonna be focused you can tell by the blue outline on top of it so that is focused that's something that we are also gonna use a lot all right and you've seen a few already you've seen that we had that and child so and child like this right and we can add a 1 and that's gonna select this one let me get rid of that really quickly there we go so that's gonna select only this button the first button that it detects so if i duplicate this a few more times as you can see that's the one that gets selected at two and three and that is a pseudo class as well now there's another thing called pseudo elements let me show you that really quickly let's get rid of everything and I'll just add a h1 that's gonna say hello all right a pseudo element is used to add additional content from within your CSS I know it's crazy so let me show you we can get to each one at a font size of let's say 4 REM all right let's make this smaller okay so what you can do is you can say h1 and add two colons in a say after or the four all right and basically what after is gonna do is you can add content within your HTML here so content and you add two quotes and you can say hello me and as you can see it's gonna additional content here and we cannot sew like this because this is done within yours and CSS and in your HTML markup if we check your h1 it only says hello and this can be done as well with the 4 so we can say before all right and there we go we can add some content before it now honestly this is mostly used not to actually add content but to style an element and a few different ways and we're gonna see in the last part of the series right after this video how we can use this in a more practical way I should say so but I wanted to show you these who you know and then you helps you the classes and also see the elements okay so let's take a look at the old ways of how we used to create layouts okay let's throw together and this final episode a simple website and I'm gonna introduce you something called floats so let's cover floats let's start off with just a few boxes and then we're gonna implement a website so let's do a box one key box two and a box three all right I'm gonna change the names of this so you can imagine these as being just some kind of content on your website so let's grab these we're gonna say box one I'm just gonna add the arbitrary height to these and the width let's say 50% as a width and a height I'm gonna set something like 30 you rent and hit save alright let's also add a background color to this background light gray so there it is we can also change this so it looks more like a box we can do the 30 Ram there we go so that's one and let's copy this over or actually what we can do is we can just duplicate this like so alright just so we also have the 30 rims on top of it and then we can change the background colors box to is gonna be background of you know what we can do actually just add a border to this and not a background so let's remove this and just add a border of two pixels alright so these are this is gonna be the size of the border solid is gonna be the type of the border and finally the color we can just do black for now okay and basically we can change these to other ones but if you're not that nice I can say thought it but I don't know that's that looks terrible so let's change back to solid okay let's also add a bit of margin between these ten let's do one room okay perfect so I have these boxes let's also add some content to it let's make these larger a bit let's do 15 okay very nice ah larger baby very good okay and I also want to show you another cool property and here I'll just add ap tag lorem 50 it's safe alright just some text and I can copy this over to box 2 and box 3 as well okay just so we have some text okay let's also add a font size here so let's do font size and we're gonna do to point a trim okay perfect so we have our content as you can see if I just change this smaller we're gonna have an issue we can scroll and that's something that you probably might not want to do so what you can do is you can also limit this and I'm gonna introduce you something called max width so if I change this to max width let's see if that has any effect if we make the smaller as you can see the maximum has to be 80 but it cannot go above that it cannot go above that size of the pixel so as soon as it it goes over it actually wraps the text around it all right so we're basically putting a limit over our width okay and this can be used also as a minimum so the text basically should have a minimum weight of it cannot be any smaller than this that's what it says so if I go smaller than that it doesn't let it go smaller so that's the maximum of the minimum I should say okay and we're gonna see this with height and everything but for now let's just leave it at max so the text actually wraps around it perfect okay very good so that's step one and now let's take a look on how we can position these I'm actually gonna make this fullscreen like this and I'm gonna make it a bit smaller let's use 16 okay what if I want to have this content so the second part here go up here how can I do that well I'm not sure what can we do well there is a property called float and this was used to actually create layouts so you can imagine like you can do these on lives as well and on elements as well on anything that you want so what you can do is I can grab the box to you and I can say float let's try what happens what happens if I float it on the left side alright that's some weird things happening here this kind of breaks as you can see the border goes up what happens if I do on the right all right the content kind of flows over on this side and if you don't know which box is which now let's kind of add some background colors to them so box 2 is gonna have a background we can actually just add a title for and now to make this a bit more clear so let's remove some text from here let's remove some text from here and let's remove some text from here and we'll just add an H to box one like that am fox2 and box 3 okay perfect so when we add on the box to a flow to the right it goes on the right side okay so that's what I kind of want I want this to go up here and the way you can do that is you can get the Box one and flow that on the left so when you do that you have the box one here and the box one there so basically you can kind of Majan where you want your content to be if I want to if I switch this over right and left and hit save now the Box floated to the right side and the box to float to the left side so this is how you can kind of position things the way you want however there's one problem this one breaks as you can see and this was a big issue and this is why I don't recommend it just because it's very hard to style things this way and you also have this issue where the height collapses and things just don't go the way you want as you can see we have the box one box two and that's it this box tree gets cut off so the way you need to fix this is to add a clear alright because what happens now is all of the content down below so box three tries to be put up here next to the box one so let's change this back let me say left and right and hit save and let's try to make this a bit smaller to see if we can see the result so as you can see you have these weird things going on here so to fix this all you have to do is go below the boxes that you add the float on and then you need to clear it so what we can do is create a class called clear like this and just add clear both and hit save so now if I introduce this down below so after the box - I'll just add a clear this is gonna fix all of our issues okay so there we go it's a bit weird so what you need to do is just add float left and float right to the elements and then clear so the other content that you have does not break okay but this is so weird and if we have something more complex that this can get tricky and also making this responsive and nice can also be tricky as you as you can see as long as it doesn't have space it does jump down there which is which is pretty good but it's still not that great all right there we go super awesome so now what I would want to do is maybe maybe change this and add don't add this max with maybe we can do 50% 50% with 50% let's see what happens okay the content jumps down here because we also added let's see we also added some margins so if we remove the margins now it's perfectly stuck up there so if you want to exactly split this up and now we have to take into consideration like how much space you want in here so maybe I want to do 48% just to leave a bit of space hanging there like that and then maybe we can add a bit of margin so I can say margin of like 0.5% all right there we go so we also have a bit of spacing and also in the boxes maybe we can add a bit of a padding padding let's do one ramp all right so these are not stuck all the way up there and then we can continue on with the box tree so maybe on the box tree I want this to stretch all the way so I can say with 100% and now it stretches all the way okay so now this is a way that you can create some layout so let's throw together a simple page here just to experiment with this and and kind of mess around with this so let's get rid of everything here and another thing I want to show you and it's something with the height so by default the HTML and the body tag are gonna take the height of the content that you have so as you can see it thinks the height of the content that you have so if you try to add maybe on a box one if you try to add a height of 100% you're gonna see that nothing happens and the reason why the thing happens because well it tries to take the height of the body which already is the height of the content so there is nothing to stretch right so maybe we just have this maybe let me just illustrate this a bit more clearly maybe we just have this box one right so so if we take a look at the box one height is just the height of the content and if we try to add height 100% well that's not going to do anything because the body's height is already the size of the content so it's like useless so a way you can fix this is you can extend the HTML and the body's height so you can say HTML body and you can set that the height 100% and now as you can see the bodies and the HTML site extends all the way down right so now on the box we also have a hundred percent because we define that here so if I add fifty now it's gonna be fifty percent of the body's height okay so this is a quick hack that you can do but we're going to introduce some better methods that we can do this rather than adding HTML body 100% but I want to clarify this as well just for you to know so let's remove everything and let's start off building out something simple so let's just throw together like a navigation that we might have so I'm gonna full-screen this let's go down here and what I'm gonna do is just start off with a header all right and in this header we're gonna have a navigation so we're gonna throw in a logo here which is gonna be h1 logo no I'm also gonna give it an IB of logo perfect underneath we're gonna throw an unordered list and here we have our anchor tags so Li a alright just to keep the semantics correct I'm gonna duplicate this two more times I'm gonna add the hash tag here just so it doesn't actually bring us anywhere okay here we're gonna have home this is gonna be about and this is gonna be contact perfect okay underneath let's do maybe a big image underneath some sort of puro image so we can create a section like this and in this section we can also have a header so we can say Heather and here we can have a h2 that's gonna say let's make it about some kind of cooking thing cooking the cooking the cooking master all right and underneath here let's draw a h3 that's gonna say cooking I don't know what I want to say by our homemade bakery all right and that's also all right that's gonna be good I'm happy with that and we're gonna keep this simple like this perfect and you know what let's actually get rid of the header and we're also gonna throw a button underneath just to keep this a bit more simple button we're gonna say bye and hit save I'm also going to add a class of hero to this our hero section and underneath let's do maybe a form so we can do a section and this is gonna be called Clint I'm gonna have a class of form section to this we can also do a hero section just to keep everything consistent and it's safe okay and this I'm gonna have a header that has a h2 and it's gonna say contact us hit save and underneath the header we are going to throw in a form I'm gonna remove the action for another because this is not really gonna do anything for us and here I'm just gonna drop the label for name and after this let's write name in the gear after this we're gonna also drop in an input with a type text perfect so we can now duplicate this two more times like this we can change this theme for email and we can say email and here we can imply type email that's good and we can also add on these inputs I forgot to add a name that's can the same name on this one name is gonna be email and let's also add an ID of name input and here we can add an ID of email input perfect let's save on that everything is clear and finally maybe we have a label for a message message and this is gonna be just a text area text area with a name of message an ID of message there we go and actually we need to change these here we're gonna say for name input and for email input where is it for email m but alright and we can do message input here as well okay let's copy and paste lovely let's save okay we have everything that we need okay so take a look this is what we have looks lovely let's go to our CSS let's remove the additional code and all I have here is just the margin padding and Deepak sizing and the font size on the HTML lovely ok so let's start off maybe with doing some simple things maybe some global things that we can adjust such as the size of our h1 of our h2 of our headings and maybe maybe anchor tags so what we can do is take the h1 add a font size of 2.8 Ren it's safe alright that's fine let's also get the h2 and the just the h2 this is gonna be a font size a 4.5 Ram all right these are gonna be the big sections on our page maybe smaller 3.6 it's gonna be fine okay there we go I also want to add a bit of a padding to these let's do five RAM top and bottom maybe three and zero RAM left and right okay just just place them out yeah let's do five save okay perfect so let's kind of focus on this one first on the upper corner let's also add an ally here so you remove some basic stylings actually we can grab the a tag here because if you try to change the color of this it's not gonna work if I say Li and add the color of red nothing's gonna happen so we specifically need to change the anchor tag because that's what gives the color to these not the Li so these are laid inside the a tag but to change them we specifically need to select that so let's add a color of black for this and we might change this if we want and let's remove the text decoration and we see none and that's going to remove the underline there okay let's also change the font size let's do two point four trim let's see that's good alright I'm happy with that let's zoom out okay and I also want to okay so that's kind of it for now and is there something else the H string we can change that too so let's do h3 let's give this a font size of 2.8 Ram that's good and also the button we give this a font size of 1.8 Ram hit save okay so that's good now what I wanted to do is start making this Neph so I'm gonna go all the way down here and I'm gonna select mine F I'm gonna throw a background color on it let's do let's just pick out something here goodra shall we go dark let's go dark some blueish dark color here alright something like this okay and now what I want to do is actually change the color of these so I can say color white because that's kind of hard to see okay and as you can see we also specifically need to change it on our anchor tags so I'm gonna actually go up here and change this to white now I'm changing every day so all the anchor tags to white so if I have any other one those are gonna be white - and if I have it on the white background you cannot see it so in case you want to add additional ones and you cannot see a don't panic it's because we globally changed it up here okay so if you remember how we can move these is by using floats so I can go down here and I can select nav h1 and I can say float left because I want this to be on the left side okay now this kind of moves in a weird way here so what I want to do is say nav and I'm gonna slug the UL and I want to float that right all right and now this breaks our height so everything collapses and a weird way but as you can see it's kind of in the perfect position that we want it to be so if I can drag this over you're gonna see that we have the home there and we have the logo so the position is good but it broke our height so if you remember we can go up here and just add it clear through the class and we can say clear both in our HTML we can just add this class of clear right underneath here so right underneath where you are finished with your floats so I added the h1 the UL and right after that we add the clear okay and boom everything works the same way now as you can see our our Li tags here are also in a block style and I want them to be one next to each other so we can also grab that nav Li and we can float those as well let's add a float to the left and boom there we go we have one next to each other we can add some margins to them or our padding's that's handy let's add a little margin here and we're only gonna do it left and right so the first one's gonna be zero and the second one is gonna be three or we can do for it there we go I also want to remove those dots underneath I don't want those so what we can do is on the UL we can say list aisle and we can say none and it's gonna get rid of it perfect so now I can maybe add a bit of space in between these so I can go up here to the NAB and add some padding to this we can do three ramp alright so that has some padding all the way across here okay so there we go that's a simple way that you can create a map this is the right way I have better methods to show you after after we finish this section this is a pain to be honest but hey let's continue why not so we have this section here and now with the here row this one okay so what we can do is get that here row section and let's get an image here Oh section and what I want to do is add a background image to this how can I add a background image well let's go and explore and find an image let's go on pixels I'm going to open the file here and hopefully the internet works today let's do something with food bakery at search that's rich pixels is slow today there we go let's scroll down here maybe we can use this one okay so let's get this one we can do the large that's fine hit download and I'm just gonna drop it in here for now now you can create folders to make everything nice but for now it's gonna be fine okay we can go back to our CSS can I close this do I have enough space no never mind no clothes there we go so to add a background image all we have to do let me make more space here all we have to do is a background - image and here we can say URL and add some quotes and we can drop in the image for vegetables there we go take a look we have the background image perfect that's exactly what I want however this is kind of small so we can increase the height of this if we want so let's go here and just add a random height let's do 30 ramp let's see okay that's still too small let's do like a hundred grand Rembrandt okay so something large like this yeah Katey there we I don't want this to cover everything so perfect so we have this but as you can see this doesn't look that great so a way you can change that is by adding a background position if we change the background position we can move the image up left right or bottom so if I say top it's gonna move it to the top of the image if I say Center it's gonna drop it in the center and if I sleep bottom it's gonna go all the way down okay but this still doesn't look that great so what we can also do is when you remove this is a B background position cut in the background position my apologies background size and we can modify this as well if we add cover you're gonna see that says scale the image while preserving its linguistic aspect ratio so if we add this as you can see we see most of the image and when we scale it down you're gonna see that it scales and it keeps the aspect ratio alright so that's a good step right there we can also change the position if we want maybe Center background position and say okay let's see how that looks okay I'm kind of happy with that because I want to see the burger and these chips so that's good okay so we have that now what we can do actually is we can just align everything here to the middle so how can we align everything to the middle what we can do is go here and just text-align and we can see Center and as you can see that drops it perfectly and vCenter we can push down the content let's just change the color to white for now like that and let's drop it to the center so what we can do is add a padding top of 10 Ram it's safe that drops it down here we can drop it more and say 15 perfect okay so what I can also do is style this a bit nicer because it doesn't look that good and also you know it's kind of hard to see the the white especially if you have something a bit lighter color it's gonna be way more difficult for you to see this so one thing that you can do is a heavy text shadow and by adding a text shadow this takes three parameters it's gonna say three pixels three pixels three pixels and a color I'm gonna say black and I'm gonna explain everything so the first one and the second one is going to be the position of it so if I change this to ten as you can see it moves it 10 pixels to the right so the shadow now is to your right now I don't want this to be as large so I'm gonna keep a tree so it's quite close to the white one so it gives that nice contrast this works and why access so if I add ten here it's gonna move it down this way and - is gonna move it up that way okay so I'm gonna keep it fairly close with three pixels and this property is gonna increase the the basically the radius of the blur so if I add something big like 10 it's gonna get more and more blurry so it's not that sharp looking so this is fine I think it's pretty good compared to this if this is a bit harder to read next to this this kind of comes out a bit more so that's good next up what I want to do is I wanna maybe push this button down a bit and style it a bit nicer so what I'm gonna do is go to here section and I'm gonna say button okay and this one is gonna have a padding of let's do two RAM m4m hit save there we go that's what we have maybe we can make this larger like six so it's a bit wider let's do four or maybe four and one all right I don't want it extremely large and that's good and we can also add a margin top here of one room alright maybe more three or four there we go just to give give it a bit more space let's remove the background we can add this background that we had up here just to kind of match the design so I'm gonna copy it from up there to here and we're gonna remove the border we're gonna say border none' to get rid of the ugly border we're gonna change the color of it to white so we can see the text perfect and lastly what I wanted to do now as you can see this kind of blends with the background so that's not that great let's change the cursor to pointer so what you want to do is have a pretty nice contrast in between these and the image and the button here so what what one thing you can do is either change the color of this or maybe add an image that's not so dark because if I change this to something more like this now it's more visible and you know what we can actually add a custom one here what am i changing alright let me go back here I forgot the semicolon so it broke all my code maybe we can do something more visible like this okay so that's way better alright so that's what we have that's the section and on the contact one let's move down there what we can do is also text align this to the center so we can get the form section we can say text-align:center let's take a look what that does alright so the lines this to the center now we can get the form like this and as you can see these are kind of displayed in line and this is not something we want to do so what we can do is come down here and we can get the form input and the labels and the text areas so I'm basically selecting all of them and make sure to add form to all of these so form input the form label and the form text area and we can grab all of these and add a display of block alright and now they're gonna be one underneath each other okay so as you can see the text gets aligned here but the inputs don't so the way you can align that as well is let's get the form input and we can add a margin of auto to this let's see does that work okay so that works we can also do that to the forum thanks Terry now like that hit save let's go down here and that aligns everything as well let's also just get the we can add a font size here font size 2.4 REM Save there we go that's way better way larger let's also add some space in between these so let's go here and add a I mean we need margin on top so we can add another one here to REM so this is only gonna apply to top and bottom but this is gonna take care of a lining it in the center so if we had saved now we have more space and finally we can maybe add it to the button as well form button and we can add a margin bottom of to read it's safe and there we go we have more space or something big like 5 all right way better 10 we are ambitious ok perfect that's what we want so now we can style this the way we want for the button we can also copy everything from here so let's copy the padding background border and color and cursor okay and bring it down here hit save and now we have that lastly what I want to do is come here and there they went to all of them something like 50 percent so they match the same size as you can see it takes up half of the size of the screen so that's good but we added it let's just add this to the input and the text area actually let's bring it down here let's see how that looks okay so that looks good we can also add it to the button so let's add a width of 50% to the button so kind of matches the whole flow here so there we go that's how we can kind of throw together a website now is this responsive kind of but not really as you can see when we go down here that kind of drops there it doesn't look that nice and yeah this would be smaller this would be super squished together here so there are still a few issues here and also just making this layout is a bit it's just not that fun using these floats and then clearing things so next up we are gonna take a look at some better ways of doing things I apologize that this video is a bit along but hopefully you learned a few things here and also as you can see here I forgot to point this out this this anchor these anchor tags here are not perfectly aligned with the logo here as you can see they're a bit more up there so what you need to do now with this style is to kind of match the padding so add the same amount of padding and the same amount of margins or patterns so they're perfectly centered here okay but again this is kind of hard so it would be nice if you would have an actual a better tool to make these layouts and this is actually a very simple layout it's a 1:1 column layout and we don't have multiple sections here that's coming one to the left and one to the right it's just kind of everything dropping beneath each other this is kind of the only two lay two column layout we've hit with the logo and ul here so we have to float this other than that we didn't really have to flow to anything else okay stop talking ed show us - good stuff

Channel: Dev Ed

Views: 893,505

Rating: 4.9524875 out of 5

Keywords: css tutorial, html tutorial for beginners, html5 tutorial, web development, dev ed, html, html for beginners, html tutorial, learn html, html crash course, html5, html css, css3, css for beginners, learn css, css crash course, web development tutorial, css tutorial for beginners, css course, crash course

Id: vQWlgd7hV4A

Length: 234min 3sec (14043 seconds)

Published: Sat Dec 07 2019