Learn HTML & CSS by Building 3 Projects: Launch your career! | Chris Dixon | Skillshare

Learn HTML & CSS by Building 3 Projects: Launch your career!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
25 Lessons (3h 29m)
    • 1. Welcome and what we will be building.

      2:51
    • 2. File & Folder Structure

      4:01
    • 3. Basic HTML Structure

      9:38
    • 4. Useful resources

      6:25
    • 5. HTML5 Header Section

      11:23
    • 6. Styling the Header

      16:52
    • 7. HTML- Main content area

      9:01
    • 8. Styling the main content

      14:54
    • 9. HTML- Adding the footer

      3:22
    • 10. Styling the footer

      5:35
    • 11. Setting up our responsive project

      13:25
    • 12. HTML Header- Adding the menu and responsive images

      9:56
    • 13. Adding the final HTML

      16:46
    • 14. Mobile first styling- Header section

      12:51
    • 15. Mobile first styling- Header section continued

      5:02
    • 16. Final CSS for mobile view

      10:47
    • 17. Introduction to CSS3 Media Queries and styling the tablet view

      10:12
    • 18. Tablet styling continued

      9:52
    • 19. Final CSS for larger devices and desktops

      7:18
    • 20. Introduction to Bootstrap & Setting up

      5:34
    • 21. Adding the responsive navigation bar

      6:12
    • 22. Including the sliding carousel & marketing area

      8:29
    • 23. Finishing off with the featured area and footer

      7:38
    • 24. Thank you and what now?

      0:42
    • 25. Follow me on Skillshare!

      0:23
20 students are watching this class

About This Class

413976bd

Learn how to build websites from scratch using the essential ingredients, HTML and CSS.

By the end of this course you will have the confidence and ability to create beautiful, functional websites. This course is project based so you be jumping into building your first website in no time. Don't worry if you have little or no experience, I will take it easy and try to clearly explain what we are doing and learn as we build.

I believe this is the best way to learn, you will be able to apply what you are learning to a real project and instantly see the results.

Transcripts

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. File & Folder Structure: In this video, I'm going to show you how to set up the files and folders, for your websites. I'm going to get started by creating a new folder. I'm going to create mine on the desktop, but you can save yours anywhere that you like. I'm going to create the folder with the name of projects. You should have the Images folder that was available to download in the last video. This is going to be all the website images that we're going to need for the first project. Open up the project folder. Then inside there, I'm going to create a new folder. This is going to be the name of the website. I'm going to call this, MyRecipe, which is the name of the first project we'll be building. If you open up this folder, and then we're going to drag the images in, place them inside there. Then inside this, I'm going to create a new folder. I'm going to call this JS, which is short for JavaScript. Now, JavaScript is not particularly covered on this course, we'll more focusing on the HTML and CSS, but I am going to include JavaScript folders on download a couple of JavaScript files, which will help add features to our website. But we'll take a look at those as we get to them. We can just leave that empty for now. As we get to more complex websites, you'll find there's a lot more files and folders that you'll need. I'm just going to start creating some new files for this projects but, I'm going to do that in my text editor. I want to open up the brackets. Then once that's opened, you could just find MyRecipe project folder, and then drag that into your text editor, I should just get rid of every message first. Drag that folder in. If you're using a different text editor, you should work in a similar way. If not, there should be a File and Open Folder section. You should be able to import your project. Next I'm going to create the homepage or the index page for our website. I want to create a new page in brackets with Command N or Control N. If you using a Windows PC, and make sure that you're saving this in the MyRecipe folder. This is going to be the index. That's the name of the file. Then because this is a HTML website, it's got to have the HTML extension on the end of that. Hit Save. Then I need to create one more file, which is for the style sheet. Command or Control N again, to create a new page. Then save this, again in the MyRecipe folder. I'm going to call this file style. This time this needs to have a extension of CSS. This website is only going to have one style sheet. I'm just going to save it at the same level as the index page. For larger and more complicated websites, if you have more than one style sheet, we may want to look at creating a CSS folder to store all our style sheets in. But for now we'll just click, Save and add that to our project. If all is gone well, when you open up your project folder and go into MyRecipe, you should now see that the index on the style sheet that we've created, are now inside your project folder. That's how you set up a basic file and folder structure for a simple web page. If you join me in the next video, we'll start working on the index page and provide the basic HTML structure. 3. Basic HTML Structure: Welcome back. In this video we're going to be working on the index page or the website's homepage. I'm going to start by creating the basic HTML structure or the skeleton that we're going to need for any HTML website. If you go into your text editor and look for the index, the HTML, or if you don't have this open any more, just simply open up the project file and then drag my recipe into your text editor and you should be able to navigate to the index page. The first thing we need to do in the index page is tell the browser the version of HTML that we're going to be using. We do this with what's called a DOCTYPE declaration and in previous versions of HTML, the DOCTYPE declaration was really long but now in HTML5, it's really straightforward. If we open up our angle brackets, and then we need to use a exclamation mark, and then type the word, DOCTYPE, and now when it's simply HTML. Then straight after this, we're going to create the HTML tags. Open up the angle brackets, type HTML, and then close it off. If your text editor has auto-complete, you should also get the closing tag appearing. If not, just simply type in the same tag as this, but use a forward slash for the closing tag. All the code for the website goes in between the HTML tags, so maybe you want to create a little bit of space in between. Next we are going to create the head section, so we'll type words head again between the angle brackets, and make sure you've got the closing head tag. The head section doesn't actually provide any HTML content, but it does include some information about the web-page. We also include links to external files such as JavaScript or our stylesheet files. The first piece of information we're going to put in the head section is the page title, so do that in title tanks. Again with opening and closing tags and this is going to be called My Recipe. I'll blow the My recipe title, we're going to include some meta information. Meta tags basically specify data about the website such as the page description or various keywords for search engines, along with various other things, but we're just going to keep it simple and include the character set which we're going to use for the website. It's up the characters up, type c-h-a-r set, and it's got to be equal to, and then open up the quotations. Then we're going to use the HTML5 standard, which is UTF-8 and then close that off. Then we can also up the language that we're going to be using, we use this with a HTML attribute, so we use the keyword lang for language. Again, this is going to be using the equal sign and the quotations. I'm going to set mine to en for English. Blow the character sets, we mentioned before that in the head section, we can include various links to JavaScript and CSS. I'm now going to link in the style.css file that we created in the last video, and we do that by opening up a tag with the keyword link, and then we add in the relationship by using the rail attribute, so we're going to set the relationship to be equal to stylesheets. Next we set the type. The type is equal to text/CSS, and that's how we set the type for CSS files. Now we need to provide the link to the style sheets of the file path. We do that with the attribute of href and set this to be equal to style.css, and then close off. You'll notice that there is no closing tag for the link. Our CSS file should now be linked in. Because we've got the style.css in the same directory as the index page, we're okay just to use the filename. But if we had a larger website with multiple CSS files, and for example if we had all these files in a CSS folder, we need to change the file path. We've added a CSS folder, we need to put in the file name as such but we don't for this project so we can just delete that. I just want to include one more file in our head section, and this is going to be a JavaScript file which we're going to download called the HTML5 shiv. Let's head over to your web browser and head over to Google. If you search for the HTML5 shiv, and then you select the GitHub page this is hosted on. Just to get started, if you click on the "Zip download." The JavaScript file that we're just downloading, it's nothing really to worry about, what it's basically doing is providing support for older versions of Internet Explorer. The reason we're including this, is because Internet Explorer, prior to version nine, never had support for HTML5 elements. So by including this JavaScript file into our website, we can make sure our site is compatible with older versions of Internet Explorer, so I'll just drop this down now and hopefully that zip file should have downloaded. Open up your downloads, and then unzip the HTML5 shiv. Then open up the unzip folder. The folder we're interested in is the src, so double-click on that. We need the HTML5 shiv dot JavaScript file. I'm just going to press "Command C" or "Control C" to copy that. Then I'm going to go over to the project folder, into My Recipe, and then into the JavaScript folder, and then I'm going to paste that in. Now let's include it into our folder, I'm going to go back to my text editor and to link a JavaScript file in, it's done in a similar way to the stylesheets, but this time we use the script tags. Type in script, and you'll also get the closing tag. Then within the opening tag, type in the source, so src, and this is going to be the file path to the JavaScript file, so we need the JS folder and then forward /HTML5 shiv.js, and brackets provides a handy also complete, so we don't get any type of mistakes. That should be the JavaScript file now included. Just below the closing head tag, next we're going to create the body section. Again, opening and closing tags, and a body section is used for all the HTML or the website content. What is the head section, is used for links on information. The body section is all the content that the user is going to see on the website, so we'll just leave that empty for now and we'll get started on that in the next videos. Just the last thing I want to do before we finish this video is add some HTML comments. Now a HTML comment is basically some text or some written notes inside the file, and these notes can be used to keep the code more organized or provide messages to other people who may be editing the website. To create a comment, open up the angle brackets and use a exclamation mark, and then two dashes. Then to close the comment, use a two dashes and close off the angle bracket. Any piece of text it will put between the comment won't be read by the browser and it won't be considered part of the web-page. I'm just going to type in stylesheets, so it's more clear what we're doing there, and then just do exactly the same below, but this time this is going to be called the HTML5 shiv, and that keeps our code more organized on its lot more easy to read what's going on. That's it, that's the basic HTML skeleton or structure that we need for any website. I will use this soon as the starting point for our first projects. 4. Useful resources: Available as a download with this video, you'll find a list of useful resources which will include links to various websites where you'll be able to find more information which will support your website building. I'm just going to take a little look at some of the links which were included and give you a little overview of how to use them. The first one is in the HTML section. We provided a link to the Mozilla website. The Mozilla website is a trusted and reliable source for information about building websites. Currently in the HTML element reference, this will give you a nice list of HTML elements and all in various sections. As you can see, there are certain elements we've already used so far, such as the head link. You can just click on any of these elements and you can find out small information and also find out some examples of how to use it. If you go back to the list, scroll a little bit further down to the various other elements such as the header, we'll be using the header tag in the first project to get a start with the head section, and we'll also come back to this page as we begin building. As an alternative, we've also provided a link to the W3Schools element reference, and it works in pretty much the same way. You can just scroll down on pick any of the elements and find out how to use them with the description, or by clicking on one of the elements and find out an example of how to use it. Also, if you scroll down a little bit further, there's also some useful information such as the browser support, you can see the list of major browsers and find out which browsers support the particular element that you're looking for. Then, there's also a couple of links for CSS reference, which work in a similar way to the HTML ones. First of all, again is the Mozilla website. Some of the style properties we'll be looking at as we go through the course, there's far too many to use in any one project, so it's also useful to have these bookmarked as a reference if you ever need to find any of these. Again, you can just click on one of these styles and find out some information about how to use it in the CSS. Again, there's the link to the W3Schools website, and this is also a very useful reference as well as telling you how to use them. There's also the version of CSS where the property was introduced, but currently on CSS version 3, that's the most up-to-date version app present, but you can still use any of the properties from version 1 and 2. Next is the Font Awesome website. The Font Awesome icons are a really useful feature to add to your websites. There's various benefits of using Font Awesome. One is that the low time's really fast compared to images, and also they make your website look really good. But one of the big advantages of using Font Awesome is the icons which you can see scrolling are scalable. They can scale larger or smaller without losing any image quality. So this is really useful to include. If you select the Icons tab at the very top, you can either search for a particular icon in the search bar, or you can scroll down and find an icon that you want to use and use your name to link them in. To include them in your projects, go to the Get Started section. There are couple of ways you can include them in your website. The first is called the CDN, which means that Font Awesome is hosted elsewhere, this web address there. Then you link this into your website in the head section by copying and pasting this link, or the other way is to download Font Awesome from this website. Put the downloaded files into the CSS folder and you can also link this in the head section just like this example there. Next, one of the more important things you're going to need when building websites is, you're going to need access to high-quality images to make your website look even better. There's really popular sites such as Shutterstock, which include millions of images you can download. Shutterstock is actually a paid site, so you need to pay for the images that you download. If you're not quite ready for that yet, if you don't need enough images, or you don't have any income coming from your websites, you may want to look at an alternative such as Pixabay. This includes lots of high-quality images that you can download and user free. All you need to do is search for an image. I'm going to search for an image of holiday, and then scroll down and you'll find lots of great images, and vectors that you can use in your projects. So it's a really useful websites to bookmark. The last link which I provided is a website called caniuse.com. We'll be using this website as we go through the projects. The way to use this is by typing in a HTML element or a CSS property for example, and caniuse.com will tell you what versions of the major web browsers that, that particular element is compatible with. If I search for the CSS Gradients, it finds the CSS Gradients, and below we've got a list of all the major browsers. You can find out what version of the major browsers provide support for the elements or property. We can see, for example, gradients aren't supported in Internet Explorer until we get to version 10. It's a really useful website to remember or to bookmark. There you go. Hope you find these links useful. I'm sure you'll find many of your own. Thanks for watching, and we'll see you in the next video. 5. HTML5 Header Section: Welcome back everybody. This is the good part where we're going to actually be adding some content. I'm going to start creating our first website. We've got the basic HTML structure in place now. We're going to move on to adding the header section. I've pulled up the finished project so we can get an idea of what we are going to be creating. In this video we're going to be adding all the HTML for this top section, which includes the logo in the center, the navigation on the left hand side, and also the navigation on the right-hand side. To make sure that these are three separate sections, we're going to be using what's called a div, which is a division or a section of our website. We're going to be creating three divs, one for the navigation on the left, one for the right, and also one for the center. I'm just going to head over to the Mozilla HTML reference, which is included in the links in the first section. I'm just going to search for the div. I'm just going to use the website's find feature and we'll look for a div, and you can see it's under the Text Content banner. If you look for the div, you can find out how to use that. If you look for an example, you can see it's the opening and closing div, and then we can put the content in the middle, such as any kind of text that we want to use, or any links. Now we know how to use this. Let's go over to the text editor. If you remember from the video that we created this index action, all the website content goes between the body tags. Let's start working between those. I'll go under the body section and then press the, "Tab" to indent it. I'm going to, first of all use the HTML5 header section. This is new to HTML5, and it keeps all our code more readable. So we know that all the header section goes between these tags. Now we've got the header section, I'm going to create the three divs, or the three sections for our header. Open up the tags and then type in, "Div" and then close it off. This is going to be the first div, and then we'll do two more. This is the second div, and then add the third div below. I'll give it space in between so it's more clear to see what's going on. We're going to create the left navigation section. So we'll just take a look at the finished website. It's going to be the section on the left with the two links. To create the two links, we're going to use what's called a unordered list. There's two main types of lists we can use. We can use an unordered list, or an ordered list. The difference is the ordered list has numbers next to each list item. They're numbered 1, 2, 3, etc. The unordered list has a bullet by default to the side of each list item. But we can remove that in the CSS. So if you go back over to the Mozilla website, I'm going to scroll down and find the unordered list, which is UL. Select that and then scroll down to the example. To create an unordered list, we need to create the UL opening tag, the UL closing tag, and then each list item in between is surrounded with LI tags, which is short for list items. You can see you can create as many of these as we want. We need create two. Let's go into the first div and then create the UL tags and make sure that the tags are indented so the code is more readable, and then the list items, we use LI. So the first one we need to create is the Popular Recipes link. Between the two tags, type in, "Popular Recipes" and then below the first link, add a new list item, this time for what's new, and then save that. Now we've got some content in place on the website. We want to actually preview this in the browser and check that everything's working fine. If you're using brackets like I am, there's a live preview button on the top right corner which you can select, and it should open up in the web browser. So you can see that's all working correctly. We've got the two list items there. If you're using a different text editor, which doesn't have a live preview, the way to see what's going on is by opening up the project folder and locating your file. If you double-click on the index.html, that should open up in the browser in the same way. The only difference you may find is every time you need to make a change, or every time you add content in a text editor, you'll need to save the text editor and then go into the browser and refresh to make sure the browser updates. But if you're using brackets like I am, it should automatically update as you type, so it can save you a bit of time. As you can see, that's all working, so we can continue with the website. It doesn't look the same as how we've got in the finished website just yet. That's because we're at the styling by the CSS, which we'll do in the next video. For now we'll continue with the second and the third div. Actually, first we'll make these links. As it stands, these are just text items, but because we want to make these available for the user to click on and take us to a different section of the website, we can do that by surrounding them in anchor tags, which turns the text into a link. To make this text into a link, we're surrounded with an anchor tag, which is the open brackets with the a. So we've got the opening tag, and then put the closing tag after the text. Make sure these are nested properly. So from the inside out, we've got the a tag, then the list item, and then again the a tag and the list item at the end. So to tell the browser where to link this text to, we need to add the file path to the web page we're linking to, and we do that by using the href attribute, and then we can set that to be equal to the file path. For now we haven't created any more HTML pages to link to so I'm just going to leave that empty for now. But I'm just going to copy and paste for the second link. I'll do the same for the closing tag. Now we've got these list items as links. We should see that when we go into the browser, that we've now got the underline and the cursor turns into a hand. I'll hover over so you can see the links are working properly. So now we're going to do exactly the same for the right-hand div of categories and meal ideas. If you just want to do exactly the same, we're just going to copy the unordered list section, and then I'm going to paste this in the second div between the div tags, and then the first link had the text of categories, and then the second link was Meal Ideas. Just change them, and then save that and then check that out in the browser, and you may need to refresh. There you go, that's our second link now in place. Again, it doesn't look like the finished website, but we'll fix that with the CSS. The main thing is that the content is in place. Next, we are going to add the middle div, which is the chefs hat logo. I'm going to show you how to include an image and to include some text below. I'll go down to the third div. The way to include an image is by using the image which is IMG, and then the source is going to be equal to, and then we need to set the file path for our image. Because we've got an Images folder, type in the name of the folder of images, and then forward slash. In the Images folder, I've provided a picture called, "Chef's-Hat. " Chef's-hat.PNG, and make sure that's between the quotations. An image tag is what's called a self-closing tag. Meaning it doesn't have the separate closing tags, such as the div. Let's use use a forward slash and then close it off. So just blow the image, I'm going to add the, "My Recipes" text, which we're going to add in paragraph tags. We use p to surround the text and then add the text of, "My Recipes" and then save that. If we go over to the browser to check that's all working. Great. There's just one more thing I want to add before we move on to the CSS for this part, we need to add a name or an identifier to each one of these divs so we're going to link it to the CSS. The way to do that is if you locate the opening div, we need to give the div a name. There's two ways we can do this. We can add a class and set the class name. In this case, it would be left or something descriptive. A class is used when we are going to be using the set of CSS more than once on the website. So if I wanted to float this section to the left, I could also add this left class to another section further down the website, or if we know that we're only going to be using a particular section once, we can add an ID. In the case of the logo section, we know we've only got one logo section on the website, so we can give this a name by an ID. I'm going to set the ID name to be, "Logo" and then add the class of right to the menu which is going to be floated to the right. So now each section has a name and we'll use that in the CSS. We'll do that in the next video and we'll make the website that we've got at the minute look more like the header section that will go in the final project. Thanks for watching and we'll see in the next video. 6. Styling the Header: Welcome back. In the last video, we created the HTML section for the header, we included the navigation links, and also the logo section. So in this video, we're going to be working with the CSS file. I'm going to be adding some styles to make sure that the header section looks more like the finished project. So we're going to be working with float and float on the free divs to the left or to the right. We'll also be applying some styling to the logo and the text area, and removing the default bullets from the left-hand side of the list items. So to get started, if you go back over to your text editor and open the MyRecipe project, and go into the style.css. So I'm going to get started by changing the background color for the website. On the finished website, there's a white background color, which is on either side of the body section. So we add that by selecting the HTML and then using the curly brace, opening and closing tags. Then to change the background color, type in background-color. If you're using Brackets or a different text editor with autocomplete, that should make your life a lot easier. So there's couple of ways we can add colors. We can have a selected color from the drop-down list, we can use a hashtag and then use a six-digit hex value such as six Fs, which is the color white, or for certain colors we can type in the color. So we can just type in white, or we can type in red. Make sure that the end of the line has a semicolon. So if you want to check if that's working, save that and go over to your project in the browser, and you should now see that that has taken effect on the website. So we want our background color to be white, so I'm going to change that now. So next we're going to change the background color of the head section. This is going to be the background of the body section. So go back into the CSS and then type in the body and then use the braces. So again, select the background color. Now, this time I'm going to use the hashtag to get the hexagon value. I'm going to give this the value of ede6e6, and then save that. If you go into the browser and refresh your project, you should see that now we've got the different background color. The background color for the body will only apply where we've actually got content rather than be the full height of the web page. To get the six-digit hexagon values for colors, we can find them on the W3Schools website. So go to W3Schools and then color picker, and it should be the first link that appears. You can select a color off the list there, and once you pick a color, for example, it will give you the color reference on the right-hand side and you can put that into your own CSS. So at present the body section spans the full width of the page. I just want to change this to make sure that the web page is centralized into the middle of the browser, and then some space on the left and right-hand side. We do this by adding a margin. So we'll look more margins and paddings as we go through the course. But basically a margin is the space which appears surrounding the div or on the outside of the div, and a padding is the space which applies inside of the div. So now we'll apply some margin to make sure that our full body section is centered. So we do that by typing margin and the two properties we're going to add. The first one is zero, and that's the margin that appears on the top and bottom. So because we want the web page to be at the very top of the browser and also at the very bottom, we don't want to add any white space there. The second one is the left and right. I'm going to set this to auto, and auto will automatically set the margin to be equal on left and right. This will become more apparent in just a moment. Next, we'll add the width to be 960 pixels wide. So let's take a look at the browser. I'm just going to stretch this out a little bit further. So the body section, you can see, with the background color, has been set to 960 pixels wide, and you can see that there's equal margin on the left and right-hand side because we set that to be auto. So that now means that the full body section is in the center of the web browser. The last thing I want to add to the body section is the font family. So if we type in font-family, we can set the font that we want to use throughout the website. So we want three values of this. The first one is going to be the first choice of text, which is arial, and then separate it by comma. If arial is unavailable, the next choice I'm going to put in is helvetica. Then again separate it by comma. If you just put in a generic sans-serif, this will be the fallback font type in case any of the first two choices are unavailable. So now we're going to add some styling to the text, and the text were hyperlinks. So the links were surrounded by the a tag if you remember from the index page. So to style this, type in the a tag then open up the braces. To remove the text underline, we can set the text-decoration to be none, and also change the font color by typing in color. I'm going to use the hexagon value of 373535 and the semicolon, and save that. So that's changed the color to the darker gray color and removed the underline. So next we want to move on to the header tags. So we used the HTML5 header tag as a surrounding container. So back into the style. You can just go below the a tags, I'm just going to make some space. I'm going to add a comment in just to sections of the CSS. The way to do a comment in CSS is by doing a forward slash and then a star, then to close out with a star and then a forward slash again. Then just like the HTML, any text that we put in-between these comments will not be read by the web browser. So I'm going to call this the HEADER section, and then select the header tags. So to set the height of the header container, simply type height, and then I want to set mine to 150 pixels. Then refresh the browser. So now we've set the header section to be 150 pixels tall. You can see the content is down to flow outside the container, but once we get these free elements or the free divs placed in-line, that shouldn't be a problem. So you can remember before we mentioned that the margin is the space on the outside of the div. Now I'm going to add some padding to make some space inside of the div, because the text is bunched up right against the top of the container. So type in padding, and you can either set the padding to be all the way around the container or you can set it to one side. So I'm going to set the padding on the top to be 20 pixels. You can see there's now a gap at the top of the container, so that pushed the content down by 20 pixels. So now we're going to move on to the navigation or the list items. So by default, the ul or the unordered list has some default padding, so I'm just going to reset that and set that to zero. Then we're going to make the individual list items, were going to make those inline rather than being stacked on top of each other. The way to do that is to change the display type by setting display to be inline. Now if we take a look, we should see that the list items are now inline rather than on top of each other. So next, I'm just going to add 10 pixels of padding to the list items just to make them a little bit more spaced out and also set the font size. Let's do that again in the li section. Set the padding to be 10 pixels. I'm also going to change the font size to be 16 pixels. So let's take a look at that. So next, we're going to add a border on the right-hand side to separate the two list items just like on the finished project. So you can see that there's a border on the right-hand side of the first list item, on the left div, on right div. The way we do that, is we're going to target the header section and then within the header section, we're going to select the list items. Well, because we only want to add a border to the right of the first list item, we use a pseudo-class, and we'll do that by typing a colon, and then selecting the first-child. This is the first list item in any list. the style we want is the border-right. The three properties I'm going to apply here. So the board is going to be one pixel wide, the line type is going to be solid, there's other things you can add such as dashed or dotted. To create different line types but I want to keep mine as solid. Then the color, I'm going to set the color to be 373535, and a semicolon. So let's save that and take a look. There we go. So we got a border right now to the right-hand side of the first list item. Now we're going to apply some floats to the divs to make sure that the three divs appear inline. So we're going to start with the left div. Now the left div, we give a custom class and we added the class name of left. So if you go into the style, we target a class with the dots or the period and then the class name. I'm going to set the width to be 320 pixels wide. The reason for that is because we set the width for the body to be 960 pixels wide, so we want this division to be one-third. I'm going to set the float to be left. This will move the full div to the left-hand side of the page. Then we'll do the same with the right div. So select the right class and then add the width, we'll make it equal, so it's 320 pixels. But this time, the float that we need to add, is to the right-hand side. So let's take a look at that in the browser. That look more likely. We've got the left navigation and the right navigation on either side. So next, we're going to move the navigation a little bit further down from the top. So it's positioned more likely finished website. So I'm going to add some padding to the top, push it down, and also some padding on the left, just to keep it away from the edges. To do that, we'll go up to the left section. So we target the left class and within the left container, we'll select the unordered list. So just keep it away from the left border, add some padding on the left-hand side to be 30 pixels, and then to push it down from the top of the container, I'm going to set some padding on the top of 90 pixels. So that's looking better. So now we can move on to the right div. We're going to add very similar positioning, we're going to move down the navigation from 90 pixels from the top, and we'll also going to keep it 30 pixels from the right-hand side to make it equal. But there's just one more thing we need to add because this text by default, is on the very left-hand side of its container, we need to also float the text to the right-hand side. So if you go underneath the right class and then select the right class again, but the unordered list this time. We'll float it to the right-hand side of the div, and that should push it over to the far edge. Then column reference is 30 pixels from the right, 90 pixels from the top, just like the navigation on the left. So padding on the right is going to be 30 pixels. Padding on the top is going to be 90 pixels. So there we go. We need to finish with the header section. We just got the logo section now to adjust. You can see we just need to make sure that the image on the text is in the center of the div. We'll also add some styling to the text to make it look a little bit more like this. So we'll do that by selecting its id. In the index page, we give the logo section a id of logo. Head over to the style.css below all the CSS reporting so far, we'll use the logo id. Rather than the period that we use for the class to select an id, we need to use the hashtag and then the name of the id which was logo. So to make it equal, we'll set the width to be the same as the other containers as 320 pixels. I'll float this to the left, so it's up against the left navigation. Then we'll use the text-align property to pull it into the middle of each container. So text-align, we're going to set that to center. That keeps all the content nicely in the center of its div. We need to also add a color to the text and also make the font size a little bit bigger. So we'll start with the color of the text. This is going to be the red color which has a value of b46363. To make it a little bit bigger, we'll adjust the font-size to run 36 pixels, and save and take a look. Our logo looks a lot better now, but it's actually pushed out the boundaries of the container. The reason for that is because there's some default margin which is applied to text by the browsers. So we can remove that in the CSS. The way to do that is by selecting the logo section again. But this time, we'll select the p, which is the text. We can simply set the margin to have the value of zero. As soon as you do that, you should now see that the margin which was surrounding the text before, has now disappeared, which is allowed the text to move into its place. So there we go. That's the end of the video. That's the header section all finished now. So join me in the next video and we'll continue down with the website and we'll start by adding the HTML for the main content area. 7. HTML- Main content area: Welcome back. Now we've got the header section all finished. We're now going to move down and add some further content below the header section. Taking a look at the finished project, we're going to move below the header section, and we're going to add all the HTML that we see all the way down to just above the footer. We're going to add the text, which is at the top. In the sign up area, we'll be adding a form, so users can put in their e-mails. We'll also be adding the three images and also the text above them. I'm going to lay these out in three separate <div>s, like we did in the header section. Let's get started in the text editor. We need to go back into the index page, and below the closing header tag, but still within the body section, we're going to create a <div> which is going to be a container, and this is going to surround the whole of the main content. Create a new <div>. Because we are only going to be using the content area once, we want to give this an ID. The ID is going to be main, and then close it off. I'm going to start it with the text, which will join our e-mail club and sign up now. Open up the p tags, like we did with the my recipe text. The first line of text is, join our e-mail club. Type that in-between the p tags, and that's it. That's working okay. Gray starts the text appear in there, and then we need to add another line of text, which is for the sign up now section. Create a new line of text below, open up the p tags and then the text this time is sign up now. Next we're going to create the HTML form for the user to put their e-mail in. I'm sure you've all used HTML forms before on various websites. It's the area where you can put information such as your name, your e-mail, or your address. It usually has a submit button at the very end so you can click and it sends your information to the website. All of the sections that we put your information in is classed as an input and these are all surrounded by a HTML form. Let's get started by adding the form tags. So the opening and closing tag. The first input when it's out, is for the e-mail section. So we add the inputs and there's a few attributes we need to add to this. First of all, we need to add an ID, which is going to be the name of e-mail and then we add the input type, and you can see by the list, there's various different types you can put, such as buttons, or e-mails, or passwords, but we're going to select the e-mail type and we also need to give it a name. I'm going keep it simple and just call it e-mail. Then you'll notice on the finished project, there is some text inside there which is pretty faint, which says, "Enter your e-mail." I will add this in by adding a placeholder value. So add placeholder and then put the text inside there. I'm going to create a space and then type in, ''Enter your e-mail," and then close that. I'll just get to the sidebar to make some more room. Let's just check that out now. There's our e-mail section with the placeholder text, and then we need to add the submit button to the side of it. The submit button is also a input type. So create a new input and we can give it an ID, I'll just call this click. I'm going to use the ID in the CSS in the next video to apply styling. Let's make it a submit button, we give it the type equal to submit. Then to add the click here text, we do that by adding the value. I'm going to put this in capital letters, so I'm going to call this CLICK HERE, and then close off our input. Let's save and then take a look. Great. So we've got the e-mail input and then also the submit button on the right. In this course, we are just mainly concentrating on the HTML and the CSS, which is the frontend presentation. But to actually get this e-mail section to work and to send an e-mail to the website, you need to link this up to the backend using a server side language such as PHP. That's maybe something to look into after finishing this course. For now we'll just move on. That's the content for the main section. There's also a background image which we've got on the finished project, but we're going to add that via the CSS in the next video. Now, I'm going to move down to adding the three boxes just below. The three boxes are going to be within their own <div>. So I'll just find the closing <div> for the main section, I'll just pull up just like that. Let's create one new <div>, but still within the body section. Let's start by creating a container <div> and this container is going to have a class of "cf". The reason for that is because we're going to be adding a clearfix method to this container. We'll talk about this more in the next video and what it does. For now, we'll carry on with creating the three image sections. Within this container, I'm going to create three new divs which is going to be for each of these three sections. Create a new <div>, this time with a class of ''box''. Within this box section, we need to add the background image and also the text and I want to make sure that the full <<div>> is a link that includes the text and the background image. We'll do that with the <a> tags. Just like we did with the navigation, at the very top, we're going to add the href, which is the file path. Add the attribute to the opening tag, type in <href>. Because again, we don't have any pages to link to yet because we want to create the index page, I'm going to leave that blank. Within this link I'm going to first add the image. So the image, and then the source. The image source is again the images folder, so ''images/pizza.jpg'', and then close off and then open up some <p> tags to create the text. The first link was Vegetarian. So save that and check that's working okay. There we go. So the image on the text is appearing on the page, and as we hover over the image and also the text, you can see that the pointer changes to indicate it's a link. Someone can repeat these box section two more times, for the 5 Minute Meals on the diet recipe section. So copy the full box div and keep it within the clearfixed container. Just below, we can paste the <a> twice. The only thing we need to change is the name of the image. The second image was pasta.jpg, and the text was 5 Minute Meals, and the third what we need to do, was the Diet Recipe section. Let's change that now. The image for this section is called diet.jpg, and the text was Diet Recipes. Let's save that and let's take a look in the browser. So go to the, My Recipe project and refresh. Great. That's the second and third image. Now let's go to the text appearing below, and the text isn't appearing over the image just yet, because we need to do some work in the CSS. But we'll do that in the next video, so we'll see you there. 8. Styling the main content: Welcome back everybody. We've now got the content for the main section of our website. We've got the images with the heading below them. We need to add a bit CSS to make these all look a lot nicer. We also need to add in the background image for the Sign up now section so it's more like the finished project. In this video, we'll be working with CSS background images. We'll be applying style into various properties. We'll also be dealing with absolute and relative positioning to allow us to easily position the text over these three images. If you go to your text editor, and if you open up the sidebar and go on to the style.css. Just like we're doing for the header section, we're going to create a CSS comment. This time I'm going to call this the content. It was the forward slash, the two stars and the closing forward slash, and then type in the name, so I'm going to call this the content. If you remember in the last video, we added a class to the last section of CF. We mentioned this will show up for clearfix. We're going get started by including this into our CSS, then we'll take a little look at exactly what's going on there. If you go over to Google and search for the micro clearfix, we're going to use the micro clearfix by Nicholas Gallagher. Select the top link there. Okay. I'm going to scroll down on copy the CSS, so Copy and Paste this into the style sheets, and the clear both property is the main one I want to be focusing on. This clears the floats. If we look at the finished project, the three images that we are going to be including are all floated to the left so they all appear side by side. When we're dealing with floats, it can cause a problem with its surrounding container. What happens is the three floated items effectively cause the surrounding container to collapse and take up no height. If this was to happen, the photo section or any of the content which is below would push right up to the top of the container, and it will be hidden behind the images and break the layout. We add the clearfix to stop this from happening, and the clear both property removes both the left and the right floats. Because we've included the micro clearfix, the san over property is included to make sure that the clearfix is more cross-browser friendly. We'll also work in some of the older versions of Internet Explorer. Now we've included that, I'm just going to select the main id, which was the surrounding container for the Sign up section. We're going to include the background image, so type in background, hyphen image, and then because we are using an images folder, we type in the URL, and then within brackets we add the file path to our image. It's in the Images folder, and then forward slash. We want to include the picture of the dishes, so it's dishes.jpg, and then semicolon. We need to also add the height of the image, and the heights of the image is 438 pixels. Let's take a look at the browser, so we go into the project. Great. Now we got the background image included. Next, we'll start working on the text so we can see the 'Sign up now' text. We're going to change the color and also the positioning. Again, we'll select the ID of main and then the P, this will tag all the text in the main section. I'm going to start by removing any default margin by setting that to zero, and then we want some padding on the top. You can see on the finished project, we have added 20 pixels of padding to keep it away from the top of the image. Add some padding onto the top of the text of 20 pixels, and the text color we're going to use has the hex value of b46363. Now we've changed the color, we should see that appearing on the screen there. All that's left to do is align the text into the middle and make it just a little bit bigger. Set the text align to be in the center, and then we'll set the font size to be 30 pixels, now let's take a look. Okay, it looks better. Next we'll move the Sign up section or the input into the middle to. If you go back into the HTML and if you look for the form, we can simply just go into the CSS and type the word form. I'm going to turn padding onto the top of the form of 30 pixels, and this will keep it away from the text. Then to move into the middle, we'll set the text align to be in the center, so its now in the middle. On the e-mail input, it just looks a little bit too small for my liking, so I'm going to make this a little bit bigger. The e-mail input had the id of e-mail. Select that in the CSS with the hashtag, and then e-mail. To make it a little bit wider, we want to set the width to 220 pixels and also give it a little bit more height. When I set that to 25 pixels, and let's take a look. Good, that's looking a little bit better. At the minute we've got square corners, and I just want to add a little bit of a radius just to make it look a little smoother. Go back into the CSS and set the border radius. I'm just going to have it quite small, so set that to five pixels, and then I'm going to remove any default padding. Then to give the e-mail input a little bit of room from the Submit button, we need to add some margin to the outside right. Set the margin on the right hand side, I'm going to set that to 10 pixels, and let's take a look. Okay, that looks a lot better. Now we've got the e-mail input, and it's got the heights of 25 pixels, so now I just want to make sure that the Submit button matches and that's going to equal height, and also around the corner, and the Submit button, have the id of click. So because it was an ID, again, use the hashtag and select click. So all you need to do is match the height of the e-mail section. So that was 25 pixels, and also the border radius, again, we match the e-mail section of five pixels. Good, let's us finish now with the sign up section, that's looking really good now. So now we're going to move down to the free images, I'm going to float these all to the left so they are aligned across the page. So lets start that now. So the divs that we created as a containers for the free images, all had the class of box. So we start working with the box now. So this time because it was a class, we use the dot. So I'm going to start by setting the position of the boxes to be relative. We'll talk about relative and absolute positioning in just a moment. But I'm just going move on for now and set the float to be left, and that should make all the images appear side-by-side. The next I'm add some margin onto the top and also to the bottom. So they're not too squeezed up against the rest of the divs. So margin on the top. In fact, if we just set the margin property, we can set 15 pixels on the top or bottom, and zero on the left and right, rather than having a margin top line, and then a margin bottom line. There is a little bit spacing now at the top and bottom. So then we'll position the free images. You You see that the gap is on the right-hand side, and we want this gap to be equal between each of the images. So I'm going to set the margin on the left of the free images. So again, within the box class, let's target the images by using img. Again, lets set the position to be relative, and we'll come back to in just a moment. The z-index, is going to be one. So the z-index is going to be quite important, because we're laying the text over the image. The z-depth is the order in which elements appear on the screen from front to back. So we're going to set the image to be number one, and then we're going to set the text to be a z-index two. Because that's a higher number, this will appear more to the front. So it will appear on top of the image rather than behind. Then next I'm going to add some margin on the left-hand side of the free images of 15 pixels. So that's 15 pixels on the left of all the free images. So I create a nice equal gap between them all. So now we can move on to the text and position this over the free images, just like we see see on the final project there. So again, let's select the box class on the p text. So this time the position is going to be absolute. So now I want to talk a little bit about absolute and relative positioning. So we've set the text to have a position of absolute. So take a look at the website. We want the text to be in the middle of each of the free images. The way absolute positioning works is it looks for the closest relative container. So because we've set all of these free image containers to have a position of relative. This means we can reference the text from the outside of the image. So we can position the text from the top and also from the left and right of the free individual images. So let's do that now. So within the box text let's add the width of a 100 percent. This will make the text container stretch to be the full width of the container or the full width of the image. So that will allow us to set the text to be in the center. So to move it up, we're going to add some position from the top. So we go back into the CSS, we'll reference the position from the top of the image. I want to set mine to 12 pixels. Then we'll set the set the z-index to be high number than the image. So we set that to two. Let's take a look. Good. So the text is now appearing over the image and it's 12 pixels from the top of its container. So now we just want to set the text line to be in the center and also increase the font size. So we start with the text line of center and increase the font size to be 24 pixels. Let's take a look. Starts looking good now. If you look really closely, one thing you may notice is the text is not quite in the middle of the image, and if you're using brackets like me, you're going to get a square box which shows the container. You can say the container is actually from the left-hand side of the body, rather than the image. The reason for that is because we added some margin to the left of the image of 15 pixels. So we'll do exactly the same in the text. So add some margin, left of 15 pixels and that should solve that. There we go. So we're nearly finished now with the CSS for the main section. There's just one little change I'd like to make, if you notice on the middle image the text is not standing out very well. So I want to change the color of that to be white. So if you go back into the index page, so about the free box classes. Onto the middle div, I'm just going to add one extra class. I'm going to call this middle. This will allow us to select the text in the middle box. So in the CSS at the middle class, and then p. I'm going to set the color of the text to be white. Let's take a look at that. Great it looks a lot better. The white text now stands out on the dark background. I'm now just finished with the styling for the main content area. So thanks for watching and we'll see in the next video, where we'll continue with the photo section. 9. HTML- Adding the footer: Okay. Welcome back, everybody. Our recipe website is really moving on now. We've created all the content, all the way down to the footer section. On the finished project, we're going to be adding HTML. For the footer section at the bottom of the page. It's going to be a pretty straightforward section. It's nothing we haven't covered so far. So if you want to give this a go yourself, feel free to do that or follow along with me. I'm going to get started by heading on to the index page and then just above the closing body tag, which we're going to make a little bit of space. I'm going to use the HTML5 footer tags. The whole of the footer area is going to be between these two tags. I'm going to get started by including the image of the cutlery. So image, source and as I've heard the roll now images folder. So images/slash and the image we need is the cutlery.PNG, and then close that. Then I'm going to open up a set of nav tags. I'm not sure for navigation and this makes our code a little bit more readable. I'm going to put the navigation for the photo area in between these tags. We're going to set the menu in another list with list items. So create some list items. The first list item that we need, if we look at the footer is, "About Us" and these also links. So to make them into links we need to use the a and then the href. Again, let's leave that empty for now. So the first link have the texts of about us, and then create a new list item below, and then the a tags just exactly the same and this link was "Contact Us". The third link was "Suggests a recipe". So suggest a recipe goes in there. Then the last one was "Privacy". So create the last list item and then the last link and type in privacy. Let's save that and head over to the browser and we'll take a look. Go over to the MyRecipe project and, again, refresh if you need to. There we go. We've got the image appearance, it's flow it's [inaudible] at the minute, but we'll fix that in the CSS. We've got our in ordere list with navigation links below and that turn into links as we hover over them. So that's it for this video. We've finished all the HTML now for the website. It's just a little bit of styling left to do in the next video, just to finish off the footer area. So we'll see you in the next video. 10. Styling the footer: Congratulations on getting to the final video for this my recipe project. We've finished all the HTML now that we need for the website. In the last video, we created the HTML for the footer area. Now all that's left to do is at the styling in the CSS. So what we need to do is we need to change the background color of the footer to make it stand out a little bit from the rest of the website, we're going to add some alignment to both the navigation at the bottom and also the image. We're going to make these appear in the center of the website and then add some borders in between each one of these list items to separate them off nicely. So let's get started in the style.css. Underneath the last section we created, want to create a new comment and I want to call this the footer. If you remember in the last video, we surrounded the navigation with the HTML5 nav tags. So let's select them now. I'm going to start it by setting the font size of the text to be 16 pixels. Then to pull the navigation into the center of the page, I'm going to set the text-align to be the center. Let's take a look at that. Great. Now the text is in the middle of the web page, so now I'm trying to add the border in between each of the items. I'm going to select the footer, Li. So this will target all the list items within the footer. So won't affect the ones in the header, for example. I'm going to set the border on the right just as we've done with the head navigation, to be one pixel, a solid line and the color of 373535. Let's take a look at that now. There we go. We got the border is now appearing on the right of each of the navigation links. But one problem we've got, we've got the border on the far right, which we don't want to have. It's like we're done with the header and navigation, we're going to remove the border of the last child. Hopefully you can remember how to do this. So select the footer again, and then the list items and target the last child, which is the last link in the navigation. Then we can remove the border on the right by selecting the value to none, I hope that should work okay now. Great. Now we want to pull the image into the middle of the page 2. To do that, I'm going to select the footer image. I'm going to start with the footer image by changing the display to be a block level elements, and I'll span the full width of the page and it'll be on its own line. Then I'm going to set the margin. I'm going to do this in the same way as we did up the top to the body section. We're going to set zero margin on the top and bottom, and set the left and right margin to be automatic. So we'll take up the same on the left and right, essentially causing the element to center. So zero and then also, let's take a look at that. Good. The image is now in the center. All that's left to do is work with the footer sections, change the background color and apply a little bit of height and pattern. I'm going to target the footer tags and just keep it in order, I'm going to put it just below the nav. So I'll select the footer section and start. Let's change the background color. It's going to be just a subtle difference just to make it slightly darker [inaudible]. So the value I want to use is e5e0e0, then let's give the footer a little bit height. I want to set mine to be 140 pixels. Let's take a look at that. Let's give the footer a little bit more height, and you can also see there's a subtle difference in the color between the body section on the footer. Just to finish this off, we've got the image pushed up too high against the top of the footer. So just as a final finishing touch, I want to add on padding onto the top and I'm going to set this to be 20 pixels. Let's take a look at that. So let's push the footer down away from the very top there. There we go. That's the website all finished now, congratulations on getting to the end. I really hope you've learned a lot from this project. If you're eager to carry on with this website, I would recommend setting a little mini challenge, that is just to create a few more pages, such as the About us page or the Contact us page. So if you create them and put them in the same directory as the index page and then in the index page fill in the link in HREF, and then when you click on the "About us" text, that should link to the web page that you've created. So I hope you've enjoyed the project, and thanks again. 11. Setting up our responsive project: Welcome back. Congratulations on finishing the first project and getting into the start of the second project. I hope you've learned something build in the recipe website, and I hope you're now are ready to move on and take on something a little bit more challenging. Let's take a little look at what we're going to be building in this section. It's going to be a college-based website called MyCollege. It's going to be a fully responsive website, which is going to be different from the first website. I'll just show you exactly why. If we shrink down the browser to a smaller size to replicate what it would look like on a tablet or smartphone, you can see very soon that the layout will start to change. Instead of having, for example, two div side-by-side there, they will be stuck to appear on top of each other. Also, the navigation at the bottom and at the very top, changes to be the full width of the screen. That would look more suited to smartphones. The logo and all the text appears in the center of the screen, it's all a line down the middle. Each one of the divs is all stacked on top of each other, to make better use of the space on smartphones. As we stretch the browser out, you'll start to notice some changes. When we get to the first media query, which makes sure that the layout changes at a certain size. You'll see there's a media query there that we just passed. That changes the layout to be from stacked on top of each other, to be two to side-by-side. Navigation also changes to be at the top of the page. Then a further media query, it's about 900 pixels takes place. Again, the menu changes to be in the top right, and the MyCollege logo moves into the top corner, to make better use of the available space. We achieve all these responsive layout by using fluid sizes. Whereas in the first project we use pixels for all the sizes. We're not going to be using relative units such as percentages. We're going to be introducing media queries into your CSS, to allow only certain styles to take place when the screen size is above or below a certain size. That's also what's known as a break point. I just want to show you the first project and show you what happens if we shrink the browser down. It's a full-sized desktop view now. But if we de-shrink the browser, you'll see that rather than respond to smaller advice, the content just gets cut off as we shrink the browser further down. If you actually viewing this on a smartphone or small tablet, what the browser would do would be to zoom out and try and fit all of the website onto the screen and that will make all of the text on the website look really small and unreadable. This is one of the great benefits of using a responsive design. I'm going to be showing you how to do this completely from the scratch. Let's get started in the project folder. Let's open up that and create a new folder. I'm going to call this project MyCollege. Then open up the, MyCollege folder. We've gotten off in enough now, so let's get started by adding the images folder. The images folder you should have downloaded in the last video. If not, go back and do that now, and then paste that folder inside the MyCollege folder. Just like we did in the first project, we're going to include a JavaScript folder because we want to include the HTML5 shiv again. Rather than download that again, I'm just going to copy the JavaScript folder from the MyRecipe website. Copy that. Then paste in the MyCollege folder. I've to take a look, you should see that the shiv is inside that, as well as the HTML5 shiv. In this project we're also going to be downloading a new JavaScript file called The Picture Fill. The reason we're doing that is because we are going to be including responsive images. What we're going to be doing in this project is we're going to have the main background image, but we're going to be including now in three different sizes. In your images folder, you've got the main background image saved in three different sizes, 600, 900, and 1,100 pixels wide. This is because we are going to be set in different size images for smaller or larger devices. The reason we're doing that is because we're going to be using the same website, we'll be viewing on a smartphone, a tablet, or a laptop. We want to make sure that the image size is suitable for the device we viewing it on. We have a more appropriate sized image, the image quality will be better, and we can also improve on the download times. Rather than having a large image which would use on a desktop, we can send a smaller image to a smartphone and that should help it download faster. But one of the drawbacks of doing this, is some of the older browsers don't have support for the pitch elements or the srcset attribute which we're going to be using, and I should give you an example now. If you go over to caniuse.com, to get the responsive images, we are going to be using the pitch elements. You can see that the pitch elements in Internet Explorer and Safari, and also some of the older versions of Chrome is not supported. We need to take care of that. Also, if we check for the srcset, which we are going to be using to select different images. Again, some of the older versions of Chrome and Internet Explorer don't support the srcset attribute. To compensate for the old browsers which don't support these, we are going to be downloading a JavaScript file called the pitcher fill. We head over to Google, and then search for the picture fill. I'm going to go on the scottjehl GitHub page. I'll select the second link. The picture fill is basically an image poly fill. It compensates for the browsers which don't support the pitcher srcset and sizes attributes. On the way to get started, is if we go to the download picture fill section. I'm going to download the latest version, which is version 3.0. Select the minified version. I'll click on the link. Then I want to select all and copy. Then to include this into our project, I'm just going to open up the Brackets, or your text editor. Then I open up the MyCollege project, inside brackets. Let's get rid of that for now. Then we're going to create a new page. Then paste in the picture fill. Then once you've got that on your new page, we're going to save this inside the MyCollege folder, and then inside the JavaScript. Then save this as picturefill.min.js for JavaScript, and then hit "Save". Now we've got this included into our project. We're going to create a new page and this is going to be for the index. We'll save our new page as index.html. Save this with the images on the JavaScript folder and hit ''Save''. Then the last page I'm going to create is for the style sheet. Again, create a new page using Command or Control N, and then save this as style.css again in the same directory as the index page, then hit ''Save''. So our project pretty much setup now. I'm going to go over to the index.html page and create the basic HTML structure and link in the head section all the JavaScript files that we created and also the CSS. Just like before, we're going to include the DOCTYPE at the very top. The DOCTYPE of HTML, and then the HTML tags and also the language attributes. I'm going to set mine to en. Then hopefully you can remember how to do all this. This is going to be the head section next. Then under the head section we've got the body. Great. The first thing I'm going to add in the head section is going to be the page title. Open up the title tags and set the title to MyCollege. Then next I'm going to add the character set. We'll do that in the meta tags. The meta characters up, I'm going to set that equal to utf-8. Next, I'm going to add one new meta tag. This meta tag is going to be the viewport meta tag. Let's give this a name of viewport. The viewport meta tag is essential for any responsive project. I mentioned early on in the video that if we look at a website on a smartphone, sometimes the browser can zoom out to try and fit the full webpage onto the screen. This can make our webpage looks small and unreadable. So because we don't want the browser to be zooming out, because our project is responsive. We want to tell the browser. To set the width to be equal to the device's width. We do that with the content attribute and the content is going to be equal to the width, equal device, hyphen width, and then separate it by a comma. We're going to set the initial scale to be equal to 1. The initial scale is basically the zoom level, when the web page is first loaded. We normally want this to be set to 1, so no zoom in applies. The next in head section we are going to include the link to the style sheets. The link relationship is set to style sheets. Just as the first project, we're going to set the type to be equal to text/css, and then to link in we add the href attributes, and because we've got it in the same directory as our index page, we can just add the style.css as the file path, and then let's link in the JavaScript. We'll start with the HTML5 shiv. These go between the script tags again. Then in the opening tag, we're going to set the source. We've got it in the JavaScript folder or the JS folder. Then we need to select the html5shiv.js. Then to keep it neat, we want to add a comment just to both, and I'm going to call this the HTML5 Shiv. Then the last thing we need to do in the head section, is add one more script tag to link in the picture fill file. I'm going to open up the comments again. Then I'm just going to type in the Picturefill, and then open up the script tags. Again in the opening tag, want to set the src, the JavaScript folder, and then we need to include the picturefill.min.js. With the picture fill, I'm just going to add one extra keyword just after the src. This is going to be async, just before the end of the closing tag. If we set this JavaScript to be asynchronous, this means that the web browser can download the JavaScript file at the same time as the rest of the website content and it won't block any downloads. Make sure you include that at the end. There we go. That's our project all setup now, we've linked in all the JavaScript and styles that we need for now. I'll see you in the next video. We will add the header section and we'll apply some responsive images. 12. HTML Header- Adding the menu and responsive images: Welcome back. Now, we've got all of the project all set up. We can start by actually adding some content now to the website. The content we're going to get started with is the header section. The header section is everything from the top of the web page, all the way down to the bottom of the image, which includes the navigation, the logo, and the apply online section, as well as the background image, which is going to be responsive. I'm also going to apply a technique to serve up a different size background image for different size devices, so let's get started. If you head out to your text editor, and then in the index page, we're going to start working in the body section, so create a little bit of space there. Then I'm going to get started with the HTML5 header tags. All the content for this video is going to be in between these two tags, so the first thing we're going to get working on is the image or the background image in the header. The image is going to be contained in the picture tags, so typing the Picture, opening and closing tag. The first image, we're going to add a source, so I'm just going to type the cell first, and then I'll explain what's going on. Then, add in the media attributes, and set that equal to a minimum width and a colon of 1,100 pixels. Then on the next line, I'm going to add the source set. This is the file path for the images. We've got a Images folder. The first image, I'm going to add is the university-1100.jpeg, and then close up. I'm just going to close the sidebar to get more spacer. You may be able to work out what's going on here. We're setting the image source to apply when the browser hits a minimum width of 1,100 pixels. Then once the browser gets to 1,100 pixels, we're then setting the image file path using the source set attribute. That's our large image now added to the project. Then below this, we're going to add one more source tag. This is going to be for the image which is 900 pixels, so the media, we're going to set the media to be a minimum width. This time, 900 pixels, and then let's set the image to display using source set. So the Images folder, but this time, the image is university-900.jpeg, and then close off the source tag. This one will work in a similar way, once the browser hits a minimum width of 900 pixels, the 900 pixels image will be displayed. Once it gets a little bit bigger, at 1,100 pixels, we'll then get the large image. If we want to set defaults or a backup image, or just a general image to use on smaller sizes, we add this by using the standard image tags. So on image source, we're going to set the 600 pixels wide image, so the Images folder, and then the university-600.jpeg, and then close up. Then we're going to add some Alt text into that, in case the image convoluted. I'm just going to add the text of university image. Now, save that, and check that out in the browser. Great. Now, we've got a background image displaying. Once we shrink the browser down, you should see that we get different size images appearing. It looks like it's working, but just to get some visual proof that everything is working correctly, I've got a second set of images saved in my project with a t at the end of each of the descriptions. Each one has some text wrote over them, which says the size of the image that we're viewing. If we shrink the browser down to its smallest, we should see that the image, which is 600 pixels wide, appears to work in by default. Once we scale the browse up to be 900 pixels, there we go, we get the image with the 900 pixels wide size. Then even further, over to 1,100 pixels. Great. Now we've got the large image displayed. All the piece will work in nicely. Great. Let's move on to the rest of the header section. We need to add the logo at the top of the page, the navigation, and also the apply online section. Let's start with the logo. We're going to place a logo just below the closing picture element, but still within the header section. Create a new div. We're going to give this div an ID of logo. We can target that with the CSS, and then close up. The logo is just going to be text. We can open up the p tags and then type the name of MyCollege. Let's check that out in the browser. There you go. It's appearing at the bottom of the page for now, but that's not a problem. We can fix that with the CSS later. Then further down, we're going to add the rest of the text. Now taking online applications, and then the Apply Here section. Just below the MyCollege logo, open up the p tags, and the text is Now taking online applications, and then one more set below. The text is going to be Apply here, but first, we're going to put the a tags in because we want this to be a link. Apply here is the text, so this is going to be a link, but we don't have any pages to link to yet, so I'm just going to create a empty href, just in there for now. So we can apply style into this in the CSS. I want to add a unique ID to the text of apply-btn, because this'll be the apply button. Let's save and take look in the browser. Don't forget to refresh if you need to. Good, so we got the logo, we've got the text, and then we've got the Apply here section, which is also a link. Then next, I'm going to add the navigation, which is at the top at the minutes, but when the browser gets down to a smartphone size, it sits nicely underneath the header image, so let's add that now. Again, still within in the header, open up the nav tags. Just to keep our code semantic and readable, and then we'll place a navigation in a unordered list. If we look at the finished project, this is for different list items we need to do, the student and teacher login, the register and contact us buttons, so let's put four different list items in there. Then we got the links, open up the a tags with the empty href again. The first link had the text of student login. Then we need three more links, so you can have type these out or duplicate the first-line, so the list item, the anchor tags, and then the teacher login text. The third link was register. The last one was for the Contact us button, so the last list item and then the link. Then the text of Contact us. There we go. Then save that and check it's all working in the browser. There we go. There's our four links. There's all the HTML we need in place for the header section. We've now also got responsive images into the project. Thanks for watching, and we'll see in the next video. 13. Adding the final HTML: Welcome back. In the last video, we finished the HTML for the header section. If we take a look at the finished website, we'll get an idea of what we're going to be doing in this video. We're going to move down from the Header section. We're going to continue by adding HTML for the rest of the website, all the way down to the Footer area. So we're going to get started by organizing our divs on rows. To begin, we're going to add our first row, which we're going to have the free buttons on the left-hand side. These are going to be in one div. Then we'll have a second div in row with some text on a link. Then moving down, we'll have the second row. This, you're going to have some text and some student testimonials. Again, this is going to be split up into two divs. One for the left-hand side, and one for the right side. Moving down to row 3, we'll have a similar div with texts on the link to row 1, and on the right-hand side we'll have a image. Also this text on the left and also the text on the row 1, we'll position the text to be vertically and horizontally aligned by using the Flexbox later on in the videos. Then moving down, we'll have the Footer area, which has the links at the bottom, and also the Copyright section at the bottom. You see when we shrink the browser down, particularly the divs which are side-by-side, will become stacked on top of each other. Just like that. I will also have some layout, position, and changes. Let's get started. If we go over to brackets, make sure we have the MyCollege project open, and in the Index page, if will locate the closing head tag. Let's get to work underneath there. Because this is the main section, I want to add some semantic HTML tags. I'm going to create the main section with the opening and closing tags. Then within the main section, we're going to create the first row. I'm going to create a div, and the class is going to be row1-1. So the first row and then it's the first div or the left section. Then just below that, I'm going to create the second section. This is another div with the class, but this time it's row1-2 because it's the section on the right with the text in there. Great. So the first row that we're going to get started in. We're going to create the free buttons on the left-hand side, and this is also going to be links. So let's start with the Take a Tour button. So I'm going to start this with a div and the class is going to be all buttons, so we can work with them in the CSS. Within this div, we'll turn them into links. So the a tag, with the empty href, as we got no pages to link to yet. There we go. I'm going to create a image and also the taker to a text. These are going to be both between a tags because we want the image on the text to be a link. Let's first add the image with the image source tags. Image I'm going to add is in the Images folder, and the first one is called magnifying.png, and the text we want is take a tour. Let's save that, and check this is working in the browser. There we go. So we've got the magnifying glass image and you can just about see the text underneath, and you can see with the cursor change into a hand that that's all working as a link. So we can move on now to the next button. So just blow it up. Create the second div. This is going to have the same styling, so we can give the same class all buttons. Again it's going to be link. So at the a tags with the empty link there, within a tags at the image, and this time the image source in the Images folder is going to be the arrow.png. So select that. The text this time was success stories. Let's take a look. So that's our second one. Just like the first project, don't worry how this is looking just for now. We're only putting the HTML of the content in place, we'll change all the layout on the styling with the CSS later. Then the third one. Feel free to copy and paste this or type all out again. I'm going to type out. So div with the class, again, all buttons, then the link with the a tags, the href, which is going to be empty, then the image source, and the third image is again in the Images folder, and this is the calendar.png, with the text of important dates. Check that out. Great. Let's now move on to the second div in the first row, just with the text and the hyperlink. So if we look just below, and if we go for the row1-2, we can add the text which is going to be in p tags. So the text was browse our most popular courses here. The last word was a link, and it's also got some custom styling. We can target these in the CSS. I'm going to surround the word here with span tags. The span tags work in a similar way to the div. This is just going to target a certain part of the text or any of the elements which is in-line. So we can use the span tags in a CSS in the next videos, and that will apply style just to the word here. Also around the here text, we're going to make this a link. So at the href, and then inside the a tags, type in the word here. Now, let's save that, and we'll take a look in the browser. We scroll to the very bottom, we can see the text is there. Also, the word here is a link. So now we've finished the first row. We've got all the content in place to that. We're going to move down on to the second row. So we're going to have a couple of rows of text and then two divs with the Tom section and Sarah section. Just below the closing div there, but still within the main tags, create a new div. This time the class is going to be row 2. So we'll start with the text. The two rows a text which you're going to have the p tag surrounding them. So the first one is want to know more about life on my college. Then just below that, on a separate line, we're going to add, see what our former students have to say. When you've typed that out, save it and check it's working okay. If that's all appearing fine, we can move now down onto the two divs which go just below the P tags. But make sure it's still within the div with the class of row2. Let's create a new div with the class of Tom and this will be the section on the left-hand side, and then we'll also create the div for Sarah. The div with a class of Sarah and this is the section on the right-hand side. These are going to be pretty simple sections. Each one is going to have a image and then a little bit text just below. We'll start with Tom. We'll add the image for Tom. Image source is in images folder and then there should be an image called man.png and open up the P tag's below and then we type in Tom story, and then lastly, in the Sarah section we'll add an image source in the Images folder and this image is woman.png, and exactly the same as above we'll add the text of Sarah's story. Take a look at that. Good. That's the HTML for the second row and then now we'll move down to the third row. Again, split into two sections with the text on the left-hand side and the image on the right. Just below the closing div for row2, we'll do the same as above. We'll create a new div with the class this time of row3, and because row3 is split into two sections, we'll create two new divs. I'm going to call the left one row3-1, and the second div for the right-hand side which will contain the image I want to give the class of row3-2. The left-hand div is just simply text just as is both. I'm just going to actually copy these P tags because we're going to have the same link on the span tags. Just make sure that the link is exactly the same as this section. Paste that in into row3-1. Then we just need to change the text, and the text is "Discover our state of the art facilities," and we've already got the word here surrounded in the link. Let's save and take a look. Good. That's at the bottom of the page. The link looks to be working fine. Next, we just need to add the image, the image on the right-hand side. We go to row3-2 and then we need to add a image, and the source is going to be images, and the image we want is the volleyball image, so @valleyball.jpg. check that's working. That's all the content for all the rows. The only thing left to do is to add the HTML for the photo section. Let's go back over to the index page and do that now. Just close up the tags and we'll add the HTML5 footer tags just below the close and main tag. Open up the footer, and if you're confident to do this yourself without following along, I would really recommend that you give it a try. If you're not quite confident enough to do that yet, just follow along, that's fine. The footer navigation is going to be in the navigation tags just to keep the semantic, and then we're going to create the navigation with a unordered list. Now the unordered list is going to have free list items, the course finder, why us, and how to apply. We need to create free new list items with the LI tags, and as you usually find is you don't have the link tags in between. Create the href. Let's turn this text into a link. The first link was the course finder. I'm just going to duplicate the line twice. Let's create two new list items and the second link was the why us link, and then the third link was how to apply. We need to learn now what should be the navigation appearing on the bottom of the page with the free links appearing there. The only thing left to do on the index page is create the my college copyright section at the bottom. Because this is going to be a separate section and it's not part of the navigation, we'll add this just below the close and nav tag. Because it's plain text, we can just put them in P tags. To get the copyright symbol, which you can see at the bottom of the page there, we add this in what's called a HTML entity. Because there's no copyright key on the keyboard, and to make sure that the browsers don't interpret the symbols put him as an HTML, we need to use a HTML entity. I'm just going to go over to Google and do a quick search and show you some of the examples. The first website is a W3Schools reference. There's a good example on that that shows you if you use the less than or the greater than signs in a text, the browser might think that they are the HTML tags that we've been using so far. We need to put a special coding. There's a list of useful entities that you can use. Rather than using the less than symbol, we can use the entity name in its place and there will be no mistake. If you go to the bottom of the table, you can see there is the copyright section. We use the &copy;. We'll just put that into there just like that, and then we can put our of MyCollege text just after it, followed by the year. Save that and let's take a look. That's working well. We've got the photo section at the bottom with the navigation on the copyright section. We've got the HTML entity, which is the copyright symbol on the left. Thanks for listening. That's the end of the HTML now for the website, and if you join me in the next video we'll continue on by adding these styles for the mobile view. 14. Mobile first styling- Header section: Welcome back. In the last video, we created all the HTML for the web page. In this video, we're going to start with the CSS for the project. We're going to shrink the browser down to the mobile view. I'm going to start to work on the mobile-first styling. If you take a look at the finished project, as it currently stands, the website is divided up into two sections for some of the rows. But we're going to shrink the browser down when there's less available space. We're going to make maximum use of the available space by making most of the sections stack on top of each other and allow everything to be the full width of the screen. One more thing I want to do before we get started is to head over to Google and download a CSS file called the normalize.css. So let's just search for normalize.css. If we go to the homepage of Nicolas Gallagher and then select that. The reason we're including the normalized file in our project is because it makes all the elements on the web page random or consistently across different browsers. So get started by hitting the Download button, and then we could just simply select all, command or Control A, and then copy. Then back over to brackets or your text editor, create a new page, and then paste that in, and then save the new page as normalize.css. Now because we've got two CSS files, I want to actually create a CSS folder, just to keep the code more organized. So I go into the MyCollege project and I'm going to create a new folder called css. So I'm going to put the style.css and also the normalized.css inside this folder, then close up. Now because we've changed the file path, we need to go back into the top of the index page, into the head section and then the link or the href is now css/style.css. Then we're going to add the link to the normalized file that we just created. So the link. Then the relationship is stylesheet, the type, text/css and then the href, the link. So the CSS folder, and then normalize.css. I'm going to create some comments. The first one is going to be the normalize CSS and then the next one is our custom CSS, and notice the order that the stylesheets are being placed in. When stylesheets are getting loaded by the browser, they are loaded from top to bottom. So we usually want your custom stylesheet to be at the very bottom because this is going to be the stylesheet which you want to override anything else. So save that and then we're going to go over to the CSS and our custom stylesheet, so style.css. I'm going to get started with a CSS comments, unless you're going to be the Mobile-First section. So we're going to get started with the HTML, unless you're going to target the background color. So we take a look at the finished website. You can see that the background is going to be a light gray color. So let's set that to have a background and the color is going to be eee, which is the light gray, and then the body section, which is everything. We didn't need two margins. So there all the way to that. So just like we did in the first project, we're going to set the margin, the top and bottom to be zero, and then the left and right to be auto. So it's centered, and we set the width to be 100 percent and the background to be white. So as you go for the CSS for this project, you'll notice that we're using some different values over the pixels, we'll be using a lot of percentages and ems. These are what's called a relative size. A pixel is a fixed size, which means it can't stretch or again is smaller. Whereas if we use a relative size such as a percentage, because this is a responsive project, the sizes can be fluid and it can scale up and down as there is more or less available space. So that's why we use percentages on responsive websites. The next we're going to add some styles for the images on the project. So we're going to make sure that the width of the images is going to be 100 percent of the container, and I'm also going to set the display type to be blocked for the images. The reason we do that is because by default, images are in line and this creates a five pixel padding on the bottom. I'm going to change at the block just to remove the padding. So let's get the browser up. So I'm just going to move the sidebar and then shrink the browser down a little bit. We can see on the mobile view. We're going to start from the very top and work our way down to the menu in this video. I'm going to start by adding some default styles to our text. I'm going to target the P tags. I'm going to set the P tags color for the project. This is going to have the value of 4a525f, and let's pull up our project. Then I want to remove any default margin from the text, so set that to zero. This removes any default margin that the browser will put in. So now we're going to move down onto the logo. So the MyCollege text that we see there is the logo. We want to push this up to the top of the web page, and want it to be positioned over the background image. Let's do that now. So the logo had the ID of logo. Because it's text, we're going to use the P tags. I'm going to set the display to be a block-level element, and then set the position to be absolute. So we can move it to the top over the image, and then let's set the top volume to be one percent. You can't see it now because it's a dark color, but it's one percent from the top of the page. So to make sure we can see a little bit better, we'll change the color to be white and you see that a little bit better now. We'll make it even more visible by changing the font size. I'm going to be set at 2.2 ems. An em is a relative unit. So this will set the font size to 2.2 times the size the form would normally be. So it's effectively 220 percent. The font style, I'm going to set this to be Italic, and the font weight, we're going to set this to be bold, and then push the logo into the middle. We'll set the width to be 100 percent, and then we'll set the text line to be center. Great. Now, the logo is where we wanted to be. Now I'm going to move down to the menu, and the menu is going to be a full-width menu on the smaller view. So each one of these buttons are going to span the full width of the device. So I'm going to create a CSS comments. Just a section is part of, and I'm going to call this the top menu. So let's start with the unordered list. I'm going to start with this by adding the width to be 100 percent. I'll stretch the unordered list to be default width of the device, and I want to remove any default padding. So you can see as soon as we set this to zero, that the list pulls over to the left-hand side. Then we want to add a list style of none, and the reason I'm adding this in is make sure that the bullet points are moved in the Firefox browser. Otherwise, we don't put this in, they will still appear. I'm going to put an exclamation mark and set this to be important, so this won't be overridden by any of the styles, and then move down to the list items. The list items is the individual links that we're targeting. I want the links to be in the center. So set the text line to be center. To make the buttons a little bit bigger, I'm going to add some padding all around each of the buttons of five pixels and I spaces them out. Then I want to set the background, and this is going to be the color of 4a525f, and then the font-style to be Italic, and then lastly, I'm going to add a border onto the bottom of each one of these items. Just to add a divider, I want to set this to two pixels, a solid line and the color of white. Now, by default, all these list items have a underlying. I want remove those, and we're also going to change the text color to be white so they stand out a bit more on the dark background. So just below the list items, I want to target both the list items and the li a. This will apply to the whole page. So any list items or any list items which are hyperlinks. We can target them both in one go. First of all, to remove the underlying, we can do that by setting a tax decoration to be none, and then select the color of the text to be white. They are both just starting to look a little bit better. Next, I want to make sure that when you hover over the links or hover over the buttons at the background, color changes. Next we're going to target the li on the hover state, and also the li a in the hover state too. I'm going to set the background to be a different color, and the color I want to change it to is 393535. Let's give it a go. In case now we'll move the mouse over the buttons, we'll get the darker hover color. That's the end of the menu section, so I'm going to close off with a comment. Just all top menu end. So now we've finished the top menu. We'll finish this video there, and in the next video, we'll continue with the mobile-first styling for the header section, and we'll get to work on styling the now take in online applications texts, and also the apply hover. 15. Mobile first styling- Header section continued: Welcome back, so in this video we're going to continue with the CSS on the mobile view for the header section. Basically we're going to be working with positioning, we're going to make sure that the now taking online applications and the apply here button is positioned not sitting below the image but actually over the image. We're going to do that with absolute relative positioning. I'm going to also apply a little bit style into the text and the button. Let's get started over in the style.css file. We've got the top menu end section, so we'll just start working just under there. I'm going to start it by tagging the whole of the header section, and I'm just going to use this to set the position to be relative. By using relative positioning, if you remember from the first project, this will make a relative container for us to position our text and button from the outside edges. To make this work, well I'm going to set the text within the header and within the p tags, this time to be absolute and that effectively takes the text out of the flow of the web page. We're going to reference the text 60 percent from the bottom of the header container. You can see already just about that the text on the button has been pushed up into the middle of the image. Now, we just need to position this in the center. I'm going to start it by setting the text to be 100 percent of the available width, and this will allow us to use the text align center property. Then to make it stand out a little bit more, I'm going to set the color of the text to be white, and make it a little bit bigger by using the font size property. I want my text to be 1.6 ems, and that looks a little better now. Currently we've got the apply now button sitting on top of the text and that's something we don't want. If you remember, over in the index page for the HTML, let's make that a little bit bigger. When we go to the apply now button, we give the an id of apply-btn. I'm going to use this id back over in the CSS, and we use that to target the button and to move it a little bit further down from the text. The hashtag this time because it's an id, and then the id of apply button, I just hide that sidebar. The text is set 60 percent from the bottom of the container, so I'm going to set the apply button to be 50 percent from the bottom of the container, and that will make it sit just below the now taking online applications text. Because it's a link, we'll also target the A tag. We'll also the apply-btn id, and then the A tags. To make it a little bit bigger, I want to add some padding. Just of two pixels to make it slightly bigger. Then to get rid of the underline, I want to set the text decoration, set that to none. That should get rid of the underline underneath the text and then let's make it stand out a bit more with a background color. The color I'm going to use is the value of 8393ca, so that's the actual background color. Then to make the text color different color, we'll set the color property, and to match the rest of the text I want this to be white. Then let's make the button look a little bit nicer, we add a little bit of border radius. I'm just going to make mine five pixels just to give it some small rounded corners, and then continue in down with the button. Next I'm going to target the button on the hover state. We change the color once the cursor hovers over it. Again the id of apply-btn, so the A cause it's a link and the hover state. I'm simply going to change the background color on hover, and you can change it to any color you like but I want mine to be 3e486a, and that's going to be the dark blue color and you can just see there. Great, so that's all of the styling finish now for the header section in the mobile view. Join me in the next video, and we'll continue down and we'll start applying some styling for the first row. 16. Final CSS for mobile view: The project is really moving along now. We've now finished the mobile first styling for the header section, and also the top menu. Next I'm going to move down to the images. These are going to be in-line in their own row, just underneath menu. It'll be like the finished project here. So they'll all be in their own row, which is the full width of the mobile device, with the textures below. These are the two areas which when the browser expands, they are going to be side-by-side. So let's get started in the CSS. But first just one thing I want to correct for the row 1-1, when creating the buttons, there's a misplaced div there. If you followed along exactly like I did, just remove that and then place it just after the third button. I'll make sure there's no problems as we move forward. So back over into the CSS. I'm going to start it just after applying our buttons The class we're going to start with is row 1-1. We're going to start it by setting the width of the container to be 100 percent. I will change that to be 50 percent later on in the course when we get more available screen space. Because it's going to be on the left-hand side, when we set the float to the left, just to give the images some space at the very bottom. We want to set the margin-bottom just to be 2 percent. So that gives it some spatial in the div below. Then next we're going to target the free individual images, which will give a class of buttons. By default, all these images have a width of 100 percent, which we set at the very top. To make sure that all the images appear in line, we're going to override the default width to 30 percent and make these appear in line, we're going to set the float to be left, and then you can see that they all appear now in line, but they're all touching each other on the side. To fix up, we can add a little bit padding onto the left. I'm going to set mine to 2.5 percent, and then set the text-align to be in the center. So the text lines up with the image. Next I want to remove the underline from the links. We'll use the buttons class and then select the a tags for the links. Let's remove the line by setting the text-decoration to be known. So you can see the underlines have all been removed now. That's pretty much all we need to do for the first row. Now we can move on to the second part, which is row 1-2, and this is for the text area. The class for that was row 1-2. Just like the first row on the mobile view, we want the width to be 100 percent. Take up all the available space. Then so this section clearly stands out. I'd like the background color to be different. Different from the white. I'm going to give the background a value of E0E0EB, which is a light gray color. Then the font size needs to be a little bit bigger. I'd like mine to be 1.6 em's. Let's centralize the text by setting the text-align property to be center and then to give it some spacing above and also from the text below. I'm going to set some padding. By using the padding property, we can either set four values, which is the top, the right, the bottom, and then the left. Or as a shortcut, we can set the first property and the second property. So the first property that we set of 4 percent, then applies to the top and bottom. Then the second property, which I'll set to zero, is the left and right. We've got a little problem at the minute that the background that we've set is not only just applying to the text area of row 1-2, but it's applying to the full section, including the row 1-1. So the way I'm going to fix that is by setting the display type to be inline-block. What that does is it allows elements to behave like the inline, but still retain its own width and height. It's a great alternative to using floats that we used in the first video. It's really useful for creating rows or boxes or sections without using the float property. So that's the first row now complete. Next we're going to move down to the second row, which is the images of Tom and Sarah and also the text. So let's set the class of row 2. I'm going to change the background color to be the purple color that we've seen on the finished project. So that is the value of a, 864a8. Now we can clearly see the difference between the sections. Then next, we're going to set the display type again to be inline block. The width is going to be 100 percent, that bounds the full width of the device. Then next the text-align is going to be in the center. Currently we've got the images default into 100 percent wide. So let's change that now. Let's use the row 2 class and then target the images. Let's reduce the width down to 40 percent. Then set the display type to be inline-block. Great, that's where the images should be now. Now we can move on to the text for the row. We'll select the row 2 div and then the paragraph tags. First of all, let's increase the font size to be 1.4 em's to make it a little bit more readable. Then because it's squashed to the top of the div there, we can add some padding on to the top. I want to set my padding to be 3 percent. That will apply to actually all of the rows, so it'll be a bit of space in above all the texts there. Let's also do the same onto the bottom. In fact, we can use the shorthand for that, so we'll set the padding to be 3 percent on the top and bottom, and then zero on the left and right. Then finally we'll set the color. I want to set mine to white. So that's the row 2 section all finished. Then now we're going to move onto row 3, which is the text at the top of Discover our state of the art facilities, and then the image. There's not a lot to do in this section. Let's get started on row 3-1. So just like the rest of the rows, I want to set the display type of the row to be inline block type, and also the width to be 100 percent, for the mobile view. We'll match the gray background color of the text from the first row. So the background color for the first row had the value of E0E0EB, which is the light gray color. Then the font size, again, which we'll match from the first row. That's going to be 1.6 em's. Then the text-align of center. Then finally some padding, of 4 percent on the top and bottom, and zero on the left and right. Which got a little issue with the background there. So let's keep refreshing, that seems to work okay now. It must have been a problem with the live preview there. We're nearly finished now with the styling for the mobile view. I'm just going to target the span tags next, which is the tags that we use to surround the link of here. Back in the index page. It will just give us a little bit more room there. Remember the here text, had the span tags and also the a tags for the link. Back over into the CSS, which we're going to use the a tags, actually they're two. Then I'm going to use this to set some styling for the link over there. I'm just going to make sure that the text-decoration remains underlined. Then also I'm going to set the color to have the value of ec008c, and that's the pink color. Then the very last thing on the website, for the mobile view, is the copyright section at the bottom. All we need to do is we target the footer area and the text with footer p. Then set the text-align to be in the center. I'm padding on the bottom. It's not stuck right against the bottom of the display. Just of 2 percent. Make sure the backgrounds is the white color. Great. That's all the styles now for the mobile view. The website now looks good on the smallest screens. In the next videos, we'll move on to the 600 pixels and above display. We'll start off in some media queries to make sure that when we stretch the browser and the web site is looked up on larger screens, that the website layout adjusts, responds to a larger device. 17. Introduction to CSS3 Media Queries and styling the tablet view: Welcome back. In the last few videos, we finished off the CSS, the mobile-first view. But you can see, once we stretch the browser, the width of most of the elements have been set to 100 percent wide, and it begins to look really stretched. One thing we're going to do to make the website respond to the different size devices is to set some media queries. Media queries are used to set some rules as to when we apply certain CSS. In our case, we're going to be setting media queries to be triggered once we hit certain minimum width. In the case of this video, we're going to be setting the first media query to apply. Once a browser gets to about 600 pixels wide, which is here, we normally want to set media queries to apply once the content starts to look stretched or once it breaks. One thing you may know is, as I'm stretching the browser, in the bottom right-hand corner there's a little box which shows the width in pixels. That's a Chrome extension called Viewport Dimensions, if you're interested in downloading that. To start, I'm going to set the browser width to be just over 600 pixels, and then go back over to the CSS file. I'm going to create a comment. I'm just going to copy the mobile-first comment from the very top, and then I'm going to paste this below the footer section. I'm going to call this section for devices greater than 600 pixels. Also, one more comment. I'm going to section off the top menu because this is going to be the first section that we're working on. To get started on the top menu, we'll be working with the unordered list because we want move this menu up to be at the top of the image. Let's get started with the header section and the unordered list. Let's set the position of the unordered list to be absolute, and that's our composition, the menu of the background image. I'm going to set the menu to be eight percent from the very top. So I'll change the top value to eight percent. That pulls the menu up to the top of the web page. Then next, I'm going to set the text line to be center, and so we can see the menu over the background. I'm going to set the background to be white. The menu is still stacked on top of each other, and we want the menu to be in line across the top of the page. We can do that by targeting the individual list items in the header, so header li and also header li a. That targets the list items on the links. First of all, we'll set the display type to be inline-block, and that will get the list items across the page. To remove the gray backgrounds, I'm going to set the background color to be transparent. Then next, I'm going to remove the default border on the bottom, which we set in the mobile view by setting the border-bottom to none. Then to make sure the text appears on the white background, we'll set the text color, type the value of 4a525f, which is a gray color, you can see there. Then next, I'm going to add a little bit of padding, just five pixels, just to make the button a little bit bigger. Then next, I'm going to add a border, on the right hand side of each one of the list items. I'm going to do it like in the header, li. I'm going to set the border on the right, and I'm going to give this a value of one pixel, a solid line, and the same color as the text, which is 4a525f. Just to remove that final border, we can do that in the same way as we've done before, by targeting the last child; header, list item, last child, and change the board on the right to be none. Let's take a look. Great. The last border is missing off there, so that looks better. We're nearly finished with the top menu now. The last thing I just want to add is a slightly different topic color. So let's go into the header, list item in the hover state, and I'll also select the same header, li, both for the hyperlinks. Again, select the hover state, and then we're simply going to change the background color. It's going to be slightly lighter color than we used on the mobile view. I'm going to set mine to d8cccc. Let's take a look. Good. That's how I want the top menu to look on the tablet view. We can just put a comments at the end of there, of top menu end. On the tablet view, I just want to push the text and also the Apply Here button a little bit further down so it's more in the center of the image, because we've got a little bit more screen size available. I'm also going to increase the font size. Let's go back into the CSS. We can select the text with header p. Up in the mobile view, in the header p section, we reference the text to be 60 percent from the bottom of the container. So just to pull it down a little bit, I'm going to change the bottom value to be 40 percent. That looks a little bit better. Then I'm going to increase the font size to be 2ems, and then let's also pull the Apply button down. The Apply button had the ID of apply-btn, and I'm going to set the bottom to be 30 percent. Let's take a look. Now we've got the header section all finished for the tablet view. We can move down on to row 1. We can move the browser, our most popular courses section, to be on the right-hand side of the first row. Let's go into the class row1-1. To make it only appear half the width of the page, I'm going to set the width to be 50 percent, rather than 100 percent, which is on the mobile view. Then a little bit of margin on the top of two percent, and that just keeps it nicely way from the image. Now we've set the left-hand side to be 50 percent, we also want to make the text only 50 percent too. Next class is row1-2. We're going to use a different technique to position the text on this part. We're going to use the flexbox, which is a great CSS feature for positioning and laying our websites. We use a flexbox by setting the display time for the container to be flex, and as mentioned before, I'm going to set the width of the containers to be 50 percent. You can already see that we're starting to get what we want. Then a couple more flexbox techniques are going to be, first of all, justify content. I'm going to that to center. Justify content sets the alignment on the main axis. By default, that's left to right. To set the alignment on the cross axis, which is opposite, so in our case it's top to bottom, we can use a property called align items. Again, set that to be in the center. Then lastly, we set the background to have the color of white. The last thing I want to do with the text is just keep it away from the edges, so just to keep it contained. I'm going to select the row1-2, and then the p. I'll select the text, and I'm going to limit the maximum width to be 60 percent of the container. Now we should see that that's nicely centered, even when the browser gets a little bit smaller or bigger. So that's the header and the first row all completed. We'll leave this video there. In the next video we'll continue down into the second row, and we'll finish off all the styling for the tablet view. 18. Tablet styling continued: Welcome back. The styling for the tablet view is really coming along now. We finished off the header section and the first row. Now we're going to move on to the second row. I'm going to make some small adjustments mainly to the font size. We're going to set the images to be 50 percent so they appear in line. I'm going to start it with the class of row2, and then the text. Just to get started, we'll increase the font size to be 2ems. That makes text a little bit bigger for the larger display. Then the container for the Sarah and Tom section, I'm going to set that to be 50 percent. Then also float the containers so they appear side-by-side. First of all, the class of Sarah and the class of Tom. Each is going to have the width of 50 percent. Then the float is going to be to the left. Now we've got the div side-by-side. I'm just thinking of a bit of space on the bottom. I'm just going to add a little bit of padding of two percent onto the bottom. Then moving down onto row3, just like we had in row1, we want to make these two divs to be side-by-side rather than span 100 percent of the width. Row3 had a container with a class of row3. We're going to make use of the flex box again. I'm going to set the display type to be flex. Then if we go back into the HTML within row3, at the very bottom we had two rows, which is row 3.1 and 3-2. We'll begin with row3-1. This is going to take advantage of the flex box pretty much the same as the textiles in the top. We need to set the display type also to be flex, and then set the flex value to be one. You'll see why we're doing that in just a moment. Just like above, we're going to set the justify-content to be center, and then also the flex box property of align-items to be in the center. That will take care of the horizontal and vertical alignment. Then the background color is going to be white. Then just as we did at the top there, we'll limit the size to be 60 percent. I'm just going to copy that section and then paste that in, but change the row to 3-1. Now we need start working on the image, which is row3-2. I mentioned before that we've used the flex value of one. I'm going to use exactly the same in this container. What that does is because we've got both sides set as the flex value of one, they'll both take up equal parts. If we were to set one of the sides to have a flex value of two, switches up. We will get the right-hand side div taken up two parts to one part. If we set that to three, this section would take up three parts to the one part on this section. That would also work vice versa. But just keep them equal. I want to set the values to be one. We need to finish now with the styling for the tablet view. The last part we need to do is down at the footer area, it's just a few small changes I want to make down there. I'm going to make a comment for the footer menu. With the menu on the footer, we still see in the display for the mobile view. We need to override the defaults and make the menu list items appear in-line. We're going to start with the footer tags and the unordered list. Then begin by setting the text-align to be in the center. Then the background color, I'm going to change that color to be blue. That's 8393ca. We go over to the browser. You can see there's default margin on the unordered list, keeping just the space from row3. We're going to move up by setting the margin to be zero, and that will pull the list tight up against row3. Then to get the buttons to appear as we want, we need to select the individual list items, and also the footer list items, which are links. So footer li and li a. Display type to be inline-block. Now we're getting going across the page rather than stucked. The background-color, I'm going to set that to transparent, and then remove the default border-bottom, which are from the mobile view by setting the border-bottom to be none, and then add some padding of five pixels just to make the bottoms a little bit bigger. Then next we need to add a little bit of a divider between each one of the bottoms as we're doing at the top. We can add that in the footer li. Set the border-right of one pixel, a solid line, and the color to be 4a525f. We've got the line appear in there. As we were doing at the top menu, we need to remove the last-child. I'm just going to copy this section and then paste it in below, but this time at the last-child and then set the border-right to be none. Then the hover state, we need to change the color. We do that by the footer li and then the hover. Then also the links, which is the footer li a hover. The background color is going to be 3e486a. Let's check, that's all working. Good. Now we've got the dark blue color when you hover over the menu. Then lastly, we'll target the text at the very bottom, which is the copyright section. We can select that with the footer p, and add some padding onto the top of two percent. The background color, I'm going to set that to be a gray color. I'm going to set that to e0e0eb, and then slightly increase the font size by changing that to 1.2em. Great. Starts all the style and finish for the tablet view. I mentioned early on in the video that we're going to introduce media queries, so we want all these styles that we've created for the tablet view to be in a media query and only apply when the screen width is greater than the 600 pixels. The way to start media query is by using the keyword "@media". I'm going to target the screen. Then I'm going to combine that with a size. Within brackets, we're going to set the minimum width that we want the styles to apply to. In our case, it's 600 pixels. Then all the section afterwards, we need to put that in curly braces. Open up the curly brace, and then surround all the CSS that we've done for the tablet view within this media querying by closing off at the end. Now when we go back over to the browser, if we shrink the browser back down to below 600 pixels, you can see that the CSS reverts back to the mobile view. Then when we go back over to 600 pixels, we get the new layout for the larger display. The website responds to the size of the device. Thanks for watching, and if you join me in the next video, we'll finish off this project by adding the media query and final CSS for displays over 900 pixels. 19. Final CSS for larger devices and desktops: Welcome back to the final video in this section. The website's really taking shape. We've got media query which changes the styling from the mobile view to a tablet size. In this video, we're going to finish off the CSS by adding one more media query and changing some of the styling and layout, just to make the project more suited when displaying on larger devices or desktops. Go to the style.css. I'm going to copy the comments that were done for the 600 pixel section. Copy that, and then right at the very bottom, make sure it's outside of the media query. We can paste that in and change that to 900 pixels. We're going to create a new media query. Just as before, it's the @media keyword and then I want to tag the screen. By the way the screen media type is used for computer screens, tablets, smartphones that kind of thing. There's also some different media types you can use, such as prints, which is used for printers. You can also use the All Type, which is for all media types. But we're just going to stick to screen for this one and combine now with the minimum width of 900 pixels. We've used the minimum width, but you can also use the maximum width to set styles to a maximum size. But because we're designing mobile first, it makes sense to use minimum width. The first thing I want to do in the media query is select the body. I'm just going to set the maximum width of the body to be 1,100 pixels. That's just to make sure that when viewing the website on a really large monitor, all the content doesn't get overstretched so we're just going to keep it between the 1,100 pixels. Then the top menu next. The header, unaltered list. With this, I'm going to move the top menu to be on the top right, and also move the logo to be on the top-left. Now, we've got more available screen space. Because the body is restricted, we're also going to do the same for the header. I'm going to set the maximum width of 1,100 pixels. Then I want to change the background color to be transparent. Then set the text lines be right and that should push it over onto the right hand side of the page, and then to move up to the top, we'll set the top value to be one percent. That moves the menu right up to the top right, and so it doesn't push too close to the edge. We can add a couple of percent onto the right-hand side and that's just move it inwards a little bit. I think that looks a little bit better on the larger display. I will move into logo in just a moment. But first I'm going to make the text a little bit larger. That's the header p. Because we've got more screen size, we can set the font size to be bigger. I'm going to set the font size to be 2.2ems. Then the font width, I'm going to set that to be bold. I will also set this to have a maximum width, just like the body on the menu of 1,100 pixels. It stands out a little bit more now on the larger display. We've got the logo still in the center of the screen so I'm going to move that over onto the left. Use the logo ID and then the logo is your test so use the p tags. It's pulled onto the left, set the text line to the left. It's not too close against the boundaries, I'm going to add a little bit of padding just on the left-hand side of one percent. Now we've got the logo on the menu where we wanted it to be now. Just to finish the website off, now we've got a larger display to work with. I'm just going to go through some of the text and change the font size to make it a little bit bigger. To begin with, row1-1, we're going to make this text a little bit bigger so use a class of row1-1 and I'm going to make the font size just slightly bigger so 1.2ems. That's a little bit more readable, now, we've got more space. We can do the same with the text on here and also row two. First of all, the class of row1-2 and then also row two. In row two, we're going to select the p tags and then the row3-1 is going to be the text down at the bottom there. For these three sections, I'm going to set the font size to be 2.5ems. Now it looks okay there. Lastly, just to finish off the website, I want to select the text at the bottom, in the footer area and just make that a little bit bigger too. That's the footer and then the p tags. The font size we want to use is 1.5ems just to make that a little bit bigger. There we go. That's the website all nicely finished. If we scale down the browser, we should see the breakpoints where the media queries apply. The first one at 900 pixels, where you can mainly see that the text reduces in size, also the navigation at the top changes. Then once we make the browser even smaller, we hit 600 pixels, you should now see a much bigger change to make the website more suited to mobile devices. That's the end of the project. I really hope you've enjoyed it, and I hope you've now got a better understanding of responsive design. If you join me in the next section, we'll take a look at using the Bootstrap framework, which allows to create great looking responsive websites, faster and easier. Thanks for listening and will see you in the next section. 20. 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. 21. 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. 22. 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. 23. 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. 24. 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. 25. 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.