Full Stack Web Development for Beginners- Part 1: HTML, CSS, Responsive Design | Chris Dixon | Skillshare

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

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
59 Lessons (5h 36m)
    • 1. Welcome to the course!

      2:07
    • 2. What will you need for this course (Getting Started)

      1:16
    • 3. Understanding HTML (Getting Started)

      6:29
    • 4. Setting up a web project (Beginning HTML)

      3:09
    • 5. Structuring a web page (Beginning HTML)

      5:56
    • 6. HTML Headings (Beginning HTML)

      6:52
    • 7. Div and span (Beginning HTML)

      5:23
    • 8. Adding paragraphs and text (Beginning HTML)

      3:31
    • 9. Text emphasis, importance and formatting (Beginning HTML)

      6:25
    • 10. HTML Lists (Beginning HTML)

      4:52
    • 11. Time to practice - Create the project lists (Beginning HTML)

      5:58
    • 12. Working with images (Beginning HTML)

      5:52
    • 13. Links (Beginning HTML)

      10:20
    • 14. Time to practice - Linking to pages (Beginning HTML)

      3:40
    • 15. What are semantic elements? (Beginning HTML)

      4:21
    • 16. Adding semantic elements into our project (Beginning HTML)

      5:25
    • 17. Time to practice - Adding more products (Beginning HTML)

      1:28
    • 18. Solution - Adding more products (Beginning HTML)

      5:11
    • 19. HTML Comments (Beginning HTML)

      3:52
    • 20. Entities and symbols (Beginning HTML)

      6:01
    • 21. Time to practice - Product detail page (Beginning HTML)

      3:22
    • 22. HTML Tables (Forms, Tables & iFrames)

      9:53
    • 23. HTML Forms (Forms, Tables & iFrames)

      7:55
    • 24. Labels, name and id (Forms, Tables & iFrames)

      5:01
    • 25. Checkboxes and radio buttons (Forms, Tables & iFrames)

      9:03
    • 26. Select input (Forms, Tables & iFrames)

      7:08
    • 27. Datalist & submit (Forms, Tables & iFrames)

      10:41
    • 28. Other useful form elements (Forms, Tables & iFrames)

      7:30
    • 29. IFrames (Forms, Tables & iFrames)

      6:25
    • 30. Adding Google maps (Forms, Tables & iFrames)

      6:26
    • 31. Understanding CSS (Beginning CSS)

      2:37
    • 32. Inline styles and adding color (Beginning CSS)

      6:25
    • 33. Internal stylesheets (Beginning CSS)

      5:12
    • 34. External stylesheets (Beginning CSS)

      4:08
    • 35. Fonts (Beginning CSS)

      6:53
    • 36. Classes and id's (Beginning CSS)

      5:35
    • 37. Margin and padding (Beginning CSS)

      6:26
    • 38. Block, inline and inline-block (Beginning CSS)

      9:17
    • 39. The box model (Beginning CSS)

      5:21
    • 40. List styling (Beginning CSS)

      5:01
    • 41. Styling links and psuedo classes (Beginning CSS)

      8:09
    • 42. Float and clear (Beginning CSS)

      12:36
    • 43. The position property (Beginning CSS)

      7:20
    • 44. Styling forms and inputs (Beginning CSS)

      5:12
    • 45. Time to practice: final project styling (Beginning CSS)

      1:19
    • 46. Solution: final project styling (Beginning CSS)

      6:10
    • 47. Specificity and the cascade (Beginning CSS)

      11:16
    • 48. What is responsive design? (Responsive Design)

      3:25
    • 49. The viewport meta tag (Responsive Design)

      4:42
    • 50. Scalable units (Responsive Design)

      7:47
    • 51. Fluid layout (Responsive Design)

      4:43
    • 52. Understanding media queries (Responsive Design)

      8:51
    • 53. Mobile first styling (Responsive Design)

      5:03
    • 54. Styling for medium devices (Responsive Design)

      4:26
    • 55. Styling for large devices (Responsive Design)

      6:47
    • 56. Picture and srcset (Responsive Design)

      7:23
    • 57. Time to practice (Responsive Design)

      1:01
    • 58. Thank you

      1:05
    • 59. Follow me on Skillshare!

      0:23
131 students are watching this class

About This Class

Welcome to Full Stack Web Development for Beginners!

This course is designed to teach beginners everything they need to know to build full stack websites and applications!

This is part one of this huge course, teaching you all about HTML, CSS and Responsive Web Design.

We begin with a little background into HTML, what it is and how it came about.

Then we take a deep dive into learning about how to use HTML, learning things such as:

  • Setting up a HTML project
  • HTML Structure
  • Headings
  • Div and span elements
  • Adding text and links
  • Formatting text
  • Lists
  • Images
  • Semantic elements
  • Comments, entities and symbols
  • Tables
  • Forms and inputs
  • Iframes
  • Integrating Google Maps

All of this while building a Tech Store project.

We then move onto styling with CSS, covering:

  • What is CSS
  • Inline, internal and external stylesheets
  • Fonts and colors
  • Classe's and id's
  • Margin and padding
  • Block, inline and inline-block display types
  • The CSS box model
  • Styling lists and links
  • Psuedo classes
  • Float and clear
  • The position property
  • Styling forms and inputs
  • Specificity and the cascade

We then take the project even further by learning all about responsive design to make your websites look great on all size devices.

You will learn about:

  • What responsive design is
  • The viewport meta tag
  • Scalable units 
  • Fluid layout
  • Media queries
  • Mobile first styling
  • Styling for all size devices
  • Picture element and srcset

This first part of the course covers all of the fundamentals you need to go on to building full stack websites.

In future parts we will cover lot's more including:

  • CSS Grid and Flexbox
  • Bootstrap 4
  • Javascript
  • The terminal
  • Node.js
  • Express
  • Working with API'S
  • Mongoose
  • Mongo DB
  • And so much more

So, enjoy this class and check out the rest of the parts as they become available!

Transcripts

1. Welcome to the course!: welcome to full stack Web development for beginners. This course it 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 back end interact with two. So who My My name is Chris and I will be your instructor wrote this course. I'm a Web developer on 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. We'll start at the beginning, teaching You Hate Jamel CSS on responsive Web design to give you the skills you need to build great looking functional websites, which look great on any side device is course contains over five hours of high quality training. We first begin with Hate Schimmel covering everything you need to know from setting off instruction on Web pages, elements and attributes that informs and inputs Lincoln's over where pages images and so much more. This is all learned in a hands on project based approach where you will build this website completely from scratch while applying all the techniques which you learn with an stylish using CSS. I'll make of everything you need to know Such R selectors plants Margin party in the Box model loads position in along with lots lots more, including some hunde, CSS tips and tricks along the way. Well, then round this off by making the site full of 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. So 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 of one you already use for this course. I'll be using visual studio code, which is ideal for JavaScript. Code in Onda also has a built in terminal, which we can use later in the cross. You can use any like, but here's some popular Tex Ritter options, such as atom rockets, Web Storm on, of course, visual studio code. If you already have one of these under Web browser, feel free to move on to the next video. If not, I would recommend you go over to code. Don't visual studio dot com on for 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 Would you prefer during the course will be using the developer tools inside of chrome put over browsers do have thes built into it may just look slightly different to what I'm doing. This is now All we need to get going next will take a little look into what hates Kimmel actually is 3. Understanding HTML (Getting Started): before jumping to adding aged amount to our Web pages. I just want to make sure we understand exactly what hmm is and what it does. I'm not going to go too deep and technical just yet, boots, understanding why we use it and why it came about in the first place. Well, really. Benefit was when we come to call him. First of all, what exactly is hate? Email? Hey, Triple stands for hypertext markup language. It may sound a little weird at first, but we'll look into what this all means soon. Hey, Tsemel is a standard market language to creating websites and applications. Hate Schimmel is everywhere on the Web. Most websites constructed using this and all problems is know how to read and displayed correctly. Like all programming languages on most things in life, things change on evolved we currently on version five html. Like all new versions, things get added or removed what a new version comes out, which is not that often it is not something to worry about everything we want to know what usually still applies. It's just often a case of improvements on new features. As technology moves on, we'll cover a lot of new hate surefire features. Juniors cause Hey Smell is used to form on a Web documents, so a Web browser knows how to correctly displayed. As we said before, it's a default markup language off the Web. So all Web browsers know how. Tunnel and display hate email documents correctly. The hate smell applies the four months he 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 on proposals What Hate Schimmel were introduced. Idea. Going Hates Tomorrow was to create a way for researchers to send them received documents teach of electronically. To understand why I hate Schumer was created. First, let's take a look at the problem. This is a image taken from the Wikipedia website, but imagine this was a text documents which needed to be sent to you and other departments . When sending this text. There is no way off describing the former Tim. The hate mail header on the top is larger and also bowled. There is a lying beneath it and then some stuff in the text. Also the beginning of the paragraph is bold to, and the tax also contains a series of links which you want to connect till the documents. This is a problem the researchers were facing to begin to solve this problem. One of the first steps his idea of marking up the text when workmen hand written manuscripts of documents typographer, Zo or editors would often write or mark up the text in the margins of the paper. This would include information such as a style on the size of the text for each section before being passed on. Four typeset in the idea of this Marco past clearly influenced away hate. Schimmel is designed looking out protection before Onda basic hate smile equivalent on the left from the top with market to hate him are heading by surrounding it in these hate one tanks. We look closer at all these times during the course, but this hate wanders crimes. The contents has been the most important on also being displayed as the largest heading. So now we have a way to describe what the text will look like to the document reader, such as a Web browser. The same for below. We have a hate your time to describe where wants a horizontal rule to appear. This is a Sunday long tag, and it does not need any text content to four months that blow this standard paragraphs of text and included with P tanks. We also have strong tykes to to tell the browser that this taxes have strong importance on also to display in bold. Of course, there are lots more these tax to cover. But this basic example she now give you a better understanding of how things work. Also want away for these links in blue here to be able to connect all linked to the documents this leaders onto hypertext. Hypertext is another one of those words, which makes your page email. This is basically the text on the screen, which are references to the text or documents. Hypertext documents are linked by what we call hyperlinks. We'll see this and most Web pages with visits every day. Often there is a top navigation with links or hyperlinks of the pages. These Web pages are often separate documents to like, you see here. So we now know that text on the Web pages usually surrounded all mark took with tanks, just like we looked at a few slides ago and also thes P tags on the bottom. These tags, complete with a content in the middle, is called on elements. Elements come before it off as the building blocks of a webpage and allow plenty practice right in these elements. June the course. The final thing we're going to look at in this video is attributes Attribute added two elements to provide some additional information. For example, who could set the text color? We could tell the browser, which paid so linked to it, clicked on. Oh, as you can see an example here, we can set a unique i d for the elements. If this is all new to you on a lot to take in, don't worry just yet. While history and background is good to know, the main thing to grasp is how at these tags to create elements on, you'll get lots more practice. As you progress through this course 4. Setting up a web project (Beginning HTML): during the next few sections will be learning about the basics off HTML on CSS. We'll also be applying these techniques to a project as a loner to show you how all these applying to a rial website. The project will be a text or displays and products on also house and different areas to chance Head is footers. On also sidebar. It will only have basic functionality, such as clicking on a nighter. Did Beautiful products political. It was a good chance to get some paged email on CSS practice when beginning any new Web project, but first need to create a project folder to stall all the files, folders, images and any other assets relating to the project to begin going to go over to the desktop and create a new folder, I right Click in and their new folder. I'm gonna call this the name of our project with cheese textile. You can, of course, create this folder anywhere on your computer. Would you prefer? And then I want to open a visual studio cold, which is the text editor I'm going to be using for the rest of these costs. So open up or you prefer text editor and then it leave a drug, fold it in, open the oak and you see the name in a sidebar on the left, or even go to file and an open and select it from there. Now we need to create our first where documents are on file. It can depending on your Texas. There may be a few ways to do this. In visual studio code, you can use commands and end on a mark toe. Open up a new file on Windows, maybe control placenta. But also, most text editors have an option again, have gone to the file, and then you find at the top there. So let's click on new file from there, and then I'm going to call this the index dot html. All hate mail pages need to have this dot html extension at the end, so the browser knows that this is a hate mail file. So his answer. We could name this file. Anything we want on will create multiple Haitian all files for this first project. But index is a common name for the websites default home page, so make sure this is inside of the text or project and then go over to the edit area on the right. It was typing some text. So China's Hello. Give that save. And then if we open up our project folder and then double click on the index dot html page , open this up inside the browser, and then we see our tax off. Hello? Inside the browser. Of course. We know from the last section that we need to surround this text with p tanks, but it to be valid. But for now, our project is all set up and ready for us to now move on to structure in our index page. 5. Structuring a web page (Beginning HTML): with the Project folder and now set up. We can now begin to add some structure to our index page before begin to hurt our HTML elements of content. Full page. The recent basic structure will first need to Aunt. I'm going to start by removing at this hello text from the last video. And the first thing we need to add at the very top off each page is a doctor declaration, which looks like this. It will open and close the angle brackets as an exclamation mark. And then type doc type well, hates to know Dr Declarations in a way to declare which version of hate smell were you using? This is a dark time for hate smell version five earlier versions were a lot longer and more complicated, but hey, Tchmil five makes things nice and simple for us. The word Doc type is not case sensitive, but I like to type mind in upper case Anyway, they were at the main all the root hate smell element tanks. So we just blow the doc type open and close the Unger brackets, typing hate Shimo and then, when he's closes off, so getting open, close, younger brackets. I have four words. Nosh on hate Shimo. With this being the root element, everything else must be added between these times. This talk type are the top is the only exception to this inside of the opening page mill Tug I'm Going toe aren't a attribute we briefly talk to Mo attributes in the last section attributes just a way for us to provide some additional information, which we need to add to the opening time for the HTML tag. We can provide the language attribute we have lung. This tells browsers and search engines the language of the Web page, which were created. I'll be greatly site in English, so the cold is equal to E n. Inside of these quotations, a quick Google search for hatred language codes will bring up a list of country codes if you wish to use a different language inside of this hate mail elements. But his two main elements we can now aunt, called the head and the body. So just underneath these open and tag can open up the brackets again and type in the head and close that, and you can see the visual studio cold automatically complete is for us. If your text editor doesn't just simply go ahead and type in the closing time with the forwards lush after this, we can aren't the body, but it's again as a opening on the closing type two. This head section at the very top contains data about the website, often called meta data. 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 hate Schimmel document, such as Thesis I title information for search engines. We can also linked over files to Well, look at this June this section, The first element I'm going to art to the head section is a matter of time. Meta tags basically provide information about the site, and it's the first self close and talk where you're seeing so far. This means it doesn't have a closing time. It doesn't need one because we don't have any content inside. We simply aren't a attribute to it. There are a lot of different meta tanks available to provide information about the site description he cites offer. We can also use it to ask keywords to, but this will know All I'm going to do is on a character set used for the site with the chance at a tribute. So let's create our might attack and e t. A close off. I never conard our character set attributes on this is going to be equal to utf hyphen. Eight. Certainly, current and Corden may sound complicated, but we simply declare in which characters we're using on this webpage, the characters being the numbers letters on also any character symbols, which you'll find on your keyboard, such as the at symbol on also positive and negative symbols or even brackets. Utf eight is a html five standard who was almost all of the characters available in the world. Next up, just love this meta topic and going to art the title. So at the titles, opening and closing tax, I'm going to call my knee textile We need on this between the two tanks. So I'm dying just like that. If we give that save and then open up the browser with the index dot html opened, give the refresh on, you can see we've got text or at the top of the browser just there. Well, after this head section for all this project and also later on in this course. So this now leaves us with these 40 section. The body is where we are all the content which will appear on the page. If we go ahead and type hello again. Just blow the body like this. Give that save and then real old browser will see the text now appear again on the page. Great. Our hate smile structure is now in place and we can now move on to looking at some more HMR elements which are due 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 that in the basic structure for index page. Although this is all essential for a website project, I'm sure you were all keen to get some real content displaying inside the browser when we're not a hate smell. In the recent slides, we took a brief look at HTML headings. Heavens, he used to structure the pages content from most to least important on a number Hate one fruit to hate. Six. We use hate form for the most important or the main headings. Hes to be slightly less important on Civil 81 is also the largest down to hate six, being the smallest by default, heading to use my search engines, such as Google, to determine which content is most important in this example, the large old hate mail text at the top here is marked of using a having time off hatred. It's 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. So if we head over to you, Google and then one, so for Wikipedia eight, you know, and let the toppling just er using the Google chrome developer tools which will use quite a lot through this cause. Welcome. Prove this is a level warm heading inside a chrome. If we right 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'll look at this in more detail from the course. For now, though, if you go over to the inspector, which is this arrow in the corner, Click on this. And then if you hover over the hate Shimo on it like that, we can see inside the cold here. The blue line, which is highlighted, is a hate one. Don't worry about everything. What you going on here just yet? The main thing to know is we've selected the hate mail text. You can see that this is just a hate one element with a few attributes inside, such as the i d. The class on also the language which we've seen before. So it's not really anything we haven't seen so far. Now let's go and give this a go ourselves so if we closed, developed the tools and hand back over to the text editor. We already know the content we want to show in. The browser is placed between the body tanks. So working on our headings inside of there, such a move of protection before on starts create some headings. First hate warn on its Anson text inside here simply off anymore. And then the next line that's on our hates to with the text off heading to next line hatred page full six of heading for on two months ago. 85 on the smaller ones. So heading five and then finally, the last one is heading at six. Okay, So typed all in. Give that save and then go over to the browser. Make sure that the index start hates to male pages open from before, you know, go back to the file and then open up Gives a reload. Well, we can clearly see the difference between the heading sizes, but we shouldn't be tempted to use and just decided to text or make from the boulder. Remember, headings are for importance. If you go back over to our finished website which looked at before we have a few cases well , could use hellions. We have the main site title off text or on the top, which could be a good use case for hate one. We also have the text all shocked by on all items. The top of the section. These two are Level two headings, then the sidebar heading off category and also price the good use case for a tree. Let's put this into practice by applying these two all project. Let's go back over to our indexed occupational page on Inside the Body. Let's move. Hates to write food to hate six even his hate war between the body section. So this hate one like we're seeing inside the finished version, we can add a text, all of textile say That's really the browser and there is our site title. So back over to the finished version. Moving down. The sidebar. Had the hates to text or shot by and then 100 contribute tiles off category on price. So let's undies and no so just below the text or title that's on a double Page two. In between these times, we can add a text or shot by staying with the signed by a section below Let's look at art or to level three headings. So the 1st 1 was the text off category. So it comes off at the text of category and then, just below that, there was also a hey tree, which is for the price. I just had colon after a shot by their. So it gives us a want to see how this sidebar is now looking okay, Good. Let's just aren't the currency between the rockets just after Le So according to symbol inside of that. And now this is the sidebar text in place. Fine looking at all items, which was for the different section on the right inside here. This was also a hate to having just, like, shot by, So it's just below. So it's not a hates do on attacks off lightens. What about the colon? Say that And now with cities on the page two, so things don't look too great at the moment. But remember, hates Gemmell is for the content only. Things will begin to look a lot better when we die into CSS for Stylin on also laying out of these texts. Next, we'll take a look at how to section or groups together related content using the attacks 7. Div and span (Beginning HTML): we know half some content on the screen inside the browser, both at the moment. It's not really organized. We just added some content basically from the top to the bottom, while Canton, which styling our position of these headings until we reach the CSS section, we can begin to group. I work related contact together. If we take a look again at the finish site looking here at the home page, even somebody completely new to build on websites could probably figure out which sections should probably the group. Together, we have a header at the very top, which was the one area on the left. Inside, we have the cyber. We also have a product area. Explain all products from All Star. We have individual product information such as this section here on down on the bottom. We also have a foot area grouping. Content together is fairly straightforward. We just need to surround the content in a container called a div. It did is an element and has a co opening and closing tag on the show. For a division back over in the index or hate your file, what can add some developments to our website that's closes down and go back over to Elaine next page. So the text on the top, which was the header, is going to be inside the head of the group. So let's create away do talk. So opening tag on the closing back to keep is organizing, going to onto them on the online. And then I'm going to cut hate one from before of places inside all these dudes section. So now I have a headache section. If we give that, say, even than reload the browser, we don't see any changes. This is because it did is just a general container. However, the are really important on used a lot. We'll see the importance more later, or we get into the easiest section because, for example, we could group together all of the head of content and apply a certain phone color on a background color to the full section. Or we could set one Dave to be positioned on the left of Page andan over here on the right . Inside, let's go back over and out to more containers, so the first container is going to be for the sidebar, which has these three headings just here so below the diff That's on a second. If and then we can put all three of these headings and paste them inside of here. And then finally, our third and final deal just below these two close off and then we can paste in the hates to off all items on as we progress through. The section will also add more content to this main section. So it was the product. But for now we just have the heading off all items, give that save and then reload and still will see. No change is what this is fine for now, there's also another element used to as a container on this is called the Span element. To show the difference between Dev and Spawn first, that's a margin. We wanted to apply some special Stylin to the dollar sign symbol, which would have just here, but not the price. We could surround this dollar symbol with a gift time. Let's do that. No, they put out this section we'll pay, saying, if we say that and then reload the browser, we'll see. Something strange happens. Dave pushes the dollar sign symbol onto a new line. This is because a Dave is called a block level elements elements of mostly grooved into Eva being a block level or on in line elements. Block level omens occupy the full available width of the browser on Also, it starts on a new line. Also, all the headings which reviews so far just above and below are also block level two. This is why we see them that's stacked on top of each other, each starting on in your mind in line elements. However, as it may sound, do not start on the whole nine. His face is available that will line up across the page. A Spine Elements, which we mentioned before as an alternative container to Dave, is in line elements. This means we can go back over and changed if do these fun. So change the opening and closing time. Give that save, and if we refresh the browser would know. See the brackets and dollar symbol in line with the price text. This is how we could use Div and spawn elements to contain or target part of all cold. Don't 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 a website. Technically, we already have text in the form of headings, but we are also provided with the P element for standard text. He 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. The arson blocks attacks. We can add such see description. Would you just here the price on this line here and also the title of each product? So let's head over to the sex editor on Begin to a Visa. So let's closes down, back over to the indexed or hate your page. First of once, great new Dave, just below all items. That's quite a new deer just here. And make sure this is still nested inside of this main def. Again, this is going to be the container for all of this product section, so we'll have the title at the top, and then this. Dave is going to the container for an individual product. So inside of this dude will have a product image, a title, the description and so on first we can under text for the title price and description. So open up the three times inside of the text off game controller, which is the first product the same just below weaken aren't in a price. Let's say something. 95 then the third line with a description. So what I awesome gained control of Well, like books say that head of the browser, then refresh, and there's a whole free lines of text at the very bottom. One of the things you will notice here is that each P elements he's gonna tell mine just like we looked at in the last video. This means that it's a block level elements, which is ideal because it wants them to be stocked like we see here. If the text inside of the P Times get a little long, we can also add a line break to push remaining text onto the new line. We do this with a break element, so if the description was a little bit long, we could go over and ask BR break elements break times do not need a closing time because it is no content I did inside. It's simply put in place where we want a new line to appear. Say no. Then refresh the browser. And now the words for Xbox appear on the own separate line. I think this product title to off game controller will be better inside a heading tug, such as a hate for Let's make these small change. So I came Controller Complete p. But I didn't hate for so for the closing tired save and then refresh. So the title doesn't look a lot different, but there is a small soul difference at it, and you can see it's a little bit bolder, too. So this is a normal foreign text. Next, we'll look at how we can add it's and basic style in to our text. 9. Text emphasis, importance and formatting (Beginning HTML): most of the styling with art to websites is doing with CSS. However, there are some small hatred elements available tours, which also provide its and text for mine, too. Only to do is to surround some tugs around the text, which you want to apply to. First, Let's take a look at making it text bold with be tanks, so back over to our product on it will go down to the description. If you wanted to make the word also another darker or the boulder, we can wrap this your first. Let's cut that out. We can create the be tax, so we conceive of an opening and closing time to inside here. Complacent, a word. Awesome. Again give that save and then reload the browser. And now we have the word awesome as a darker boulder color. Although the B tank is valid to use, it is recommended that we use the strong tags instead. So not replace be with the word strong save and then fresh. The text is look the same, but the strong tug defines important text. Andi is usually also displayed in bowl, too. We can also make the text italic, too, which as you may guess, is the italics. So that's replace strong with I reload, and then we have some metallic text in place. Just like the B element, though, that I element has been around for a long time, and it's now recommended to use E. M element in place where possible as it's more semantic or descriptive. So, instead of I, which might often see well now usually use em, which is short for embassies. Say that and fresh and is used to give extra emphasis to the text, whereas the I element is more for visual atomic effect rather than highlight in any extra importance, we also have the ability to delete text with the delete element to this represents text, which has been removed from the document by adding a line through it. So let's take a look at how this is used. Delete em and then I didn't d. E. O, which is short for delete. Say that. Let's take a look at this. Another word awesome has a deleted line from it. We can also do the opposite to by adding text to the documents. So if we wanted to remove the word awesome just like we've done here. Replace lead Fantastic. We would use the insert element to insert a word. So just after the Leeds, let's include the I N s, which is short for insert on between his weaken on the word fantastic spacer Give that save . So there's the deleted word of awesome on the underlined inserted word or fantastic. Next, I want to look at using the mark element. These elements represents highlighted text. This is a similar effect. What we see when we search for a word on a website. So, for example, let's go over to the Mozilla website. So this is developer don't Msilva Dog go to any section which, like inside a crow, I'm going to select command and f so open the search and then research for a word such as developers just like that, we can see it's highlighted in yellow on the page. At this effect, we can surround the text with mark elements, so let's find this instead of delete. Let's at mark inside of there. Also get rid of these inserted text. We don't need that remark back over to the index page and refresh, and there's the yellow highlight in which we've seen before. The final elements of one to cover is small. This does pretty much what it sounds like. It makes a fond one size smaller. We can simply replace Marc with the word small just like we have fought over. Examples on this works perfectly fine. All we can combine them both by nested. So surrounding the small section here, we can answer the mark elements to So just before it that's that mark on my text editor automatically completists. But instead we want on this after very end. So from the inside of the word awesome surrounding this we have small I'm in surrounding small. We have mark on the very outside so nothing is pretty simple to do. We just need to be careful to arrange a types correctly from the inside out words. All these elements we have looked at two can also be nested. In fact, we've already nested all these examples so far inside of these p elements on the very outer on also all these p elements and nested within, at least if so, give that same let's see these both combined. I have a small attacks on also the yellow highlight in in the background, too. I'm not going to move these from the project as we don't need them. So let's move small, unmarked before Onda. Also after the text say that and then refresh and now back to normal. So although we don't need these elements for this particular project, it is important to know they're there if you ever need them. 10. HTML Lists (Beginning HTML): we know. Let's take a look at H M A. Lists lists as a cell phone used to display a list of items. Looking at this finish version off, the project here will make you sort lists in multiple areas. We have them in a sidebar over the left inside to display at least off categories. Also for the price ranges below two. Also, we use them for the menu inside of the head and foot. Sir, these links of its own the men. You may not look like a lift at first glance, but most menus were created with a list and then style changed to be in loan by using CSS. So let's take a look how we can use them by creating our head a list with the free links of home shop and contractors back over to our text editor. First, we set what type of list we want to use. I'm going to begin with a one order list which uses the UL tanks, so just talk about the talk inside his first give. I'm going straight on another list. Love the text or so openly ul tanks, which is gained opening and closing tykes one orderliness to basically a bulleted list So we see a black bullet or circle to the left of each item by default. This bullet come to changed or removed to inside of the CSS. I will see how to do this later on. Then we had our list items between l I tanks. That's animal first list item, which is home. The interest will always weaken. Also are a secondly stater on this won't use for the shop and then the food wall at the very bottom is for contractors. So there's all free list items and make sure all three items and nested inside of these you , well, tanks. Once that's done, we can give that save and that test is in the browser and there's our free ling's at the very top. You can also see the free bullets on the left hand side, which you mentioned before we can also create a numbered list to, by changing you will to be ol. So let's change you to be Oh, you that save reload on by default have the numbers worn Teoh and free on someone for each least item. We're not limited to just numbers old when using lists we can a type attribute to change things around inside the opening a well time we can aren't a type and said this equal to various characters. So first of all the changes to a lower case a say that refresh will now have lower case letters off a B and C If this was open case in case any these three letters with no open case too, we can also apply Roman numerals with a lower case. I you that save real old. I don't have the lower case Roman numerals on the left inside. We can also do the same if you wanted these Roman numerals to get off the case, but this time with a capital, right, let's see how this is looking now that all of the case we also have the number warmer too. But this is the default, as we see in right at the start, off on to mom free so we don't need to. Anderson list can also be nested to. For example, if you wanted to add some list items set under our shop link, we can add a new U l or or the list inside just like this. So just below I was shop, remove the type first and then just below our shop will create and new own order list. Exactly like we just before so opening and closing tags, So least items. So let's say nested item a little more so the next is right into. If I save it, refresh and then you can see our new nested items nasty Just below this shop link. This is home looking. At least two are websites. Next will on 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 at the rest of the lists for our project as the guys, they all need to be on order lists. We already have the head items in place, off home shop and contractors. So we just need to change a spark Teoh on all the list and make sure we just have these free links which we see here rather than the Nestea born, which were added in the last video. Then we have two more lists in the sidebar to the place under the headings we already have . So the section here is one list and then below we have a list of the price is too. Finally, don't the very bottom will have a footer menu, too. This is just the same as the one I did for the header. So give us a go. It's a great way to learn by repeating and get in some practice. If you still don't feel confident enough to give us a go by yourself, that's completely fine. Just follow along with me. Well, now do it together. Okay, so let's closes on. Go back o to visual studio first makes you our head. A menu is back to on on order list. Does that change? We also have this another list nested in the middle. So remove that. Then we have the list that we seem before underneath the cut of your header. First, I'm going to go ahead and a horizontal line. We can do this with a HR elements. This is also a self closing time, meaning no closing time is needed. So just taking a look at the finished project on small Look to the side, Bob. The horizontal line is just this pharmacy here which separates the header from the list items on the same for the price to. So let's take a look on. Go over to the category which is hey, tree type here. American aunts, our hatred, our then just blow this. We can start to construct our own or the list inside here I will first least item which we have is all items. And this could be any food which you prefer. It doesn't really matter. Remember, this is all just a practice. So cameras, then laptops After not talks with our phones, accessibility is on the final one was folded because I save Oh to the browser on Refresh. So I was. Top menu is now back as it should be on the category. We have our line, which spreads a full week for the page for now. But that's nothing to worry about. And then below this, we have our list items in a on order list. Then we have the second sidebar list for the price Rangers, which you're going to aren't just below this price had in here Tobacco, Is it attacks every time. Well, at these in just below the site tree, the price makes you wonder. This on order list again is still between this Dave section. Remember, this is a full container for our sidebar. So all the content of the sign bond needs to go between opening and closing tanks. So let's start again. We don't want horizontal rule, and then I will know the list inside of here. Our list items, you can have the price. Let's say warn to night the second price range was 10 to 29 and then keep going 30 2 59 That's a 60 to 99 and then the very bottom one can be 100 plus and then save reloads. And then we have a second on the list below the price. That's looking Okay. Now, finally we have the foot of menu. So first we need to create a footer Deep section of these inside. So remember, we've got the deep section of floor header we call the tip section here for I was Saipa and then down at the bottom. We've got this day of section for all main content which includes the product. So just after the section on also still between the body times we're going to add and you div on this is for the 40 section only to do is just aren't a new on order list with the newest items. This is exactly the same as a head of section. So we have home, we have shop and then finally we have contractors with that in place gives I save and that see this in the browser would refresh on. We now see this down at the very bottom. I will have these list in place next. Want to move on to take a look at the images 12. Working with images (Beginning HTML): We have 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 fee to use, or you kind of calls Donald your own if you prefer. I have these images folder on the desktop, which I'm going to like into the Project folder. It simply contains six images, which we're going to be using for the project. So what I'm going to do is open up the textile project and they're inside of there and want to drag in this images folder. So always have now is the index dot html alongside the Images folder. First, we need to go over to the index page and at the image elements. This has no content inside of it, so it doesn't have a close in time. So let's do this inside about product of which is just CIA. So let's go inside there just above the title of game controller, and that's art the image. Without the closing time inside here, we can earn a source attribute to specify the location off the image. The are a few ways which you can do this. First, I'm going to look at including images from the Web sites. So if we go over to the Web browser, go to Google. It was third for Wikimedia Commons. That's goes. It is toppling here. The Wikimedia Commons website usually has a picture of the day. Of course, yours will look a little different from this on. All we need to do if we go to right, click on Go to copy image address and then go over to our source and paste is in between the quotations just like that and then give that save and then for gold back over to our index page in the browser hit Refresh will now have an image inside of this product section , so alone this works perfectly fine. Link into images on over websites is generally not recommended. First of all, the image location is not under your control, so on the website, owner could move or remove it. But also this method, which is known as hot Linkin, should only be done if or how permission to do so from the website owner. A better way to do this is the use. I will own images So therefore, we're in control off the location. We've already added these images toe a project folder inside of this images folder to So instead, if we go back over to the sauce and then remove the one what you just did inside here we specify a final puff. So inside the index page now. So we need to go inside off the images folder. So what do you mean? Jews forward slash now inside of the images folder with Specify the name off the image which wants out. So because we're creating a product for a game controller that's under image, which is controller with the thought J pic extension. So this needs to be exactly the same as the name inside here. Why is it won't work. The Doctor J pick Other End is a final type on Mrs important, too. If you're using your own images with different final type, such as thought TNG, you will need to change us to reflect this. Also, watch out for J pic files to which is saved as J P E g. Just like that. So it makes you got saved and then go to the browser on there's image of the Xbox controller. The image elements also has some over attributes we can use to. An important attribute is old, so back over, and at the very end we could also have the old tug. And inside of here were concerts, um, text. This is important because we can define a text alternative to use if the image could not 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, we could type in the text off game control picture just as an example on. Also, we can set the width and height off the image to so outside of the quotations that's at the height. So the heights. Let's set this to free 100 also with equal to free hundreds, too. So if we only sent one of these one use, such as a week or the height, the image will scale proportionally, keeping the size and width ratio the same as it currently is. It involves the week on the height can make the image look a little out of proportion, so save on, be fresh. So now we see it's 300 pixels by 300 pixels, which makes the image look a little squashed. So instead of just want to leave the which in place remove the height and then if we refresh, the image now stays in proportion. So this is how we can add images. And next up we'll look at how czart hyperlinks to our project. 13. Links (Beginning HTML): early in the course when we're looking at HTML on the problems which your souls we mentioned that hypertext is a text displayed on a computer which links to over text or documents. These things are called hyperlinks. We already have all menu items just like the example here, but we need a way to change into the links to other pages. To do this, we have a a element which sounds the Anka. We can use it to link to the pages different locations on the same page, or even of the websites, too. Let's get to work by Addie links to our menu items. So let's go over to the index page and it's got with your header. But it's all on these feelings here. First meets ants there, a element around what we want to link. So we know case you want to link the text here, so I'm just going to cut this out and then open or a elements which is opening and closing in the middle. Here, we can paste in our home link, want small, and this means that the tax is going to be clickable. Then where are the location would want to link to by adding the hatred attribute, which turns the hyperlink reference. So inside the opening a tag on a TAITRA if just h r E f and then inside his hate draft, we can add a link. So listening to a run website, let's say the Mozilla website, which we visited earlier. So Hey, http, go on. It's like fluff, developer, Don't miss Ella, Don't honk and save them. Oh, it's the Broncos, huh? Refresh and then back up to stop the page. We can see instantly that there's a change with the HomeLink. If you hover all right, we're now we'll see a different cursor. It's also a different color with the Underline, which shows it's a link. So let's click on this and see what happens. And then we're Lincoln to this developer. Don't miss Ella or website. That's a working fine. So we hit the backboard, were taken back to over index page. This is an external link because we're linking away from our own website. We can also create an internal link to link to another page in our project to So let's create some or where pages to link to so back over to the project. Let's go over to our text all so make sure we're not clicking on the Images folder. So the click off this and then click on new file. So make sure this new file is outside images folder on alongside this index dot html. Then let's say this contact with the dot html extension, just like the index page. And then let's just add some simple text off, Contact this page. Say that and then let's do one more to you. File Analysis. Colisee Product Hi for detail game with adult HTML Extension. I just had some text or product detail page. This will be the page which, willing to, or we'll click on one of the individual products to get some more information about that individual product. So now we have our new pages. Let's go back over to the indexed operational on. Instead of this external link, we're going to move this so we're concentrating Internal Link The link to these two new pages which you created So the 1st 1 want to do is link to the index, the hates milk age. So because this is the holding, we want Mr Link back to this index page. So could I save. Then click on this. We can see nothing changes because it's still thinking to these index page. And, of course, we're still taken this index page now the shop. If you put out the shop text weaken as the link with a tag paste this in the middle. We don't have a shop page just yet, so we can't leave an empty hatred attribute. This means will still be styled the same as the rest of the links, but it just won't link anywhere on the click on it. Then the Contact Us Page, which is one of the pages which would have created it's Open up the A tags pace contractors inside the middle, the hatred attributes on this time it's contact dot html. So say no. So, just like when working with images, this file part is relative. This means it's relative to the current location, so work only in the index occupational page. The contact on product detail page is alongside this page in the fold structure, so therefore we can just aren't the name of the file. If it has one of these files inside of a folder, would also need to aren't the folder name just before like this, but we don't sort of use as contact vocational. So does that saving that to try to felt so refresh. We could try the shop, and we don't have a link to anywhere. So this just staying on the current page, we'll have a link for the contact page once you click on this. What inspector this contact is Paige. I'm looking. Also see about the talk we're currently in. The contacts delegation will, if you click on the backboard in the browser, were then taken back to this index page. Another type of link we can use is a link to a different part on this same page. To do this, we need to add some more temperate content to this page so you can click on a link and scroll down to the party. Want I'm going to copy the image of Pace it down on the bottom to creating more content. So let's look for the images. We tried it before, so this lets copied it. I'm going to do is keep copying and pasting Mason. Just give us a more content on the page on gives us safe. And then if we refresh the browser, we know how some content we can scroll down to. So 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 I D. So that's at an I D to one of these products. So at the very stars and ideas Euston attribute like we've seen before, let's call this A I D off link. We can then scroll down to the section when you click on the home run. So let's replace the hatred. Fear off index html. Where is the value? All the hashtag on the neck. The harsh is used when working with I DS on. We'll see this a lot more later on course, or working with CSS and JavaScript. So now give that save and refresh. And now, if click on home, you see the page now skips down to the first product on here, which is a lonely I did the I D to. Also, you can link to all the pages when a user clicks on these images. First, let's reinstate the website. How it waas. So let's remove is linked here back to index dot html. It was scrolled down that remove this idea attributes, and then we can also remove all the extra images which were added in it was the extra hides . So remove all these extra images. Leave in just the 1st 1 which were hard originally. Now get to work on Lincoln when the user clicks on this image. For this, we can link the product images to this new product detail the occasional file, which were created only to do. It's around this image with the A tux, so that's open up the eight times. Then inside, we paste in the content, such as image, which you want to link, then inside. Open inside. That's the familiar hatred attributes, which is going to link to product detail. Don't hate Schimmel. It's a product hyphen detail. I don't hate you out and give that save. We can also remove this week a tribute to well size this later using CSS. So remove that and give it safe. No, it's the browser. Weaken, reload! And now we can see when we hover over the image occurs. The changes to show This is a link and click on this and then were taken to the product details page, which you created here. So this is how we can add links to a website. The final thing I want to do before finishing off its copy. These three links from the head of section I remember these are the same links which it down in the footer. So this copy these and then we can replace these released items in the footer with the ones which links gives us safe refresh. Want me to go back to the index dot html on down to the bomb? We can see the footer section now has free links to This is how we can use links inside our webpages. They are a really useful and important part of building websites. As you can see on will use him a lot as you progress through this course. 14. Time to practice - Linking to pages (Beginning HTML): Now is the time to get small practice on your own if you feel comfortable doing so this time with links, if it goes to the browser, will have this product image Lincoln to the product detail page, which we created. What would like it to do in this video is also turned the product title off game controller into a link to which linked to the same product detail page. Also, if you look at the finished version, I like it to go ahead and create the more info on our car links. Remember, we only have this one product so far, so just out in these under the one product is fine. So all you need to do is are these two links using the elements which were discovered with some text in between the opening and closing tug? Although these text look like buttons, it's all just a case, all of adding some CSS, which will do later. So all I'm expecting is some simple text, which is a link when clicked on. The more in for Putin can also linked to the same product detail page, just like we did for the image on also the title, However, you can leave an empty hatred attribute for his scar. Boone as we don't have any pages telling to at the moment. So go ahead and give this a go or it was still a little unsure. I will go ahead and do this now, so let's go back over to visual studio code and start with the product title. So let's locate our product, which is just CIA under all items. So let's begin with the product title of game controller. Let's copy or quit this whole place. I never gonna add a blanket, tugs. Then in between opening closing tag, complacent a title off game controller, then go ahead and ours Patriots attributes inside the opening tag, and this is going to link to the product hyphen detail the national page. Next up, we can add the two wings for more info on data cart. I'm going to do this just after the description here. Let's make him space on Doug's the 1st 8 oak, and this is going to be with the text off more info. This is also linking to the same product detail page, so we can also answer the hatred attributes so I predict I haven't detail, so I hate you know. Then I was second link just below on. This is full at cards. We can also add that the hatred attribute the like I mentioned before. This is just going to be a empty string. For now. I don't have any hate mail pages telling, too. So give that save off the browser. First, let's click on the game controller, and it takes us to the product detail page scrolling down. We have more info, which also takes us to the same predicted Tell Paige on after CART, which still keeps us on the index dot html page. So that's it now for the challenge. Hulk, You managed it, Andi. I will see you next, where we'll take a look at semantic elements. 15. What are semantic elements? (Beginning HTML): and I want to take a quick step buck from out into this website and take a moment to look at what we call semantic elements. Semantic elements are simply elements which clearly described their contents no only tell a browser over developers. Also looking at your code to this is a diagram of a typical website. The body contains all of the contents which we see on the screen. As we already know Here we season typical sections of website. Each section has a development. It did is a section or division used to group together content. We've already illness in our project by group in the header section The sidebar on each bullet This is how things have being doing in were designed for quite a long time and still are give elements perfectly fine to use in fact, will use them. Juniors cause quite a lot. Often you will see an idea attributes on it TT dues. This allows you to select a certain div. We want to apply styling or layout to using CSS. He will also add some more developments this time nested inside of existing ones again. This is fine on very common. We've already done this in the project by having a surrounding parent, DIV. For all of the main content, the nest initative inside each product inside this made if, since hey, Schimmel Version five will 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 the semantic or more descriptive elements off the div on all these new elements we see here still have an opening and closing time just around the content to we have a head elements which we can add to our project in place off the div surround the site title on navigation menu Resource domain, 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 for sidebars and is usually repeated across the website. Therefore, it is best to be kept separate from the main content. We also have a signed by 4 to 2 so we can make use of all these new elements here inside Able project. This is the example we're seeing earlier. But this time, with the newer, more semantic elements, you can see an article element, which is ideal be uses, such as a low post or wichit, which are self contained content. There's also a section element below two. This, as it sounds, defines a section off our Web documents. This is the group together related content. We also now have the number of elements which you can use to surround our navigation links . We don't need to add these toe all navigation areas of oversight. It's only intended to be used for major blocks off, not links. No, that we've placed it inside of the header. For this example, however, this is not required. It comes placed inside or outside of the header or even nested inside of areas to. We can also take things even further by reusing elements such as the header or footer to define the head of foot to section off the Arctic over example, or even place sections inside of elements such as the sidebar. Remember, all this is just one common way to use these that you're not forced upon owes to using any particular way, and they useful also differ dependent on style website which you're building now we know what is available to us. We can now move on and at these two old project 16. Adding semantic elements into our project (Beginning HTML): well, we've just learned about semantic Hey, Schimmel elements. We can now apply these to all project. Other needs will not change the appearance inside the browser when instead, it will add. It's a meaningful structure to our webpage, which is great for the browser and over developers to in the index. So hateful page that's begin from the very top. My other knee had elements in place off this surrounding do so. Opening tag adjustable the textile hate one come replaced. We have had a then at the bottom of this section just below the on either list. We've been in close off his head of Section two, now a Web browser or developer, and clearly see that this is the heavy section rather than just a generic give container. If you would say that and then reload, we don't see any difference inside the browser. The same goes for the sidebar but can replace it development with the aside elements which we've seen before so scrolling down below the header, a little shop by and we could replace this Dave, we have a side and then down the bottom blow the in order this for the prices changes to We have a signed inside of this aside section. We also have two sections nested inside one for this cutting realist, which is this section just here and then one section for the prices. I'm going to separate these by surrounding each. We have a section elements so just below shot by that's on a section elements. And then let's copy the level free heading of category. In fact, with quick results on way down to the bottom off the order list. So command or control X to put this out and ample places inside of the section. So this is all first section here for the categories and then below this let's are the second section which is going to be for the prices. So again we can copy the level free, heading right down to the end off the prices on on the list, Commander Control X to cut this out now paces inside of the section. So now we have our two sections inside of the sidebar. Give that save check. Everything's OK in the browser, we see no difference. So that looks all fine. So these sections would have created typically contain a heading. We already have these Hey tree hellions in place here so we could get for this moving down outside of a sidebar. So let's go below. Disclosing the side section the products will be the main section run from the last video. We also have the main elements which we can't. This will replace this surrounding developments which goes around the one product we already have. So the opening tank off Dave come replaced with main and then down on the very bottom close the main section off at the very bottom of page. We can also make use of the foot air element to So this is the last day of section of the page, which is the footer. Let's simply changes to do the new HTML five puts his elements on, gives us safe and over to the browser reload. We don't see any difference, but no have the semantic tags in place. We also said in the last video there is now a number of elements. This is used to represent major navigation areas. I will head and foot in my new links to other pages on our website, so this could be a good use case for the now elements. First, let's on this around the foot area. So just after the foot opening tag looking at well enough, I'm closing. Talk. Let's cut this out. That is a little bit and paste in the close enough, so make sure yours looks like this. We have the foot area nest inside. We have enough. And then we have our own order list. Wait. Our free links number can also repeat this for the head of section two. Other top just after text are looking Open up the nerve. I never concludes out the cause and tag which is being automatically added in Bruce at this under the northern list. Um, can also that isn't a little juice. It was more readable. So saying and just refresh and check. This is all looking fine, which all seems to be. We still have our links in place, and nothing looks any different. But we know more descriptive or semantic elements now structure in our webpage 17. Time to practice - Adding more products (Beginning HTML): we have 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 Alan. It's more correct. Of course, Extra Perrotta will look exactly like this one we have here without any of the CSS style in just yet puts. 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 have 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 off this one and just change the image on also the text off the heading on. Also the description. Make sure each product also houses surrounding due to just like the one we already have. You could have caused copy and paste in is existent when we already have, so you could copy the full deep section and pasting and over five times. But if you're new to hate him. L ah would recommend you at least try to type out some to give you a little more practice. So 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 manage to complete the rest of the products and get some more practice. I don't hate smell to your website. I quickly going to run through and adds, is extra byproduct in to my project. So back over is it indexed hates Jamal that scroll down to opera looked inside the main section. So this Dave section here is the warm containing all of the product information, so understand, to copy this paces in just below on what's extra, move this link to the product detail. Actually this in the first ball. So let's remove that on line. All these look okay, so the 1st 1 was the product controller. The 2nd 1 is going to be for the headphones. So the images was headphones. Don't J. Peg Old was the headphones picture and then the text or white headphones on the price? We cannot in the price of want, let's say 54 95 for that on, and we'll call these awesome white headphones. I believe the great again urged. Are these on two different lines? So it's a card more info can remain to, but let's remove the link it is, too. You don't have to do that. But I'm just going to remove these for mine. And then we can copy this again. My face in. Make sure this is old lined up. So the third item wants to the camera, which was camera Don't JK. The camera picture description was for the kind of camera. And also let's remove this link here. In fact, this one headphones to so that the image with the alternate text, the title, the price This is gonna be a bit more so let's say 649 95 the description. Awesome camera. I kind of so copy on this basis in again. So after the camera waas the microphone, Mike phoned with Jay Paige the old text as a title into the This is a yeti microphone. The price. So 119 95. That description. That's a awesome blue. You see microphone. Okay, so blow this just like this up. So this is our cables. Is that a camera? This come cables the cables. Picture you title price. So 10 95% of the cables description. Awesome cables available in different lives. You can add anything in here which you prefer. It doesn't really matter the whole point. You just get some more practice or write in Haiti. Milk cold. Then after the cables, we've got our last warm, which is for the lenses. That's a camera lenses 99 95 on Let's Say, awesome camera lenses. Okay, right, So 123456 There's over six products now on the index page. Give that save and then refresh. So from the top, we have our first product. Oh, headphones, the camera microphone cables on also the lenses. So I hope you manage to complete this. If no, don't worry. You have heard some more valuable practice anyway. I'll see you know in the next video where we'll take a look ahead. Html comments. 19. HTML Comments (Beginning HTML): I just want to take a quick moments. Take a look at using HTML comments. This is only going to be a short video. Comments are really important to know and use. That comment is basically an area where we can type in some comments or notes to both ourselves, all the developers who may read I'm cold. It becomes more important in a larger project. So Kam better understand what is going on inside of all code or to drug all memory. It will return a few months or even years later. Other comments. We need to include the following its syntax in tow or hate. Well, file. So let's say pull this 1,000,000 section with open up the angle brackets just like a hate schimmel elements exclamation mark and then two dashes. And you can see already that all this section afterwards has changed color. Then we closes off by any two more dashes and in closing off the bracket inside of you, weaken aren't our text to make a comment? Let's say, main section to display products. And then we could say that's now if we refresh the browser and if you go to the main section which is this all items section here we'll see that the text is not renders to the screen like the rest of the Hasty Mo. Also, comments could be over multiple lines, too. So instead of having this all in one mine, we could do something. Such analysts. Let's go to the very top here. It starts in the body, looking open about comments and clothes off just the same. What could maybe do a temporary to do list? Looks a number born. Create the shop the hate small page number two CSS dining American go on over multiple lines and again, by saving and refreshing will concede that these comments aren't at the top of page comments also useful for removing lines of code to, for example, if you wanted to change a product image. So I go down to the first product, which is this game controller here? We could just on a comments like this, just before the image elements. So just the same with all open up the bracket exclamation and two dashes, and you can instantly see we don't close miss off. All the remaining code afterwards is commented out, so just give that save refresh, and then we can see anything after the image has been removed from all website. But we just want to comment out this image. So let's close this off just after the image elements so save and then go down. So although content is added back in except this image for the game controller, so I'm just going to under these changes and that's the image. Bucket him. We'll save on fresh, and there's our image buck in place. So this syntax we use here off the angle brackets, the exclamation mark and also the two dashes he's only used when commenting. Oh, hey, html code. Or when using hateful files over language use, use it different syntax. But it work in exactly the same way. We'll look at how Commons were over languages later, but for now let's move on to look a hate mail, entities and symbols 20. Entities and symbols (Beginning HTML): and I want to show you a way to aunt, some nice looking visual symbols to our websites and how to display certain reserved characters using occasional entities before we look of hatred entities. Let's take a look or why they needed by adding to one of the product descriptions. So, for example, if you go down to, let's say, the camera on a school to description, in fact, we go down to the lenses. Don't the very bottom. So inside the descriptions, if you wanted to extend this on, may be on some additional information inside the brackets. That's safe for cannon models. Lesson 2017. So you can immediately see that the text editor is changing color off the left son. Simple here, indicating there's a problem. This is because the greater less than symbols a class has reserved characters in Haiti. Jamal. These particular ones are reserved because of browser might mistake them for these hate schimmel opening and closing tanks, which will have here. So these come replaced with a hateful entity. All hate moral entities begin with a AMFA sons on end with a semicolon with a certain code in between, so it looks just like this. If we remove the less sun symbol, we can add the ampersand, which is this character here. Lesson uses the lt and then the semi colon at the ends knows he's changed from red to be the same color as the rest of the elements. So this should all the work and find. So save that reload and it could go down to the image down with the ball. Tune off the camera lenses and there's a description. So if a kind of models less than 2017 so a symbol is now displaying in the browser, let's take a look at a couple more just for demonstration so greater than use GT Refresh and see the angle bracket is now points the right. If you wanted to display this Ambersons, which will have here. This is a MP, which is short for under sevens Real owes. There's a simple just that. Another entity we could use is for the quotation. So instead of ump, look accuse qu ot, which is showing a quotation save and then we load on. Now we'll have the double quotation in place, sir, there are also many more entities, which you can find with a quick Google search if you're more interested. And cities are also useful to display symbols, which is not on a standard keyboard. So let's take a look at some of these, beginning with the copyright symbol, the copyright symbol is simply copy. Make sure you have the ampersand on the semicolon at the end to, and there's a copyright symbol just there. That's Strolin. Just to see this a little better, let's take a look at the registered trademark, which is Reg Refresh. And now we have the are in the circle on also some more, such as a currency. So let's take a look again, say that one on reloads and now have a yen symbol, which is not on my keyboard. So that's how we can use these. And of course, you can Google these and find out lots more we can use. That is hundreds of different ones, so it just search for any particular one, which you may need to add. So I'm just going to remove this extra section, which were added in and say this, as well as finding more of these online with a Google search that is a website can visit called unique old table dot com. If we head on today, you will find a huge range of symbols you can use in your projects. It is the most popular ones at the top. All you can scroll through a huge sets of icons below. Let's do a search using a certain other top. So, let's say for game, in fact, aside from video game and then click on Search and now have a video game controller symbol . So if we click on this, we see we have two different numbers. Have a unicorn number on Also hate mail cold. The sexual cold starts with the ampersand, just like we used before. An end in a semicolon. We're going to use a hate penal code, so let's copy this colorful given. Go back over to the project, and then let's go up to the game controller product. He's a title just here. So afterwards that Paste is in and over to our project on Reload Scroll Back up to the game controller and there goes as a little image, which was started in. It's on the line because it's still within the link. So let's cook this out and paste this outside off these a tug. So just like that and then reloads. And now we don't see the Underline for the link. Now have a nice looking controller icon. Next operate title. And as you can see by the unicorn table with literally hundreds and thousands of different ones, 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, the atrial page, you see A But we wanted 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 detailed occupational page which are like you to try and copy. Remember, we just need to Arent at the content. I don't expect yours to look like this finish version until we aren't in the CSS. You can leave this table at the bottom. I'll just the now will be soon. When we get to the tables lecture. We already have all the content we need to create this. We already have the head of section. We would have a sidebar. You have the foot a section already on. 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 kind of cost. Copy the full index page and paste it into the product detail file and then remove the extra five bullets. But if you're new to all this. You may want to type it out a bit more practice if you're still unsure. Don't worry. I'm going to go ahead and do this now. Okay? So back over to visual studio, I'm going to go to the index that hate, you know, press command or control A to select all cold and then want to command or control. See, to copy over to the product detail page that's delete this text and then placed in the same Caldas Index page. If you go up to the top robin, this textile, we can also aren't to the end of it. Product detail give us save, and then if we scroll down to the products so that signed ball, which is fine and then all items. So this first Dave is a woman want to keep for the controller? Let's remove all the extra items so extra two items are the microphone, the cables and finally, the lenses. Remove that and then move the main type back up. So we just have one product inside of this main section, along with the old items heading. In fact, we can changes to product detail and then give that save gold to the browser hit Refresh. Let's go to our project. So refresh this. And then if we select, we came controller were then taken to the product detail page. So have the having. We have the sidebar and then the product details section with this one product and then the foot area down at the very bottom. So you go should know Look just like this. So have all the content we seen from the final version except the table, which will look out in the next section. 22. HTML Tables (Forms, Tables & iFrames): when I move on to hate several tables tables as a sound A used to display a table of data. We use the table he only product detail page to lay out roles of data about any discounts available for buying in book tables from use for basically any type of data, which you want to range into rows and columnists in the past tables. Being useful. Laying our websites. But example. Looking arrange, although content will see on this page into columns and rows, this is now discouraged as there is more CSS alternatives available now, especially since Grade and Flex Box, which will cover in this course tables oh, still have a valuable place, and now is to display data such as text on numbers or even images in a structured way. Let's give us a go over in the product detail so hate mail file so back over to the text editor and then let's open up this file and let's go down to the product. So also the cyber on into the main area. So just make a little bit of space straight after the product. Both Sylvanus main section here and then we can open up our table elements, which has the opening and closing talk. And this is how we create a table. If we look at this table from the finished version just down here, we have two rows of data rose commit, created by using ET Artax, which stands for table rope. Let's go ahead and at these within our table. So no case on T R. And then it's on a second. Several role just below each item or its cell for each row is surrounded in the TV tanks, which sounds floor table data. So, you know, first row we had quantity Well, 2 to 3, 5 10 or templates soaking out this inside the first rule we're TV. The 1st 1 was quantity, then sold in the first Devil Row. It's a new TV tanks and then 2 to 3, 5 to 10. And finally, templates give that save. And now let's head over to the browser that makes you will open up our own projects. So I'm gonna go with ur project folder, just CIA, and then we could open up these index html. Of course, I was looked a lot different cause we haven't added any CSS just yet, but we can still click on the links. So let's go down to the game controller to open up this product detail page, and there's a whole first roll see just below the product. So back onto the tech senator, we can do this one more time for the Price Road. So just underneath the first tee, uh, we can ask to more TV tax. This time. The 1st 1 was price. So 79 95 and this one look cheaper. Let's say 78 95 So each one of these will correspond with the number just above TV again, let's say 76 95 and then Momo, 74 95 Inside. There it's safe. Fuck comes the browser and reload and now have to rose and data is hate small. We have 100 for the websites. Content is exactly the same for both old version so far on. Also, the final version was seen before, so the CSS styling really plays a big part in a website look and feel. A lot of table attributes, such as a Rhine of background color, have been deprecate ID in hate Schimmel five, which no famous styled with CSS. We used to do things such as a name borders on aligning text inside the sable just like this sword on a board. Attributes set it a one pixel wide. We could align the text inside the sensor, say that and reload. So even though his currently works in my browser again, it is recommended to do styling using CSS. We can also place TD with th This is for the table header, which makes a content bold. This is useful for the top row off this table, which is a quantity. Let's go ahead and replace the top roll with th so these TDs That's changes to B E T h. Do this on all them. So let's go through them all. One by one place TD's with T Hey, ages on once. You don't know, Give that save on that, See what fact is has. And now we've got the top role as being bold because this is a table heading. This is a basic table set up, but we can go even further and answer more structure to this table if we take a look at the finished version, it's called a product detail I hope that in the news up, if you look at this table juicier just like a hate. Small documents were constructed up into ahead of a body on day for dissection. The top row with the quantity CompuServe header, the price data. Remember the body. We don't have a good use for the foot two times in this example, but they're there if we need them. Also working on a caption at the top of the table, too, which was lighted here. We buy in bulk and save. Let's Go. It's the project on Give this a go First week, another table headings were T head. So it's around this table rope. Looking at the new elements Off T head, Namun cuts our first table role over there arms, paces, spark inside his table head section. Then my concern, the prices with Tea party for this party section. So what? T body into their and quickly stable row on pace is in the body section. We're good at Melrose, too, if required, or even foot area with T foot. But now let's give that save on reload the browser so 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. No for the caption, which acts as a heading for the table, which is this text just here. So let's go back to the top of the table. Just load this open in table elements. I'm looking out of a captured inside of here and then a text, just like we do with the P tanks. So by in bold on save on Buck to the front detail page reload and there's a text on the talk 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 cold spot attributes. We can add this to a cell such as TD of th to make that particular cell the width for two or more. If you're familiar with Microsoft Excel, this is the same as emerging ourselves together across the rule. Let's give this a go inside the head of section to begin by making a quantity span across two cells, so the quantity th you can have the cold spot attributes on set is equal to two refresh and now quantity expands the width of the two cells below that, we could do the same inside the body for the price. So calls Bond equals two. Another price also takes up the wit off two cells to. So I'm just going to quickly remove what we don't need for this project. We don't need these calls Bonds in. We can leave the standard table inferno, so remove those two. We also only this border on the align properties too. This is it Now for first look art html tables Next will move on to capture in using import with forms. 23. HTML Forms (Forms, Tables & iFrames): in this video, we're going to look at an important pants off websites, which is false. You've probably all use something like this. Would you see Here you go to the finished version and click on the contractors page. This is a form which is used to get the import from a user such as governing information to register off to send a message. The data entered is usually sent to a web server. Look at the side of things later on in the course. For now, though, we just focus in on this hates female side, which is used to display the form on the screen. So let's get to work on the contact us page so it can begin to double form. We already added a contact. Don't hate small file just yet, so we can begin toe double form. To this, we could get my idea, our structure. So I'm going to begin by copy and content from the product detail, toe hate, mail, some coffee and then places in place off the text, which right here you kind, of course. Type this out for more practice if you prefer, but I'm just gonna paste this in to get things moving onto farms To keep our website consistent, we can reuse the same head air and sidebar. So they said it can stay on all the sides sexual, and it can stay too. But I'm going to remove most of the main section apart from this heaven. So let's go all the way down to the bottom of the table. And it's in a product detail for the level to head in, going to add a title off contractors. So now we have this main section clear to earn a form. So let's give that a go on. Say that if you go back over to the browser inside about projects, let's try clicking on contractors. And now in this contact stop hate, you know? So we still love the head in on also the sidebar, but know of a main content. So within this main section, we canasta before the form is contained inside of a form element. So that's art. This in number. You will often see some attributes inside of this form opening tongue. Such action, just like that aunt also method well combative these later in the course, as they 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, so we aren't a file path inside of there. A method defines which hates TTP. Mefford we want to use to send the form. We can even send us a get on a post request, but more on this later. For now, I want to concentrate on getting some imports on the screen. Imports of the sounds capture using inputs such as text, which is entered, or a check box when the user clicks on it. Let's start with a text import for the user's name so can add a input elements. Just like that. There are lots of different times off imports on. We set them using the type attribute. So that's the 1st 1 text. Let's go to our project and then be fresh. So there's our contact attacks at the bottom on attacks input. This is just a simple box work and enter any type of tax we want to. In fact, we're not restricted to just text or can even type in numbers on different characters, too. We can add some text before or after it, too. It's like the use and know what to enter. Such is the name. So let's do this now, just before I'm going toe to the text off name. Then we load and there's all the text on the screen, as expected. If we take a look, though, at these finish 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 on, we starts type. This text is added with the placeholder attributes, so let's go back over to our inputs on just after the type attribute we can. A place older, I know we conard over text into their fall into your name, and there's a latex inside of the next. We want the user to enter their email address, which is just here. We do this in the same way, but this time the import has a type of email. Under the new line, we can email and then at our import, this time with a type call email. This can also take the place old attribute to We'll answer your email, give that save and then refresh. There's over to form elements side by side. The next import time is the text area. This is used when once a larger boxes. I being more text every year, Sir Charles a message. So let's add this on the new line. So first all the text off message, and then this time, instead of the import, we use text area. This has opening and closing tax on like this input. So 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 so that's under Cole's attributes. I sent mine to the 30 also the number of rows to for the heights. I'm gonna set my initial value to be five. Text areas can often be drugs larger and smaller, with a little like section in the corner. Refresh the browser and there's other, larger text area, which we can aren't multiple lines of texting. As I mentioned before, we can also click on this section in the corner and make it larger or smaller so remember earlier in the course who mentioned Weaken cutting, rise most elements into in line or block level. We can clearly see that here did the form elements in line. If you want them to go on the old nine stacked on top of mutual, we can surround them in a death, which is a block level elements, and this gives us the effect that we see on the final version here. So inside the formats are some developments that's called the name Compay, saying a second Div for the email and finally 1/3 1 for the message. Are you saying and then reloads? And now all free imports on the own separate line? This is a good start to old form on. We'll continue in the next video. 24. Labels, name and id (Forms, Tables & iFrames): in the last video. We need some basic form elements to the page. Also, where did the text off name email, a message to the left off each input Tell user what information to enter. This is just playing text with no of a hate small elements such as a P talk, which you can see here. There is also no way for the browser to know this text is related to these input. We can fix it by adding a label. The label is just a way of adding a caption of text to each import like this. So that's that. Could his text out then we can label inside here between the opening and closing times, we can now paste over text back in, give that save on, reload the browser. We can see instantly that it will 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 these particular inputs and no, the email or message? Well, we can link them by adding a I d actually boots, so this first imports just after place. Older. We can add a idea tribute on this committee, the name of our choice. I want to name this name. Q b Simple. Then over in the label inside the opening talk, we can ask the fall attributes. I think it's to the i d with the same name, this idea after you. It is not just for use with the label. It's important for time to this individual elements with both general scripts and CSS to let's no do the same for email. So just up the placeholder that I D or email, I'm gonna label. So could the text out paste it back in even under full attribute inside here? Oh, email, then. Lastly, you can add this to the text area to just off the rose that I d. On again in the name of your choice. But I'm gonna call my message, put the text out in the US, the label and finally, the four attributes. Uh, this is a message to and say Go. It's important not to have the same idea name more than once on the Web documents. We have class for this purpose, and we'll Coakley's in more details soon to make sure that saved and then or to the browser reload on. Of course, you see no difference. But these all known link took behind the scenes for the Web browser. One over advantage of using a label is that the label is also applicable. So rather before, we could only click on this input to make active. If we click off. We can also click on the name, too, and this also makes import active so the user can begins. Type another, after mutual commonly see is a name attributes. So let's go over to our text editor on inside this first import. Looking at the name, it's called his name, say, for the email name equals a man and also the text area message so it can be confusing at first. Why will have this name Onda? Also, the idea attributes on this is understandable. I won't go into too much detail. Juice Yeah, as a Lagos may not become clear until we get more familiar with job scripts and also processing falls on the server. The idea attributes, which were added first, is usually used to reference the elements in our case input. It's a way to grab the elements with John Food or CSS. The name of true deliver is more useful when submitting a form to Web server. This name is used to reference a data which the user has entered inside the input fields just here, So it's a way to grab this data up to there. If this does not make sense just yet, don't worry. We'll see a lot more as we go through this course. Manalo will 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've probably already used before, is a checkbooks check box, just like we have here. Allows users to check more one box at a time. Here we allow a user to subscribe toe offers by newsletter email opposed. So let's see how you could do this over the text editor. Just like before. I'm going to add a surrounding deep tuck. Make sure this is still within it. This form elements here, so open up the dip tanks to make this block level. Then we can add some P tags for the text of the top on the text is going to be just what we see here. I'll subscribe to future offers by and then the colon at the ends. We can also use a label for these check box. So at this first, So just below the knee, that's our label. I'm just like four at the Four Attributes. I'm gonna call this the newsletter, which going to the I D. Soon and then as newsletter inside the opening and closing talk. Just after this, we can earn our import like we've seen earlier. This import has the type off check box and then we get with the i D to link to this newsletter. Juicier. You're not safe and testing inside the browser. But I go on over to our contact page and then the fresh. Okay, so there's I were text between the P tags just that it's up there. We'll have the label of newsletter, and you can also see you can click on this check box on. Also on click. We now have a check box, which you can click on and off. Now. I cannot this in two more times. The email on post options. Let's do exactly the same. First week unearthed a label on the label for it's called This email the name of email on the import with a tight, the gain off check box, The idea off email and he closes off. Man, I was third and Final one. This is going to be a label or Khost. I was off with the text label opposed to on the final check box input So type of checkbooks as an I. D. Off post and they close off and go to the browser. And there's a newsletter email on post. There are also some more attributes we should aren't too. At moments these three check boxes and next to each other on the page put on related we can effectively link if you wanted to, by giving them all the same name attributes. This is the name of tribute, which we looked at in the last video which we need just here. Let's do the same for imports with type of check box. So the name once police subscribe I'm just going to copy this seem to more times. So this name attributes, as mentioned in the last video, means one must submit this form to the server. These values from the import will also be passed to with check boxes. We can't type in a Valium like record with the text or email input so we can add a value attribute in just like this on the value This could be the newsletter on this is the data which is passed to the server wants its sense. So the value for the 2nd 1 e mail on also the value Oh post. So each time the form he submitted the server will get the value off newsletter, email or post, which I want its victim. One of the key things to know we see here is you can check as many as you want. We can click on and off any of these. This is a key difference between check boxes and radio bones, which we're going to look at next if you go to the finished version. We've already done these free check boxes we see here. But just low. This would have How would you like us to respond? You can see these radio bones, but we can only click on one at a time. And that's a key difference between radio check boxes. So radio import that is in a similar way to the check boxes. I'm going to add a surrounded death. You can't make sure this is still within the form. And then inside here, the p times at the top for the text of how would you like us to respond with a question mark? Not thievery ends another thing. Go ahead. And arts of labels. This also has the four attributes. So Kalinka, I want to call this on the phone response those often at the label phone. Then we go ahead and our our input This time with the time all radio and also the I D off form response. Too much is so I'm trying to and I close this off. Then we just need one more for the email. First of all, the label on this time it can be email response. This is keep it consistent with the phone response above. Those often asked the label off email on imports type of radio. On this, I d off email response goes off. Okay, good. So have used phone response on email response here rather than phone or email, because we already have email I D. On this page, which will use used to both. I always said before the ideas should be unique and only used once on the page. So let's give our save and test inside the browser. Like what? So I couldn't project and reload. Now it's time to read your bones out. That's all. But one thing you know it is if you click on this, we can see the both of them can be checked at the same time. So this is different behavior. Toe what we expected from what we've seen before on the finished version, we seem to be able to select both off the radio buttons at the same time. This is because, just like check boxes, we need to also group these together with the name attribute. So that's how the name in each input. So let's call this response on the second import name equals response. Now he's linked together. So let's test this by refreshing on try and both of these. And now we can only select one value at a time because he is a group together. Finally, we can add a value attribute also sent to the server to you. Found you this time can be phone on. The value for the 2nd 1 is going to be email. You may also see check boxes with a volley off. 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 maybe a good use case for this. Next, we're going to move on to another important type of import, which is select 26. Select input (Forms, Tables & iFrames): the next time of imports I want to show you. Is he slept box? This input basically allows a drop down list of various options which is used in select. I'm serious just here. If we scroll down to the subject here, we can click on this. I'm represented 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 into this. Type you soon. So first of all, I'm just going to tidy things up a little bit inside a little form on a separate our sections. So the more clear So let's have a were name section, not some space between each dude. Now you can close off you check boxes to So these old groups got like this and then let's group together our email on phone response section. So now these all groups I'm going toe hurt our select just below the message area. So this cell message every here, let's make some space on also creates I would do section for this. This time you see select elements rather than a input. So I select just like that the select, just like all yours. I'm going to give a I D. Al Macaulay's thesis object. So this, like boxes going toe at a list of options, which the user can select as their message subject as well as the select. We can also aren't a label, too, because we have the idea tribute. We can also add the four attributes or subject and then attacks inside of subject to inside here. Each item in the drop down is wrapped in a option. Elements on this girls between the select talks. So before we do that, let's just check this out in the browser says on the label of subjects on. You can see we have the import here. If you click on it, we don't have any option is to select from just yet. So that's on these with option elements. So that's on the 1st 1 in and inside that he will conard our text, which will appear inside the select books. So the 1st 1 comes returns that series no action says return to start. We can also add a value to this funding will attribute will enable us to pass a select value with the form when we submit it, so the value of this one can be returns, and then it's just copy and paste is in a few more times, so this one can be faulty item on a option's value or faulty later. And when he was a underscore just instead of having a space here, let's one for delivery info on the volume or delivery. This one can be four or the truck in next option off advice. Then find it was just a little more on This can be over, Okay, gives us a and let's give us go inside the browser reloads and then click on our select. So he were presented with a list of all options, which we added inside the select. By default, we can only select one of these values at a time. So as soon as we clicked on these, the select is an collapsed. If you want to select more more, we can add a multiple attribute to the opening select tug. So just after the idea, we can add multiple. Let's go over reloads. I'm a compressed command or control to slept more than morning value. I'm going to remove his for now as we don't need this inside of our project, but it is useful to know what, sir. We can also group together any related options rather than having just one long list. We can use the OC group elements to group together certain related subject. So returns and faulty item have gone to group together. So I'm going to cut both of these values out and then use the group elements and Uncle Pasty Zbakh inside. We need to give this up Group a label on This is the tax which will appear on the screen above both these groups sections I'm you'll see this more clearly. In just moments. I once out the tax or product issues and say that, so let's see how this looks. If we expand, we see in the faint text at the top. We have product issues, which is a label with a need and then slightly offset to the right. We have our to grouped items here, so next we have delivery on tracking information. So this coming grouped together into delivery. So let's cook these two options out on art. Our options group that pace is back in it's X label for this form. Can be delivery and then down at the bottom of group advice. And over into April, the group someone more off group faces lost to win, and then our label simply all over. It's no Hubble free separate options groups. You should now all be displayed in the browser. So reload. Open this up. And we have now three different groups altogether. No, but you can also click on this label, Eva, off delivery of the product issues. This is just simply there for information. No. Have our select box in place. We're now going to look at more recent addition. Take Schimmel forms, which is the data list. I will take a look at this next. 27. Datalist & submit (Forms, Tables & iFrames): I want to know, show you data list data. This is one of the newer form elements available because of this browser Spots up President is a little bit more limited. At the time of recording, we conceded by going over to a site called Can I Use? Don't come on. Don't need to do is type in the data list at the very top here and it's scroll down. You can see a list of thes supported browses so we can see by the color. That's the later versions of Chrome a green on its fully supported. However, some of the early versions off Safari and also Safari on IOS. It's not supported if we take a look at Internet Explorer on also edge on flight folks, too. We can see that the light green indicates some partial spots, so we need to be careful when using data list. However, it is useful to know as it will be a good option to use. Once browsers sport catches up, data list could be used in place of a select box from the last video where the slept box is a drug dull. To select. An option data list is more off a text box where they used tape into. And then we can see some suggestions below it if we go over to the finished version on into the contact page. This is a data last year. If we click on the drop down, we still have all the 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 . So let's begin over in visual studio code. I'm going to comment out these full div the way I did in the last video. So this is a deal which surrounds all the slack box. If using visual studio cold, it should be simply able to highlights a press command or control looks forward slash and this will comment out this section photos. If no one's needs typing manually the opening section on the closed section blow it. So then let's go ahead and construct. I would def. Just like we did before, and then we can aren't a label label again is going to help the four attributes on subjects and then subject inside of here. So we're basically just construct in the same thing as we did for the select box. So this time we're at a import with the type all text. So the reason we're adding a text input is to display this section here so the user can type into it. Let's give us an I D off subject again So much these attributes here, then the placeholder. At the very end off, enter your subject, they close up. So this is just a simple text input to begin. So user has a text box to type in, then below this weaken our our data list with the opening on closing tax for this elements , then we can ask a option inside of here. So this only has the opening tug on. We also aren't a value attributes off returns, then that's copy and paste this in a few more times. So next we can add the faulty item just lying this own up. So it's more readable. So 40 item, and then the 3rd 1 is delivery. The four form waas or the truck in the 5th 1 was advice on the final one waas over. So just train that's over and then safe. So over to the browser, he reloads. Let's go up to the subject. So let's start to and some text inside of here. So if you type inside imports, we don't see any of the options appeared in below. Like we've seen in the final version. This is because we have a plain text input on Also have a data. Let's blow it, but we have not yet link them together. The length, um, first meet art and I d to the data list. Just like all ideas, this goes in the opening site. So the i. D. Campbell Colisee subjects then tell the text input above, which loosely connects to with the list attributes. Of course, this needs to be subject. It's much his i d below. Give us a when it's testes. It was fresh. We also see this drop down arrow appearance, so this looks like it's working. Yes, I tried delivery advice on that all seems to work in. So this is how we use the data list again. Do be careful when using and check browser compatibility. If you were looking to include these inside of a project, both the new thing, it's a nice form elements on 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 fall. Onda seem I guess we do this with a submit Bullet submit is also import. But this time we ask the type off submit. So let's on this writer the end awful form. So just above this closing form tag, we can run this initiative to then at our inputs with the tyke or submit give that safe. Let's check this out. And of course, this is right at the bottom when we have our submit button just yet. This is a bomb which will actually submit the data in the form to the server. Remember, all this will not work at the Mormon because hate email, just displays of content. But we'll come back to submit informs later in the course when we're more familiar with back end Web developments. But one thing you will know, it's once you click on the submit button before what are taken back to the same page on If you look at the ends on this, you are. Oh, we have name equals and then block on email equals with no value on message equals a game with no value. So this is because we added the name off name email message over in the Haitian Ill. So this waas just here, So name email a message. So this is why What is it? The name after Boo before? And this is a data which will be sent to the server. So let's just give that quick try. Actually added Chris, and then test that test dot com onda message here it would go down and click on submit. We didn't see this. Information is now in the top up to our name equals Chris E mail equals test message equals to a text which recited him. So we just leave that for now and, of course, will 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 equal submit down at the very bottom I wouldn't put just here. I just want to comment this out and then we can are to the button elements just like that with the time Oh, submit. And this is something which you'll see quite often to. And since it has the tape off submitted will also submit the form just like this. Input will do above it was saying, and check this out in the browser. It looks a little difference. We just have a plane will turn with no text. We see no text of submit. This is because, like over elements with an opening and closing time, we need to earn our text inside. So between music an artist sex off submits. I never see the text inside the bottom. This is actually one of the main differences when using an input or putting in this way inputs off default text off submit. But with Putin's, you're in control or the text inside the bottle, so it could be anything what you want. So China's send message No see that reflected in the browser. For now, I'm going to comment out this button and keep in place. The input, which were hard from the fall again, would command, control and forwards lush. Do you own common? That's out. You may also come across a re CEPAL in place next to the submits like this. It's rather on the type of submit. You may also see the type off reset, and this is used to clear any of the text from the input, which we aren't so some text inside idea. We could click on Reset, but it's well clear all the form inputs, but hold the work. This is a content off our form now completed. But in the next video, I want to show you a few more useful types off inputs. 28. Other useful form elements (Forms, Tables & iFrames): a lower form is now complete for this project. They still some over useful input types, which you want to show you. I'm going to add the's as a new form elements to keep them separate from what will be keep in from the rest of the project. So let's go down to our clothes and forms like here. And then it's open a new set of form elements here, So some other useful input types includes number. This has the input elements, this somewhere, a type all number. So one of the benefits of using number if refresh will see if you're in here, is that restricts that uses import to use numbers. So if I click on Nation would try to add so letters or words inside here, these aren't taking any effect, I thought. What kind of costs are that? Some numbers, which you can see here. There is also this group and down bone on the right inside, which we can use to go open down through numbers. Next. If you want to ask for the user's password, it makes sense duties with a input with the type or password. This has the benefit or starting out the password. So if you type in a password inside here, we see that we can't see any of the cultures which have entered. This is useful for if somebody is behind you or walking past so nobody else can see the password which you enter. But it's also a input type of date, which you also have access to. Aunt. As expect, this is the input site. No date. This is obviously for a date. Fields. Let's take a look of these in action. This could be used to win, asking for users birthday often example. Selecting a date. We want to stay in a hotel on the travel website. If you click on this, we have the date, the one for the year. We can also control this with the keyboard by typing. Look on down. Entebbe also switches between the day The moon's in the year. We can also click on this drop down arrow on. We have a date fields where conflict different months of the year, Then all we need to do is click on. One of the dates on the field is automatically populated with the date we clicked on regarding these imported is quite a few more to which can look upon nine, but I will show you a few more common ones, such as color that change the type to the color. You've probably seen this one before on various websites where we have a political so full of fresh we'll see the color block is defaults. This looks different on different browsers. So for using something like Edge or Firefox, you may have a slightly different looking and import type here. If we click on this, we got a nice color picker. It's, of course, is the apple one, and yours may look a little bit different. Don't click on various different values on Choose a color from that. Another useful one is range. So in port with the type of range back over to the browser range gives us a slider, which is used. It can move across by clicking on it Andhra against the left and right by default. The slider is in the middle, but there are also some attribute. Took it hard to change things. We can change the minimum on also maximum, So if we set the minimum to warm the marks moment to be 10. This gives us a range of 1 to 10 which weaken drug between never can control a starting position off 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 we set this to be worn. It would appear at the beginning. So let's give this a go on. We now see the circle right at the very start. If we change is to be a value of 10 it would appear right at the very end. And this is a useful input type, particularly when we start learning about job script. We can use it for things such as setting the volume on a music player. So it goes opened down as the use of drugs. The final input type I want to show you in this video is search. I'm sure you're more using before to search for items on the website. This is something which can be used on our website in the head of section. If you look at the final site era but at the very top we have a search field just here. I'm going to know remove the second form which have been playing around with on Bring back up and then we can have a search to the header. So it was Go back to the top of the page on into these head of section We can have this just after our navigation with an import type equal search I'm looking also had a place all the attribute to oh search Then close off One of the differences between this Onda normal text input is after we type something, there is an ex which appears to delete the search term. So we'll show you what I mean now refresh and go back to the top and we start typing in. We see these X on the right inside to clear the form input Also, as we over form elements behave, HTML only provides and visual search box searching for anything at the moment will not work just would hate him alone. We also need to add the search box to the header in the index page two and also the product detail. If we click on the home, we don't see this added inside of here. Let's copy this input from the contact age first Let's add it in the product detail in exactly the same location. Close enough. And then if open up our cyber and go into the index or hate smell, what could do the same? Do you see her? Let's try this out. So one home are the contractors on. Also for click on one of products such as the game controller we're seeing the product detail will also have the search. Father Snow should have a pretty good idea of the different ways we can gather information using forms and inputs. I hope you found this useful on. I will see you in the next video. 29. IFrames (Forms, Tables & iFrames): we know going to move away from forms and take a look at using I frames. The I frame element is used to a bed, another hate mail page into our Web document. Like you see here on this finish. Contact is Paige. We can also embed a page from another provider, such as Google Maps that had done here. It may sound a little strange, but will become more clear on the see them in action. Let's see this in the contact dot html page. I'm going to art and I frame insider here. We're going on this just after our form section. So let's scroll down. I was right to the end of all form, but still, within this main section, we can ask the I frame elements. So if you give that save and then refresh the browser inside of a project, and if I need to go to the Contractors Page and in school down, we'll see an empty I frame elements at the very bottom to get us to show something we need to add a source attributes just like we did when working with images. The source after Bill will point to the Web page we want to embed. This could be simple as displaying one of our own work pages. So Charles product detail. So that's Aunt the source inside of here. I need to know pollute dark detail. I know. So you get that save. Let's see how it's looking on. There's Oprah Detail Page inside this I frame or inside his window. Um, control opened down on left and right, so this I frame is a little too small for the content, so it can also use the height and width attributes to resize I frame. So let's begin with wit. Let's go. 800 words on height off 600 This value is in pixels, so it's an 800 by 600 pixel I frame on. Now we have the I frame, a little bigger on the screen there. The I frame can also be used to link to an external website, but only if the website owner allows this. Currently, Wikipedia allows this, but you can see by typing in the sauce. So instead of product detail, don't hate Schimmel. Let's typing the full Ural off H T T. P S Cola. It's left lush Wikipedia. The boots are a doctor dog and then give that save. Oh, it's a browser. See the Wikipedia website embedded At the moment, Google doesn't allow us do this. Let's cling to Google. Come refresh. Would you see an empty I frame? So do need to be careful. Which websites were Lincoln? To make sure that that is allowed, we can also add some four. By content is the embedded content can not display. This could be added between the I frame opening and closing time. So that's that Will P times for some text. Let's say your browser does not spy friends back on the project result, so we don't see any different because this is only displayed. If I frames the disabled or if it's viewed on a screen reading device for visually impaired people, we can also embed content from over websites to if they allow. YouTube is one of the websites which does allow hours to embed an eye frame. Until a project to do this, we can go onto YouTube, don't come, and 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 would say for Elon Musk on Click on any one of these videos. Okay, so what we need to do is click on share. So I go down to here. There's a Sherborne. Look on this and then click on in bed. Then we can copy this I frame which is provided to us so we could see the closing ons. The opening I frame. Yes. Let's copy all this section. Go back over. I'm looking at this in place off our corn, my friend. So let's remove this on pace in the YouTube version instead. Give their safe and now back over to a project. It reload, and they will have a YouTube in valued video and that plays ball controls down to the bottom. This I frame also has some attributes to which we don't yet see. You could scroll over to the right. We see we have allowfullscreen. There is also framed border which is value of either zero or one zero means no border on one means that the border this allowfullscreen as it sounds. If we remove the after Bill and then go over on play the video, so click on play. If we try to click on full stream. We can see that full screen is unavailable. However, Denise back in will allow us to make the video full screen once more we play and there goes notes, a full size or screen. So now we know a little bit more about I frames. In the next video, we'll can use them to ask Google maps to our project. 30. Adding Google maps (Forms, Tables & iFrames): If we go over to, I will finish contact us Page, Let's go down. You have no estimates. Finished version. How location Month on this Contractors page. This is provided by Google by accessing the maps a p I because 80 IES in detail later on in this course, you couldn't build our own. So for now, just know the marks a p I will allow our website to communicate with Google's mark information. You may be wondering what this all has to do with the hate middle section of the course. Well, it's a prize included inside of night frame. Also, it's really easy to implement. Let's begin by going over to Google. Let's do a search for Google Maps. A P I A. Normally to go to is developers for google dot com. Forwards life months. So select this. But first, let's look on the get started button, which is just here. And then that scroll down So the woman need Is the Google Maps in bed a p I. Let's cool down. Uh, this is under the Web AP I section. So look on Google about Google maps in bed, a p I then select mumps. I consider this integrates base maps on indoor flock loans to our side. So click on this link here. So this is pretty simple to get started with or we need Start first is copy this I frame section What you get to see it. Copy that. Never go over to a contact. The hate mail page replace or YouTube version. Wait too long, which is copied now. I had always the browser you contacted. Page hit. Reload. I can see a problem provided a pikey is in bullet. So us the error message say's We need a P key. This is so Google can keep track off. Who is accessing its My data. We get a A P I key from the menu back over in the Google Web site. On the left hand side is an option to get an A P I key before we go any further, though I just want to point out their websites like this often change layout over time. So if your version looks a little difference, it's usually just a case or a navigation Inc 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 know any mocked him, we need to log into Google. So I'm going to look in making next no money, no password. Okay, good. So now, Lord Doom, we can click on Get in a pikey again. And first we need to create a project. So I'm going to create a new project. So click on this. Create new project link And what use name? All textile. And I click on next. This you think it was our a p I key? Which one copy by clicking on this icon here, go to a project. And then if we take a look at these I frame which we call me before but it's strong across to the section would say is key equals. And then what you say is your a p I key to the these three words here and then paste in a ky ky would use Koppett, give us save. And now if you go back over to our contact page and refresh, we should now see that were presented with his Google Martz image instead of the error message. So no, have a connection to the Google muffs 80. I now understand this map to get the location a little business. If you go back over to the Google Web site, click done. We can see a quick start from the menu, which is right at the very top. So click on this he ever come build our own custom up well conserved for places or the city . So let's say New York. Click on that and then scroll down. You can see we have New York appear on the matter. We can also search for the other address. For example, it's that so four infinite loop, which is just here and then scroll down. You could see the new location and just here. So we already have our A P I key to construct this math. So we could you place this insider here and then once don't match, click on done and then we're provided with AI Frame, which wouldn't copy on this has this new location, which was searched for before. So let's copy this, and then if you go off to the project and replace I, I frame with the one which you just copied, and then if you go back over to our contact page It refreshed. But when Now we take into the address. Which were I in before? So of course, you need to changes to the location of your business on This is how we do that. It's no have successfully integrated Google maps into our project. This is it now for the hate mail sections of his course. So well, don't forget this far now can we want to learning all about CSS? 31. Understanding CSS (Beginning CSS): in the Hay Tchmil sections we have could so far. We refer to the finished website to show what will be out into our project right now. Our own project we have been creating contains exact same hateful content as a finished version. But as we know the look very different. The difference is the CSS CSS stuns for cascading style sheets. On it is a style feet language used to describing the look on for Martynov, a documents written in a Markab language such as hate mail. This is a formal description, but you can think off CSS as a way of styling, position in and laying out elements you know, websites we can use. It's ours colors, borders, alignment, text size, background colors and so much more. Using CSS keeps all styling separate from the hateful content. This separation keeps old files smaller and more maintainable. We can still mix and styles in Seoul hate schimmel file. I will look at some ways to do this. Anything over than a small website will usually have hate smell in one file with adults Hate mile extension and then CSS in a separate foil. Would adult CFS extension having a separate CSS file also allows the same styles to be reused across multiple hnl finals. See us as free is the latest version and allows us to do even more with new features such as transformations, animations, Grady INTs for the images, rounded corners, a media queries. We'll, of course, cover these in more details soon. So what does CSS look like? Well, on the screen, here are some examples. First, weaken selected elements by its name, such as hate one. There are many ways to selected elements. I'm all look at the assume, too. Then we had some curly braces to contain the style rules who want to apply to this eight ball. Same with the header just below his head. It will have a week for 70% with a white background. Now I know a bit about what CSS is Now let's move on to other neat to our project 32. Inline styles and adding color (Beginning CSS): I'm going to begin by looking up one way off. Adding styles, which is talent. Them in line it lined basically means we asked them inside off each HTML elements. This final version has a great background color for the header on Also the Foot Air Down to the Bottom. Let's begin by idea Nate background color to the index dot html and let's go to the head elements. So in Extra hates Merrill on Let's go to the top of the page, he would have our head elements. I'm looking use thesis. I'll attributes so at an in line style insider here, what can then select the background property articular. So I call on so we can use a coolers name for most values, such as red, blue or yellow. So let's start with reds on each CSS property needs to end with a semi cola, get out safe and then reload the browser. Go to the index dot html and there is a pretty terrible looking red heather. But the style property is now taken effect. We can also use colors in over four months. To incident is type in the name, such as RGB A on hex If we go over to Google on a search for a color picker, these various online tools we can use for a color picker I want to use the W free schools version, which is a top link on here. He would construct a color from this picture on the left, so let's let any court from there. Let's call for blue on. If we scroll down, we can see this is different for months here, the 1st 1 has a hush on. This is a hexagon volume X stands for Hexi decimal color and has a cash prefix. It's made upon six digits. The 1st 2 is red. The 2nd 2 is green. And then finally, the two blue values at the end. The hex color combination I've chosen for the header is free, free, free. A 40. Let's go over and replace this went value. So that's at the hush. Then the body or free free, free a 40 and give that save. Let's take a look at this and now we have the same dark color which you see in the final version to see you. If we head back over to the W free Schools website and then refresh. There's also a RGB values just below inside the brackets for undervalue off reds green and then blue. That's a number ranging from 0 to 255. So you will be the least intense and 255 being the most intense. So if we wanted a red color just like you see on here, we see the first value off red as 255 seat off the green. On also is it off the blue, which makes sense Then below the color becomes more orange. So this for going, for example, will see, we can add smoke green. So 255 for the red Want to wait for the green on zero for the blue, you may also see 1/4 value to which is called R G B A. If we also do a Google search, our G p a And again I'm going to go on this w three schools website For this link here he would see a RGB a value on the four values inside the brackets to this is just like an RGB color. But with 1/4 funny you off. Elsa Alpha is used to set the opacity on is a value between zero a month, so you're always fully transparent. On one is a solid color. If you go back over to our index dot html page, the default text color will see on the patriot is his dark black color. This text color can also be changed using a cooler property like this. So just after the Santa Coloma can also adds the color which applies to the text. I don't want changes to be whites on also the semicolon at the end. This can also be a cooler name, an rgb a or hex value. But understand keep this simple as white and then refresh. So now how this white cooler Let's open the header you will notice of these free navigation links and not white. This is because these links so we need to target the a element for this take effect. The same background color can also be applied to the foot of to All we need to do is take the style, attributes and then copy and the school right down to the bottom of the page. We're stands on this inside the opening for to talk and then, if we go down to the bottom hit Refresh will now get the same colors applying to the floater. This is how we can add in line styles. They can be useful for quickly Adena style toe warn particular elements. But you can probably already see some disadvantages already, such as even at this early stage, where you already duplicating the same cold, which is not usually a good idea. Also, by the time we add styles to every elements on this page, may begins to look really messy. Another big disadvantages if we decide to change something such as a phone color at a later date, would then need to look through every text elements in every natural page and change the mold individually. Thankfully, there are some better approaches. I 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 start treats. This is a way to add all the styles. Want to apply to a single webpage? To do this, we can add to the style tags in the head section. Let's go to the top off index page and then just after the title got out of the style tanks . So that's at the opening and closing tag inside his head section. Then, just like we've seen in the Sloan's at the start of this section, we can then at the name of the elements we want styles to apply to. So I'm going to begin with this head area, followed by the opening and closing curly braces inside, these curly braces were concerned that the same styles is before so we had the backgrounds . The colon on who had the hexagon value or free free free a 40 when using these tunnels also still needs owned each property with the cynical. Then we also heard the color which applied to the text, which was white. Then, if you go down on remove the in Ryan styles, we tried it before to the Head elements, lets you move that, and then also, rather than duplicating cold, these styles can apply it to multiple elements by separating with a comma so separate would come. You can also ask the footer inside of that, too. Then, of course, we need to go down and remove the styles from the foot area. So right down at the bottom, let's remove. He's in line style section. Okay, so and then give that save, then for go to the browser and then refresh. I will concede that the styles of what I did at exactly the same as before, but this time we'll have them in Warn section at the top in the head. We can also add some style into the root h my lemons and also the body Section two back in the saddle times at the very top. We're going to begin with hate criminal elements, so let's add a background color on hex Value or F seven F seven F seven. I've added this hate criminal elements at the top as it is in route elements, so it gives us safe. Then we fresh on. It is a small but still difference backgrounds now with the body, but you just after the Haight female. So that's out of buck grounds points. So it stands out with this background of hates, you know, the maximum width of the body section. I'm going to changes to the 1000 pixels and then going toe margin zero and then auto. So margin is a value of spacing. We are outside of the elements. The first funny or zero represents knows facing on the top and bottom on the second value is for the left and right. Certain the value toe auto mean spacing will automatically be applies equally to both sides . Effectively center in the body to the middle of page. This is a common trick, a lot more about Marty in a later video. So don't worry if he doesn't make sense at the moment, so we'll probably see this in action better if we say and then refresh so I can see straight away that the body is now slightly network. You can see this page full color. Where idea in the backgrounds, it's slightly different to the white that were added for the body. The body section is his 1000 pixels. Why in section which goes from this left eight year to the right on site here, the body is now restricted to 1000 pixels wide and send it in the middle because we added equal margin the left and right inside. So any extra space, which is available after this 1000 pixels with will be automatically apply. It's the left on also the right. This is because we've added an internal style sheet to this indexed occupational page. Internal style shoots work rates, but there are only useful for style in this one page, which we wanted it to. For example, if we select the contact link from the menu at the top, which is a sort on here, click on that on the style in which were added doesn't take effect on this page. This is often not the behavior wants because it wants a consistent styling, but colors on. Also this headed a foot section two again. This is something which can be easily sold, used all third and final type of style sheets, which will cover next 34. External stylesheets (Beginning CSS): were you so far covered? Adding styles in mine Onda also using internal style shoots. The third and final time is a external start shoot we've seen in the last video that limitation off using internal star sheets. Is that the only appliance about webpage? We don't want to repeat the header for the styles each page, so can add them to an external style sheets robbing them. Only playing Teoh Index page, which was CIA presence we can do it, is by creating a new file inside of all Project folder. So I'm going to click on this icon here, open up the sidebar, and then I'm going to create a new file by clicking on this icon here. I'm going to call these styles don't CSS. The name is up to you, but it must have the dot CSS exemption and then hits Answer. I'm just going to say this into the roots of our project folder, along with these index on all the vocational pages. We can also have the CSS folder. If we have multiple style, she files that would go over to the index page on court styles, which you already have, So let's scroll down and everything from the header and footer right up to the Hasty Mo. So could this out. But I just want to leave the start tags in place and then paste ease in the styles, not CSS file, that we've created it. Save. If we go over to the browser and then refresh. We see no styling is applied at all. No, this is because we need to link this new CSS file to the hate small files we wanted to apply to. Let's couple heads on to do this. No. So over in the index dot html, we couldn't move thes style tanks on in place. I'm going to the art of the link elements. The link has no closing tag on. We can add two attributes. The first Israel and we aren't equal. Stan Sheets rail equal style. She describes the relationship off the link documents to the current model. I'm really gonna style sheets, then the hatred. Attribute what? You should be familiar with it from when we're not. That links. This is the path to the CSS file which it is created. This is in the same directory is the index page so conduced onto the name off styles dot CSS. If we had in a CSS file, we need to add CSS. That's a file path before the file. So just remove that on Give that save. So now refreshing should introduce other styles back onto the page. We should still see if we go over to all of the pages, such as contact that none of these styles still look right. We can changes by Lincoln to all of the pages using the same link here. So I'm just going to see a copy this and then at this to the contacts. Don't hate Shimo. Is he 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 places in. Now, if Gold Cities conversational pages in the browser. So we were home page, let's try the contact page and there was styles still apply there. It does look a little smaller. Think we're just zoom dinner with the browser there? Yeah, so home page is all working The contractors page, I will stop the style so they head out in the foot so on Finally Let's go back to the whole page on Select the product veto. Our styles applied to this Page two. This is our looking at external A star sheets to our project. Next we'll look at in Google forms. 35. Fonts (Beginning CSS): Now we've covered how to apply style sheets in different ways. Now let's move on to use infants. I didn't phone types to our websites, a really important to define the look and feel. It will take a look here over on the W Free Schools website in a section called CSS Phones . It would take a look here that is two main form types won't called seventh on one call sunset. The sensory forms on the left a much simpler and have straighter square edges. Sarah Afonso never hands have these extra detail on the edge, which you can see highlighted in raise Just here. A little further down, we can see there are two types or farm families on the left of the table will see. We have self. We have Sansa Ruth and also monitor face. These are all examples are a generic form family. Each one of these generic groups also has many farm families, too. He will see at the top. We have times New Roman on Georgia on these above types off, he said firmly. Then below, we have aerial on Madonna, which of phone families with type off son seven. We generally want to aunt both of fond family to our CSS, along with a generic family. So Charles at Sunset, which acts as a fallback if it'll first choice, is not supported by the browser. To avoid phones, which is not commonly supported, we can use what is called Web, say phones, which one school to Google and do a quick search for these Web safe fonts. Let's go on to the W three schools website interest here. So have the Senate versions unscrew affirmed, um healthy Sons City funds to So this has a list of common form combinations, which are widely supported. Most have a stock or free phones like you see, here we have our first choice as an example, have aerial. I was second choice. All of Helvetica on this is used. If the 1st 1 of Ariel is on supported, then at the end we have a generic phone family, such as sounds or sans serif. This is used if non of the overs are available or supported. Some of the fun family names here with spaces between are surrounded in quotes, just like you can see here. This is recommended but not required, so I'm going to go ahead and copy one of these phone stacks. So let's say, comic sons, that's copy the section off the website. Then let's head back to our styles dot CSS file on looking at a fun family to our project, So that's close. A sidebar on opening styles got CSS. We can on this to the body, since all the hate mail content is inside of our body tykes. So let's go down to the body on at our family and never complacent all free values, which was copied before with a cynical at the end saying that and then back over to the project in the browser and then refresh and you can see all the fun. Taipower has changed to Billy's comic version, another way to include pharmacies to include a font library such as Google thoughts. So let's do a search for Google phones on Woman Need is Fahnestock google dot com. Let's open this up. We can see right away there's lots of different phones to choose from. We can even filter down on the right inside by the different types, such as seventh ah, sunset. If you can even look through and choose one of these ones on the home screen. If you prefer. I want to do a search and choose a warn called Barlow so that in the search bar, this is the one I'm going to use on the left inside. If you want to add this for, just click on the plus symbol here, let's go down to the bottom on Expand this selected family. This is how we get the instructions on how to add this to our project. First of all, the top. We have a link, which is just like the link we use on our own style sheet. But this time it links to establish its Google has provided. So let's copy this link. Go to the project in the next hate Shimo. We can add this just blow over title. This think also needs to be added to over hate journal pages to let's on it to the port of detail just below the title on also to the Contact Us Page makes you will save them. Placement office file is important, too. We should have our own custom CSS file lust this and she was. Any changes will make as a custom style is loaded last will override any of the defaults. Well, look at this in more detail later on, though, Back to Google phones for now, actually to go down a copy, the phone family. So copy this line off the CSS. A man back over to all styles Don't CSS rather than this section with the I didn't before we could paste in our new follow version. Give that save. But it was the project and then refresh. Now all funds have taken effect on the page. You should see them being consistent through all our different pages. All of these phones physically look different. We can confirm he's working by going to the developer tools. So right click and inspect. And then over the rights inside under the body, who can see Barlow, which were chosen. If we win, check this. We can see a change with the font family on the screen as it goes back to the default. So you can clearly see that these Google phones and are working I will now see you in the next video. We'll take a look at classes and I ds 36. Classes and id's (Beginning CSS): classes and ideas is something which will use all the time When building websites they are way to select or to hook a certain element on our page so we can apply. I will see us as to it. We'll also use them later in the course to when working with JavaScript. Let's first begin with I d. We can add an I d. Attribute any element, then target this element using CSS. If we go over to the contact, don't hate your page. We've already used I ds in a section So taking a look for the name of the talk and if you go across the rights over here, we have an I d. Off name. We also had an idea of email on message to one important thing to note with i DS is that they must be unique. We should only use born I d name on each page. Well, then, I think this idea up in CSS file with a hash prefix. So to add some style into this name, we'll go over to the styles, don't see assess and then down here using the hash prefix were guitar, go to the name and then we could do things such as I did a background color. So let's change the background to be read and then give us Save Over to my were were Broza How many to go to the contractors page scrolling down and now have a red background for this name section. It's important to know the ideas must not start with the number two. If we're to go over to the CSS and then at the number such as this, the text editor turns it red to signal a problem. So let's remove that and save. So this is an I D. Which we used to select a single element on the page. But what if wanted the same styles to apply to multiple areas such as our products? For this case, we can use a class as in the same class names, all of all, productive tags. Well, I was to write some styles which will apply to all them. So if we go over to the indexed or hate Shimo on, then it will locate our first product, which is the controller for the surrounding div, which is here just about the link. We can add a class attribute off product on since we can use this more than once. That's competition. Ardito all six products. So is the 2nd 1 The 3rd 1 the 4th 1 And if you've got more than six at them to each and everyone on, that's all six. So gives are safe. We also have a product inside of the product detail page to so, looking at this to opera looked inside of there. Just go down to the main section on again inside the opening Div for the product. This will make sure the same styles we apply in the CSS will apply to this product to so this time instead of the hush prefix. If we go to the CSS, we use a dot to indicate that we're targeting a class within under the name of products but no conard. Some styles inside these colored races this class, along with the idea which were used before and also these element names just above are all cold selectors. They also small advanced selectors to, and we'll take a look at these later in the course. So let's go ahead and aren't a border to all productive of one pixel wide, a solid line on the color of gray. Then we could set the width of each product to be 200 pixels wide. The semi colon. Let's see how this is looking off in the index page because I reload on Go down two offers product. 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 on a few ways which weaken deal this We could set the overflow property to be hidden just like that and say that and then reload. And now I could see the images in side 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 of this will be to set the maximum with property rather than the overflow . Naturally, this overflow number low. This would target the image selector and then use the marks with CSS property and said this to be 100%. Give that save and then reload. And this makes sure the image stretches no further than the surrounding container. So it looks like better. This is more like what we want. However, the product is still stacked on top of each other because local mentioned earlier developments of block level and begin on a new line. But this is OK for now, and next will move on to margin and putting. 37. Margin and padding (Beginning CSS): margin and puddin above really important CSS properties to understand they both are basically a way off creating space. If we look at this diagram here, imagine this was one of our products. We'll probably wanted to appear something like this with a little bit of space in around it . In reality, though, this is how it would appear by default place in the top corner with no spacing. We see this in action in our current project, where the product default is a top left of the available space. To fix this, we can apply margin to the outside. Often element to create some space in margin can be applied to be the same on each side. All I can as a different amounts on each side if required. The same thing happens when we are 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 know want the image to be tight to the top corner. For this situation, we have what is called pardon putting also on space in, but this time inside of the elements. So margin is outside of the elements and partying is applied to the inside of the elements . The darker green border highlights what the party and actually does. He 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 on puddin could both be set for each side individually by saying top right bottom and left values. Thankfully, there are some short on versions too. Taking a look at these two examples on the left we consent margin or partying with four values. These four values are clockwise beginning at the top so top right bottom and then left. He would have both the top on bottom values set to 10 pixels. Then the left and right values the same 25 pixels. For this case, we can also shorten this even further as we see on the right inside, the first value is a top and bottom on the second is to the left and right. We have already seen this in our project. When we sent it, our website, using margin zero also zero tells the browser tart. No margin to the top and bottom off the body section. Then the additional space on the left and right can be divided equally, leaving the body section centered on the page. So enough, this theory. Let's give this a go inside while project starting with the margin. If you go to the styles dot CSS on up to the product, we can add some margin to this product section off five pixels because of only added one value. This will apply to all science of the product. Let's see this with a reload, and now we can see five pixels of space on this is appearing around all sides of the products. Then go ahead and add some putting, too also a five pixels and then refresh. And now we have a five pixel cushion on the inside off the diff. Also, another important thing to note is that browsers often apply default values of margin. Imparting to this means sometimes may want to reset the values back to zero, and in order list is a common one, which is often applies to let's go over to the CSS weaken. Reset these values. If you go just below the header and footer Let's start at the U. L. A number could set the margin back to be zero on. If we watch out for this, we'll refresh. We're seeing everything movable as a default margin was removed. We can also do the same to to remove any default Puddin again, back over to the another list. Anamika reset the party in back to zero on. If we keep a close eye out for me, refresh. We see only on order lists now moved over to the left inside. This is some of its about in mind if you're wondering why something looks a little different than expected due to the browser out in some default values. Also, just to make things even more confusing, different browsers often have different values, too. There are, however, a few resource is to help us with browser defaults. If we go over to Google and then do a search for CSS resets on the top home once is Mayor Web. So click on this. This is a style sheets. If you scroll down, we could see the cold just to you. We can use this inside of our project to effectively remove any default styling provided by browsers. This thing gives us a blank converse to start with. Alternatively, we can use a never CSS file called Normalize. So again, it's to a Google search for CSS normalize on his top link is a woman needs. So click on this normalize works slightly differently to reset rather than remove any browse, it defaults. It provides styles to make our websites display more consistently across a range of browsers. This is just decide No, however, and something you may find useful to include this in soil projects. Only to do is to download the file on added to our project, just like we're doing with our own custom style sheets. So this is it now for margin and put in. 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 fall into evil being in line or block level elements we see on the screen here, some in line image elements. This has the effect of each elements being on the same line if you will fit. There is one thing, though, to be aware off when using in line elements. We conard margin and planning to the left and right like we see here. But we could not add it to the top and bottom. This is because content added with in line 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 unable to set the width and height to block level. Elements, on the other hand, begin on new line and take up the full available with such as I def all text. When using e p element. They also allows this at any margin and putting two without any restrictions. Unlike we've just seen with in nine elements. There is a way, though, to have this in line behavior while also being able to set the margin and pardon, and this is to set the element to be in line. Block in line block is commonly used in navigations by default list items. A block level elements. So when will make a list of will start on top of each other? We commonly see Nav Ling's ours in line or in line block. Like we see here in line. Block allows items to flow across the page but still gives us the flexibility to control the party in margin values. We can change any elements default display type by using the CSS display property to override it. So let's go and give this a go now over in the CSS, starting with the ally element. So just below this or or the list, we can target the ally and then said the display type to be in line gives us safe and back over to your project. Refresh. And now our links appear in line across the page. This works as intended the head of list items of in line, but targeting all of the ally elements like this also includes these sidebar list items, too. If you only wants target. These had a list items. We can be more specific, so if we go with the CSS rather than just targets in the ally. We can aren't header l I because I save and over to the browser and refresh. And now we can see that this only select any list items which inside the header he signed by ones untouched, we can go even further with his header Section two. By making the site title on also these novel ings in line to in fact, we can make these in line block So been still control the height too. Certainly this is in line. Block will make sure this title appears on the left inside and then over on the right inside will get the navigation links which is surrounded in the nav element. So back over to the CSS, we can target the site title. We have had a H one then separated by a common. We can also tiger the enough element to said the display this time to be in line block and then refresh No, I have the navigation on the site title. Lining up across the header in line block is also a good way of lying up the products to. So let's give this a go inside the product of here. Let's change the display time. They're going to be in line block or to the browser on inside the index page. Let's cool down. And now we have all products lining up across the page two. This in line blocked property can even be used to have the sidebar, which is currently here and also these products side by side. So remember the sidebar was in the aside, elements on all these products were contained in the main section. So let's first go over to the CSS. I'm looking set the width off the main under the science section. So I'm going to add days just underneath the head of a Tron. Enough section that's first begin with the main section and set the width to be 680 pixels . Then we can make sure the side by also fits across the road by setting the aside width to be 270 pixels. So off selected these two values here. When combined, these both less than the 1000 pixels body width, which were hard earlier, therefore certainly aside a main to the sizes. We'll make sure that they both fit across the page and also laughs, um, margin and putting, too. Let's see how this is looking. We load and we can now see the sidebar is a little bit wider if we take a look at the wit for this line here. And also the product section has been restricted to this part here. So now let's go over and set the display type to be in line block. So first the main display type of in line block and then also for this eyeball and then hopefully for, say this and now go over. We can now see the side by side since the aside on the main section above in line book. So things stands look better now, but the signed by items down here or at the very bottom to fix this one working with in line elements or even in line block, which acts a lot like in line. We have access to a CIA, says property called vertical align. If we go over to the side bar just from the display, we can also set the vertical line on place. The text at the top on a population on push our text to the top of the sidebar, which it does This vertical align property can be used to align in line items, all items inside of table cells. We mentioned in the slides earlier that when using in line elements, we can't add margin and put into the left and right, but we can send it to the top and bottom. This could be seen with our product links of more info on at the cart. Let's go ahead and aunts and putting to see what happens. So first we need to give them a class over in the index page, and I'm going to give these a class off bottom. So first, let's go to the very top product on. Look for these two links that we can go ahead and aren't a class name off button class equals button, and then when it's on these, tow all of our products. So I'm going to copy this Ah, not just the second link to and then go down to our second product on. We can add it to all these to keep the eastern inconsistent. That's all for product. The four products on the last one to then we can use his boat in class, over in the star straight so down to the very bottom on the classes. Use it dot in the name of button, so I'm put in off 10 pixels of the fine. Say that and now over to the index page and refresh. We consider the pardon has added some space in between the bones, but there is no extra height. Remember, we only added one value of 10 pixels, so 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 affect the height with margin and party in on in line elements. But we can't on block on in line block. Therefore, if we go to the CSS and change the display type of the button to be in line, block conceivable. Affect this house in the browser, the sooner to refresh when I will see some extra height added to each one of these buttons . So here we've looked at the display property on. As you can see, it's really important when laying out our website. It may seem a little tricky to understand the first, but you can see with this example how, if activities, even by just adding a few lines of cold into what will see assess. 39. The box model (Beginning CSS): in this video of a concept 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, what is it can really cause problems when trying to fit elements onto a page as an example . If we go over to our with CSS on who change our product with inside its product class here to, say, 210 pixels. If we say that, don't reload the browser when no one have two of these products fit in in our room. Now let's go back over to our with CSS and investigate. So if you look our product, we've set this to be 210 pixels wide. If we take a look above, we set this main section two B 608 pixels, so our free products down below come to 630 pixels in total. So so far we still within the 608 pixels rapper for the main section. But then he may be correctly thinking we have some space around the products we did add five pixels margin to all science. These extra fire. Pixels per side would then mean each product takes up 220 pixels each on a total off 660. But again, this is still within the 608 pixels. Main section pardon is the inside of the elements, so you may think this is irrelevant. We did out five pixels appointing to just down here. Well, in fact, is actually included, too. Let's go over to the browser developer tools and see how this looks. All browsers have the own version off developer tools. If you're not using chrome, you'll be able to access the developer tools by looking in the menu boots 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. So click on this arrow there, and then we can hover over all product and then click the Dave with a class of products. So this allows us to see the hate Schimmel on the left hand side so he would conceive, highlighted our first day of the class of product and also the CSS, which applies his product on the right inside says our productive here with the border. The wit margin part in on the display type of in line block. If we now scroll down to the bottom of this 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 know we set 210 pixels wide as we see here. Then on top of this, we have five pixels or padding around each side. We have a board value of one pixel to and then on the outside we have five pixels of margin . So it's important to understand that all of these extra punning border margin values added to this elements making a bigger overall. We set the wait for the product to be 210 pixels wide. But in reality each bullet takes up a wig off 200 for two pixels. Once we are done, all these extras This is why in the browser, all free of our products won't fit on the same line. There is a way to change yourself. We can use the CSS property off box sizing. It will go back over to the product inside the CSS. Then we can onto the box size and property on set this to be border books. But it calling out the ends saying this the border box will make sure the width we declare is a total witch. So a low have basis demo on the week. All this also applies when working with the height too. So that's one thinks about in mind. So now with the box sizing sets of border box with regard to the browser and then we load just shrink down these developer tools. What else? You have free products on each row. If we go back over to the developer tools when fuck will need to refresh first and then drugs back up still. But in our first product idea, if we now scroll down to the very bottom to all box model, we can instantly see that the elements in the center now has a value of 198 for this element wit. So this is being reduced to accommodate the party in and also the board of all used to to then equal 210 pixels. Then we still have this five pixels margin surrounding outside, just like we did originally. So this is how the box model works. We even need to take into account any extra value, such as board and partying on margin to, 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 these this over and left inside. The sidebar still have the bullet on the left hand side. We can also look at in some more space in it to these items too. So first, let's get to work over in the CSS file, we can do things which are is changing his bullets to be a circle using the list style property. We apply this to our l I item. Let's scroll up to the in order list the number concerned that the ally, then after we aren't the list, our property number can change the value to be circle, you're not safe and then reload the browser. And now these black bullets on the left hand side and now hollow circles. Currently, the circles outside the flow of the content on this is a default setting. If we make the brows a little bit wider, we can see this is the edge of the body section on these circles. Outside of this, this could be changed to be in side of the document by adding the inside value so We just have to circle Conard inside and then go to the browser, and this now pushes over our list. Items to now include a circle inside the body. There is also the square option to change circle to be square, and it's what gives a square on the left of each list item. They also many more, but a lot of them and not used often. You kind, of course, check these out with a quick Google search. If you're interested, didn't find no more. We can even on our own icon or own on image in Places Square to why aren't in the image you are all. So let's remove the square on just after the inside going toe onto the U. N role and then inside the brackets weaken. Aren't the file path to our image. We could go for one of our existing images inside the Images folder, so let's go for cables. Daughter J. Peg. Let's see how this is looking. So it's looking a bit of a mess at the minute because of size off our image. So obviously this image is far too big, but you can see how this could be used if it was a small icon instead on. Of course, this is repeated each list item the inside and outside rules still apply. So if we were to remove inside and then replace this with outside now, images would now move outside the document flow. So in fact, we can't really see without zooming back out. And there we go says, or cables on the left of each least item. And this is a behavioral hard right at the start, This video at the beginning, with the bullets. All I want to do it all for this project is to remove these markets completely on this Condoned by I didn't the value or non so rather down this image. In fact, we can also remove the outside under simply changes to be known. Then we just have a standard set of list items on the left inside. Then, to add some space in between these links on the top and bottom, we can increase the line height. So what in the list item, we can go ahead and aren't the line height the value was up towards. But I want to set mind to be 30 pixels. I don't see how this is looking good. So this is now. Increase the line height to refer to pixels, which is that it's a more space in between each item. The last thing I want to do is to add some space in to keep the text away from the edge of this container. This can easily be done with a little part in on the side section, so over to the assigned section of the CSS, and then you go ahead and add some putting off 10 pixels, then refresh. Great. So the space in has now being applied to the side section. But in this party in has also caused the shop by Section two B now lower than these all items section on the right to make this more even. We just need to aren't the same party in value to the main section two. So just above, we could do the same with the party in off 10 pixels. Let's see how this is looking great. Another shocked by in the all items section now line or better Whitson putting around the outside. Next, we'll move on to styling links and pseudo classes and 41. Styling links and psuedo classes (Beginning CSS): as we can already see in our project by default links don't look very good. You have an underlying section which you can see just here and also in the head of section my nieces room in no. So it's underlying is something which want to remove also by default the colors and not very attractive. So let's start by removing its under loan from the links. We can do this if we go over to all CSS and then just under the list items that are the A talk. To remove this, we can set the text decoration to be a value off non. Then over the browser. They should now remove the default links from the head of section on, also from the titles too. So this takes care off the underlying. But we still need to change the text color off the links to both of these products on also the head air on foot, a section down at the bottom. We could do this by Addie in individual classes to each item on certain the individual CSS cooler properties. Or we can go ahead and do something a little simpler. First, I'm gonna go over to the body section and set the default text color with the equal A property by certain an RGB value off 49 for the reds. The green 46 on 46. The blue too. So it gives us save on if we go to the browser and refresh would now see a slightly lighter Grecula So back to the links. If we go over to the A section Robson setting a value such as an RGB or ex color, I'm going to go ahead and set the color to be inherit. Thank you. That safe the inherit keyword specifies that property should inherit its value from the parent elements. The product links will inherit this color from the body section and also the header and footer links will inherit the cooler value from this section here. So let's see how this looks over in the browser. Okay, good. So now we have the head of links the white color. We can see the products have this darker gray color which matches the body and then down on the bottom. We have the white links for the foot area to we can see exactly what is going on If we go inside the depth tools. So right, click and inspect On first, let's select one of our products over on. Right inside we start to scroll down. We can see we've inherited from this body section and we've inherited the fund family on also this great color which were added in. Click on the selector once more and then go off to the head of links. And here we can see we've inherited from the header this cooler of white. So again struggle is on and off and see the effect of this house closed on the death tools . And now, with these links taken care off, I want to now move on to what's called pseudo classes. Pseudo plus is a kind of like an extension to a CSS selector. For example. We can still select links with this, a selector which you're have down here. But for example, only one of mouse hovers over them, or if they have already been visited, well, we could select a list item with Ally just like we're doing here, but only select the third item in a list. There are quite a lawsuit or classes available, but let's take a look at some of the most common start in with hover. So if I go down to our a element for our links on, just blow this a sexual looking ads and new elements separated by a colon weaken aren't the name of Allah pseudo class. So for this case and going to use hover. So this was like all the elements. When the mouse hovers over them, I could do some things which are set in a cooler on a hex value. 00 e 69 e nine. And of course, this could be any Colonial choosing. Let's test is in the browser now for reloads and hover over any of our links. But now we'll see this blue color, which, without it also supplies the products to and also the foot area to at the bottom. If we now go over to our product gold inside of indexed or hate, you know, let's go up to your first product, which is just here. He would have two sets off P elements, one for the price on then one for the description. Straight after, we can use a pseudo class off first off type, just like the 1st 1 in this group, which will be all price. So back over to the styles don't CSS just like we did with the links weaken first select other elements out of coal on and then at the name of Allah pseudo class which is first off type. If this woman can also set the color on red will be fine over to the browser refresh. And now we can see the first set off. P elements in each section has now been set to read No. Okay, so this is the price on this is repeated for all elements to There is also last off type two. Let's change is to be the last off type. The color red is also fine on. You can probably imagine that this will select the description wants to refresh because this is the last set of P tags within this group. This also works for other elements too, such as our list items. So, for example, can change p to be ally. This was like the last least item in each group. So, for example, the contact goes down to the bottom, the same for the head air and also for each group in the sidebar to no only course like the first or the last element. We can actually select any by using the end of type. So if we wanted the third least item, we could use end of type, which is nth. They want at the brackets just after this on. If wanted to target the third list item in the group were number free. Give us safe photo browser and now offered list. Item in each group is now selected on this number. Could be any of our choosing. So I'm just going to delete this example here on Save that we stole the project. Dr. Hawass, if we bring up the finished version off the textile on its on these 12 2nd sub, it would take a look at our finished product sections here. Down on the bottom, we have the links of more info on Also add to cart using the pseudo selectors. This is how we have the buttons as different styles. We are different CSS for the last of type. Let's do this over in old version. If you go back over to the CSS this time of the bottom, we can also target the bulletin the colon and then last of type, so this styling will apply into the last button in each group. Let's change the background color to the blue times it would seem before, which is hex family or zero e 69 e nine. And then finally, a color for the button off white, then over to the Broza and now house a nicer looking links at the bottom of each product. This is the first look at pseudo classes on you can see how useful er for target in certain elements, depending on their state. 42. Float and clear (Beginning CSS): Welcome back, everybody. We're going to take a look out Floats and clear in this video floated away 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 home page of a click on the game controller, and then let's go with the product detail. I want this image, which is just here to appear on the left. Inside. We have all these product texts and the information over on the right inside of image we have already seen. This could be achieved by using in line on in line block display times, but we're gonna concentrate on floats in this video. If we go over to the file, which is the product detail dot html, I'm going to add a new class to the product so we can select this in the CSS. So just after the class of product, we can add a second class inside here on, let's say product veto. AnAnd, back over in the CSS, the following styles are applied specifically to this product detail page. So let's aren't a comment. So a CSS comment is a forward slash a star. Then I will text, Let's say put a detail page. I'm a close this off with star in the forward slash again so that I'm going to make the product of a little wider. So it fits the image on also the text side by side. Let's target this product Heifer knit detail class Anamika set the width to be 660 pixels so that 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 on to float in. We want the image to float to the left inside or if I could have floated to either side. But in my case, I wanted to be on the left hand side and then the text over on the right inside. So therefore we can select the product detail image inside the CSS. We're product detail and then image, so it's begin. Let's set the maximum with off the image to be 50%. That's 50% off the container. Number can float this to be on the left. In fact, before we do that, we'll just leave that empty refresh, Okun see, by defaults, we have the image and then the tax Would you block level on its own separate line? If we then go ahead and aren't a float and we flow the image to the left, Let's see what effect this has. Okay, good. So I've now restricted this image to be 50% or half the wood for the container, then floated the image, the left of all the rest of the content. This means attacks now occupies the remains space on the right inside. Now I'm going to add some more text of this product to fully show the effect that the floaters, if we go over to the product detail page and then at the very bottom after add to cart that just opened the P tying stance and text. If using visual studio code like I am, we can simply type in Laura, um, and then hit tab. And then we're given some sample text which will go between these p thanks. If not you can simply write any concept which you want, or do a Google search for Laura Ipsum, which is these two words here. And then you build to copy and paste some sample text, give us safe reload when we can see straightaway that now there is more text available well concealed up Better now, the images floating to the left or 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 rights instead of the left, so let's give this a go refresh, and then the same happens. But when you decide, you can also set this to be known. And now we're back to where we started with no flow taking place, and then the block level tax will appear on the next line. So floats a really useful for this kind of thing. But like most things that are awesome girl bucks before a lot more recently on techniques decorated floats were on. Sometimes till I used to lay out a full webpage, you would often see the main content floor. It's 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 give just above the foot. Sir, we have an image on some text inside, so let's go to the product detail and then down to the foot area, just go down to the bottom. So just between his main and footer, blessed of a simple div, first of all with an image on the source, just commit any image. But I'm going to use one from Images folder. Let's say the controller J. Peg then attacks in the P tags off. Hello. So let's go over to the product detail page in the browser and then refresh. And there's our image on the text on the bottom. So this looks as we would expect inside the browser. So let's go back over to the tax editor and add afloat to this image. So in minus fine, this example was at the float to be on the left. Let's see how this looks would refresh so we could see straight away that something strange has happened. The content below, which was a div or for this foot area now moves up along side 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 was happening. You could go ahead and click on the arrow and ends like the parent def on. This is a day of which were added for the image on the text of Hello. So let's go to the image on This is a parent. If here we can see, it will hover over this Div appear on just here we see some dimensions So the div is 1000 pixels wide by 19.2. So this shows a div was only having the same height as the text off this hello text here inside of the container. It doesn't seem to take into account the height off the image. This is because floated items do not affect the height of the parent container. This means this foot area below basically ignores This image on is pushed up to the height off the hello text. We can fix this by setting the overflow to be auto on the container. So let's go over to our Dev. Um, we could set the style and then, as in the overflow, also like over and refresh and scroll down. And now Old footer is back at the very bottom. If you go back into these deaf tools and go down to the diff what you've seen before is that a click I'm looking now see on the screen that school up, that the height of the deal is now 425 pixels, which is also accounting for the height. This image to solution to this floating problem is called the clear Fix. This old for property will fix the problem in most browsers. You can also do a Google search for the micro clear fix annual finds more CSS solutions to this problem. This will also become less of a problem to when we start looking out the CSS grid on flex box later in the course, rather than using Unnie floats for layout. So that's closes on just a recap When we use a floated element just like this image, the height is not taken into account, which is why this foot area was pushed up below this text here, which wasn't floated, is that something which is really key to understand when using floats. Also, when work would float too. There's also whenever CSS property to be aware off on this is called clear again. This is probably best seen in practice to understand. I am first going to modify this example. Toe have left and also right, floated elements. So what present would have the image which is floated to left? Now let's go ahead and open up the P tanks on float this to the right So style loads to the right, cynical, not the ends. And then it's our deferred elements which is not floated. So some simple text will do for this. So that's, say, not floated and say that Oh, to the browser and then refresh. So at the moment we have the image which is floated to the left. The text on the rights on a flocked just to make this simpler. Well, I had floated in there, so we have the floated image to the left. We'll have the Florida text of the right and then they're not floated. Text in the center this not floated. Text is alongside the image, and also in the same line is a floated text. Clear letters specify this. Non floated elements can be placed alongside these floated ones or not. If we go back over to the P tanks and then also had a style property and we'll say, clear the left float. But with the browser and refresh the not floated text now appears below. This is because we're basically saying that this non floated elements is no allowed to replaced next to this image, which is floated to left. We can also declare that we don't want it to be positioned next to write floated elements to We can change just by clear and the right, and now it's alongside the floated text. But on the next line. So this tells the browser not places alongside, and it 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 is clear value to be both and then refresh. And now the Texas below both the left and right floated elements. So now I'm going to go ahead and remove this extra tips section as we dont knew this inside the project and then say that's you can also make sure the product detail image. It's floated to the left and then our project is back to normal ons. Also, we can remove these extra Lauren Ipsum text. Let's go back up to the product on remove this long section of text and there we go. So this is how we can use floating clear. It can be quite a bit to take in if you have not seen this before. But this is just one of the quirky 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 the right. Another important CSS property we can use to position our elements is the position property . This gives us various methods of place in or a Justin where wants an element to appear on the page. The 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. You know, hate smell 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 is more products then? That's selected elements such as these button at the very bottom. Let's go over here and adds an idea that is born on any name is fine. I'm gonna call this position and then save that. And then if we go to the C s s as usual, go down to the bottom and target this with the hush and in the name which will position the default value for position is static. This simply means elements will be placed where it would normally be in the flow of the documents. This could be in the top left, like we've seen earlier, with block level elements all the next position in the role. If it's an in line element set in siestas properties such as top bottom, right or left of no affecting offset in these elements, let's give us a go. It's our 10 pixels to the top. It was an index page. I'm a considers adds to Kabul on has not moved at all because it only takes up the position it would normally be in. If we didn't want this offset to apply, we could change the position to be relative. So that's our position off relative just above this. Now we save and go back over to the browser and then refresh. Now the bullet is being pushed down from the top by 10 pixels, relative position in places that elements where it 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 off any overt surrounding elements. Next we have absolute has changed relative to be absolute and then over to the browser and was he jumps off a place it's now up at the top off the Web page. Absolute, unlike the last two values we've looked at, will take the elements out of the normal flow of the document. This means it will not be placed in the next available space. There is actually no space created for it. This is why it's in other top bubble over elements. So currently, the top value of 10 pixels is taken effect if were to go over and add a new value. So let's other left. Also, 10 pixels refresh, and now this is placed 10 pixels from the top and 10 pixels from the left. This position has defaulted to the reference from the very outside of the Web page. Autumn a more precise, the hate schimmel container elements we can also change. The element is a reference from if we don't want to use a hate schimmel element only to do , he set the position off another parent elements to be relative. So if it wanted the ball into the referenced for this main container, for example, surrounding the products we could go over to the main tank in the index page. Enamel could add a CSS style property, and here we could set the position to be relative and see how this affected It's with a refresh. And now this is referenced 10 pixels from the top and left of the main relative container. Or if you wanted it to a reference from this first productive. What could do exactly the same here, instead of otherness to the main look, would remove this and then added to the day of the class of product refresh. And now this is referenced in the top left corner off this first productive. So I'm just going to remove this in line style and then save up, so this absolute value gives us a lot of flexibility. But we do need to be careful to, as things can also move as the browser he stretched. This means we need to be really careful when using absolute. Now let's move on to the fixed position. So rather than absolute changes to be fixed, I'm going also leave the top left. That's why over now, if we say even go over to the browser, we'll see nothing looks any different at first. It's when this bomb was referenced from the HTML we see the element is also removed from the floor of the documents, just like it was with absolute. Also, we can see these top on left values still take effect. To see exactly what this does were may need a bit more content on the page, so I'm going to copy. I was six bullets. So the first day with a class of product, AnAnd's girl right down to the last one, which is just before the main site here. So copy that, and then paste is in once more, so we now have 12 products and then be fresh. Then, if we go ahead and scroll down the page, the button that stays in this fixed position in the top corner, you may often come across those four things, such as an email sign of box, which you often see in the bottom corner. Finally, we also have the sticky option so it could change the position to be sticky. Oh, in the style that success but this time going to target the side you got saved and then over to the browser and refresh. So now our first glance over page looked back to normal. That seems to be nothing different than the originals. But if you go ahead and scroll down rather in 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 this for navigations or menus, so they always visible to the user. So I'm going to remove this side section and then give us save. You can also remove the rest of these products which were at it. Somebody's going to undo that. Just leaving the original six products. Okay, good. This is how we use the position property to have better control over place number elements on the screen. 44. Styling forms and inputs (Beginning CSS): I want to know. Move on to the contractors page are some specific style into this form. This is our current version here, but if you go over to the contractors page on the finished version, we can see it looks a little bit different. But it's mainly just a case of audience, um, spacing on alignment. You can, of course, go ahead and do it yourself if you feel confident doing so. But if not, just follow along with me. Let's begin by going over to the style dot CSS. Never go ahead and make a comment. So inside here, working are the contractors and then go ahead and targets will form looking at some basic styles, such as putting so putting off 10 pixels, which will, of course, appear inside of the form element. Then start, um, spacing on the top and bottom of the form we conard some margin so 10 pixels on the top and bottom on zero on the left and right. We can also make this a little bit wider, so let's say 600 pixels give us save and then refresh, and now I have some basic style infra perform. Things would also look a lot better if these 1st 4 inputs were also lined up. So at the moment before, import areas are all pushed up to the edge of the text or the label. In fact, to do this, I'm going to add a custom class to these first for give sections. So over to the contractors. Contacto hay HMO. Let's take a look for the 1st 4 gives, which begin with name that's out of class off in line no one wants. 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 def for the Section two, make sure you save that number could target this over in the CSS, starting with certain width off the text label. So don't in line for the class and then select the label. And the width can be any value of our choose in. But I'm gonna go for 100 pixels, so gives us save. So first of all, if we refresh, we consider there's no change. This is because, as we've already mentioned, we can set the wait for in nine elements on by default label is in line, so I'm going to go over to the CSS and changes to be in line block so it can affect the width. Okay, 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 target certain inputs based on that input type. So first of all, who set the imports and then open up the square brackets? We can then tiger only the type oh text and then separated by a calmer. We can also target the input with the type of email, too. Open up. The braces has been known to do so for these 1st 2 Let's aren't the puddin off 10 pixels. The number could make them a little bit wider. So let's go for 400 pixels over the browser. Good. So this looks a little bit better, but we can see this text area is still smaller than it will be input. We have a couple of options here. We could even go back to Haiti more cold and add more columns since we have the columns and rows attribute on the text area over Conover ideas in the CSS by also targeting the text area. Now if we reloads all inputs and now the same width just to wrap this up, let's are some margin also around each one. These developments just add some space in it to the top and bottom. We can do this by selecting the form and then each day which follows. So that said the margin to be 10 pixels on the top and bottom on zero on the left and right . So remember, this will tired all the developments which are a direct child of form, so reload and now have some space in on the top and bottom of each Dave section. Okay, good. This form now looks a lot better with some or 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 have come a long way in the section on by now. Hopefully, if in a lot more confidence with using CSS, I would know like you to go ahead and add some final styles and finishing touches to this project in particular, I would like it aren't small height to this header on also the foot area at the bottom. Also, if we align the head of links these ones here on also the search box over to the right inside, just like if you visit the finished version here. So push everything over to the right inside. Also, if we set the text alignments on the products to the center just like you see here, grueling hours are left lines finally over In the product detail page, you click on this game controller a little bit of style into for this table at the bottom. We have not covered styling tables yet, but you can use all the same techniques you are, you know, such azadian margins and putting to the individual table elements. So this is what I would like you to go ahead and do remember, there is no right or wrong way. What are we running through this in the next video to show you how I came to this finish version 46. Solution: final project styling (Beginning CSS): I hope you're managed to complete the final project styling challenge. Remember, though there is no right or wrong way to do this. But I'm not going to run through the final styles for my version. Starting with, I didn't some more height to the header on the footer. Let's go over to the styles Nazi SS and if you go up towards a talk, we already targeting the header and footer area. So all we need to do is the art small pardon to put all the inside of the dibs. So 20 pixels on the top and bottom on 10 pixels on the left and right refresh. But now we have small party in inside the header on the foot area at the bottom. Then we could make this site title at the top take up 70% of the week for the header which will and push over the links on the search box to right inside. So let's go down to the head of H one. So but the head and I head of H one here. Then let's go for the Hedda Hate one title and then set the wave to be 70% and see how this is looking great. So this causes the links in the search box to move to the right. If we open up the developer tools and then highlight the section weaken, see the effect of what would you stone? This now takes a 70% of the header, pushing everything else over to the right. So this technique works these projects, but later will look more elegant solutions when we begin looking flex box on 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. So we already have a productive here. Let's are one more CSS property off text line center. There we go now on to styling for the table. We can also target the table with the table element just like we're doing with previous elements. So let's go ahead and aren't a comment. So our table inside of there, so I start by selecting the table elements and make it a little bit wider, so I'm going to go for 400 pixels, said the text line to be on the left of each so and then also I some margin to the top and bottom. So 20 pixels on the top and bottom on zero on the left and right. Let's see how this is looking. So it's like the game controller. Okay, good. So now we've got some margin on the top and bottom. If we select the developer tools, then highlights our table cells, we can see by this blue section all of the text is aligned to the left That's closes down. A number could move on to disk option area at the top just to give it a little bit more style in on also some partying on the bottom to keep it away from the table. So have the caption selector. So let's start by certainly fun. Wait to be bold. We consider this to be italic with the font style, so that's set that to be a tonic. Then we can add a border. So previously we've used borders around our products, and these by default, applied to all four signs. We can't add individual sides. So if we wanted a line just below this text here, we could add a border bottom. So instead of border working hard border bottom so aboard a line of one pixels on solid, in fact will make this dotted for this example and then at some party in off 10 pixels to give us some space in off the Broza refresh. There's a were dotted line, and now the small space in by adding the 10 pixels upon him. So we're nearly there now with the table. All want to do is to also add it's, um, putting to these cell values. Remember, we've got the table heading, which is et hate tags. And then the data has the TD tanks. So go ahead and select both these in the success we have th calmer GED and then party in 10 pixels, refresh and just to finish his table, often going to also add a hover state with a pseudo class. So each time will hover over one of these rows, the background color. It will be highlighted, so let's like the table row and then on the hover pseudo plus, so each time will hover over a role. We can change the background color to be a hex value or F five F five f five reloads on its a soul background colossal. If we zoom in, we'll be able to see this slightly better. This isn't now of all the styles which added to this project, I hope you manage to add some of them yourself and make yours look even better. The minders. Next, we're going to go on to the final video in the section where we look at the cascade on inheritance. 47. Specificity and the cascade (Beginning CSS): we're going to finish off this CSS section by looking at something which contribute a lot of new developers. This is the cascade on 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 will look at in this video. For example, if you have multiple CSS selectors, all targeted a hate one elements or if you have more than one style sheets, also with some rules for the hate one elements which one will ultimately win? The answer is the most specific rules will cascade down from the least for the most general reals. Fruits of the most specific rule for the element. Probably the most general and simplest way to decide is the sauce order. It will have more than one selector pointing to the same elements. The last one in our source code will override overs before it. Let's go over to our CSS and see this in action. So let's target the hate. One element, which is the site title, said the color to be any value such as red and then at a second CSS property, is that the text decoration to be underline. Then, under this, we can also add a second h one rule selecting the color off purple. It's now have to CSS selectors, both targeting the hate one. Let's reload the browser and see which one takes effect. We can see we have this purple color on also the underline. This is because the cold is read from top to bottom, meaning this text decoration from here will still be used. I bought this color value of reds will then be overridden with this value of purple which appears after it. We can also see how this works over in need developer tools if you right, click and then inspect and then if we select the's head of the top with H one off on the rights inside, we can see the styles which apply the's selectors on the right are all apply in to this hate one We will look at the order in which he's apply soon But the thing to note here is this color red is being crossed out and then the color of purple is then it taken effect. This source order also applies when we run in multiple snow sheets. It will go over to our index dot html and then up to the top section. The bottom style. She will always override any style sheets from a book. This is a reason why we usually want to place our own custom star sheets down to the bottom . So brokenhearted cushion styles which will override any from a booth. The next thing toe affect the cascade is specificity. This is how specific a selected is. If we go back over to our styles dot CSS. You know what example here? Both selectors are page one. Therefore, they equally specific. When this happens, as we've just seen, Sauce Order will take priority. Let's take a look at how will calculate how specific selectors are. So over on the left. We have some examples off a selector and then on the right inside, we see how many points replied for selector. So the first example in the first row will see that I hate one or a P, which is the standard elements, has one point and that's one point per selector. So currently our hate one is only worth one point on the second row, a class or an attribute or even a pseudo class which have already seen counter 10 points in the third row. We've seen an I D selector such as the product I D, which have already used is worth 100 points. Then we'll see at the bottom of 1000. Points is for the in line styles. This is one answer the style attribute to a hate email elements we can see from this table here that the hate one just has a single point. This is what we're currently targeting in the success on the second row, we have dot container page one. So we still have our single points for this level one head in which is here. Well then also get 10 points for this class. So this is more specific than the page one because we now have 11 points just below this was seen before. That's an I. D. Has 100 points. A name, just local mentioned a normal CSS selector. So just P is a single point. The center was 100 or more points make it more valuable than the top two. We also mentioned that a pseudo class such as hover if you look at the first slide is worth 10 points. So have a with 10 points here for the pseudo class. And then we have two selectors, which is the ally and then the A, leaving a total value off 12. So back over to our CSS. Let's add some comments to the top of each of these and welcome how many points we couldn't have. So this is worth no hundreds, no tens, no thousands. So this is currently a single point on Copy this, but then paste is below, so we have to equal elements, both worth a single points. We can be more specific by adding a header. So that's odd. Had, uh, h one to the first selector. And now we have two elements of this now equals two points in Seoul. So now this is more specific. So now we should have a color of red with on time. So that's refresh and there's our red headed color. If we again make them much by I didn't header to the second elements. This is now also worth two points and therefore the source order will learn it. Declare purple the winner so refresh And there we go. So Let's try something else. If we go over to our indexed or head Schimmel and then go down to the header. Let's aren't a class to this header on head. It is fine. Then we can change the CSS. So the 1st 1 for our to the dot and make this a class. We still have the single elements like the here, which is worth one point. But this time we also have a class which is worth 10 points equal in 11. So now we have 11 points for the firstborn, so we should expect the red color to win a game. Say that refresh and we see that Red Wings as we would expect, change in both to be a class with the dots will also make this 11 points and then refer back to the source order, meaning the colored with the purple. So what's about an I. D? Let's go over to the index Still hate Schimmel. Rather, the class we can change is to be an I d and then over to the style sheets. So first of all, instead of a dot, we can aren't a hush because this is an I D and now we would have a total. This gives us total of 100 more. We get 100 points for an I D on worn for a single selector, say that refresh and now Red wins out. Hopefully we start to make sense now, as we look at more examples, we also seen in the slides that in line styles count for 1000 points, so they should be the most specific on went out. So let's go over to the hate warn, which we currently working with as an in line style. So this time was said, the color property to be blue. So this is now worth 1000 points. This is worth 100 more So now the blue color should win out. So even though this is worth the most points on wins, there is one thing even more dominance on. This is the important declaration. Even though we have this in line style in the hay Gemmell, we conard these importance declaration into the CSS to indicate that we want the style to win. So after the Red Weaken aren't a exclamation mark and then on to the important tug, say that and now we have the winner as reds, even though the points find you is even less so, The order wait. Is this important decoration first, then second is how specific themes like that is. And then finally, the source order the only way to actually override this important declaration. He's also added again, further down in the sauce order. So let's remove the style from here. You can also remove these idea of had to say that file and then we can also go for two level one headings on Also remove the comments. So now these values above equal. If we now go ahead and aren't the important declaration to both of these selectors, the sauce order should win so to the browser and refresh. And now we're back to the Purple Age one. 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, so debugging can often be more difficult, especially on larger projects. So now let's remove these two level one headings and then save that file on restoring our project back to normal. So these are the factors which determine which CSS rules 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 selected Curries. 48. What is responsive design? (Responsive Design): when building our project. So far, we have not given which fought to how this would look on different screen sizes. He and we see an example where we have the main content area with a sign bar. This is common for viewing websites on desktops and 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 from the container. Or, as you can see here on smaller sizes, you will often see the sections stocked on top of each other. He would not only see the item stocked, but we also have the header main and footer sections stuck to. 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 two. Another popular way is what is called responsive Web design. As this sounds responsive, Web design is an approach, which allows the design to change all responds to only the screen size. Put the orientation on device type two. This means we can use the same code, but with some adjustments based on the device it's being 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, the browser and then drug across. We see some responsiveness because we set the sign bar on the left on the main section here to be in line block. But if we make the browser even smaller, we begin to see that the products start to get pushed off the edge of the view port on the visible area. Google Chrome also has another tool for us to help if you right, click and go to inspect in the top left hand corner next to this inspector, which had been using. We also have the device toolbar, so give us a click. If you're not using chrome, it's not a problem. You can even shrink the browser down to a smaller size like this, or if your browser has a similar viewer, go ahead and open this up. So this will give us a list of popular devices. The preview our designs on Well, hell, things such as iPhones, iPods on also some android devices. If we look through some of these devices outside basically looks like a zoomed out version off the desktop site. Let's try a large screen. So Charles A. IPod. So all we're doing here is just zooming out to fit all the content on the screen. We don't see any content in Justin or stuck in like we're seeing over in the slides. This is because we have not taken any steps yet to make this site responsive. But this is something will start to do in the next video when we take a look at the View port 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 websites on different side devices. Girl, if take a look at our website in a smaller smartphone size, we can see that it looks just like a normal desktop view but zoomed out to fit all the content on the screen. We recovered the basic structure of a Web page early in the course. We talked about using meta tags, which we conard in ahead section to add some additional information about our site. In this video, we'll be looking at a new target called a View Port Met Attack. This is important for responsive design. If we don't have this view Port meta tag in place, as we've seen in the last video on just now, small advices 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 view port tag gives us control of how we want our pages to appear, we added, just like any of a meta tag, which we've used so just Under this first matter time, we can open up a new one, but this time given name equal Vieux Port and then close off. If we give that I save and then go over to the browser and be fresh, we see our preview doesn't look any different than it did before. We added this tug for any changes to take effect, we need to set the width. We want our content to be. So let's go over to our meta tag and at the content attribute. And then you can set the width to be equal. That's a 300 pixels. It's not to say that and then reload. We can see by this white brows a section from the left there to this right part that this content is now being set to 300 pixels. We can also see that after this right inside these products outside of this wit, because they gotta fix size and they can't stretch or shrink depending on the screen size, so the browser will still need to zoom out to fit in all these products. Setting a fixed size like this is generally discouraged because of the many variants in screen sizes. Therefore, we can go back over to the meta tag and then changes rather than having the width equal a fix eyes. We consider this to be equal to the device wit. Make sure that these all between the quotations doing this no only covers us for 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 have all flown, we can set the initial scale to be equal to one. So still, in between the quotations, we're gonna add a comma. And then it said the initial scale to be equal to one because I save Reload the browser. I don't see any changes. May need clothes developer tools down and then go back in for this to take effect. Okay, there we go. Now the content is cut off the edge because the browser is no longer Zuma knelt to display all contents. Also, as a side note, some phones will keep the same wit when rotating Onda zoom all robin alone at the content to re flow to the new size. Certainly initial scale will also help with this. They set zoom level when the pages first loaded, but will still allow the user to zoom if required. The main thing to remember is that we should always include this talk in our projects. This is because if we do not set the content wit, the more bar browser will assume that you have a desktop screen size somewhere around 980 pixels wide, depending on the device. On that, you want the full page display so it will zoom out, making things look really small. Including this view, Paul Meta tag will also allow our media queries toe work correctly to later in this section . We still have this problem off the product. So because they assert using pixel sizes, which is a fixed size meaning they are could off the edges green but will 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, he will 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 on. There are lots of good use cases for them, but one working way that responsively outs. 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 a smaller screen devices. This is where relative or scalable units come into play. If we go over to our style dot CSS under scroll up a little to our image, which you can see here. We have already taken a little look at these already. When we set this image with to be 50% here, the image will shrink or stretch to 50% off 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 off the page. Currently, we have this set to 1000 pixels the Vanni was up to, You know, if he said this to be 80% and give that save, we can now go to the browser and refresh. That's closes down, and now we will make the browser even smaller. We can see that the content by these lines on the outside here is always 80% off the browser wit. Also the relative sizes, which could be based on the view pot. The few part is a user's visible area of the screen. We can target the View port, which with VW all the view. Poor height with VH. So if you wanted 50% or half of the screen with it will be 50 VW. Let's aren't this in the body. Say that refresh And now this takes up half the width of the user's view part or for 80% we could changes back to 80 VW and and say that, and now we have the same effect as 80%. The same goes for the height, too. If you wanted to head it to be 50% of the available view bought height, I would do it just like this. So the header and a footer. We can add to the height to be 50 the age we load and now this. Had it takes a path. The available height. I'm going to remove this because it looks a little bit silly. So remove that from the head of section over. Popular relative units include M and Ram, especially for on sizing two series. No action. I'm going to set the base font size in the hay HTML at the very top to be 16 pixels. So fun size 16 pixels. This value of 16 pixels is often the browser default anyway, but we know for sure by setting it here. Then I'm going to set the phone size to be different for the main section. So scroll down to the main selector on. Also, add the font size into here. Let's say 12 pixels for this example. It would go over to the browser and refresh, but I'll see the products have a smaller font size of 12 pixels, and then all the rest is set to be 16 pixels. There is nothin here on the screen, which is unexpected. We see the text size all looks the same, except for the smaller funds in its main section. Now let's change the font size for the products using the M unit of Measure. So let's go down to the product and down the bottom that's at the phone size, this time to be worn em. If we save and it goes the browser and refresh, we don't see any changes on the screen. This is because M relates the parent font size, which is the main section. So basically one M is one times the size it would normally be, which keeps out 12 pixels. We can confirm this if we open up the developer tools, and then if we toggle the device to a bar back to the desktop size and then if we select, what about would give sections so did with the class of product and lift it up a little bit ? If we then open up this computed tub on the right inside and then scroll down, we can see here if we look for the font size. So look at the phone size here that it's said to be 12 pixels. Therefore, if we go over to our CSS and changes to be two m's, this will be twice as big as it would normally be. So refresh scroll down to the font size. And now we have a volley off 24 pixels. We could keep going above two if we wanted to, but we're now going to take a look at rim. So this is the N value. So this is based on the parents container. So basically said Mr To EMS is twice the size off the 12 pixels container that the main section. So now let's take a look at rim rather than the size being based on the parents like em. RAM is based on the route font size the roof on sizes Hate schimmel value off 16 pixels in the top section, so back to our products rather than sentence to be one m. So, just to you, we can set this to be born RAM, which is R e m back over to the developer tools. We can see straightaway that this text is the same size as the sabre. And if we scroll down to the font size in the computed section, this fun size is now 16 pixels rather than the 12 pixels we've seen before. We can also scale acceptable, larger or smaller, for example, if we wanted it to be three times the size of the root element. Because said is to be free room refresh. And now the phone sizes really big, just like you see here on its computed size is 48 pixels. Let's closes down just to recap If we set the font size to be M, this is based on the elements parents. So the elements paired off the product is the main section here. If we would service to be realm just like we've just seen, this is based on the route html element. So in our case, 16 pixels so great I'm going to remove the sections would just add it in so you can remove the 16 pixel root element down to the main section. We're gonna move the 12 pixels value here and then finally for the product. We can also remove this line. Now we'll have a better idea off scalable or relative units. Now let's put this into practice without project. In the next video, we'll apply the relative units to our projects, and this will allow our website to be more fluid as the screen size changes 51. Fluid layout (Responsive Design): Now we know how to use relative humidity, a measure. We can now apply them to our project in place of some of the fixed pixel sizes. This is a big step towards our science being responsive as it allows of a content to be more fluid on 50 available screen space. Rather than being too small or cut off like a scene with all products earlier. We already have the body section at 80%. Would you see at the top here by Senate to be 80% of the available viewpoint with We could also do the same with sidebar a main sections to the on a few ways which we can approaches . He was going down to the main on the side section which you see just here. Couldn't we have the main section at 608 pixels on the sign bar? 270. We could go ahead and make up some new sizes, so just setting the main to be 70% on the sideboard of 30% then this would take up the full weight of the body. Well, we can convert what we already have. You will often see a calculation. So if we go ahead and out of comments in here, just add this in. You will often see the conversion off target divided by context equals results. And this is how we can convert a pixel size to a fluid size, which means all sizes can then scale on. This is how it works in practice. Let's add a new comments just below So, First of all, the target is the current, which were half off, 680 Well, then divided by the context. On the context is the 1000 pixels container, which were hard originally for the body. And this works I want 0.68 The result of 0.68 is that multiplied by 100 to get a percentage , or 68%. So 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 say that over to the browser and then 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 1000 pixel container. This would that make us a nice round 27% change this refresh Ondas would expect there isn't much of a difference. Content should now be more fluid as we switch between 12 and free products as we re stretch the browser when you have free products alongside each other. If we make it a little smaller, it goes down to two and then even smaller and now goes on to its own role on If we make this smaller screen just like that, we now see the provoked and now stacked on top of each other. Now this leads on to this product section. We also want these individual products to resize, too. Again, we could calculate these values exactly. All could select an appropriate size, such as 30% so over to the product rather than this fixed size of 210 pixels. Let's let this be 30% leaving free on each row, and that's refresh and see the difference. Okay, back to full size. We have all free products. And then we can see, as we resize the browser that these free products also getting nowhere on wider as the screen changes if we make this really small and then scroll down to the products. This does, however, caused some new problems like you can see here, some elements can flow onto more lines, such as his text description. So this is longer than this one here, meaning the height of the product of is different to the rest. So while we could go ahead and fix it by applying various CSS hacks, it is also a different approach we can use on. This is to change layout for different size devices using media queries. I will 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 content squashing up on causing layout changes. This also works of a way to if content is stretched too far on large 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 for screens under 600 pixels wide. Then another set off CSS rules for anything over 600 pixels, just like we see here. If we take a look at this slide, well, concert the products of 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 with two and then stacked on top of each other . If we go back over to our stash, eat and then go down to the very bottom, we can use a media query with the art media rule. So just under the table row, weaken, aren't art media, then open up a set of rockets and then the curly braces, just like we did with over seas. As far news here, we can also declare what we want this media query to apply, such as a minimum width. So that said, the minimum with to be 600 pixels. Then inside these curly braces wouldn't go ahead and add CSS rules just like we did before . So let's say a list item that said the cooler to be read So once a minimum weight for the screen, which is 600 pixels and above the list items will then change to the red. So let's say that on over to the browser. So these are list items here. If we go down to the smaller screen size, we have the normal dark color. And then once we got over 600 pixels, that all change red. There's some available browser plug ins to show the weight off the browser. When we stretch it, or in chrome, you can go to right click and inspect on. If we just drop this down here, I want to start stretching the browser we can see in top right and corner. We have the view port size. So again, if we go down to below 600 pixels, the cooler goes back to normal and then over 600. We have the red color inside the media query. There's also some different media types to which we've been targets. So that's closed on these developer tools, for example, can as the print type toe only apply styles when printing. If you wanted the text of the green when printing, for whatever reason, we would do it like this. So our media, just like we did before and then we say Prince, and then open up the braces. Let's tiger the body section on it said. The color off the forms to be green save and then over to the browser. And then to say this, we need to go into the print, view someone's press command or control P open up the print preview and then scroll dome. We can see in this printer view that all the taxes being changed to green because we targeted Prince, or instead of this, we could change print to the screen, just like that on. This will only target screens such as phones, tablets and computers. If we save and now refresh closes down, refresh. Now the green Barnicle only applies to the screens. We're contest is by opening up the print preview once again and then scroll down. And now we don't see any of the green colors because this is only applying it to the screen . There are other types, too, So let's close this down on do a quick Google search. So CSS media queries. And then I'm gonna go to the W free schools version. So the art media riel and then it was go down to the media types. So which is just here? He would see all the different media times which you can target. We've already used Prince on screen already. Well, as you can see, that is a few more. The type can also be changed for speech or screen readers, which read out to the screen and these often used for visually impaired people. All we can set all toe always apply the same CSS style rules for all types of media scroll down further down to the media features. Here is a list of features, which will also trigger the media query. We've already looked at the minimum with 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 height and many more. These can also be combined to make even more complex media queries using and so back over. So I was CSS filed. Let's remove these second media query American News and combine two or more queries. Then let's go for the Marksman with and, let's say, 700 pixels. So now the styles will only apply between the minimum weight off 600 on the maximum width off 700 pixels. So anything else, we're back to the default styles above, back over to our text or and then refresh so currently above 700 pixels. So we get the default color now it was gold down. Once we get to 700 pixels, which is just here, we see the color of red apply and then if we go down even further to below 600 pixels, would then back to the default colors. When this change off styling occurs, used the media query this is what is called a break point, and you may frequently hear this word when dealing with responsibly outs. It may be tempting to design these break points to occur to suit popular phone or tablet scientists, however, because we need our designs look good on all sides devices. It's often a good idea to start with the browser really narrow and then apply our general CSS styling. Then stretch the Browns even wider and only apply immediate query to change the layouts when our design begins, look stretched or not quite right on again. Like we mentioned before the storm browser plug ins, which we can search for to show the screen size or can go into the developer tools are makin begin to see the width off the screen. When I would design starts, look stretched, look and then take the sizes. Apply these to all media query. Finally, along with guns, which have you just hear. That is also not on only which are known as logical operators to make even more complex media queries. So as well as this size here, if we only wanted this to applying to screens who could say only screen and then also target the sizes, too. So this just leaves us with the not keyword. Let's simplify this by cutting out the minimum of maximum whips. So let's take out the Asian before American changes to be not screen changing. Its value to not means of styles will apply to media queries except the screen, so save and then refresh. So now we have you in this on the screen. The media query color of red does not apply. But if you go into the print preview, which, of course is no screen will now see this red color is applied. So they go. So this is the first look at media queries, as we've seen on the W three schools website. There are lots of options and variants we can use, but a lot of them were may never have to use too often. I'm not want to delete this demo media query, which decided in, but we will 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 all project. I'm going to be doing this with a mobile first approach. This means designing for small screens first, then changing layout as more screen space becomes available. To do this, we need to shrink the browser down to a small screen size. So 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 currently on the phone. It looks pretty bad, so we need to go ahead and fix this. I'm going to change the styles we currently have in the styles dot CSS file to make this look better, then we cannot a media query to change things for larger devices. Let's begin open the top with the header. As a general rule, if you're unsure of how to style for small screens, a good starting point is too often. Make the content for with on also scented. Let's go up to the head of section here. If you could shrink the browser down to the both fit on the screen, let's start by target in the body at the bottom under the color weaken Arditti text Align on. Set this to be sensor, Give us save that pushes all the content to the center of the page, Then make the body the full word for the screen by commenting out this 80 VW and then refresh. And now this stretches to the full weight of the mobile device. Any style and rules which you want to remove, such as his maximum with. 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 youthful with two on on its own line, we can make it the way it for 100%. Let's target the import under the header and footer. So just like we looked at earlier, we can use the square brackets to target the import with a type off search. And then we can set the width to be 100% to make it a full with off the container refresh. And now it's on its on line two. So still, but in this head of section, if we go ahead on white. In this browser, we can see the site title on the links and no longer on the all nine we can fix this in the head a hate one section so that scroll down a little to the head of page one, which is just here. And then it's common this line out and change the wit to be 100% save and then reload Now moving down to this main Onda side section if we take a look at what we currently have. The science section is currently set to be 27% of the wit. This is why it looks so narrow on. The main section is said to be 68% off the wit. So this is why it doesn't look very good. All of these sizes inside the main on the side section, all relating for full destined view. So we can comment out all this section of the no. In fact, we can remove these calculations from before and then comment out the side section and also the same of the main section two. Give that save, looking at these bucking later inside of a media query and then reload the browser, and now our site looks instantly. Better now, down to Oprah looked. We want these products respond the full width of the screen, so in line block is no longer needed. So let's go over to the product section. What you just here and then comments out these in line block section, then refresh. So this leads and now on the own separate line. Because I've got wait for 30% of the moment, there's still looked really narrow. So let's comment out this section from before you can then set the wit to be 100 cents and say That's reload and now operate is 100% of the width of the screen. This is now looking a lot better. Armed with just a few small changes to all CSS, it looks a lot more suited to smaller screens. Remember, the only site is for learning purposes. If I was designing this site, I would generally build for the mobile view first rather than alter in the CSS, which you've already added. With this now completed in the next video, we can begin to widen the browser and then at the CSS for large screens 54. Styling for medium devices (Responsive Design): we don't have a good base to build on with all more bile styles now looking better the next age usedto wide in the browser, undecided with where our design starts to break or no longer looked good. This, of course, is a matter of opinion and personal preference. But if you go to the browser and open up the developer tools, we can now start to wind the browser. So let's go down to inspect. And then let's start to stretch the browser to a size which no longer starts to look good on y two devices. So let's say when we get to about 800 pixels and started scroll down, we'll see. Our design starts look a little stretched. So now may be a good idea to put a media query in place at 800 pixels, and then, rather than one product being too stretched, we could maybe put to productive side by side scrolling up to the top. We can also see that the search is looking a little stretch, too, so we can also fix this so over to our style is not CSS. That's it was a bit more space and then go down to the bottom just like we've seen earlier . We can use the art media rule and then inside of the brackets, we can set the minimum with to be 800 pixels. So let's begin with the input with the type of search on. This is one for the header. An insider here remember, we set the value to be 100% wide. We can no over ideas on the largest greens on said the with to be 40% because I save and then reload. So this now leaves enough space for the search on also the links to be in line. But at the moment that a little bit too close together, This could be fixed by. I didn't a little margin on the left, inside of the input on the left Inside on. This could be to EMS, which is two times the size. It would normally be saving the reload, and there's a little bit of space. And now between the links on the search, this now makes the header look a bit better now down onto the products. Currently the product looks a little too stretched, so we may look better with two products on each row. So remember, in the last video commented out inside the product section, the display type off in line block, which were hard just to you. So instead of going to cook this our place and then on this inside the media query and then go down. So inside the media query, we need to again target the dot product and then paste in. I will display type of in line block and make sure all these styles which were runnin still it would in 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 over ideas in the media query. By setting the width on, I'm going to add to on to eat row by setting a wig off 50%. So refresh I must see. This still has the same problem of each product on a new line. We can changes by another one, the product slightly to account for any margin or putting, which is added. So let's start with 49% on still not enough. That's very 48% excellent. We now have two products on each row, and now if we shrink the browser down to under 800 pixels will see we have the product at 100% wide and then off 800 pixels. It changes to build two on a TRO, so this is now looking good on smaller and medium sized devices on In the next video, we'll finish things off by item buck in the styles, which we commented earlier into a media query for desktop size screens. 55. Styling for large devices (Responsive Design): the final stage of styles. The larger desktops I screens is pretty much already taken care off. We already have them in place. These are the ones we commented out earlier. We just need to decide what screen size we want needs to take effect for no Michael, move them to a separate media query again. If we open up the developer tools, right, click and inspect Democrat wide the browser to a size where wants out of break points. So let's keep going until this looks a little stretched. So currently is take the fact art 800 pixels. Would you just here and then make it a little bit bigger? So maybe about 1000 pixels. Somewhere around there, the content looks a little stretched, so as 1000 pixels and going toe adds a new media query. So down on the very bottom outside of his curly brace, we can again use the art media rule and then said the minimum which to be 1000 pixels. So let's begin by scrolling up to the main on the side section. If you remember from earlier, we commented out both e sections, so let's now could both e sections our place, and then we can go ahead and aunties inside of all media query. So pace. He's inside of old second media query and then on comments out both of these sections. Okay, give us safe and then over to the browser and then refresh. And then let's try re sizing. So over 1000 pixels, we'll see things start to look a little bit better, but there is still a few small changes to make, such as the header on. Also, the text alignment is still in the sensor. The text alignment is an easy fix. Would you need to set the body to be aligned to the left? So just above the main section that's out of the body? Then said the text, lying to be in the left, Does it ever go? We've now pushed our links over to the left on. Also, the head of content to this head of section also would change the site title from 70% wide to be 100%. How did this with the head of H one? Let's go for both the page on. There's a head of H one. Now let's remove his comments or quit our place. A number can reapply this down in the media query. So back down to the bottom, let's go. Just after the body section, the header H one was a selector and then paste this in. Take a look at this. Then it will resize the browser back floor 1000 pixels. We can see the break points straight away, where the layout will change. Because of all media query, I think we can add one final media query. It's of this project when the screen is a little wider. This is so we can go back to having our free product on a TRO. So let's go back to the developer tools so we can see the browser wit. And then if we stretch, the Browns are a little wider. So currently the break points happens. Just here. And then let's keep going on. Let's say around 1200 pixels will then make the product to be a free on each row. So another media query right at the very bottom we've asked media. This time we'll set the minimum with to be 1200 pixels just like that. So it's kick things off in this larger media query remember early on we set the maximum whiffed of 80% of the viewpoint with We didn't commented out this section for the mobile sizes. Let's cook this section of the body and then we can reapply it down to the bottom of the largest greens. So I decent signed the 1200 pixels media query and then on comments out this section. First Albany time the body, of course. And then the code of races. Then we fresh. This now sets the body to be 80% of the weird for the view part. Then we can make the products 30% wide each to to allow free to fit on each row. Let's target the DOT product and then set the width to be 30% and back over and reload were 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. So that's trying. Fix is now over. In the media query, you can select the import with the type oh, such and then let's try and make this a little bit another where so let's say 20% on this in and then reload, we can see that it still does not fit. We can try to reduce the width off the site title to give this more space. Let's try the header Hate worn, which is in the 1000 pixels. Media query. Let's try changing this to be 60% and then refresh, and now there's no space for these all to feel on the screen lets you see what we've done here. If we stretch the browser to be full with, we now have our site looking pretty much as it was originally. As we shrink it down, we consume the content flows to be smaller, and then we have a break point to make two products appear on each row. And then as we get smaller, we have another break point to make sure that the main in the science section appear stacked on top of each other, still having a to promote side by side. Then even further to the mobile and small tablet view. We can see we have one product on each line, and this is now looking a lot more optimized for smaller screens the world on. If this is all working for you. Remember, these break point numbers are flexible, and you'll need to base them on whatever content you're working with. You have no May your first project now responsive. So we're just a different screen devices. Next week, I want to take a look at using responsive images. 56. Picture and srcset (Responsive Design): Another important consideration when designing for different size devices is the images which we use. If we provide a small image on the website, it may seem a small device, but when on largest greens it will start to become stretched and not look very good. Or if our image is too large, it will take longer to download or mobile devices or places with slower Internet connections. The picture elements can provide a solution for this. This picture element actors a container where we're gonna add multiple image sources. A common use is to provide different image sizes to apply for different side devices. We also need some different size images to use to. For this example, you can go ahead and use any image which you may already have. I need to do is save it three times in free different sizes such as 306 100 on 1000 pixels wide or, if you prefer, I provided some images for you to download. I have these images saved on the desktop as a 306 101,000 pixels wide version, so to begin, I'm going to create a new project. That's right, they can go to New Fuller. I'm gonna call this the picture elements. Okay, so then that's open this up in the text editor again. I'll be using visual studio code. I never could go ahead and drug all free images into their okay. And then let's open up the project folder inside of visual studio by drugging over then our index page. So let's close. The welcome file is quite new file called the index start H M. O. So to begin, we need I was standard hate schimmel structure, including the doc type, the head and the body section. So of course, go ahead and type this all out. If you need some practice or if using visual studio code, you can type html goal on five and I hit the tough key and then we get all the structure provided for us. Let's close your sidebar on first. That's are the title Off pitch elements give that save a number, can open this up inside the browser. So go to the index. Jorge Jamo I'm gonna open mind and Google chrome Okay, so inside the body section, we aren't the picture elements just like any other elements. So we asked the picture opening and closing tanks inside. Here we conard an image just like would normally do. So I am G and then close off inside here. I'm going to answer the image sauce and this is going to be the pizza Dash 300. I don't j. Peg. 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 aren't the name would you saved us? This image element is required as a full buck for if the browser does not support the picture elements. Almost browsers. Do you know how full support for this? So give that save and now we should see the free 100 pixels wide image in the browser. We're now going to go ahead and add some more sources. This image element is also the full buck. If none of these source elements are much, let's take a look at How well can I ask these, you know, So just above the image, we can answer the source elements. This doesn't have a closing time, but instead we aren't the source said attribute and said this equal to our image they want to use. So the next size image up Waas Pizza 600 don't J. Pink, then went out to the media tribute, just like we're seeing in the last few videos where we conard a condition where, what this image to appear. So just like we're seeing in previous videos inside the brackets, we can set the minimum with to be 600 pixels. So this means that this 600 pixels wide image will display if the screen is wider than 600 pixels. If not, this default or fallback image will be used. Give that save reloads and now we see the 600 pixels wide image has now replaced a smaller one. We can also add more source elements to let's do the same for the 1000 pixels you made you'll have here. So just about this that's the source wants more. A game of this all sets on. This time it's pizza. 1000 O. J. Thank again. We also needs onto the media attributes inside the broker to consent the minimum with this time to be 1000 pixels. And make sure yours looks like this with the brackets inside of the quotations like that. So just to recap this pizza free 100 is a four back image. If none of these conditions are met, once the browser gets over 600 pixels wide with, then load up the pizza 600. Once a browser gets even wider, up to 1000 pixels and above within, and get this larger image loaded, we can prove this is working by going over to the browser and then reloaded. We initially see the larger 1000 pixels wide image, but we can see this is working that would go into the developer tools then, if you go to the network. So let's begin by shrinking the browser to our smaller size, which is under 600 pixels, then reload to begin with. If you look down the bottom, we can see that this two files being loaded. We have the index or hate smell page. Then we have the pizza Dash 300. If we drank the Browns and now over 600 pixels would now will see 1/3 files being demoted, and this is all pizza Dash 600 the same for the larger image to if we now drive this to be over 1000 pixels. We now have the pizza dash 1000 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 attribute with the minimum width. We can also use any other valid media query type which we already seeing over in the CSS, such as orientation marks with Min height and so on, so it's really flexible to use. 57. Time to practice (Responsive Design): we know at the end of this responsive design section. So now I will be a good time to get some more practice on your own. We have added media queries to change the loud of our home page of this project. Also, we use relative units such as M on percentages to make our designs more fluid as a challenge. I would like it's no go ahead and do the same for the Contractors Page, which you see here on also from the home page. If we go down to the product detail by clicking on this first product, I would like it 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 juniors section. Apply the CSS, which you think works best. So it would look with this on. I'll see you in the next section where I've got some really good stuff lined up. Well, starts. Look at the flex box on great 58. Thank you: Congratulations on reaching the end of this course. I hope you now a lot more comfortable using HTML CSS on were responsive design. We started at the very beginning taking a look of what hatchimals is on also a little bit of history before moving on to setting up our very own project because with all the major elements such as adding text, images, forms and links amongst others, next up was the style in using CSS where you learned all about how to style position on lay out our websites. Finally, we ensured our website looks great on all sides devices by covering responsive design by crane fluid layouts combined with media queries Remember the old 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 stock applications So bye for now on I will see you in the next part 59. Follow me on Skillshare!: huge congratulations from me for reaching the end off this class. I hope you really enjoy it and gain some knowledge from it. If you've enjoyed his class, make sure you check out the rest of my classes here on skill share on. Also follow me for any updates on also to be informed of any new classes as they become available So funky once again. Good. Look on. Hopefully I'll see you again in the future class.