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

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
34 Lessons (4h 41m)
    • 1. Welcome and what we will be building.

      2:51
    • 2. What You Will Need For This Course

      1:05
    • 3. File & Folder Structure

      3:45
    • 4. Basic HTML Structure

      7:48
    • 5. Useful Resources

      8:01
    • 6. HTML5 Header Section

      11:42
    • 7. Links & Additional Pages

      7:14
    • 8. Styling The Header

      18:28
    • 9. Main Content Area

      8:37
    • 10. Styling The Main Content

      17:19
    • 11. Footer HTML Section

      4:24
    • 12. Styling The Footer

      3:09
    • 13. College Project Setup

      6:53
    • 14. The Header & Responsive Images

      8:16
    • 15. Styling The Header

      14:29
    • 16. Popular Courses Section

      6:11
    • 17. Final HTML Content

      5:51
    • 18. Final Small Screen CSS

      6:01
    • 19. CSS Media Queries & Final Styling

      14:15
    • 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
    • 26. OLD-Setting up our responsive project

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

      9:56
    • 28. OLD-Adding the final HTML

      16:46
    • 29. OLD-Mobile first styling- Header section

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

      5:02
    • 31. OLD-Final CSS for mobile view

      10:47
    • 32. OLD-Introduction to CSS3 Media Queries and styling the tablet view

      10:12
    • 33. OLD-Tablet styling continued

      9:52
    • 34. OLD-Final CSS for larger devices and desktops

      7:18
19 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

4,199

Students

20

Projects

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.

Meet Your Teacher

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

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