Create Your First Website with HTML, CSS & JavaScript

1. Welcome!: In this course for absolute beginners, I'm going to show you how to get started with HTML, CSS, and JavaScript by creating this simple, beautiful and responsive product page, website. Don't worry if you have no experience with web development, cause we're going to go through absolutely everything step-by-step. So we're going to start by installing the text editor that we're going to be using to create our website, which is VS Code, which you see over on the left here. And then we're just going to work on HTML. We're going to create this webpage by just using HTML. And at this point is going to look something like this. Not very pretty. And then we're gonna move on to CSS. We're going to use the magic of CSS and to transform this page into something like this. We're also going to use CSS to make it responsive so that the layout changes on mobile. So this webpage looks good for anybody who's viewing get regardless of their device. Once we're done with CSS, we're gonna move on to JavaScript, and we're just going to add a little bit of JavaScript to make this cookies banner appear after about two seconds and make it disappear when the user clicks on this close button. And then at the end we're going to add some finishing touches, such as adding a second page. This About page that you see here. 2. Install & Setup VSCode: Let's get started by installing the text editor that we're going to be using to create this website, which is Visual Studio Code or VS code, as it's generally known. So you just want to go to Google and search for VS Code. And you want to jump to this code dot Visual Studio.com website. And you want to download this for your platform and install it. Okay, so it's finished downloading the zip. So I'm just going to open that up on a mock. I just need to drag this into my applications folder. Or if you're on Windows and you might need to actually run an installer. Well, I'm just going to drag this Visual Studio code up into my applications folder. I should now be able to launch this. So I'm just going to go to Applications. Launch Visual Studio Code, click on Open and you should see something like this. Now with VS Code, we can install extensions which help us with our development. There is one extension that we're going to need in this video, which is the Live Server extension, which will help us to launch our website in the browser and also see any changes that we make to our website in real time. So you just want to click on this extensions button over on the left here. Or if you don't see that, then you can go to View extensions. I'm just gonna click on this button. And you want to search for Live Server. Hey, answer the Communists top item. And you just want to click on this Install button. And that's now installed. And if it asks you to restart VS Code, then just close that are restarted again. 3. Create Page & Launch in Browser: Okay, I read it is installed on sets up, so let's create our first HTML page. So we're going to need somewhere to store this website. So we're going to need a folder. So I'm going to create a folder on my desktop. And you can create a folder anywhere you want. It doesn't need to be on the desktop or I'm going to create it on the desktop. And I'm going to name it HTML, CSS, JavaScript, dash basics. And you don't need to use that name. You can use any name you want. And now we just want to drag this folder into VS code. So I'm just going to get VS code up again and then drag this folder into it. And it's now open now fold virus. And this hair is where all of our files will be seen. So let's create our first HTML file. So you just want to right-click in this space here. By the way, if you don't see this explorer panel and just go to View Explorer and it should show it for you. We want to right-click and click on New File. And we're going to call this file index.html. And this filename doesn't need to end with dot HTML because that tells the browser that this is a HTML file. And I would recommend that you use the name index.html because when you visit a website such as co dot Visual Studio.com slash, then the first webpage that it's going to look for, index.html, okay, so we can see that it's already opened this file forest index.html. We can see it here. We can see index.html in this top. Just going to close this welcome tab. Our VS Code makes it really easy for us to scaffold initial HTML page and add all of the basic tags that we need. So you just want to type in Doc and you should see this Emmet abbreviation pop-up on ADA is an extension that's built into VS Code, which helps us to write HTML and CSS more quickly. Well, once you see that little popup just hit Enter. It will scaffold an initial HTML page followers. I'll explain what's going on here in a minute. But for now we just want to save this by going to File Save, or you can use the keyboard shortcut that you see here. So I'm just going to use that keyboard shortcut to save this. And now let's launch this webpage using the Live Server extension that we installed before. To do this, you just want to go to View command palette. Or you can use this keyboard shortcut that you see here. And this will launch the command palette where we can launch all of the commands available to us within VS code, including any commands from any extensions that we've installed. And you just want to search for life. And you can see this option here open with live server. So I'm just going to click on that and it's now opened up our HTML page in the browser. We don't see anything on the page. I'll explain why that is in a little bit. 4. What is HTML?: Well, first of all, what is HTML? Html stands for Hypertext Markup Language. Html is not a programming language such as JavaScript, so we can't use logic in HTML such as if this thing is true, then do this, or if this other thing is true, then do that is purely a presentation language which tells the browser what elements should be displayed on the page. And by elements, I mean things like headings, paragraphs, tables, images, lists, still fly that HTML also doesn't tell the browser how these elements should look. That's what CSS is fall, which we'll get to later on by the end of this HTML section of the video, our webpage is going to look something like this. And you can say, it's pretty ugly. So all the HTML is doing is telling the browser what elements should be on the page, such as these headings on this paragraph, on this image. But it doesn't tell the browser how these elements should look. It just spits them out on the page using the browser's default style for these elements. So HTML is made up of tags, and we can already see some tags on the page here. I'm just going to make this a little bit smaller. And in fact, I'm just going to hide this sidebar. So you just go to View appearance, click on Show sidebar, or use the keyboard shortcut. Then it'll hide the side bar so that we have more space. So most tags are made up of a pat of an opening tag and a closing tag such as this title tag that we can see here. So the opening tag is just made up of a left angle bracket, then the name of the tag than a right angle bracket. And then the closing tag is made up of left angle bracket and then forward slash, then the name of the tag, and then a closing right angle bracket. We also have self-closing tags, such as this metatag that you can see here. You can see that this tag doesn't have a closing tag. I'll just explain what these tags are. And just to make it a bit clearer what's going on, I'm just going to place my cursor after this closing body tag here. Click with the left mouse button and drag up to the start of this head tag, hit Tab to indent that. So this HTML tag basically just tells the browser that this is a HTML page. We can see the closing tag for that doubt, Hey, on this HTML tag needs to be the root tag on our page. All the other tags should come inside these two tags. 5. Head (HTML): This head tag is for adding tags which give the browser information about our page. For example, this title tag tells the browser what title should be displayed in the top in the browser here. So you can see inside this title tag, we can see the Word document, and that's what we see here in this tab document. And so if we change this text inside this tag to, let's say orange, and we save that, we can see it change to orange in the browser. However, tags that are inside this head tag and not displayed on the page, they only give the browser information such as the title of the page. This metatag here, it just tells the browser what character set to use, and we don't really need to worry about that too much. This other metatag is basically just telling the browser how to render this page in the browser. And we don't need to worry about this too much. But this is basically just telling the browser to set the width of our page to the device's width, and also not to zoom into or out of the page. Just set the initial zoom or initial scale to one. We can also add other Meta tags here, such as a metatag to provide a description of our webpage for search engines. Or a metatag to provide a list of keywords for search engines as well. 6. Body Tags & Elements (HTML): Well, if we want to create a tag or an element that actually appears on the page, then we need to put it inside the body tags. So all of the elements that we actually say on the page will go inside these body tags. So I'll just quickly cover some of the tags that we cannot hear. So the first type of tags that we can add our heading tags on, the most important heading is the H1 tag. So if we just had a left angle bracket and then one and then a closing right-angle bracket. And you can see it's automatically added the closing tag, but if it has an audit that then just type this out. So left angle bracket, forward slash one, right-angle bracket. And so we can play some heading text inside this tag. So this is a heading. Save that. And we can see that heading on the page. We also have H2, H3, H4, H5, and H6. So I will just add those as well. And by the way, a shortcut for adding HTML tags is just to type in the name of the tag such as H2. And you should see this abbreviation thing pop up and you can just hit Tab or Enter on the top virus. So I'll just put some text in there. A lot of H3 and H4, H5, and H6. Save that. And we can say all of these headings on the page. And you can see that by default, the text gets smaller for each level of heading. We also have a paragraph tag for adding paragraphs. So this is just a p tag, so you just type in PE, hit Tab on a lot, a paragraph tag on a quick way of adding some dummy text in VS Code is just typing in lorem. And you can see I'm an abbreviation. I'll just hit enter a bunch of texts. So I'll save that. Say we have a paragraph here and we also have a couple of different list elements for displaying lists. So first of all, we have an unordered list. And if you just type in UL for unordered lists and hit Enter and inside that you want to add an LI element list item and you can put some text in there. I'll just add another ally in some text and then another ally, save that. And you can see a list with bullet points. Stop. We also have an ordered list which will number the items starting at one. So I'm just going to add a new line here and select this UL element and copy it with Command and say, or might be controlled and say on your device and then paste it down here. I'm just going to change this opening and closing tag to OL instead of UL and save that. And you can see this list has numbered items. These elements are all what's known as block level elements. Block level elements will always be placed on a new line. So you can see all of these elements are being placed on a new line, then not placed alongside each other from left to right, they're just being stacked one after the other. So these are block elements, but we also have inline elements which won't be placed on a new line, such as the strong tag, which will make text bold. So if I just surround this word here in some strong tags, this, I'm just going to double-click this word and then drag it into the middle of these tags and save that. And we can see this word is bold. What does not place this text on a new line because this is an inline tag or an inline element. And we also have the E M tag, which is an inline element. So if I just drag this word into these AN tags and save that, you see that this gives the text italic style. There's also a bunch of other elements that we can use, such as tables on inputs on I'm not gonna get into the mall now. Well, these are some of the main ones. 7. Semantic / Structural Elements (HTML): So these are some of the elements that we actually see on the page. But we also have semantic or structural elements which we don't actually see on the page, but which give the different sections of our page. So meaning they also help search engines to understand the structure of our page as well. So I'm just going to delete all of these tags that we've added in the body tag. So just to demonstrate some of these semantic or structural elements, we have a header element, which is where you might place your websites had a, we have a footer element where you might place the photo. We have a section element which you might use to surround a blog section. For example, within that section, talk, you might have an article tag where you would display each blog article within one of those. We also have enough element where you might add some navigation. We have an aside element where you might place a sidebar. And if we have a section of our page which doesn't really fit into any of these semantic tags. And we can just use a div tag. I'm just going to save this. And you can see we now see absolutely nothing on the page because these tags don't actually add anything to the page. They just allow us to structure our page in a logical way which helps us as developers to understand what's going on, on the page, and also help search engines on SEO, search engine optimization as well. There's also a bunch of other tags that we can use for. I'm just going to cover these ones for now. 8. Header (HTML): Let's get started grading the HTML for our header. And if I just jumped to the finished page, so we're just gonna have a really simple header with a great background, a logo on the left, and a couple of navigation items on the right, which we'll link to the two different pages. So it makes sense to put a header within a header element. So I'm just going to jump back to our webpage. I'm going to delete all of these elements. Apart from the header element. I'm just going to place my cursor in between these two tags on here. And so I will place all of our header elements in here. And for now we're not going to add this logo. We're just going to add a H1 tag, a heading tag with the name of our website inside it. It's a good idea to have the name of your website or company within one within the header, because search engines will assume that this is your website name or company name. So we're just going to add H1 tag by typing H one and hitting Enter or tab. And we'll just put name of our website. And I'm just going to call this website orange. And I'll save that. And we can now see this heading on the page. Now we're going to add these navigation items. We usually put navigation items within a nav tag. So after this H1 tag, I'm going to add a new line and add a nav element. So we'll type enough enter a new line and we'll place our navigation items here. I'm usually do this within a unordered list. So I'm going to add a UL tag within that. I'm going to add some LI tags. We're just going to copy these LI tags, paste them on the next slide. So we have to, we can add links to our page by using the a tag or leukocytes. So I'm gonna place my cursor inside these first LI tags, type in a hit Enter, and it's added on an archetype virus. We put the text that we want to display in this link inside these architects. So I'm just gonna put home inside those tags and hit Save. And we can see a link there. So I'm just going to copy this anchor tag, paste it inside the second ally, change the text to about because this will be a link to our about page, and I'll save that. And I'm also going to surround this orange texts in an anchor tag as well. One way we can quickly surround some texts and a tag is to select the texts, launch the command palette by choosing View and command palette or using the keyboard shortcut type in wrap. And we can use this wrap with abbreviation command that I'm going to fire that by hits an answer and then type in the name of the tag we want to wrap, which is an a tag on hit Enter again. And it's now wrapped this text in an archetype. Lots of tags have attributes, and this is an attribute here, this hate href attribute. The structure of an attribute is generally the name of the attribute and then equals and then some speech marks. But he generally place the value inside these speech marks. And this hate href attribute tells the browser which path this link should go to. And for now I'm just going to set all of these H ref attributes to go to the root of our app. So to the homepage on the root of our website is always up forward slash. So I'm just gonna put forward slash in each of these and save that. And if we now click on these links, they all take goes to the homepage. And you can also see in the address bar, we no longer see slash index.html here. Because as I mentioned earlier on, when you hit the website without specifying a particular page such as slash about dot HTML, it will always look for index.html first, which is why it's loading this page in the browser. Okay, Finally, let's just add another tag after our header, which will add a horizontal line across the page just to split things up a bit for us. So after this header, I'm going to add a new line on another new line. And we're going to add a hate R-type or horizontal rule. I'll hit answer on Save that. We can now see a line across the page and I'm just going to use these HR's to split up the different sections of our page so we can see what's going on before we start making our website look pretty with CSS, but we are going to hide these horizontal rules later on using CSS. 9. Product (HTML): Okay, let's add some HTML for our product now. So I'm just gonna go to the finished page. So we have a list of products here. So probably makes sense to pull all of these products within a section element and then pour each individual products within an article element. Within those article elements, we can place all of these elements. So I'll probably make sense to use H1 heading for this heading here, H2 heading for this price heading, and then a paragraph for this text here, and then a nav element for these navigation items here with a UL element inside that, with some allies on some links, just like we did for our header navigation. And then we're going to need an image element for this image. So I'm going to jump back to the page. After this, hey Char, we're going to add a section element. I'm going to place all of these products inside the section element, and I'm going to place each individual product inside on article element. So a lot that, so for this text here, we could probably use H1 heading. So let's add a H1 here and I'll just stop this texts. The new Olmec. Amazing. We'll stop and I'll put this price inside of H2. So I'll add a new line on H2. Will pull from 20069 $9, a lot of new line and add a paragraph tag for this texts. Just to add some Lorem Ipsum, I'm just gonna type in lorem and hit Enter, and I'll save that. Let's see how that's looking. Okay, this is looking okay, so let's add our navigation items. So I'm actually just going to copy this nav element from our header, paste it after this paragraph. And by the way, if you need to change the indentation on anything, you can just select some HTML and hit Tab to indent it to the right, Shift and Tab to nudge it back to the left. I'm just going to change the text in these links to buy. Learn more. So what this little right angle bracket symbol, we can't just type in light that because this will confuse the browser because our tags are made up of left and right angle brackets. So we can use HTML entities to spit out symbols such as this onto spits out this greater than symbol we can start and, and then GT for greater than and then a semicolon. So I'll save that. Let's see how that's looking. Yeah, that's looking pretty good. And we probably don't want these links to go to our homepage. Don't know where I'll links are gonna go yet. They're just temporarily, we can just put a hash in this H ref attribute, which we'll just make them link to whatever page the user is currently on. So I'll just save that. Now we just need this product image here. So to get an image for free, I'm going to go to a site called pixabay.com. I don't wanna search for iMac. Scroll down. This is the image I use here, so I'm gonna click on that. Click on Download, download again. I'll take this box and click Download. And it's downloaded our image. So we want to add this somewhere to the folder where our project is. I'm back to VS Code. Show the sidebar again by going to View and the parents show sidebar. Or you can use the keyboard shortcut. And I would highly recommend that you get to know all of the keyboard shortcuts for your platform because you'll just be able to work so much more quickly. Well, I'm just going to show that sidebar. This is our folder here. So I'm actually just going to right-click and create a new folder by choosing this new folder item, and I'll call this folder assets. I will place all of our assets, such as images, CSS, and JavaScript within this folder. So I'm going to right-click this assets folder. I'll create another folder. And I'm going to call this folder IMG for image. We'll place our folder inside images folder. So I'm just going to drag the image is downloaded and drop it into this image folder. By default, VS code does this kind of annoying thing where it joins your folders together, which is making it difficult for me to place this image inside the image folder is currently just inside the assets folder. So if we go to the settings page by going to Preferences settings or using the keyboard shortcut. And we search for compacts or compact folders. We can see this compact folders option for your own sake that then it will now separate all of our folders on child folders, which is much better. So we'll close that and it looks like it has placed it inside this image folder. So that's okay. So I'm gonna close this. I'm going to hide the sidebar. And let's place this image after this nav element. And we do this using the image tag or IMG tag. So I'm gonna type in IMG, hit Enter in this source attribute here we just place the path to the image that we want to display, none. If I just open up the sidebar again, our image is going to be in the path slash assets slash image. And then the name of the file on fox. I'm just going to rename this file here. I'm going to right-click it and rename it to Olmec, got PNG, hit Enter, and I'm back to this image tag and this source attribute. We can just set this to slash assets slash IMG slash oem, OK, dot PNG. I'll save that and see the image on the page is pretty big right now, but we'll solve out in a second this all attribute. We can play some alternative text in here, just in case the browser is unable to load the image, let's say the image gets deleted or something, then we can display some text as a backup. So I'm just going to type in o MAC and this attribute, save that. So if I change this source attribute to an incorrect path, by changing this to all MUX dot PNG. We can say alternative texts here. Instead of the image. I'll just change this back to the correct path. Save that. And it's normally best to style things using CSS. We'll just for now just to stop this image being so ridiculously huge, I'm just going to add a width attribute to this image, which will allow us to specify a width for it. I'm going to set that to 400, which means 400 pixels. So I'll save that. That's looking a little bit better now. Okay, So this is all of the mock-up for our products. Just going to leave the one products on there for now, although we'll add some more products later on. 10. Footer (HTML): So now we just need to add this fossa. So we just got really simple photo here with a border at the top, a little bit of text. So it makes sense to put this inside a footer element. So after this section element, going to add a new line, we'll add another page are just two separate things out a bit. We'll add a fourth element. And I'm just gonna put some text in here, just going to put my name, Dani Connell on that, a copyright symbol. And a bit like we did with the greater than symbol before, to add a copyright symbol we can do and copy and then semicolon. And then I'll just put the current year 2021 and save that. We now have a simple fossa. 11. What is CSS?: Okay, so we're pretty much done with HTML for now. We've added our header. Products are fossa. This doesn't look very pretty. So let's add some CSS to make this page look beautiful and change it from this into this. Well, first of all, what is CSS? Well, CSS stands for Cascading Style Sheets and don't worry about the name too much for now. But basically, CSS allows us to select an element that's on the page or a bunch of elements that are on the page. And give it some style properties, such as background color, text, color, width, height, font size, etc. 12. Base Styles & Font (CSS): The easiest way to start adding CSS is by just studying a style tag to our head. So I'm just going to do that now after the title tag. So you just want to add an opening and closing style tag like that. We can put all of our CSS. So CSS is made up of a list of rules. On each rule is made up of a selector which tells the browser which elements we want to select, which elements we want to add styles to. A series of properties which tell the browser how about element or how the bunch of elements should look. So let's not a real which adds some style to our body tag, which is basically the tag which surrounds the entire page. So for this rule, the selector is just gonna be body, so that saw selected. And then we just want to add double curly braces like this on here. We can place our properties in hair. We have tons of different properties like cola, background, color, font size, width, height. I'm not going to cover all of them in this video, but we will cover quite a few of the most important ones. So the text color on a page is currently black everywhere, which looks a little bit too dark. So let's make all of this text a dark gray color instead. And we can use the color property to do this. So inside these curly braces, we can just start color. We can now assign a cola. And there's a number of ways we can do this. We can add the name of a color such as blue. By the way, we want to end each property with a semicolon like this. So I'll save that. You can now see all of the text is blue. And so why is all the text on the page turn blue when we only added a style to the body tag. Well, that's because styles that we add two elements will cascade down to the child elements. Because every element on our page is a child of body, then every element has also inherited this cola property. However, if one of these child elements has its own color property, which is different from this one, then that property will override this style which is cascading down. So for example, if we style up the p tags by adding pay us the selector and we set the color to red. I'll save that. We say that the paragraph is now red, whereas the headings still blue, because those styles are coming down from the body tag cascading down to those headings. And they're also cascading down to this paragraph, but we've just overwritten that by adding a color property to the paragraph element. Specifically, I'm just going to delete this paragraph rule for now. Save that and back to this color property. So we can use the name of a color such as blue or red. There's a bunch of different column names that we can use, and we can also use the hexadecimal color code, such as harsh 000, 000, 000, 0, which is the hexadecimal color code for black or who had harsh FF, FF, FF, FF. And this is the color for white. So you can see our text disappears because our background is white. And we can also use RGB color codes. So if I delete this and add RGB and then parentheses, then we can add a number for the red component, followed by a comma, then a number for the green component followed by a comma, and then a number for the blue component. So we're setting this to 0 red, 0 green, and 0 blue, which is basically black on these numbers go to 55. So if I change all of these to 55, save that. The text is now why? Well, I'm going to use a hexadecimal color code for this. So I'm going to remove this. I'm going to set this too harsh. And then six 3s, which is a pretty dark gray color, which is not quite black. So that looks quite nice now, on our body also has some space all the way around the edge. You can see this horizontal rule we added doesn't go quite to the edge of the page, are neither does any of this text. And that's because the browser at some default style to most elements, we can use Chrome DevTools to see what's going on here. So open Chrome DevTools, you just want to go to View Developer Developer Tools or you can use the keyboard shortcut here. And this will open up developer tools. One thing we can do in developer tools is inspect all of the different elements on the page. We can see what style is being added to them and we can adjust the style as well. So if I click on the body tag, we can see our color property that we added before. We can change that from here if we want to see how it looks. Oops, too many 6 is there. So we can play around with our style within this too. But anyway, you can see here it says user agent style sheet and we can see is adding a margin of eight pixels to the body. So this style is coming from the browser itself, from Chrome. On every browser has slightly different default styles for different elements. But anyway, I want to get rid of this margin that's being added. And if we hover over the body element, we can see this orange border around the page. I'm not orange border is the margin that's being added. So I want to set the margin to 0. So if we click down here after this color property, we can add a margin property and set that to 0. And we see all that margin disappear. And so now we need to add this style to our style sheet. So I'm going to copy this margin property, paste it after this color property, and save that. And that margin is now removed permanently. This formula we're using isn't very nice. So I'm going to replace this with a fancy form. And we can find tons of free fancy fonts on the Google Fonts website. So I'm just going to Google. Google fonts. Don't see the Google Fonts website. I'm going to use this Roboto font, which is one of the most popular fonts. So the moment, so I'm gonna click on that. We need to choose these files that we want and we're just going to need regular. So I'm gonna click communists bottlenecks to the regular one. And we're going to need bold as well. So what if we come up with style next to the bold font? And if we look over on the right, gives us some code for implementing this font into our webpage. So it gives us a couple of link tags here. These need to go in. So when a copy these link tags, and I'll paste them above this style tag in our head on save that. And it also gives us a CSS rule as well, but we need to add, and this is going to go in our CSS. So I'm going to copy this and we'll add it to body selected here. So I'll paste that in there. And if we save this, we now have a much better looking fun. And I also want to hide these HR's, these horizontal rules. To select those we can just type in hate jar or double curly braces so you hide them. We can use the display property. We want to set this to not save that. Those horizontal rules have now disappeared. What we've done here is set some kind of base styles for the whole page. So I'm going to add a comment above these to label these styles as our base styles. And so add a comment, just going to add a new line at the top to add a comment in CSS, we just started forward slash and asterisk, and then we close it off with an asterisk, forward slash. We can put anything we want inside this common. So I'm just going to put base styles. This is just a comment, so this isn't making our CSS do anything. It's just a comment which will be completely ignored by the browser. We're just using this to label our CSS onto, split it up into a number of different sections. 13. Header - Background Color (CSS): Let's add some styles for our header now. So we want it to look like this. So we wanted to have a dark gray background and we want a title or a logo to be over on the left. Navigation items to be over on the right. So after our base styles here, I'm going to Another comment that's actually a shortcut we can use to add a comment which on a Mac is Command forward slash on a lab that comment forums on Windows, I think the shortcut is Control and forward slash. And if you want to see all of the keyboard shortcuts, now just give me go VS Code keyboard shortcuts. And I'll just click on this Visual Studio Code key bindings link. And then on the right here jumped down to keyboard shortcuts reference. And you can see all the different platforms here. So if you want to see the window shortcodes click on Windows, and you can see a nice little cheat sheet here. So if any of the shortcuts I use are working on Windows and you're on Windows and then just find the correct keyboard shortcut here. Okay, so we're going to add some styles for the header. So I'm going to put the word header in this comment out a new line. And so we want to style this header element which has this orange tie, all these navigation links. We could just use header for our selector like this and start adding some styles. However, later on we might have other header elements in our page or in our site. For example, you might have a product header or something like that. And if we just use the header element selects like this, it will style every single header element that's in our website. And right now, we only want to style this header. So what we can do to be more specific with our selectors is by adding a class to an element and then using that class as our selector. So I'm gonna go to this header element here, just before the closing angle bracket. I'm going to add a space, and then I'm going to add an attribute called class. I'm going to set the value of this two header to use a class selector. In our CSS, we can just do dot and then the name of the class and the name of classes header. So we just wanna do header, and we're now only selecting this specific element. Okay, so we wanna get this had a nice dark background color like this. And we could do this with the background color property. So inside this select, so I'm just going to add a background color. By the way, in VS Code, you can see this IntelliSense, which helps you to see what properties are available, are quickly, add them to the page, and it also adds the colon, the semicolon forest. I'm going to set this to the same color we used on our body text. So harsh. 3, 3, 3, 3, 3, 3, because all of these numbers are the same, we could actually show it on this to three, 3's lightness. I will also change it here. I'll save that. And we can now see this gray background color on our header. 14. Header - Logo & Nav Positioning (CSS): I'm currently heading navigation items accordingly stacked on top of each other, but we want the heading to be over on the left, the navigation to be over on the right, as you can see in the finished page here. And we can do this by using the display property on a header. So I'm gonna add a property called display, and we want to set this to flex. This flex property will turn this element into a row with all of its direct child elements. So this one and this nav element displayed side-by-side within that row. So you can see this title and these nav items. And now side-by-side, however, we don't want these items right next to each other like this. We want the nav items to be right over here. So to do this, we can use the justify content property and we can set this to a bunch of different things such as center to place those elements in the center of the rope. Or we can say it to flex and to force all of the child elements over onto the right. Well, what we wanna do is spread our items out across the whole of this row. So essentially we want to put space in-between the elements. To do that, we can set this to space between, and I'll save that. And we can now see our title is over on the left, on our nav items are over on the right. 15. Header - Text Styles: So let's add some style to these links in our header because they currently have this horrible purple color. And again, that's the default style that's coming from the browser. And if you have your Chrome DevTools open and you click on this little button up here. We can click on an element to see what's going on. So if we scroll down here, we can't actually see this purple color anywhere, but it is being added by the browser. And if we go to this computed tab, we can see it here, this purple color. So I'm going to set the color these legs to a nice light gray color. So we want to select all of these a tags that are within this header. To do that we can just again our header. And then after that a, because we want to select the a tags that are inside the header. So this is basically just saying select all of the a tags which are inside this parent with a class of header. So I'm gonna set the color property to a light gray color. So I'm going to use hush CCC. I'll save that. And that looks a little bit better. And I also want to get rid of these underlines. And we could do that with the text-decoration property. So I'm going to set the text decoration to NADH. We see those on the lines disappear. We're going to reduce the font size on these as well. I could do that with the font dash size property. There's a number of different types of values we cannot, we cannot pixel values such as 14 pixels, which will basically set the height of the text to 14 pixels. We can also use rems on EMs. I'm not going to get into those too much right now. So we have rems, we have atoms. But the simplest one to understand is pixels. So I'm just going to be using pixels in this video. I'm going to set font size to 14 pixels, and I'll save that. 16. Header - Hover Effects & Animation: I'd also like these links to change color when we hover over them, right now, they just stay the same. And it's better if the color changes so that the user knows that these can be clicked on to style an element that's being hovered. We can use a pseudo selector. So what we can do is again, I had a, a, but now we want to add a colon and then hover as our selector. So this is basically saying at these styles to all a tags that are within the element which has a class of header which are currently being hovered. So these styles we add, Hey, we'll only be added when we actually hover over an element. So when we do hover over the element, I want to change the color. So I'm going to change the color to white, and I'll save that. And if I hover over these elements, we can see them change to white when we hover over them. We can also add a little bit of an animation to this, so the color doesn't suddenly change. Book gradually changes from the light gray to the white by using the transition property. And we want to add this transition property to the element itself rather than the pseudo selector. So we'll add that here where we're selecting the a tag within the header. So we want to add a transition property. We can specify a CSS property which we want to animate. And we want to animate the color property. So we can just start color here. And then we can add a duration for this animation. So if I set this to one in 1 second, I'll save that and hover over one of these links. We can say it very slowly change from gray to white when we hover over it. Well, this is a little bit too long. So I'm going to change this to nought 0.3 seconds. I'll save that. We now get a nice subtle little animation when we hover over these links. 17. Header - Nav Styles: Okay, let's improve the style of this navigation list over here. Currently these items are stacked on top of each other. Must because LI elements block elements by default, which will stock what we want them to go side-by-side like this. And again, we can use the display flex property to do this. So I'm gonna jump back to that page. I'm going to add a new selector. What we wanna do is set this URL to display flex so that the elements inside it will be placed side-by-side in a row instead of stock. So the selector, so again, we want to add header. We want to select the nav element and then the UL element within that. We want to set this to display, flex. Save that. And we can see these items are now stacked side-by-side. We still have some bullet points on these list items like these bullets, you can see there, we can see a bullet covering up the word home there. And to get rid of that, we can set a property called list-style to not. I'll save that and we see that little bullet disappear now. 18. Header - Margin & Padding: By default, URLs have some margin and padding added to them. If we hover over the element here, we can see the margin in orange at the top and the bottom. And we can see the padding on the left in that green color. So I'm also going to set the margin to 0 and the padding to 0 as well. By the way, margin is basically spacing that goes around the outside of an element. And padding is spacing which goes inside the element. Just to demonstrate that I'm just gonna add a border property to the a tags in the header. So I'll set the border two pixels, solid white. Save that. And we can see a little border around each of these a tags now, so if I set a padding of 10 pixels, you can see it's added 10 pixels around the inside of the element because the border we added is on the far outside of the element. And we can see the space has been added inside the element. But if I change this rule to margin ten pixels, instead of padding and save that, you can see it's now added that space around the outside of the element. So that's the difference between margin and padding. I'm just going to get rid of this margin rule and this border rule and save that. This heading tag we're using here is also going to have some default margin. And we can see the margin in orange at the top and bottom of the element there. So I'm also going to target this and set the margin and padding to 0. So I'll put this rule here. So header H1, because this title is in a H1 element, we'll set this to margin 0, padding 0. Now that we've removed all the padding and margin around these elements, I'll header is looking a little bit small. We had no padding around the edge. So let's add some padding to the header. So I'm going to target the header element on a padding property. And if we want to set the padding in all directions around the element, we can just add a single pixel value like this. So ten pixels, I'll save that. So this is going to add 10 pixels padding on the left, 10 pixels at the top, 10 pixels on the right, and ten pixels at the bottom. But we can also specify all of those directions of padding individually. So if I set this to 10 pixels, 20 pixels, 30 pixels, and 40 pixels, well this is going to do is our 10 pixels of padding to the top, 20 pixels to the right, the pixels for the bottom and 40 pixels to the left. So it goes around clockwise starting at the top. So top, right, bottom and left on Margin works the same way as well. Or if we just want to set the vertical margin with one value on the horizontal margin or padding with one value, then we can just specify two values. So if we set this to 10 pixels and 20 pixels, this is going to add fats. I'll just save that. This is going to add 10 pixels to the top and bottom and 20 pixels to the left and right. I'm happy with this amount of padding now, by the way, I'm zoomed into the page here. So on a Mac, if you want to zoom in or zoom out, you can use command plus to zoom in or Command minus to zoom out. So I'm just going to zoom out to a 100 percent so we can see how this is actually going to look. Okay, This is looking pretty good. We need a bit of space between these navigation items. So I'm just going to scroll down to these UL styles. After this one, I'm going to target the a tags that are within this UL, this unordered list. So dot header nav UL. And I'm just going to add a margin on the left. And to do that we can use the margin dash left property. And we'll set this to 50 pixels. Save that. And we can say is added 50 pixels to the left of each of these links. So we now have a nice bit of space between our links. 19. Header - Constrain the Content: Okay, So this header is looking pretty nice now at this size, if I close the DevTools and stretch this out, you can say on a really wide display, we have our title right over here, on our links right over there, which doesn't look too good. So we need to constrain the content of this header to a particular width in the middle of the screen. Okay, so I'm going to settle a reusable class for this. So I'm going to add another section of styles between our base styles and our header styles. So when I add a comment here, and I'll call this reusables. Or you could call it generic or something like that. I'm going to set up a class called constraint for constraining content. To the middle of the page. I'm going to give this class a maximum width with the max width property. And we're going to set this to 960 pixels, which is kind of a standard maximum width for webpages or for the content of web pages. So I'm going to save that. I'm going to jump down to our header in the HTML. I'm going to surround everything that's inside the header with a div, with a class of constraint. The div is just an element we can use when something that we're adding to the page, it doesn't fit neatly into something like header, section or article or something like that. So you do see lots of dibs on webpages. So we'll replace everything that's inside the header, inside this div. By the way, I just selected everything unused Alt on open down to move it up into that div for your shortcut might be different on Windows. So I'll save that. This has going a bit wrong mass because we had this header elements to display flex, which was changing this into a row and making all of its direct child elements display side-by-side along the rope. But now that we've added this div, this is now the direct child element of the header. So we now actually you need to add the display flex rule to this div instead of the header, because this is now the element that we want to be a row. These are the elements that we want to display side-by-side. So I'm just gonna jump back up to our styles. After this dot had a rule, I'm just going to dot dot constraint. We're going to move this display flex rule and this justify content rule down into that. So we'll call these, paste those in here. I'll save that elements are now displayed correctly again, although because of this constraint class, we've added this content in our header now has a maximum width of 960 pixels. So if I just right-click this and click on Inspect, stretch the browser out a little bit, and hover over the constrained elements. You can see this little drop-down thing you there, which says that this is 960 pixels wide. However, we want this to be in the center of the header and not over on the left like that. So to do this, we can just jump back to this constraint class. We can set the margin property. I'm going to set this to 0 on the top and the bottom. Well then we're going to set it to also on the left and right and set this to auto, will force this element, this constraint elements to be in the center. So I'll save that. Now if I stretch this out, you can see all of the content of our header is in the center of the page. Okay, so I'm just going to adjust our CSS a little bit here. We're going to be reusing this constraint class later on to keep all of our product content here in the center as well. So this padding that we've added to the header here, I'm going to move it to this constraint class, because whatever you use these constraining elements in classes, you generally need a little bit of padding on those elements. So what do we do this putting up into this constraint selector, and I'll save that. Everything still looks exactly the same. 20. Header - Add a Logo: Okay, so now I just want to replace this orange title with a logo like this orange that you can see there. So I'm gonna jump to a site called Icon finder.com. I'm going to search for orange. We'll scroll down so I can find something that looks nice artifacts. I'm going to scroll back to the top. Change this option here to free, so that we only see the free icons. This orange looks pretty nice. So I'm gonna click on that. I'm going to choose 64 pixels because we don't need this to be too big. We're going to download that. I'm going to open up the sidebar in VS Code, drag this icon into our image folder. I'm going to rename this to orange dot PNG. So I'll right-click Rename and orange dot PNG. Let's place this image in our header instead of this title. So I'm just going to hide the sidebar again. Jump to this heading which has the orange text in it. Leave this text here. This orange tax because that's the title of our website. So it's a good idea for SEO purposes to leave that text here, but we can hide it later on with CSS. So I'm just going to break up these elements on two new lines like this. And I'll break up the text inside this, a tag onto new lines as well. What I'm going to do is wrap this text in a span tag, which is just a kind of generic inline element that we can use. So I'm just going to fire the wrap with abbreviation commanded. Wrap that in a span and I'll save that. And you can say I didn't, this span tag hasn't changed anything here because this is an inline element, is basically like the inline version of a div. It doesn't add any particular style or anything, just gives us a way to target particular part of our content and then style it. So I'll jump up to styles. And after this header H1, style out dot header H1. And then I'm going to target this spot. So let's spawn here. Just set that to display none. Save that. We can say that text is now disappeared, although it's still on the page for SEO, for search engines and stuff like that. So after this, I'm going to add an image tag by typing in IMG hit tab on. Our image is going to be slash assets slash image slash orange dot PNG. So in the source attribute will add slash assets slash IMG slash orange dot PNG in the alt attribute or just add orange. Save that. We can now see the orange on the page. However, it's looking a little bit big. So I'm just going to add a width attribute to this image. And in fact, let's use CSS to do that. That's the more correct way to do this. So here's where we're targeting that spot is in the H1. So let's add a rule after that dot header H1 and then I and j. I'll set the width to, let's say 30 pixels, and I'll save that. This image is now 30 pixels. This image has made our header little bit taller. And although the image is the vertical center of this header, these items on the left, I'm not quite in the center. We can fix this by adding a flex property to our flex element, which is this constraint element which is here, which is inside the header. So in this header constraint selector, we can add a new property called align items. And if we set that to censor, save that, we can now see that all of these elements in our header now in the vertical center. Okay, so I think we're done with this header for now in terms of CSS. 21. Product - Text & Image Side By Side (CSS): Let's add some style to product listing now, if I just jump back to you the finished page, what we wanna do is improve the styles of all of the headings. Paragraph out some styles for the buttons. And we want to use display flex again to display all of this tech stuff over on the left, on the image, over on the right. And we also want to constrain the content to the middle of the page, which like we did with our header elements. So I'll just jump back to our page. And the first thing we wanna do is content. And we can use that constraint class that we added before. Reusable section. We can use that class on this section element because all of our products articles are going to be within that element. So we can just talk about class to this section. So class equals constraint. Save that. And now all of the product content is constrained to the middle of the page to a maximum width of 960 pixels. And by the way, the reason that we used max-width in this class instead of just width, is because if the viewport gets smaller than 960 pixels, than the div will scale down, but it won't get any bigger, a wider, I should say, 960 pixels. Okay, so we've constrained our content. Now we want to use display flex to display all of this text off on the left, on the image on the right. So I'm gonna jump down to the mockup for this article. And if we set this article to display flex, that it will make all of its direct children be displayed side-by-side in a row. And we don't want the H1 and H2 and the paragraph tag all side-by-side going from left to right, we just want all of the texts of these buttons on the left, on the image, on the right. So inside this article, I'm going to add a div and we'll give it a class of say products, dash texts, tub. I will place all of the text content on these navigation links within that div. And then I'll also surround this image within a div. And we'll give this a class of products, dash image, move the image up into that div. I'll save that. And we now want to set this article element to display flex, which will turn this element into a row and display this div with our text on this div with our image side-by-side. So first I'm just gonna add a class to this article. I'll just call it product. And we'll add some CSS to this element. So let's add a new section of CSS with a comment, and I'll just put product in there. So we want to target the product class. If we've got it to this article element, we want to set this to display, flex, save that. And we can now see all of the tech stuff is over on the left and the image is over on the right. Just to make sure both the texts concept on the image vertically centered, we can again use the align items property. So set that to sensor should be aligned items. So I've got to center. And we can see the text on the image are both vertically centered. 22. Product - Border, Padding and Positioning (CSS): I don't want to display a little border between each product. So I'm going to add a border bottom property, which will add a border just at the bottom of this product element. I'm going to set this to one pixels, which basically means the border will be one pixels thick. So two solid, which means there'll be a solid border because we can also set this to dashed. A couple of other different ones. What we usually use solid. So one pixel solid and then we specify the color. And I'm going to set it to CCC. Save that. We now have this little border. And I think we could do it a bit of padding at the top and bottom of each products or that we have a nice gap between the content on the border. So I'll also add a padding property here, almost at the top and bottom padding, say a 100 pixels and the left and right padding to just 0. So I'll save that. We now have a little bit of space at the top and the bottom are right now this text on the left, on this image on the right, I'm not 5050. The textContent is slightly wider than the image concept. What needs to be 5050. So what we can do is target both the product text div on the product image div and other property to those. And if we want to target to different selectors at once, we can just do that like this. So we want to target the product texts DIV, Let me just add a comma and then add our second selector for the product image div. So dot-product text comma then adopt products dash image. We can use the flex property to tell these elements how, why they should be in this flux rope and whether they should grow or shrink. So the flex property has three values. The first property determines the base width of the element and we want to set it to 50 percent. The second value determines whether this element should grow. And I don't want either these elements to grow on them to stay 5050. So I'm gonna put 0. And then the third value determines whether this element should shrink, and I don't want it to shrink. So again, we'll set that to 0 at the semicolon, save that these are now 5050. I don't want to make sure this image takes up the full space of this 50% of this row. So I'm just going to target this image. So a lot of other selector here. So I want to target the dot product image div, and then I want to target the image inside it, which is this image here. We want to set the width to a 100 and then save that to make sure this image always fills the available space in this 50% of the row which this div is occupied. 23. Product - Text Styles (CSS): Okay, so now let's improve the styles of our texts here, these two headings on this paragraph. So after this selector, I'm going to target this page warm tag. So I'm going to adopt product text, one because we want to target one that's in this div with a class of product text. I'm going to set the font size to 48 pixels. Let's make this nice and big. Save that. We're going to reduce the margin below this heading of the abet. So I'm going to set the margin bottom to 25 pixels. Save that. And that brings this heading a little bit closer to the first setting. Now I'm going to change the font size of this second heading. So a lot of new selective products, Dutch texts than H2, because this is a H2 and we're going to set the font size to 21 pixels and save that last little bit smaller. Now, I don't want to set the size of this paragraph font size to the same size as the second heading. So allowed product dash texts and then pay cause this is a paragraph tag, p tag. Again set the font size to 21 pixels and save that. And we can do with a little bit more space between the lines in this paragraph. And we can do that with the line height property. So if we set this to one, save it, this will I basically no space between lines. So I'm going to increase this to 1.4 and save that. And let's just looks a little bit more easy to read with that little bit of line height. Okay, let's dial up these navigation links a little bit. We'll scroll down to the mockup grad class to this nav element. We call this product dash enough. Save that. I will use this class to style up these links a little bit. So a lot the select both the product's image. Because in general you try to keep your styles in the order of the elements that are on your page. So allowed the selector here. So we're going to target the products. I'm going to target the UL inside that, the unordered list. Let's get rid of these bullets. I'm going to set the list style property to NADH and save that. I'm going to remove the default margin and padding and margin and padding to 0 to make these allies inside the UL display side-by-side, I'm gonna set this URL to display flex as well. So a lot. Display flex and say that these items are now side-by-side. I've just got a bit of margin to the right of each of these lakes. So we're going to target the product nav element, the URL, and then the a tag inside that. Because you can see we have these a tags within each of these allies. You could also add the margin to the LI element if you like. I'm going to add it to the a tag. We're just going to set this to margin right? Set that to 20 pixels, save that. We now have a little bit of space between these links. 24. Buttons (CSS): Okay, let's add some style for our boxes now make these look nice. So I jumped to the finished page. We have these nice button styles. We have an orange box around a white button with some nice hover effects, animations. And it makes sense to add these classes in a reusable way because it just reload the page later on. We're going to be adding this cookies with j, and we have the same style button in here as well. So I'm going to jump back to our page. We'll add a class to each of these a tags, these anchor tags of button. And by the way, I did a multiple selection there by placing my cursor and holding down the Alt key and clicking again. This allows us to type in two places at the same time. And the short quote might be different on your platform. So just check the cheat sheet. Okay, So let's add some style for this Boltzmann class. This is going to be reusable, so we put it in our reusables section. So dot button. For now I'm just going to make both of these buttons orange by this one, but we will create an orange one on a white one later on. So we want to set a background color. So I'm going to add a background color property, and I'm going to set this to harsh E F6 900. I'll save that. And by the way, you can use this little color picker if you want to pick a different color. I want the text color in these bottles to be white. So I'm going to set the color property to white, save that. And I don't want to remove these underlines. So like we did before, I'm gonna set text decoration to not to remove those underlines. Going to add a little bit of padding to these buttons. So a lot of padding property and allowed eight pixels of padding to the top and bottom, 16 pixels of padding to the left and right, we now have an iceberg padding. I don't want to add some rounded edges. These buttons, you can see here. And we can do this with the border-radius property. So we want to set border-radius. Let's set it to 20 pixels. Save that. And we now have these nice rounded edges. I want to have orange buttons and white buttons, not just orange buttons. So we have an orange one, the white one. So what we could do is we could have our basic button styles on this button class. And then we could have some additional classes to switch out the colors on the different buttons. So in addition to this bone class without a space on the underside, another class to it, I will add a class of button dashed orange, and add on this Learn More button which we want to be white. A lot of class of button dash, white. Save that, and I'll jump back to button styles a lot. The Watson orange selector, and we'll move our background color, color properties down into this selector. And if I save that, we now only see those colors on this button on the left, which has button orange class. We'll add a selective for the white Watson. Watson dashed white spot and it's just going to be white. So I'll set the background color to white. I'll set the color to the same orange color we have in the background of this button. So I'll copy this color code and paste that there. And this looks pretty good now. So we now just need some hover effects on these buttons. So after the Watson orange selector, we'll add a hover pseudo selector. So puts industry orange colon hover, hover it. We're going to change the background color slightly. I'm just going to copy this color code, paste it here. And then I'll see if I can use this picker to select a lighter orange color. So I'll just move the thing, the overheads list, kind of a light orange and let's see how that looks. Yeah, that looks pretty good. Let's add a hover color for our white board soon as well. So after the button white selector will add button dash y, colon hover. I will set the background color. I will just give it a light gray color. So I'll just use a color code reviews before, which is three e's. She's almost white but not quite. And that looks pretty good. We want to add transitions to these hovers like we did on our links in the header. So we can just use this button class, which is on both of these buttons at the transition property. And we want to transition the background color property. So with that background color. And again, we'll make that transition last nought 0.3 seconds. Save that. We now have a nice hover effect on each of these buttons. These buttons look a little bit close to the paragraph there. So I'm just gonna add a little bit of margin to the top of this nav element. So let's find the CSS selector for that. So we don't have a selector for the product nav directly. So I'll add that here. Product dash enough, margin top or was tried 20 pixels, maybe 30 pixels. Yeah, that looks a little bit better. Now I have a little bit of space between the nav items, This text, and we have quite a lot of texts here in this paragraph. So I'm just going to remove a little bit of that text. And by default, text in your editor in VSCode, we'll just keep moving over to the right like that in one line. But we can make the text wrap onto multiple lines if we go to View and then toggle word wrap, or you can use the keyboard shortcut. And the tax in this paragraph is now all wrapping. So I'm just gonna get rid of a little bit of this text, maybe this much. I'll save that. That's looking a little bit better now. 25. Add More Products (HTML & CSS): Okay, Our product, this then is looking pretty nice now. So let's add a few more products to our page. So I'm going to select all of the article element and copy that. Paste another one after it, and then another one. Again. I'll save that. And we can now see three products on the page. I'm going to change this second product, two different products with a different image. So I'm going to jump back to the pixabay site and I'll search for a MacBook. See, we can find a nice picture of a MacBook. This one looks pretty good. So when I click on that, download that I'm going to open up my sidebar, drag this image into our image folder. In the assets folder. I'll rename this file to overbook dot PNG. Then I'll close this image and hide the sidebar page back on the screen. So I'm going to change the middle product. So the middle article, I'll change the source attribute on this image to the image we just downloaded, which is asset slash slash 0 book dot PNG. And I'll change the old text to 0 book as well. Say that we can see that image there. And I'll just change the text here to the new OH, book. And this one, I'll just change amazing to incredible. I'll save that. So we now have two different products out to be good if we could reverse the order on some of these products so that the image is on the left and the text is on the right. One way we could do that is just by swapping around these two divs. So swapping the product image and the text div like this, and we could do it that way. What we could actually do this with CSS. So we're just going to undo that and put them back where they were. Save that. And we use CSS to do this instead. So what we're gonna do is on this middle products, on this article tag with an additional class called products reverse. And we're going to use this class to reverse the items in this flex row. So the image is on the left, on the text is on the right. So I'll jump back up to our CSS. After this product selector, I'm going to add dot products reverse to reverse the order of the items. This flex row, we can just add a flex direction property and set this to row dash reverse. And I'll save that. We can say these two items in this flex row of now switched around. The spacing between these products is looking pretty nice. I think we have a little bit too much space at the top of the first product here, there's a little bit too much space between the concept here on the header, but I still want to keep the padding that's at the top of all the other articles. So how can we do that? Well, we can use another pseudo selector, which is the first child selector. So this article here is the first child of this section element. We can use the first child pseudo-selector to select only this article, this first article. So I'll jump back up to the styles. After this product selector, I'm going to adopt products and then a colon and then first dash child. So this will only select the first child, which has a class of product. So just this product here. On this first product, I'm just going to reduce the top padding. So I'm going to set putting desktop. Let's try 20 pixels, save that. And that looks a little bit better now. And I also want to read this border from the last product in the list. So the last child, and we also have a last child pseudo-selector that we can use do that. So I'm just going to duplicate this first child selector by holding down Alt and Shift and pressing down again on Windows, shortcut might be different. I'm going to change this to last child and I'm just going to remove the border on this last child. So I'll set border dash bottom to nod. I'll save that. And we can now see that border disappear on the last product, but we can still see the border at the bottom of the other two products. Okay, so I'm happy with this product listing now. Think it looks pretty good. 26. Footer (CSS): So let's just finish by styling this fossa. This is going to be really simple. If I look at the finished page, we just have a border all the way across the top and a little bit of padding around it. So the first thing we wanna do is constrain the concept of the spots a cause. You can see this text is right over to the left here. So what we're gonna do is we're gonna jump to the markup for the fossa, which is here. And I want this photo to have a border all the way across the top of the photo. But you can see here. So I want this border to go beyond our constrained area all the way from the left to the right. So we don't want to add a constraint to the fossa. We instead want to add a div inside this water, put this content inside that div, and then add the constraint class to that div. So a lot of div with a class of constrained. And we'll move this content open to that and save that. Jump back to the page. This content is now constrained. It's in line with the other content. Let's add a little bit of style to this water. And again, we don't want to target the footer element because you might have other forces in our website. So let's add a class of water to this footer, and we'll use this class instead. So I'll jump to our styles. A lot of new comment which says photo. And we'll target the footer. And I'm just going to add a border of one pixel solid. And we'll use that light gray color so harsh CCC. And save that, we can now see that border. I would just need to add a little bit of padding as well. So are the padding property. I'm allowed 20 pixels of padding on the top and bottom and then 0 on the left and right. Save that. This photo now has a little bit of padding around it. 27. Move CSS to Separate File (CSS): Okay, so we're done with CSS for now, although we are going to add a little bit more later on. But we basically finished styling our page and it's looking pretty nice, but we have a lot of style. Here are our HTML page. This is quite long and is making our HTML page a little bit messy. This is not usually how we add styles to a webpage in a style tag like that, what we usually do is put our CSS in a separate file. And there are many reasons for doing this. It keeps our project organized. And also if we keep our style inline, the HTML page like this, then when we create more pages, for example, later on we're going to create an about page. Then every time we want to change the styles, we would have to change the styles in this style tag on both the index.html page and on the about page as well, which would just be a nightmare. So we're going to move all of these CSS into a separate file. So I'm going to show the sidebar. Inside the assets folder, I will create a new folder called CSS. Then inside that, when I create a new file called styles.css, and you don't need to use this name. This file does need to end in dot CSS. I'm gonna jump back. Index.html will copy everything inside this style tag. So I'll select all of that by holding down Shift and clicking the bottom. And actually I'll quote lot, and I'll remove this style tag. Save that. Our page looks terrible again. But don't worry because we're going to paste it into this style.css file. I'm just going to indent this back to the left by holding down Shift on top. I'll save that, go back to index.html. Now we need to pull this CSS file into this HTML page, which is going to hide the sidebar. We can do this by adding a link tag to our head. And if I just start typing in link and I hit Enter, it will automatically add a style sheet link forest. So it's pulling in a CSS file. We just want to add a link tag to the head of this rel attribute and set it to style sheet so that the browser knows that this is a style sheet. Let me just want to set this hates href attribute to the path of our CSS file. And our CSS file is dot slash assets slash css style.css. And if I save that, we should see a website comb, beautiful again, which it does. 28. What is JavaScript?: Okay, let's move on to JavaScript now. So if HTML tells the browser what elements to display on the page, and CSS tells the browser how those elements should look and what the flip is, JavaScript fall? Well, javascript is a scripting language which allows us to make things actually happen on our page, such as showing an element or hiding an element, or loading some content within a particular part of the page. We can use it to create carousels, animated image galleries, and stuff like that. And it also allows us to listen out for user input, respond to it, such as when the user clicks a button or when the user scrolls down the page, or if the user drugs in element or something like that. So one simple thing that we can do with JavaScript on this page is to display a cookies banner at the bottom of the page. After a couple of seconds, we could add a button to that banner. And then when the user clicks that button, we can then hide the banner with JavaScript. 29. Add Script Tag (JS): The quickest way to JavaScript to your page is to just add a script tag to your HTML file. And we can add a script tag either in the head or in the body. However, everything in your HTML page will load from top to bottom. So if you have a really big JavaScript file that's being loaded in your head, then the browser will wait for that JavaScript file to load before it starts loading all of your page elements. So placing JavaScripts in your head can actually stop the elements on your page from loading. So a common practice is to place your script tags at the bottom of your body tags. So let's add a script tag right at the bottom of our body. So we just need to add a script tag like this, opening and closing tag. And we can place all of our JavaScript in here. 30. Wait til Page Loaded (JS): Before we start firing JavaScript, displaying things on the page, we want to make sure all of our page has been loaded. And we could do this by adding an event listener to our document, to our page. So inside the script tag, we first want to reach out to the document, and we just do that by typing it in document. And then we want to add an event listener to the document. And to do that, we fire a method called Art event listener. By this event listener on you need to make sure you capitalize the a and the L. And then we add parentheses like this. This method expects two parameters and we separate parameters with commas. And the first parameter is the event that we want to listen out for. We need to put the same quotes. You can use single quotes or double quotes on the event that we want to listen out for is the DOM content loaded. Event on DOM just stands for Document Object Model, which basically just means your HTML page on all of the elements. So we want to fire some code after this event has been triggered by the browser. So we add a second parameter here by adding a comma. I'm just going to stretch this out a little bit. And what we want to do here is fire a function. So we add function and then parentheses, and then a space, and then double curly braces lined up. And then with your cursor inside these double curly braces just hit editor. We can now trigger some code inside this function after this DOM content loaded event has been triggered. So basically, after everything on our page has been loaded on, just to make sure this is working, I'm just going to fire a console log on. These are logs of user doesn't see what we can see though in our browser, in our DevTools. And it's just a really handy way for us to figure out if things are working and our JavaScript. So to fire out a log, we just via console dot log and we're just going to log out some text here. So we want to put some quotes inside these parentheses. And you can use single quotes or double quotes. And I'm just going to log out. Dom is, I'm ready and I'll save that. And if we jump back to the browser and open up our dev tools, we reload the page. We can see in our console here, DOM is ready. And if you can't see this console when he might just need to press the Escape key. You can circle it with the Escape key like that. 31. Cookies Banner - HTML: Okay, so before we add some more JavaScript here to display a cookies banner, going to need to actually create a cookies been using HTML and CSS first. So let's add some HTML for our cookies been, so after out, what, I'm going to add a section element with a class of cookies, Dutch manner, I will place our cookies but our content in here, and I'll just add H1 heading on. I'll just put the texts. This website uses cookies and then a lot of paragraph with some text inside it. This is really annoying, pointless. Cookies banner. Save that. I'll scroll down. And we can see this at the bottom now. And we're also going to need a button that the user can click to close this banner. We already set up some classes for persons. This button class on the bottom, orange class for an orange button. So I'm going to drop back down to this banner, Ladd an, a tag. And I'll set the hate draft to just hash because this button isn't going to link anywhere. It's just going to trigger some JavaScript. We need to add these classes. So a lot of glass of water and a class of button Dutch, orange. We'll just put the texts, clothes inside this tag. And I'll say that we can see that close button there. 32. Cookies Banner - CSS: And the first thing we wanna do is constrain the content that's inside this panel because it goes right over to the left like that. So we'll stick a div inside these cookies part up with our constrained class, which we've been using to constraint concept. And I'll move everything else inside that div and save that. This content is now constrained. So let's add some style to this cookie banner. So we can use this cookies banner class to add some style. So I'll jump to the bottom of style.css allowed a new section here with a comment which says cookies banner will target the cookies banner class. I will give it a dark gray background like a header. So set the background color to the same color. She 333. Say that it's now got a gray background. However, we can't see the text now, so let's give the text a light color. So a lot of color property, and I'll set this to d, d, d, So a light gray color because this heading on this paragraph inside, these cookies been an element, this color property that we've sat on this cookies bonus section is cascading now to the elements inside it. Okay, so I'm going to add a bit of padding in this manner. So we'll add a padding property, a lot of 30 pixels of padding to the top and bottom on 0, padding to the left and right. Save that. And we now have a little bit of space at the top and the bottom. Right now this banner is right at the bottom of our page. So if we're right at the top of our page, we don't see it. So we want it to be fixed to the bottom of the page regardless of where we are in this document. So even if we're right at the top, we should be able to see this banner down here. We can do this using the position property. So I'm going to add a position property to the spanner. And we want to set this to fixed. And I'll save that. We now count see the banner on the page because we need to tell the browser where this element should be fixed to. So we want it to be fixed to the bottom. So we can use the bottom property, set that to 0 because we want to fix this element to 0 pixels from the bottom. So basically right at the bottom. So save that, we can now see this banner is fixed to the bottom. However, it's now no longer taking up the whole width of the page. Because when we make an element fixed, by default, it will just take up the size of the content that's inside it. So we now need to explicitly set the width of this element. I can do that with the width property. We want to set the width to a 100 percent. We'll save that. Now takes up the full width of the page. We have a bit more space at the top of this banner than we do on the bottom. And that's probably because this heading here. So top margin on it. So I'm just going to right-click this heading and we can click on Inspect. So you jump straight to this element in our element inspector in the DevTools. And we can see here that the user agent style sheet is adding some top margin and bottom margin to this heading. So I'm just going to add a new rule here to target not H1. So cookies been a H1 and we'll just set the margin top 200. We now have an equal amount of space at the top and the bottom. And I want this button to be over on the right here instead of underneath the texts. And again, we can use display flex to do this. So I'm just going to jump to our markup on index.html. So we want this text, this H1 and this P. So you'll be over on the left is a tag to be over on the right. So what we could do is set this constraint if to display flex and then place our texts in a day and then place this button and a div. And then we should have one div with the text over on the left. I want div with the Watson over on the right. So I'm just going to surround the text in a div with a class of cookies, been a sext or move the one on the P stock in selective and a lot of other div with a class of cookies Dash button. And we'll place our button inside that, and I'll save that. And now we want to set this div with the class of constrained to display flex, but only when it's inside this section with a class of cookies mother. So jump back to style.css, scroll down to the bottom. So a lot of new rule here. So we want to do cookies, Dutch painter, and I might want to target that constrain class. So don't constrain. And we want to set this to display flex. Save that. And we can now see the text on the left, on the boats and on the right. But we want to add space between all of the elements that are in this flex row. So like we did earlier on, we can use the justify content property and settling out to space between. I'll save that. And now the button is over to the right. And now we have a little bit more space at the bottom of this binary that we have the top. And I think that's because this paragraph is adding some bottom margin, just going to right-click that paragraph, click on Inspect. And yeah, it does have some margin on the bottom which is being added by the user agent style sheet. So after this page, one style will target the paragraph tag within that cookies banner section and set the margin bottom to 0. Save that. And this is looking pretty sweet now. 33. Hide Cookies Banner with CSS: So right now this banner is always displayed on the page, but we don't want to always displayed on the page. We want it to be hidden by default and then display on the page after a couple of seconds. So what we could do is use CSS to push this element of the bottom of the page so that we can not see it. And then we could use our JavaScript to add a class to the element after a couple of seconds. And we could use that CSS class to pull the banner back onto the page. So first of all, let's just push this element of the bottom of the page using CSS by default. And we could do this using the transform property, which is a property which allows us to move elements around, changed their width and height and stuff like that. So I'm going to add a property called transform and hit Enter. And we could do a number of different things with transform, we can rotate elements and scale elements apart down skew elements, where we're going to use this translate y property, which will allow us to change the vertical position, the y position of the element. So we're going to use this translate y property. And if I just put 50 percent in here and save that, you can see that it's pushed the banner halfway of the bottom of the screen. So we can now only see half of the banner, but we're going to push it all the way off. So we're gonna change this to a 100 percent. And I'll save that. And we can now no longer see the banner. 34. Create a Class to Show Cookies Banner: So what we're gonna do now is setup a CSS class, which pulls the banner back onto the page. And then later on we're going to use JavaScript to add back class to the element after a couple of seconds, those displaying the banner on the page. So after this Cauchy's balance selector, I'm going to add cookies dash, banner that I'm going to add dark shadow. So we're basically targeting the cookies banner element when it has a class of show added to it, which it doesn't by default, but we're going to add that class with JavaScript. And what we wanna do is change this transform property again. So I'll copy that and paste it in here. And we want to set this Translate Y to 0%, which will bring it back fully onto the page. So I'll save that. And if I open up my dev tools, find these cookies banner element, which is here. And then if I click on this CLS thing here, we can actually add a class and see what happens. So our class is called Show. So we're going to type in show and we can now see the banner on the page. If we remove this class. And you can see the class has been added here as well. If we remove the class, then the banner is hidden again off the bottom. It'd be nice if this was animated as it appears and disappears on and off the page. So as we did earlier on, we can use the transition property to do this. So in our cookies banner select, I'm going to add a transition property. The property we want to animate is the transform property. So we're going to transform that. We want to add a duration. So I'm going to add 0.3 seconds and my semicolon, and I'll save that. So now if we choose our cookies by the element in the elements tab here, click on class. At the show class, we say, we now have a nice animation when it appears. And if we remove the class, we have a nice animation again when it disappears. So now all we need to do is use JavaScript to add this show class to the cookies Banner after a couple of seconds. 35. Put Banner into a JavaScript Variable (JS): Okay, Let's use JavaScript to up this class of show to the cookies by the element after a couple of seconds. So we'll jump back to our JavaScript in index.html, which is here. And we'll get rid of this console log because we don't really need that. Before we can do something with these cookies palette, we need to get access to it. And we can do that by firing the query selects a method on the document. So what we can do is document dot, query, Select, and then parenthesis, and then quotes. And then we can pass a selector into these quotes. Similarly to the selectors that we're using in our CSS. So if we want to grab cookies, which has a class of cookies Power BI, we can just use dot cookies balance. So in these quotes we can just start dot cookies, dash butter. And this will grab the cookies bona element so that we can actually do something with it. But first we need to put this into a variable. And I'm what's a variable? Basically it's just a little block of data with a name. And we can stall all sorts of different types of data in a variable. The way we sets up a variable is we just use the word let and then we enter a name for our variable. Let's say we wanted to store someone's age. We might want to call that variable age. And we can set that equal to a number such as 30. And we could also store text or string in a variable. So let's say we wanted to store someone's name. We could do Let's name equals. Then we want to use quotes if we're doing a string. So Dani, and we could also store Boolean values, true and false values in a variable. So we might want to do something like, let's, is user subscribed. And we can set that's true or we could set it to false. But in this case we just want to store this document element in a variable. So I'm just gonna get rid of all of these. I'm going to stall this in a variable. So we'll call this cookies bada. Hi there, This cookies. But our element will now be in this cookie is about a variable where we can do some stuff with it. Before we do some stuff with it, we want to make sure that it exists. Because if we tried to fire some code on this element and it doesn't exist on the page, then this will fire an error. So we can use an if statement to do that. So what we can do is type in f and then parentheses. And then in the parentheses we can just add cookies been a. So in other words, if there's something in this variable, so if this element was found on the page, then we could do something. For now I'm just going to log out. So I'll use console.log and just logout Barna exists. And if we wanted to fire some code, if the banner doesn't exist, we could add else after this if statement double curly braces in there, we can just logout console.log, but a does not exist. I'll save that. And we can now see in our console here, Banner exists or if I just remove these cookies banner section element from the page and then save it. We now see but does not exist being locked out. So a place that cookies banner back on the page and save that. I'm not really going to need this else statement. 36. Show Cookies Banner after 2 Seconds (JS): So if the cookies, but it does exist, then we want to add the class of show to this cookies manner element after a couple of seconds. In order to weigh a couple of seconds, we can use the setTimeout method. So I'm just going to remove this console log and I'll just type in set. We can say in our IntelliSense here we setTimeout function. So I'm going to hit answer on that, on it a lot. This setTimeout function follows. This function expects two parameters. The first parameter is a function. So this is just a different way of writing a function, which is a little bit different from the way we've written this function. This type of function is called an arrow function, but we could also change this to function double curly braces and then get rid of this arrow. So this would also work, well, I'm just going to change the spot to an arrow function so we can find some code within this function after the timeout has finished. This second parameter here is a number which is the amount of time that we should wait in milliseconds. So if we wanted to wait for five seconds, we could just put 5000 at here. So I'll change this timeout to 5000. I'll just walk out some texts for now. Timer has finished out. If we save this and reload the page, wait a few seconds, then we can say timer has finished being locked out. I'm just going to reduce this time out to two seconds. 2000, hey, Arafat, let's put this 2000 in a variable. So after this cookie is a variable, other variable called cookies, but a delay, onset or equal to 2000. And now we can just use this variable here instead of hard-coding the number it. So I'll copy this variable name, paste that here. And now if we come back to this code later on, it's going to be really easy for us to change the delay if we want to. But anyway, once this timeout is finished, we want to add the show class, which we set up, the cookies banner, those showing the batter on the page. And we have access to the cookies banner element here. So I'll get rid of this console log. And what we can do is cookies banner, and we want to access the class list on these cookies products, we can do dot class list. And in fact, I'm just going to log this out so you can see what's going on here. So I'll add console.log and then surround this cookies banner dot class list in parentheses and save that. And if we wait a couple of seconds, we can see this DOM token lists being logged out. And if we click on this little arrow to open it, what we're seeing here is an array. And an array basically allows us to store multiple variables in one item of data. So if I jump back up to this cookies banner and we had another class side new dashed class. And we save that and reload. You can see this being logged out again. Now we have two items in that array, cookies by our new class. So I'm just going to read this new class class and save that. Jump back down to our JavaScript. And I'll remove this console log. So we've got access to the class list of that cookies batter. Now we want to add a class to it. I want to add that show class that we setup. So we can now decide dot, add and then parentheses. And then in quotes we can add the class that we want to add and we want to add the class show. So I'll save that reload. And if we wait a couple of seconds, we can see our by pairing. And if we look in the element inspector here, we can see that show class has been added. 37. Break Up our Logic into Functions (JS): However, it's a good idea to break up our logic into functions. And a function is just a block of code that we can give a name. And you generally want each functions just have one purpose. So after this if statement here, I'm going to add a function. We do this by just typing in function, and then we can give the function a name. So we could call it show banner. Then we add parentheses and then double curly braces. And then we could put the code for our function within these curly braces. So I'm just going to cut this line where we added the class. I'll paste it into this function instead. What we can do now on this set timeout, on this first parameter, we can just select all of this function. So the two double curly braces, the arrow and these two parentheses. And we can just delete that, and we can just type the name of this function instead. So it will now fire this function after the timeout is finished. So we can just type in show banner. Hey, let's save that NCBI still work in, reload the page. And yet it's still working. I'm just going to add some comments here to break up our code a little bit. We can use the same keyboard shortcut to add a comment in JavaScript, which on a Mac it's command and forward slash. And I'll just label this stuff at the top in it because this is where we kind of initializing stuff and getting access to our elements. And then a lot of comment above our functions, which just says functions. By the way, we can also add comments to HTML as well. So we wanted to add a comment above this cookies banner. We can just use the shortcut command and forward slash or I think it's Control and forward slash on Windows, then we can just type a comment here, such as cookies banner. 38. Put Close Button into a JavaScript Variable (JS): Okay, so we want to hide this panel when the user clicks this close button. So when the user clicks this closed, and we basically want to remove the show class, which you can see here from this cookies bought out, which will then mate with the bio back off the bottom of the page. So we can do this by adding a click handler to this button. First, you need to get access to this button, just like we did when we got access to the cookies banner using the query selects a method. So after this line, I'm going to add, let's, let's call it cookies on Close button. Law equal to document query selector and in parentheses and quotes inside there. And so we need a selector to select this close button. And we can't just use this boats or the class because this query selector will just select the first element which much as the selector that we put in here. So if we just put dot Watson in here, then it would actually select this bottom, which is the first Watson element on our page, this Bible. So we need to be more specific than that. And we do have this div surrounding Appleton charter class of cookies, Barbara Watson. So what we could do for our selector is dot cookies, manner Watson and then a space, and then Watson. So in other words, it's going to select the element which has a class of button that's inside the element which has a class of cookies but a button. So I'll save that. And we're going to setup a click handler on this bottle. So I'm going to add a new section after this if statement, and I'll just call this events. And I'm first we want to check that this close button exists like we did with the cookies manner. So if cookies been a close Watson. 39. Hide Cookies Banner on Button Click (JS): And if it does exist and we want to add a click handler to it. And we can do this by adding an event listener to the close button by using this addEventListener method that we used before. So what we can do is cookies been a close button dot add event listener, then parentheses. Now this time we want to add the click event listener. So we're going to add quotes there and then click on Follow the second parameter. We need a function. So we could add function like this directly in here and add some code here. But it's probably bad to trigger a separate function so that we can keep all of our logic nicely separated into different functions. So I want to select all of this function I bought it and instead will trigger a function called close Watson clicked. And I in fact, let's call it cookies, been a close button clicked to make it a bit more specific. And then I'll copy that and we'll create this function down here. A lot of this function. So when you start function, then paste in cookies by my Close button clicks parentheses. For now let's just log out some texts. So console.log close button was clicked to make sure this is working. So I'll save that. Wait for the ballot to appear. Click on the Close button. And we can say Close button was clicked. So that's working out. If we're down at the bottom of the page and we click on this close button is jumping nose to the top. And that's because when we click on this, what's an H ref is set too harsh. We can use the hash to jump to various anchors on our page. I'm not gonna get into that now. What if we don't specify a name for an ANCA, then it will just jump pose to the top of the page. So what we need to do in this click handler is to prevent the default behavior of this button when we click it, which is to follow the link that's assigned to this water. In this case is hash. So when we sat so EventListener like this, such as a click event listener, this will return what's known as an event object, which we can pass along to the function that we fire. I'm not gonna get too much into the event object. Now, what we can pass that in by just putting a variable name in these parentheses and you can call it whatever you want. So you could call it event or you could just call it a. I'm just going to call it a. And now that we have access to this event object that was returned by this addEventListener when the button was clicked, we can fire a method on that event objects to prevent the default behavior of the click of this button. So we just need to add a dot prevent default, and then parentheses. And I'll save that. Hopefully now if we click this button, it no longer jumps to the top of the page, but we still see our log being logged out. Close button was clicked. Okay, So once the close button has been clicked, we then want to fire another function which will then hide the cookies banner. So let's fire a function called hide banner ads to fire a function from somewhere else, we can just type in the name of the function and then parentheses like that. So let's create that function down here. So function hide banner, parentheses, double curly braces. So what do we need to do to hide this banner? Well, we just need to remove this show class from it. So much like we did in this show been a function. We can just do cookies banner because remember we have access to the cookies by the element with this cookie spot a variable. And then we want to access the class list. And this time we want to fire the remove method instead of the add method. So we just want to do remove parentheses and quotes inside the parentheses and then show because we want to remove the class called show. So I'll save that. So we say the bond I repair. After a couple of seconds, click on the button and we see the banner disappear. 40. Move JS to Separate File (JS): Okay, So we've finished with JavaScript now. And I'm just like we moved our CSS into a separate file. It's a good idea to move our JavaScript into a separate file as well. Because if we leave, I'll JavaScripts in this script tag and we create some new pages, which we're gonna do in a little bit that if we want to make changes to our JavaScript, we would have to make changes to multiple different HTML files. So it makes sense to have all about JavaScript in one file so that we only need to change it once. So I'm going to open up the sidebar on the Explorer. And inside the assets folder, I'm gonna create a new folder called JS for JavaScript. I'm going to right-click create a new file in there. And we could call this global doc js. And you can call it whatever you want, but it does need to end in dot js. And it's opened up file for rows. So I'm going to jump back to index.html. And I'm going to call all of the code that's inside this script tag. Save that, jump to this global dot js file we've created. I'll paste it in here. I'll save that and then jump back to index.html. I'm just going to remove the new line of this script tag. So we just stopped the opening and closing script tags like that. And what we can do is just add a source attribute to the scripts and then answer the path to our JavaScript file. So this is going to be slash assets slash js slash global ab.js. So I'll save that and let's see if it's still working. So I'll reload the page. We still see a banner pay and if we click, it, still disappears. 41. Responsive CSS (CSS): Okay, So this web page is looking great now on desktop, but there's a couple of finishing touches. So I want to add a second page, an about page, which we can get to by clicking this link in the header. Well, first of all, I want to make this webpage responsive. I make it look good on mobile. Because if we open up our Chrome DevTools, click on this little devices icon here. We can choose from this dropdown, a mobile device. I've just chosen the iPhone 6, 7, 8 plus. This will show us how this page looks on mobile. On the head, it looks fine on the cookies banner, looks fine. The fourth cell looks fine. Well, these products don't look very good because the text is too big for mobile. And we have all the text squished over to the left like this. And we have this tiny little image squished over to the right. So it'll be better if we could reduce the text size for mobile on stock, the text section on top of the image and stretch the texts all the way across the width of the device. And also stretch the image across the width of the device as well. And we could also do with reducing a bit of the space between the products as well. So I'll just show you the finished page here. And you can see I've reduced all of the texts and we now have the text section stacked on top of the image, stretching the image out so it's a lot bigger and we've reduced the spacing above and below each product as well. This looks a lot better on mobile. 42. Media Queries Explained (CSS): So how can we add different styles for mobile devices? What we can do this with media queries. So I'll jump back to page. I'll just come out of mobile view for now. And we'll jump to CSS file style.css. And then at the bottom of this, I'm going to add a media query. So a lot of comment here which just says media queries. And I will add a media query. On a media query just allows us to add some CSS rules. Only for devices are browses of a particular width. So we had a media query by adding media. Then we add some parentheses, double curly braces. And inside these parentheses, we can put a rule which tells the browser which screen sizes the rules that we put in here should be applied on. And we can use either min-width or max width. So if I just thought man, dash width, and then a colon, and I can specify a pixel value. So if I set this to, let's say, 500 pixels than any rules that we put in here will only be applied to the page if the browser is wider than 500 pixels. So inside these double curly braces, we can just add CSS rules as usual. So if we wanted to target the body tag, if you just add a body selector, let's just set the background color to red. I'll save that. And we can see the background is turned to red. If I reduce the size of the browser to below 500 pixels, then it changes back to why Again, because it's only going to add this rule if the browser is 500 pixels or wider. We can also use max-width instead of min-width. So if I change this to max width and save that, then now the rules that we specify inside this media query will only be applied to the page if the browser is 500 pixels or less. So we're currently wider than 500 pixels. Now, you can say open the top, we're about 130 pixels. If we go down, see below 500 pixels, then we see the red background color. 43. Add a Media Query & Mobile Styles (CSS): So I'm going to add a media query which targets devices which are as wide as a typical tablet in portrait mode. So a typical width for a tablet in portrait mode, such as the iPad is 768 pixels. So I'm going to set this to max width 768 pixels. Save that. I'm just going to stretch this out a bit. So if we click on the device button, we choose iPad. We can say this rule is being applied. So we're going to add some rules here which will be applied on devices which are this wide or less. But we don't want to set the body to a red background color. So let's get rid of that rule and save that. Actually this layout looks pretty good on an iPod by that. So I'm actually just going to target any devices which is smaller than this. So I'm going to change this MUX with 2767 pixels. Save that. We'll switch to one of the mobile devices such as the iPhone 6, 7, 8 Plus. So let's add some rules to improve this layout. So, so each of our products is in a article tag with a class of products. And if we look at the CSS for the products class, which is Hey, we have that set to display flex, which is what is making its direct child elements be displayed in a row side-by-side. So rate we want to target the product div and set the display property to somebody else. And we're going to set it to block, which will stop the product element from being row and just turn it into a normal block element. So I'm going to jump down to the media query. And we want to target the product elements. And we just want to set display to block. And I'll save that. And we can now see the text on the image are stacked on top of each other. And I also want to reduce the text size a bit of these headings on this paragraph. So after this product will our dot-product H1, because this heading is in a high one, we'll reduce the font size. So set the font size to 34 pixels and save that, and that looks better. I will also reduce the font size of this H2 as well. So a lot dot-product. H2 will set the font size to 16 pixels. Save that, and I'll also reduced the paragraph to 16 pixels. So we'll do dot products, pay font size 16 pixels, save that. And we have a little issue with our boats and say that being coauthor the bottom. And that's because these are eight hugs. And by default, a tags are inline elements. And inline elements will sometimes be clips like this if they're surrounding elements or that parent elements too small. And we can fix this by just setting these two inline block instead of enlightened. So I'm going to jump back up to our product CSS. We have our products nav. Here. We're targeting these links here, product now VLA. So I'm just going to set these two. In fact, let's just change the button class so that we don't see this issue anywhere else without pollutants. So I'll go to our reusable section on our button. And we'll just set this to display inline-block, Save that these buttons are now no longer being. Clips are the Basu. Okay, So I also want to reduce the padding on these products because this space is a little bit too big for mobile soldier. Back down to our media query. In our product selects a lot of putting property and the padding is currently set to a 100 pixels on the top and 0 on the side. So let's reduce this down to 30 pixels on the top and 0 on the side. And we now have a more reasonable amount of space between each product, but we still have quite a lot of space at the top of the first product. Because if we jump back to our initial CSS, we use this first child pseudo-selector to add some padding to the first product in the list, and that's currently set to 20 pixels. So I'm just going to copy this rule. Will paste it below, are productive in the media query. And we'll reduce this to 0. And I'll save that. And we now have a little bit less space at the top of office products. Okay, so I'm happy with this now I think this looks pretty good on mobile. Still looks okay on desktop as well. 44. Add About Page (HTML & CSS): Okay, The last thing I want to do is add a second page to this website. So an About page which we can get to by clicking this link in the header. So I'm going to jump to index.html, jump up to the header. Here's our About link that's in the header. I want to change the hate draft to slush about dot HTML. And this is going to be our about page. So I'm gonna save that. We're going to open up the sidebar. Then I'm going to right-click on the index.html file. Click on Copy. And I right-click and click on Paste. And then I'm going to rename this file is just created to about dot HTML. If we click on the about link, we can see in the browser bar, we're now on About dot HTML. We're currently this page is exactly the same as our homepage. So let's jump to about dot HTML. It's going to hide the sidebar. I'm just going to remove everything inside this section element with a class of constraint which currently has all of these products. So I'm just going to select everything inside there, delete that. And instead, I'm going to add an article with a class of concept cost. This is going to be a content page. I will stick some content in there. So another one, and I'll just put about orange in there. A lot of bunch of paragraph tags with some Lorem Ipsum. Just going to enable word wrap by going to View toggle word wrap. Just going to copy this paragraph. Paste a few more in. Maybe at the bottom we could have one of these white buttons which links back to the homepage. So a lot, an, a tag with a class of button, a class of Watson, dashed white enter in the heat href attribute. We just want to go to home. So to do that, we can just go to the path forward slash. And then for the texts in the book and I'll just put go back home. And I'll save that. And we now have About page can jump back to the homepage. However, this text is a little bit too small and so I might just hijack the textiles from up products. So I'm gonna jump back to style.css, jump to our products, textiles. So here we are product texts H1, H2, and pay. We've just created an article with a class of content here. So what we could do here is add an additional selector to each of these rules. So as well as product texts h, Well we could add content one. And then on this one we could do dot content page two. And then comma dot concept to steal these styles or jump back to the About page. Save this. And we now have some nice big text. However, we're also going to need to update our media queries because this text is a bit too big for a mobile. So I'm going to jump down to our media query. And again will hijack these styles here. So after this product H1, we're going to start dot content H1. And then on this one dot console page two. And then on this one dot content pay will say that the text looks nice and small and mobile. Nice and big on desktop. 45. Add a Doctype (HTML): There's one important thing I forgot to do right at the start of this video, which is to add a DOCTYPE declaration to the top of our HTML pages. So if you just open up index.html right at the top of this file, we need to add a doctype. Doctype tells the browser what kind of HTML page this is, where using HTML5 here. So we need to add HTML5 doctype to the top of each of our pages. So to do this, we just add left angle bracket and then exclamation mark and the DOCTYPE in capital letters, then a space and then HTML in lowercase, and then a closing angle bracket. And I'll save that. I'll also copy this and open up about no HTML and add it to the top of this file as well and save that. And this has caused a slight issue with our header. We have more space at the bottom of our head and out. And that's because we have this image here. By default in HTML5, images are inline elements which have a little bit of space at the bottom of them. So we can fix this by setting this image to a block element with the display property. So if you just go to Assets, css, style.css, scroll down to the header styles and you can see where targeting this image here, where we set its width. And we just want to add a new rule here, display onset not to block, and I'll save that. The header is now fixed.