Full Stack Web Development for Beginners- Part 1: HTML, CSS, Responsive Design

1. Welcome to the course!: Welcome to Full Stack Web Development for beginners. This course, the designs take you from a beginner to a web developer capable of building the only front end user interfaces, but also how to design and build the backend to interact with too. So whom I? My name is Chris and I will be your instructor throughout this course. I'm a web developer and also the producer of lots of tutorials teaching thousands of students the skills they need to build websites and applications. This is the first part in the full series, where we'll start at the beginning teaching you how HTML, CSS, and responsive web design to give you the skills you need to build great looking functional websites, which look great on any side device. This course contains over five hours of high-quality training. We first begin with HTML, covering everything you need to know from setting up and structured on webpages, elements, and attributes, hiding forms and inputs, linking of webpages, images, and so much more. This is all learned in a hands on project-based approach, where you build this website completely from scratch while applying all the techniques which you learn. We then style this using CSS, and we'll cover everything you need to know such as selectors, fonts, margin, padding, the box model, floats positioning along with lots, lots more, includes some handy CSS tips and tricks along the way. We then round this off by making the site fully responsive to make it change layouts and respond to all size devices. You'll learn all about scalable units, fluid layout, media queries, responsive images, all while applying this to a project. I hope you're excited and let's begin learning all the fundamentals of web development in the first part of this course. 2. What will you need for this course (Getting Started): For this course, you will only need a few things to get up and running. First, we need a text editor. You may already have a preference or one you already use. For this course, I'll be using Visual Studio Code, which is ideal for JavaScript coding, and also has a built-in terminal, which we can use later in the course. You can use any you like. But here are some popular text editor options such as Atom, Brackets, WebStorm, and of course, Visual Studio Code. If you already have one of these and a web browser, feel free to move on to the next video. If not, I would recommend you go to code.visualstudio.com, and follow the download instructions for your platform. Finally, you will also need a web browser. I would recommend Chrome by Google, but you can use any which you prefer. During the course, we'll be using the developer tools inside of Chrome, but other browsers do have these built in too. It may just look slightly different to I'm doing. This is now all we need to get go in. Next, we'll take a little look into what HTML actually is. 3. Understanding HTML (Getting Started): Before we jump into adding HTML to our webpages, I just want to make sure we understand exactly what HTML is and what it does. I'm not going to go too deep and technical just yet. But understanding why we use it and why it came about in the first place will really benefit us when we come to code them. First of all, what exactly is HTML? HTML stands for HyperText Markup Language. It may sound a little weird at first, but we'll look into what this all means soon. HTML is a standard markup language for creating websites and applications. HTML is everywhere on the web. Most websites are constructed using this and all browsers know how to read and display it correctly. Like all programming languages and most things in life, things change and evolve. We currently own version five of HTML. Like all new versions, things get added or removed when a new version comes out, which is not that often, is not something to worry about. Everything we already know usually still applies. It's just often a case of improvements and new features as technology moves on. We'll cover a lot of the new HTML5 features during this course. HTML is used to format a web document. A web browser knows how to correctly display it. As we've said before, it's a default markup language of the web, so all web browsers know how to handle and display HTML document correctly. The HTML applies the formatting needed to instruct the browser what to do. HTML was invented by a physicist called Tim Berners-Lee. The development took place around 1989-1990, where memos or proposals of HTML we're introduced. The idea behind HTML was to create a way for researchers to send and receive documents to each other electronically. To understand why HTML was created, first, let's take a look at the problem. This is an image taken from the Wikipedia website. But imagine this was a text documents which needed to be sent to individual departments. When sending this text, there is no way of describing the formatting. The HTML header at the top is larger and also bold. There is a line beneath it and then some standard texts. Also the beginning of the paragraph is bold too and the text also contains a series of links which you want to connect to other documents. This is a problem that researchers were facing. To begin to solve this problem, one of the first steps is the idea of marking up the text. When working with hand written manuscripts or documents, typographers or editors would often write or mark up the text in the margins of the paper. This would include information such as the style and size of the text for each section before being passed on for typesetting. The idea of this mark up has clearly influenced the way HTML is designed. Look in our text here before and a basic HTML equivalents on the left. From the top, we mark up the HTML heading by surrounding it in this h1 tags. We will look closer at all these times during the course. But this h1 describes the contents as being the most important and also being displayed as the largest heading. Now we have a way to describe what the texts will look like to the document reader, such as a web browser. The same for below, we have a hr tag to describe where we want a horizontal rule to appear. This is a standalone tag and it does not need any text content to format, them below this standard paragraphs of text and included with the p tags. We also have strong tags too to tell the browser that this text have strong importance, and also to display in bold. Of course, there are lots more of these tags to cover but this basic example should now give you a better understanding of how things work. Also we want a way for these links in blue here to be able to connect all links to other documents. This leads us on to hypertext. Hypertext is another one of those words which makes up HTML. This is basically the text on the screen which are references to other text or documents. Hypertext documents are linked by what we call hyperlinks. We see this in most webpages we visit every day. Often that is a top navigation with links or hyperlinks to other pages. These webpages often separate documents too like you see here. So we now know that texts on a webpage is usually surrounded, all marked up with tags, just like we looked at a few slides ago, and also these p tags at the bottom. These tags complete with the content in the middle is called an element. Elements can be thought of as the building blocks of a webpage. You will have plenty practice writing these elements during the course. The final thing we're going to look at in this video is attributes. Attributes are added to elements to provide some additional information. For example, we could set the text color, we could tell the browser which page to link to if it's clicked on, or as you can see in the example here, we can set a unique ID for the elements. If this is all new to you and a lot to take in, don't worry it is here. While history and background is good to know, the main thing to grasp is how do these tags to create elements and you'll get lots more practice as you progress throughout this course. 4. Setting up a web project (Beginning HTML): During the next few sections, we'll be learning about the basics of HTML and CSS. We'll also be applying these techniques to a project as you learn them to show you how all these apply to a real website. The project to be a Tech Store display some products and also how some different areas such as headers, footers and also sidebar. It will only have basic functionality such as clicking on an item to see the full products. Those will give us a good chance to get some HTML and CSS practice. When beginning any new web projects, we first need to create a project folder to store all the files, folders, images and any other assets relating to the project. To begin, we're going to go over to the Desktop and create a new folder by right-clicking and then New Folder. I'm going to call this the name of our project, which is Tech-store. You can of course, create this folder anywhere on your computer which you prefer. Then I'm going to open up Visual Studio Code which is the text editor I'm going to be using for the rest of this course. Open that up, all your preferred text editor and you can either drag the folder in. Open that up and you see the name in a sidebar on the left. Or you can go to file and then open and select it from there. Now need to create our first web documents or our file. Again, depending on your text editor there may be few ways to do this. In Visual Studio code, you can use Command and N on a Mac to open up a new file. Or on Windows it may be Control plus N. Also most text editors have an option again, of going to the File and then New File at the top there. I'm going to click on "New File" from there and then I'm going to call this the index.html. All HTML pages need to have this.HTML extension at the end. So the browser knows that this is a HTML file. Hit "Enter." We can name this file anything we want, and we'll create multiple HTML files for this first project. But index is a common name for the website default or homepage. So make sure this is inside of the Tech Store project and then we go over to the edit area on the right. If we type in some texts such as, hello, get that saved. Then if we open up our project folder and then double-click on the index.html page, open this up inside the browser, and there we see our text of, hello, inside the browser. Of course, we know from the last section that we need to surround this text with P tags for it to be valid. But for now our project is all set up and ready to just now move on to structure in our index page. 5. Structuring a web page (Beginning HTML): With the project folder now setup, we can now begin to add some structure to our index page. Before we begin to add our HTML elements, to add content to our page, there is some basic structure we first need to add. I'm going to start by removing this hello text from the last video, and the first thing we need to add at the very top of each page is a DOCTYPE declaration, which looks like this. If you open and close the angle brackets, add an exclamation mark, and then type DOCTYPE of HTML. DOCTYPE declarations are a way to declare which version of HTML we are using. This is a DOCTYPE for HTML version 5. Earlier versions were a lot longer and more complicated. Well, HTML5 makes things nice and simple for us. The word DOCTYPE is not case sensitive, but I like to type mine in uppercase anyway. Then we add the main or the root HTML element tags. So just below the DOCTYPE, open and close the angle brackets, type in HTML, and then when this closes off, again, open and close your angle brackets, add a forward slash and HTML. With this being the root element, everything else must be added between these tags. This top type at the top is the only exception to this. Inside of the opening HTML tag, I'm going to add a attribute. We briefly talked about attributes in the last section. Attributes are just a way for us to provide some additional information which we need to add to the opening tag. For the HTML tag, we can provide the language attributes with lang. This tells browsers and search engines the language of the web page which we're creating. I'll be creating this site in English, so the code is equal to en, inside of these quotations. A quick Google search for HTML language codes will bring up a list of country codes, if you wish to use a different language. Inside of this HTML elements, there is two main elements we can now add, called the head and the body. So just underneath these opening tag, we can open up the brackets again and type in the head and close that. You can see that Visual Studio code automatically completes as follows. If your text editor doesn't, just simply go ahead and type in the closing tag with the forward slash. After this we can add the body. This again has a opening and a closing tag too. This head section at the very top contains data about the website, often called metadata. The content we add to the head is not usually displayed on the page inside the browser, it does, however, provide some important information about the HTML document, such as the site title, information of search engines. We can also link it to all the files too, and we'll look at this during inception. The first element I'm going to add to the head section is a meta tag. Meta tags basically provide information about the site and it's the first self-closing tag we've seen so far. This means it doesn't have a closing tag. It doesn't need one because we don't add any content inside, we simply add a attribute to it. There are lots of different meta tags available to provide information about the site's description, the site's offer. We can also use it to add keywords too. For this one though, all I'm going to do is add a character set, used for the site, with the charset attributes. So let's create our meta tag, M-E-T-A, close off, and then we can add our character set attributes and this is going to be equal to UTF hyphen 8. Setting a character encoding may sound complicated, but we're simply declaring which characters we're using on this web page. The character has been in numbers, letters, and also any character symbols which you'll find on your keyboard, such as the at symbol and also positive and negative symbols, or even brackets. UTF-8 is a HTML5 standard, requires almost all the characters available in the world. Next up, just below this meta tag, I'm going to add the title. So at the title is opening and closing tags. I'm going to call mine the tech store and we need to add this between the two tags. So under n just like that. If we give that a save and then open up the browser with index.html opened, give that a refresh, and we can see we've got tech store at the top of the browser, just there. We'll add to this head section throughout this project, and also later on in this course. This now leaves us with this body section. The body is where we add all the content which will appear on the page. If we go ahead and type our hello again, just below the body like this. Give that a save and then reload the browser. We see the text now appear again on the page. Great. Our HTML structure is now in place, and we can now move on to looking at some more HTML elements which we'll add to this body section. 6. HTML Headings (Beginning HTML): In the last few videos, we've concentrated on setting up a website project along with adding the basic structure for our index page. Although this is all essential for a website project, I'm sure you are all keen to get some real content display in inside the browser. When we looked at HTML in the recent slides, we took a brief look at HTML headings. Headings are used to structure the page's content from most to least important, and are numbered h1 through to h6. We use h1 for the most important or the main headings, h2 the slightly less important and so on. h1 is also the largest, down to h6 being the smallest by default. Headings are used by search engines such as Google to determine which content is most important. In this example, the large bold HTML text at the top here is marked up using a heading tag of h1. This makes sense as it is the main subject of the page. We can see this in action by visiting the Wikipedia page it was taken from. If we head over to Google and then we are going to search for Wikipedia, HTML and select the top link just there. Using the Google Chrome developer tools, which we use quite a lot through this course, we can prove this is a level one heading. Inside a Chrome if we write or control click and then go down to inspect, this opens up the developer tools. Don't worry too much about what we see here just for now. We will look at this in more detail throughout the course. For now though, if we go over to the inspector, which is arrow in the corner, click on this. Then if I hover over the HTML and I click that, we can see inside the code here, the blue line which is highlighted is a h1. Don't worry about anything which is going on here just yet. The main thing to know is we have selected the HTML text. We can see that this is just a h1 element with a few attributes inside, such as the ID, the class, and also the language which we've seen before. It's not really anything we haven't seen so far. Now let's go and give this a go ourselves. If we close developer tools and head back over to the text editor, we already know that the content we want to show in the browser is placed between the body tags. We can add our headings inside of there. It's actually on the lower section before and start to create some headings. First h1 and let's add some text inside of here, simply of heading one. On the next line let's add our h2 with the text of heading two. Next line h3, h4, text subheading four and two more to go. h5 for the small ones. Our heading five and then finally the last one is heading six. Type that all in, give that a save and then go over to the browser. Make sure that the index.html page is open from before. If not, go back to the file and then open up, give a reload. We can clearly see the difference between the heading sizes. But we shouldn't be tempted to use them just aside the text or make them look bolder. Remember headings are for importance. If we go back over to our finished website, which we looked at before, we have a few cases where we could use headings. We have the main site title of tech store at the top, which could be a good use case for h1. We also have the text of shop by and all items at the top of each section. These two are Level Two headings, then the sidebar heading of category and also price will be good use case for h3. Let's put this into practice by applying these to our project. Let's go back over to our index.html page and inside the body, let's remove h2 right through to h6 leaving h1 between the body section. This h1 like we've just seen inside the finished version, we can add a text of tech store, save that. Reload the browser, and there is our site title. Back over to the finished version. Moving down the sidebar had the h2 text of shop by and then we had the category titles of category and price. Let's add these in now. Just below the tech store title, let's add our h2 and in-between these times we can add the text of shop by. Staying with design bar section below which we can add our two Level Three headings. The first one was the text of category. Close that off. The text of category. Then just below that, there was also a h3, which was for the price. I've just got a colon after shop by there. Give that a save and let's see how the sidebar is now looking. Okay, good. I just add the currency between the brackets. Add a currency symbol inside of that. Now this is the sidebar text in place. Finally, we can add all items which was for the different section on the right-hand side here. This is also a h2 heading just like shop by. We can add this just below. Let's add h2 and a text of all items, followed by the colon. Save that. Now we see this on the page too. Things don't look too great at the moment but remember, HTML is for the content only. Things will begin to look a lot better when we dive into CSS for styling and also laying out these texts. Next, we'll take a look at how to section or group together related content using div tags. 7. Div and span (Beginning HTML): We now have some content on the screen inside the browser. But at the moment it's not really organized. We've just added some content basically from the top to the bottom, while can't do much styling and position of these headings, until we reach the CSS section, we can begin to group our related content together. If we take a look again at the finished site, looking here at the homepage, even somebody completely new to building websites could probably figure out which sections should probably be grouped together. We have a header at the very top, which would be one area. On the left-hand side, we have the sidebar. We also have a product area displaying all our products from our store. We have individual product information such as this section here and down at the bottom, we also have a footer area. Grouping content together is fairly straight forward. We just need to surround the content in a container called a div. A div is an elements and has a opening and closing tag. It's short for a division. Back over in the index html file, we can add some div elements to our website. Let's close this down and go back over to our index page. The text that are at the top, which was the header, is going to be inside the header group. Let's create our div tag. An opening tag and the closing tag too. Keep this organized and go on to add them on their own line. Then I'm going to cut the h1 from before. Now place this inside of this div section. Now have a header section. If we give that a save and then reload the browser, we don't see any changes. This is because a div is just a general container. However, they are really important, and used a lot. We will see the importance more later, when we get into the CSS section. Because for example, we could group together all of the header content and apply a certain font color, or background color to the full section. Or we could set one div to be positioned on the left of the page, and another div on the right-hand side. Let's go back over and add two more containers. The first container is going to be for the sidebar, which has the three headings just here. Blow the div. Let's add a second div, and then we can cut all three of these headings and paste them inside here. Finally our third and final div just below these two. Close that off and then we can paste in the h2 of all items. As you progress through this section will also add more content to this main section, such as the products. But for now we just have the heading of all items, give that save, and then reload. Still we see no changes, but this is fine for now. There's also another element used too as a container. This is called the span elements. To show the difference between div and span. First, let's imagine we wanted to apply some special styling to the $ sign symbol, which we have just here. But not the price. We could surround this $ symbol with a div type. Let's do that now. Cut out this section and paste it in. If we save that and then reload the browser, we see something strange happens. The div pushes the $ symbol onto a new line. This is because a div is called a block level element. Elements are mostly grouped into either being a block level or an inline elements. Block-level elements occupy the full available width of the browser and also it starts on a new line. Also, all headings which we've used so far, just above and below are also block level two. This is why we see them stacked on top of each other, each starting on a new line. Inline elements, however, as they may sound, do not start on their own line. If space is available, they will line up across the page. A span elements which we mentioned before. Has an alternative container to div is an inline elements. This means we can go back over and change div to be span. Change the opening and closing tag give that a save and if we refresh, the browser we now see the brackets and $ symbol inline with the price text. This is how we could use div and span elements to contain or target a part of our code. They'll become even more useful later on the group together sections to apply styling and layout. 8. Adding paragraphs and text (Beginning HTML): Now it's time to look at adding text to our website. Technically, we already have texts in the form of headings, but we are also provided with the P element for standard text. P stands for paragraph, although it is used for any amount of text from a single letter or word, right through to a paragraph. Looking at the product to see on the finished version, there are some block to text we can add such as the description, which is just here, the price on this line here, and also the title of each product. Let's head over to the text editor and begin to add this in. So let's close this down back over to the index.html page. First in one's create new div just below all items. Let's create a new div just here. Make sure this is still nested inside this main div. Again, this is going to be the container for all of these products section. So we'll have the title at the top. Then this div is going to be the container for an individual product. So inside of this tube will have a product image, a title, the description, and so on. First we can undertakes the title, price and description. So open up PP tags, inside we can have the text of Game Controller, which is the first product. Saying just below, we can add in a price, let's say $79.95. Then a third line with a description. So once I've also game controller for Xbox, save that. Head up to the browser and then refresh. And there is our three lines of text at the very bottom. One of the things you'll notice here is that each P elements is on its own line, just like we looked at in the last video. This means that it's a block level elements, which is ideal because you want them to be stacked, like we see here. If the text inside of the P times gets a little long, we can also add a line break which should remain in text onto a new line. We do this with a break elements. So if the description was a little bit long, we could go over and adds pr, put a break elements. Break time do not need a closing time because there is no content added inside, it's simply putting place where we want a new line to appear. Say that, then refresh the browser and now the words for Xbox, appear on the own separate line. I think its product title too of game controller will be better inside a heading tag, such as a H4. Let's make this small change. So again controller, we can delete P and at H-4, same for the closing tag, Save, and then refresh. So the title doesn't look a lot different, but there is a small subtle difference at it. You can see it's a little bit bolder to. So this is a now for adding text. Next we'll look at how we can add some basic styling to our text. 9. Text emphasis, importance and formatting (Beginning HTML): Most of the styling we add two websites is done with CSS. However, there are some small HTML elements available to us which also provide some text formatting too. All we need to do is to surround some tags around the text which you want to apply to. First, let's take a look at making a text bold with the p tags. Back over to our products. If we go down to the description, if we wanted to make the word awesome a little bit darker or a little bit bolder. We can wrap this. First let's cut that out. We can create the p tags. So we can see we have an opening and a close in tag two. Inside here you can paste in our word of awesome again. Give that save, and then reload the browser. Now we have the word awesome as a darker, bolder color. Although the p-type is valid to use, it is recommend nerds that we use a strong tags instead. So let's replace b, with the word strong. Save and then refresh. The text doesn't look the same, but the strong tag defines important text, and is usually also displayed in bold too. We can also make the text italic too, which as you may guess, is the I tags. So let's replace strong with I, reload. Then we have some italic text in place. Just like the B element though, the I element has been around for a long time. It's now recommended to use the M elements in place, where possible as it more semantic or descriptive. So instead of I, which may often see, we now usually use M, which is shall fall emphasis. Save that, and refresh, and is used to give extra emphasis to the text, whereas the I element is more for a visual metallic effects, rather than highlighting any extra importance. We also have the ability to delete text with the delete element too. This represents texts which has been removed from the document by adding a line fluids. So let's take a look at how this is used to meet M. Then add in DEL, which is short for delete. Save that. Let's take a look at this. Downward awesome has a deleted line fluids. We can also do the opposite too by adding text to the document. So if we wanted to remove the word also, just like we've done here and replace with fantastic. We would use the insert element to insert a word. After the delete, let's include the INS, which is short for insert. Between these we can add word fantastic, Space there, Give that save. There's the deleted word of awesome and the underlined inserted Word of fantastic. Next I want to look at using a mark elements. These elements represents highlighted text. This is a similar effect, what we see when we search for a word on a website. For example, let's go to the Mozilla website. This is developer dot mozilla.org. Go to any section which like inside a chrome, gone to select command and F to open up the search. Then if we search for a word such as developers, just like that, we can see it's highlighted in yellow on the page. To add this effect, we can surround the text with Mark elements. Let's try this instead of delete. Let's add mark inside there. I can also get rid of these inserted text. We don't need that anymore. Then back over to the index page and refresh. Now as the yellow highlighting which we seen before, the final element I want to cover is small. This does pretty much what it sounds like. It makes the font size smaller. We can simply replace mark with the word small. Just like we have four over examples. This worked perfectly fine, or we can combine them both by nesting. Surrounding this small section here, we can add the mark elements too. Just before it lets add mark, and my text editor automatically complete this. Go instead we want to add this at the very end. From the inside we have the word awesome, surrounding nice, we have small. In surrounding small we have mark on the very outside. Nesting is pretty simple to do. We just need to be careful to arrange the types correctly from the inside outwards. All these elements we have looked at too can also be nested. In fact, we've already messed it all these examples so far. Inside of these p elements on the very outer. Also all of these p elements and nested within this div. So give them the same and let's see these both combined. Other smaller text and also the yellow highlighting in the background too. I'm now going to remove these from the project is we don't need them. Let's remove small unmarked before and also after the text. Say that and then refresh. Now we're back to normal. Although we don't need these elements for this particular project, it is important to know that if you ever need them. 10. HTML Lists (Beginning HTML): We're now going to take a look at HTML lists. Lists as a sound, is used to display a list of items. Looking at these finished version of the project here, we'll make use of lists in multiple areas. We have them in a side bar over on the left-hand side to display a list of categories. Also for the price ranges below too. Also, we use them for the menu inside of the header and footer. For these links at the top, the menu may not look like a list at first glance, but most menus are created with a list and then styled or changed to be in lined by using CSS. So let's take a look at how we can use them by creating our header list, with the three links of home, shop and contact us. Back over to our text editor. First we set what type of list we want to use. I'm going to begin with a unordered list, which uses the UL tags. So just open the top, inside this first div, I'm going to create an unordered list, below the tech store. So open up the UL tags, which is again opening and closing tags. Unordered lists are basically a bulleted list. So we see a black bullet or circle to the left of each item by default. This bullet can be changed or removed too inside of CSS and we'll see how to do this later on. Then we add our list items between LI tags. Let's add our first list item, which is home. Then just below this we can also add a second list item and this one is for the shop and then the third one at the very bottom is for contact us. So there's our three list items and make sure all three items are nested inside these UL tags. Once that's done, we can give that a save and then test this in the browser and there's our three links at the very top. You can also see the three bullets on the left-hand side, which I mentioned before. We can also create a numbered list too by changing UL to be OL. So let's change U to be O. Give that a save, reload, and by default have the numbers 1, 2 and 3, and so on for each list item. We're not limited to just numbers though when using lists, we can add a type attribute to change things around. Inside the opening OL tag. We can add a type and set this equal to various characters. So first of all, we change this to a lowercase a, save that, refresh, we now have lowercase letters of a, b, and c. If this was uppercase and lowercase a, these three letters would now be uppercase too. We can also apply roman numerals with a lowercase i. Give that a save, reload, and have the lowercase roman numerals on the left-hand side. We can also do the same if we wanted these roman numerals to be uppercase this time with a capital I. Let's see how this is looking. Now they're all uppercase. We also have the number one too, but this is a default, as we've seen right at the start of 1, 2 and 3. So we don't need to add this in. Lists can also be nested too. For example, if we wanted to add some list items set under our shop link, we can add a new UL or ordered list inside, just like this. So just below our shop, in fact we'll remove the type first and then just below our shop we'll create a new unordered list, exactly like we just did before. So the opening and closing tags. So I'm list items. So let's say nested item and then one more, nested item two, give that a save, hit refresh and now we can see our new nested items message just below this shop link. This is how we can add list to our websites. Next, we'll add the rest of the list to our project in a little challenge. 11. Time to practice - Create the project lists (Beginning HTML): Now we know how to create lists. I would like you to go ahead and add the rest of the lists for our project. As a guide, they all need to be on all the lists. We already have the header items in place of home, shop and contact us. We just need to change this back to an unordered list and make sure we just have these three links which we see here, rather than the nested one which we added in the last video. Then we'll have two more lists in the sidebar to the place under the headings we already have. This section here is one list and then below we have a list of the prices too. Finally, down at the very bottom, we have a footer menu too. This is just the same as the one we added for the header. Give it a go. It's a great way to learn by repeating and getting some practice. If you still don't feel confident enough to give us a go by itself, that's completely fine. Just follow along with me, and we'll now do it together. Let's close this and go back over to Visual Studio. First makes you our header menu is back to an unordered list. Give that change. We also have this unordered list nested in the middle, remove that. Then we have the list that we seen before underneath the category header. First I'm going to go ahead and add a horizontal line. We can do this with a hr element. This is also a self-closing tag, meaning no closing tag is needed. Taking a look at the finished project once more, go to the sidebar, the horizontal line is just this one we see here, which separates the header from the list items and the same for the price too. Let's take a look and go over to the category, which is h3 tag here. Then we can add our hr. Below it, we can start to construct our own ordered list. Inside here, I will first list item which we have, is all items and this can be anything which you prefer. It doesn't really matter. Remember this is all just to practice. So cameras, then laptops, after laptops we have phones, accessories, and the final one was for other. Give that save, go to the browser and refresh. Our top menu is now back as it should be and below category, we have our line which spreads the full width of the page for now, but that's nothing to worry about. Below this we have our list items in an unordered list. Then we have the second sidebar list for the price ranges, which we're going to add just blow this price heading here. Back over to the text editor, we'll add these in below this h3, the price. Make sure that this unordered list again is still between this div section. Remember this is the full container for our sidebar. All the content of the sidebar needs to go between the opening and closing tags. Let's start again with our horizontal rule and then our unordered list. Inside here, I will list items, you can add the price, let's say 1-9, the second price range was 10-29, then keep going 30-59, let's say 60-99, and the very bottom one can be 100 plus. Then save, reload, and then we have our second unordered list below the price. That's looking okay now. Finally we have the footer menu. First we need to create a footer div section to add these inside. Remember we've got the div section for our header. We've got the div section here for our sidebar and then down at the bottom, we've got this div section for our main content, which includes the products. Just after this section and also still between the body tags, we're going to add a new div and this is for the photo section. All we need to do is just add a new unordered list with a new list items. This is exactly the same as the header section. So we have home, we have shop and then finally we have contact us. With that in place, give that a save. To see this in the browser, we'll refresh. We now see this down at the very bottom. I will have these lists in place. Next one to move on to taking a look at adding images. 12. Working with images (Beginning HTML): We've been mostly working with text-based elements so far. Now it's time to add some images to our website. I have provided the same images I'm using as a download free for use or you can of course download your own if you prefer. And I have these images folder on the desktop, which I'm going to drag into the project folder. It simply contains six images which we're going to be using for the project. So all I'm going to do is open up the textile project. Inside of there I am going to drag in this images folder. So all wish to have now is the index.HTML alongside the images folder. First, we need to go over to the index page and add the image elements. This has no content inside of it, so it doesn't have a closing tag. So let's do this inside of our productive, which is just here. So let's go inside there, just above the title of game controller. Let's add the image without the closing tag. Inside of here we can add a source attribute to specify the location of the image. There are a few ways which you can do this. First, I want to look at including images from other websites. So if we go over to the web browser and then go to Google, if you search for Wikimedia Commons. Let's go to this top link here. The Wikimedia Commons website usually has a picture of the day. So you also look a little different from this. All we need to do if we go to right-click and go to copy image address and then go over to our source and paste this in between the quotations. Just like that. Give that a save. If we go back over to our index page in the browser, hit refresh, we now have an image inside of this product section. So although this works perfectly fine, link into images on other websites is generally not recommended. First of all, the image location is not under your control. So the website owner could move or remove it. Also, this method, which is known as hot linking, should only be done if I have permission to do so from the website owner. A better way to do this is to use our own images. So therefore, we're in control of the location. We've already added these images to our project folder, inside of this images folder too. So instead, if we go back over to the sauce and then remove the longitudes added in. Inside here we specify a file path. So we are inside the index page now, so we need to go inside of the images folder. So it's images forward slash. Inside of the images folder, we specify the name of the image which you want to add. So because we're creating a product for a game controller, and let's add the image, which is controller with the.jpg extension. So this needs to be exactly the same as the name inside here. Otherwise it won't work. The. jpg other end is a file type, and this is important too. If you're using your own images with different file type, such as.png, you will need to change this to reflect this. Also watch alpha jpg files to which is saved as JPEG just like that. So make sure that's saved. Then go over to the browser. There's the image of our Xbox controller. The image element also has some other attributes we can use too. An important attribute is alt. So back over. At the very end, we can also add the alt tag. Inside of here, we can set some texts. This is important because we can define a text alternative to use if the image cannot be loaded for any particular reason or for visually impaired people using screen reader software to view your page. So instead of the image, if there is a problem with the type in the text of game controller picture, just as an example. Also we can set the width and height of the image too. So outside of the quotations. Let's set the height. So the heights, let's set this to 300 and also the width equal to 300 too. So it will only set one of these venues, such as the width or the height. The image will scale proportionally, keeping the size and width ratio the same as it currently is and both the width and the height, can make the image look a little out of proportion. So save and refresh. So now we see it's 300 pixels by 300 pixels, which makes the image look a little squashed. So instead, I'm just going to leave the width in place, remove the height. If we refresh the image now stays in proportion. So this is how we can add images. Next up, we will look at how to add hyperlinks to all projects. 13. Links (Beginning HTML): Early in the course when we're looking at HTML and the problems which it solves. We mentioned, the hypertext is the text displayed on a computer which links to other texts or documents. These links are called hyperlinks. We already have our menu items, just like the example here. But we need a way to change them to the links to other pages. To do this, we have a element which stands for anchor. We can use it to link to other pages, different locations on the same page, or even other websites too. Let's get to work by adding links to our menu items. Let's go over to the index page, and let's go over to our header, up at the top. These three links here, first links adds the a element around what we want to link. In our case, we want to link the text here. I'm just going to cut this out and then open up the a element which is opening and closing. In the middle here we can paste in our home link once more. This means our text is going to be clickable. Then we add the location we want to link to, by adding the href attribute, which stands for hyperlink reference. Inside the opening a tag, href, just H-R-E-F. Then inside this href, we can add a link. Let's link to a random website, let's say the Mozilla website which we visited earlier, so http://developer.mozilla.org, and save that, over to the browser, refresh. Then back up to the top of the page. We can see instantly that there's a change with the home link. If we hover over it, we now see a different cursor. It's also a different color with the underline, which shows it's a link. Let's click on this and see what happens. Then we link in to this developer.mozilla.org website, that's all working fine. We hit the back button were taken back to our index page. This is an external link because we are linking away from our own website. We can also create an internal link to link to another page in our project too. Let's create some more web pages to link to. Back over to the project. Let's go over to our text tile, make sure you're not clicking on the images folder. We'll click off this and then click on new file. Make sure this new file is outside the images folder and alongside this index.html. Then let's save this contact with the dot HTML extension, just like the index page. Then let's just add some simple text of contact us page, save that. Then let's do one more too, new file. Then let's call this the product-detail. Again with a dot HTML extension. Just add some text or product detail page. This will be the page which will link to, or click on one of the individual products to get some more information about that individual product. Now we'll have our new pages, let's go back over to the index.html. Instead of this external link, we can remove this. We're going to create an internal link to link to these two new pages which you created. The first one I want to do is link to the index.html page. Because this is the home link, we want this to link back to this index page. You give that a save and then we click on this. We can see nothing changes because it's still link on to this index page, and of course we still taken this index page. Now for the shop. If we cut out the shop texts looking as the link with the a tag, and paste this in the middle. We don't have a shop page just yet, so we can leave an empty href attribute. This means it'll still be styled the same as the rest of the links. But it just won't link anywhere when we click on it. Then the contact us page, which is one of the pages which we just created. Let's open up the a tags. Paste contact us inside the middle, the href attribute. This time it's contact.html. Save that, just like when working with images, this file path is relative. This means it's relative to the current location. We're currently in the index.html page. The contact and product detail page is alongside this page in the folder structure. Therefore, we can just add the name of the file. If it has one of these files inside of a folder, would also need to add the folder name just before, like this. But we don't, so we can just leave it as contact.html. You can give that a save and let's try this out. Refresh, we could try the shop and we don't have a link to anywhere so this is just staying on the current page. We have a link to the contact page, so once we click on this, it will then take to this contact us page. We can also see up at the top, we're currently in the contact.html. If we click on the back button on the browser we're then taken back to this index page. Another type of link we can use is a link to different parts on the same page. To do this, we need to add some more temporary content to this page. We can click on a link and scroll down to the part we want. I'm going to copy the image and paste it down at the bottom, to create some more content. Let's look for the images which we added before. This, let's copy it and all we're going to do is keep copying and pasting this in. Just give us a more content on the page and give that a save. Then if we refresh the browser, we now have some content we can scroll down to. This will allow us to click on a link and then the page will scroll down to the section of the same page. This is possible by adding a ID, so lets add an ID to one of these products. At the very start an ID is just an attribute like we've seen before. Let's call this a ID of link. We can then scroll down to the section when we click on the home button. Let's replace the href here of index or html with the value of a hashtag and then link. The hash is used for working with IDs and we'll see this a lot more later on in the course or working with CSS and JavaScript. Now give that a save then refresh and now if click on home, you see the page now skips down to the first product on here, which is the one we added the ID to. Also, it can link to other pages when a user clicks on one of these images. First, let's reinstate the website to how it was. Let's remove this link here and back to index.html. If we scroll down, that should remove this ID attribute. Then we can also remove all the extra images which we added in to give us the extra height. Remove all these extra images, leaving just the first one which we had originally. Now we can get to work on linking when a user clicks on this image. For this, we can link the product images to this new product-detail.html file which we created. All we need to do is surround this image with the a tags. Lets open up the a tags. Then inside we paste in the content such as the image which you want to link. Then inside the opening side, we add the familiar href attributes, which is going to link to product-detail.html. Product-detail.html and give that save. We can also remove this width attribute too, we'll size this later using CSS. Remove that and give it a save. Now over to the browser, we can reload and now we can see when we hover over the image, the cursor changes to show this is a link, and click on this, and then we're take into the product detail page which you created here. This is how we can add links to our website. The final thing I want to do before finishing off is to copy these three links from the header section. Remember these are the same links which are down in the footer. Just copy these, and then we can replace these three list items in the footer with the ones which are links. Give that a save, refresh, in fact we need to go back to the index.html. Then down to the bottom we can see the footer section now has three links too. This is how we can use links inside our web pages. They're other really useful and important parts of building websites, as you can see. We'll use them a lot as we progress throughout this course. 14. Time to practice - Linking to pages (Beginning HTML): Now, is the time to get some more practice on your own. If you feel comfortable doing so. This time with links. If you go to the browser, we have this product image, linking to the product detail page, which we created. What I would like you to do in this video is also turn the product title of game controller into a link too, which links the same product detail page. Also, if we look at the finish version, I'd like you to go ahead and create the More Info and Add to Cart links. Remember, we only have this one product so far, so just starting this under the one product is fine. All you need to do is add these two links using the A element which you discovered with some text in between opening and closing tag. Although these texts look like buttons, it's all just a case of adding some CSS, which we'll do later. All I'm expecting is some simple text which is a link when clicked on. The More Info button can also link to the same product detail page, just like we did for the image and also the title. However, you can leave an empty href attribute for this Add to Cart button as we don't have any pages to link to at the moment. Go ahead and give this a go or if you still a little unsure, I will go ahead and do this now. Let's go back over to Visual Studio Code and start with the product title. Let's locate our product, which is just here on the all items. Let's begin with the product title of game controller. Let's copy and copy to our place and then we can add our anchor tags. Then in-between opening, closing tag, we can paste in a title of game controller, then go ahead and add the href attributes inside the opening tag and this is going to link to the product-detail.html page. Next up, we can add the two links for More Info and Add to Cart and I'm going to do this just after the description here. Let's make some space and at the first A tag and this is going to be with the texts of More Info. This is also linking to the same product detail page, so we can also add the href attribute. Our product-detail.html. Then our second link just below and this is for Add to Cart. We can also add the href attributes, but like I mentioned before, this is just going to be a empty string for now as we don't have any HTML pages turning to. I'll give that Save of the browser. First, let's click on the game controller and it takes us to the product detail page. Scroll it down, we have More Info, which also takes us to the same product detail page and Add to Cart, which still keeps us on the index.html page. That's it now for the challenge, I hope you managed it and I will see you next, where we'll take a look at semantic elements. 15. What are semantic elements? (Beginning HTML): I now want to take a quick step back from adding to this website and take a moment to look at what we call semantic elements. Semantic elements are simply elements which clearly describe their contents, not only to tell the internet browser but also other developers also looking at your code too. This is a diagram of a typical website. The body contains all the contents which we see on the screen, as we already know. Here, we see some typical sections of a website. Each section has a div elements. A div is a section or division used to group together content. We've already done this in our project by grouping the header section, the sidebar, and each product. This is how things have been done in web design for quite a long time and still are. Div elements are perfectly fine to use. In fact, we'll use them during this course quite a lot. Often you will see an Id attribute added to each of these divs. This allows you to select a certain div, we want to apply styling or layout to use the CSS. Here we also add some more div elements, this time nested inside of existing ones. Again, this is fine and very common. We've already done this in the project by having a surrounding parent div for all of the main content, then nest in a div inside of each product inside this main div. Since HTML version five, we now have some alternative elements which we can use just like you can see here. Rather than using a generic div, we can now use a semantic or more descriptive elements. Both the div and all these new elements we see here, still have an opening and closing tag to surround the content too. We have header elements which we can add to our project in place of the div surrounding our site title and navigation menu. There is also main, which contains the main content of the website. This is not to be used for any content which is repeated in other pages, such as sidebars. For example, the side elements we see on the right is often used to sidebars and is usually repeated across the website. Therefore, it is best to be kept separate from the main content. We also have a sidebar footer too, so we can make use of all these new elements here inside of our project. This is the example we've seen earlier, well this time with the newer, more semantic elements. Here you can see an article element which is ideal for uses such as a blog post or a widget which has self-contained content. There is also a section element below two. This as it sounds, defines a section of our web documents. This is to group together related content. We also now have the nav element, which you can use to surround our navigation links. We don't need to add these to all navigation areas of our site. It's only intended to be used for major blocks or nav links. Note that we've placed this inside of the header for this example. However, this is not required. It can be placed inside or outside of the header or even nested inside over areas two. We can also take things even further by reusing elements such as the header or footer to define the header or footer section of an article, for example or even play sections inside of other elements, such as the sidebar. Remember though this is just one common way to use these. You're not forced to use in any particular way. Their use will also differ depending on the style of website which you're building. Now we know what is available to us. We can now move on and these to our project. 16. Adding semantic elements into our project (Beginning HTML): We've all just learned about semantic HTML elements. We can now apply these to our project. As it is, this will not change the appearance inside the browser, but instead it will add some meaningful structure to our web page, which is great for the browser and over developer too. In the index.html page. Let's begin from the very top by adding the header elements in place of this surrounding div. Opening tag just put the text of H1, can be replaced with header. Then at the bottom of this section, just below the unordered list, we can then close off this header section 2. Now, a web browser or developer can clearly see that this is the heavy section, rather than just a generic div container. If we would save that and then reload, we don't see any difference inside the browser. The same goes for the sidebar. We can replace the div element with the aside elements, which we seen before. Scroll on down below the header, above shop buying, we can replace this div with aside, and then down at the bottom, below the unordered list for the prices changes too with aside. Inside of this aside section, we also have two sections next to the aside. One for this category list, which is this section just here and then one section for the prices. I'm going to separate these by surrounding each with a section elements. Just below shop by let's add a section elements. Then let's copy the level three heading of category. In fact let's cut this out. All the way down to the bottom of the unordered list. Command or Control X to cut this out and then we'll paste this inside of this section. This is our first section here for the categories. Then below this, let's add a second section, which is going to be for the prices. Again, we can copy the Level 3 heading right down to the end of the prices on our list, Command or Control x to cut this out. Now paste this inside of the section. Now we have our two sections inside of the sidebar. Give that save, and check if everything is okay in the browser. We see no difference, so that looks all fine. These sections we've just created typically contain a heading. We already have these h three headings in place here. So it could be for this moving down outside of the sidebar. So let's go below disclose and aside section. The products will be the main section run from our last video. We also have these main elements which we can add. This will replace this surrounding div elements which goes around the one product we already have. So the open inside of div come replaced with main. Then down on the very bottom, close the main section off. At the very bottom of the page, we can also make use of the footer element 2. This is the last div section and page which is the footer. Let's simply change this to be the new HTML-5 footer elements, and give that a save and over to the browser reload. We don't see any difference, but now we have the semantic tags in place. We also said in the last video, there is now a nav element. This is used to represent major navigation areas. Our header and footer menu links to other pages on our website. This could be a good use case for the nav elements. First, let's add this around the footer area. Just after the footer opening tag, you can add our opening nav and closing tag. Let's cut this out a little bit, and then paste in the closing nav. Make sure yours looks like this. We have the footer area. Next inside, we have the nav, and then we have our unordered list with our free links. Then we can also repeat this for the header section 2 of the top. Just after tech store, we can open up the nav. Then we can cut out the closing tag, which has been automatically added in pharos at this under the unordered list. We can also adjust this a little so that it's more readable. Save and just refresh and check this is all looking fine, which it all seems to be we still have our links in place and nothing looks any different, but we now have more descriptive or semantic elements. Now, structure in our web page. 17. Time to practice - Adding more products (Beginning HTML): We've now covered a lot of the basics of HTML, I would like you to now go ahead and get some practice on your own by adding some more products. Of course, extra products will look exactly like this one we have here without any of the CSS styling just yet, but the important thing, is to get the content on the screen. If we go over to the finished version here, you can see six different products. This is what I would like you to go ahead and do. You can add even more if you want to. It doesn't have to be six, but I've provided six images in total which you can use. We already have this first item of the game controller, so you can base the rest of this one and just change the image and also the text of the heading and also the description. Make sure each product also has a surrounding GIF too, just like the one we already have. You could, of course, copy and paste in this existing one we already have. You could copy the full div section and paste in another five times. But if you are new to HTML, I would recommend you at least try to type out some, to give you a little more practice. I would suggest you pause the video on the finished version to see all the images and text. Don't worry about messing things up. I will be going over this in the next video. 18. Solution - Adding more products (Beginning HTML): Hope you managed to complete the rest of the product and get some more practice, add an HTML to your website. I'm quickly going to run through and add these extra five product in to my project. Back over to the index or HTML. Let's scroll down to our product inside the main section. This div section here is the one containing all of the product information. I'm just going to copy this and paste this in just below. I'm going to actually remove this link to the product detail and just leave this in the first form. Let's remove that and line all these up. The first one was the product controller. The second one is going to be for the headphones. The images was headphones dot jpg. The alt was the headphones picture. Then the text of white headphones, and the price we can add any price you want, let's say 54.95 for that. We'll call these awesome white headphones. There is break tag in there just to add these on two different lines. Add to cart and more info can remain too, but let's remove the link to this two. You don't have to do that, but I'm just going to remove this for mine. Then we can copy this again and paste in, make sure this is all lined up. The third item was for the camera, which was camera dot jpg. The camera picture description was for the Canon camera. Also let's remove this link here, infact this on the headphones too, so that the image with the alternative text, the title, the price, is going to be a bit more. Let's say 649.95. The description, awesome camera by Canon. Copy and let's paste this in again. After the camera was the microphone. Microphone dot jpg, the old text, a title into that, this is a Yeti microphone. The price, 119.95 for that. Inscription, let's say awesome blue Yeti microphone. Below this, just line is up and are the same. This is our cables. Instead of camera this is going to be cables. Cables picture. The title. Price, 10.95 and save for cables. Description, awesome cables available in different lengths. You can add anything in here which you prefer, it doesn't really matter. The whole point is just get some more practice of writing HTML code. Then after the cables, we've got our last one which is for the lenses. Let's say camera lenses 99.95 and let's say awesome camera lenses. One, two, three, four, five, six there's our six products now on the index page. Give that save and then refresh. From the top we have our first product, our headphones, the camera, microphone cables, and also the lenses. I hope you manage to complete this, if not, don't worry, you'll have had some more valuable practice anyway. I'll see you now in the next video where we'll take a look at HTML comments. 19. HTML Comments (Beginning HTML): I just want to take a quick moment, take a look at using HTML comments. This is only going to be a short video for comments and really important to know and use. A comment is basically an area where we can type in some comments or notes to both ourselves, or other developers you may read on code. This becomes more important in larger projects. We can better understand what is going on inside of our code or to jog our memory if we return a few months or even years later. To other comments, we need to include the following syntax into our HTML file. Let's say above this main section, we open up the angle brackets, just like a HTML elements, then add an exclamation mark and then two dashes and you can see already that all this section afterwards is changed color. Then we close this off by adding two more dashes and close off the brackets. Inside here we can add our text to make a comment, let's say main section to display products. Then we can save that. Now if we refresh the browser, and if we go to the main section, which is this "All Items" section here, we see that the text is not rendered to the screen, like the rest of the HTML. Also comments can be over multiple lines to. So instead of having this all on one line, we can do something such as; let's go to the very top here, or let's start with the body. We can open up our comments and close this off just the same. We can maybe do a temporary to do list. Lets say number one, create the shop.HTML page. Number two, add CSS styling. We can go on over multiple lines. Again, by saving and refreshing, we can see that this comments aren't at the top of the page. Comments are also useful for removing lines of code 2. For example, if you wanted to change a product image, so if we go down to the first product, which is this game controller here, we could just add a comments like this, just before the image elements. The same as before. Open up the bracket, add exclamation and two dashes and you can instantly see we don't close this off, that all the remaining code afterwards is commented out. So just give a save and refresh, and then we can see anything after the image has been removed from our website. But we just want to comment out this image. Let's close this off just after the image elements. Save and then go down. So all of our content is added packing, except this image for the game controller. I'm just going to undo these changes and adds the image back in. We save and refresh and there is our image back in place. This syntax we use here of the angle brackets, the exclamation mark, and also the two dashes is only used when comment in our HTML code or when using HTML files. Over languages, use a different syntax, but it work in exactly the same way. We will look at how comments work for over languages later. But for now, let's move on to look at HTML entities and symbols. 20. Entities and symbols (Beginning HTML): I want to show you a way to add some nice looking visual symbols to our websites and how to display certain reserved characters using HTML entities. Before we look at HTML entities, let's take a look at why they're needed by adding to one of the product descriptions. For example, if we go down to, let's say the camera, and let's go to the description. In fact, we'll go down to the lenses down the very bottom. Inside the descriptions, if you wanted to extend this and maybe add some additional information inside the brackets. Let's say for Canon models less than 2017. You can immediately see that the text editor is changed the color of the less than symbol here, indicated there is a problem. This is because the greater and less than symbols, a class has reserved characters in HTML. These particular ones are reserved because a browser might mistake them for these HTML opening and closing tags, which we have here. This can be replaced with a HTML entity. All HTML entities begin with a ampersands and end with the semicolon with a certain code in between. It looks just like this. If we remove the less than symbol, we can add the ampersand, which is this character here. Less than uses the LT, and then a semicolon at the end. Now as you change from red to be the same color as the rest of the elements. This should all be working fine. Save that, reload and if we go down to the image, down to the bottom of the camera lenses and as our description. The Canon models less than 2017, so symbol is now displaying in the browser. Let's take a look at a couple more just for demonstration. Greater than, use the gt, refresh, you can see the angle brackets is now points to the right. If you wanted to display this ampersand, which we have here, this is AMP, which is show of ampersand, reload and there is symbol just that. Another entity we could use is for the quotation. Instead amp, we could use QUOT, which you show the quotation, save and then reload. Now have the tuple quotation in place there. There are also many more entities which you can find with a quick Google search if you more interested. Entities are also useful to display symbols which not on a standard keyboard. Let's take a look at some of these, beginning with the copyright symbol. The copyright symbol is simply copy. Makes you have the ampersand and the semicolon at the end too. There is copyright symbol just there, lets scroll in. Just to see this a little better. Let's take a look at a registered trademark which is reg. Refresh, and now have the R in the circle and also small such as a currency. Let's take a look at yen. Save that one and reload. Now have a yen symbol which is not on my keyboard. That's how we can use these and of course you can Google this and find a lot more you can use. There is hundreds of different ones, so just search for any particular one which you may need to add. I'm just going to remove this extra section which we added in and say this, as well as find more of these online with a Google search. There is a website with [inaudible] called unicode table.com. If we had all of today, you will find a huge range of symbols you can use in your project. There is the most popular ones at the top or you can scroll through a huge set of icons below. Let's do a search using the search bar at the top. Let's search for game. In fact, we search for video game and then click on search. Now we have a video game controller symbol. If we click on this, we see we have two different numbers, we have a unicode number and also HTML code. This HTML code starts with the ampersand, just like we used before, and end in a semicolon. We're going to use the HTML code, so let's copy this code we're given. Go back over to the project and then let's scroll up to the game controller products. Here is the title just here. Afterwards let's paste this in and over to our project and reload. Scroll back up to the game controller and there we goes. There's a little image which is added in. It's underlined because it's still within the link. Let's cut this out and paste this outside of this ''a'' tag, so just like that and then reload. Now we don't see the underline for the link. Now we have a nice-looking controller icon next of product title and as you can see by the unicode table, with literally hundreds and thousands of different modes which we can use in our projects. I'm sure you'll find lots of good uses for these as you progress. 21. Time to practice - Product detail page (Beginning HTML): Now is a great chance to go ahead and build your own HTML page. We've already created the product detail to our HTML page just here, but we've added no content just yet. If we go over to the finished version here and click on the product image, the first item. This is the final product detail to HTML page, which I would like you to try and copy. Remember, we just need to add the content. I don't expect yours to look like this, finished version until we add in the CSS. You can leave this table at the bottom. I'll just for now, we'll add this one when we get to the tables lecture. We already have all the content we need to create this, we already have the header section, we already have the sidebar, we have the footer section already and we also have one of these products. Therefore, we just need to replicate the index page, but this time only have one product, which is this controller. You can of course Copy the full index page and Paste it into the product detail file and then remove the extra file products, but if you're new to all this, you may want to type it out for a bit more practice. If you are still unsure, don't worry. I'm going to go ahead and do this now. Back over to Visual Studio. I'm going to go to the index.html, press Command or Control A to select all the code and then I'm going to Command or Control C to copy. Over to the product detail page, let's delete this text and then Paste in the same code as the index page. If you go up to the top, rub this text or we can also add to the end of it for the detail and give us save. Then if we scroll down to the products, so we have the sidebar which is fine and then all items. This first div is the one we want to keep for the controller. Let's remove all the extra items, so extra two items there, the microphone, the cables and finally the lenses. To move that and then move the main site backup. We just have one product inside of this main section along with the all items heading. In fact, we can change this to product detail and then give us save, go to the browser, hit Refresh. But let's go to our projects. Refresh this and then if we select the Game controller, will then take into the product detail page. We have the heading, we have the sidebar, and then the product details section, which is one product, and then the footer area down at the very bottom. Yours should now look just like this. We have all the content we've seen from the final version, except the table, which we'll look at in the next section. 22. HTML Tables (Forms, Tables & iFrames): We now move on to HTML tables. Tables as a sound, are used to display a table of data. We use a table here on the product detail page to layout rows of data about any discounts available for buying in bulk. Tables can be used for basically any type of data which you want to arrange into rows and columns. In the past, tables were being used for laying a website. For example, we could arrange all of our content we see on this page into columns and rows. This is now discouraged as there is more CSS alternatives available now, especially since grid and flexbox, which we'll cover in this course. Tables always still have a valuable place and now it's a display data such as text or numbers, or even images in a structured way. Let's give us a go over in the product detail to a HTML file, so back over to the text editor and then let's open up this file. Let's go down to the products, so outside the sidebar and into the main area. Such as make a little bit of space straight after the product but nobody is main section here. Then we can open up our table elements, which has the opening and closing tag, and this is how we create the table. If we look at this table from the finished version, just down here, we have two rows of data. Rows can be created by using need TR tags, which stands for table row. Let's go ahead and add these within our table. In our case are TR. Then let's add a second table row just below. Each item or each cell for each row is surrounded in the TD tags, which stands for table data. In our first row, we had quantity 1, 2-3, 5-10, or 10 plus. You can add this inside the first row. We have TD. The first one was quantity, then sold in the first table row, add some new TD tags of one. Then 2-3, 5-10, and finally, 10 plus, hit that "Save". Now let's head over to the browser and make sure we open up our own project. I'm going to go over to our project folder just here, and then we can open up these index or HTML. Of course ours looks a lot different because we haven't added any CSS just yet. But we can still click on the links. Let's go down to the game controller to open up this product detail page. There's our first row see, just blow the products. Back over to the text editor. We can do this one more time for the price row. Just underneath the first TR, we can add small TD tags. This time the first one was price, so 7995, and this one a little bit cheaper, let's say 7895. Each one of these will correspond with the number adjustable. TD again, let's say 7695. We could add 7495 inside there, hit "Save". Back onto the browser and reload, and now have two rows and data. Is HTML with added for the website's content, is exactly the same for both our version so far and also the final version we seen before. The CSS styling really plays a big part in a websites look and feel. A lot of table attributes such as align on background color. But being deprecated in HTML 5, which now famous styling with CSS. We used to do things such as adding borders and aligning text inside the table, just like this. When I add a board attributes, set it a one pixel wide, we could align the text inside the center, save that, and reload. Even though it is currently works in my browser, again, is recommended to do styling using CSS. We can also replace TD with TH. This is for the table header which makes a content bold. This is useful for the top row of this table, which is the quantity. Let's go ahead and replace the top row with TH. These TDs exchanges to be TH. Do this on all of them, which grew furthermore one-by-one and replace TDs with THs, and one to do now give us save and let's see what effect this has. Now we've got the top row as being bold because this is a table heading. This is basic table setup. But we can go even further and add some more structure to this table if we take a look at the finished version. Let's go to the product detail and open a new tab. If we look at this table just here, just like a HTML documents, we can split it up into a header, a body, and a footer section. The top row with the quantity can be used for the header. The price data can then be the body. We don't have a good use for the footer tags in his example, but they are there if we need them. Also working on a caption at the top of the table too, which we've added here, we buy in bulk and save. Let's go over to the project and give this a go. First, we can have the table headings with T head. Surrounding this table row, we can add a new elements of T head. Then we can coats our first table row, over that, and paste it back inside his table head section. Then we can surround the prices with T body for this body section. Our T body into there, and copy this table row and paste it in the body section. We could add more rows to if required, or even a footer area with a T foot, both. Now let's keep that save and reload the browser. We see no change to the content. But now our table has a more descriptive structure, just like when we looked at semantic elements early on. Now for the caption, which acts as a heading for the table, which is this text just here. Let's go back to the top of the table, just below this opening table elements. We can add our caption inside here, and then it adds texts just like we do with the T tags. Buy in bulk and save. Then back to the detail page and reload. Now as our text at the top, you can see this text is centered to the table by default. The final thing I want to show you for now, with tables is the colspan attributes. We can add this to a cell such as TD or TH to make that particular cell the width of two or more. If you're familiar with Microsoft Excel, this is the same as merging cells together across a row. Let's give this a go inside the header section, to begin by making a quantity span across two cells. The quantity TH, we can have the colspan attributes, and upset is equal to two. Refresh, and now quantity spans the width of the two cells below. We could do the same inside the body for the price. Add colspan equals two. Now the price also takes up the width of two cells too. I'm just going to quickly remove what we don't need for this project. We don't need these colspan gin. We can need the standard table in for now. Remove those two. We also don't need this border, and the align properties too, this is it now, but I will first look at HTML tables. Next, we'll move on to capturing user input waveforms. 23. HTML Forms (Forms, Tables & iFrames): In this video, we're going to look at an important part of websites which is forms. You've probably all used something like this, which you see here. If you go to the finished version and click on the contact us page. This is a form which is used to get the input from a user, such as gathering information to register or to send a message. The data entered is usually sent to a web server and we'll look at this side of things later on in the course. For now though, we're just focusing on this HTML side, which is used to display the form on the screen. Let's get to work on the contact us page so we can begin to add our form. We already added a contact dot HTML file just here. We can begin to add our form to this. We can begin by adding our structure. I'm going to begin by copying the content from the product detail to a HTML. Copy and then paste this in place of the text which we'll add it here. You can of course type this out for more practice if you prefer. But I'm just going to paste this in to get things moving onto forms. To keep our website consistent, we can reuse the same header and sidebar. This header can stay, and all the side section can stay too, but I'm going to remove most of the main section apart from this heading. Let's go all the way down to the bottom of the table. Instead of product detail for the level two heading, I'm going to add a title of contact us. Now, we have this main section clear to add a form. Let's give that a go and save that. If we go back over to the browser inside of our projects, let's try clicking on contact us. Now, we're in this contacts dot HTML. We still have the heading and also the sidebar, but no other main content. Within this main section we can add our form. The form is contained inside of a form element. Let's add this in there. You will often see some attributes inside of this form opening tag, such as action. Just like that, and also method. We'll come back to these later in the course as they're related to how we send our form data to the server. But I just wanted you to be aware of them if you come across them in any documentation. Action is used to set the location where the form is to be sent to. We add a file path inside there, and method defines which HTTP method we want to use to send a form. We can either send as a get or a post request, but more on this later. For now, I want to concentrate on getting some inputs on the screen. Inputs are the sound capture user inputs, such as text, which is entered, or a checkbox when the user clicks on it. Let's start with a text input for the user's name. We can add a input element. Just like that, there are lots of different types of inputs and we set them using the type attributes. Let's add the first one of text and let's go over to our projects and then refresh. There is our contact us text at the bottom and a text input. This is just a simple box where you can enter any type of text we want to. In fact, we're not restricted to just text, we can even type in numbers and different characters too. We can add some text before or after it too, to let the user know what to enter, such as their name. Let's do this now. Just before I'm going to add the text of name, then reload and there's our text on the screen as expected. If we take a look though at this finished version, we can see inside the text input we have some faint text instructions. This is removed when the user clicks on the text box and we start to type. This text is added with the placeholder attributes. Let's go back over to our inputs. Just after the type attributes, we can add a placeholder and then we can add our text into there of, enter your name and that's our text inside of there. Next we want the user to enter their e-mail address, which is just here. We deal with this in the same way, but this time the input has a type of e-mail. Under a new line, we can add e-mail, and then add our inputs. This time with a type of e-mail. This can also take the placeholder attribute too of enter your e-mail. Give that a save, and then refresh and there's our to form elements side-by-side. The next input type is the text area. This is used when we want a larger box to type in more text for areas such as a message. Let's add this on a new line. First of all, the texts of message, and then this time instead of the inputs, we use text area. This has opening and closing tags, unlike these inputs. Inside here we can also add some extra attributes for this one too. We can set the initial number of columns wide we want the box to be. Let's add the calls attributes and I'm going to set mine to be 30. Also the number of rows too for the height. I'm going to set my initial value to be five. Text areas can often be dragged larger and smaller with a little drag section in the corner. Refresh the browser and there's our larger text area, which we can add multiple lines of text in. As I mentioned before, we can also click on the section in the corner and make it larger or smaller. Remember earlier in the course we mentioned we can categorize most elements into inline or block level. We can clearly see that here that the form elements are in line. If you want them to go on their own line, stacked on top of each other, we can surround them in a div, which is a block level elements and this gives us the effect that we see on the final version here. Inside the form, let's add some div elements. That's got the name, I'll paste that in. Second div for the e-mail and finally a third one for the message, paste that in. Then reload and now, all three inputs on their own separate line. This is a good start to our form and will continue in the next video. 24. Labels, name and id (Forms, Tables & iFrames): In the last video, we added some basic form elements to the page. Also, we added the text of Name, Email, and Message to the left of each input. Tell the user what information to enter. This is just plain text with no other HTML elements, such as a p-tag, which you can see here. There is also no way for the browser to know these texts is related to these inputs. We can fix this by adding a label. A label it's just a way of adding a caption of texts to each input like this. Let's first cut this text out, and then we can add our label inside here. Between open and closed and times we can now paste our text back in, give that save and reload the browser. We can see instantly that if we look at this first input, it looks pretty much the same as before. However, the browser now knows this is a caption for a form elements. But how does it know this label is for this particular inputs and not the Email or Message? Well, we can link them by adding a id attributes. This first inputs, just off the placeholder, we can add an id attributes and this can be a name of our choice. I want to name this Name, to keep it simple. Then over in the label, inside the opening tag, we can add the four attributes and link it to the id with the same name. This id attribute is not just for use with a label, it's important for targeting these individual elements with both JavaScript and CSS, too. Let's now do the same for Email. Just after the placeholder, the ID of Email, I'm going out on a label. Cut the text out, and then paste it back in. Then we can add the for attribute inside here of email. Then lastly, we can add this to the text area too. Just after rows, add the id and again it could be name of your choice, but I'm going to call mine Message. Cut the text out and then add as the label. Finally, the for attribute, and this is Message Two, and save that. It's important not to have the same id name more than once on a web documents. We have cluster this purpose and we'll cover this in more details soon, so make sure, it's saved and then over to the browser, reload and, of course we see no difference but these all now linked too behind the scenes for the web browser. One other advantage of using a label is that the label is also clickable. Rather than before when we could only click on this input to make active, if we click off, we can also click on the name too. This also makes input active, so the user can begin to type. Another attribute you will commonly see is a name attributes. Let's go over to our text editor and inside this first inputs, we can add a name and let's call this Name. Same for the email, name = email and also the text area of message. We can be confused first, why we have this name and also the id attributes and this is understandable. I won't go into too much detail just yet, as a lot of this may not become clear until we get more familiar with java scripts and also processing forms on the server. The id attribute which we added first, is usually used to reference the elements, in our case the inputs. It's a way to grab the element with JavaScript or CSS. The Name attribute, however, is more useful when submitted form to Web Server. This name is used to reference the data which the user has entered inside the input fields just here. It's a way to grab this data out of there. If this does not make sense just yet, don't worry, we'll see a lot more as we go through this course. For now though, we'll continue to look at more input types in the next video. 25. Checkboxes and radio buttons (Forms, Tables & iFrames): Another common input type which you probably already use before is a checkbox. Checkbox, just like we have here, allows the User to check more than one box a time. Here we allow a user to subscribe to offers by newsletter, e-mail, or post, so let's see how we can do this over in a text editor. Just like before, I'm going to add a surrounding a div tag and make sure this is still within this form elements here. Open up the div tags to make this block level. Then we're can add some p tags for the text at the top and the text is going to be just what we say here of subscribe to future offers buy. Then a colon at the end. We can also use a label for this checkbox, so add these first. Just below the p, let's add our label and just like before, we add the four attributes. I'm going to call this the newsletter, which we can link to the ID soon. Then add newsletter inside the opening and closing tag. Just after this, we can add our input, like we've seen earlier. This input has the type of checkbox. Then we give it the ID to link to this newsletter just here. Give that save and test inside the browser by going over to our contact page, and then refresh. There's our text between the, p tags just at the top there. Then have the label of newsletter, and you can also see we can click on this checkbox and also unclick. We now have a checkbox which you can click on and off. Now we can add this in two more times for the e-mail and post options. Let's do exactly the same. First, we can add a label and the label for, let's call this to e-mail. The name of e-mail and the input with a type again of checkbox, the ID of e-mail and it closes off. Then our third and final one, this is going to be label for post. Goes off with the text label of post two and the final checkbox input. Type of checkbox and an ID of post then I close off. Go to the browser and as our newsletter, e-mail and post. There are also some more attributes we should add too. At the moment, these free checkboxes are next to each other on the page, both unrelated. We can effectively link if we wanted to, by giving them all the same name attributes. This is a name attribute which we looked at in the last video, which were added just here. Let's do the same for our input with a type of checkbox. The name, I'm going to call this subscribe. I'm just going to copy this and add the same two more times. This name attributes, as mentioned in the last video, means when we submit this form to the server, these values from the input will also be passed too. With checkboxes we can't type in a value like we could with the text or e-mail input, so we can add a value attributes in just like this. The value, and this can be the newsletter. This is a data which is passed to the server once it sends, so the value for the second one, of e-mail and also the value of post. Each time the form is submitted, the server will get the value of newsletter, e-mail, or post, whichever one is clicked on. One of the key things to know is here, is you can check as many as you want. We can click on and off of any of these. This is a key difference between checkboxes and radio buttons, which we're going to look at next. If we go all to the finished version, we've already done these free checkboxes we see here. But just below this we have, "How would you like us to respond?" You can see these radio buttons, but we can only click on one at a time and that's the key difference between radio and checkboxes. Radio inputs are added in a similar way to these checkboxes. I'm going to add a surrounding div. Again, make sure this is still within the form. Then inside here, the p times at the top for the text of how would you like us to respond, with a question mark at the very end. Then we can go ahead and add our labels. This also has the four attributes, so we can link it. I want to call this one the phone response, close that off and add the label of phone. Then we go ahead and add our inputs. This time with the type of radio and also the ID of phone response, to match this. Add that in too and I close this off. Then we just need one more for the e-mail. First of all, the label and this time it can be e-mail response. This is keep it consistent with the phone response above. Close that off and ask the label of e-mail, then inputs, type of radio and these ID of e-mail response. Close that off, good. I've used phone response and e-mail response here rather than phone or e-mail, because we already have e-mail ID on his page, which we'll use just above. I remember we said before the IDs should be unique and only used once on the page, so let's give that save and test inside the browser, back over to our current project and reload. As are two radio buttons at the top. But one thing you notice is if we click on these, we can see that both of them can't be checked at the same time, so this is different behavior to what we expected, from what we've seen before on the finished version. We seem to be able to select both of the radio buttons at the same time. This is because just like checkboxes, we need to also group these together with a name attribute, so let's add the name in each input, so let's call this response and the second input name equals response. Now is linked together. Let's test this by refreshing and try both of these. Now we can only select one value at a time because here is a group together. Finally, we can add a value attributes to also send to the server too. The value this time can be phone, and the value for the second one is going to be e-mail. You may also see checkboxes with a value of true and false too. If there are only two options such as a subscribe input, which is a simple yes or no. Then a true or false may be a good use case for this. Next, we're going to move on to another important type of input, which is select. 26. Select input (Forms, Tables & iFrames): The next type of input I want to show you, is the select box. This input basically allows a drop-down list and various options, which the user can select, and we can see this just here. If we scroll down to the Subject here, we can click on this. I'll be presented with various different ones. Now this is a slightly different type of select box, which we're going to look at now but we'll get on this type just soon. First of all, I'm just going to tidy things up a little bit inside of all form and separate our sections so they're more clear. Let's have our name section and add some space between each div, now we can close off the checkbox too. These all grouped together like this, and then let's group together our e-mail and phone response section. Now these are all groups, I'm going to add our select just below the message area. This is our message area here, so let's make some space and also create our div section for this. This time, use the select element rather than an input. Add the select just like that. The select, just like all the others. I'm going to give an ID, and we'll call this the subject. The select box is going to add a list of options which the user can select as their message subject, as well as the select, we can also add a label too. Because we have the ID attribute, we can also add the for attribute of subject, and then a text inside of subject too. Inside here, each item in the drop-down is wrapped in a option element, and this goes between the select tags. Before we do that, let's just check this out in the browser. Says our label of Subject, and you can see we have the input here. If we click on it, we don't have any options to select from just yet, so let's add these with our option elements. Let's add the first one in here, and inside here we can add our text which will appear inside the select box. The first one can be returns, let's see this in action, says returns just there. We can also add a value too. This value attribute will enable us to pass a select value with the form when we submit it. The value of this one can be returns, and then let's just copy and paste this in a few more times. This one can be faulty item, and a options value of faulty item, and I'm going to use an underscore just instead of having a space here. The next one for delivery info and the value of delivery. This one can be for order tracking. Next an option of advice. Then finally, we'll just add one more and this can be other. Give that save and let's go inside the browser. Reloads, and then click on our select. Here we're presented with a list of all the options which we added inside the Select. By default, we can only select one of these values at a time. As soon as we clicked on this, the Select is then collapsed. If we want to select more than one, we can add a multiple attribute to the opening select tag. Just after the ID, we can add multiple, and then let's go over, reloads, and we can press Command or Control to select more than one value. I'm going to remove this for now as we don't need this inside of our project. But it is useful to know it's there. We can also group together any related options. Rather than having just one long list, we can use the optgroup element to group together certain related subjects. Returns and faulty item, I'm going to group together. I'm going to cut both of these values out, and then use the optgroup element and then I can paste these back inside. We need to then give this optgroup a label, and this is the text which will appear on the screen above both of these groups sections and you'll see this more clearly in just a moment. I'm going to add the text of product issues and save that. Let's see how this looks. If we expand, we see in the faint text at the top we have Product issues, which is the label we added, and then slightly offset to the right, we have our two grouped items here. Next, we have delivery and tracking information. These can be grouped together into delivery. Let's cut these two options out and add our options group, and then paste these back in. The text label for this one can be Delivery. Then down at the bottom, we can group advice and other into a Other group. One more optgroup, paste these last two in, and then our label simply of Other. Now we have all the three separate options groups, they should now all be displayed in the browser. Reload, open this up, and we have now three different groups altogether. Notice we can't also click on this label either of Delivery, Other, and Product Issues. This is just simply there for information. Now we have our select box in place. We're now going to look at a more recent edition to html forms, which is the data list, and we'll take a look at this next. 27. Datalist & submit (Forms, Tables & iFrames): I want to now show you datalist. Datalist is one of the newer form elements available. Because of this, browsers ports are present is a little bit more limited at the time of recording. We can see this by going over to a site called caniuse.com. All I need to do is type in the datalist at the very top here. Then scroll down and you can see a list of the supported browsers. We can see by the color that the later versions of Chrome are green, and it's fully supported. However, some of the early versions of Safari and also Safari on iOS, it's not supported. If we take a look at Internet Explorer and also Edge and Firefox too, we can see that the light green indicates some partial spots. So we need to be careful when using datalist. However, it is useful to know as it will be a good option to use once browser spot catches up. Datalists can be used in place of a select box from the last video, where the select box is a drop-down to select an option. Datalist is more of a text box where the user can type into. Then we can see some suggestions below it. If we go over to the finished version and into the contact page, this is a datalist here. If we click on the drop-down, we still have all options that we've seen in the last video which you can select. Or we can use this as a search box. We can filter down if you have lots of different options. Let's begin over in Visual Studio Code. I'm going to comment out this full div that we create In the last video. This is a div which surrounds all the select box. If you're using Visual Studio Code, you should be simply able to highlight and press "Command or control", press "Forward slash" and this will comment out the section photos. If not, we'll just need to type in manually the opening section and the closing section below it. Then let's go ahead and construct our div, just like we did before. Then we can add a label. Label again is going to have the four attributes of subjects, and then subject inside here. We're basically just construct in the same thing as we did for the select box. This time we add an inputs with the type of texts. The reason we're adding a text input is to display the section here, the user can type into it. Let's give this an ID of subjects again to much these attributes here. Then the placeholder at the very end of enter your subjects and close up. This is just a simple text input to begin. The user has a text-box to type in. Then below this, we can add our data list with opening and closing tags for these elements. Then we can add an option inside here. This only has the opening tag, and we'll also add a value attributes of returns. Then let's copy and paste the same a few more times. Next, we can add the faulty item. Faulty item and then the third one is delivery, before four was order trucking. The fifth one was advice and the final one was other. Over to the browser. It reloads and go up to the subjects. Lets start to add some text inside here. If we type inside the inputs, we don't see any of the options appearing below, like we've seen in the final version. This is because we have a plain text inputs and also we have a text list below it, but we've not yet linked them together. To link them, first needs add an ID to the data list. Just like all IDs goes in the open inside. We'll call this the subjects. Then text inputs above, which lists connects to with the list attributes. Of course this needs to be subjects matches ID below. Give a save and let test this. Hit "Refresh" and we also see this drop-down arrow appearing, it looks like it's working as I trying to leave advice and that all seems to work in. This is how we use the data list. Again, do be careful when using a check browser compatibility. If you were looking to include this inside of a project. Both unknown thing, it's a nice form elements are especially useful, to filter down a large group of options. This is all the form inputs now on display in our website. We just need a way to submit this form and as you may guess, we do this with a submit button. Submit is also an input, but this time we ask the type of submit. Let's add this right at the end of our form. Just above disclosure form tag. We can write this in a div 2, then add our inputs with the type of submit. Give that save and let's check this out. Of course this is right on the bottom we have our submit button just here. This is a bomb which will actually submit the data in the form to the server. Remember all this will not work at the moment because HTML just display the content. But we'll come back to submit forms later in the course, when we're more familiar with back-end web development. But one thing you will notice once we click on the "Submit" button before, we'll take him back to the same page. If you look at the ends of this URL, we have name equals unblank, and email equals no value and message equals no value. This is because we added the name of name, email, and message over in the HTML. This was just here, name, email and message. This is why we're added the name attribute before, and this is the data which will be sent to the server. Let's just give that a quick trial, if we added Chris. Then test@test.com, then message here, if we go down and click on "Submit", will then see this information is now in the top bar. Our name equals Chris, email equals test and message equals to our text, which user added him. We'll just leave that for now and of course we'll come back to that later on. What we know more about how back-end development works. We could also replace this button with a HTML button elements. This also takes a type equals submit. Down at the very bottom. I'm going to put this here. We're just going to comment this out. Then we can add to the button elements just like that with the type of submit. This is something which you'll see quite often to. Since has the type of submit, will also submit the form just like this input will do above. It was same and check this out in the browser. It looks a little difference. We just have a plain button with no texts. We see no text of submits this because like over elements with an opening and closing tag, we need to add our text inside. Between these we can add a text all of submit. I now will see the text inside the button. This is actually one of the main differences when using an input or a button in this way, inputs have default text of submit, but our buttons, you're in control or the text inside the button. So it can be anything which you want. Chat has send message and you'll see that reflected in the browser. For now I'm going to comment out these button and keep in place the inputs which you had from the form. Again with command or control and a forward slash to common data out. You may also come across a reset button, placed next to the submit, like this. Rather than the type of submit. You may also see the type of resets and this is used to clear any of the text from the inputs which we add. We had some text inside here. You could click on "Reset". This will clear all form inputs back to how they were. This is the contents of our form now completed. But in the next video, I want to show you a few more useful types of inputs. 28. Other useful form elements (Forms, Tables & iFrames): Although our form is now complete for these projects, they still some other useful input types which you want to show you. I'm going to add these as a new form elements, to keep them separate from what we'll keeping from the rest of the project. Let's go down to our close and forms site here and then, let's open a new set of form elements here. So some other useful input types include number. This has the input elements and this time I'll add a type of number. One of the benefits of using the number, if we refresh, we see it appearing here, is that it restricts the user's input to these numbers. If we click on this and we try to add some letters or words inside here, these aren't taking any effects, but we can of course add some numbers, which you can see here. There is also the up and down on the right-hand side, which we can use to go up and down through numbers. Next, if you want to ask for the user's password, it makes sense to do this with a inputs with the type of password. This has the benefits of staring out the password. If we type in our password inside here, we see that we can't see any of the characters which you've entered. This is useful for if somebody is behind you, or walking past, so nobody else can see the password which you enter. There is also a input type of dates, which we also have access to and as you'd expect, this is the input type of date and this is obviously for all date fields. Let's take a look at this in action. This could be used to when asking for a user's birthday, or for example, selecting the dates, we want to stay in a hotel, on a travel website. If we click on this, we have the dates, the month of the year. We can also control this with the keyboard, by typing up and down, add tab also switches between the day, the month and the year. We can also click on this drop-down arrow and we have a date field where we can select different months of the year. Then all we need to do, is click on one of the dates and the field is automatically populated with the date we clicked on. [inaudible] these inputs, it is quite a few more too which you can look up online, but I will show you a few more of the common ones, such as color. Change the type to be color. You've probably seen this one before on various websites, where we have a color picker. If we refresh, we see the color black is default. This looks different on different browsers, so if you're using something like Edge or Firefox, you may have a slightly different looking in inputs type here. If we click on this we get a nice color picker, this of course, is the apple one and yours may look a little bit difference. We click on various different values and choose our color from that. Another useful one is range. So inputs with the type of range, back over to the browser. Range gives us a slider, which a user can move across by clicking on it and dragging it to the left and right. By default, the slider is in the middle, but there are also some attributes we can add to change things, we can change the minimum and also maximum. So if we set the minimum to be one and the maximum to be 10, this gives us a range of 1-10, which we can drag between. Now we can control the starting position of the slider. Currently, as we said before, it begins in the center, but we can change the starting position by setting the value attributes. So if we set this to be one, it would appear at the beginning. Let's give this a go and we now see the circle right at the very start, if we change this to be a value of 10, it would appear right at the very end and this is useful input type, particularly when we start learning about JavaScript. We can use it for things such as setting the volume on a music player. So it goes up and down as the user of drags. The final input type I want to show you in this video is search. I'm sure you've all used it before to search for items on a website. This is something which could be used on our website, in the header section. If you look at the final site here, look at the very top, we have a search field just here, I'm going to now remove the second form, which I have been playing around with it and bring it back up and then we can add a search to the header. So if we scroll back to the top of the page and into this header section, we can add this just after our navigation. We have an input type equals Search and we can also add a placeholder attribute to Search then close off. One of the differences between this and a normal text input is, after we type something, there is an x which appears to delete the search term. So I'll show our main now, if we refresh, then go back to the top, then we start typing in, we see this x on the right-hand side, to clear the form inputs. Also, as with other form elements, the HTML only provides a visual search box. Searching for anything at the moment will not work, just with HTML alone. We also need to add the search box to the header, in the index page 2 and also the product detail. If we click on the home, we don't see this added inside of here. Let's copy this inputs from the contact page, first let's update in the product detail in exactly the same location, close enough. Then if we open up our sidebar and go into the index.html, we can do the same just here. Let's try this out. On the Home, the Contact Us and also for click on one the products, such as the game controller. We've seen the product detail will also have the search bar there. So now we should have a pretty good idea, of the different ways we can gather information using forms and inputs. I hope you found this useful and I'll see you in the next video. 29. IFrames (Forms, Tables & iFrames): We now got to move away from forms and take a look at using iframes. The iframe element is used to embed another HTML page into a web document. Like you see here on this finished Contact us page. We can also embed a page from another provider such as, Google Maps, like we've done here. It may sound a little strange but they'll become more clear when we see them in action. Let's see this in the contact.html page. I'm going to add an iframe inside of here. I'm going to add this just after our form section. Let's scroll down and right at the end of our form, but still within this main section, we can add to the iframe element. If we give that Save, and then refresh the browser inside of our project. In fact we need to go to the Contact us page, and then scroll down. We see an empty iframe element at the very bottom. To get this to show something we need to add a source attribute, just like we did when working with images. The source attribute will point to the web page we want to embed. This can be as simple as display in one of our own web pages, such as product data. Let's add the source inside of here and link to our product-detail.html. I'll give that Save and let's see how it is looking. There's our product detail page inside this iframe or inside this window. Now we can scroll up, and down, and left, and right. This iframe is a little too small for the content. You can also use a height and width attribute to re-size the iframe. Let's begin with the width. Let's go for 800 and a height of 600. This value is in pixels, so it's an 800 by 600 pixel iframe. Now we have the iframe a little bigger on the screen there. The iframe can also be used to link to an external website, but only if the website owner allows this. Currently, Wikipedia allows this, and we can see by typing in the source, so instead of productdetail.html, let's type in the full URL of https://wikipedia.org, and then give that a save. On to the browser, and we can see the Wikipedia website embedded. At the moment, Google does not allow us to do this. Let's link to google.com, refresh, and we just see an empty iframe. We do need to be careful which websites we're linking to and make sure that that is allowed. We can also add some fallback content if the embedded content cannot display. This can be added between the iframe opening and closing tag. Let's add our p-type to some text. Let's say your browser does not support iframes. Back to our projects, and reload. We don't see any different because this is only displayed if iframes are disabled, or if it's viewed on a screen reading device for visually impaired people. We can also embed content from other websites too if they allow. YouTube is one of the websites which does allow us to embed an iframe into our projects. To do this, we can go over to youtube.com. Then all we need to do is find any video which we want to add. Let's just do a quick search for anything. I want to search for Elon Musk and click on any one of these videos. Then what we need to do is click on Share. If you go down to here, there's a share button. Click on this and then we click on embed. Then we can copy this iframe which is provided to us. We can see the closing and the opening iframe. Let's copy all this section, go back over, and we can add this in place of our current iframe. Let's remove this and paste in the YouTube version instead. Give that a Save and now back over to our project, hit Reload, and now we have a YouTube embedded video and play button controls down at the bottom. This iframe also has some attributes too which we've not yet seen. If we scroll over to the right, we see we have Allow full screen. There is also frame border, which has a value of either zero or one. Zero means no border and one means to add a border. This allow full screen as it sounds. If we remove the attribute and then go over and play the video, so click on play, and if we try to click on full screen, we can see that full screen is unavailable. However, attorneys packing will allow us to make the video full-screen once more. We play and there we go so now it's a the full size of our screen. Now we know a little bit more about iframes. In the next video, we can use them to add Google Maps to our projects. 30. Adding Google maps (Forms, Tables & iFrames): If we go over to our finished "Contact Us" page, and scroll down, you'll have no waste. In its finished version, we have a location map on this "Contact Us" page. This is provided by Google, by accessing the Maps API. We'll cover APIs in detail later on in this course, including building our own, but for now, just know that the Maps API will allow our website to communicate with Google's map information. You may be wondering what this all has to do with the HTML section of the course, well this API is included inside of an iframe, also it's really easy to implement. Let's begin by going over to Google, and let's do a search for Google Maps API, and normally to go to is developers.google.com//maps, so select this, and first let's click on the "Get Started" button, which is just here, and then let's scroll down. The one we need is the Google Maps embed API, so let's scroll down, and this is under the Web API section, so click on "Google", and we're at Google Maps embed API. Then select maps, and we can see this integrates based maps on indoor floor plans to our site, so click on this link here. This is pretty simple to get started with. All we need to do at first, is copy this iframe section, which you get it just here. Copy that, and then we can go over to our contacts.html page, and replace our YouTube version with one which we just copied. Now we head over to the browser, and see our "Contact Us" page, hit "Reload", and we can see a problem. The provided API key is invalid, so as the error message says, we need a API key. This is how Google can keep track of who is accessing its map data. We can get a API key from the menu, back over in the Google website, on the left-hand side is an option to get an API key. Before we go any further though, I just want to point out, that websites like this, often change layouts over time, so if you're version looks a little different, it's usually just a case of a NavigationLink has moved, but you should still be able to find your way around. Then we need to go down and select "Get a Key". If you're not already logged in, we need to log into Google, so I'm going to login, then click "Next", and then we need to add our password. Okay, good. Now we're logged in, we can click on "get an API key" again. First need to create a project, so I'm going to create a new project. Click on this "Create New Project" link, and one's user name of "Tech Store", and then click on "Next". This should then give us our API key, which we can copy by clicking on this icon here. Go over to our project, and then if we take a look at this iframe, which we copied before, we need to scroll across to the section which says "key equals", and then where it says "Your API key", delete these three words here, and then paste in the API key, which you just copied. Give that a save, and now if we go back over to our contact page and refresh, we should now see that we're presented with this Google Maps image, instead of the error message. Now we'll have a connection to the Google Maps API. Now we just need this map to be at the location of our business. If we go back over to the Google website, and I click "Done", we can see a Quickstart from the menu, which is right at the very top, so click on this. Here we can build our own custom map. We can search for places or a city. Let's say New York, then click on that, and then scroll down, we can see we have New York appearing on the map there. We can also search for the Apple address, for example, so let's search for "infinite loop", which is just here, and then scroll down, and we can see the new location just here. We already have our API key to construct this map, so we could just paste this inside of here, and then once you done that, you click on "Done", and then we're provided with a iframe, which we can copy, and this has this new location, which we searched for before, so let's copy this. Then if we go over to the project and replace our iframe with the one which you just copied, and then if we go back over to our contact page, hit "Refresh", and we're now taken to the address which we added in before, so of course, you would need to change this to the location of your business, and this is how we do that. Now we have successfully integrated Google maps into our project. This is it now for the HTML sections of this course. Well done for getting this far. Now we can move on to learning all about CSS. 31. Understanding CSS (Beginning CSS): In the HTML sections we have covered so far, we've referred to the finished website to show what we will be adding to our projects. Right now, our own project we have been creating contains the exact same HTML content as a finished version. But as we know they look very different. The difference is the CSS. CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the look and formatting of a document written in a markup language such as HTML. This is a formal description, but you can think of CSS as a way of styling, positioning, and laying out elements in our websites. We can use it to adds colors, borders, alignment, text size, background colors, and so much more. Using CSS keeps our styling separate from the HTML content. This separation keeps all files smaller and more maintainable. We can still mix styles into our HTML file, and we'll look at some ways to do this. Well, anything other than a small website will usually have HTML in one file, with a.html extension, and then CSS in a separate file with a.css extension. Having a separate CSS file also allows the same styles to be reused across multiple HTML files. CSS3 is the latest version. It allows us to do even more with new features such as transformations, animations, gradients, body images, rounded corners, and media queries. We will of course cover these in more details soon. So what does CSS look like? Well, on the screen here are some examples. First, we can select an element by its name, such as h1. There are many ways to select an element. Will look at these soon too. Then we add some curly braces to contain the style rules we want to apply to this h1. Same with the header just below, this header will have a width of 70 percent with a white background. Now we know a bit about what CSS is. Now let's move on to automate our projects. 32. Inline styles and adding color (Beginning CSS): I'm going to begin by looking at one way of adding styles, which is to add them in line. In line basically means we add them inside of each HTML element. This final version has a gray background color for the header and also the footer down at the bottom. Let's begin by adding a background color to the index.html. Let's go to the head element, index.html, let's go to the top of the page. Here we have our header elements. Alpha can use the style attributes to add inline style inside here. We can then select the background property to add a color, add a colon. We can use a coolers name for most values, such as red, blue, or yellow. Let's start with red. Each CSS property needs to end with a semicolon and give us save. Then reload the browser, go to the index.html. There's a pretty terrible look in red header, but the star property is now taken effect. We can also use colors in other formats too, instead of just typing the name, such as RGBA and hex. If we go over to Google and if you search for a color picker, is various online tools we can use for a color picker, I'm going to use the W3Schools version, which is the top link on here. Here we can select a color from this picture on the left. Let's let any color for now. Let's go for blue. If we scroll down, we can see this is a different formats here. The first one has a hash and this is a hexagon value. Hex stands for hexadecimal color and has a hash prefix, it's made up of six digits. The first two is red, the second two is green and then finally the two blue values at the end. The hex color combination I have chosen for the header is 333A40. Let's go over and replace this red value. Let's add the hash, then the value of 333A40 and give us save. Let's take a look at this. Now I have the same dark color which you see in the final version just here. If we head back over to the W3Schools website and then refresh, this also a RGB value just below inside the brackets we add the value of red, green, and then blue as a number ranging from zero to 255, zero being the least intense and 255 being the most intense. If we wanted a red color, just like we see on here, we see the first value of reds as 255, zero for the green and also zero for the blue, which makes sense. Then below the color becomes more orange. This third one for example, we see we can add more green. 255 for the red, 128 for the green and zero for the blue. You may also see a fourth value too, which is called RGBA. If we also do a Google search for RGBA. Again, I'm going to go on this W3Schools website, for this link here. Here we can see RGBA value and the four values inside the brackets too, this is just like an RGB color, but with a fourth value of alpha. Alpha is used to set the opacity and is a value between zero and one. Zero Is fully transparent and one is a solid color. If we go back over to our index.html page, the default text color we see on the page here is this dark black color. This text color can also be changed using the color property like this. We just after the semicolon, we can also add the color which applies to the text. We are going to changes to be white, and also the semicolon at the end. This can also be a column name and RGBA or hex value. Both am going to keeps it simple as white and then refresh. Now we have this white color at the top of the header. You will notice that these free navigation links and the light, this is because these are links. We need to target the A element for this to take effect. The same background color can also be applied to the 42. All we need to do is take this style attributes and then copy, and we scroll right down to the bottom of the page, we just need to add this inside the opening footer tag. Then if we go down to the bottom and hit refresh, we now get the same colors applied to the footer. This is how we can add inline styles. They can be useful for quickly adding a style to one particular element. But you can probably already see some disadvantages already. Such as even at this early stage we're already duplicating the same code, which is not usually a good idea. Also, but a time where add styles to every elements on his page may begin to look really messy. Another big disadvantage is if we decide to change something, such as a font color at a later date, we will then need to look through every text element in every HTML page and change them all individually. Thankfully, there are some better approaches, and we will look at one of them in the next video. 33. Internal stylesheets (Beginning CSS): The next type of style sheet we can add is internal stylesheets. This is a way to add all the styles we want to apply to a single web-page. To do this, we can add the style tags in the head section. So let's scroll to the top of our index page, and then just after the title, we're going to add the style tags. Let's add the opening and closing tag inside this head section. Then just like we've seen in the slides at the start of the section, we can then add the name of the elements we want the styles to apply to. I'm going to begin with this header area, followed by the opening and closing curly braces. Inside of these curly braces, we can add the same styles as before. So we add the background, the colon, and we had the Hex code value of 333a40. When using these styles we also still needs to end each property with the semicolon. Then we also have the color which applies to the text which was white. Then if we go down and remove the inline styles which are already before to the head elements, as you move that. Then also rather than duplicating codes, these styles can apply to multiple elements by separating with a comma, so separate it with a comma. We can also add the footer inside of there too. Then of course we need to go down and remove these styles from the footer area. Right down at the bottom, let's remove this inline style section like that. Then give that a save, and then if we go over to the browser and then refresh, we can see that the styles that were added are exactly the same as before, but this time we have them in one section at the top in the head. We can also add some styling to the root HTML elements and also the body section too. Back in the style tags at the very top, once again with the HTML elements, let's add a background color. Add Hex code value of f7f7f7. I've added this HTML elements at the top as it is a root element. So give that a save then refresh, and this is small but subtle difference backgrounds. Now with the body, which I'm going to add just after the HTML. Let's add a background of white. It stands out with this background of HTML. The maximum width of the body section, I'm going to change this to be 1,000 pixels, and then we want to add margin zero and then auto. Margin is the value of spacing we add outside of the elements. The first value of zero represents no spacing on the top and bottom, and the second value is for the left and right. Send the value to auto, mean spacing will automatically be applied equally to both sides, effectively centering the body to the middle of the page. This is a common trick and we'll learn more about marging in a later video. Don't worry if it doesn't make sense at the moment. You can probably see this in action better if we save and then refresh. You can see straight away that the body is now slightly narrower. You can see this HTML color we added in the background, it's slightly different to the whites that were added to the body. The body section is this 1,000 pixels wide section, which goes from this left edge here to the right-hand side here. The body is now restricted to 1,000 pixels wide and centered in the middle because we added equal margin to the left and right hand side. Any extra space which is available after this 1,000 pixels width will be automatically applied to the left and also the right. This is because we've added an internal stylesheet to this index.html page. Internal stylesheets work great, but there are only useful for styling this one page which you've already to. For example, if we select the Contact link from the menu at the top, which is this third one here click on that, and the style in which we've added doesn't take effect on this page. This is often not the behavior we want because we want consistent styling for colors and also this header and footer section too. Again this is something which can be easily solved using our third and final type of stylesheets, which we'll cover next. 34. External stylesheets (Beginning CSS): We have so far covered adding styles in line and also using internal style sheets. The third and final type is a external style sheets. We see in the last video, that a limitation of using internal style sheets, is that they only apply to one web page. We don't want to repeat the header and footer styles for each page. You can add them to an external style sheets rather than only applying to our index page, which you see our presence. We can do this by creating a new file inside of our project folder. I'm going to click on this icon here to open up the sidebar. I'm going to create a new file by clicking on this icon here. I'm going to call this "styles.css" The names of [inaudible] , but it must have the ".css" extension and then hit "Enter". I'm just going to save this into the roots of our project folder. Along with this index and all the other HTML pages. We can also add a CSS folder if you have multiple stylesheet files, then we can go over to the index page and styles which you already have. So let's scroll down and everything from the header and footer, right up to the HTML. So cut this out. But I'm just going to leave this style tags in place and then paste these in the styles.css file that we just created, hit "save". If we go over to the browser and then hit "refresh", we see no styling is applied at all now. This is because we need to link this new CSS file to the HTML files we want it to apply to. So let's go ahead and do this now. Over in the index.html, we can remove the style tags, and in place I'm going to add the link elements. The link has no closing tag and we can add two attributes. The first is rel, and we add equal stylesheets. Rel equals stylesheet describes the relationship of the linked documents to the chromo. We're linking the stylesheets. Then the href attribute, which you should be familiar with from when we looked at links. This is the path to the CSS file which you just created. Misses in the same directory is the index page. So we can just add the name of styles.css. If we had in a CSS file, we would need to add CSS as a file path before the file. So let's just remove that and give us save. Now refreshing should introduce our styles back onto the page. We should still see If we go up to over pages such as contact, that none of these styles still apply. We can change this by linking to all of the pages using the same link here. So I'm just going to copy this and then add this to the contact.html. Is it going to be right at the top as well? Just after the title? Then the same for the product detail. Right at the very top below the title. Paste this in. Now if we go to [inaudible] over HTML pages in the browser. So we have our homepage. let's try to contact page and our styles still apply there. Does look a little smaller if we just zoomed in and with the browser there. So homepage is all working the contact us page, and we'll still have the styles for the header and the footer. Finally, let's go back to the whole page and select the product data. Our styles applied to this page too. This is how we can add external style sheets to our projects. Next we'll look at in Google fonts. 35. Fonts (Beginning CSS): Now we've covered how to apply style sheets in different ways. Now, let's move on to using fonts. Adding font types to our websites are really important to define the look and feel. If we take a look here, I'm over on the W3Schools website in a section called CSS fonts. If we take look here, there is two main font types. One called Serif and one called Sans-serif. The Sans-serif fonts on the left are much simpler and have straighter square edges. Serif fonts on the other hand have these extra detail on the edge which you can see highlighted in red just here. A little bit further down we can see there are two types of font families. On the left of the table we see we have Serif, we've Sans-serif and also Monospace. These are all examples of a generic font family. Each one of these generic groups also has many font families too. Here we see at the top we have Times New Roman and Georgia and these are both types of the Serif family. Then below we have Arial and Verdana which are font families with a type of Sans-serif. We generally want to add both the font family to our CSS along with a generic family such as Sans-serif which acts as a fallback if our first choice is not supported by the browser. To avoid fonts which are not commonly supported, we can use what is called web safe fonts. We're just going to go over to Google and do a quick search for these web safe fonts. Now, let's go onto the W3Schools' website just here. We have the Serif versions and scrolling further down we have the Sans-serif fonts too. This has a list of common font combinations which are wildly spotted. Most have a stack of three fonts like you can see here. We have our first choice as an example, we have Arial. Our second choice of Helvetica and this is used if the Arial is unsupported. Then at the end we have a generic font family such as Sans or Sans-serif. This is used if none of the others are available or supported. Similar font family names here with spaces between are surrounded in quotes, just like you can see here. This is recommended but not required. I'm going to go ahead and copy one of these fonts, stacks. Let's say Comic Sans. Let's copy this section of the website. Then let's head back to our styles.css file and we can add a font family to our project. Let's close the sidebar and open up the styles.css. We can add this to the body since all the HTML content is inside of our body text. Let's go down to the body and add our font family and then we could paste in our three values which we just copied before with a semicolon at the end. Save that and then back over to the project in the browser and then refresh and you can see all the font type has changed to be this Comic version. Another way to include fonts is to include a font library such as Google fonts. Let's do a search for Google fonts and what we need is fonts.google.com. Let's open this up. We can see right away that there is lots of different fonts to choose from. We can even filter down on the right-hand side by the different types such as Serif or Sans-serif. You can even look through and choose one of these fonts on the home screen if you prefer. I want to do a search and choose the one called Barlow. So under the search bar and this is the one I'm going to use on the left-hand side. If we want to add this we just click on the plus symbol here. Then we can go down to the bottom and expand the selected family. This is how we get the instructions on how to add this to our projects. First of all, at the top we have a link which is just like the link we used on our own style sheets, but this time it links to the style sheets Google has provided. Let's copy this link, go over to the project and in the index or HTML, we can add this just below our title. This link also needs to be added to all the HTML pages too, so let's add it to the product detail just below the title and also to the Contact Us page. Make sure we save them. The placement of this file is important too. We should have our own custom CSS file last. This ensures any changes you make as a custom style is loaded last and will override any of the defaults. We will look at this in more detail later on though, but back to Google fonts for now. Next we need to go down and copy the font family. So copy this line of the CSS and then back over to our styles.css and rather than a section which we added in before, we can paste in our new Barlow version and click that "Save" back over to the project and then refresh. Now, all fonts have taken effect on the page and we should see them being consistent through all our different pages. All these forms visibly look different, we can confirm if it's working by going to the developer tools. Right-click "Inspect" and then over the right-hand side under the body, we can see Barlow which you chosen. If we uncheck this, we can see a change with the font family on the screen as it goes back to the default. We can clearly see that these Google Fonts are now working. I will now see you in the next video, we'll take a look at classes and IDs. 36. Classes and id's (Beginning CSS): Classes and IDs is something which will use all the time when building websites. They are way to select or to hook a certain elements on our page so we can apply our CSS to it. We will also use them later in the course to, when working with JavaScript, let's first begin with ID. We can add an ID attribute to any element then target is element using CSS. If we go over to the contact.html page, we've already used IDs in this section, so taking a look for the name at the top and if you scroll across to the right, over here we have an ID name. We also had an ID of e-mail and message too. One important thing to note with IDs is that they must be unique. We should only use one ID name on each page. We then make this ID up in the CSS file with a hash prefix, to add some styling to this name will go over to the style.css, and then down here, using a hash prefix, we could target the name. Then we could do things such as adding a background color. Let's change the background to be red, and then give us save. Over to our web browser, and we need to go to the contact us page. Scrolling down and now we have a red background for this name section. It's important to know the IDs must not start with a number two. If we were to go over to the CSS and then add a number such as this, the text editor turns it to red to signal a problem. Let's us move down save. This is an ID which we use to select a single element on a page, but what if we wanted the same styles to apply to multiple areas, such as our products. For this case, we can use a class, adding the same class name to all of our productive tags will allow us to write some styles which will apply to all of them. If we go to the index.html, and then it will locate our first product, which is the controller. For the surrounding div, which is here just above the link, we can add a class attribute of product. Since we can use this more than once, let's copy this and add it to all six products. The second one, the third one, the fourth one and if you've got more than six add them at each and every one, and that's all six, so gives us save. We also have a product inside of the product detail page two. We can add this to our product inside of there. Scroll down to the main section, and again inside the opening div for the product. This will make sure that the same styles we apply in the CSS will apply to this product too. This time instead of the hash prefix and if we go to the CSS, we use a dot to indicate that we're targeting a class. Will then enter the name of products, and now we can add some styles inside these curly braces. This class, along with the ID which we used before and also these element names just above are all called selectors. They also small advanced likes these two, and we'll take a look at these later in the course. Let's go ahead and add a border to our productive of one pixel wide, a solid line, and the color of gray. Then we can set the width of each products to be 200 pixels wide, the semicolon and let's see how this is looking over in the index page. Gives our reload and go down to office products, we can see the border if we look down here and also this looks about 200 pixels wide. However, this image above is too big to fit inside this container. The other few ways which you can do this, we could set the overflow property to be hidden, just like that and save that and then reload. Now we can see the image is inside of the 200 pixels container. This is not ideal because this hides the rest of the image, which doesn't look too great. A better solution for this will be to set the maximum width property rather than the overflow, let us remove this overflow, and then below this we can target the image selector. Then use the max-width CSS property, answer this would be a 100 percent, give that save and then reload. This makes sure the image stretches no further than the surrounding container. That looks a lot better. This is more like what we want. However, the product is still stacked on top of each other, because we mentioned earlier, div elements of block level and begin on a new line. But, this is okay for now and next we'll move on to margin and padding. 37. Margin and padding (Beginning CSS): Margin and padding are both really important CSS properties to understand. They both are basically a way of creating space. If we look at this diagram here, imagine this was one of our products. We'll probably want it to appear something like this, with a little bit of space in around it, invalid though this is how it would appear by default. Placed in the top corner with no spacing. We see this in action in our current project where the product default is at top left of the available space. To fix this, we can apply margin to the outside of an element to create some spacing. Margin can be applied to be the same on each side, or you can add a different amount on each side if required. The same thing happens when we add elements inside of this productive. The element, such as this image or even any text, is placed in the top corner. Just like before, we may not want the image to be tied to the top corner. For this situation, we have what is called padding. Padding also adds spacing, but this time, inside of the elements. Margin is outside of the elements and padding is applied to the inside of the elements. The darker green border highlights what the padding actually does. It acts as a cushion, keeping things away from the sides. We can also set this equally on all sides or have different values on each side. As we see here, both margin and padding can both be set for each side individually by setting top, right, bottom, and left values. Thankfully, there are some shorthand versions too. Taking a look at these two examples on the left, we can set margin or padding with four values. These four values are clockwise, beginning at the top. So top, right, bottom and then left. Here we have both the top and bottom values set to ten pixels, then the left and right values, the same two are five pixels. For this case, we can also show this even further. As we see on the right-hand side. The first value is at top and bottom, and the second is to the left and right. We have already seen this in our project when we centered our website using margin zero auto. Zero tells the browsers to add no margin to the top and bottom of the body section. Then the additional space on the left and right can be divided up equally, leaving the body section centered on the page. Enough of this theory, let's give this a go inside of our project. Starting with the margin. If we go over to the styles.css and up to the product, we can add some margin to this product section of five pixels. Because we've only added one value, this will apply to all sides of the product. Let's see this with a reload. Now we can see five pixels of space and this has appeared around all sides of the product. Then go ahead and add some padding too, also a five pixels, and then refresh. Now we have a five pixel cushion on the inside of the div. Also, another important thing to note is a browser's often applied default values of margin and padding too. This means sometimes it may want to reset the values back to zero and unordered list is a common one, which is often applies to. Let's go over to the CSS, and we can reset these values. If we go just below the header and footer, let's tag at the UL. Then we could set the margin back to be zero. If we watch out for this when we refresh, we see everything move up as a default margin was removed. We can also do the same too to remove any default padding. Again, back over to the unordered list. Then we can reset the padding back to zero. If we keep a close eye out for me when we refresh, we see all the unordered lists are now moved over to the left hand side. This is something to bear in mind if you're wondering why something looks a little different than expected due to the browser adding some default values. Also, just to make things even more confusing, different browsers often have different values too. However, a few resources to help us with browser defaults. If we go over to Google and then do a search for CSS resets. The top link I want is Meyerweb. Click on this. This is a style sheets. If we scroll down, we can see the code just here. We can use this inside of our project to effectively remove any default styling provided by browsers. This thing gives us a blank canvas to start with. Alternatively, we can use another CSS file called Normalize. Again, let's do a Google search for CSS Normalize. Its top link is what I need. Click on this. Normalize work slightly differently to reset. Rather than remove any browser defaults, you provide styles to make our websites display more consistently across arranged browsers. You just decide now however, and something you may find useful to include this in our projects. All you need to do is to download the file and add it to our projects, just like we have done with our own custom style sheet. This is it now for margin and padding. Next we're going to dive into using different display types. 38. Block, inline and inline-block (Beginning CSS): We already briefly discussed the most elements falling to either being inline or block level elements. We see on the screen here some inline image elements. This has the effect of each element being on the same line if it will fit. There's one thing though to be aware of when using inline elements, we can add margin and padding to the left and right, like we see here, but we cannot add it to the top and bottom. This is because content added with inline elements are intended to flow across the page and then onto the next line. Adding any extra height would disrupt this flow. Also, we are enabled to set the width and height too. Block-level elements, on the other hand, begin on new line and take up the full available width, such as a div or text when using the p element. They also allow us to set any margin and padding too without any restrictions, unlike what we've just seen with inline elements. There is a way though to have this inline behavior while also being able to set the margin and padding and this is to set the element to be inline-block. Inline-block is commonly used in navigations. By default, list items or block-level elements. Someone will make a list that will stack on top of each other. We commonly see nav links as inline or inline-block, like we see here. Inline-block allows items to flow across the page, but it still gives us the flexibility to control the padding and margin values. We can't change any elements default display type by using the CSS display property to override it. Let's go and give this a go now. Over in the CSS starting with the li element. Just blow this unordered list inside of the li and then set the display type to be inline. Give that a save and back over to our project, refresh, and now our links appear inline across the page. This works as intended, the header list items are inline, put target in all of the li elements like this, also include this sidebar list items too. If you only want to target these header list items, we can be more specific. If we go to over to the CSS, rather than just targeting the li, we can add header, li, give that a save, and onto the browser and refresh. Now we can see that this only selects any list items which are inside the header, the sidebar ones are untouched. We can go even further with this header section too, by making the site title and also these nav links inline too. In fact, we can make these inline-block, so we can still control the height too. Setting these as inline-block will make sure this title appears on the left-hand side. Then over on the right-hand side, we'll get the navigation links, which is surrounded in the nav element, so back over to the CSS. We can target this site title. We have header, h1, then separated by comma. We can also target the nav element too. Set the display, this time to be inline-block, and then refresh. Now I have the navigation and the site title lining up across the header. Inline-block is also a good way of lining up the products too. Let's give this a go inside the product div here. Let's change the display type again to be inline-block, onto the browser, and inside the index page, let's scroll down. Now we have our products lining up across page 2. This inline-block property can even be used to have the sidebar, which is currently here, and also these products side-by-side. Remember the sidebar was in the aside elements and all these products were contained in the main section. Let's first go over to the CSS and we can set the width of the main and the aside section. I'm going to add this just underneath the header, h1, and nav section. Let's first begin with the main section and set the width to be 680 pixels. Then we can make sure the sidebar also fits across the row by setting the aside width to be 270 pixels. I've selected these two values here. When combined, these are both less than the 1,000 pixels body width, which we had earlier. Therefore, setting the aside and main to these sizes will make sure that they both fit across the page and also allow some margin and padding too. Let's see how this is looking, reload and we can now see the sidebar is a little bit wider. If we take a look at the width of this line here and also the products section has been restricted to this part here. Now let's go over and set the display type to be inline-block. First the main, display type of inline-block, and then also for the sidebar. Then hopefully, if we save this and now go over, we can now see this side-by-side since the aside and the main section are both inline-block. Things are starting to look better now, but the sidebar items down here are at the very bottom. To fix this when working with inline elements, or even inline-block, which acts a lot like inline, we have access to a CSS property called vertical align. If we go over to the sidebar, just under display, we can also set the vertical align and place the text at the top. Hopefully it should now push our text to the top of the sidebar, which it does. This vertical align property can be used to align inline items or items inside of table cells. We mentioned in the slides earlier that when using inline elements, we can't add margin and padding to the left and right, but we can send it to the top and bottom. This can be seen with our product links of More Info and Add To Cart. Let's go ahead and add some padding to see what happens. First, we need to give them a class over in the index page. I'm going to give this a class of button. First, let's go to the very top product and look for these two links. Then we can go ahead and add a class name of button, so class equals button. Then we need to add this to all of our product, so I'm going to copy this and add it to the second link too. Then go down to our second product and we can add it to all these to keep this styling consistent. That's our four products. The four products and the last one too. We can use this button class over in the style sheet. Down at the very bottom, number of classes use a dot, put in the name of a button, some padding of 10 pixels of the font, save that, and now onto the index page and refresh. We can see the padding has added some space in between the buttons, but there is no extra height. Remember we only added one value of 10 pixels. Usually this would apply to all four sides, but we only see this on the left and right. This is because as we already know, we can't effect the height with margin and padding on inline elements, but we can unblock and inline-block. Therefore, if we go over to the CSS and change the display type of the button to be inline-block, we can see what effect this has in the browser. As soon as we refresh, we now see some extra height added to each one of these buttons. Here we've looked at the display property. As you can see, it's really important when laying out our website. It may seem a little tricky to understand at first, but you can see with this example how effective it is, even by just adding a few lines of code into our CSS. 39. The box model (Beginning CSS): In this video, we're going to be looking at the CSS Box Model. The box model is one of those things where once you know it, it's really easy to understand. But if you're not aware of what it is, it can cause problems when trying to fit elements onto a page. As an example, if we go over to our CSS and we change our product width inside this product class here, say 210 pixels. If we save that and reload the browser, we now want to have to these products fit in our row. Now let's go back over to our CSS and investigate. If we look our product, we've set this to be 210 pixels wide. If we take a look above, we set this main section to be 608 pixels. Our three products down below come to 630 pixels in total. So far we are still within the 608 pixels wrapper for the main section, but then you may be correctly thinking we have some space around the products. We did add five pixels margin to all sides. These extra five pixels per side would then mean each product takes up 220 pixels each and a total of 660. Again, still within this 680 pixels, main section. Padding is inside of the elements, so you may think this is irrelevant. We did add five pixels of padding too just down here. Well, in fact, it's actually included too. Let's go over to the browser developer tools and see how this looks. All browsers have their own version of developer tools. If you're not using Chrome, you'll be able to access the developer tools by looking in the menu, but I would recommend using Chrome for this case. All we need to do is right-click and then go down to inspect. Once it pops up, we can click on the inspector icon in the top left-hand corner. Click on this arrow there and then we can hover over our products and then click the div with the class of products. This allows us to see the HTML on the left hand side. Here we can see we've highlighted our first div class of products and also the CSS which applies this product on the right-hand side. Our product div is here put the border, width, margin, padding, and the display type of inline block. If we scroll down to the bottom of the CSS section, we can see a box. This image down here represents the box model. In the very middle, we have our elements, which we now set to 210 pixels wide, as we see here. Then on top of this we have five pixels of padding around each side. We have a border value of one pixel too and then on the outside we have five pixels of margin. It's important to understand that these extra padding, border, and margin values added to these elements making it bigger overall. We set the width for the product to be 210 pixels wide. But in reality, each product takes up a width of 232 pixels once we add on all these extras. This is why in the browser, all three of our products won't fit on the same line. There is a way to change it though. We can use a CSS property of box-sizing. If we go back over to the products inside the CSS, we can add the box-sizing property and set this to be border-box. Put a column at the end. Setting this to border-box will make sure the width we declare is a total width. Although we have basis demo on the width, all these also applies when working with height too. That's one thing to bear in mind. Now with the box-sizing set to border-box, it will go to the browser and then reload and just shrink down the developer tools. We now see we have three products on each row. If we go back over to the developer tools, in fact we'll need to refresh first and then drag this back up. Still within our first product here, if we now scroll down to the very bottom to our box model, we can instantly see that the element in the center now has a value of a 198 for this element width. This has been reduced to accommodate the padding and also the border values too, to then equal 210 pixels. Then we still have this five pixel margin surrounding outside, just like we did originally. This is how the box model works. We even need to take into account any extra value such as border, padding, and margin too or we can apply the CSS property of border-box. 40. List styling (Beginning CSS): Looking at our project so far, there are a few issues relating to the list items we need to address. This list of on the left inside the sidebar. It still have the bullets on the left-hand side. We can also look at adding some more spacing to these items too. First let's get to work over in the CSS file. We can do things such as changing this bullet to be a circle using the list-style property. We apply this to our Li item. Let's scroll up to the unordered list and then we can try and get the Li. Then after we add the list style property, and then we can change the value to be circle. Give that a save, and then reload the browser, and now these black bullets on the left-hand side are now hollow circles. Currently the circle is outside the floor of the content and this is a default setting. If we make the browser a little bit wider, we can see this is the edge of the body section and the circles outside of this. This can be changed to be inside of the document by adding the inside value. Just after circle we can add inside, and then go to the browser. This now pushes over our list items to now include a circle inside the body. There is also the square option too. Let's change circle to be square. This will give a square on the left of each list item. There are also many more but a lot of them and not used often. You can of course, check these out with quick Google search If you're interested in find out more. We can even add our own icon or our own image in place of this square too by adding the image URL. So let's remove the square and just after the inside, we're going to add the URL, and then inside the bracket we can add the file path to our image. We can go for one of our existing images inside the images folder. Let's go for cables.jpeg, and let's see how this is looking. So it's looking a bit of a mess at the minute because the size of our image. Obviously this image is far too big but you can see how this can be used if it was a small icon instead, and this is repeated for each list item. The inside and outside rules still apply. So if we were to remove inside, and then replace this with outside, our images would now move outside the document floor. We can't really see without zooming back out. There we go, says our cables on the left of each list item. This is a behavior we had right at the start this video at the beginning with the bullets. All I want to do though for this project is to remove these markets completely. This can be done by adding the value of none, s rather than this image. We can also remove the outside and this simply changes to be none. Then we just have a standard set of list items on the left hand side. Then the item spacing between these links on the top and bottom, we can increase the line height. So within the list item we can go ahead and add the line height. The value is up to us, but I'm going to set mine to be thirty pixels, and see how floor this is looking. Good now increased the line height to be thirty pixels, which has added some more spacing in between each item. The last thing I want to do is to add some spacing to keep the text away from the edge of this container. This can easily be done with a little padding on the aside section. So over to the aside section of the CSS, and then go ahead and add some padding of 10 pixels, then refresh. Great, so the spacing has now been applied to the aside section. But in this padding it has also caused a shop by section to be now lower than these all items section on the right. To make this more even we just need to add the padding value to the main section too. Just above, we could do the same with the padding of 10 pixels, and let's see how this is looking. Great, so now the shop by, and all item section now line up better with some padding around the outside. Next, we'll move on to styling links and pseudo classes. 41. Styling links and psuedo classes (Beginning CSS): As we can already see in our project, by default, links don't look very good. They have an underline section, which you can see just here and also in the header section, you may need to zoom-in though. Underline is something which we want to remove. Also by default, the colors are not very attractive. Let's start by removing its underline from the links. We can do this if we go over to our CSS. Then just under the list items, let's add the A tag. To remove this, we can set the text decoration to be a value of non. Then up to the browser, this should now remove the default links from the header section and also from the titles too. This takes care of the underline, but we still need to change the text color of the links too, both of these product and also the header and footer section down at the bottom. We could do this by adding individual classes to each item and certainly individual CSS color properties. Or we can go ahead and do something a little simpler. First, I'm going to go over to the proto section and set the default text color with color property by setting an RGB value of 49 for the red, the green 46, and 46 for the blue too. Give a save and if we go to the browser and refresh, we now see a slightly lighter gray color. Back to the links. If we go over to the A section, rather than setting a value such as an RGB or hex color, I'm going to go ahead and set the color to be inherit and give us save. The inherit keyword specifies a property should inherit its value from the parent element. The product links will inherit this color for the body section and also the header and footer links will inherit the color value from the section here. Let's see how this looks over in the browser. Good. Now we have the header links, the white color. We can see the products have this darker gray color which matches the body and then down at the bottom we have the white links for the footer area too. We can see exactly what is going on if we go inside the div tools. Right-click and inspect. First let's select one of our products. Over on the right-hand side, and we start to scroll down. We can see we've inherited from his body section, and we inherited the font family and also this gray color which we added in. Click on the selected ones more and I go up to the header links. Here we can see we've inherited from the header this color of white. We can turn this on and off and see the effect that this has. Close down the div tools and now with these links taken care of, I want to now move on to what is called pseudo-classes. Pseudo-classes are like an extension to a CSS selector. For example, we can still select links with this A selector, which we've already have done here. Well, for example, only when a mouse hovers over them or if they've already been visited. Or we could select a list item with li, just like we've done here. But only select the third item in a list. There are quite a lot pseudo-classes available, but let's take a look at some of the most common, starting with hover. If we go down to our A element for our links and just below is a section we can add a new A element. Separated by a colon we can add the name of our pseudo-class. For this case I'm going to use hover. This will select all the A elements when the mouse hovers over them. We could do some things such as setting a color and add hex value of 0e69e9. Of course this can be any color you are choosing. Let's test this in the browser. Now for reloads and hover over any of our links, we now see this blue color which are valid. Also the supplies, the product too, and also the footer area too at the bottom. If we now go to our protocol inside of our index.html, let's scroll up to our first product, which is just here. Here we have two sets of p elements. One for the price and then one for the description straight after. We can use a pseudo-class first of type to select the first one in this group, which will be our price. Back over to the styles.css. Just like we did with the links, we can first select our elements add a colon, and then the name of our pseudo-class, which is first of type. For this one, we can also set the color and red will be fine. Go to the browser, refresh and now we can see the first set of p elements in each section has now been set to red. In our case, this is the price and this is repeated for all elements too. There is also last of type too. Let's change this to be the last of type. The color red is also fine and you can probably imagine that this will select the description once we refresh, because this is the last set of P tags within his group. This also works for other elements too, such as our list items. For example, we can change p to be li and this will select the last list item in each group. For example, the contact us down at the bottom, the same for the header, and also for each group in a sidebar too. Not only can we select the first or the last element, we can actually select any by using the nth type. If we wanted the third list item, we could use nth type which is N-T-H. Then we'll add the brackets just after this and if we wanted to target the third list item in the group, we add number 3, give that a save. Go to browser and now out third list item in each group is now selected. This number can be any of our choosing. I'm just going to delete this example here and save that and restore the project back to how it was. If we bring up the finished version of the textile, I'm just going to throw a second tab. If we take a look at our finished product sections here, down at the bottom we have the links of more info and also add to cart. Using these pseudo-selectors, this is how we have the buttons as different styles. We add a different CSS for the last of type. Let's do this over in our version. If we go back over to the CSS, this time at the bottom, we can also target the button, the colon, and then last of type. This time we'll apply it to the last button in each group. Let's change the background color to the blue type that we've seen before, which has a hex value of 0e69e9. Then finally, a color for the button of white. Then off to the browser. Now we have some nicer looking links at the bottom of each product. This is a first look at pseudo-classes and you can see how useful they are for targeting certain elements depending on their states. 42. Float and clear (Beginning CSS): Welcome back everybody. We're going to take a look at floats and clear in this video. Floats are a way to position our elements on a page. For example, we could float an image to the left, and then the rest of the content will wrap around in the rest of the available space. This is probably best seen to better understand exactly what it does. So on this homepage, if you click on a Game Controller, and then let's go over to the product detail. I want this image which is just here to appear on the left-hand side. We have all these product texts and the information over on the right-hand side of the image. We have already seen this can be achieved by using inline and inline-block display types, but we're going to concentrate on floats in this video. If we go over to the file, which is the productdetail.html, I'm going to add a new class to the product so we can select this in CSS. So just after the class of product, we can add a second class inside here, and let's say product detail, and then back over in the CSS, the following styles are applied specifically to this Product Detail page. So let's add a comment. So a CSS comment is a forward slash, a star, then our text. Let's say product detail page. I'm going to close this off with a star and a forward slash again. Then I'm going to make the product div a little wider so it fits the image and also the text side by side. Let's target this product hyphen detail class and then we can set the width to be 660 pixels. So let's save and see how this is looking. Reload. Okay, so the image is a little big for now, but now we have the container set to be 660 pixels. Now onto floating. We want the image to float to the left-hand side, or in fact, we can float it to either side. But in my case, I want it to be on the left-hand side, and then the text over on the right-hand side. So therefore, we can select the product detail image inside the CSS with product detail and then image. So to begin, let's set the maximum width of the image to be 50 percent, and that's 50 percent of the container. Then we can float this to be on the left. In fact, before we do that, we'll just leave that empty and refresh. Now, you can see by default, we have the image and then the text which is block-level on its own separate line. If we then go ahead and add a float and we float the image to left, let's see what effect this has. Okay, good. So we've now restricted this image to be 50 percent or half the width of the container, then floated the image to the left of all the rest of the content. This means the text now occupies the remaining space on the right-hand side. Now, I'm going to add some more text to this product to fully show the effect that the float has. If we go over to the Product Detail page, and then at the very bottom of the Add to Cart, that just opened the p tags to add some text. If you're using Visual Studio code like I am, we can simply type in lorem, and then hit "Tab", and then we're given some sample text which will go between these p tags. If not, you can simply write any content which you want. Order a Google search for Lorem Ipsum, which is these two words here, and then you'll be able to copy and paste some sample text. Click on "Save", reload, and we can see straight away that now there is more text available. We can see a lot better now the image is floating to the left of the rest of the content, and then the remaining text is wrapping around the rest of the space. We can also float this to the right instead of the left. So let's give this a go. Refresh. Then the same happens but on the other side. We can also set this to be "None". Now, we're back to where we started with no float taking place, and then the block-level text will appear on the next line. So floats are really useful for this kind of thing. But like most things, there are some drawbacks. Before a lot more recently other techniques were created, floats were and sometimes still are used to lay out a full webpage. You would often see the main content float is to the left and also a sidebar on the right. This does work, but when we use these floats, something weird can appear to happen. To show this more clearly, I'm going to set up a simple div just above the footer. We have an image and some text inside. So let's go to the product detail, and then down to the footer area. Just scrolling down to the bottom. So just between this main and footer, let's set up a simple div. First of all, with an image and the source. This can be any image [inaudible] use one from images folder. Now, let's say the controller.jpg. Then the text in the p tags of 'Hello'. So let's go over to the Product Detail page in the browser and then refresh, and there's our image and the text there on the bottom. So this looks as we would expect inside the browser. So let's go back over to the text editor and add a float to this image. So inline is fine. For this example, we'll set the float to be on the left. Now, let's see how this looks when we refresh. So we can see straight away that something strange has happened. The content below, which was a div for this footer area, now moves up alongside our image. But we want this to be right at the bottom of the page as it's a footer. If we go over to the Developer tools, right-click and "Inspect". Let's take a look and see what is happening. If we go ahead and click on the arrow and then select the parent div, and this is the div which we added for the image and the text of 'hello'. So let's go to the image, and this is the parent div here. We can see if we hover over this div appearing just here, we see some dimensions. So the div is 1,000 pixels wide by 19.2. So this shows the div as only having the same height as the text of this 'hello' text here inside of the container. It doesn't seem to take into account the height of the image. This is because floated items do not affect the height of the parent container. This means this footer area below basically ignores this image and is pushed up to the height of the 'hello' text. We can fix this by setting the overflow to be auto on the container. So let's go over to our div and we can set the "Style", and then add in the overflow of auto, back over and refresh, and scroll down. Now, our footer is back at the very bottom. If you go back into these DevTools and go down to the div, which we've seen before, give that a click. We can now see on the screen, let's scroll up, that the height of the div is now 425 pixels, which is also accounting for the height of this image too. Solution to this floating problem is called the clearfix. This overflow property will fix the problem in most browsers. You can also do a Google search for the micro clearfix and you'll find small CSS solutions to this problem. This will also become less of a problem to you when we start looking at the CSS Grid and Flexbox later in the course, rather than using only float for layout. So let's close this. Just to recap, when we use a floated element, just like this image, the height is not taken into account, which is why this footer area was pushed up below this text here, which wasn't floated. So that's something which is really key to understand when using floats. Also when working with floats too, there is also another CSS property to be aware of, and this is called clear. Again, this is probably best seen in practice to understand. I'm first going to modify this example to have a left and also a right floated element. So at present, we have the image which is floated to the left. Now, let's go ahead and open up the p tags and float this to the right. So Style, float to the right, semicolon at the end. Then let's add a third element which is not floated. So some simple texts will do for this. So let's say not floated and "Save" that, go to the browser and then refresh. So at the moment, we have the image which is floated to the left, the text on the right and a [inaudible] just to make this simpler. We'll add 'Floated' in there. So we have the floated image to the left. We have the floated text to the right. Then the not floated text in the center. This not floated text is alongside the image, and also on the same line as the floated text. Clear let's us specify this non floated element can be placed alongside these floated ones or not. If we go back over to the p tags and then also add a style property. We'll say, clear the left float, over to the browser and refresh. The not floated text now appears below. This is because we are basically saying this non floated element is not allowed to be placed next to this image which is floated to the left. We can also declare that we don't want it to be positioned next to the right floated element too. We can change this by clearing the right. Now it's alongside the floated text both on the next line. So this tells the browser not to place this alongside any right floated elements. This is why it appears below on its own separate line, or we can go ahead and clear both the left and the right together by setting this clear value to be both, and then refresh. Now, the text is below both the left and right floated elements. So now I'm going to go ahead and remove these extra div section as we don't need this inside the project and then "Save" that. We could also make sure the product detail image is floated to the left, and then our project is back to normal. Also, we can remove this extra Lorem Ipsum text. So let's go back up to the product and remove this long section of the text, and there we go. So this is how we can use float and clear. It can be quite a bit taking if you've not seen this before. But this is just one of the quirk you will come across when building websites. 43. The position property (Beginning CSS): We now know about how to use floats to float our elements to the left or to the right. Another important CSS property we can use to position our elements is the position property. This gives us various methods of placing or adjusting where we want an element to appear on the page. There are five position values we can use called; static, relative, absolute, fixed, and sticky. To demonstrate this, we need an element to work with. Any element in our HTML will be fine, so I'm going to go over to our product detail, and then select an element. In fact, let's go to the index where there's more products, and then let's selected elements such as this button at the very bottom. Let's go over here and add an ID to this button, and any name is fine. I'm going to call this position, and then save that. Then if we go to the CSS as usual, we can go down to the bottom and target this with the hash, and then the name which we will position. The default value for position is static. This simply means the elements will be placed where they would normally be in the flow, or the documents. This could be in the top left, like we've seen earlier, with blocked elements, or the next position in the row if it's an Inline element. Setting CSS properties such as top, bottom, right, or left have no effect in offsetting these elements. Let's give this a go. Let's add 10 pixels to the top, and also the index page. We can see this Add To Cart button has not moved at all, because it only takes up the position it would normally be in. If we did want this offsets to apply, we could change the position to be relative. That's our opposition of relative just above this. Now, we save and go back over to the browser and then refresh. Now, the button has been pushed down from the top by 10 pixels. Relative positioning places the elements where they would normally be, just like it was before. But also takes into account any top, bottom, right, or left values to offset the elements. You can also see that moving these elements will not affect the position of any of our surrounding elements. Next up we have absolutes, so change relative to be absolute. Then over to the browser, we'll see it jumps to our place. It's now up at the top of the webpage, absolute will make the last two values we've looked at. We'll take the elements out of the normal flow of the document. This means you will not be placed in the next available space. There is actually no space created for it. This is why it's in at the top above other elements. Currently, the top value of ten pixels is taken effect, if were to go over and add a new value, so let's add the left, also 10 pixels, refresh. Now, it's just placed ten pixels from the top and ten pixels from the left. This position has defaulted to be referenced in the very outside of the web page, or to the more precise, the HTML container elements. We can also change the elements it is referenced from, if we don't want to use the HTML elements. All we need to do is set the position of another parent elements to be relative. If we wanted the button to be referenced from this main container, for example, surrounding the products, we could go over to the main tank in the index page, and then we could add a CSS style property. Here, we could set the position to be relative, and see how this affect it with a refresh. Now, this is referenced 10 pixels from the top and left of the main relative container, or if we wanted it to be referenced from this first productive, we could do exactly the same here. Instead of administer domain, we could remove this and then add it to the div with the class of products, refresh. Now, this is reference to the top left corner of this first productive. I'm just going to remove this inline style and then save up. This absolute value gives us a lot of flexibility, but we do need to be careful too, as things can also move as the browser is stretched. This means we need to be really careful when using absolute. Now, let's move on to the fixed position. Rather than absolute, change this to be fixed. Now, we can oscillate the top left, that's five now. If we save and go over to the browser, we see nothing looks any different at first. When this button was referenced from the HTML, we see the element is also removed from the flow of the documents, just like it was with absolute. Also, we can see the top and left values still take effect. To see exactly what it does, we may need a bit more content on the page. I'm going to copy our six products. The first div of the class of products, and then scroll right down to the last one, which is just before the main tag here. Copy that, and then paste these in once more. We now have 12 products, and then refresh. Then if we go ahead and scroll down the page, the button stays in its fixed position in the top corner. You may often come across this for things such as an e-mail sign-up box, which you often see in the bottom corner. Finally, we also have the sticky option. We can change the position to be sticky, or any style.css. But this time we're going to target the aside, save, and then over to the browser and refresh. Now at first glance, our page looks back to normal. It seems to be nothing different than originally was. But if we go ahead and scroll down, rather than the sidebar being moved up with the rest of the products, it stays in place on the left of the screen. You will often see these four navigations or menus. They're always visible to the user. I'm going to remove this aside section, and then give a save. We can also remove the rest of these products which you added. I'm just going to undo that, just leaving the original six products. Good. This is how we use the position property to have better control of placing our elements on the screen. 44. Styling forms and inputs (Beginning CSS): I want to now move on to the Contact Us page to add some specific styling to this form. This is our current version here but if we go over to the Contact Us page on the finished version, we can see it looks a little bit different, but it manages the case of adding some spacing and alignment. You can, of course, go ahead and do this yourself if you feel confident doing so but if not, just follow along with me. Let's begin by going over to the style.css and now we can go ahead and make a comment. Inside here we can add the Contact Us and now we can go ahead and target our form. We can add some basic styles such as padding. So a padding ten pixels, which will of course appear inside of the form element. Then to add some spacing on the top and bottom of the form. We can add some margin. Ten pixels on the top and bottom, and zero on the left and right. We can also make this a little bit wider, so let's say 600 pixels. Give that a save and then refresh. Now we have some basic styling for our form. Things would also look a lot better if these first four inputs were also lined up. At the moment the four input areas are all pushed up to the edge of the text on the label in fact. To do this, I'm going to add a custom class, these first four div sections. Over to the Contact Us or contact.html. Let's take a look at the first four divs which begin with name. Let's add a class of inline. Then let's copy this and paste it for the email, also for the message and then we also have the subject, which is this section here, so to the opening div for the section two, make sure we save that and then we can target this over in the CSS, starting with setting the width of the text label, so.inline for the class, and then select the label. The width can be any value of our choosing but I'm going to go for 100 pixels. Give that a save. First of all, if we refresh, we can see there's no change. This is because as we've already mentioned, we can set the width for inline elements and by default, Label is inline. So I'm going to go over to the CSS and changes to be inline block so it can affect the width. Good. This is more like it. We now have a wider label which lines up these inputs on the right. But these inputs would also look better with being a little bit wider. We can tag certain inputs based on our input type. First of all, if we set the inputs and then open up the square brackets, we can then tag only the type of text and then separated by comma, we can also tag the inputs with the type of email too, and we'll open up the braces as we normally do. For these first two, let's add the padding of 10 pixels, and then we can make them a little bit wider, so let's go for 400 pixels, over to the browser. Good. This looks a little bit better but we can see this text area is still smaller than the other inputs. We have a couple of options here. We could either go back to the HTML code and add more columns, since we have the columns and rows attributes on the text area or we can override these in CSS by also targeting the text area. Now if we reload all inputs are now the same width. Just to wrap this up, let's add some margin also around each one of these div elements just to add some spacing to the top and bottom. We can do this by selecting the Form and then each div which follows. Let's set the margin to be 10 pixels on the top and bottom, and zero on the left and right. Remember this will tie up all the div elements which are a direct child of Form. So reload and now have some spacing on the top and bottom of each div section. Good. This form now looks a lot better with some more even spacing. Next is your chance to get some more practice by adding the final styles to this project. 45. Time to practice: final project styling (Beginning CSS): We've come a long way in the section and by now, hopefully you feeling a lot more confidence when using CSS. I would now like you to go ahead and add some final styles and finishing touches to this project. In particular, I would like you to add some more height to this header and also the footer area at the bottom. Also, if we align the header links, these ones here, and also the search box over to the right-hand side, just like if you visit the finished version here. Push everything over to the right-hand side. Also, if we set the text alignments on the products to the center, just like you see here. [inaudible] are left aligned. Finally, over in the product detail page, you would click on this "Game Controller." A little bit of styling too for this table at the bottom. We've not covered Styling Tables yet, but you can use all the same techniques you already know, such as adding margins and padding to the individual table elements. This is what I would like you to go ahead and do. Remember, there is no right or wrong way. Both I will be run through this in the next video to show you how I came to this finished version. 46. Solution: final project styling (Beginning CSS): I hope you all managed to complete the final project, styling challenge. Remember though there is no right or wrong way to do this. Boots are now going to run through the final styles for my version, starting with adding some more height to the "Header" and the "Footer." So let's go to the styles.css, and if we go up towards the top, we're already targeting the "Header" and "Footer" area. So all we need to do is to add small padding, to pad out the inside of the dibs. So 20 pixels on the top and bottom, and 10 pixels on the left and right "Refresh" and now we have small padding inside the "Header" and the "Footer" area at the bottom. Then we can make this site title at the top, take up 70 percent of the weight for the header, which will then push over the links on the search box to the right hand side. So let's go down to the header h1, so go to the header li, the header h1 here. Then let's go for the header h1 title, and then set the width to be 70 percent. Let's see how this is looking. Great, so this causes the links and the search box to move to the right. If you open up the developer tools and then highlight the section, we can see the effect of what we've just done. This now takes up 70 percent to the header, pushing everything else over to the right. So this technique works with these projects, but later we will look at more elegant solutions, when we begin looking at the flexbox and the grid. These kind of solutions will allow this layout to also work on different screen sizes too. Next, if we move on to setting the product text to be aligned in the center of the div. We already have a product div here. So let's add one more CSS property of text-align center. There we go. Now onto styling for the table, we can also target the table with the table elements, just like we're doing with previous elements. So let's go ahead and add a comment, so add "Table" inside of there. So let's start by selecting the "Table elements" and make it a little bit wider. So I'm going to go for 400 pixels, set the text line to be on the left of each cell. Then also add some margin to the top and bottom. So 20 pixels on the top and bottom and zero on the left and right. Let's see how this is looking, select the "Game controller." So now we've got some margin on the top and bottom. If we select the developer "Tools", then highlight our table cells, we can see by this blue section, all the text is aligned to the left. Let's close it down and then we can move on to this caption area at the top. Just to give it a little bit more styling and also some padding on the bottom to keep it away from the table. So we have the caption selector. So let's start by setting the font weight to be bold. We can set this to be italic with the font style. So let's set that to be italic, then we can add a border. So previously we've used borders around our products, and these by default apply to all four sides. We can add individual sides, so if we wanted a line just below this text here, we could add a border bottom. So instead of border, we can add border bottom. So a borderline of one pixel and solid. In fact, will make this dotted for this example, and then some padding of 10 pixels to give some spacing of the browser, "Refresh." There is our dotted line, and now the small spacing by adding 10 pixels of padding. So we're nearly there now with the table, all we want to do is to also add some padding to these cell values. Remember we've got the table heading, which is the th tags, and then the data has the td tags. So we can go ahead and select both these in the CSS. We have th, td and then padding 10 pixels, "Refresh" and just to finish this table off, I'm going to also add a hover state with a pseudo-class. So each time we hover over one of these rows, the background color will be highlighted. So let's select the "Table row" and then add the hover pseudo-class. So each time a hover over row, we can change the background color to be a x value of F5-F5-F5. "Reload" and it is so background color. So if we zoom in, we'll be able to see this slightly better. This is it now for all the styles which are added to this project. I hope you managed to add some of them yourself and make yours look even better than mine does. Next, we're going to go on to the final video in this section, were will look at the cascade and inheritance. 47. Specificity and the cascade (Beginning CSS): We're going to finish off this CSS section by looking at something which trip up a lot of new developers. This is the cascade and specificity. Let's begin with the cascade. The cascade ultimately determines which CSS styles are applied to an element. This is based on a number of factors which we'll look at in this video. For example, if you have multiple CSS selectors, all targeting a H1 elements, or if you have more than one style sheets, also with some rules for the H1 elements, which one will ultimately win? The answer is the most specific, rills will cascade down from the least or the most general rills through to the most specific rill for the elements. Probably the most general and simplest way to decide is the source order. If you have more than one selector pointing to the same elements, the last one in our source code will override over is before it. Lets go over to our CSS and see this in action. Let's target the H1 elements, which is the site title. Set the color to be any value such as red, and then add a second CSS property. Then set the text decoration to be underline. Then under this, we can also add a second H1 rill. Select any color or purple. Now we have two CSS selectors, both targeting the H1. Let's reload the browser and see which one takes effect. We can see we have this purple color and also the underline. This is because the code is red from top to bottom, meaning that this text decoration from here will still be used. Both these color value of red will then be overwritten with its value of purple, which appears after it. We can also see how this works over a need developer tools. If we right click and then inspect, and then if we select this header at the top of H1. Over on the right-hand side we can see the styles which apply. The selectors on the right are all applying to this H1. We will look at the order in which he's applying soon. But the thing to note here is this color red is being crossed out. Then the color purple is then taken effect. This source order also applies when we're running multiple style sheets. If we go over to our index.HTML, and then up to the top section. The bottom style sheet will always override any style sheets from above. This is the reason why we usually want to place our own custom style sheets down to the bottom, so we can add custom styles which will override any from above. The next thing to affect the cascade is specificity. This is how specific a selector is. If we go back over to our styles.CSS in our example here. Both selectors are H1, therefore they're equally specific. When this happens, as we've just seen, source order will take priority. Let's take a look at how we calculate how specific selectors are. Over on the left we have some examples of a selector. Then on the right-hand side we see how many points replied per selector. The first example on the first row, we see that H1 or a P, which is a standard element, has one points and that's one point per selector. Currently our H1 is only worth one point. On the second row, a class or an attribute, or even a pseudo-class, which we've already seen, counts for 10 points. On the third row, we see that an ID selector, such as the Product ID which you've already used is worth 100 points. Then we see at the bottom 1,000 points is for the inline styles. This is when we add the style attribute to HTML elements. We can see from this table here that the H1 just has a single point. This is what we are currently targeting in the CSS. On the second row we have dot container, H1. We still have our single-point with level one heading, which is here, we'll then also get 10 points for this class. This is more specific than H1 because we now have 11 points. Just below this we've seen before, that's an ID, has 100 points. Then just like we mentioned, a normal CSS selector, such as P, is a single point. This center was a 101 points, making it more valuable than the top two. We also mentioned that as pseudo-class such as hover, if we look at the first slide is worth 10 points. We have our 10 points here for the pseudo-class, and then we have two selectors, which is the LI and then the A, leaving a total value of 12. Back over to our CSS. Let's add some commands to the top of each of these and work out how many points we can only have. This is where if no hundreds, no tens, and no thousands. This is currently a single point, copy this and then paste this below. We have two equal elements, both worth single points. We can be more specific by adding a header. Let's add header H1 to the first selector. Now we have two elements. This now equals two points in total. Now this is more specific. Now we should have a color of red with the on time. Let's refresh, and there's our red header color. If we again make the match by adding a header to the second element, this is now also we have two points, and therefore the source order will then declare purple the winner. Refresh, and there we go. Let's try something else. If we go over to our index.HTML and then go down to the header. Let's add a class to this header, and header is fine. Then we can change the CSS. The first one for add the dot and make this a class. We still have the single elements selector here, which is worth one point. But this time we also have a class which is worth 10 points equaling 11. Now we have 11 points for the first one. We should expect the red color to win again. Save that, refresh, and we see that red wins. As we would expect, changing both to be a class with the dots will also make this 11 points and then refer back to the source order, meaning the color will be purple. It was about on ID. Let's go over to the index dot HTML rather than a class. We can change this to be an ID and then over to the style sheets. First of all, instead of a dot, we can add a harsh because this is an ID, and now we would have a total. This gives us a total of a 101, we get a 100 points for an ID and one for a single selector. Save that, refresh, and now red wins out. Hopefully this is starting to make sense now as we look at more examples. We've also seen in the slides that inline styles count for 1,000 points. This should be the most specific and win out. Let's go over to the H1, which we're currently working with as an inline style. This time we'll set the color property to be blue. This is now worth 1,000 points. This is worth a 101. Now the blue color should win out. Even though this is worth the most points and wins, there is one thing even more dominant, and this is the important declaration. Even though we have this inline style in the HTML, we can add these important declaration into the CSS to indicate that we want the style to win. After the reds, we can add a exclamation mark and then answer the important tag. Save that, and now we have the winner as reds. Even though the points value is even less, so the order wait, is this important declaration first, then second is how specific this selector i and then finally the source order. The only way to actually override this important declaration is to also add it again further down in the source order. Let's remove the style from here, and we can also remove this idea of header two, save that file. Then we can also go for two level one headings, and also remove the comments. Now these values above equal. If we now go ahead and add the important declaration to both the selectors, the source order should win. Over to the browser and refresh, and now we're back to the purple H1. It's also recommended to only use important as a last resort. We should use more specific selectors wherever possible. This is because it changes the way the cascade works. Debugging can often be more difficult, especially on larger projects. Now let's remove these two level one headings and then save that file, and restore our project back to normal. So these are the factors which determine which CSS rills finally make it into the browser for the user to see. It may seem quite complicated, but it really is just a case of understanding how much weight each selector carries. 48. What is responsive design? (Responsive Design): When building our project so far, we have not given much thought to how this would look on different screen sizes. Here we see an example where we have the main content area with a sidebar. This is common for viewing websites on desktops on larger screen devices. But what about mobile or small tablets? If we only have a small screen size, all these items side by side, like this may not make sense. If we have less space available, we may want these items to be the full width of the container or as you can see here on smaller sizes, you will often see the sections stacked on top of each other. Here we now only see the items stacked, but we also have the header, main and footer sections stuck too. This generally gives a mobile or tablet user a better experience as the content is optimized for the screen size. One way to do this is to create a website like we've already done for desktops. Then create a dedicated mobile and tablet version too. Another popular way is what is called responsive web design. As he sounds, responsive web design is an approach which allows a design to change or respond to not only the screen size but the orientation and device type too. This means we can use the same code, but with some adjustments based on the device it's been viewed on. We can see the issue if we return back to our project and then resize the browser. If we click on the corner of the browser and then drag it across, we see some responsiveness because we set the sidebar on the left and the main section here to be in-line block. If we make the browser even smaller we begin to see that the products start to get pushed off the edge of the viewport or the visible area. Google Chrome also has another tool for us to help. If we right click and go to inspect, in the top left hand corner next to this inspector which we've been using we also have the device toolbar. Give this a click. If you're not using Chrome, it's not a problem. You can either shrink the browser down to a smaller size like this or if your browser has a similar viewer, go ahead and open this up. This will give us a list of popular devices to preview our designs on or how things such as iPhones, iPods, and also some Android devices. If will look through some of the devices outside basically looks like a zoomed out version of the desktop site. Let's try a larger screen, such as a iPod. All we're doing here is just zooming out to fit all the content on the screen. We don't see any content adjusting or stuck in like we seen over in the slides. This is because we have not taken any steps yet to make the site responsive but this is something we'll start to do in the next video when we take a look at the viewport meta tag. 49. The viewport meta tag (Responsive Design): In the last video, we took a look at the Chrome Developer Tools and how we can preview our website on different size devices. Currently if you take a look at our website in a smaller smartphone size, we can see the it looks just like a normal desktop view. But zoomed out to fit all the content on the screen. When we covered the basic structure of a web page earlier in the course, we talked about using meta tags. Which we can add in the head section to add some additional information about our sites. In this video, we'll be looking at a new tag called the viewport meta tag. This is important for responsive design. If you don't have this viewport meta tag in place, as we've seen in the last video, and just now, smaller devices will render our page at the desktop size, but then scale to fit the screen. This is so users do not have to keep scrolling across the page to see all the content. This viewport tag gives us control of how we want our pages to appear. We added just like any of a metatag which we've used. Just under this first metatag, we can open up a new one, but this time give it a name equal viewport, and then close off. If we give that a Save and then go over to the browser and refresh, we see our preview doesn't look any different than it did before we added this tag. For any changes take effect, we need to set the width we want our content to be. Let's go over to our metatag and add the content attributes. Then we can set the width to be equal at say 300 pixels. Now if we save that and then reload. We can see by this white browser section from the left to this right part that this content is now been set to 300 pixels. We can also see that after this right-hand side, these products outside of this width. Because they got a fixed size and they can't stretch or shrink depending on the screen size. The browser will still need to zoom out to fit in all these products. Scientific size like this is generally discouraged because of the many variants in screen sizes. Therefore, we can go back over to the metatag and then change this. Rather than having a width equal a fixed size, we can set this to be equal to the device width and make sure that these all between the quotations. Doing this not only causes four different screen sizes, but also fall when a device is rotated to. Also if we do not want the browser to zoom out to see the rest of the products which will flown. We can set the initial scale to be equal to one. Still in between a quotation, you can add a comma and then set the initial scale to be equal to one, give that a Save. Reload the browser and if you don't see any changes you may need to close Developer Tools down and then go back in to this take effects. There we go. Now the content is cutoff the edge because the browser is no longer zooming out to display all contents. Also, as a side note, some phones will keep the same width when rotating and zoom out, rather than allowing the content to re-flow to the new size. Suddenly initial scale will also help this, is set zoom level when the page is first loaded. But we'll still allow the user to zoom if required. The main thing to remember is that we should always include this tag in our projects. This is because if we do not set the consent width the more of our browser, will assume that you have a desktop screen size somewhere around 980 pixels wide. Depending on the device and that you want the full page to display. We will zoom up making things look really small. Inclusive viewpoint metatag will also allow our media queries to work correctly to later in this section. We still have this problem of the product cell because the [inaudible] using pixel sizes. Which is a fixed size, meaning they are cut off the edge of the screen. But we'll begin to look at relative sizes in the next video, which will help with this. 50. Scalable units (Responsive Design): We discovered the problem of using fixed sizes in the previous video. Here we see the products have a fixed width in pixels, which will not fit onto this preview device, which is an iPhone eight. Pixels do have their place and there are lots of good use cases for them. But when working with responsive layouts, we want to use a different unit of measure, which is more flexible. I. e, we want the size to be able to stretch when there is more space or shrink on smaller screen devices. This is where relative or scalable units come into play. If we go over to our style dot css and just scroll up a little to our image, which you can see here. We've already taken a little look at these already. When we set this image width to be 50 percent. Here the image will shrink or stretch to 50 percent of the available space. Rather than being a fixed size like the products. We can also use percentage for over elements to starting with the body. Let's scroll up to the body section at the top of the page. Currently, we have the set to 1000 pixels. The value was up to you. Now if we set this to be 80 percent and give us save, we can now go to the browser and refresh. Let's close this down. Now if we make the browser even smaller, we can see that the content by these lines on the outside here is always 80 percent of the browser width. Also, there are relative sizes which can be based on the viewports. The viewport is a user's visible area of the screen. We can target the viewport width, with vw, all the viewport height with, vh. If we wanted 50 percent or half of the screen width, it will be 50 vw. Let's add this in the body. Save that, refresh. Now this takes up half the width of the user's viewport, or for 80 percent. We could change this back to 80 vw and then save that. Now we have the same effect as 80 percent. The same goes for the height too. If we wanted the header to be 50 percent of the available viewport height we do it just like this. The header and the footer, we can add the height to be 50 vh. Reload and now this header that takes up half the available height. I'm just going to remove this because it looks a little bit silly so remove that from the header section. Popular relative units include em and rem, especially for font sizing. To see this in action, I'm going to set the base font size in HTML at the very top to be 16 pixels. Font size, 16 pixels. This value of 16 pixels is often the browser default anyway. But we know for sure by setting here. Then I'm going to set the font size to be different for the main section. I'll scroll down to the main selector, and also at the font size into here. Let's say 12 pixels for this example. If we go over to the browser and refresh, we now see the products have a smaller font size of 12 pixels. Then all the rest is set to be 16 pixels. There is nothing here on the screen which is unexpected. We see the text size all looks the same except for the smaller font in his main section. Now let's change the font size for the products using the em units of measure. Let's go down to the products, and down the bottom. Let's set the font size this time to be one em. If we save and then go to the browser and refresh, we don't see any changes on the screen. This is because em relates to the parent font size, which is the main section. Basically one em is one times the size it would normally be, which keeps at 12 pixels. We can confirm this if we open up the developer tools. Then if we toggle the device toolbar back to the desktop size. Then if we select one of our div sections, so div with the class of products, and then lift this up a little bit. If we then open up this computed tab on the right-hand side and then scroll down. We can see here if we look for the font size. Look at the font size here, now it's set to be 12 pixels. Therefore, if we go to over to our css and change this to be two em's. This would be twice as big as it would normally be. Refresh, scroll down to the font size and now have a value of 24 pixels. We could keep going above two if we wanted to, but we're now going to take a look at rem. This is the em value. This is based on the parent container. Basically, setting this to two em's is twice the size of the 12 pixels container for the main section. Now let's take a look at rem. Rather than the size being based on the parents, like em, rem is based on the root font-size. Root font size is, is HTML value of 16 pixels in the top section. Back to our products, rather than set this to be one em. Just here we can set this to be one rem, which is R-E-M. Back over to the developer tools. We can see straight away that this text is the same size as the cyber. If we scroll down to the font size in the computed section, this font size is now 16 pixels rather than the 12 pixels we seen before. We can also scale to be larger or smaller. For example, if we wanted it to be three times the size of the root elements, we can set it to be three rem. Refresh and now the font size is really big, just like you can see here, and it's computed size is 48 pixels. Let's close this down. Just to recap, if we set the font size to be em, this is based on the element's parents. The element's parents for the product is the main section here. If we set this to be rem, just like we'd have seen, this is based on the root HTML element. In our case, 16 pixels. Great, I'm going to now remove the sections we just added in. We could remove the 16 pixel root elements down to the main section. We can remove the 12 pixels value here. Then finally, for the product we can also remove this line. Now we have a better idea of scalable or relative units. Now let's put this into practice with our projects. In the next video, we will apply the relative units to our projects, and this will allow our website's been more fluid as the screen size changes. 51. Fluid layout (Responsive Design): Now we know how to use relative units of measure. We can now apply them to our projects in places in the fixed pixel sizes. This is a big step towards our site being responsive, as it allows our content to be more fluid and fit the available screen space rather than being too small or cut-off like we've seen with our products earlier. We already have the body section at 80 percent, which you see at the top here, by setting it to be 80 percent of the available view port width. We can also do the same with the side bar and main sections too. There are a few ways which we can approach this. If we scroll down to the main and the size section, which you see here. Currently we have the main section at 608 pixels. The side bar are 270. We could go ahead and make up some new sizes, such as setting the main to be 70 percent and the side bar at 30 percent. Then this would take up the full width of the body. Or we can convert what we already have. You will often see a calculation. If we go ahead and add a comment in here, add this in. You will often see the conversion of target divided by context equals results. This is how we can convert a pixel size to a fluid size. Which means our sizes can then scale. This is how it works in practice. Let's add a new command just below. First of all, the target is the current width we have of 680. We then divide this by the context. The context is the 1000 pixels container which you had originally for the body. This works out to 0.68. The results of 0.68 is then multiplied by a 100 to get a percentage of 68 percent, this is how this looks. Since we had a nice round 1000 pixels body. The calculation is pretty simple, but it's still useful to know how to convert this for less rounded numbers. If we save that out to the browser and refresh, we don't see any difference because the size is just the same, but rather than a pixel value it's now a percentage. Back over to the CSS. We can also do the same with the assigned section. Again, because this is based on a thousand pixel container. This would then make this a nice round 27 percent. Change this, refresh, and as would expect, there isn't much of a difference. Content should now be more fluid. As we switch between 1,2 and 3 products. As we stretch the browser. Currently, you have three products alongside each other. If we make it a little smaller it goes down to two. Then even smaller it now goes on to its own row. If we make this smaller screen, just like that, we now see the products are now stacked on top of each other. This leads us on to this product section. We also want these individual products to resize too. Again, we could calculate these values exactly or we could select an appropriate size, such as 30 percent. Over to the product, rather than this fixed size of 210 pixels. Let's set this to be 30 percent, leaving three on each row. Let's refresh and see the difference. Okay, back to full size. We have our three products. Then we can see as we resize the browser, that these three products also get narrower and wider as the screen changes. If we make this really small and then scroll down to the products. These tools, however, cause some new problems. Like you can see here. Some elements can flow onto more lines, such as its text description. This is longer than this one here, meaning the height of the product is different to the rest. While we could go ahead and fix this by applying various CSS hacks, there is also a different approach we can use. This is to change layout for different sized devices using media queries. We'll look at how to apply these next. 52. Understanding media queries (Responsive Design): We made a big step towards creating a responsive site already, by adding relative sizes to achieve a fluid layout. Also, we discovered some of the drawbacks too, such as the contents squashing up and causing layout changes. This also works over way too, if content is stretched too far. On larger monitors, the content will become distorted and it won't look great. This is where media queries come into play. Media queries allow us to change layout based on the user's device size, orientation, or resolution, to name just a few. For example, we could have CSS rules, the screens on the 600 pixels wide. Then another set of CSS rules for anything over 600 pixels. Just like we see here. If we take a look at this slide, we could set the product to be the full width of the container for one screen size, and then under a certain screen size, we could also set the containers to be full width too and then stacked on top of each other. If we go back over to our style sheet and then go down to the very bottom. We can use media query with the @media rule. Just under the table row, we can add @media, then open up a set of brackets, and then the curly braces, just like we did with the over CSS values. Here we can also declare, but we want this media query to apply, such as a minimum width. So let's set the minimum width to be 600 pixels. Then inside these curly braces, we can go ahead and add CSS rules, just like we did before. So let's say a list item. Let's set the color to be red. Once a minimum width of the screen, which is 600 pixels and above, the list items will then change to red. Let's save that, and over to the browser. These are our list items here. If we go down to the smallest screen size, we have the normal dark color. Once we get over 600 pixels, they all changed red. There is some available browser plugins to show the width of the browser when we stretch it or in Chrome we can go to right-click and inspect. If we just drop this down here, once we start stretching the browser, we can see in the top right-hand corner, we have the view port size. So again, if we go down to below 600 pixels, the color goes back to normal, and then over 600 we have the red color inside the media query. There's also some different media types too which we can target. Let's close down this developer tools. For example, we can add the print type to only apply styles when printing. If we wanted the text to be green when printing for whatever reason, we would do it like this. So @media, just like we did before, then we say print, and then open up the braces. Let's target the body section and set the color of the fonts to be green. Save, and then over to the browser. To save this we need to go into the print view, press command or "Control P" to open up the print preview, and then scroll down. We can see in this print preview that all the text has been changed to green because we targeted prints. Instead of this we could change print to be screen. Just like that. This will only target screens such as phones, tablets, and computers. If we save and now refresh, close this down, refresh. Now the green body color only applies to the screens. We can test this by opening up the print preview once again, and then scroll down. Now we don't see any of the green colors because this is only applying to the screen. There are other types too. So let's close this down and do a quick Google search. CSS media queries. Then we're going to go to the W3 schools version. So the @media rule. If we scroll down to the media types, which is just here. Here we see all the different media types which we can target. We've already used print and screen already, but as you can see, there is a few more. The type can also be changed for speech or screen readers, which reads out the screen and this often use for visually impaired people or we can set all to always apply the same CSS style rules for all types of media. Scrolling further down to the media features. Here is list of features which will also trigger the media query. We've already looked at the minimum width and if we scroll down, we can see that just here. But as you can see here, there are lots more, such as the device resolution, the device heights, and many more. These can also be combined to make even more complex media queries using and. So back over to our CSS file. Let's remove this second media query. Then we can use and to combine two or more queries. Let's go for the maximum width, and let's say 700 pixels. Now the styles will only apply between the minimum width of 600 and the maximum width of 700 pixels. Anything else will go back to the default styles above. Back over to our Tech store, and then refresh, we're currently above 700 pixels, so we get the default color. Now if we scroll down and once we get to 700 pixels, which is just here, we see the color of red apply. Then if we go down even further to below 600 pixels, we are then back to the default colors. When this change of styling occurs using a media query, this is what is called a Breakpoints. You may frequently hear this word when dealing with responsive layouts. It may be tempting to design these breakpoints to occur, to suit popular phone or tablet sizes. However, because we need our design look good on all size devices, it's often a good idea to start with the browser really narrow and then apply our general CSS styling, then stretch the browser even wider and only apply a media query to change layouts when our design begins to look stretched or not quite right. Again, like we mentioned before, the in some browser plugins which we can search for to show the screen size, or we can go into the developer tools. Now we can begin to see the width of the screen when our design starts to look stretched. We can then take the sizes and apply these to all media query. Finally along with and, which we've used just here, it is also not and only which are known as logical operators to make even more complex media queries. So as well as the size here. If we only wanted this to apply to screens, we could say only screen. Then also target the sizes too. This just leaves us with the not keyword. Let's simplify this by cutting out the minimum and maximum widths. Let's take out this from before, and now making changes to be not screen. Changing its value to not, means the styles will apply to media queries except the screen. So save and then refresh. Now we're viewing this on the screen, the media query color of red does not apply. But if we go into the print preview, which of course is not screen, we now see this red color is applied. There we go, this is the first look at media queries. As we've seen on the W3 Schools website, there are lots of options and variants we can use, but a lot of them we may never have to use too often. I'm now going to delete this demo media query, which we just added in. But we'll come back to them in the next video to change layouts for different size devices. 53. Mobile first styling (Responsive Design): Now we know a little bit more about using media queries. Let's see how they can benefit our projects. I'm going to be doing this with a mobile first approach. This means designing for small screens first, then change in layout as more screen space becomes available. To do this, we need to shrink the browser down to a small screen size. Let's go to the browser and then shrink this down to a small mobile device. This is how a user would see our website criminally on a phone. It looks pretty bad, we need to go ahead and fix this. I'm going to change the styles we currently have in the styles.CSSfile to make this look better. Then we can add a media query to change things for larger devices. Let's begin up at the top with the header. As a general rule, if you are unsure of how to style for small screens, a good starting point is to often make the content for width and also centered. Let's go up to the header section here. We can shrink the browser down so they both fit on the screen. Let's start by targeting the body. At the bottom under the color we can add to the text-align and set this to be center, give a save. Now pushes all the content to the center of the page, then make the body the full width for the screen by commenting out is 80 vw and then refresh. Now this stretches to be the full width of the mobile device. Any styling rules which you want to remove, such as this maximum width. I'm just going to comment them out for now. This is because we want to reintroduce them later inside a media query for larger devices, then to make the search the full width too and on its own line. We can make it the width of 100 percent. Let's target the inputs under the header and footer. Just like we looked earlier, we can use the square brackets to talk of the input with a type of search. Then we can set the width to be 100 percent to make it the full width of the container. Refresh, and now it's on its own line too. We still would need header section, if we go ahead and widen this browser. We can see the site title and the links and no longer on the online. We can fix this in the header H1 section. Let's scroll down a little to the header H1, which is just here. Then let's comment this line out and change the width to be 100 percent. Save and then reload. Now moving down to this main and side section, if we take a look at what we currently have, is side section is currently set to be 27 percent of the width. This is why it looks so narrow, and the main section is said to be 68 percent of the width. This is why it doesn't look very good. All of these sizes inside the main and the aside section, are all relating to full desktop view. We can comment out all the section for now. In fact, we can remove these calculations before and then comments on the aside section, and also the same of the main section too, give that save. Looking at these back in later inside of a media query, then reload the browser. Now, our site looks instantly better, now down to our products. We want these products to span the full width of the screen so in line block is no longer needed. Let's go up to the product section, which is just here, and then comments out this inline block section, then refresh. This leaves now on the own separate line, because we've got a width of 30 percent at the moment, they still look really narrow. Let's comment out this section from before. We can then set the width to be 100 percent, and save that, reload. Our product is a 100 percent of the width of the screen. This is now looking a lot better and with just a few small changes to our CSS, it looks a lot more suited to smaller screens. Remember though the site is for learning purposes. If I was designing this site, I would generally built for the mobile view first, rather than altering the CSS, which you've already added. With this now completed, in the next video, we can begin to widen the browser and then add the CSS for larger screens. 54. Styling for medium devices (Responsive Design): We now have a good base to build on with our mobile styles. Now looking better. The next stage is to widen the browser and decide the width where our design starts to break or no longer look good. This of course, is a matter of opinion and personal preference. But if we go to the browser and open up the developer tools, we can then start to widen the browser. Let's go down to inspect, and then let's starts to stretch the browser to resize, which no longer starts look good on my devices. Let's say when we get to about 800 pixels and start to scroll down, we see our design starts look a little stretched. Now maybe a good idea to put a media query in place as 800 pixels, and then rather than one product being too stretched, we can maybe put two products side-by-side, scrolling up to the top. We can also see that the search is looking a little stretched too, so we can also fix this. Over to our styles.css, let's give us a bit more space and then go down to the bottom. Just like we've seen earlier, we can use the @media rule. Then inside of the brackets, we can set the minimum width to be 800 pixels. Let's begin with the inputs with the type of search, and this is one for the header. Then inside here, remember we set the value to be a 100% wide. We can now override this on the largest screens and set the width to be 40%. Let's save, and then reload. This now leaves enough space for the search and also the links to be inline. But at the moment that a little bit too close together. This can be fixed by adding a little margin on the left hand side of the inputs, on the left hand side. This can be 2em, which is two times the size it would normally be. Save and then reload, and there is a little bit of spacing now between the links and the search. This now makes the header look a bit better. Now down onto the products. Culminated product looks a little too stretched, so we may look better with two products on each row. Remember in the last video we commented out inside the product section the display type of inline block, which we had just here. Instead of going to cut this outer place, and then add inside the media query and then go down. Inside the media query, we need to again target the.product and then paste in our display type of inline block, and make sure all these styles, which we are adding still within the opening and closing tag for this media query. Then over to the browser and then refresh. So we don't see much of a difference because still we have our product set to be 100% wide. We can also override this in the media query by setting the width. I'm going to add two onto each row by setting a width of 50%. Refresh, and we see this still has the same problem of each product on a new line. We can change this by narrowing the product slightly to account for any margin or padding which is added. Let's start with 49%, and still not enough. Let's try 48%. Excellent. We now have two products on each row, and now if we shrink the browser down to under 800 pixels, we see we have the products at a 100% wide, and then over 800 pixels, it changes to be at two on each row. This is now looking good on smaller and medium-sized devices. In the next video we'll finish things off by adding back-in, the styles which we commented out earlier into a media query for desktop size screens. 55. Styling for large devices (Responsive Design): The final stage of adding styles for larger desktop size screens is pretty much already taken care of. We already have them in place. These are the ones we commented out earlier. We just need to decide what screen size we want these to take effect for. Then, we can move them to a separate media query. Again, if we open up the developer tools, right-click and inspect, then we can widen the browser to a size where we want to add the breakpoints. So let's keep going until this looks a little stretched. Currently, this takes effect at 800 pixels, which is just here, and then make it a little bit bigger. So maybe about 1000 pixels, somewhere around there, the content looks a little stretched. At a 1000 pixels, I'm going to add a new media query. Down on the very bottom, outside of this curly brace, we can again use the @media rule and then set the minimum width to be 1000 pixels. Let's begin by scrolling up to the main on the sides section. If you remember from earlier, we commented out both the sections. Let's now cut both the sections out of place. Then, we can go ahead and add this inside of our media query. Paste these inside of our second media query. Then uncomment out both of the sections. Give that a save, and then over to the browser, and then refresh. Let's try resizing. So over 1000 pixels, we see things are starting to look a little bit better, but there's still a few small changes to make, such as the header and also the text-alignment is still in the sensor. The text-alignment is an easy fix. We just need to set the body to be aligned to the left. Just above the main section, let's add the body. Then set the text line to be in the left and there we go. We've now pushed our links over to the left and also the header content too. This header section also, we change the site title from 70 percent wide to be 100 percent. We did this with the header h1. Let's go further up the page and there's a header h1. Now let's remove these comments, cut out place. Then, we can reapply this down in a media query. So back down to the bottom and let's go just after the body section. The header h1 was a selector. Then paste this in and take a look at this. Then if we resize the browser back to 1000 pixels, we can see the breakpoints straightaway where the layout will change because our media query. I think we can add one final media query to this project when the screen is a little wider. This is so we can go back to having our three products on each row. Let's go back to the developer tools, so we can see the browser width, and then, if we stretch the browser a little wider, so currently the breakpoint happens just here. Then keep going and let's say around 1200 pixels, we'll then make the products appear three on each row. Another media query right at the very bottom, we've @media. This time was at the minimum width to be 1200 pixels. Just like that. To kick things off in this larger media query, remember early on we set the maximum width to 80 percent of the viewport width. We then commented out this section for the mobile sizes. Let's cut the section of the body and then we can reapply it down at the bottom for the largest screens. Add this inside the 1200 pixels media query and then uncomment out this section. We need to add the body, of course, and then the curly braces, then refresh. This now sets the body to be 80 percent of the width for the viewport. Then we can make the products 30 percent wide each two to allow three to fit on each row. Let's target the top product and then set the width to be 30 percent, back over and reload. We pretty much now complete. It looks like one of the only differences from the original site is this search box just here, which was alongside this links on the right. Let's try and fix this now, all of in the media query. We can select the inputs with the type of search. Then let's try and make this a little bit narrower. Let's say 20 percent at this end and then reload. We can see that it still does not fit. We can try to reduce the width of the site title to give us more space. Let's try the header h1, which is in the 1000 pixels media query. Let's try changing this to be 60 percent and then refresh. Now, there's enough space for these all to fit on the screen. Let's just see what we've done here. If we stretch the browser to be full width, we now have our site looking pretty much as it was originally. As we shrink it down, we can see the content flows to be smaller. It'll have a breakpoint, make two products appear on each row. Then, as we get smaller, we have another breakpoint to make sure that the main and the sides action appear stacked on top of each other still having the two products side-by-side. Then even further to the mobile and small tablet view. We can see we have one product on each line. This is now looking a lot more optimized for smaller screens. Well done if this is all working for you. Remember, these breakpoint numbers are flexible and you will need to base them on whatever content you're working with. You've now made your first project now responsive. So we just have different screen devices. Next we're going to take a look at using responsive images. 56. Picture and srcset (Responsive Design): Another important consideration when designing for different sized devices, is the images which we use. If we provide a small image on a website, it may suit a small device, but when on larger screens, it will start to become stretched and not look very good, or if our image is too large, it will take longer to download on mobile devices, or places with slower Internet connections. The picture elements can provide a solution for this. This picture element acts as a container where we can add multiple image sources. A common use is to provide different image sizes to apply for different sized devices. We also need some different size images to use too. For this example, you can go ahead and use any image which you may already have. All you need to do is save it three times in three different sizes, such as 300, 600, and 1,000 pixels wide, or if you prefer, I provided some images for you to download. I have these images saved on the desktop as a 300, 600, and 1,000 pixels wide version. So to begin, I'm going to create a new project. Let's right-click and go to New Folder, and I'm going to call this the picture elements. So then let's open this up in a text editor. Again, I'll be using Visual Studio Code and then we can go ahead and drag our three images into there. Then let's open up the project folder inside of Visual Studio by dragging it over, then our index page. So let's close the welcome file, let's create a new file, called the index.html. To begin, we need our standard HTML structure, including the doc type, the head, and the body section. Of course, go ahead and type this all out, if you need some practice, or if you're using Visual Studio Code, you can type HTML, colon, 5 and hit the tab key, and then we get all the structure provided for us. Let's close the sidebar, and first let's add a title of picture elements, give that a save, and then we can open this up inside the browser. So go to the index.html, and I'm going to open mine in Google Chrome. Inside the body section we add the picture elements, just like any other elements, so, we add the picture opening and closing tags. Inside here we can add an image just like we would normally do, so, IMG and then close it off. Inside here I'm going to add to the image source and this is going to be the pizza-300.JPG. So this is the smallest image which I have saved. If you're using your own images with different names, of course, go ahead and add the name which you saved as. This image element is required as a fallback, for if the browser does not support the picture elements. Almost browsers do now have full support for this, so, give that a save and now we should see the 300 pixels wide image in the browser. We're now going to go ahead and add some more sources. This image element is also the fallback, if none of these source elements are matched. Let's take a look at how we can add these in now. Just above the image, we can add the source elements. This doesn't have a closing tag, but instead we add the source set attributes and set this equal to our image they want to use. So the next size image up was pizza 600.JPG, then we add the media attributes, just like we've seen in the last few videos, where we can add a condition, where will this image to appear. So just like we've seen in previous videos, inside the brackets, we can set the minimum width to be 600 pixels. This means that this 600 pixels wide image will display if the screen is wider than 600 pixels. If not, this defaults of fallback image will be used. Give that a save, reload, and now we see the 600 pixels wide image has now replaced the smaller one. We can also add more source elements too. Let's do the same for the 1,000 pixels image will have here. So just above this, add the source once more, again with the source sets and this time it pizza 1,000.JPG. Again, we also need to add the media attributes inside the bracket, you can set the minimum width. This time to be 1,000 pixels and make sure he goes looks like this with the brackets inside of the quotations like that. So just a recap, this pizza 300 is a fallback image. If none of these conditions are met once a browser gets over 600 pixels wide, we then load up the pizza 600. Once a browser gets even wider, up to 1,000 pixels and above, we then get this larger image loaded. We can prove this is working by going over to the browser and then reloading. We initially see the larger 1,000 pixels wide image, but we can see this is working if you go into the developer tools. Then if we go to the network. So let's begin by shrinking the browser to our smallest size, which is under 600 pixels. Then reload. To begin with, if we look down at the bottom, we can see that these two files being loaded, we have the index.html page, then we have the pizza-300. If we drag the browser now over 600 pixels, we now see a third file has been downloaded, and this is our pizza-600. The same for the larger image too, if we now drag this to be over 1,000 pixels, we now have the pizza-1,000 image loaded too. So this picture element is ideal for providing the right size image for each device. It's also worth noting that we've used the media attributes with the minimum width. We can also use any other valid media query type, which we already seen over in the CSS, such as orientation, max-width, min-height, and so on. So it's really flexible to use. 57. Time to practice (Responsive Design): We're now at the end of this responsive design section. Now will be a good time to get some more practice on your own. We have added media queries to change the layout of our homepage of these projects. Also, we use relative units such as em, and percentages to make our designs more fluid. As a challenge, I would like you to now go ahead and do the same for the contact us page, which you see here, and also from the homepage, if you go down to the product detail, by clicking on this first product. I would like you to also add some media queries, to make this section look a lot better. Remember, though there is no right or wrong way to do this. Just follow the same steps as we've taken during the section and apply the CSS, which you think works best. Good luck with this, and I'll see you in the next section. We have got some really good stuff lined up. We'll start to look at the flexbox and grid. 58. Thank you: Congratulations on reaching the end of this course. I hope you're now a lot more comfortable using HTML, CSS, and with responsive design. We started at the very beginning taking a look at what HTML is and also a little bit of history. Before moving on to setting up our very own project, we covered all the major elements such as added text, images, forms, and links, amongst others. Next up, was the styling using CSS, where you learned all about how to style, position, and layout our websites. Finally, we ensured our website looks great on all size devices by covering responsive design, by creating fluid layouts combined with media queries. Remember, though, this is just the first part of this course, so be sure to check out the next Part Two to gain a deeper knowledge and then everything you need to know to build full-stack applications. So bye for now and I will see you in the next part. 59. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gain some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare. 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.