Build 3 Projects With HTML & CSS!

1. Welcome and what we will be building.: Welcome to learn HTML and CSS by building three projects. My name is Chris, and I'm excited to be your instructor for this course. I will guide you through the process, step-by-step, of building free, real website projects, each one building on what you have learned in the last. It's going to be a fun and practical way for anybody looking to learn how to build websites. First, we will begin by creating a recipe-based website. This will be a static website, we will introduce you to the fundamentals of HTML and CSS. You will learn how to create the basic file and folder structure, how to create a basic index page. Then how to create all the sections of the website, such as the header, the body section, and the footer. We will then use CSS to style a website and also for layout and positioning of all the various elements, such as positioning the images and also the text, and adding the background images. We'll then move on to a college-based website, which will be project two. This will be a fully responsive website, which means that the website will look great on smartphones, tablets, or computers, and will respond to whatever screen size it's being viewed on. If you shrink the browser down, you'll see that the two divs, which are side-by-side, will become stacked on top of each other to make the project look better on smaller devices, and all the areas, such as the logo and the navigation, all responds to look back on a different sized device. Let's expand the browser back up. You'll also be introduced to some new concepts, such as media queries and breakpoints, mobile phone styling, and even some more modern advanced techniques, such as the CSS Flexbox. Project three is a hotel-based website, which will introduce you to the popular bootstrap framework from the cradles of Twitter. Now we have a good understanding of how to create websites from scratch after building the first two projects. Introducing the bootstrap framework will really speed up your development time and allow you to add some really great features to your sites. By the end of this course, you will have built all three of these websites, which will really give your web design skills a boost. The ideal student for this course is somebody new to building websites or somebody with a little experience, looking for a structured, project-based way to expand their knowledge. It will give you a great foundation, if you're looking into building websites for a career or even if you just want to build a website for a personal or business use. Thanks for your interest, and I look forward to having you on board. 2. What You Will Need For This Course: To work for this course we don't need to buy any software or make any additional purchases. All we need is a web browser which you're probably using at the moment for this course. I'm going to use Google Chrome, but you can use any modern browser. In addition to this, we're going to need some software to write our code. I'm going to be using a program called Visual Studio Code. If you give this a search in a search engine, you will come across the homepage, which is available at code.visualstudio.com. If you head into here, you can find out some more information if you want to. Or you can download this for your operating system. It's a free download for Mac, Windows, and Linux. Go ahead and download the appropriate installation for your machine. I already have this downloaded and opened up over on the left. Go ahead and download this, and I'll see you in the next video, where we're going to get started with creating some files and folders for our first project. 3. Share Your Work On Skillshare!: When taking any course, it's really important to not get in the habit of following along just for the sake of taking off another lecture. Take the time to process each lesson, review the content which you write, and think about how you might approach these solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something personal and unique. You don't need to get too lost and divert away from the class. You can even take a step back after you've finished the class and come back and make some project changes afterwards. This will really give you a good chance to practice what you've learned a way from the class. Also, remember to share your Project 2 here on Skillshare. Not only will I check it out, but it will also inspire fellow students too. More information on the class project, head into the project and resources tab, where you can not only upload your project, but you can also see other class projects too. With this in mind, I'll look forward to seeing what you create and upload here on Skillshare. 4. File & Folder Structure: Welcome back. By now, from the previous video, we should have successfully downloaded Visual Studio Code or a text editor of your choice. I have mine opened up on the left just here. I'm going to begin in this video by creating a project folder for our first project. Now, during this course, we'll be creating three separate projects. You can save these anywhere on your computer, can go in a particular drive, a particular location, such as documents, which I'm going to save mine onto the desktop. These three project folders for our project can even go directly on the desktop, but to keep things nice and organized, I'm going to create a new folder and rename these projects. If we open this up, inside here, our first project folder will be for our recipe site. Let's create a new folder inside here called My Recipes. Now, when creating a website project folder just like this, there's no strict structure to exactly how we lay out our files and folders. We're free to organize these in pretty much any way which we want to. Generally, we create some subfolders inside here to store things like our JavaScript files, our images, our style sheets. You can generally group together all of the related content to keep things nice and organized. We're not really going to be dealing with JavaScript during this course, so I'm not going to create a JavaScript folder. Also, for this project, we're only going to have one style sheet. I'm not going to group these together either, but we are going to be dealing with multiple images in this project. Provided with this course is a images folder which you can use, or you can also use your own images if you prefer. I have these images downloaded and saved on the desktop here. I'm going to grab this, and drag this into our project folder. Inside here, we have all of the images which we are going to be using for this project. Then, we can open this up in Visual Studio Code. We do also need some other files which we're going to create in just a moment, but I'm going to create these inside of the text editor. What we're going to do is to grab the My Recipes project folder and, then, drop this inside of Visual Studio Code. We can see immediately that, over on the left, we have a sidebar, just making this a little bit bigger. Then, we'll have all My Recipes project open. The first thing we're going to do is create a new HTML file, which is going to be our index page. The index page is typically the entry point to the main page for our website. If you hover over the sidebar, we can click on this "New File" icon or we can also right click a "New File". This would be called the Index, and this needs the.html extension since this is a HTML page. The second file is going to be for our style sheets, and this is so we can apply some styling and layout to our projects. This will be the Styles and, then, this one has the.css extension. We can also see these if we open up our project folder on the desktop. Now, inside here, alongside our images, we see our Index and our Styles.css. We don't have any content saved inside of our pages just yet, but we can right click on the file name, go to Copy Path. Then, we can paste this as a new browser tab. This will open up our project inside the browser. Of course, we don't have any content to show in this page just yet, but we'll fix this in the next video where we'll begin to create our HTML structure for our first page. 5. Basic HTML Structure: Look inside of our index.html page which we created in the last video, and I'm going to get to work by adding some structure to this HTML document. Now, all of the content which goes inside of HTML pages is generally different and depending on what type of website which you're going to be creating. However, though, there is some general basic structure which you are going to be needing for any HTML page. To begin, we need to add a DOCTYPE declaration, and this tells the browser exactly what type of document it's going to be reading. We do this by adding our angle brackets just like this, a exclamation mark, and then we add in the DOCTYPE. This is a HTML document, so we're adding HTML. Then since this is HTML, we'll wrap all of the rest of the contents inside of the HTML element. Like many elements in HTML, this has a opening tag and also a closing tag which we can see with this forward slash. Now everything else which we add to this document needs to be placed inside of these HTML tags. The next piece of structure which we'll add to this HTML document is by breaking this up into two sections. Just like a person, a HTML document has a head and also a body, so let's add these in. We have the head section, which has the opening and closing tags, and then we also have the body section. The difference between these two sections is the head section is generally used to add information about our websites, which has the name, the page titles, their descriptions, content for search engines, and also links to other pages. So this is more like information about our website, and generally, nothing which we see on the screen. The body section contains the actual content which will display inside the browser. So the head section is for information and links to other pages, and the body section is what you will actually see displayed inside the browser. Another thing we can do with any of these elements is to add what is called an attribute. Attributes is some additional information which should pass into the opening tag. For example, with a HTML document, we want to declare what type of language this document is routing. We do this with a lang attribute, which is short for language. Mine is going to be in English. If you are writing yours in a different language, you can also do a search for HTML language codes, and we can see a complete list with this link just here. If we scroll down, we see a language table where we can choose a particular language, and then choose the short code which we're going to place inside of this language attributes. Feel free to change this if you would like to, but I'm going to now move on to this head section. Remember, the head section contains information about our site, and the first thing I'm going to place inside of here is the title. This title is the page title for this particular page. So if we have a Contact Us page, this will be contact us. If we had an About Us page, this would be about, and so on. Since this is the homepage, I'm going to call this My Recipes. Now if we save this and refresh our Index page, we now see the page title showing in the browser's top. Just below the title, we're going to add some additional information about our site by using the meta tags. Unlike things such as our title and our head section and the body, this doesn't have a opening and a closing tag. We only have a opening and closing tag just like this when we want to nest some content inside. So the title has this text inside, the head section has multiple pieces of content inside, but for our meta tags, we're just going to add some attributes just like we did just above. These attributes declare what type of additional information we want to add for our site. This first one is going to be the particular set of characters which we want to use for our project. By characters, we mean what type of letters, numbers, and symbols we want to use in our website. The HTML5 standard is UTF-8, and this covers almost all characters and symbols available in the world. We do this by adding the character set attribute and set this equal to UTF-8. Your next piece of information in a meta tag is going to be the viewport tag. We'll create a new meta tag just like above, and then give this the name of viewport. This is going to allow us to set up our page for different screen sizes. The reason we need this viewport tag is because people are viewing our websites on multiple screen sizes, alongside monitors, but we also need to account for tablet size and also mobile size devices too. Where we do this as a second attribute is by setting the content, and then inside of the quotations, we set the width to be equal to the device width. What we are essentially doing here is we are setting the page's width to be equal to the device which we are viewing it on, and separate it by comma. The next one we're going to do is to set the initial scale to be equal to one. This is the initial scale or the initial zoom level when our page is first loaded, and this is really important for our site to look good on all screen devices. If we don't add this in, a user may try to visit our site on a mobile-size device and this mobile device may try to take our desktop-size site and then zoom out to fit all of the content onto the smaller screen, which will then result in things such as our text looking really small. We don't want any of this zooming or scaling to take effect since we're going to be handling the look and feel of our site on all screen sizes by adding some CSS. A lot of this may look confusing to begin with, but just remember all of this is essential for any HTML page, which we're going to be creating, so you will get a lot more familiar with adding this. Alongside all of this additional information about our site, we can also use the head section to link to other pages too. For example, we have the styles.css. This is going to contain all of the styling, all of the colors, all of the layout, the font sizes, and so much more for our HTML page. For this to take effect, we need to link to this file, and we do this with the link element. Again, this just contains the attributes inside, so we don't have a opening and closing tag. The relationship is a stylesheet, since this is the type of file we're linking to. Then we have this href, where we tell this particular page where we can find this stylesheet. In our case, this stylesheet is alongside our Index page, so all we need to do is to add the file name, which is styles.css. If this particular file was stored inside of a CSS folder, all we need to do is to add the file path just like this. This is all the information I'm going to add in the head section. From now on, we're going to be working inside of the body section. This body section, as I mentioned before, is going to contain all of the content which we see on the screen. For example, if we want to add some text, we can add these in the p element, which is for paragraph. Now let's say hello, say this, refresh the browser, and all of this body content will then be displayed inside the browser just like we see here. 6. Useful Resources: When building websites at any stage of your development career, there is going to be a point where you need to take a look some some valuable resources to help you on your journey. One of these great resources which I use regularly is the Mozilla Developer website. This is a resource for most of the core web technologies, such as HTML, CSS, JavaScript, and also lots of other things such as game development, and also has some guides to some back-end technologies using Python, Express JS, and lots more. At the moment though, we're just going to be concentrating on HTML and CSS. We won't really be covering JavaScript throughout this course, but this is probably something which you want to focus on after learning HTML and CSS. If we take look at any of these technologies, we can find out more information about the background, about what it does. But one of the really useful things is the HTML elements reference. Inside here, we can take a look at all of the available elements which we can use in our project. So far, we've not got very far with our project, all we've added is some simple text, and we added these inside of the P elements. As an example, if we scroll down and select this, we can see this represents a paragraph of text, we have the opening and the closing tags with the text inside. We can find out exactly how to use any one of these elements by clicking on this. This is really useful if you get stuck at any point throughout this course, and also when you move onto your own projects too. As well as this, inside the Technologies, if we go down to the CSS. We'll be working quite a lot with CSS in this project, CSS is the way we can add styling, we can add colors, we can add a layout, animations, and so much more. It can take our plain HTML and convert it into something really nice and visual. Again, you can read through and find out small information or you can go through to the CSS reference. This will give us a lot of the syntax examples which we're going to be using. We can take a look at these selectors, which is a way to select a part of our HTML which we want to add some styling to. But we are going to be applying a lot of these techniques throughout the course. Next up, we have the W3 Schools website. This is also a useful reference for HTML, CSS, and JavaScript, alongside some other things such as some server-side technologies, some programming languages, artificial intelligence, a lot more other subjects. Again, for this course, and when starting out the HTML, only CSS section is going to be really useful if you want to use this as a reference for any of the elements or to even find some code examples too. It's pretty simple to use. For example, if we are unsure about how to add an image, we can go to the images section, where we'll see various examples which we can click on, and we can play around with the code, and also the output over on the side. Until we have some code, we also want to make sure that we are writing it correctly. One way of doing this is to use a validation service such as the W3 validator. If we have a live website online, we can add in the web address just here. We haven't published any of our sites to a live server just yet, so one way we can do this is by clicking on the File Upload Validator, and then we can select our HTML pages from our projects. Check this. We can see this has finished checking the document and we don't have any errors in this page, although we haven't added much content at the moment. Next up, we're going to take a look at some useful resources to add images, video, and also audio to our site. One of these is pixabay.com, which has thousands of free images which we can use in our websites. We can do a search, we can filter these down by photos, illustrations, vectors, video clips, and also music files too. It's pretty simple to use, we just need to click on any of these pictures which we like, and then we can click on the "Free Download". You don't need to sign up unless you want to use one of the large images, it's free to use. We often don't need to add attributions to the author, although it is appreciated. Also, if you do have some images of your own which you want to upload and contribute, you can also do this too. As well as this, we also have unsplash.com, which is another popular website for stock photography. Again, this has thousands of high-quality images which you can use free of charge, and if we click on this link just here, we can see here that the photos have a free to use license for commercial and also non-commercial projects. We don't need to ask for permission to use this in our projects, although of course, attribution is appreciated. The next resource we're going to take a look at is caniuse.com. This is a really, really useful website for checking if a feature is available in a certain browser. As we go through this course, we're going to be writing lots of HTML and also lots of CSS too. For this CSS, we want to make sure that it looks the same on all of our users' browsers. For example, we may be able to use the latest CSS features in our own projects, and it may look amazing on our up-to-date browser. But we also need to consider that some users may have some older browsers, especially maybe in things like schools or some bigger companies that don't update their browser as regularly. It's simple to use from the homepage, all we need to do is to type in a CSS feature, which you want to use. For example, if we want to use the CSS Flexbox in any of our projects, we can type this in and we can find out exactly what browsers, and also what versions is supporting the flexbox. Here we can see that Internet Explorer only has partial support, although this is supported in the more modern Edge browser. It's completely fine to use in Firefox, Chrome, Safari, Opera, and also all of the popular mobile browsers too, in all of the latest versions. Meaning this is pretty safe to use in our project. This is really useful to check and also find out exactly what kind of experience our users will have if they are using a older browser. Next, as well as some images and videos, we may also just want to add some simple icons too. This, the unicode-table.com is a really useful resource. We may want to add some icons such as arrows, and we can check through the catalog of thousands of different ones we can choose from. For example, if we wanted a right arrow, we could click into this. We can add these inside of our HTML with the HTML code just here. We'll take a look at how to do this in our project. Next, we also have a dedicated icon library too, which is called Font Awesome. Of course, there is also lots of other icon libraries available too, but Font Awesome is a really popular one. It also has a free version which has lots of different icons, and there is also a paid version too if you outgrow the free library. As you would expect, this is just a handful of some popular resources, there is hundreds and even thousands of more available online. I'm sure you will come across lots of these on your development journey. But for now though, this is just a handful of resources to get you started. Next, we're going to jump back into our project, and begin at the header section. 7. HTML5 Header Section: Currently, we have a pretty empty website, we just have this text of hello up at the top, which has been created with this paragraph element. For the rest of this video, we'll be adding some more content by creating our header section up at the top of our page. To take a look at exactly what we're going to be creating, this is the final version. The header section will be this gray section about the very top and this is going to be split into three parts. We'll have the two links on the left. We'll have the site logo and also the image in the center, and then some additional links over on the right. To create these three sections, we're going to be using what's called a div. A div is a section or a division inside of our website where we can place content inside. To see more about this, we can go over to the Mozilla Developer website, which we looked at in the resources video. Under the technologies, we can either go to the HTML, but I'm going to do a search for div. Here we have the div, which is the content division element inside of our HTML section. This is a generic container. It doesn't have any special meaning. It's just used two group together content. We can see here we have a div which has the opening and the closing tag, and then we can place our content inside. This particular example has an image and also a p-element for some text. We'll use this for all three of the sections and also some sections later on too. Let's get started, and the first thing we're going to do is just to click on this icon up at the top, close down our sidebar, and then we're going to move this hello text inside the body, as well as containers such as a div, which is pretty generic. In HTML version 5, we've also got some more descriptive elements, often called semantic elements. These semantic elements are used to describe the content which is nested inside. One of these useful ones which we can use is the header elements. This has a opening and a closing tag and we can place inside all of the header related content. As we've just seen, we're going to be using the div element and all of the content for our first section on the left will be placed inside of this div. When using Visual Studio Code, this also comes complete with a plugin called Emmet. Emmet is used to speed up our code in. If we type in a div and then hit "Enter," we can see this is automatically closed off as follows with the closing tag, and it also adds the brackets around each section too. So if you want the practice, you can either type this out manually or you can make use of Emmet. This now gives our first two div sections and I'm going to create the third one, which is for our links over on the right. But how do we go about creating these links? If we wanted to, we could go pretty simple and just have the p-elements like we've seen before. But generally, when we have multiple pieces of text like this, it's a good idea to place in a list. With HTML, two of the popular types of lists which we can use is the ordered list and the unordered list. A ordered list is a way to list out multiple items just like this, and these are ordered by numbers. This would have number 1, number 2, and continue on for each item. Unordered list on the other hand, instead of placing numbers next to each list item, it will place a bullet point to the left. Currently, we don't see this for our items just here since we've removed this with this CSS. Seeing how to use a list, we're going to go back over to the Mozilla website and do a search for unordered list, which is the ul tag. This is the one we need just here. Like many elements, we have the unordered list which is the wrapper, and then nested inside, we have each one of our items surrounded in this li tag. This particular example is a little bit more complex. It also has a further unordered list nested inside of this cheese list item. You can see by the example over on the right, this will provide a nested unordered list. But all we're interested in for our example is this one single unordered list, which will contain our list items. Back over to the project, we'll create our first section inside of our first div. Create the unordered list for the wrapper, and then place inside all of our list items. The first one, just like we're going to see here, is popular, and then the second one is what's new. So we'll create the list item. The text of popular. Then the second one is going to be what's new. Save this, refresh the browser, and there is our two list items. Just like mentioned before, since this is a unordered list, we will see a bullet point next to each one of these, but we will remove these weird CSS very soon. If you don't have this index.html page currently open, remember, you can right-click on the page name, copy the path, and paste it into the tab. Or instead, you can go into the projects, into the recipes folder, and then double-click on the Index page. Or alternatively, if you don't want to keep refreshing this browser after each one of the saved changes, you can use a live server extension. The way to do this inside of Visual Studio Code is to go down to the extensions button and then do a search for live server. This is one just here. I already have this installed in Visual Studio Code, but if you don't and you want to use this extension, you will need to install and activate up at the top. Once this is done, you may also need to restart Visual Studio Code. You should then have a Go Live button at the bottom. Click on this. This will then open up the page inside of the browser, and now each time we make a change to any of our sites, this will automatically be updated. Next, we're going to move on to the middle section, which includes an image and also our site title. For this, we're going to link to one of the images which had been provided with this course, and then set our title as a heading. After our first div, jump inside of our second div section, and then we add our elements from top to bottom. The first one is our image, which is the img element, and an image is one of the elements which doesn't have a closing tag. This is because we don't nest any content inside. All we need to do is to make use of these attributes. The first attribute is the source, and this is the location of our image. This is all relative to our current index page. Currently, we are inside of the index.html, and alongside this, we have our images folder. Step 1 is to go into the images and then forward slash, and we can now choose any of the images inside of this folder. What we need is the chefs-hat, and this is an svg file, and this is really useful for scaling our images up and down without losing any quality. After this, we also have the alt text, which is some alternative text to display if this image cannot be displayed, and this is useful for multiple reasons. For example, if the image cannot be downloaded for any reason, this alt text will display in place. Also for accessibility, if people are using a screen reader rather than a traditional browser, this alt text will be read out in place, so make sure this is descriptive. I'm going to say chefs-hat logo, close the side bar, and this is save and alt to the browser. There's where chefs-hat now appearing. Now, at the moment, don't worry about the positioning and also the layout. We will set this all up in just a bit when we move onto our stylesheet. Next out, just after our image, just below this, but still within our div section, we're going to now make use of a level 1 heading. This is the h1, and with HTML, we can add headings from Level 1 right through to Level 6. H1 being the most valuable of a most important heading in our site, we should only use this ones on our page, right through to h6, which is the least important head in for our site. Personally, most commonly, I use h1 through to h4, but this is totally up to you. Inside here, the title of my recipes, save this, and there's our site title inside of this section. The last section in this header is just like the first section. Over on the right, we have two additional links. This is for submit recipe and also the meal ideas. You should already know how to do this from the first section, go into the third div at the bottom, create our unordered list, our list item. The first one was submit recipe, the second list item was for the meal ideas. Give this a save and check this out in the browser. Currently, acknowledging these bullets over on the left, which we're going to remove in our CSS. If we take a look at the final version, we do see we have one little bullet in between each one of these sections. This is just to place a divider between these two list items, and the way we can add these is by using a HTML entity. From the resources of video, we looked at a website called the unicodetable.com. This guy was a list of lots of different icons such as arrows, such as text, emojis, and one of these entities is this dot. To see this, we can go over to our unicode table. Let's do a search for dot, and this is the one which we are going to use up at the top. This is a dot which is placed vertically into the center. Grab the HTML code, include the ampersand at the start and the semicolon at the end. Go over to our list, and then between our first two links, we're going to place this inside of a span element. A span element is pretty much just a basic generic container. We can place inside anything we want such as text or even these HTML entities. A span also falls into what's called an inline element. An inline element will naturally take up some space in the browser across the page. That is providing it space to do so. If not, it would drop down onto the next line. This is the opposite of something such as a div, which is what's called a block level element. This means regardless of the size of the content, it would naturally drop onto its own line. We can see this if we look at our first section, and then the second section is on its own line, and the same for the third section on the bottom. Just before we wrap this up, we'll also add these dots to the third section at the bottom. Place in our span, place in the entity code, and there's our dot appearing in both of our sections. Good. This is now the HTML completed for our header section. It doesn't look too great at the moment, but this will be all fixed when we come to the styling section. But just before we add our styling and layout to this section, in the next video, we're going to take a look at how we can add some additional pages and also converts our list items into links. 8. Links & Additional Pages: On this final version of our project, if we hover over any one of these list items, we can also click on these and be taken to a different page. Now, each one of these pages which we'll link to doesn't have any particular content. But we can see this is a popular recipes page. We have the What's New, we have the Submit Recipe page, and also the Meal Ideas too. But currently if we go to our version just here, we can't click on any of these list items. To do this, we need to turn each one of our list items into a link. A link or a hyperlink is created in HTML by wrapping our section in the a element of on the Mozilla website, we can see in the example we have an unordered list. This has some list items just inside, just like we have in our project, but the difference is inside of this list item, we also have nested inside an a element. This a element also has this href attribute. This is the key to creating a link because we need to tell the browser exactly where we want to link to. Let's go over to our project and replicate this inside of our header. First of all, we need to cut out the text from inside of the list item and then create an a element. It will automatically add the href attribute. Since this is required inside of the a elements opening and closing tag, we can add back inside the popular text and this will display inside the browser. Now, for the href, we can add any link inside of here which we want to switch as a link to a website, let's say Wikipedia, and by default, a link will appear underlined and with a different color. We can also hover over this and the cursor will change to be a pointer. When we click on this, it's now linked to our external site. Let's go back. But of course, we don't want to link to Wikipedia. We want to link to some pages inside of our site. Currently, if we open up the sidebar, we only currently have this one index page. What we need to do alongside of our index.html is to create some new HTML pages to link to. Let's click on the new "File" button. I'm going to create a link for each one of these four pages. The first one, we can give it any name of our choice. This is going to be for the popular page, and this needs to have the dot HTML extension. We also need three more. The next one is for new.html. Number three is for the meal-ideas.html. The final one is to submit our recipe. Let's give this a name of submit.html. Now we have some different pages link to. Just make sure that all of these pages are alongside the index page and not nested inside of the images folder or any other folders. You can go ahead and create as much content in any of these pages which you want to. But for now though, I'm just going to add some simple text so we can see which page has been loaded inside the browser. For the Submit page, we're just going to add some simple text, but first we'll add the basic HTML structure. You could go ahead and add all of the same structure which we used inside of this index page. You could type this all manually, or if you are using Visual Studio Code, again, we can make use of the Emmet shortcut. To do this, we type in html:5, hit "Enter". This will be created for us. All we need to do is to change the document title. This is Submit a recipe. Then inside the body add some text in the p element, just so we can see which page has been loaded. I'll say, Submit Recipe Page. Save this file with Command or Control S. Let's now go to Meal Ideas. Again, html:5, hit "Enter". Change the title, add our text. Save this file and then the New button, which is for our What's New page, add the basic structure, the title, and some text, so What's New page. Save this and then our last one, which is the popular.html. The document title of popular recipes, and then the text. Save this and now back over to our index.html. Now we have four different pages to link to. Down to our eight element and inside the href. Since these pages are alongside our Index Page, we can just simply type in the name, and in this case, it's the popular.html. Next, we have What's New, put this out at the a element. The page for this was the new.html. Then in between the opening and closing tag, paste in the text. Let's go down, and we're going to do this two more times. The next one was Submit Recipe, pull this out. Place in our link, which is going to point to submit.html, add in our text. Finally, we have the Meal Ideas. This one is meal-ideas.html, paste in the text and save this file. Over to the browser. We now have four links inside of here. Let's try the popular one. This one now linked well, popular.html. Next, What's New, we can see this is fine. Submit Recipe, and then finally the Meal Ideas. The final thing I'm going to do is to also link this recipes title just here back to our Index Page. To do this, let's put out our level one head in with Command or Control X, add in our link. This is going to point back to the index.html, paste it in our level one head in, click on this. This will now link back to our Index Page. If we wanted to, we could grab our header section. Let's highlight all of this and copy with Command or Control C, go to the popular page, and we could also add this inside of each one of our other pages. If we paste this in, click on "Popular" link. We now also see this header inside of here. Click on "My Recipes". This will then return us back to our Homepage. As previously mentioned, you can go through each one of these additional pages and also add more content if you would like. But next, we're going to move on to making this header look a lot nicer by adding some CSS. 9. Styling The Header: Now we've added some HTML to our page and in particular, this header section up at the top. We're now going to move on to adding some CSS to add some styling and layout to this header section. If we take a look at the final version just here, this will be the section up at the top which we're going to work on. By the end of this lesson, our header section should look just like this. To do this, we're going to change the layout of our free div sections to go across the page rather than being stacked on top of each other like we currently have. To get started, we're going to go over to our styles.css which we've already created, and we've already linked this to our index page. We don't want to link just here, so what we need to do is to target any of these selectors in the body section. If we want to target the header section, we can, the div, the lists, the individual list items, we can target anything on this page. But first we're going to start at the very outer element, which is this HTML element just here. A way to target any of these elements is to write it exactly the same as we do in HTML. Then we opened up the curly braces just like this. Then all of the style rules which we apply in-between here, will apply to our HTML. The first thing we're going to do is to set a background color. This background color is going to apply to the full document. I'm going to keep this simple and set this to be a white color. If we give this file a say, we shouldn't really see any changes to the browser, since this is already a white color. But this is the background color which we can see over on the left, on the right-hand side. This is all white too, but the difference is in the center. We're now going to grab all of the HTML content contained in the body section. Then change the color for the section. Remember this body section was nested inside, so this will sit on top of a white background. This below this, on the body section. Then inside here, if we then set the background color to be any different color, say this, all to the browser and refresh. But now see the body has a different background color, mostly gone to set off the live server by clicking "Go Live", close this first version down. This will just save us refreshing the browser after each change. As well as these colors which you have saturated here, we can also use a different color codes. To do this, if we go over to Google and do a search for HTML Color Picker, we have various different options we can use to set a color. We can either use this color picker which pops up just here, or there is also a good one at the W3Schools websites. The values is over on the right, which begin with this hash. These are six digit codes which makes up what is called a Hex value. We can select any color, just like this blue. We can then see the Hex value at the top. We can also see a RGB color, which is the red, the green, and the blue values all mixed together. Also a HSL value, which is the hue, saturation, and the lightness. These are all valid CSS values. But for this color I'm going to stick to the Hex value. The hash and the volume I'm going to use is going to be ede6e6. This gives us the different background color. If you are using Visual Studio Code, you can also hover over this background color, and we can select a different value from this color picker. At the top, we can see this is a Hex value or we can also click on this to be taken to the HSL value, an RGB value, if you prefer a different format. Continuing on with the body, the next thing we want to do is to set the font family for this project. The font family is the style of texts which we're going to use. I'm going to go for Arial. This is a pretty simple font which I'm going to be selecting for this project. We can select different ones if you prefer. This is the first choice value and then separated by comma you can add different values which you want to add. If the previous font families are not found, the next one are Helvetica, and then sans-serif. What is happening here, is we are looking for the Arial font if this is available on the user system. If not, it will drop back to the Helvetica, and if this one could not be found even it will fall back to a generic sans-serif fonts. As well as this, we can also set the default font size which you want to use for this project. Once you go for 18 pixels, we can change this to be any value or we can also override this value for any of the our sections too. This is just basically a starting point. Next, the rest of the content we want to restrict the width of all this section to be a certain value. I'm going to go for 960 pixels for this example, which is a fixed value which won't change. If we shrink down the browser, we see this is pushed off the edge. But we'll take a look at responsive design very soon. We also want the section to be in the middle of the page. The way we can do this is by applying some margin. Margin is the space in which appears outside of an element, so anything which you add inside the body section will appear outside of this colored section. Let's give this a go. If we add 10 pixels, this will take effect to all four sides. Of course, at the moment we don't want that because these will be fighting against each other. We have equal amounts on the top, the bottom, and also the left and the right. What we can do is add four separate values. This will go clockwise from top, right, bottom, and left. From the top we'll changes this to be 50 pixels, a right, a bottom, and the left. So if only 50 pixels will now apply to the top of the body section, but what we want to do just like the final version is to have no margin on the top and bottom, but divide up all the space equally on the left and right. The way we can do this is by applying zero margin on the top, zero margin on the bottom, and then we can set the other value for the left and the right, which will divide the space up equally. The top, we want zero, the right of auto, zero on the bottom, and then auto on the left, and these auto values will now push this into the center. If we want to, we can also take advantage of a shorter version, which is to apply two values. The first one will be the top and bottom, and then the second value will be the left and the right. Saving this will result in the exact same effect. Next we're going to target the header section and the free divs which are nested inside. So this header is wrapping all three of our sections, then we have a div which follows each one. The first thing to do is to grab this header section which is the wrapper, then we're going to set the display type. The display type allows us to change the default display for each element. We mentioned previously that certain elements can fall into a category. I will mention the block type and also the inline type. If you remember, block will take up the full width of the page and start on a new line, just like these three sections which we already have. In line, as it sounds, we'll place the elements across the page side-by-side if there is space to do so. But we're going to be taking advantage of a display type called flex. This makes use of the CSS flexbox to make laying out our lemons much easier. If we save this, we'll immediately see that all three of these div sections are placed across the page. It does this because by using the flexbox, we can set the contents that are even laid out in a horizontal or a vertical direction. By default, the flexbox will make use of the flex direction on the value of row. This means all of the elements will be placed across the page in a row. When using a left to right language, just like English is, this will be from the left over to the right. We can also change the flex direction to be column. This will stack all of the elements vertically. Since row is default, we can leave this off and assume this is already set. Next, we're going to constrain the height of this header to be a certain value. We can do this with the high property. Then I'm going to use the value of 150 pixels. Then we need to make sure that all three of the sections are spaced out equally. We want them to all have the same width value. We can do this by going back into our style sheet. Again, we're going to target the header. But this time we use the greater than symbol and then select the div. This means all of the styles which we apply inside here, will only apply to any div elements which immediately follow our header. We can see if we go to the index page, we have our header. Then wonderful nested inside we have this div section. We also have this one alongside, and then our third section. The styling will apply to all three of these sections with this code. Since we already have the header section which is the parent set to make use of the flexbox, these child elements which are nested inside can also make use of flex values. One of these is simply flex. If we set the value to be one, now this flex value of one will apply to all three of our divs. Now, this means that all three of these sections will have the equal amount of space. If we were to change it to be any of our values which is two, we'll have the exact same effect since they are all the same. However, though the difference will occur if we were to apply a different flex value to a different section. For example, if we targeted this logo section in the middle and then place a flex value of two, this would take over twice the available space as this section just here. But we want these to be equal, so this is fine for now. After this, we'll also set the text-align to be in the center. This means that all the texts contained inside of this div will be centered within this section. Looking at the final version, we also want these two pushed down to the bottom. A way we can do this, and since we are still making use of the flexbox with the parents here, we cannot make use of a property called align-self. Just after the text-aligned, add in the align-self selector, and we have the various values which we can choose. Now the value which we are going to add here will apply vertically. This is because as we've seen before, the default flex direction is row. This is across the page horizontally. Align-self will apply to the opposite, which is the vertical direction, also referred to as the cross axis. Since we are working vertically, the flex style will be the top, the center will be in the middle, and the flex end will be down at the bottom. This now pushes these down to the bottom of our div. We also need to change these to be across the page, but we'll come back to these in just a moment. We also need to make these links go across the page, and the way we can do this is by targeting the wrapper, which is the list item. Just like before when we set the display type of the header to make use of flex-box, for this, we're going to change the default display time for all the list items be the value of inline. When we save this, we'll immediately see that these change to an inline display type rather than being on top of each other just like they were before. Next, let's go to this middle section and we'll make the image a little bit smaller, so grab our header section. Then we're going to use a different selector which looks just like this. Before, we mentioned that if we use this greater than arrow, this will select any div which immediately follows our header elements. We couldn't do the exact same for this section because the image is not a direct channel of our header. This header section only contains our divs, so what we can do instead is to leave this out and this will grab any image element which is inside the header section. For this, we'll restrict the size of the header image to be a maximum width of 100 pixels. We can now see that the image is now just about the right size, but some of the spacing and also the size of the site title is still pushing this off the top of the page. Rather than making this any smaller, we'll go down to our level one heading, which is our site title placed inside of this middle div, so just here. For this section we want to, first of all, remove the default spacing which is just below. If we right-click and go to the inspector, we'll open the developer tools, click on the arrow in the corner. We can see the orange section on the top and bottom. Now, if we click on this and then look over on the right, and then inside of the elements section, go into the styles. Then at the bottom, we can see we have some margin which has been applied on the top and bottom. The level one heading, along with other elements often have some default margin and padding applied by the browser. We can also override this by setting our own margin values. We can reset this to be zero and we can see this has now been removed. However though, we want to apply a little bit of margin on the bottom and also the top, so we can change this to be ten pixels. Now we've removed the spacing, we almost have the image back on the page. The next thing we're going to do is to set the font size to be 20 pixels. This will then reduce down the font size and leave enough space now for our image. Next we're going to move on to this left and the right section and style our unordered list. If you notice and in particular if we go into the developer tools, if we click on the inspector and then hover over any of the sections, we can see that these unordered list items are not placed in the center of our div. This is because if we select our unordered list, we can see by the green section over on the left, we have some default padding, and just like the level one heading with the orange section, we also have some margin applied too. Again, if we click on this we can go over to the diagram on the bottom right. We can see the size of the elements in the middle, a padding which is being applied over on the left, which is currently 40 pixels, and then the margin which is on the top and bottom. What we're going to do is, first of all, set the margin to be a value of 10 pixels. This will then give the same amount of spacing from the bottom as the heading. Then we'll move this default green padding section so our links are placed into the center. Do this. As we've just seen, this is applied to the unordered list. First, we'll set the margin to be 10 pixels on the top and bottom and this should then line this up with our heading. We'll set zero on the left and right and then afterwards remove any default padding with a value of zero. This and back on to the browser, we can now see if we hover over the padding, we don't have any values applied. The margin, this has now been reduced to 10 pixels on the top and bottom, which will then line up with our heading. Next, since all of these items are links, these have a default color and they also have these underlined too. To remove this, we need to select our link, which is this A element which surrounds our title, and also our list items. Grab this. First, to remove the underline, we need to set the text decoration. We do have options to change things like the color, but I'm just going to remove this with the value of none. Next we're going to set the text color. I'm also going to set this up in the body section too. This also applies to other elements. The way we can add color to our text is by simply using the color property. From here again, we want to use a hex value of 373535. This will apply to the rest of the site when we create our new element. As we can see, this won't apply to our links, so we need to also apply this to our A elements by doing exactly the same. The value was 373535, save this. This is now applied to all of our links. The very last piece of styling I'm going to use for this header is to change the color of this link when the mouse hovers over. Just like we see in the final version here when we hover over any of these links, we get a change of color. To do this, we need to apply a pseudo-class to our A element. Just like above, we select our elements, use a colon and a pseudo-class will apply different styling for a different state. By state, we mean things like if a link has been visited or clicked on, if it's been unvisited, if the mouse hovers over any of these links, and also various hovers too. For this, we're going to make use of the hover state, so when the mouse hovers over any of these links, but I'm going to change the text color. Again, we're free to use any different types or values which you want to, but for this example, I'm going to mix it up and use a RGB value where we place inside three separate values. The first one is red, which is 226, the green of 74, and the blue value of 74. We can see by the preview that this gives us this red color. Over to the project, and our hover takes effect for each one of these links. This is now all of the styling applied to our header section. If you want to, you can play around these values and colors and change things around if you want to. Next, we're going to move down the page and create some more these content sections. 10. Main Content Area: Moving down from this header section which we've been working on, we're now going to add the content just below. If we take a look at the final version just inside the other browser tab, this is going to be the two sections which we are going to be creating. The first section will have a background image, and then will have a heading, and also a chance to enter an email and then submit this. Of course at the moment this will won't because this is just HTML, and you would need some back-end service for this to work. But at the moment, we just concentrating on the look and the feel of the site using HTML and CSS. Moving down, we have a second section just below, which has these three different sections. This will give us a chance to take a look at some different ways how we can position elements. We'll overlay this text on top of the image. Take a look at some of these techniques. To begin, let's go back over to our index.html page. Then if we scroll down just below the header section and make some space, make sure this is still above the body. This we're going to use a new elements called section. The section will be the wrapper for all of our first section which you see just here. Now, we could add an image just like we used in the header appear for the logo using the image element. But for this background image, I'm going to show you a different way to insert an image. We'll take a look at this in the next video via CSS. We'll start with our headings and this is going to be a Level 2 heading, then this one will be Level 3. The h2, and then hit Enter, and then the text of weekly recipes to your inbox. I'm going to save this file and then open up the live server, just like we've looked at in previous videos. There's our textures here, and it looks like it's inside of the header section because of the background color. However, this is in its own section below the header. If we take look our style.css and then scroll up to the body section, here we've set the background color for the full body. This will apply to all of our content, but this will be replaced with a background image in the upcoming video. Next, the text, which is going to be Sign up now, into the index page. This one is going to be a Level 3 heading, put the text of Sign up now. Since we're using a live server, this will automatically update when we save. To enter the user's input, we're going to make use of a form. The form is a way for the user to interact with our website and enter some values. You may have used forms in the past where you sign up by email, you can add your name, you can add all kinds of information such as messages, your date of birth. But this one is going to be simple, it's just going to be an email input and then a Submit button. To do this, we're going to wrap all of this section in a form. We can remove this action attribute since we won't be sending this during this course. But what we're going to do is place in an input. If we hit Enter, the default type which we are given is the text-based input. As it sounds, this is a way for the user to input a text value, such as a username or full name. We're going to make use of an email input. Now, this type of input which we enter, will give the browser a hint of what type of data we expect to be inputted. It can check this data and also provide some messages to the user if the type of data is not valid. For example, if we were to change this to a number type and then the user entered some text, the browser would restrict this to only accepting numbers. Also, since this is a type of email, when the user clicks on this input, it may also pop up with some previously used emails too. Moving on. The next attribute which we're going to add is the aria-label. Once you set this, to be equal to email. This aria-label is used for accessibility devices such as screen readers. If we take a look at our final version, just here, you see we don't have any labels next to our input. Often, with forms you would see a label just like this, and maybe some text just like this, which will appear next to the form input. Now, like our final version, we don't want to display this text. We could remove this text from the browser using CSS. However, there is a reason why we don't want to do this, and this is because if a user is visually impaired and cannot read this textures here, and may be using a device such as a screen reader and let them know what type of input this is. If we were to remove this, his aria-label would label this element to provide a indication to the screen reader or accessibility device to what type of input it is. After this, the next attribute is the placeholder, which is going to be the text which is placed inside this box before the user adds a value. For this, we'll say Enter your email with little space just on the left. This space will also be reflected inside of the input. Next, the second input, which has the type of submit. When we add a form just like this, we also need to add a Submit button, which is going to send this form to the server. There's a whole just here. This is a pretty simple section and all of the visuals will be created in the next video using CSS, including this background image. Next, we move down to do our section that just below. For this, we'll create a new section as a wrapper. The section is going to have three divs placed inside with each one of these images with the text. The first div, and each one of these divs is going to contain two elements. The first one is the image which you want to use for the background, and the source this is inside the Images folder. This image is a vegatarian.jpg. The alt text. Remember, this will be displayed in the browser if the image could not be loaded. It'll say vegetarian section. Then after this, we can place in the text. Now, if we wanted to, we could use a p element or we could use a heading. For this, wants to place in a Level 3 heading, since these are reasonably important sections. The text is vegetarian. Save this, and let's check this out over in the browser. Good. That's our first section. Don't worry about how this looks at the moment. We will improve this a lot in the next video. The second div, just below, this is for the middle section. This is just like the section above with the image and also a Level 3 heading. If you wanted to, go ahead and pause the video and give us a go on your own if you feel comfortable doing so. If not, I'm going to carry on with the images. The image this time is the quick.jpg. The alt text will say the five-minute meal section. The h3 is most five-minute meals. Check everything looks okay in the browser. At the moment, these will be stacked on top of each other rather than going across the page. Because as we mentioned earlier, a div is a block level element, meaning that each div will start on its own new line. The third div, this one is for the healthy options. Place in the image. Again, in the Images folder, this one is named healthy.jpg. The alt text, say healthy options section. Then the h3 at the bottom, which is healthy options. Go down. There's our third section at the bottom. Notice how all of this content is still within the body section. This gray background will apply to all of our content. It doesn't look too great at the moment, but we'll fix this in the next video, where we will apply some style into our two new sections. 11. Styling The Main Content: Welcome back. We now have some content on the page which we need to apply some CSS to. Not only your styling but we need to do a lot of layout work too. We need to position all of this text into the center of the page. We need to add a background image, some general styling, and then at this section and just below with our free images, and also the text, we need to place these across the page and also find a way for this text to replace each one of these images, just like we have in the final version, just here. From the top, we want to begin with the sign-up section of in the styles.css. But just before we do this, we need a way to actually grab this section so we can apply some styling. All of this content is placed inside of this section element. But if we were to go ahead and grab the section with a CSS, this would also apply to the section below too. What we're going to do here is to add in id attribute. This id is a unique value for this single element, so when using id's it's important that we only add this once on our page. Give it a name of "sign-up". Now we have a way of grabbing this section in our CSS file. Now before we added our selectors just like this, we added them via the tag name. We used the a, unordered list, the h1. But when we are selecting an id, we use the # followed by the id name, which was sign-up. Then inside of here, we can place in all of our CSS rules, just like we did above. The first thing we need to do is to add a background image. Now earlier, we added the background values. Now previously above we've used the background-color property just here. This is to set the color of the background. But this time what we're going to do is to set the background image. Then we can place it in a URL, which is the location of the file path of this image. Ours is in the images folder and the image for this section is the main.jpg. We can see immediately once we save that this image now appears as the background for this section. We also need to add to the height property to make it a little taller, and I'm going to set mine to be 500 pixels. This will give us enough space to cover all of the content. Next, we also want this text and also the form input to be placed in the center of our image. A simple way to do this is by making use of the CSS flexbox. Just like earlier, we set the display type to be flex and remember that the default flex direction is row, so all content is placed across the page. However though, we want these to be stacked vertically, so we can change the flex-direction be column. Now we're making use of the flexbox, we need to add in two new properties to place these items in the center. The first one is align-items and the value is in the center. So when the flex-direction is set to column, the line items will make these centered horizontally across the page. The next thing we need to do is the exact opposite, which is to center our content vertically. The way we can do this is by using justify-content and placing these into the center. Okay, now if we take a close look, these are pretty much in the center, but it looks as though as a little bit more spacing on the top rather than the bottom. The reason for this will be to do with browser defaults. If we go into the Inspect, click on this, and we can see that the level 2 heading has some default margin on the top and bottom. The same with the level 3 heading, we don't see any on the form. So what we want to do now is work with our two headings. From the index page, these two sections were placed in the level 2 heading and also the level 3. We can target multiple elements by separating these with a comma. The h2 and also h3, all of the styles inside here will apply to both of these headings. First, the background-color, and earlier we mentioned there is different types of colors we can add. We can use the rgb values which we have just here, and we can also use a hex value too. We can also extend this rgb type to be rgba. Let's take a look at how we can do this just here. If we add rgb, we can add our regular values, I'm going to go for 46 for the red, 39 for the green and also 39 for the blue. If we save this, as expected, we see a dark background color. Now, this background is pretty solid and it covers up the image. So what we're going to do is to apply a little bit of opacity. This means we can apply a certain level of transparency. To do this we add the fourth channel, which is a, and this is for alpha, and then between zero and one, we can set a value. If we set this to be one, this will be a solid background with no transparency, just like we already have. But if we change this to be zero, this will be fully transparent. I want to place this is somewhere in the middle, such as 0.05, this means we still have a slight background color. We also see some of the background image appearing too. This can give us a nice-looking effect. To make this bigger, we'll set some padding of five pixels on the top and bottom and zero on the left and right. To apply some space in inside of this element, make the background a little taller, in fact, we'll also add this on the side too. We'll just remove the zero value, so applies to all four sides. Next, the text, we're going to make this lighter by setting the color property. This one is an rgb value of two 235, 222, and then 222. Giving us this lighter color which we see just here. If we compare this to the final version just here, we can see that the text on these two headings is slightly lighter than our version. This is because of the font-weight. I'm going to change this to be a lighter value of 300, so it's not quite as bold as the default. Next, the level 3 heading level we can remove some of the browser defaults. Remember from before that we had some default margin, and I'm going to remove this. Now if we set this to be zero, this would apply to all of our sides, or instead, if we only wanted to apply this to a certain side, we could also place this into, so we could place it on the top, the bottom, the right and left, and this will now only apply to one side. In fact, it just wants to be a level 2. So this will apply to the top one. Now the margin has been removed from our top heading, this will place this more in the center. Going down we now have this form section with the input and also the Submit button. If we wanted to, we could go to our index page and add a unique id or even a classlist input. Or we could also target this input by the type. The way to do this is to add the input followed by the square brackets. From here we can set the input type of email. Now all of the styles which we add inside here will only apply to the email input. First, the width, we can set this to be a fixed value of 250 pixels, which will make this a little wider. I'm padding, which remember is the spacing inside of the element. Any values which we add inside of here will either make it taller or wider. Let's go for five pixels on all sides. The border-radius and this will give us a rounding on the corners. Just like when using margin and padding, we could also add in multiple values. Or if we wanted to apply this on all sides, we just add the single value, the font size of 14 pixels. This will override the 18 pixel value from the body section. Next, after the font size, we can also remove this border which is surrounding all four sides. This is pretty simple to do. All we need to do is to set the border property to be equal to none. We can do the same for our Submit button. Remember this has the type of submit. So just like both, targets all inputs, and then narrow this down to the type which is equal to submit. First of all, we'll set a background color. For this we could either use the background-color, which we've used above or could shorten this to simply background. Again, we have access to all of the same colors like RGB or also the hex values too. I'm going to go for cccccc, and this is the gray color which we see just here. Next, some padding on the inside. The first value will apply to the top and bottom and we want to match the padding value from the email. Just like this we'll set this to be five pixels, and then to make it wider, we'll add 15 pixels on the left and right. Also too match the e-mail, we also need to round the corners and also remove the border too. Just like above the border none, then the border-radius, round the corners, all five pixels, and also the same font size, which is 14 pixels. Good. That's now our top section complete. We're now going to move down to these free images and also the text. For this, we also need a way to select the section and if we scroll down to this section, we can also place it in an ID, which I'm going to call ideas. When using CSS, there is multiple ways we can use to place our images across the page, just like we've used previously, we're going to be using the CSS Flexbox. First of all, we'll target the container which had the ID of ideas. Set the display type to be flex and as mentioned previously, the default flex direction is row, which will place these horizontally across the page. If we take a look at the final version, we see there's some spacing around this whole section. To do this we can make use of a padding value which, remember, will appear on the inside of the section. That will be padding, and let's go for 15 pixels and there's some spacing around the edge. The next thing we need to do is to reduce the size of these images, so again, grab the idea section, and then we'll select all images which are placed in this section. Inside of here, if we set the width property to be 100 percent, all of these images will either scale up or scale down to fit inside of the container. Now we need to place all of these tech sections above each one of these images. Now, this may be tricky to understand if you've not used the position properties in the past, but we're going to be making use of two position values called relative and absolute. First of all, before we do this, we need to apply a class to each one of these sections. Now just like here where we placed it in an ID, we could instead place a class inside of any one of these elements. A class is also another way to grab any of these elements using our CSS. But the difference between a class and an ID is an ID should only be used once, but we can use a class multiple times. This is perfect if we want to add the same CSS values to multiple elements. For this I'm going to give this a name of relative, I'm going to also apply this to our second and also our third div too. We grab this over in the CSS, go to our style sheet, and rather than using the hash which we've seen for our ID, we use a dot for a class. This was relative. Then we're going to set the CSS position value to relative. We'll take a look at what this means in just a second, but for now, we're going to go down to this title. The text inside of our index page is contained inside this level 3 heading. There is multiple ways we could grab this, we could target the ideas, and then select the level 3 heading, or we could also place a class inside of each one of these. I'm going to go for the class option and name this the category title. Copy this and also place this in our two other sections. Back to the style sheet. We're going to use the dot and this was the category title. This time we'll set the position value to be absolute. Now we have two different position values set just here, we've set the images to have the position of relative, and the title to have the position of absolute. A relative position is the element's original position. It will remain in the flow of the documents and take up the original space which it was intended. We could also push around these sections with a top, right, a bottom, or a left value just like this. But I'm going to leave this as it is. Now, the reason we've set this to be relative is because if we set another value inside to be absolute. Here we can also make use of the top, right, bottom, and left, but this time the difference is the section will be referenced from our relative image. If we set a top value of 20 pixels, say this, this absolute section will look for the closest relative container, which is our image. The top value of will be referenced from the top, we have the right, the bottom, and the left. As we can see, the 20 pixels from the top will push this 20 pixels down from the image. We could also work with the left value too to push this into the middle. But alternatively, we could set the width to be 100 percent. This will now stretch the title to be full width of our image. Then this will allow us to apply the text-align to be in the center, placing these exactly where we want them to be. When we set the position to be absolute, just like we've done here, this will remove the element from the flow of the document. Naturally, it won't take up any position on the page, it will act as though it's been removed from the documents, meaning we need to use the top, right, bottom, and left to set the exact positioning. If we remove this relative section, say this, this is now placed 20 pixels from the top of the page. This is because as mentioned before, an absolute element will look for the closest relative container and if it doesn't have one, it will instead reference the full documents. Let's place this back in. The final thing to do is to also apply some space in to both sides of this middle image as we did with this image just here. To do this, back to our index page. For this middle section, we can also add a second-class separated by a space. Let's call this the middle, save this file, and over to our style sheet. Grab the middle section. To apply some space in outside of this div, we need to go for the margin. We already have the spacing on the top and bottom, so we'll leave this as zero, and place 15 pixels on the left and right. Go on to the browser, we see we have some spacing on the left and right, but we also now have an issue with our title. Let's go to the Developer Tools, right-click "Inspect," click on the "Inspector" and we'll see what's going on. This is the level 3 heading, so click on this. If we hover over the padding section, we can see we have a green outline around our title. This padding is also adding some excess space in which we don't need. To remove this, let's go back to our style sheet, and we already have a level 3 heading selector. Back up to our h3 section, this is the padding just here. We could override this section, but this will also apply to this section in the header too. Instead, we'll go back down to the category title, which is only going to apply to this section and set the padding to be zero. This now solves the problem horizontally, but we also need to maintain the vertical spacing. For this, five pixels on the top and bottom and we'll only apply this zero to the left and right. Good, this is now the styling complete for all main content. In the upcoming video, we'll get to work with our final section, which is the Footer area. 12. Footer HTML Section: Most of the main contents now on this page, and now, we're going to move down to the very bottom and create the very last section of this project. This section is going to be a footer area. It's not going to be too difficult. It will just be a footer as a wrapper, which is a HTML 5 semantic element. This wrapper will then contain a navigation with various links. You can make these links anything which you want, and you can also create additional pages if you want to link these two as well. Just like we see on the final version, there will also be a small image just above this, and this is contained inside of the images folder. If you feel confident doing so, you can go ahead and create this yourself. If not, just follow along with me. We're going to create this now at the very bottom, just above the closing body tag. Provided with HTML 5, was a new semantic or descriptive element, which is called a footer. Just like we did earlier when we created the header section with this element just here, all of the content for the footer goes in between at these tags, and we're going to create an image and also a new unordered list. First of all, the image elements and the source is all in the images folder. We need the cutlery.svg and also some old text too. Let's save this and see this over in the browser. Refresh, and as our svg, which is a little big at the moment, but in the upcoming video, we will style this with a section with CSS. Next, just like we did earlier, we're also going to create an unordered list, which will contain our navigation links. Just before we do this, we're also going to take a look at another semantic or descriptive elements called nav. Nav is a element which is intended to represent a possible page, which contains navigation links. This isn't a mandatory elements which we need to include before the browsers and screen readers which are read in this HTML. It does provide a better description of what content is nested inside. From here, we create an ordered list just like earlier. I will list items which can contain a element for a link. As mentioned before, you can also create a link to a different page. But I'm just going to leave this one empty in this video. The first one, let's say about this. The second that list item with a link, this one is for contractors. The third one, this one I'm going to suggest a recipe. The fourth one, this one is going to be privacy. This will follow links down at the bottom. The CSS is also applied when we hover over each one of these elements from the earliest [inaudible] which we had it. If we go up to the top, we also have some navigation sections just up here. What we're going to do is to also move to the top of the page and look for our unordered list inside of the header. Let's select all of this section, and then command or Control X. We can cut this out of place and also surround the section with the nav element. The same for the second set of links just below, cut the section out, place it in the nav element, and then paste the contents back inside. We shouldn't see any difference inside the browser. This is just to describe the contents which is inside of this element, just like we did with the header and footer sections. Finally, to finish off the HTML for this page, the last thing we're going to do is to place these mid dot in between the footer links. We can do this by copying the span elements, which contains the HTML entity. Let's grab this, we Command or Control C. Go back down to our footer links and we can paste this in between each one of these list items. Let's check this out. There we have it. Finally, the last thing to do for this project is going to be in the next video. We will apply our CSS styling for the footer section. 13. Styling The Footer: I'll have all of the HTML content on this page. The last thing to do to finish off this project is to apply some CSS styling it down in the footer, it's going to be pretty basic. All we need to do is to reduce down the size of this SVG will place all of the content into the center and also play a slightly different background color. Then we going to use it for the rest of the body section. So over to the styles.css. Remember that the wrapper for all of this section was the footer. We can now work with this over in our style sheet. First, let's grab this. Then inside of here we'll set the display type to make use of the flexbox. As previously mentioned, the flex-direction by default is the row which will place these items across the page. We need to change this back to be the flex-direction of column. This also applies to the footer section, which is the wrapper. The flex-direction is now column, which will in place these back vertically. You may be currently thinking, "Well, this just leaves us exactly where we're at the start." But now we're making use of the flexbox. We can now make use of a flex property called align items, where we can set this into the center. This will then now push our links down at the bottom, into the middle and also this SVG, when we reduce the size down too, we currently have the flex-direction column which is vertical, and this is referred to as the main axis. When using a line items just like got here, this will work on the opposite, which is referred to as the cross axis. This is why the center property will align these items across the page horizontally. The opposite would apply if we set the flex-direction to the row. This would then mean our main axis is across the page, meaning align items would be the opposite and this will set the vertical alignment. If you were to start now, this may look a little bit confusing, but this just takes a little bit of getting used to. Next, we'll change the background color for this footer section. Face slightly dark shade, which is going to be E5. Easy row, easy row, save. We can see a slightly different shade from the rest of the body contents. Some pollen, which is going to go inside of this footer section and provides some space in, around the inside. Let's go for 20 pixels. This will apply our space into all four sides. Finally, we need to reduce the size of this image. We can apply this to only the footer area and then any image which is meant to be inside. All we need to do is to set the maximum width of this image, the 80 pixels. There we have it. This is my recipes, websites all now complete. Hope you've enjoyed this project and your first steps towards building websites. In the upcoming project, we're going to take things even further by creating a new project and also introducing responsive design. 14. College Project Setup: Welcome back to this new project and this new section. During this upcoming section, we're going to build in this college theme website which you see here. Not only are we going to be replicating this and getting lots of more practice building HTML and CSS websites, we'll also going to learn some new tricks. In particular, one of the bigger ones which we're going to learn in this section is responsive design. Responsive design is a way to create our website, and make it adapt to different screen sizes. For example, on a larger desktop size monitor, just like this, this is how our website will look. But if we were to shrink this down to a smaller width, we see that this website will respond or adapt to the current size of the browser, and then it change the layout accordingly. This will also take effect when viewed on a smaller tablet or a mobile device. At the top, our header will be stacked vertically. We see the links just below the header, rather than alongside each of it like they are here. This is a general theme for a lot of the content. We can see here with this grid that rather than having free items side this will now be stacked vertically and be the full width of the screen. For this particular project, we only have one layout change, we have the small screen view or the larger screen view, but we can add as many changes or as many breakpoints as we would like, even if we just wanted to fine-tune a particular section of the side. This is what we're going to learn in this section. We're going to get started, just as ever by creating a project folder. Over to the desktop, a new folder. This one, we want to call this the tech-college. You can give this any name which you want to. Also provided with this project is the images folder, and you can make use of the same images which I'm going to use, or you can download your own if you prefer. After this, if you want to, you can also place this inside the project folder, and then drag over the tech-college folder into Visual Studio Code. At the moment, we just have our images folder inside here with the supplied images. What we need to do to begin is to create our new page, which is going to be the index.html. As ever, you can type out the HTML structure if you want to, or you can make use of the HTML5 built-in Emmet command, which comes with Visual Studio Code. Type in html:5, hit enter. Now, we've got all of this structure which we need for our site. The title, place this inside of the head section, save this file and open this up inside the browser. We can either double-click the index.html inside of the project folder, or as a shortcut, we can right-click on the file name, copy the path, and then paste this into a new browser tab. Good. All I'm going to do now for the rest of this video is to add a little bit of setup work, and this is to provide a font which we're going to use for this project and also provide something called the normalized CSS file. Let's begin with our Google Fonts. We do a search for Google Fonts, and the first one which we need here is fonts.google.com. Add into here, and we can choose any font which we want to use for this project. The one which I'm going to use is called Vollkorn. This is V-O-L-L-K-O-R-N. Let's go for the Regular, select this, and also close this down and we go for the medium one. Open this back up, and then we can copy all of this link and paste this into our head section. This also needs to be linked to our style sheet, so let's create this new file inside of the main directory of styles.css, and we'll come back to this in just a moment. But for now, let's just copy this over and paste this in, and if we Command or Control with forward slash, this will just comment this out for later use. The next thing to do is to include what's called the normalized CSS file. If we had O2, the search engine and do a search for a normalize.css, it should be the first link which we need just here. We can see here that the normalized file is going to help us render our website more consistently across different browsers. There is something called a CSS reset which is available, and this will reset all of the browser defaults back to zero. For example, if certain browsers had some padding or margins to our elements, this will reset all of these back to zero. However, though often these default values are added in for a reason. An alternative is to use this normalized file, and this won't completely remove all of the browser defaults. Instead, what it will do is to adjust certain values, giving our sites a much more consistent look across different types of browsers. It's really helpful to add to our project. We can also use this with MPM if you were using node. But since we're not, we're just going to download this file, select all with Command or Control A, copy with Command or Control C, and then inside of our project, now we have a second style sheet which we're going to add in. I'm going to keep this more organized by clicking on a new folder called CSS. Let's drag over our style sheets, and then open this up, create a new file called normalize.css and then paste this in. All this is essentially doing is providing some sensible defaults which we're going to apply to our elements to make them look better across different types of browsers. We need to now link both of these style sheets inside of our index. Next, let's link in our style sheet, which is the normalize.css. Remember, since we created a CSS folder, we need to also add this inside of our file path. Finding our custom style sheets, and our custom style sheet should always be the last one so None of these values above will override our custom styles into the CSS folder, styles.css. Now we are pretty much good to go with our new project. This is all of the setup work now complete, and in the upcoming video, we'll get to work with the header section and also take a look at how we can add our responsive images. 15. The Header & Responsive Images: Moving on to some content, we're now going to add some HTML, and also some style in it to our project. Beginning from the top with the header section. Then following after this is section that's just below which is the image, and also the text overlaid above the image too. This will also demonstrate some useful techniques such as centering the section over the image, and also how to make our image responsive. By responsive, I don't just mean that this is going to shrink smaller or larger like this. It's in fact, also going to use two versions of the same image, a small one and also a large one, and only the appropriate size image will be downloaded. Let's take a look at how to do this starting with the header in the body. Create the HTML5 header elements as the wrapper. Then we're just going to create two sections, which is the title in the top left, and then over on the right-hand unordered list. First, the h1, and we can also place in a <a> element to link this to the homepage, if we want to reuse this header on multiple pages. Let's go for the index.html, then I will title text inside. Next, our links, we can place these inside of the <nav> element to keep things semantic, the unordered list. The first list item is going to be for login. I wrote mine in an empty <a> element. You can also create the separate pages to link to each one of these two. If you wanted to create a "Login Page", a "Register Page", and also a "Get in Touch Page" or a little bit of extra practice. Then link to these pages inside of the href, that's the first one. The second list item, again, a link with the text of register. The third one, this one is get in touch. Okay. Give this a save and we can check over in the browser if this is working. Of course, it doesn't look great, but we will fix this with CSS in just a bit. After the header section, this is all now complete. We can create a new section, and this will be the wrapper for the image and also the text overlay. With the CSS, place in a class of apply. Then this will contain two separate sections. First of all, we have the image, which is the background image, and then a separate div, which is going to be this text section just here. The source in the images folder, let's take a look. We have two separate images inside of here. We have the college.jpeg and also the college-small. We'll take a look at what this is going to do in just a second. But for now we'll point the image source with the images folder, and then into the college-small.jpeg. Next, the div, and this will have a class of text overlay, which we'll use in a moment inside of the style sheet, and then the two tech sections, the first one is now taking online applications, which we're going to wrap in a <p> element. Notice a button with the text of apply here. Over to the browser, we have the image and also the text just below. As you may expect to place this above the image, this is going to take some CSS work. So just placing this below the image is fine for now. But what we're first going to focus on is switching between our college image. We're going to download the college-small on a mobile device or a small screen. Then, once we reach a certain size, we're going to switch to the college.jpeg, which is a larger version. If we click on this, we can see the college-small is 1280 pixels wide, whereas the college.jpeg is larger, and it has the width 1920 pixels. Why would we want to include two separate images? Well, the reason for this is because of the download time, and also the image quality. If you think about having a mobile device on visiting this project on a small screen, if we have a slower mobile network connection, we don't want to be downloading the large image. It would instead be a lot faster to download this smaller version. From the other side, if we are using a large monitor, if we were only to include a small image like this, and then stretches to be a larger size, it would lose a lot of quality. To deal with this, we are going to make use of a HTML element called picture. This is going to allow us to provide multiple image sources, and then the browser can decide which one is the most appropriate. Well, to do this, we're going to include the picture elements. We first include the picture elements as a wrapper, we still need to include the image source, and then just above this, we're going to use the HTML source element. The source element doesn't include a opening and closing tag. Instead, we pass in some attributes. The first one is going to be a media query. A media query is also something which we're going to use inside of our CSS to apply different styles to different screen sizes. But when used with the source, this is going to allow us to provide different size images for different media types or devices. One of the most common use cases for a media query is to switch the content at a certain screen width. If we pass inside of the brackets, a minimum screen width of 1100 pixels. This particular section will only apply when the browser is over 1100 pixels wide. Then once it is over the size, we can then use the source set attribute, it provides this file path to our large image. There's lots of different media conditions which we can add. We can include the maximum width. We can check for the device orientation to see if it's landscape or portrait. We can check the pixel ratio of a monitor, and lots of other different things. This is going to apply our larger image if the browser's width is over 1100 pixels. But if the browser width is below this size, it's going to fall back to this image element just here, which includes the small version. If we wanted to, we could insert as many source elements as we wanted to. We could set up different media conditions, and also point these to different images too. Over this, our two image sizes are fine. Just as a side note, we always need to include this image element. This is because this is ultimately the element which is always going to be rendered inside the browser. All we're doing is switching around the different image sources. Make sure this is always included. The way we can test this out, if we say this, is to refresh the browser and open up the developer tools with right-click, and inspect, and into the Network tab. What we need to first do here is to shrink the browser down to a small screen size which is below 1100 pixels, then refresh. From here, we have the small version of our image downloaded, and this is 361 kilobytes. If we make this wider and go over the 1100 pixels, it's a little bit bigger. Reload, and now instead this will download our larger version, which is the college-jpeg. As you would expect, this is a larger file size, so it's better to download the smaller image on the smaller mobile devices. 16. Styling The Header: Now we know this is working, we can close this down and move on to our styling, so into our custom style sheet, which is the styles.css. We already have our font family downloaded from Google Fonts, and we can add this inside of the HTML section. I'll move this up and then remove the commence. What I'm going to do here is to set the font family be a base size of 10 pixels. Now this doesn't mean that I want the text inside the project to be all 10 pixels. This is just going to provide an easy calculation, which we'll see in just a moment. Next, the color. This will apply to all of the texts. The RGB value is going to be 62 for the red, 61 for the green, and 61 for the blue. Check this has applied okay. Now we see our difference, font has applied. The base font color hasn't applied to all links. But we'll fix this in just a second. Next, the header section. The header section, we'll make use of the display type of flex. We're going to switch around the flex direction of row and column based on the size of the screen. What we're going to do in this video is to shrink down the browser to a small screen, and on the mobile version, just like we see here. We want this content to be displayed as a column. Then later on we'll apply a media query to switch the flex direction to be row. But for now, we're just going to stick with the small screen view. Set the flex direction to be column. Then also align items in the center, which will center to this from left to right. The side title is wrapped in a level one heading. So let's like this and change the cursor to be a pointer. This will change each time we hover over this section. After this, the font size and the value of two rems. A rem is a relative size, and this means it will grow larger or smaller, depending on the base font family, which was set up in the HTML. Two rems will mean this is twice the size, so this will be 20 pixels. If we set this to be one rem, this would then be 10 pixels. Having this base size set to be a nice rounded number, makes it really easy to calculate the exact font size which we want. For example, if we wanted this size be 16 pixels, we could set this to be 1.6 rems. The alternative is we have this to be 16 pixels. Then if we maybe wanted this to be 18 pixels down here, the calculations would be a little more complex. Let's just keep this as 10. This also needs to be the font size, not the font family, which you're already set above. Now if we save this, this will now all apply correctly. Next, we can get to work on these links. This is the a element. First of all, the text decoration, which is none, and this will remove the underline from all of our links. Also we want the link color to be the same as this color just here. To do this, we also need to set the color. We could copy over this color and add this inside of here. Or instead we could inherit this, and this will inherit the color from the parents, which is this one just here. Refresh. This also applies to all links and also the level 1 heading, which is also wrapped in a link. To also change the equilibrium hover over any of these elements, we can add a hover state. So a and then you colon. We can add the hover state, which is going to change the color of the text each time the mouse cursor moves over this section. You can play around with color if you want to. I'm going to go for 104, 114 and then 166. Moving down to the links, if we look at the final version, what we want to do here is to remove the dots or the bullets from our list items. Also places across the page and also make the font size a little bit larger. From the wrapper, which is the unordered list, the way we can remove these bullets is to set the list-style to none. To allow us to properly center all of these items, we can also move the browser's default. Inside of the developer tools, if we click on the inspector and then hover over the unordered list, we can see over on the left we have this green section which is padding. This has been applied by the browser or Macondo moved this by setting the value of the padding to be zero. Oh, another list. This is now been removed. Next up, we're going to make the font size a little bit larger. Then we can select the list items and places horizontally across the page. To do this, set the display type to be flex. By default, the flex direction is going to be row placing these elements across the page until the list items. The font size of 16 pixels, which we can calculate rom at 1.6 rems and also to apply some space in between each one of these. That's a margin of zero on the top and bottom, and then 10 pixels on the left and the right. This is all we need to do for the header section until we get to the larger screen. Down to this image section and we can target the image with img. Then set the width of the image. We want 100 percent. This will now make sure that our image will not stretch any further than at the width of the browser from earlier when we added the HTML. Let's go back over to this section. We give this a class of apply. This class is going to allow us to select this full section and use this as a reference point to center this section and just below, and do this. This is a class, so we use the dot. To make this a reference point for our text, we need to set the position type to be relative. We'll take a look at what this does in it just a second. We shouldn't see any difference at the moment. But the difference will become apparent when we select this text overlay. This was the class which we give to this section. Grab this. Then to make this work, we also set a position value for this section to be absolute. If we refresh, so it doesn't look any different at the moment. But what we've effectively done here is to pull out this text overlay section from the flow of the rest of the content. Now we need to tell the browser exactly where we want this to be positioned from. We can do this by adding the top, the right, the bottom and the left values over in our style sheet. What we want to do is to position this 50 percent from the left of the image and then 50 percent from the top. The left value of 50 percent and the same for the top. "Refresh". Now we getting somewhere, this is nearly in the center of the image. The reason both these 50 percent values have been applied from the image is because we've set the position type to be relative. When we set a section, just like this to be absolute, when we set the values for positioning, it will reference all of these sizes in the closest relative container. In our case, the closest relative container is the image section wrapper. If we didn't have this just inside of here, let's take a look at what would happen. "Refresh". Now since we don't have a relative container set ourselves, it will instead use the body section as a reference. The left value of 50 percent will push this over half the width of the body, and then 50 percent from the very top. But its relative container is really important. As we can see here, the centering is still not quite in the middle. We can see why better if we open up the "Developer Tools," click on the "Inspector" and select our text overlay section. We can see better with this text overlay section highlighted when we set the position in using the top and the left. This will position this element from the top left corner. Rather than referencing this from the top left, we want this div to be referenced from the very center. The way we can do this is to use a CSS transform property, which is going to mean we can move this element 50 percent of the width over to the left and also up by 50 percent too, which effectively means we move in the reference point from the top-left into the center of this element. To do this, we set the CSS transform and then make use of Translate, which is going to allow us to move the position of any HTML elements. Then we place inside two values, which is the x-axis, which is left to right, and then the y-axis, which is top to bottom. If we set the x-axis to be negative 50 percent and also the same for the y-axis. This "Refresh. " Now this full div has been transformed into the center. The only thing we need to do to balance this up is to to set the text align to be in the center. We can do this and the wrapper, now that looks a lot better. Just to recap, if you could still ensure when we set the left and the top values, you subside these from the outside of the image. But rather than using the center of the element of the reference point, it uses the top-left corner. This means that the element still doesn't quite appear in the center of the image. We have to manually move this over by 50 percent on both the vertical and also the horizontal directions. This is all the positioning all setup. What we're now going to do is to set the colors and also the font size. The font size of 20 pixels, which is two rems. The background of RGBA, 40 for the red, 40 for the green, 40 for the blue, and then the fourth value is the Alpha channel. This is the opacity of the EC through value. If we set this to be 0.7, this will be 70 percent transparent. "Refresh." This Alpha value means that our background will be slightly transparent. The image will start to show through. If we set this to be one, this would be fully opaque, meaning we couldn't see anything coming through. The border-radius is going to give us a nice rounded corners of three pixels, which you can see on all four sides. Then some padding to give you some spacing inside of two rems on the top and bottom, and then 10 rems on the left and right. Finally, the font color I'm going to use 195,191,191. The final style and property for this video is going to be this "Apply here button. The button element, to make this much the final version, we can remove the background color, add a border, some rounded corners to also match this overlay section. Then finally the hover state of the button, remove the background by setting this to be none the border, the width of two pixels, then the border color of RGB, 169, 252, 169, then three pixels of border-radius, which is going to be a match for this text overlay section and refresh the browser. We're nearly done with this. We have the border, but we just want to make sure that the text color is also matching too and the way we can do this is to also set the color to be just as the above section, or we can also inherit this, just like we did with the links. This will now inherit the color from the parent. Finally, the hover state for the button, so the mouse is going to change this color, and also just like the final version, it's going to make it slightly bigger each time the user hovers over. The way we can do this is by selecting the button and the hover state. We can then modify the border color to be an RGB value of 220, 237, 255. Then again, we can make use of the transform property. Rather than selecting translate, which we use just here, another method which we can use is to scale the element. This means we can make the elements larger or smaller. For example, if we want it to be exactly the same, this would be one. I'm seeing no difference just here. If we wanted it to be half the size, it would be 0.5. But I'm going to make this a little bit more subtle. I'll set this to be 1.05. On the actual button we can also set the cursor to be a pointer. Let's check this out. We have a cursor, the transform is taking place. I'm also changing the border color. We now have the header section content all in place and also the CSS styling for the small screen view. We'll come back to this later on and make some small changes for a larger view. But next, we're going to continue down with the project and add some more content. 17. Popular Courses Section: Hey, welcome back to this next section. We're going to keep moving down with our project and create the grid section just below this header image. This is the one, if you stretch this out, it's going to be a grid-style layout with all of the popular course's sections. This will make use of the CSS grid layout and this is going to allow us to provide all of the sections side-by-side with a gap in-between and also down to the small screen view. This will be transformed to be the full width of the screen with the smaller screen view. I'll also fix this typing mistake from earlier too. Into the HTML, this section is going to be wrapped in the section elements. Then a level 3 heading, which is going to be the title of Popular Courses. The class for our CSS is going to be courses-title. Then below this, a new div section, which will be the container for all of our courses in the grid style format. So since we're currently working with the small screen view, we're going to be making sure that all of our items are stacked vertically. Then later on we'll change the layout to be a grid style. This first div is going to be the wrapper for all of these courses. So let's give it a class of courses. Then a new div for each one of our sections which will contain the image and also the text. This one is going to have a class of grid-item. Now we need to do for each one of these grid-items is to select the correct image and also place in the text. Your first one, this is the law.jpg. You can add it all text. Then below this, the p element for our text of law. To save a bit of typing, you can type these out if you want to, but I'm just going to duplicate this for each one of our items. The second one is the image of construction, all text, the text to display. Then the next one is going to be for our engineering. The fourth one is for science. This is one just here. Number 5 is the architect. Then last, we have the business. Let's save this and see where we're at inside the browser. Refresh. So we got law, construction, engineering, science, architect, and business, and all of the images correctly linked. As you would expect, this doesn't look too great if we stretch the browser, but for now, we're just going to be focused on this mobile first approach. Over to the final version. We don't need to do a lot of styling for this small screen view, since the images are already stretched to be the full width of the screen. What we do need to do is to make the font size bigger and also add a hover effect too. Let's begin by selecting our individual grid-item. Then we can align the text into the center and make the font size bigger. Now at the bottom, lower button, your rapper was the grid-item. Select the text. Then you can push this into the center and also set the font size to be 1.8rems. Good, this now looks better. Next, we'll apply the hover effect. When the mouse hovers over each one of these sections. For this, we could apply lots of different effects, but all I'm going to do is to set the brightness and also the scale. Once again, we apply this to the full grid, which has the class of grid-item. I got the hover effect. Then we can apply a CSS filter where we're going to adjust the brightness. The brightness is a value between zero and one. So a zero. This is going to make the section really dark. If we set this to be one, this is just the original state. Just to give this a slight subtle change, we'll set this to be 0.9, making it a little bit darker each time we hover over these images. In addition to this, also a transform where we will set the scale to be 1.01. Finally, the cursor of pointer by. Also, our transform is working too if we hover over any of these sections. Just to finish off this section, we need to work with the popular courses-title. If we scroll up, this was contained in a level 3 heading. Let's grab this, h3. As with other types of headings, we also have some default browser margin, which we can remove by setting this to be zero. If we refresh, this now removes the margin from the top and bottom. So we're now free to add our own spacing of 2rems on the top and bottom and zero on the left and right. The text-align of center, and also the font size. That also increases to be 1.8rems. Good. We can see that the level 3 heading is bold by default. If we want to, we could also set the font-weight to be normal. This would remove the bold effect. Good. This is our section now completed for the mobile view. Later on, we will come back to this and transform it into a grid-style layout with a larger view. But for now, this is all fine. We'll continue on next with the remaining sections. So I'll see you in the next video. 18. Final HTML Content: Moving down below this grid section which you created in the previous videos. We are going to add that the rest of the HTML content which we need for this project on the final version, just like here. This is the sports section, which is going to have the image on the left and the text on the right, and then the footer area at the bottom. As with the other sections, this will also be fully responsive. If we shrink this down to a mobile screen, the content will be stacked vertically and also placed on top of the footer section. This video, we'll just be creating the HTML content and in the upcoming video, we'll add the CSS style in to make this look good. Then after that, we'll add some media queries to make this look good on the larger screen. Let's go back over to our index.html and below the last section which we created, create one more section. This is going to have the class of sports. This is for the sports section. This is going to be pretty simple. It'll just have a div at the top which is going to contain an image. Then a second one which will contain the text. Having these two sections below, I was to use the CSS flexbox to control the layout on different screen sizes. The first div and then the second div. The first one is going to contain an image. An image which we need has been provided in the images folder. This one is the volleyball.jpg and also the alt text. This is all we need for this first section. This is pretty simple. Onto the next section, this will be a Level 3 heading. With the text of discover our new sports facilities. If we take a look at the finished version, we see if we hover over the word here. This is going to be a link to a sports facilities page. We don't have this page, but you can create if you want to and make this a link. We can wrap this word inside of the "a" element. Place this in and it's still within our h3. The text off here. Now we'll just link this back to our homepage. Over to the browser and scroll down and we can now see our new content down at the bottom. By default, this kind of layout looks good on a mobile device because the image is stacked on top of the text, so you don't have too much work to do over in the CSS for this section. But just like the grid section above, we also need to apply some different styles. But this when we get to a larger screen. Next, the footer area just below the sports section, the h3, and this is the text of looking for more. Then this footer area will just contain a series of links, which we can place just below this and also we'll place these side-by-side on the larger view. This can go inside of an unordered list and our first list item, in fact, all of the list items will be placed in a link element. The first one is the text of, virtual tour. Just like with these sports facilities, you could also create all of these extra pages if you wanted to. I'll give you some more practice creating new pages. But I'm going to just copy this list item and paste in just below. The second link is for download our full guide. After this, this one was, hear student testimonials. The fourth and final is, book an information session. Good. Give this a save and also the browser, onto the bottom, and by default, all of these items are going to be in line since we've already created some CSS in the previous videos. But we'll fix this in the upcoming video. All we need to do for the last of the HTML is to create this copyright section down at the bottom. We can do this in a simple p element. We do need this text of, tech college. But if we look at the final version, we see this copyright symbol just here. This is what is called a HTML entity. An HTML entity is a shortcode which allows us to place in a symbol inside of our HTML file. If you want to see more of these symbols which are available, there's a handy website called unicode-table.com, and we can search for lots of different types of symbols which you want, such as emojis, we can search for arrows and all kinds of different characters which we need in our projects. If we needed an arrow, for example, we could search for this. Then we can select the one which you want to, and we'll see over on the right we have some different codes which we can add to our project. This is what we need for our HTML just here, which is the ampersand and it ends in a semicolon. The particular code which we need for the copyright symbol is also begins with the ampersand is simply the word copy followed by a semicolon. Also our projects, and we can just about see this down at the bottom of the footer. This is now all the content which we need for this project, and in the rest of the videos for this section. We'll be focusing on the styling and also we've just seen all of the CSS rules, the different sized devices. 19. Final Small Screen CSS: What we have so far is all of the HTML content on the screen. We've finished off the last two sections, which is this sport section just here, and also the footer area with the links down at the bottom. This video is going to be focusing on the styling for these two new sections. Remember, the first section of the class is sports, and this contains the image and also the text. We're going to need to center the text into the middle of the div regardless of what screen size be using. To make this easier, we're going to add a class to this section, the wrapper. This will be the sports-text. Save this. Over to our style sheets, the very first thing I'm going to do for this section is to add a new background color, it's going to be pretty simple. I'm just going to add a light color, which is eee. Over to the browser, this is just a light gray color which will just separate this from me other sections. Then the class which we just added, which was the sports-text, this, we need the display type to be flex, which will allow us to set the flex direction vertically and also horizontally. This will stay in the middle of the div regardless of the screen size. First, just by content into the center. Then also align items into the center too by having both of these properties set. This means that if we have the flex direction to be either row or column, the text will always be centered in the middle of this div. Some padding to make this a little bit bigger of two rems. Even with this extra spacing, we still see the text is centered vertically and horizontally. We can make this level 3 heading a little bit bigger. Let's only apply this to the section of sports-text. Grab the level 3 heading and increase the font size to be 2.2 rems. Just to emphasize the link, you see that I'm going to make this italic and to do this, we can grab this particular section. This was the link, just here are the class of italic. Then we can grab this over in our CSS. This was a class, so we use the dot. Now what we need to do here, is to set the font style, give this a value of italic. There we go. This has now been applied. This is all we need to do for this section, it's pretty simple. Now we can move down to the footer area. First of all, grab the footer element, which is the wrapper. What we're going to hear here is to align all the text into the center of the section. We can change the background color and also the text color too. To begin, the text-align of center. Good, we'll make these links stacked vertically in just a moment, but we'll need to apply this to the unordered list. Before we do this, we'll carry on with the background section, which is going to be an RGB value of 62, 61, 61. Now I can't see the text because our text color is now the same as this background which we've just set. To offset this, set the color for this section which will apply to the text of ddd. There we go. We also need some padding down at the bottom to give us some spacing. Add some padding value onto the bottom of one rem. Next, we can select the footer unordered list and make sure that all of the links are place vertically on the page. The footer is like the unordered list inside. All we need to do for this is to set the display type to be equal to flex. By default, the flex direction is row, so we need to change this to be a flex direction of column. Just like with the final version, we will switch this back to a flex direction of row in a later video. These go across the page on the larger view. Now let's continue on with the small screen view and add some spacing between each one of these links. Next, the font size of 1.8 rems. The unordered list will also have some default margin so we can remove this. We can see that just as soon we remove this, this has now moved back up closer to our title. If we just comment this out and refresh, we can see that there's more spacing applied up at the top. But the space in between each one of these elements, we need to target the list item. Again, within the footer section, this padding only applies to this area. Remember, we don't want this to apply to all of our list items since we also have these in the header area too. For this, some padding is fine. To make this apply to the top and bottom, we'll add at 1.6 rems for the first value, and then 0 on the left and right. There we go. The very last thing we need to do for this section is to increase the font size of the copyright area. Inside of the index.html. Down at the very bottom, we apply this inside of the P element. For the footer, crop the p elements and the font size. Go for 1.6 rems. This is all now completed for the mobile screen view. In the upcoming videos, we'll start to take a look at how we can apply media queries to both sides, which will make our project look good on all screen devices. 20. CSS Media Queries & Final Styling: To help us out with adding some additional styling and layout for our larger view, we're going to make use of some CSS media queries. A media query is a way for us to apply different CSS properties, with different media types. With screens, we can specify what screen sizes we want this to apply to. If you want them only to apply to a landscape or a portrait orientation, if the screen resolution is high density, and lots of other options. To do this inside of our style sheet, we use the @media rule, and then we're going to add our conditions inside of the brackets. A common one is to only apply these CSS rules if the screen width is a minimum or a maximum size. Just like we looked at with the responsive images, we could set something like the minimum width to be a certain value such as 900 pixels, and inside of these curly braces, all we need to do is to write our CSS code exactly like we've previously done. Then using this example, all of the CSS inside of here will only apply when the minimum width of the browser is 900 pixels wide. As mentioned, you could do things also, which are certainly maximum width. We could set the orientation. This is more for mobile or portable devices, but we could check if the device is rotated portrait or landscape. We have a search online for CSS media queries, if you want to find out more about the different types available. With this project, I'm going to stick with the screen width, as this is really general and applies to a lot of different use cases. Anything which we currently have above just here, this will always apply to the small screen view. Then what we're going to do is to override this for the larger screen. Starting from the top of our project, again, we just write this CSS like we would normally do. For this header, if we make this a little bit wider, we want this icon or this logo to appear over on the left. Then they linked over on the right. To do this, if we go back up to our original header section, we've already set the display type to be flex. We don't need to set this again since we've already specified this here. But what we do need to do is to override any of these values which you want to change. One of the things which we do need change is this flex direction. Rather than it being in the direction of column like we have here, we need to set this to be a row. Go down to our media query. Let's do this first. The flex direction, the row. This now takes effect since we have reached the screen size of over 900 pixels. Shrinking this down, we can see once we go below 900, it's now reversed back to our original flex direction. To add our spacing in between, we can set the justify content property and use a value called space between. This will only distribute all of the available white space in-between all of the elements. This works no matter how many elements we have in our header. If we had three different elements, all of the spacing would apply equally between all three of these sections. The final thing to do for this header, if we look over on the right we have some spacing to the right of our links and we also need to match this over on the left-hand side. Go back up to the very top. Scroll down to our list items and we can see we've added 10 pixels of margin on the left and right, Your balance is up, go down to our header section and then we can set this 10 pixels of margin to apply only on the left-hand side. Save, and over to the browser. This now matches up at the both sides. Next, down to the overlay section, we don't have too much to do for this. We've already setup a responsive image in the background. All I'm going to do is the font size and make this section a little bit bigger. These are the class of text overlay. The font size. Let's give 2.2 rems a try. Make it a little bit bigger, 3.4. We can also increase the [inaudible] value to add some more space in the inside. Let's go for eight rems. Scrolling down to our Popular Courses section, what we need to do for this is to set the CSS display type to be equal to grid and this will give us this grid style layout which we see on the final version. To do this, we first need to select the parent's elements for all of our grid items. This has this class of courses. Then each individual section has the class of grid item. First of all, we go to the parents, which has the class of courses, and then we set the display type to be grid. If we reload the browser, we don't see any changes at the moment. This is because we need to tell the browser exactly how many columns and rows we want to use to create our grid for the columns. We need to add the grid template, columns property. The number of values which we add inside here determines how many columns we have across our page. The final version has three different columns. What we can do is to set three separate sizes, such as 200 pixels, 100 pixels, and 300. Refresh. We can see here for our first column, we have the value of 200 pixels wide. We then have 100, and then 300, which we have set just here. We could also make these the same value too, or instead to make things even easier, we can make use of a repeat function. Then we can pass in two values. The first one is the number of columns which you want to create and then the second value is the width of each one of our columns. If we want each one of these columns to have an equal amount of width, we can set this to be 1fr. The fractional unit when used with the grid means that it will automatically calculate the width photos and make sure all of our three columns are equal. Refresh and this now takes effect. We can do exactly the same for grid template rows and we can set the exact height we want for each one of these sections. But we don't need to do this because if we just add the columns like we have here, each time we add a new section or a new grid item, this will then just automatically flow onto the next line. If you want some space in between each one of these grid items, what we can also add is the grid gap. Set this to any CSS value such as two rems. This grid gap will only appear in between each one of these grid items. It doesn't apply to the left and right or the top and bottom. If you wanted to apply some spacing around the outside edge, we do need to apply some margin or padding. This is what I'm going to do at the very bottom. It says some padding, just to the bottom of these elements and we'll keep it the same of two rems refresh. Next onto the styling for each one of these courses, and each one of these has the class of grid item. For this, place a border around each one of one pixel, a solid line, and the color of light gray. We can round the corners with some border-radius. Just a small value is fine, so let's try three pixels. This looks fine. What we want to do, we can see the border-radius at the bottom, but up on the top, we also want to match the rounded corners for this background image. Where we can do this is to again select the grid item and then apply to all images in this section. We can set the individual border-radius properties, and we can add in four individual values from the top-left, the top right, the bottom right, and the bottom left. First of all, the top-left of three pixels. Three pixels on the top right, and we don't want the bottom right or the bottom left to be rounded, so I set the last two values to be zero. Even this would round the corners on all four sides of our grid item. After this we have the sports section just below, and for this, we're going to make use of the flex direction. Paste the image alongside this text. If we go over to our index or html, and scroll down is full section has the class of sports, set the display time to be flex. Remember, when we're making use of the flex box, the default flex direction is going to be row. We don't need to include this, since this is default, this will automatically place our content in a row. If we shrink down the browser, we can see that this display type of flex will only apply on this large screen view. Look closely down at the bottom of the image, we can see this white line across here. This is something which can be [inaudible] if you're just starting out building websites. It can also be hard to diagnose, since the spacing is not been applied with any margin or padding. In fact, I've actually wrote up a blog post on this, and if we go over to my website, we can see exactly why this white spacing will apply. This image also has the same white space problem down at the bottom. This happens because by default a image elements is said to be inline. Inline elements will appear across the page by default. If we set up 10 different images, these would try to take up all of the available space on the same row and then move down to the next line. The opposite is a block level element, and this will automatically appear on a new line. The reason why the browser adds this white space onto the bottom of inline elements is because many inline elements, such as a span, can also contain text. If we consider this text, which you see just here with the letter P and also the G falls below the baseline of the rest of the text, and it's this bottom section which is called the descender, which is the reason why the browser will add some space in it down at the bottom. If the browser didn't add space at the bottom of the elements, the bottom of this P and also the G, maybe cut off. But in our case we're use an image rather than text, so we don't need to allow for this white space at the bottom. There's a couple of different ways we can get around these, and one of the simpler ways is to use set the display type to be block. This will override the inline type which we have by default, refresh, and now mean that the browser doesn't allow for the white space at the bottom of this element. This is just something to watch out for when you see some white space on the bottom of an image. Back to the media query and just below the sports section, we need to make sure that both the image and also the text area has an equal amount of space or to be more specific, a equal amount of width. To do this, we can grab our sports section, and the flex box has a flex property which will allow us to apply an equal amount of width to both of these child elements. First of all, grab the wrapper, which is the sports section, and then any div which immediately follows these elements, set the flex value to be equal to one, and since this flex value of one will apply to you both of our child div's, so both this one and also this one, you should now have an equal amount of space. If we only set the 1st div have the flex value of one and we set the 2nd div to have a flex value of 2, the 2nd div would try to take up twice the available space as the 1st div, but since we have these as equal values, they should not be reflected inside the browser. But still we see the image is slightly smaller than this section over on the right. Let's go into the developer tools. Select this section just here, and the reason why is this green area around the outside of this div. Select this and over to the computed area, we can see we have 20 pixels of padding applied to all four sides. To make this equal, we could remove this padding for the large screen. Section has the class of sports texts, so it could either remove this inside of the media query or we could scroll up to the original sports text section, and we could only apply this padding on the top and bottom. Get the value of zero on the left and right, refresh, and this now looks much more equal. Let's see how this looks on the small screen. This still looks fine since we've already centered detect using the flex box. The last section to take care of is the foot area. This is going to be pretty simple. We just need to grab the footer sections on ordered list and change the flex direction to be row. That footer, unordered list, flex directions to be equal to row, and add the space is equally across the page, we'll make use of justify content. Select space evenly, and there we go. We can also just check this looks good on the small screen. From the top, we still have all of the original CSS properties which we applied in the early videos. Now, if we stretch the browser to over 900 pixels wide, our content will now adjust to fit the largest screen. We have content side-by-side, we have a grid section for our courses, some larger text and also some additional space in too. Hope you've enjoyed building a responsive project, making use of the CSS media queries, responsive images, and also relative sizes for our texts. We have one more project to move on to where we're going to make use of a framework. I'll see you in the upcoming section. 21. Introduction to Bootstrap & Setting up: Hi everybody, and welcome back to Learn HTML and CSS by Building 3 Real Projects. Congratulations on getting to the third project. By now we've built a static website and also a fully responsive website. Next, we want to move on to a hotel project, which is going to be built with the popular Twitter Bootstrap framework. This is a look at what we want to build in. It's again a full responsive website, meaning we can shrink it down and it looks good on different devices. It's going to include a sliding carousel showing different images. There will be a search box and navigation at the top area. We'll also include the drop-down menus on the various section below. I'm going to show how we can build a nice looking website like this really quick and real easy using Bootstrap. The first thing we need to do is if we go to getbootstrap.com. We'll take a look through the website, but first we'll just click the "Download Bootstrap" button and the Bootstrap link on the left there. Let's take a look across the website while it's downloading. In the getting started section there is various bits of information, templates you can use to get started quickly. It shows you all the file and folder structures for the different downloads you can use and also the basic template. This is going to be the template we'll be using for our index page. Further down there's more examples and small templates which you can use to get started really quickly. Back at the top, there's also the CSS section. Now the CSS gives you a overview of all the different components available. We can look at tables, forms, buttons, for example, and if you just click on one of those, it shows you how to do a button in Bootstrap. It's very simple and all the CSS is already pre-compiled. Instantly, you'll get a good looking website. In the component section, we can look at the glyphicons. Bootstrap comes ready with all these available icons to use at no extra cost. There's also examples of navigation bars and the different components such as labels and headers. We're going to look at the sample code. A lot of it is quite similar to what we've already learned. We just need to apply the Bootstrap classes to link it to the CSS. We'll take a look at the JavaScript included. Now the JavaScript provides all kinds of effects. There's things such as transitions, and what we are going to be looking at is the carousel. We'll be using the code below to add the carousel to our website. Bootstrap should have downloaded by now. If you go to the downloads, we unzip it. If we just copy the full folder, and if we go back into the project, and we paste that into the project and we'll rename that. We'll call this folder MyHotel, and if we open the folder, we'll need to drag our images into there. You should have already downloaded the images you need for this project. If not, go back and download them now. As most of the files and folders setup for the Bootstrap project, we just need to add the index page. If you go into your text editor and we'll need to file and open folder, and on our desktop, we have the projects. I will go to MyHotel, and the first thing we need to do is go to File and New, and we'll save that as our index page, index.html. Let's go back into the Bootstrap website, and if we go back to the getting started section, if we scroll down to the basic template, and we're just going to copy that, and then we'll paste that into our index page. As you can see, if we just take a look up and down, it includes all the same structure we've included in the first two websites, and there's a link to the Bootstrap style sheets. There's also the viewport tag for responsiveness. The first thing we'll do is we'll change the page title and we'll call it MyHotel. The link to the Bootstrap CSS is already included, so we don't need to do anything with that yet. Also included by default is the HTML5 Shiv, which we've included in the first two projects, so that's all in place. We'll just take a look at that on the preview. That's the Bootstrap framework all setup and ready to go. Next, we'll look at adding the navigation bar. 22. Adding the responsive navigation bar: Hi, everybody, and welcome back. We have our Bootstrap project all set up now. What we want to do is start work on the top navigation bar there. If we just start by deleting the Hello, world header. We head back over to getbootstrap.com. If we select the Components section at the top, we need to look down the list and find the Navbar section. What we're going to do is copy the standard Navbar there. If you copy the coder there, I'll paste that into the top of the body section. The first thing we wants to do is we're just going to change the container from fluid just to the standard container. I'll delete the comments as well, and as you can see, Bootstrap provides a comments at the end of each closing there, so we can see exactly where we're at. So the first thing I want to do, if we look at our example, we need to put our, MyHotel name in there and start any four links at the top. At present the Brand is the placeholder text. So we'll change that to MyHotel. The four links at the top, what we need to do is if we look for the unordered list, which is there, and the individual list items which is there. The first one, if we change the link text to "STAY WITH US". Then the second link is going to be "RESTAURANTS." If check our preview and that looks great. You'll notice that there's a drop-down navigation there. We want to get rid of that for this example. So what we are going to do is if we look for the list with the class of drop-down and we're just going to delete the, I'm just looking for the close on list item there, before the last unordered lists. So if we select that and leave that section, what we're going to do is we going to copy the list item and we'll paste that in twice. Okay, it's quite fine. We'll change the text. The next one wants to be "SPA FACILITIES". The last one wants to be the, "WEDDINGS" link. I want to separate this a bit so we can see it more clearly. So next we have the form. This form section is the search box there. You can see there's the input type of text, which is where we put the search text in. There's also the Submit button which we used in the first project. Then we see unordered lists on the right-hand side, which has the Navbar right class. If we just stretch the page out wider, we'll see that the flow is the right. On smaller screens they'll drop to the position below. Again, we'll change the name of our links. So the link shown on the left, we're going to locate in the unordered list, the first list item. The first link, if we look at our final project is going to be "CONTACT US". We want to change the drop-down texts. Going to change that to "DISCOVER". Check our preview. Okay, that looks great. Our next one is change the names, the list items are on the drop-down menu. We need to find the first list item which starts with action, which is just there, and we want to change ours to the "NATURAL SURROUNDINGS" link, and then "WHERE TO VISIT", "TAKE A TOUR". Lastly, the "CORPORATE" section. Okay, such all our list items in place. Next we need to put the little image of the telephone there and sell our project. So we do that by going back to the bootstrap.com website. We're going to the Component section and we scroll down and look at the glyph icons. What we need to do is find the examples. If you click on the sample code there, and we want to place it just before the CONTACT US text. Let's put that on a new line and who pacing the example. If we check our web page earlier, it's a magnifying glass, that's just the example in which we have used on the website. If we locate the telephone, which I'm wanting to use. That's glyphicon, glyphicon-earphone. So if we go back into our class, it's glyphicon, glyphicon search. So we just need to change search to earphone. Check our preview. There we go. There's a picture of the telephone in place. So that's our navbar finished. It looks great out-of-the-box because of all the Bootstrap CSS, which is already preset, we can override any the Preset styles, but we'll leave it as it is for now. Next, we'll look at the Carousel. 23. Including the sliding carousel & marketing area: Welcome back. In the last video, we finished the navigation bar. Next, we're going to start working down on our web page and include the slider. If we go back to the getbootstrap.com, we need to select the JavaScript section. In the menu on the right, if we just look for the carousel on our text, down to the carousel example. First, if we copy the code, and then underneath our closing nav type, we'll just paste that in and look at our preview. It does not look much now, but we'll change the CSS and we'll add some images to make that look better. Let's start by adding our images. If we go down to the wrapper for slides, what we need to do is meet in the image source there, path to our images. In the images folder, the two images we're going to use are the entrance and the pool. We select the pool images. We'll just use the pool image text. In the second div below, in the image source, we'll do exactly the same. In the images folder, this one is going to be the entrance.jpg. We'll change the alt to entrance image, which is going to remove the dots, and then place of text so we can put a caption on the image, but we don't need that. Also, we've got free circles on there to indicate free images. We're only using two images in this example, so we'll change that with the list items. On the indicator section there, there's three different list items, we'll just remove the third one. That will change that to two indicators there. It looks like it's working fine. We've clicked on the arrows, and you can see we can change the image, and that's working fine. One more thing I want to show you is, if we shrink down to a mobile view, you can actually see that the menu drops down to a box. That makes it look a lot more neater and compact on mobile views. We need to surround the whole of the slider in a bootstrap container. We need to give that a div class equal to container, and we'll just close that. I'm just going to copy the closing div. We'll put that at the bottom of the page. There was also a container we use for the navigation section up there. We'll start the container again. All bootstrap content needs to be within that container. We'll just put some comments in. This is going to be the carousel, and it's going to be the end of the carousel. This is the closing div for the container. Let's let our slider to finish. If we go back to the getbootstrap website, and if we go back into the getting started section. When at the section below the carousel here, if we go into the getting started section of bootstrap and we scroll down to the examples, what we want is the carousel. If we go into that example and right click and view page source, what we need to do is, below the number is the carousel. Below the carousel, we'll copy the three columns of text below the carousel. We'll go back into our text editor. Below the closing carousel div, we'll paste that in. We'll just take a loot at our preview. We are just going to remove these three circular images. If we look at the image section on all three pictures, there we go. First, we'll change the three different headings there in the H2 tags. We'll make them the same as our finished projects. The first one will be, Never far away. The second H2 tag is, Frequent visitor. The third one is, Rooms to suit you. We'll change the text, so the first one is, Never far away. In-between the P tags, we want to change that paragraph to, With over 150 locations worldwide, you're never far away from us. The second paragraph is going to be, Join my hotel club for fantastic savings and loyalty rewards. The third paragraph is, Packages are available to suit any taste and budget. Call our friendly team to discuss. Now, let's check that one in our preview. Next, we want to change the three buttons at the bottom. If you notice on the finished project, they've got a blue background. We head back into the getbootstrap, back to the CSS section. If we look for the button section on the right, you'll notice that we're using the default button. If we look back into the index page, we'll look at the class and it's button-default, which is just at the top there. What we want is the primary button, so we need to change it to button-primary. We'll change that on all three buttons. We'll check that on the preview. Okay. Just what we want. We also need to change the text of the button, so we check the finished projects. We need to change the view details section. The first one is going to be locations, second is join our club, and the third one is going to have the name of view details, so we'll just keep that as it is and we'll check the changes. That's worked fine. All the texts at the minute is floated to the left-hand side. We want it to be centralized in all three of the divs. We do that by [inaudible] class to the row. We simply type in text-center, and that makes everything nicely centered. I just finished with this section. If you join us on the next video, we'll start looking at the featurettes below. See you there. 24. Finishing off with the featured area and footer: Hi everybody, welcome back. In the last video we looked at adding the carousel and we also added the three buttons below, so we're going to finish this website off by adding the featurettes and also the photo section at the bottom. So if we go back into the getboostrap.com website in the getting started section, we're going to use the same example we used for the carousel, which is the carousel example. If you right click on "View Source", we will copy the section below, the one we copied last time so if we locate the start of the featurettes comment, and then we go all the way down past the end of the featurettes and we'll also copy in the footer. We don't need to copy in the last container because we've already got that in our website, so copy that, and then we need to go just below the last row there above the closing container, and we paste that in. So all the contents now in place in the website there. Before we go any further, I just want to talk about the responsive grid in bootstrap. You'll notice that there's various classes such as col-md-7 and five, what they are is they're the number of columns. If you notice on the first featurette, the image size is a five column grid, and the text left of it is a seven column grid. So it's a 12 column grid we're using, so the seven on the left and the five is the full width, and if we look at the last section we did in the last video, the three equal parts are divided up into four columns each. That's how we lay things out in Bootstrap, you can make things narrower or wider by changing the number of columns in the grid. So I will switch over to our finished website, so we can see what to type in. So we first want to start off with the heading, so if we locate the featurette heading and delete the first featurette heading section, and we'll call that wedding packages, and then the span section afterwards, we'll change that to, tailor made to suit you. Then we'll look at the paragraph tags, which is just there, and we'll just include the text of the final website there. I'm just trying to copy and paste that in. We'll check our preview, see that's all okay. Next we'll put the image in there, and if we change the image location, and we're all in the Images folder, and actually let me just change the data-source on that. So images/wedding.jpg for the first one, we'll change the second image also. So images folder and we'll add the restaurant.jpg image, and the third image, again, delete the data source, and the third image is the spa.jpg. Okay that's all the images in place, we just need to change the text now. So that's the first section, and the middle one, preview backup, and we just copy the text in there, we'll put that into the paragraph section. So for the heading, it's first class dining, and we'll change the see for yourself part in the span tags as taken care of by world class chefs, and then the third and final one, I'll just copy in the photograph there, and we'll change the heading. So discover our spa facilities, and then, you'll never want to leave. Which is the only previews in our sleeper. Okay so we move on to styling these in a minute, we just want the text to be a little bit bigger. First of all, we'll just finish off the footer area, so we'll just change the text on there, and we change that to 2015, My Hotel. To add the styles for the text on there, the most preferred way to do it in Bootstrap is by overriding we're creating your custom CSS. So if we go back into the sidebar and if we go into File, New, I'm going to create a new style sheet. So we'll save that straight away, and we'll call that style.css, and we'll want to place that in the CSS folder of the bootstrap theme. So we'll save that, and then we head back into our index page, and if we go back to the top, we want to include our own CSS just below the bootstrap board, so overrides it. So we change the comment to custom CSS, and it's also in the CSS folder. We just need to change the name to style.css. So if we go back into our style.css, the first thing we want to do is we want to increase the font size. So if we go back into the index page and we find the intersection need for the featurette, so that's the first one, and then the text, the first class dining has a class of featurette heading. So we'll just copy that, and in our styles, and paste that in. Just want to add a dot in front of there if its class. We'll try the font size, we'll try that with 4ems. Okay it looks better, and we've started with a little bit of padding onto the top, just to push the text down a little bit, and we'll set that to five percent, just a little bit more, set it to eight. Okay, that looks better. You'll notice how much faster and easier it is to build a website using a framework such as Bootstrap, and feel free to customize this website or any others as much as you want using the custom CSS file, but we'll leave the website at that, we now have a fully responsive and a great looking website. So thanks for joining us, and that's the end of the fair project. 25. Thank you and what now?: Congratulations on finishing this course. I hope you have learned a lot about HTML, CSS, and Web design in general. If you will learn to build a personal website for a hobby or a website for your business, you should now have the required skills to complete this. Or if you were looking for a new career, you should now have a good foundation to build on. If you do want to keep on learning, I'll now recommend moving onto JavaScript and jQuery. Then possibly a server-side language such as PHP. It's also useful to get familiar with a content management system to use on your website such as WordPress or Drupal. Once again, thanks for taking this course, please leave a review. It would really help. I hope you join me on a course in the future. 26. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates and also to be informed of any new classes as they become available. So, thank you once again, good luck, and hopefully I'll see you again in a future class.