Code Your Own Website (HTML & CSS Basics)

1. Intro: Hello, I'm Matthew from Brandon codes. Have you ever wanted to create your own website but think that it might just be too difficult. Well, in this course, I'm going to teach you that coding can be fun and easy than that. You can create a professional website and a mire of ours. In this course, we're going to create this amazing website using just HTML and CSS. In this course, you will learn the tools you need to create a website. Basics of HTML, CSS, fundamentals, type progress in a Bootstrap. Height of bringing all out together and creating your first website, I Omega mobile responsive. And finally, Haida hosted. If all that sounds good and you're ready to learn, then let's dive right in. 2. Tools: Let's take a look at the tools you're going to need to create your first website. The first told we need, you probably already have, and that is a web browser. So for this, you can either use Firefox, you can use Chrome, or you can use a range of colors. For example, Safari. For this tutorial, I am going to be using firefox, is there as my preferred Fraser. But I'm going to show you how you can solve some of the things we require on Chrome as well. The next thing we need as Developer Tools or DevTools for short. These are programs Bell into modern day grazers which allow you to create, test and debug code. Current browser such as Firefox and Chrome have these integrated and allow you to inspect the website. You're able to change the page's HTML, CSS, and JavaScript. Don't worry if you don't know what those mean yet. I'll be teaching you watch each one of those doors very shortly. But for now, let me show you how you open DevTools on Firefox and Chrome. I'll start with Chrome here. And all you need to do is right-click anywhere on the web page and press Inspect. You'll know see the DevTools has loaded for Firefox. It's similar process. Right-click anywhere in the page and click Inspect Element. You'll know see the DevTools has loaded. As a quick demonstration. In DevTools, we can make changes to the page's HTML. For example, I can change this button to say classes, or we can make CSS changes. For example, I can change this headers color to be read. Again, don't worry if you don't fully understand what HTML and CSS as yet. This is just a demonstration of what we can do. And DevTools, again, something you can change with DevTools is where the possession of this toolbar as by clicking the three dots here, you can choose to darker to the rate, for example, or you can dock it to the left. You can also detach the toolbar by choosing separate window. And this allows you to put it on a second monitor. For example. For this tutorial, I will assembly dock it to the bottom of the pages. The last tool we need an arguably the most important, is a code editor. I recommend and I use the free code editor, which you can download a diode. But if USU's others such as Sublime Text, Let's fame as you'll be able to follow along less tutorial, is all code editors are loosely the same. So to recap and to make sure you're ready to get started. The toes we need are a browser, Firefox or Chrome DevTools on that browser, and a code editor such as arm. 3. Materials: Before we continue with this course, you will need to download the materials I have prepared for you. You can do that by scrolling dying and going to the projects and resources tab. And then to the right under resources you will say needed for course dogs app. To download this set file, simply click on the title needed for core concept. Once you have onset this folder, you can click into the needed for course folder and find all the course materials you need. You will see an exercise folder which includes a starting HTML file, an image we will use us for our first exercise. You will also see a website folder including a starting HTML file and the images we need for this course. And lastly, you will say I needed for exercise folder that contains the Bootstrap framework. We'll go into that in more detail layer. Once you have this folder downloaded, you're ready to continue on this course. 4. Website fundamentals: So before we start to build our website is really important to understand the fundamentals. What are websites? Madoff. To make this easy to understand and want to use a metaphor. And that is, a website is like a house. They may explain. When we think of the major components which make up a hace, we can think off to freedom, the look, and the moving pieces. Each one of these major components of a host actually equals a major component of building a website. So when we think of the freedom of a host and website terms, that would be the HTML. Html stands for Hypertext Markup Language. Html for short. The frame of the host makes up the rooms, makes up the layout, and makes up the structure the same way a website has sections, head or body for. And each section contains images and texts. For example, there's layout, there's freedom. The structure is defined by HTML. So if we take a look at this HTML example, It's important to note these aren't real HTML elements, but the layout is correct in terms of how you would use HTML. And I think this really helps illustrate exactly how you would use it. Html has an opening and closing tag and end them tags, you would have elements. So you can see an opening tag and a closing host tag with n that we have the second floor. And within the second floor, we have the bedroom with on the first floor, we have 11 room. We have an entrance, and within the rooms, we have the front door. So you can see how HTML would define the structure of a heist. With this example, we're going to be using HTML in the exact same way to define the structure of our website. Next it comes to the look of the house and website terms, we'll be using CSS to define the look. Css stands for Cascading Style Sheets or CSS for short. This is a chord language which allows us to define the appearance of HTML elements. In our house example, not all rooms, tables and chairs look the same. Naughty words and images on a website. Css defines how elements look, describing their colors says Possession, ship, and more. Here's another quick example of how we reduce CSS to design the look or for hosts. We can see we have defined an element, so bedroom. And then within that element with defined as width, its height, the walls, and the floor. Again, you can see we have late switch blow defining an HTML element or the light switch off her house. And you can see we have the distance from floor and the ship. Again, these are not real HTML elements. This is just an oversimplification to help you understand the link between CSS and HTML. So lastly, in a host you have moved from pieces such as late swatches would be JavaScript. Javascript is used to create interactive elements on our website. Thank sliders, think pop-ups. We're not going to be focusing on JavaScript and this tutorial. So for now, all you need to know is that JavaScript careers and are active elements on a web site. So to recap, when it comes to the elements which make up a website, think of a hives. For the freedom, for the structure, we use HTML, for the look and appearance. We use CSS. And for moving pieces, you would use JavaScript. So in this tutorial, I'm going to show you how to use HTML and CSS to create your very first website. We're going to create the structure of the website or the frame of the website using HTML. And then we're going to use CSS to define how the website looks, the color schemes, the bag grains, the topography, and the general appearance. This will allow you to have a highly personalized website and also had the skills to be able to create any website layout and any website appearance you wish in the future. 5. Basics of HTML - Part 1: It's time to start coding. Let's start with HTML. Html, as already mentioned, is to frame or structure of our website. Every website has belt with HTML elements. Each element has something in it, like text or an image. We have different types of HTML tags that we can play with. And each one of these tags represents different types of content. For example, we have headings, paragraphs, images, and more. So when it comes to writing our HTML, it's important to use semantic elements. What are semantic elements? Semantic elements are elements with a meaning. In HTML, every tag has its own meaning, has an example of semantic HTML elements. If we wanted to write a paragraph, we would open with the p tag. As this is the paragraph HTML element. We would write our paragraph and then we would close with a closing p, where paragraph, HTML element. This example is semantic coding. It's time to start coding. Before we start coding our own website, Let's do a quick HTML and CSS exercise to learn the basics. We'll then the full LU, you'll see two folders, exercise and website. Open up the exercise folder. And I've included a scale and index HTML file to your desktop in your code editor, simply click and drag it onto the arm, are on to the core data or you're using. And you will see the scale in HTML exercise fail opens. So let me talk you through what's already included in this HTML file. At the top, we have a doc type declaration. This declaration is not an HTML tag. Its information to the browser about what document type to expect. This must be included in all HTML files. And it lets the browser know that it's loading an HTML file. The next element is the HTML tag. The HTML tag is a container for all the other HTML elements except the doc type. So n of m with n, the HTML tag will be rendered on your website. Notice hey, there is a opening HTML tag and a closing HTML tag. How do we know that this is a closing HTML tag? By the forward slash. And opening tag has no slash. A closing HTML element tag has a forward slash. So we have our HTML tags, and if enough of them HTML tags will be rendered as our website. Next we have the head tags, and often included within the head tags is not rendered on the web page. Instead, this area is used to include metadata or information about the HTML page itself. The first thing I have included on here is the character set. For now. We're just going to know that this is super important to have included. But I'm not gonna go into details of a word character say is because I think it would just confuse you at this stage. Just know that it is important to have that included. We have the title included within the head, and that is very Assembly the name of the HTML page. Now we obviously don't want that displayed on the page itself. But it's important that the browser knows what the name or title off the pages. So it's included in the head. Other examples of elements you would include in the head tags are the descriptions off the page. So if you've ever done a search on Google, the page descriptions you see in the snippets are actually included in the head off a page. We can also use the head to include external files, something we're going to be doing later on in this course. So we can include external CSS files to help with the look of our website. And this is all included in the head tags. So again, this is an area for information or both. The page benign area for stuff we want displayed on the page 49 to get gone, this is all you need to have included within the head tags. Next we have the body tags. And if employers to defend the body tags will be displayed and rendered in your browser Azure website. This is the area we put all our HTML elements, such as headings, paragraphs, images, tables, etc. Actually, anything you tape and here will be displayed on your webpage. For example, if a tape anything, and see if what you can do by going to fail. Sea of or by pressing control and S and unloading our HTML page and our browser. What you can do by going to the exercise folder and double-clicking on the index.html. You can see that on our webpage, anything is displaying. Obviously, this doesn't look very good and wouldn't make for a very good website. But not only that, we did not chord this semantically. Let's look at how we can chord text semantically on our HTML document. Bringing back up the code editor, I'm going to remove anything. And I'm now going to add a heading, 2 yadda heading. We're going to open our tag. We're going to take age for heading and we're going to pan one. You can use the numbers one to six for headings. So H1, H2, H3, etc. However, H1 is the most empowering heading tag. So if we were writing the heading for an article, we would use H1 because that's the most important HTML heading element. And we're going to rate a heading. Welcome, Skillshare students. What's missing from this HTML lane? That's rate, we must close the HTML tag. To do that. We open the HTML tag again, but this time we use a forward slash, forward slash denoting a closed HTML element. And then we take the CMB HTML element again. So you can see we have a opening H1 tag and a closing H1 tag. Before heading in-between the two elements. I'm going to see if this page by pressing Control S. And I'm going to bring up the browser again. And I'm going to refresh the page. You can see what we've just added in our code file is showing on our website page. Let me show you quickly, hey, DevTools works now. Do you remember how to open DevTools? We right-click and we press Inspect Element. If we take a look at our HTML document here, you can see just as I described, any elements within the head HTML tags is not displayed on our page. You can then see our body tags and the heading we just added. We can make changes talents simply by clicking on the HTML element. We wanted to change. Clicking on the element and adding, for example, text. I can change. Welcome, for example, to hello. When I press Enter, you'll see that this change has been made. Something really important to understand a bit dev tells that we are only making these changes locally and these changes are not being saved. So that's change. I just mirrored TR page. When a refresh, you will see that the change hasn't been sea of. That's because we're only making the changes and our browser. And we're only magnum locally. For this change to happen, we need to go back to our code editor. We need to make the change in our actual HTML document. We need a sea of the HTML document. And then when we refresh our page, you can see that the change has been permanently metered. 6. Basics of HTML - Part 2: Let's create a really basic website that includes a heading, paragraph, image, a link to another website, and a last jump back in to the exercise index.html file. If you've closed the index.html dying from our last lesson to school bag into the package folder, go to exercise and then drag the index.html file onto your code editor. That's removes the heading we added in the previous exercise as we wanted to start afresh and creating this very basic website, I'm going to add a new heading. Again. I'm going to use an H1 tag as the most important heading. And I'm just going to take this as a basic website, but you can add wherever heading you've on. What's missing. Again, we need to close the HTML tag. We do that with a forward slash. And then the H1. We now want to add a paragraph. For that, we use the p tag, P standing for paragraph. And then we want to add some paragraph text. You can write whatever you like here. But if you need some texts really quickly as a placeholder, There's a really useful thing in web development called Lorem Ipsum. If you go to Google and type in lorem ipsum generator, you will find a range of websites which generate blog texts for you very quickly. We're going to use this one in this demonstration and generate a paragraph. Now, this is not English and does not make sense, but it is used in web development to blog areas of a website very quickly. When we're not entirely sure what text we're going to pretend there yet. So I'm going to copy and PSDs for my paragraph. I'm going to pierced as n. And we know as a annoying problem. The text is so large that is pushed the Chordata are all the way over to the right side. Now you can call the glass, however, you will find it quite irritating. Luckily though, Adam and nearly every code editor has a feature to stop this. All you have to do is go to View and toggle soft wrap. What this Dawes is grabs the text within the code editor window and stops you having to move left and right to view. What's missing from this paragraph element. That's right. We need to close it. Let's now see of this and see how it looks in the browser. I'm going to see this again by pressing control and S. And I'm going to load up our website and refresh it. You can see the heading is showing and the paragraph is showing. To see these HTML elements in DevTools, simply right-click, go to Inspect Element. And you can see within our body we have a heading and a paragraph. Now let's get, allow them more advanced and add an image to our website. Within our code editor, I'm going to take a new lane and I'm going to add the image HTML tag. This is a more advanced tag. And so there's a few things you need to know about the image tag. As it is not a CME as a paragraph and heading tag, the image tag requires an attribute. An attribute is information within the HTML tag itself. For an image, we need to add SRC, which stands for source, the source of the image. We then need to put an equals and within the brackets, we need to type the path of the image. What is the path of the image? Let's take a look our exercise folder. Within our exercise folder, you will see there is an image folder. Moving the image folder, there is an image that is the path that we require. Paths can be quite tricky, especially as a beginner to understand and easy way to remember how to do it as imagine you were describing to index.html, how to find the damage. So you would tell index.html first go to the image folder and then the image will end. That is called example dodge JPEG. So again, let's imagine we're describing it to index.html when we add it to our source, first, we have to go to the image folder. Then we add a forward slash. And within that image folder, we want the example dot JPEG image. So we have the folder and then we have the image name within that folder. So you might know saying, we need to close this HTML tag. By doing this, however, you would be wrong. Image tags differ from heading tags and paragraph tags because they are known as void elements. Void elements can't have any content. Think about it. An image can't have any texts with Anna because it's an image. Therefore, it is a void element. So instead we have to close the tag slightly differently. To close avoid element or to close an image tag, we simply add a forward slash before the final angle bracket. This is now a closed void ailment or a closed image tag. Let's see a vast NIH by pressing control and S and refreshing our website. We can see that the image as NIH, showing that there is however, one more attribute that you should always include in your image tag. If we go back to our code editor, I'm going to take ALT. Alt stands for alternative text. Why do we need alternative text within our image tag? So the main reason for this is for accessibility. Users who can't see the images and use a text-to-speech program. Use alternative text to understand what the damage, as. It's also useful for when the image doesn't load. For example, if the damage is missing or you've got the path thrown, the old text will be displayed so users know what should be there. To add alternative text, you simply type ALT, which we already have, equals an EMR vendor speech marks simply add a quick description of what the damages. So I'm going to take. This is an example image. Let's see if STI and go back to our browser and refresh the page using DevTools, you can see that this alternative text is now included to give you a demonstration of how this looks. If, for example the image is missing or can be loaded, I'm going to break the path. So I'm going to make the path point to an image which does not exist. I'm not going to hit Enter. And you can see that because the image cannot be loaded, the alternative text is displayed as a remainder. Any changes made on DevTools are not saved, so we can revert their space assembly refreshing the page. Now let's add a link. Go back to the code editor. I'm going to add this link above or image. So I'm going to add a line above the image tag and tape angle bracket a. The a tag defines a hyperlink which is used to link from one page to another. The way the a tag works is with another attribute. And we're going to take RREF, which stands for hypertext reference. Basically it's the link to the website that you want the button to take you to. For this, I'm going to link to Skillshare. So I am going to type www.skillshare.com within the speech marks. We can then close the opening a tag. Now we need to tape what we want the button text to be. So I'm going to tape this is a link. And then we have to close this tag, the CME as a heading or a paragraph element. We do that by the angle bracket, forward slash, then a. So what we have here is a link tag. We have the opening a element. We have an H ref attribute, which is going to take us to skillshare.com. We have the button text and then we have the closing a HTML element. I'm going to know C of this and go to our page to refresh the page. When we refresh our browser page and look for a link, you might wonder if it's missing. When you scroll down, you will notice that is to the left side of the damage. Why is this? This is because we did not specify that we want the image to be on a new lane. So the link and the image are on the seam line. Defects esco back to our code editor. And in-between the a tag for a link and the image tag for our image. Add a new lane and tape BR forward slash, angle bracket. Br stands for break or line break is avoid element of a CV cannot add anything inside a line break. Therefore, we clues avoid element by using a forward slash before the closing angle bracket. We do not need to tags and open and closing tag, much like an image. Adding this line break, no means of the damage will be in a new line. Now if we hit Control S to see if go back to our browser and refresh the page. You can see that we now have the link, a line break and the image below it. Now let's test our link and see what happens. This is a link. You may know is there's error message and that we don't actually get taken through to the website skillshare, which we entered for the link. Let's take a look at the code and understand why we're getting this error message. Building up the code editor. We can see that we did not put an HTTP that we just started with www dot. Because of this, the link thinks is a relative URL. Arraylist of URL assumes that the length you added is on the same site and as part of the CME rid domain. So when we look our riser and to wear at the link tried to take us. You can see that it's actually look in, in the exercise folder for www.skillshare.com. This is wrong. We must use an absolute URL. So we must add HTTP colon, forward slash, forward slash. You can now see the link on AM changes blue there shows that it is a URL. Again, I'm going to see if I go to my browser, go back to our exercise page and refresh. Now when I click the link, you will see that it takes you to skillshare.com. Now you finally, let's add a list to our website, building up the code editor. And we're going to take a new line. And I'm going to add UAL. We can either use the tags OL or UL for our last. Ol stands for ordered list and GL stands for unordered list. Let's start with our unordered list. After our opening UL tag, we're going to add another HTML tag. And that is ALA. The LI tag is a less day m with n LST. This is called a child HTML element. So we have an honored last. Then we'll end the unordered list. We have a list item. I'm going to list all the things you're going to learn in this course. So I'm going to write HTML for the first item on my list and then going to close that tag the same way we would close a heading or a paragraph tag. I'm going to add a second item to our last. So I add another ALA open tag and I'm going to add another diced I am, I'm going to add another close tag. I'm going to add a third item. And I'm going to close it, and I'm going to add a fourth. And finally, um, so now we have four or less DEMs were then our unordered list. But we must close our unordered list. To do that, we take a closing UL tag. So to recap, we have an opening UL tag. We have four children, LI tags with opening and closing HTML elements. And then we have our closing UL tag. Let's know CFS and go to our website. Let's refresh the page. And blurry image you will see are all unordered list. If we want a ordered list, something called back to the code editor and change URL to your, well, let's see if that go back to our webpage and refresh. You will now see we have an ordered list. 7. CSS Basics - Part 1: Let's now take a look at CSS basics, a new CSS on the example website we've been creating. What is CSS? Css, if you remember, is the look of your website. So when the host Mao for we used at the beginning of this course, the HTML was the freedom and the CSS was what give to look to our freedom are there to our website. So if we take a look at our website at the Bennett, you'll agree that looks ways. It's not great. But now we're going to affects out with CSS. When it comes to using CSS, there's three ways in which we can use it. Alongside our HTML. We have n ln, CSS and external fail CSS and CSS code embedded in HTML. For this course, we're only going to focus on one. And that is using an external CSS file. So how do we create that CSS file? Open up the exercise folder, create a new folder. You can name it whatever you want. But to keep things easy to understand, Let's call it style. Within that folder, Let's create a new CSS file. The way I like to do this is to just create a new text document. I'm going to call it style sheet. I'm going to change the tape of document tear CSS document. And I'm going to do that simply by placing a dot and entailment CSS and having an error, you get a message, then you know that you're going to change the extension tape and that the failed tape is going to change. But we wanted to. So we're going to hit Yes. And we know have a CSS document. Let's now open their CSS document. A CSS file in our code editor. Somebody drags style sheets or CSS onto atom or the core data or you're using. And you will see your Blank Style Sheet document opened for you wanted to look our HTML file or index.html and or a style sheet, styles.css file at the same time. To do as, I'm going to right-click on style sheets or CSS, and I'm going to hit Split rate. We can now close the stylesheet dot css and the left window PM. And here we have the HTML document on the left side and our style sheets or CSS on the right side. You might notice that the text is allow large here. I do have it larger than standardly as for this video. But you can change the tag says by going to View and increase or decrease font size. You can also use Control Shift plus or minus. So I'm going to reduce the size of S Now just to make it easier to see more of it on the screen. So how does CSS work? Here's a really simple example of a lane of CSS. You can see it's made up of a selector, a declaration. And within that declaration we have a property and a value. If you look at the selector, you'll see it says H1. And that directly links to the H1 HTML heading element we added in our example document. This basically means that any declarations we have inside the CSS selector will affect all H1 headings. When looking at the declaration, we can see we have two. Under the first one, we have a property of color and a value of blue. If you haven't already guessed. That means we're changing the heading H1 HTML element to have the color of blue. And we also have font size 12 pixels. Again, if you haven't already guessed, that means we're changing the headings A's to 12 pixels. That's my rate. Some CSS, for example, website. Looking at our code editor, I wanted to change the paragraph font size. So I'm going to take P as that links directly to the HTML element. And then we're going to have an open curly bracket and a closing curly bracket. By hitting Enter, I can take a declaration and a value inside these curly brackets. So I'm going to write font size. And I'm going to make the tags really bag just so we can really easily see the change with me. And so I'm going to make it for a packet loss, which is really large. I'm not going to see of the style sheet by pressing Control S. And I'm going to go to our browser. I'm going to refresh the page. Nothing happened. Why has nothing happened? This is because we have not linked or external style sheets CSS file into our index.html. Yeah. So our website has no idea that there's a style sheet for it to use. For horsetails to take effect, we must link or external style sheet to our index.html. Let's do that now. Go back to our code editor. Will then the head of our website, which again is for a deer or information not displayed on the website. We want to use this area to link our external style sheet. So take a new lane and you wanted to copy this line. This line of HTML is a link. Rel stands for relationship. We're obviously loading a style sheet. And then we have age ref. For age ref, we're going to use a path again. This time, the path is to the style sheet. We create it. Looking at our exercise folder, we can see that our CSS style sheet is within the style folder and the name is stylesheet dot CSS. Using the really easy method I told you earlier, understanding how password by pretending you're describing to index.html how to faint or fail. We're gonna use this method to re or path. So firstly, index.html would have to go into the folder style. So we will take that and record edit. And then it would need to look at the file name, stylesheet dot CSS. So we'll also no tape that we will know hat C or Control S. Go back to our browser and refresh. And you can now see the text is massive. On our style sheet has taken effect. If we inspect or paragraph. You will also see that the CSS declaration we added is also included within the daffodils and has taken effect. One of the best features of DevTools is we can make life changes to the CSS if a website, three DevTools, for example, there's tax is far too bag a anemia that there's large. So you can easily see the CSS take effect. This may make it a more reasonable size, which we can do rate and DevTools to see how it would look. I'm going to click on font size for a paragraph. And I'm going to change the font size to 20 pixels. You can now see the CSS has taken effect and we can see how that looks on our website. Please remember though, that this change has not been saved as a Gaussian is a change mid only locally in your browser. And so if I refresh the page, you can see that it has not taken effect. Let's change the paragraph font size to 20 pixels again. And you can now copy and pierced the declaration into your code editor. Sea of your style sheet dot css. And know when you refresh your webpage, you can see that the CSS change. You have me, it remains. Let's write some more CSS and we're going to rate it straight into DevTools. It would be really nice. Therefore, heading was sent relates. To do this, I'm going to click on H1 and DevTools. I'm going to go over to the CSS editor or Pian. I'm going to click the Plus to create a new CSS rule set. And then I'm going to click under the LSAT. And as a property, I'm going to write text align. You can see that DevTools gives you a hint as to what you can choose for a value. And I'm going to center, I'm not going to hit Enter. You can see that our heading has been centralized on our website. For this change to take effect, we must add it to our style sheet, which we can certainly do by copying this real Sam going to our code editor and piercing in our style sheets or CSS by no saving their style sheets or CSS and refreshing our browser page. You can see that there's CSS rule set has been added. Remember, we can add multiple declarations into your role. Sam, let's say we want to our heading font Weird to be slightly layer and not look as bald. We can just click on the rule set and this will allow us to add a new declaration. Now a question you might have is, how can a remember all these different properties for CSS? And the answer is, really, it comes down to practice. It comes down to creating websites and remembering the properties you used when you created them. In the meantime, though, there is a really great website, CSS reference dot IO, which shows you all the properties you can use NCSS and it grips in together and collections. So in our example of wanting our heading to be a slightly thinner font, we're, let's see what CSS property we could use. Let's click on typography. And then the left side, you can see we have font, weight, Clicking font. You can see the property and values you can use. You can see that it also gives you the values you can use. For a family. It, we're going to use lighter as be 1 eighth, then fumbling it. Let's take this up by going back to our website, going to dab tells, making sure we have our H1 heading selected. We can click on a rule Sam, tape thump, we're a new policy. The DevTools actually also gives you hints as to what values you could use. We decided we wanted to use layer that select Layer and earth. And you can see that our heading font we're, is nice manner. To add this terrorist style sheet. Simply copy the declaration we just added. Go to our code editor. And were then our H1 rule says create a new lane and PSTN or new declaration Control S to see if they are going back to our browser and refreshing the page. You can see we have achieved what we wanted of having a thinner fun on our heading. So when it comes to using CSS, if you're unsure if the properties or values you should be using to achieve the look you want. Give CSS reference dot IO or lookup using their collections or by searching CSS properties, for example, color. You should be able to find the properties and the values you need to be using to achieve the change U1 and CSS over time and through reputation. And by stating your own websites, these properties and values will become second nature and you'll be able to use them without having to reference the, say, the glass. However, as a beginner, I say the glass is fantastic for learning the properties and values you need to create beautiful websites in CSS. 8. CSS Basics - Part 2: Let's dive deeper into using CSS on our exercise website. The next thing we want to take a look at is the spacing between the elements. If you take a look at this link and the image below it, you'll notice that they're very close together. To fix this, we're going to use what's called margins. So if I inspect element, click on my image or you can just click the image tag in DevTools. And we're gonna go over to the CSS box and click the Plus to create a new role, Sam. And I'm going to start taping margin dash. Now we can use margin top, left, right, bottom. But because I want to add a space between the top of the image and the link. And we're going to add margin top. And then wanted to take 30 pixels. You can know C, we have a nice space between the top of the image and the link. You can see the margins visually represented in the box model of DevTools. And you can also make changes to the margin in this bogs tools area. For example, if I click the top margin, I could make it 25, for example. And you'll see this represented on your exercise website. I think 30 pixels looked bear. So I'm just going to delete the CSS rule that that bogs model added. And I'm going to copy the image real Zan. I'm going to open up my code editor and I'm going to add and see of these changes in the style sheet dot CSS. When we refresh the exercise website, you'll see that there's change has now taken effect. And that's brightness website up. It's lagging a bit of color. We can apply colors to elements as well as text. So let's take a look at the background of this exercise website. I want to select body, which is the entire background off the website. And I'm going to add a new rule sat inside the real San. I'm going to tape back drained. And when you take background, you'll see that DevTools gives you a range of options that you can pack from. For example, our gla. You'll see that change takes effect on your website when you click one of these colors. Now this is great. Forget about color on your website quickly, but it doesn't really give you fine control over the colors. For example, let's say I want to color from this image. For more specific color control, NCSS, we use what's called a hex code. If you've worked with photography or image editing before, you may already be familiar with what hex code is. But basically hex chord is a color code which starts with a hashtag and is then followed by sex. Layers are numbers. The first two layers are numbers refer to read, the next two refer to green and the last to referred to play. It's basically a representation of an RGB color. For example. Hashtag followed by sex payoffs is white, or hashtag followed by six zeros is black. Hex codes are great because it allows you to pick a color from, for example, a Photoshop image or a chord with someone else may have already given you, based on some market and material you've been given. And instantly add it as a color to the background of your website. If you don't know a hex code, fear not. Devtools gives us a really nice color picker. If we click the color next to the hex code, you will see a color picker comes up on here. We can choose a color over lighting. Or we can simply click the eyedropper till and click an area on our image. You'll see that this is pecked a color and assigned a hex code for that color based on the area I've selected on the image. Now all we do for these changes to take effect is copy the real safe. Go back to our code editor, PSTN, the real set. And see if, again, when we go back to our exercise website, you'll see these changes have taken effect. We can also apply color to text. So if I take a look at the header element, firstly, you'll see that we already have a role set defined. So I'm simply going to add to that. I don't need to create a new one. And I'm going to tape color. Again. Devtools will give you a range of options you can choose from. But I know the hex code for weight, which is hashtag, followed by six f's. So I'm going to tape hashtag and sex Fs. You can see that this is mirrored are heading. Fun way? No, because this rule says already defined within our CSS document. I don't need to copy the entire rule set. I only need to copy the color portion of it, the CSS we have just added. I'm going to go into my code editor. I'm going to simply add that end to the rule set which is already defined for the heading. And I'm going to see if the document there's changes no tag an effect. I'm also going to change the font color for our link. So I'm going to inspect or a link element or just click the a tag. We're then DevTools. I'm going to add a new rule set as we don't already have 14. And I'm going to make the color white again. I also want to make this link slightly bolder to stand out. So I'm going to add font we it, and tape bold. You can now see that this link is bolded. And we're going to copy our rule set again and our desk to our style sheet. Again, saving. This looks great. The last thing I wanna do is sent relays everything at the minute, everything is quite off-center. So to do that, I'm going to select our body tag, which is everything and our website. And I'm going to take text, Elaine. No, you can choose left center array, but decentralize everything and want to tape center. You can see that everything has now been centered on our website. Again, because as we're all set already exists, I'm simply going to copy the CSS I've just taped. Go to our code editor and add it into our body. Real sad when I see of this and go back to our exercise website, you can see that these changes have now taken effect. 9. CSS Selectors & Classes: Together most Day of CSS, we need to now take a look at what CSS selectors are and why they're important when it comes to styling your website. And our exercise website. Let's pretend we want two paragraphs, but we only want the first one to be white. We want the second one to be black like a currently as. So let's go to our code editor and let's add a second paragraph. To do this. It's really simple. I'm just going to copy and pierced the paragraph tag, the contents within the paragraph tag and the closing paragraph tag. And I'm just going to paste it below. So you'll know see we have two paragraph elements. First one here and the second paragraph element below it. I'm simply going to type first paragraph and second paragraph, just so we can easily see the two. When we take a look at our exercise page, I'm not going to see of this and bring up our exercise page and refresh it. So you can see we now have our two paragraph element, but both are styled black. So if I go into the style sheet, good our paragraph element and change the color to white, which is hashtag followed by sex AF. And save it. When I refresh our exercise page, you can see that both or a paragraph elements have been styled weight. If we inspect them, you'll see that the first paragraph has the color of white, but also so does the second paragraph. Why is this? And how can we fax us to understand why this is happening? We need to know, learn about CSS selectors currently and our style sheet, every rule set we have created has used the element CSS selector, p, H1, image, body a. These are all elements CSS selectors. How do we know this? We know this because there is no dot or period before the element name. An element selector makes the changes to all elements will then a webpage. So for example, if we use elements like HDR pay every paragraph element, we'll then the website will have that CSS applied to them. So in our exercise website where we have two paragraphs, the element selector p and CSS applies to all paragraph elements, including the two par gas we have in the website. And anymore, we might add using an element's CSS selector doesn't give us specific control over HTML elements using the same tags. For that reason, we need to use classes. Classes allow us to assign specific CSS styling to specific HTML tags. Let me walk you through how to do this while explaining at the same time, MC SAS, we define a class by using a period or a dot before the name of the CSS selector. And we then define that class name as an attribute within the HTML element. To understand this, let me walk you through how to set it up. And I think it will make much more sense once you see an action. So the first thing we wanna do when looking at our code editor is add a class to our second paragraph element. No classes and attributes. So we add it with inner opening HTML tag. So I'm going to add a Spears and I'm going to write class equals and m of n to speech marks. I'm going to add a class called white paragraph. I'm then going to go to our style sheet and I'm going to add a new rule set. This time. I'm going to add a period or a dot before the class name. So I'm going to write dot and then white paragraph within our curly brackets and wanted to take color. And I'm going to add hashtag and sex AF, which we know is the hex code for white. The last thing I want to do is remove the white color we added to the paragraph element at the top of our style sheet is this would currently turn all paragraph elements white when we only want the second paragraph to be white. So I'm just going to remove this. So let me just quickly explain again how this works. So hopefully it's clear in your main, we have added a class to our opening HTML tag for our second paragraph. The class name as white paragraph. No, we do not need a period or dot before the class name. When adding it into our HTML tag, we just write class equals and then move into speech marks or className, which we can define as anything we want. But in this case we've called it white paragraph. Then on our style sheet, we have added a new rules. They're detrital says deferent from an element CSS selector, because we're using a class CSS selector. So we've added a period or a dot followed by a className and SKS, It's white paragraph, which directly links to our HTML class weight paragraph and move in the real set, we've just added assembled color change to make the text white. Let's say c of the style sheet. And also see if the index.html. Good, our exercise page and refresh. Now you can see our first paragraph is black and our second paragraph is white. If we take a look at these elements within DevTools, you can see the first paragraph pulls from the p CSS selector element. And if we take a look our second paragraph with the class name white paragraph, you can see that it pulls the weight paragraph rules say at which we created for this class, you can create as many classes as you want with whatever name you want. And you can also have multiple HTML elements, use the same class. They don't even need to be the same. Let me show you this as an example. Let's add a heading blower second paragraph. Let's add a H2 heading. And I'm going to write this as a white heading, followed by a closing tag. When we see of this and load up our exercise website and refresh, you'll see that this is not a way you heading as in fact black. To make this white, let's go back to our code editor. Let's add a class again. And let's use the weight paragraph class we've already created. To do this within the opening HTML tag, again, type class equals and then move into speech marks just hey, wait paragraph. The same as the second paragraph class we've already created. Let's see if that go back to our exercise website and refresh. You'll see that the heading is Nye White. When we inspect this element. And you can see is pulling from the CMB white paragraph rule, Sam, we've already created. So now hopefully you can see the par of using CSS class selectors. We can create rule sets which we can then apply to multiple HTML elements, allowing us to style a website really quickly, but also give us much more control over specific HTML elements that we want to style. 10. Typography in CSS: Let's now take a look at topography. We want to have a nice fun on this exercise website to really make it stand a. So let's take a look at how we add and change fonts will then CSS. The first thing we need to do is import a fun, which we can use to do this. First, we need to find a fund that we like to make us really straightforward. I'm going to show you how to import and use web fonts from Google. Go to fonts dot google.com. And here you will see thousands of funds which we can use. We're just going to select a fund that we like. For example, Oswald, where you can choose where refund you one. For this example, we'll scroll down and we'll choose, select their style. And we'd won a light, regular and bold fun. So I'm just going to select the light from a regular fun and a bold farm so we can cover all thump weights with MRSA. And VRE window doesn't automatically open to the rate. Go up to the top ray and click this button here that says view your site and families. And you'll see this window opens up. The first thing we need to do is import desk web fun into our website. We simply select and copy all the text in this first box. We go to our code editor and in the head blower style sheet, we pierced. We'll know c of that. And go back to Google Fonts. And we'll Copy CSS Brill in the second box. Gone back to our code editor. And within the body roll SAM, which applies all CSS rules to the entire page. We'll create a new lane and pierced. What is this doing? The CSS rule we've just added as specifying that the font family we want to use for the entire exercise page is the Oswald fun. And as we've imported the Oswald fun into the head of our website, it's available to use. So I'm gonna see if the style sheet and see if the index.html. And now if I go back to our exercise website and refresh, you can see that the entire website is using the Oswald fun. That looks great. But what if we want to use more than one fun? Let's say we want the paragraphs to have a different fun from the rest of the website. Let's go back to Google funds and remove all from our selected family. And go back to the homepage. Let's snow pack a font for paragraphs. I want it to be different from the one we've just packed. So omega, good contrast. But again, you can choose wherever fun you like best. I'm going to choose Labster. Labster only has one font. We're so we're just going to choose Regular, select their style. Click the top right button again to few selected families. And again, we need a copy. The tags in the first box, which is TM poor orphan, go to our code editor and biloba provided the code to import the first fun. I'm going to add the second. And I'm going to see if going back to the Google funds webpage, I'm going to select and copy the CSS rule for the lobster fun family. And I'm gonna go to our style sheet. Now, we want the second fun to apply to the paragraphs only will then our exercise page. So I'm going to go to the p element. And the reason I'm choosing the p element or not, the white paragraph class we created is because the weight paragraph class, if you remember, only applies to the second paragraph. And I want this font to apply to both paragraphs. So I'm going to use the element which applies to all paragraph elements and when to create a new lane within the rules there. And peer Stan, the font-family declaration does no specifies that all p elements will use the Lobster font family and the rest of the body for use the Oswald font family. And want to see if the style sheet, making sure index.html is saved as well. Go back to the exercise page and refresh. You can see the headings and all our elements are there in the paragraphs. Use the first fund we packed, which was Oswald. You can see this by going to the elements within DevTools. You can see H1 meters and Oswald. H2 is using Oswald. Even the age ref link is using Oswald. But you can see that the paragraph elements are using Labster. And again, you can use whatever font you like from Google. I'm just using these as a quick illustration of how you can use typography and easily and port Google funds within your website to make them look much more professional. 11. Bootstrap: For nearly ready to start the mean website project. The last thing we need to learn as Bootstrap. What is Bootstrap? Bootstrap is basically a collection of handy reusable bits of code and CSS and HTML. And it's the most popular HTML and CSS library and the world. As a matter of fact, at the time of begging this course, over 18 million websites use Bootstrap. There are many reasons to make use of Bootstrap. These include time-saving. It's easy to use, it's customizable. It helps you make consistent and professional looking websites. But the main reason and the reason I'm going to demonstrate it to you in this course is that it has a fantastic grad system which allows you to easily lay out your website. And maybe even more importantly, allows your website to be mobile responsive with AI, a lot of work, you can read more about Bootstrap it, getbootstrap.com. But I'm going to teach you how to include it into your web page and how to use the grid system when laying on your website. So the first thing we need to do is include trap into our website. It's basically a CSS file. So go to the exercise package we've been working from an outside of the exercise folder, you will see a folder called needed for exercise, proven that there is a folder called bootstrap, which I want you to copy. Go back to our exercise folder. And pierced know we need to include deaths within our index.html document. To do that, go to our code editor. And below where we've included our style sheet. I'm simply going to copy this line, create a new lane and PS2 to CLS typing out the whole line. And we want to remove the content of H ref. And now we need to add the path for Bootstrap file. If we look at our exercise folder, we can see there's a Bootstrap folder. And within Bootstrap, there's a bootstrap.css file. So again, by presuming you're given directions to index.html and height. Again, without fail, we would need to go into the bootstrap folder. So I'm going to take bootstrap forward slash, and then the filename is bootstrap.css. So I'm going to take that strap dot css and see if you have no included bootstrap into your exercise website. So how do we know use strap fail who have just included and what is the Bootstrap fail? We have just included the bootstrap.css file that we have just added into our exercise website is basically a large list of predefined CSS rule sets which we can use when making our website. So to use it, we have to use CSS classes. Puts link up to the bootstrap.css file with just included. So let's change the layout of our exercise webs ALL bat, so I can demonstrate to you, Hey, this works. Looking our exercise website, I want to add a third paragraph by 12 to three paragraphs to be on the same row. Beside each other. So the first thing we need to do in our code editor is add a third paragraph. So I'm just going to copy one of the paragraph elements we have added in our exercise website. And I'm going to peers to blow the second paragraph element. I only want the metal paragraph element to be white. So I'm going to remove the class for the third paragraph element. We've just added this nice C of S. And take a look at our exercise website. You can see our website now looks like this. This looks very broken. So what have we done wrong? Let's go back to our code editor and scroll up to the top where we have included the Bootstrap CSS. What has happened as because the bootstrap.css is below our style sheet. That means encoding terms. Any styles which come from bootstrap.css override the styles we have added and our style sheet dot CSS. So when we take a look our exercise website and take a look at the body, you can see that the background color we have added in our style sheet does CSS is being overridden by the background color which has been added by the bootstrap.css. So it's very important. The bootstrap.css goes above our style sheet dot css and the header. Again, to make it clear, the reason for this is the lowest end port at Style Sheets or CSS file will always override those above it. So unless KS, now that we've swapped them round, bootstrap.css rule sets will be overridden by any style sheets or CSS rule sets we have added. So I'm going to save this, go back to our exercise page and refresh. You can now see the rule sets we have added in our style sheet dot css have reapplied. So we now have three paragraph element. But I want them to be side-by-side and a row. To do this, we're going to use the Bootstrap grid system. The Bootstrap grid system uses rows and we have n m rows, columns. You can have 12 columns within a row, and then a single column can take up as many of those columns as you want. For example, you could have two columns of sex. You could have three columns or four. You could have four columns of three. Or you could have one column of 71, column of five. You could have three columns to your 5 and 1 of 2. And as you can see, this gives you unlimited control over column webs with Anna row. So let's put this into practice. I'm going to bring up the code editor and I need to add a row. All three paragraphs well be within that row. So above the first paragraph. And we'll iterate dev, which is a generic HTML element. And I'm going to write class equals row. So we have an HTML div element, which again is a generic HTML element. And within that, I have a class attribute, which I've added by race and class equals. And within the speech marks I've added row. We need to close this tag. But because we want the three paragraph elements within it. And we're gonna go down to below the third paragraph closing tag. And I'm going to close the div tag to keep things looking nice in our code editor. What I'm going to do is not just the paragraph elements over to the right allow. This will have no effect on our actual webpage, but it affects how things are laid out within the code editor and makes it easy to understand where elements are inside others. To do this, I'm just going to select all our paragraph elements. And I'm going to press Tab on my keyboard. You can see there's no makes things easier to understand from the code editor is point of view. Visually you can see that three paragraph elements are within a row, dev. So I'm not going to see if this and load up our exercise webpage and refresh. And you can see nothing's really changed. That's because all we've done is add these three paragraph elements into your row. We need to know I add them into columns. So I want three equally spaced columns within that row. And because Bootstrap has a max row column width of 12, that means each paragraph column must be four columns of wet. So how do we do that? Let's go back to our code editor. And above our first paragraph, I'm going to add a new Dev, which as you remember as a generic HTML element, I'm going to add a class equals speech marks. And prevent that. I'm going to rate the CLL for column dash four for a column web of four. And I'm going to finish that opening HTML tag. Now we only want our first paragraph to be a ness first column. So below the closing p tag for our first paragraph element. And when I had a lame and I'm going to close that div tag. Again to keep things that can nice within our code editor, I'm going to select the entire first paragraph and hit Tab. So again, mega visually obvious that the paragraph element is woven the dev class column. So we've now added our first paragraph element into a column of four. We need are the second, third paragraphs and do their own columns. To make this quick, all you need to do is select and copy the dev class column for HTML tag you've just added. And add this above the second paragraph by creating a new line on PSTN. Then just after the closing p tag for the second paragraph, close that div tags. Again, I'm going to select the entire paragraph element and press Tab on my keyboard. And lastly, above the third paragraph, create a new lane and a given PS, the dev class column for element. And again, just after the closing p tag, I'm going to close that div tag. And again, I'm going to select the entire third paragraph and press Tab on my keyboard. Again just to make it clear, when I'm touting element across in the code editor is not changing its possession or layout on the actual web page. Assembly for visual reference within the code editor. As you can see, it makes it easy to see. We have three columns. We have a div with a class of column four, with a paragraph inside. We have a second div with a class of column for before white paragraph inside. And we have a third div with a class of column for the first third paragraph inside. I'm not going to see if this go back to our exercise page and refresh. You can see that we have a row, and within that row we have three column boxes of equal weds. And within there we have our paragraphs. If we take a look at dev tools just to understand this further, you can see we have our div class row. If I open this by clicking the arrow to the left, you can see with Anna row, we have three columns of equal width. And within each column, we have our paragraph elements. As mentioned, the max width of a row is 12. So we can have a player by and spears these differently if we wish, as long as we stay within the max column whereas of 12. So for example, we can have the first two paragraphs be very small, so only two columns of bread. And our last paragraph be really large of IOT columns with it. Plus two, plus two is 12. So that's our max real web. I'm going to save it. And when I refresh the page, you can see we now have two small paragraphs and the third one being very large. You can also change S prevent DevTools to get a quick and easy visual representation of how this would look by simply going with n or a row class and changing the dev classes to have different column webs. So for example, I could make this 1, 4, I could make the metal 13, and I could make the last one, 5. If you include more columns than 12, which I can do here NIH, by making this nine, for example, you can see that it breaks the row. You need to make sure that all the columns within the row add up to 12. So to do this, I would change this column back to five. You can have as little as one column within a row and a max of 12. Bootstrap comes with many other things which you can use simply by using CSS classes, such as buttons, cards, drop-downs, forms, even navigations. But for this course, we're Assembly going to make use of the grid system as it's a really powerful way to gather mobile responsive website, which will be touching on later in this course. Together quickly. 12. What we will be creating: So before we write any code, Let's take a look at the website we're going to be creating. So for this course, I create a fun scenario where we've got a business in the world which is ran solely by dogs. And they've come to us to create their first website. It's a bit of a fun and Sally scenario, but it gives us a creative direction to go off. So let's take a look at the website we're going to be creating for them. The first section you'll see in the website is the navigation. And this contains a few links which allow us to navigate around the webpage. So for example, if I click there bi-section, it takes us to there by area of the website. Or if I click the Contact Us section, it takes us down to the Contact Us section of the website. This will be our navigation. The next section we have to the website is the reduction area. This is a big bold section, contains a lot of color. Looks really nice, has a beggar image, has a bag heading, and has a small amount of paragraph tags, which basically describes our ENT reduces the business to the viewer office website, says will be the introduction section to RSA. The next area of the website we have is the About Us section. You can see it has three columns. Each column has a smaller brain damage, a heading, and a paragraph. And each column is basically some information about a member of staff off as business. So you can see I've top dog the dog even manage your dog, says will be there by our section of the website. The next section we have is the YR section also say, and it does exactly that. It describes why someone should choose as business FDA review in the website, you can see we have three rows with all Ernie and by grains the thirst and third have this blue purple background. And the middle one has a more gray bar grained. End each row we have a heading and a paragraph and an image. And you can see that's flap drain for the metal row says will be the y OS section of the website. The next section that an arguably the most important because it's really impair of people can get in contact with your business. The Contact Us section. You can see in the left side we have the e-mail and also the company's address. And then on the right side we have two more images. This will be the Contact Us section of the website. Lastly, we have the footer. This is really simple and straightforward. It just contains the year, which is obviously 2021 at the moment of Magnus coerce and the name of the business. So this is the website and entire a, and this is what we're going to code and style when creating our first website. 13. Building The Website - Navigation: You're now ready to start coding the mean website project using everything we have learned so far and our exercise HTML file, we're going to pull it all together and make a professional looking website. To start, we need to clear diner Chordata or an open a few new files to get going. I'm going to close the style sheet for the exercise website. And I'm going to close the index.html for our exercise website. Bring up the exercise package folder which I've been working from and go up a file. Well then there you'll see our website folder. Click end of the website folder. And let's add our index.html into our code editor. You can see we're starting with, I pray, blank, new HTML file. Very much to see Him as our exercise HTML file. The first thing we need to do is include a style sheet. But before we do that, we need to create it. Go back to our website folder, create a new folder called style. Within that folder, create a new text document, but call it style sheet dot css. And we want to change the file name extension. So yes. And we've now created a style sheet dot CSS file that's known include that within the head of our HTML document. So I'm going to tape link REL for a relation equals stylesheet because it's a style sheet, H ref. And within the speech marks, we need to add our path. Looking at our website folder, you can see the folder is called style. And we've entered for trying to load the style sheets or CSS document. So we'll type style for research, Style Sheets or CSS. And we'll close the HTML line. Let us know see of that. We want to open our style sheet so we can add styles as we develop or website. Right-click on the index.html tab, go to Split rate, then open our website folder and drag our style sheet and to the right PM. We can then close our index.html file on the right pin grip. We've included our style sheet and we have an open ready to add styles. Next, we need to include Bootstrap. Remember, the bootstrap.css file must go above our style sheet and our HTML document so that any CSS rules be rate and our style sheet override any pre-existing styles that come with Bootstrap. So I'm going to add a new layer above the lamer. We've included our style sheet. I'm going to copy that lane and peers to above just to see if some time. And I'm going to open up our website exercise folder. If we go up one to our website folder, you can see we haven't got a bootstrap folder included. So we need to go up again to the package folder, go into the needed for exercise folder, and copy the bootstrap folder. Go back to the website folder. And pierced the bootstrap folder. And within that Bootstrap folder, you can see that the bootstrap.css file is included. So Dad, there's tear index.html document. We change the path to be bootstrapped, forward slash bootstrap.css and see if griot, we're now ready to go in creating our main website, the first thing we wanna do is add a navigation to the top of her website. So let's write that up. Let's go inside the body tags for HTML document. And let's create what's called a comment. A comment is Elaine will then your code editor, which is not rendered on your webpage. Simple purpose is to allow you to add notes to your HTML document, which can be used to explain your chord, which is really useful if you come back to an HTML document, allele or D it to help refresh your memory. To write a comment, you need to write a less than sign exclamation mark, dash, dash. You can see that the line now goes gray in your code editor. And I'm just going to re navigation and into clues. Your comment rate, dash, dash. Greater than insane. You can see that this line is grayed out. That means the DES is no comment and well not be displayed on your webpage. And a thin added on lines below. Well be displayed only text between the dashes. Well-being commenter I, there is no tag, a new lane and rate or navigation HTML. So we want a ordered list, so a UL tag. I'm going to close that unordered list tag. And then within our unordered list, we need a last I am LI tag. And let's think about what items are going to be on our navigation. We're going to have home. So you can get back to the homepage. And I'm going to close the ALA HTML tag. I'm going to take a new lane. And when I add another LI tag on our website, we're going to have a bite section. So I'm going to write a boat includes the LA tag. You can speed this up by simply copying and pasting the ALA rows. So I'm going to add two more. I'm going to have a way OS section. And we're going to have a contact section. You can have whatever you want in your navigation. But I think first example, these will work perfect. This and I see of this. And for the first time, That's bring up our HTML page and our browser. Today that somebody go to the exercise folder, go to the website portion of our exercise folder and double-click on our index.html. You can see that the HTML which is added has loaded up and are brighter. We're going to open DevTools. We don't need them for NIH, but let's just keep them open as we're going to need them through eight best development process. Now when it comes to designing websites. Really two ways you can do it. You can either write all your HTML and one go and then come back and stay silent by raising your CSS earlier deer. Or you can write your HTML and CSS together as you go down through the webpage developing out. We're going to use the ladder for this course because I think it makes much more sense to scale each section of the website azure rating the HTML to give you a better picture of how the page is coming together as you develop it. So let's style or a navigation. At the minute it looks nothing like a navigation that looks like a list. So let's turn our last into a navigation. Let's go back to our index.html file within our code editor. And let's add a class to our honored blast. Let's call it navigation. And C of looking at our navigation, the first thing we need to do is get it into the center offer page. That's good our code editor and go to our style sheet dot CSS. We can also use comments within our style sheets or CSS. The only difference is the way you write them as slightly different to how you rate them in an HTML file. For CSS, you write a forward slash asterisks, which is the start of our comment, and 1D array and navigation. And then to close it, urate asterix forward slash. So any tags between the two asterisks is common to I and won't be rendered on your webpage. This again, is great for writing notes about your code, which will help you make sense. Offer FU, come back to it earlier, dear. Let's create a new lane that's either a period or dot. And in the word navigation, which is in reference to the class navigation, we just create it for our unordered list. And we're van or curly brackets. Let's add text aligned center and see I've gone back to our webpage. You can now see that our navigation is centralized. The next issue we need to get rained as we need each lest I am to be on the same lane to the more elegant navigation. And there's like a last. To do this. Let's go back to our style sheet and let's create a new selector. And when or a period or diet navigation for the navigation class. And then I'm going to write, ALI, Why have I done this? So taking a look at our style sheets selector, you can see that you can start selectors together. So by using dot or period navigation for reference and the navigation class in our HTML document. But then we've used an element selector of ALA. If you remember, FS selector doesn't have a period or dot before it, it's an element selector and will affect all HTML elements of that type. So there's LI selector will affect all ALA elements on our page. But because we've put it after the class selector navigation, it will only affect all LI element with n, the class navigation. So what will affect all these LI elements with n? This class of navigation, lets me add curly brackets, and let's add display and ln block. Remember when I said some CSS properties, you just have to learn. Unfortunately, this is one of them. So for now, just tape us ND or stylesheet dot css and save it. Go back to our exercise page and refresh it. Now you can see we have something that looks more like a navigation as each last day m is on the same lane. The only thing is h last element is a little too close to each other. So to facts as I'm going to add a margin to the right. So I'm going to click LSTM element of event DevTools. You can see our navigation, lest I am real set is showing from our style sheet. So I'm going to click to add a new property. And I'm going to re margin left 15 pixels. You can see that this is spears. These elements are nicely as the experience. So I'm just going to copy this property and value good or the code editor and create a new layer with inner navigation, that's day and PSTN and had C of 10. I'm going to refresh or webpage. Lastly, our navigation is setting too close to the top of the webpage. I need to pad it. I FA click the UL tag of the class navigation. You can see we already have a declaration loaded up from our style sheet. So I'm going to create a new lane and I'm going to rate padding. Top. Padding worked very much like margins. So I'm going to add a padding of 20 pixels. We have more elements, tardiness page, and we don't want them to be jammed right up against the bottom of her navigation. So I'm also going to add padding bottom, and I'm going to pad the bottom by 20 pixels as well. You can see if you hover over UL tag, the purple shows the padding. So we can see that we know have purple padding of 20 pixels at the top and purple padding of 20 pixels at the bottom. Let's copy the two padding properties we just created. Go to our code editor within the navigation, create a new lane. And PSD man, I'm not going to have to see if go back to our page and refresh. And this looks great. We have the beginnings of our webpage and in navigation and players. 14. Building The Website - Intro: Now we have a navigation editor or website. We want to add the next section, which is our website and row. Let's go to our code editor and blue or on ordered less tag. Let's add a new comment, which again is a less than sign exclamation mark dash, dash. And let's re Andrew, friend reduction. Dash, dash. Greater than saying that comment no, lets us know that blew it on a new lane. We are going to add R and rho section. So the first thing I want on our intro section is an image. So I'm going to add the image tag. I'm going to type SRC for source equals. And within the comma, we're now going to include a profile shot or any image you want. In the end of section, if you look at the exercise folder, you'll see that I have included all the images you will need with an images folder for this web page where Meghan in this course. You don't need to use these images. You can use any image you one, to make things nice and easy. I've included these so you can simply use the images I'm using. And there's fattier way, well say as if you do want to use your own images, a recommend you add them to those images folder, which will just make adding the paths and to the image source much more straightforward and much more easy to follow along with the course. Or like me, if you just want to use these images, simply do exactly as I do in this course. So here I've included a profile JPEG within the images folder. So our path is going to be images for the images folder, forward slash profile, JPEG. To be clear, is the name of the image within the images folder. Then I'm going to write out for alt text equals and move into speech marks. I'm just going to re profile shot. And I'm going to close our image tag. I then want to heading. So I'm going to write H1 for an H1 tag element. And I'm going to re, welcome. And I'm going to close H1 tag, an envelope that I want a short paragraph. So I'm going to read the paragraph element and I'm going to re, we are the world's first business. And by dogs. Because as you know, this is a website for a dog base business that were created in this course. And then I'm going to close the paragraph tag. Since no sea of that and take a look at either linked on our webpage. Going to go back to our web page, and I'm going to refresh. So you can see the image is loaded. We have our heading tag and we have our paragraph. But this doesn't look good at all. So the next thing I wanna do is add a background for this intro section. So looking at our code and our code editor, you can see that these elements at the minute aren't grouped together with an a tag or a class. I can apply a background too. So I'm going to create a new lane of both the image. And I'm going to write section as the HTML element. You could also use Dev here, but section as a semantic HTML element. Section means that the content and say it is gripped or really it says single theme, raise a dev HTML element is more generic because S is an intro section of our website, ever m with n, this HTML element we're writing as going to be gripped and as going to really attest single theme, the Endrew, then it makes more sense to section and SKS. And I'm going to add a class. And I'm going to call it colored background. Because we want the unrolled section to have a colored background. I'm then going to go below the paragraph element, and I'm going to close the section tag. Again to keep things looking nice in our code editor, I'm going to slight damage H1 heading tag and the paragraph and hit tab. Just so we can visually see in our code editor that those elements that were van or section of colored background. I'm now going to see if this, I'm going to go to our webpage and I'm going to hit refresh. You can see if you look at the HTML, that our section class colored background has the image heading, tag and paragraph with Anna. Let's add a background to that section and we're gonna go over to the CSS pn of DevTools. Click Add new real. And within that rule said that it's just create it. I'm going to write background. Now instead of just using a color, that's time, I'm going to use an image to do this. You want to write URL, bracket and two apostrophes. Know what N, these apostrophes, we need to add the path to our image. So let's take a look at our exercise folder. And you can see with n the images folder, I've included a bad grade damage, fine-grained dot PNG. So we need to add the path for this by brain damage and between the two apostrophes. So there's background images within the image folder, and it's got a nymph by grain dot PNG. So you may presume the path that we need to re as images forward slash background dot PNG. But let's be wrong. The reason for this is because if we think of the math that I taught you of hurray paths, of presuming you're describing where the damage as to index.html. We're not actually describing it to index.html. We're just giving it to style sheet within the style folder. So actually what we would need to do is go up a folder, then into the images folder, and then by green dot PNG to write up a folder, what we would do is we are dre dot dot forward slash, which means with NIH went up a folder. Then images, then by grain dot PNG. When I enter the decimal, not show until we've added it for the first time to our style sheet. So I'm going to copy this real Sam. I'm going to open our code editor and I'm going to add a new comment within our style sheet. So I'm going to do forward slash asterisks because remember it's different for style sheets. And I'm going to rate AND rule again relating to our aunt real HTML section. Whenever a Asterix and forward slash. And then I'm going to pierce are real sat em. Again, period, period or dot dot forward slash means we have an upper folder. So if we take a look at our stylesheet folder and our style sheets or CSS, which is what we're describing the path to. We will be going up or folder. Then we've got images forward slash because we'd be going into the images folder. And then we want the bg dot PNG, which we've got here. Let's see if that go to our web page and refresh. You can see that our background image is nice showing this background image is semi-transparent. What that means is the weight sections you can currently see are transparent. So anything beneath it would show through. That means we can add a color to our background and the color will set blower image. So if we take a look at our colored background section and our background property, and click to edit the value. And if an after the closing bracket will display below the image. So we can add a color. For example, we could add a space and rate red, which you can see. Or we can use a hex code for a color, 90, the color I want to use, and now is 33225 b, which is a purplish color. You don't need to use this color. You can use whatever color you want. May not be a word such as red or blue or a hex color code, but she has got from somewhere else. But if you want to follow along, just use 33, 22, five B, and her and her. The next thing you'll notice is that the bag grains seems cut off the level to the rate. It's not full width, it's repeating again. So to fix this, what we re, is by grain size and we rate a 100 percent. What that means is the image will take up a 100 percent of the width of the background. That's no copy. These properties go to our code editor and peers to mentor or colored background real sand. Again, I'm keeping everything aligned nicely just so it's easy to understand. I'm not going to see this good our web page and hit Refresh. And you can see our background is now showing. The next thing we wanna do is we want to send her the elements within the color background. They don't look great, crushed over to the left here we want them in the center to look nice. So let's go back to our code editor and we need to add the image H1, heading tag and paragraph inside a dev. So I'm going to add a lane below this section. I'm going to write dev and I'm going to rate class equals, and then to speech marks. And now we're going to make use of the Bootstrap grid system. I don't want this section to be full width. I want it to be a box in the center of my intro section. So I want it to be a column with a defined wet. So I'm going to call them whether the boat favors about rate. We can change it earlier, D7, it's not. So I'm going to write C, O, L for column dash f5 for a column of five. And I'm going to close our deaf tag. We want the damage H1 heading of paragraph elements within this div. So I'm going to tag a new lane blow paragraph and close that div tag. I'm then going to select the image H1 and paragraph tag, again, hitting Tab to nudge them in to show that there are saying within this div tag, I'm not going to hit C of Good our web page and refresh. And you can see that not much has changed. But if we look at DevTools know with MRSA action colored background, you can see the dev tag with column 5. When hovering over it. The width is arcs, they all five columns. It and I just needs central east. To do this. Let's bring up our code editor and let's add a second class. You can add more than one class with n, an HTML tag. And all you have to do is separate it by a species. So I'm going to add a second class called centered bogs. And I'm going to create that as a CSS selector within our style sheet. So I'm going to draw a dot or period centered box, and I'm going to write margin-left 0. And margin rate of when you define something of margin-left and margin-right auto, Eveleigh medically center that ailment. So now I'm gonna see if the style sheet and see of the index.html. Go back to our page and hit refresh. You can see that there's column has centered within our Andrew, which looks great. However, the elements would end the column have not centered. So we may want to send her the image, the heading and the paragraph will then they're centered box that's column. So I'm simply going to add a property to our centered box. We'll say it. And I'm going to write text align center. You can see that there is no center is our image are heading in our paragraph, which looks fantastic. I'm going to copy this property. I'm gonna go to our code editor and I'm going to attack any lane bluer margins we just added and add endline because copied of text-align center, the next thing I wanna do is reigned over this image. So there's two things we need to do. First, we need to make sure the image as well. If you've added a really large image into the webpage, you may have already noticed that that is very large because at the minute we have no defined webs. The size the image will be in the webpage is the same as the image actually is. So if you have a large image, ever look really large on the webpage. And if it's really small, really small and the web page, we need to define a web and CSS. So let's go to our code editor. That's good, our style sheet. And we want to select the image element within the center to bogs class. So to do that, the first ray, the CSS selector for the centered box class. And then we write the CSS element selector of IMG for damage. So any properties we add here within the brackets will be applied to all images within the centered box class. And that's rate with 300 pixels. And see if it doesn't, I go back to our page and refresh. And you can see that our image is now much smaller as it's the width of 300 pixels. Just know me want to write this image over. So let's click the image HTML element and then the centered bogs image, real sense that's clicked out a new property. Let's add border radius. And we can add whatever percentage we want for border-radius. It simply reigned over the coroner's. So you could use 10 percent, as you can see here. You could use 20 percent. You could choose 30 percent. You can use whatever percentage you wash, Havre. Your images square and your image must be square. If your image is not square, you can simply load it up in Photoshop or amnesia image editing software you have. Make the damage square and see if it, if your image is square and you make the border-radius 50 percent, it will make the image circular. That sucks fantastic. I'm going to copy that property, open up the style sheet and we're vendor centered bogs damage rule set. And when a PSTN and see if it, I'm going to go back to this web page and refresh. Okay, That's a star into they're really great at. One thing, you'll immediately notice as the black text is really hard to see on this background. So I'm going to click the color background section. I'm going to go into the properties of the real Sam. And I'm going to write color, hashtag and sex a HFS, which is the hex code for weight. And that's immediately makes a tag stand a much bear. So I'm going to copy that real good. Our style sheet and PSTN as a new lane, we're then are colored background rule set and see if I'm going to go back to our page and refresh. The next thing we need to take a look at is the image is set in far too close to the top of the intro section and the paragraph at the bottom, a sentence far too close to the bottom of the anthro section. So if I click on the centered bogs class HTML element, that's pad this Rabat. So within the center bugs rule set and when are eight padding? And if I don't define a left, top, right or bottom, the Pexels I apply van will apply to all four of them sides. So left, top, right, and bottom. I'm going to add a padding of 50 pixels. And you can see that instantly looks much better. I'm going to copy the padding properties. I just create it and add them to my center bogs on style sheet and see if gone back to the webpage, there's one last thing I think needs done here, and that is the welcome heading tag simply doesn't stand out enough. So if I click to pick an element, hover over the H1 tag, select H1 tag, click to create a new real Sam. I'm going to make the font size 70 pixels, but you can make it whatever you wish. And I'm going to make the font bold to stand out more. I'm going to copy that real sad. Go back to my style sheet. But because we've just changed the font size and we're off a heading H1 tag. I'm going to go to the top of my style sheet. I'm going to add a new comment, forward slash pass tricks. I'm going to write font sizes asterix forward slash to close the comment. And I'm gonna appears that rule set and there. And I'm going to use this section to add any other fun, real sense as we go on. I'm going to save this. Go back to our page and hit Refresh. One final tweak that's needed. I've just noticed within the navigation, as it you'll notice the navigation is not setting central to the rest of the page. Let's investigate way. So if we take a look at our unordered list class navigation and hover over it. You can see if you look at the top of the page and the purple which is showing the padding. We have a padding applied to the left and not to the ray. This is just a default CSS styling, which is applied by braziers because it is a last. Obviously we want this to be a navigation. So we're going to add padding left 0 pixels to our navigation role sam. What's makes sure that there's no padding on the left to push the navigation over. I'm going to copy that padding left property we just added. Go to our navigation rule, set out a new lane, a PSTN, and see if I'm going to go back to the page and refresh. You can see that we're nearly there. It's still slightly too much to the rate. So if I take a look at the last items when you can see that we added a margin left, teach last item to create the spear things. But what this is doing is it's pushing the navigation over to the array because the first item has a margin left that's not needed. To fix this, we're going to use a CSS selector called first off tape to remove the margin left from only the first, lest I am within the navigation to rate this Goodyear code editor and blow the navigation last day. And we'll say at, let's add another one. Let's add period or dot navigation for the navigation class. Let's add lest I am for the lest I am elements colon. And then we write first off tape. So how does this work? At the start, we have our navigation, which is our class selector. Then we have LI. For last I am an element selector, so that selects all LI elements were then the navigation class. But then we've added call on first of tape. So that means it will only affect the first lest I am the vendor navigation class as other curly brackets. And we want no margin within the first list item in our navigation. So we're gonna re margin-left 0 pixels. What this means is the first lest I will then, or navigation class will have no margin laughed that sea of that. Go back to our web page and refresh. And you can see are navigation now lines up perfectly if we inspect or navigation and go to our last day. And you can see that the first one has the first of tape rule-set we've just added to remove the margin for every other nest I am after that has the margin added because it does not use the first of type real Sayer. 15. Building The Website - Changing the background: When it comes to the colored background or her website, you'll need to use the background image included for this course. You can find and use whatever background U1. Let me show you how to do that. First, Let's find a different image for the background of our website. I recommend a website like Unsplash, which has royalty-free, usable images, but you can use whatever image you want as long as you have permission to do so. And I'm just going to search backgrounds. You can scroll down and find whatever image, picture fancy. I'm just going to choose one that I like. For example, that's one of the forest. And I'm just going to click and download damage. So this is my downloads folder and this is the damage I've just downloaded. I'm going to drag this image into the images folder of the website were working on. And I'm going to rename this forest by grained. But you can name it whatever you want. It's my go to our website and we're event DevTools with the colored background section selected. You can go to the background URL, click to edit it. And I'm going to change the background dot PNG to the forest by grain, dodge JPEG, which is why I've just renamed the damage that we downloaded within the Images folder. Enter. And you can see that this image has now taken effect on our website. And it's as simple as that. You can find whatever image you want to use for the background off your website and assign it to the background using the method I've just shown you of a say for this change to take effect, we need to copy the lame. Go to your code editor and replace the color background image lane. Prevent the real set and see if now when you refresh, you'll see that your new background has taken effect on your website. 16. Building The Website - About: That's no, create the About section of this website. This is going to be a row with three columns, similar to what we created during the bootstrap demonstration. Let's load up our code editor and let's create a new comment. Again, it's less than saying exclamation mark dash, dash. And let's re dash, dash greater than same. And blue this we're going to write the HTML for or a bite section. So the first thing that I wanted to do is have a section open tag and a section tag. Next we're going to use Bootstrap grad. So the first thing we need as a row, so we create a dev HTML tag with the class of row. And I'm going to close that div tag. And then we've ns, I'm going to create three columns of four width. So to do that we create a div with the class CORREL for column dash forward. And I'm going to close that div tag. I'm going to copy this and paste it twice. So now we have three columns. We're then our row with an aura bisection. So the first thing I want to have with Anna column, because an image, so I'm going to create the image HTML tag and an SRC for source. And we need to add the path for our image. Again, within the package provided I have damages, we're going to be used them. You don't need to use these as I've mentioned before, but if you want to follow along exactly, Then damages are in this folder for you to use. We're going to use the 123 images. So for now let's just focus on the up by one J peg. So I'm going to write the path, which is the images folder forward slash about dash one dot JPEG. And I'm going to have the alt text of a byte dog 1. And I'm going to close the HTML tag. The next thing they want is a heading for this, I'm going to use h3 heading and I'm just going to write top dog. I'm going to close the heading tag. And lastly I want a paragraph. So I'm going to write the P HTML element. And I'm just gonna go to our Loren Ipsum generator, which we've used before in this course. And just January at some example paragraph text. I'm going to copy this. Go back to our code editor and ps to m. Again, as mentioned previously, when you're working with large bodies of text, it will move your code editor or to the left. So to have it fat all in one window, simply go to View. Toggle soft wrap. There's no keeps everything contained within your code editor window. And I'm just going to close the paragraph HTML element. I'm not just going to copy what's inside this column and to the second, third column. And I want the images to be different for each column. So we've got a boat to an abode, three images within our image for there, which we can use. So I'm just gonna change the second column, 272 damage and the third column to use their bite three image. Again, I'm going to change the old text, thereby dog2 and abide dog 3. And the headings, I'm just going to change, allow for variation. So I'm gonna make this one late dog. And I'm going to make the third paragraph, manager dog. And I'm gonna see if the HTML document now loading up our webpage and refreshing. If we scroll down, you can see that the columns were in our row are working correctly. The heading of paragraph text is with n m columns. But the first thing you'll notice is that the images are allowed to large. So we need to go back to our code editor and we need to add a class for RSA action. So as an attribute within our section HTML tag, I'm going to say class equals speech marks. And I'm going to write about and want to see if there's an end jump over terrorists Ale sheet, where I'm going to add a comment. Again, remember, commenting on CSS documents is different HTML documents. We need to use forward slash asterisks. And whenever a, uh, by asterix forward slash. And then I'm going to write a new rule, samp, as I want to reduce the size of all three images with anaerobic reaction. I'm first going to use the boat class, and then I'm going to use the IMG elements selection. And this will target all images were then thereby class. And then I'm going to put curly brackets. Then within that, I'm going to make the image with a 140 pixels and see if I'll now go to our web page and refresh. And you can see that these images are no much smaller. I now want to send her Elaine everything which I can do by clicking the sanction HTML element with the class a boat and when to add a new rule set. And I'm going to take the LN center and we're going to copy this rule set into our style sheet and see if it I'm not going to refresh the page. Okay, this is the ingredient. But one of the issues I'm seeing is that they are boats action is too close to the left and right side of the page. To fix this, we need to use a bootstrap function called containers. Containers simply continuum HTML elements, pad them and Elaine them on your website. So how do we contain the bisection? Let's go to our code editor. And just above their boat comment, Let's add a new Dev HTML element with the class container. Then let's go to the ending, offer a bite section out of the new lane and close the div tag. So you can see that our abate section, no sets. We'll then the opening and closing div, HTML element with the class container. By saving this, going to our webpage and refreshing, you can see there are a byte section has been contained within the container. Looking at our DevTools, you can see the dev class container and we're vanity or a bite section. The next thing I wanna do is move there bi-section dying to create space between the intro section and thereby section. So to do this, I'm going to select the byte HTML element, go to the role sam and add a margin top of around 40 pixels. I'm going to copy this. Good our style sheet and add this to the boat real SAT and see if going back to our web page and refresh him. The next thing I wanna do is round the images to match the image and RN RO. Again, for us to work, the images need to be perfectly square if you're using other images than provided in the course package, please make sure they are square. Again, you can do this in Photoshop or any image editing software as they need to be perfectly square for the border radius to make them rind this go to one of the images in daffodils. And you can see that brings up the rule-set we've already got created in our style sheet. And let's add a border radius, 50 percent, the same as what we did in the intro section. That's my copy. This property and value. Go to our style sheet and our code editor. Create a new line under a bite damage will then the curly brackets and paste. That's nicely of that. Going back to our web page and refresh and you can see we're nearly there for byte section. The last thing I wanna do is make the headings bold. So to do this, I'm gonna go back to our style sheet. I'm going to create any real Sam and I want to select all h3 tags with a nearby class to do that. And whenever a dot or period and a byte for thereby class. And then I'm going to write h3 to affect all h3 elements of a nearby class. Curly brackets, fund B, it bold. And I want to see if this, finally, I'm gonna go back to the page and refresh. And you can see that this section is neither ingredient. 17. Building The Website - Why Us: We're making great progress on our website. Let's name MEG, the way Us section. This section is going to contain three rows. And each row is going to have a slight variation of column webs. So let's create the first row with the way our section. Let's go into our code editor and below the bite section. But with n, the container dev, we're going to create a new comment. And we're going to Ray Y ofs. I asked knew that everyone below is the way our section, again, I'll say it twice just because it's super-important. We're adding this below the about section, but with n, the dev class container, as we want the way our section to be contained within that container, we're going to add a new section HTML element. And we're going to add the class by us. And we're going to add a closing tag for that section. And O of n, This section, we're going to add our first div class row. And we're going to close that dev. Now we've unless first row through 12 columns. We want a column for the text and heading. And we want to call them for the damage. And we want the column which contains the heading and a paragraph to be slightly larger than the image column. So let's add a dev class cURL for column. And that's megawatts of seven. That's got a closing div tag. And now let's add a column for damage. So I'm going to add another dev class column. And if you remember, each row and Bootstrap must add up to 12 columns of wed. So we've already used up seven. So our second column must be a width of five. I'm going to close the opening div tag, and I'm going to add a closing div tag. So what we've got here as our wire section, well then the way our section we have a row and within the row we have two columns. So within the first column, that's either heading and when to make this a stage 2 heading. And I'm going to re, we are the best dogs and close these h2 tag. After all, this is a Y has section off as dog beers business website such as megawatt, we are the best dog. Next going to add a paragraph and I'm just going to copy some of the Loren Ipsum we've used previously on the website, has a placeholder. Then I'm going to close the paragraph tag. So that's our first column sorted. Now I want to add an image to the second column. So below the second div opening tag with anaerobe and went out a new layer. And I'm going to add an image HTML element. So I'm going to image SRC for source equals and when the speech marks and want to add a path for image. If you look at the images folder within the package provided, you can see I have given you three images to use for the way our section. So you can use them if you're following along. If you're using your own images, feel free to do so. Again, it makes sense to put them into this images folder so you can easily follow along and use paths similar to the ones I'm using. So let's add the first way OS image into the way our section. It's when the Images folder and the image name is y dash, dash one JPEG. So images for the folder, forward slash way dash, dash one JPEG. And I'm going to add alt text of we are the best dogs as well. I'm going to close that image tag. Let's see if this go to our website and refresh, scroll and aim. You can see that our columns are there and our rule is there. But the first thing you'll notice is that the image is far too large, so it affects us. That's cool. Java code editor. Let's create a new comment in our style sheet. So far it's last asterix. Why OS asterix forward slash telling us know that any Rawls says below this comment are in relation to the way our section. And I want to write a rule set for the images of n The way our section. So I'm going to read dot or period way dashed us for the Y ofs class. And I'm going to write IMG, so affects all image elements within the YR, our section, curly brackets wed. But instead of using a pixel width less tame and when array a 100 percent. And see if going back to our web page and refresh, you can now see that the image size is much better. And FA, inspect this element, you can see it's using weds a 100 percent. What does this mean? Well, if we look at the column 5, which the images, and you can see that the image is not a stretch to wed ways to be a 100 percent of that column wide. So to demonstrate this further, if I click on the image HTML element, good of the way OS image, real set and the CSS PM, and change the width to 50 percent. You can see when you hover over column five dev that damages were then the damage isn't a 50 percent the width of its parent dev policy doesn't agree. So we'll change that back to a 100 percent. The next thing I want for this row as a colored bar grains and they wanted to match the color background we have in our intro section, handily, we've already written the CSS for an S bar grain. So we just need to add that class to our row to do yes, go to the code editor and we're going to add a second class 2 or row. So we've under speech marks, I'm just going to add a space after row, and I'm going to add a colored background. And what this means is this row is now gone to also use the colored by growing class. We create it for the intro section of the website, which means we don't need to write any more CSS for that colored background to take effect. We're going to see if the HTML fail. Good our web page and refresh. And you can see that our background is already taken effect and the YR section, if we collect inspect this element, you'll see that it's not only pulled the background across, but it's also brought the font color of white across as well. There's only two more things as section as mess in the first, as a padding, as you can see it, the minute the elements are far too close to the saids, be much nicer if we had some padding rain down. Now, you might think we should add the padding into the colored background real stamp. But we can do this. Let me show you why. So if I add a padding of 50 pixels into our colored background rule set. Desktops, GRI it. But remember the colored background is also used by the intro section. So if we scroll up, you can see that the Endrew section has too much of a party night. By removing it, you can see what it was before. So we actually only need to apply the padding to the YR section to do that. And we're going to go to our style sheet. We're going to scroll down and we're going to write the class selector dot y ofs. And then I'm going to add the class row. So what does this mean? This means we're firstly looking in the section for NA classes of row. This will affect all row classes within the White House class. And then I'm going to add padding for a Pexels. Can see. Now when I refresh the page, you can see that the y, our section has a really nice padding. The last thing that's missing here is that the heading is a little too small and I think it would look better if it was bold. So I'm going to click on the HTML element. And we want to add a rule set. And we're gonna make the font weight bold to begin with. And then I'm going to change the font size to 50 pixels. That looks much bear. And when a copy that role sam. And when I go to my style sheet, and I'm going to scroll up to where we have the font sizes section. I'm going to create a new lane and PSTN and see if gone back to the web page and refashion, you can see there's no, that's really good. So that's one of the three rows, no completer. To make this quick and easy, why I'm really gonna do is I'm going to select the entire row and its contents. So I'm going to select from the opening dev rel tag to the closing div ru tag and when to copy it. And I'm going to paste it two more times. That's going to give us our three rows. The first thing I'm gonna do is change the second, third image for a second third row. So if you look our images folder, we have a Y ofs t and a Y ofs three Boucher. I'm going to change the way AS1 to whales two on the second row. And the way OS1 to weigh us three on the third row. And I'm going to change the heading for the second row. Has this is the way our section, I'm going to add another way OS reason. Someone or eight, the only business run by dogs, as again, this is a dog BAS business. And for the third row, I'm just going to re dog. And as born, again, remember top tier, the old text for the images. So I'm just going to have it match the headings. In this case. The only business ran a dog's for the second image and dark and has borne for the third image. So let's see if this go to our web page and refresh. And now you can see we have our three rows and please note the third row and the first rule that grant by one a slight variation in the second row. I want the background to be a different color. I wanted it to be a lighter background so the fun can be darker. And I also want the image on the left side and the texts and the right side, but only for the second and metal row. So let's do that by going over to our code editor. And let's first swap the image and tags to rained, because we're using Bootstrap grid, this is really straightforward to do. All I'm gonna do is I'm going to select the column seven, were van or a second row. I'm going to copy it and then delete it. And then I'm going to paste it below the closing tag offer column favorable. So no, for the second row you can see that the first thing we have a van, It is our column fav an image. And the second thing we have Anna is our column seven heading and tags. Let's see if that code or a page refresh. And now you can see the image for the middle row, or the second row is on the left and the texts and the rate exactly how we want it. So now we just need to make the background layer and the text dark. I'm going to go into the code editor. And for the second rule, only, I'm going to change colored background, too late background. So now when I see of this, if you quickly take a look at the webpage by refresh that, you can see that it kind of achieves what we want. But the only reason it's doing this is because it's looking for a role set within our CSS file called late bar grained. It can't find that. So it's just default and towards normal on the page which has a white background and black text. I want some background, like a light gray background. So now let's add a rule set for our late by grain class. To do that, I'm going to go into my style sheet. I'm going to scroll down to the Y ofs section. I'm going to add a new CSS selector for our light background class. And within the curly brackets, I'm going to make the background a hex value of F1, F1, F1. Now you can make the background whatever color you want. You could even make it another image, whatever takes your fancy. But for me, I want a light gray background. And the hex code, which gives a light gray background if you're following along, because F1, F1, F1. And they're going to save this. Go back to our web page and hit Refresh. And you can see we have a nice light gray bar grained for the middle row, women in the way our section. And then our first row and third row, using the Cn bar grained as our intro to keep things nice and consistent the way our section as neither can create. The only thing remaining is to add a little bit of a margin from the top of the wire section to spear so between their boats action and the way our section. So to do that, I'm just gonna go to the way our section and DevTools. I'm going to create a new rule set. And I'm going to add margin top for a Paxos, MSX Greer. Let's just copy us. Nay, good. Our style sheet, PSTN and had sea of day. When we refresh the page, you can see the way our section is now complete. 18. Building The Website - Contact Us: One of the most important parts of the website, and some would argue the whole purpose of a website is to entice people to contact you. So for that reason, we must have a Contact Us section to your website. Let's take a look at coding there and NIH within our code editor and below the wire section. But again, with n, the closing tag of the div with the class container, we're going to add a new comment and we're going to make contact us. So we know that NF-1 below there's common is Contact Us section of the website. We're now going to add a section and we're going to just give it a class contact. We're going to close that section tag because well, I'm going to add a new lane with n, the Contact Us section. And for the first part of the Contact Us section a Assembly want a headings and contact us. And a small paragraph below that says Gan touch today. So let's add that. I'm going to add H1 for heading and winter aid, contact us. And when a close H1 tag and below that and just going to add a paragraph HTML tag and re, get in touch day. And I'm going to close that paragraph tag. Just know C of that. Refresh our webpage. And you can see that this has been added to our page. And in the next thing I want below, this is a row, and I want to mean columns to that row. On the left side, I just want contact details like email and address. And on the right side a of two more images which they want to add, a trend, the images folder, you can see them under contact, one, contact too. So that's add that into our HTML. So I'm going to add a new lane, blue the paragraph. And I'm going to add a div with the class of row because we're going to be using the bootstrap row and column system. And then within that row, I want two columns. And I want the column on the left to be slightly smaller in the column on the right, kind of what we've been doing with the wire section. So for the first column and then add a div with the class cURL for column dash. And I'm going to have the column width of five. I'm going to close that div tag. And then for the second column, and when our div with the class of column seven, because 5 and 7 equals 12. And the max column where we can use pair row and Bootstrap is 12. And when I finished the opening tag, and I'm going to add a closing div tag. So we now have our two columns for a Contact Us section. When the first column, I just want to add some basic contact details. So I'm going to add a paragraph tag and I'm going to write email. And for the email I'm just going to make one up. So top dog at the dog business.com. And I'm going to close that paragraph HTML element. And I want another layer. So I'm going to make another paragraph tag and we're going to write y naught, call rained and felt or water poor. Because as a dog business. And I'm going to close the paragraph tag and now you want to rate the address. So I'm going to start by writing a paragraph tag again. And I'm going to rate the first line of the address. But as you know, adresses go across mobile lanes, but these are not separate paragraphs. It's just simply a new lane within a paragraph. So how did we write a new lane? The ray a new lane by rating BR, BR for line break or bread. So I just threw a BR tag. You do not need to close it. And I'm going to read the second lane of the address. Now you want to take one final new lane. So I'm just going to be r again for Greg or lame break. And I'm going to write the final ln of our address. And then I'm going to close the paragraph HTML elements. And we're going to see this. Go to the web page and refresh just to see how this looks. So this is looking good. And they want to add to damages to the rate of this Contact Us section. To do that, I'm going to go back to the code editor. And because we want to add two images, I'm going to add another row with another column. So we've n-bit strap. You can add a rule within a column, which is exactly what I'm gonna do know, so that we can have two images side-by-side, prevent the rate section of the Contact Us page of our website. So we're then our column width of seven, which is to the rate of our contact details we've just added. And we're going to create a new lane. And I'm going to add a div class of row and add the closing div tag. Because we want a row. We'll then this column to the right. And networks that seem as our first row, we have 12 columns we can use within NASW row. So because I want the images to be of equal size, I'm going to add two columns of sex. So I'm going to create a div with a class column dash sacks and close it. And I'm going to create another div with the class column dash sex and a closing div tag. So we have two columns of sex within a row. Well then our column of seven. So that's layer is a little bit more advanced and stuff we've been doing so far, but this allows us to put two damages neatly within the right side of our Contact Us section. We just want to add an image to each one of these columns. So I'm going to write the image tag, SRC for source. And as always, we would put the path in between the speech marks. The path is the same as always. It's prevent our images folder. And we have a contact dash one J peg 2s, and a contact dash two J peg to use. As always, you can use any image you want, bed you're following along. You can use these to damages provided. So we are the images folder, forest slash, contact, dash one, JPEG. As always, remember to rate some old tags. So alt equals and then the speech marks and gone to a Contact Us Image 1. And I'm gonna close that image tag. And I'm suddenly just going to copy this image tag. And were then our second column, I'm going to paste it and change the one to two because the second image is called contact dash two. And I'm going to change the alt tags to the Contact Us Image 2. I'm not going to see a less good ROR page and refresh. So at the moment you can see it's trying to fit the images were then our column bar images are just far too large. So we're going to use a CSS truck was used before to make the images are a 100 percent web GIS. We're gonna go to our style sheet. We're going to go to the bottom. We're going to add a comment. Contact us. So we know that any real SAT we put beneath it relates to the contact portion of our website. We're going to read the contact class. And in images as the element selector. As always, what this means is our roles as it's going to apply to any damage within the contact class. And when I add curly brackets and I'm going to repeat words a 100 percent and see if me go back to our webpage, you can see that these images are really neatly contained within each column. So if you were confused a bit, the advanced room layout we've just used, let me try and show it to you visually, will vent out tells. If I go to the contact section of our website and open it up. You can see we have one row shown here. If I go into that rule, you can see our first set of columns. We have a column where for five to the left and a column width of seven to the rate, they will end that second column, awkward seven. We have a row, and within that row we have two new columns of equal width, column sex and column sex. So you can see how a desk row has columns with Anna. And this row is within a column, within a row with two columns. And so there's only really two tweaks I want to make here to the Contact Us section to make it look much nicer. And that first is to send her and margin the Contact Us and get in touch today text. So to do that, a first need to put them into a dev. So let's go to our HTML document and let's add a new layer above the H1 heading tag. Let's create a div with the class contact dash heading. And I'm going to put the closing div just below the closing paragraph tags. I'm going to save this. And I'm going to jump across to our style sheet and add a class selector, contact dash heading. But really it's exactly to the class I've just added for the dev, which I put there H1 heading and paragraph anti and curly brackets. And I'm going to add text align center. So centralize the text. And I'm going to add a margin to the top of 40 pixels. And we're going to see of s, good our web page and refresh. And you can see we now have as margin nicely and centralized. The last thing I wanna do is make the address part bold. This is really simple to do. Just go across to your HTML document. And just after the opening paragraph, tag for a dress. And when add another tag, B, which stands for bold, and just before the closing paragraph tag, and then add a closing body tag, which again stands for bold. Now when I see of this couture HTML document and refresh, you can see the address is bolded. This Contact Us section is now complete. 19. Building The Website - Footer: The last section we want to add to our website is a further. So let's load up our code editor. And below the Contact Us section. Again, add a column from the right third. And we're going to close the comment. And let's add a section where if the class center and want to add the closing section tag. And the first thing I want within the first year is a line across the screen. To do this, we just write HR. The HR HTML element will put a line across the screen. It stands for horizontal real, and it's what we use when we just want to put a line across the screen like we do in the figure. And they were somebody's going to add a paragraph with the year peers currently 2021. I'm going to put a dash and I'm going to put the name with the business, which in this example is the dog business. You can put it wherever you want in the figure. And we're going to close the paragraph tag and want to see if this go to the web page and refresh. And you can see we now have a finger on our website. Too small things I want to do here. Firstly, I want to centralize the footer tags. And secondly, I want a margin from the top of this line we've just added to the Contact Us section. So I'm going to jump over to the style sheet. I'm going to add a comment as we do. I'm going to write cr and I'm going to close the comment. And then I'm going to use the fettered class because the CSS selector, we just create it. And when I had curly brackets and when I add text align center to align the footer tags we've just added into the center. And then I'm going to add margin top 40 pixels to pad out the spacing between the top-left there and the Contact Us section. I'm not going to see if our style sheet. I'm going to go to our page. And you can see the tags is no centralized and we have a margin between the filter and the public Contact Us section. The last thing I want to do is simply make this 2021 bald. I'm going to do that the same way we call it the address part of the Contact Us section. So I'm gonna go to my HTML editor and just in front of 2021. And when I add the b tag and just after the 2021 section and then add the closing p tag. I'm not going to see if this comes back to our page and refresh. And you can see we now have a complete for on our website. 20. Building The Website - Fonts & Links: Or website is pretty much complete. We have our navigation in place. We have our Endrew, we have the abate section, we have the YR section. We have a Contact Us section, and we have a fair, this is all looking really good. One thing I want to do is to import a font from Google. Just so we have a nice custom fun on our webpage. To make that a little bit bare, we're going to use the same method we used when Creon or exercise website. And that was to import a Google fun. So let's go to fonts dot google.com. And I'm going to find a fun, a lake, a really like Leto as a fun. And good. Modern biles are professional. So I'm going to choose that. And as before, I'm going to click select as style on light, regular and bold. Then at the top rate of the fonts dot google.com page, I'm going to click view your selected families. And in the first box, I'm going to select the entire link reference and copy it over to our code editor and going to the head of our website just below where we've added the stylesheet dot CSS link reference. I'm going to create a new layer. I'm going to paste the link reference for the Google fun. I'm just going to nudge this line across. I'll just so it's below the one above just to keep things looking nice and neat. And I'm gonna see if my index.html, I'm gonna go back to the Google Fonts page, and I'm going to select the CSS rule and copy it. I'm then going to go back to my stylesheet dot css and create a new element selector under my font sizes comment. So I'm just going to create a new line below the H2 rule set. And because I want less fun to apply to the entire website and when to use the body element selector. I'm going to add curly brackets. And I'm going to pay us then my font-family reference. And I'm not going to see this. Go to my web page and refresh. You can see there's fun has now taken effect. But just to be sure, I'm going to go to Inspect Element and I'm just going to select the heading. And if I scroll down to the body reference, you can see the font family is Leto. Now looks really good and you don't have to use the later fun. You can use whatever font you wish for your own website. But if you're following along are used the later farm. The last thing we really want to do is if you take a look at our navigation and click on any of the words, they don't actually Deana fun at the minute. There is not a real navigation. So our website is a one-page website. So when we click these buttons, instead of them taken us to a different webpage, we want them to take us to a section of Desk web page. So for example, if I click the way our section, I wanted to scroll down for us and take us to the Why Us section. So how did we do that? If we go to our code editor, the first thing we need to do is add an AD or an identifier to the sections. So if we take a look at our navigation, we have a home section and a boat section. Uh, why our section? And a contact section. So we need to add an ID on our webpage for each one of these areas so that we can then link these buttons so that the web page moves to these areas when you click them. So the first idea I'm going to add is for home. And I'm going to add it to our Andrew section because we want the home button to take us to the top of the page. So I'm going to add an attribute N2, our section for the nth row. So I'm going to add it before the class of bent resection. And I'm just going to ray AD equals speech marks. And for the AD of their section or the identifier, I'm going or a home when I need to add an ID for our boat. So I'm going to scroll down to the byte section and as an attribute in the opening section tag for the nearby area. And we're going to add another AD. And I'm going to write a byte for us. I'm going to scroll down to the wires opening section tag. And again I'm going to add an ID, which again is AD equals and into speech marks and Ravenna speech marks and whenever a way Dash us, making sure that anytime there's a space in what you're reading, you're using a dash instead of the spears. And lastly, I'm going to scroll down to the contact area. And again in the opening section, HTML tag for the Contact Us section, I'm going to write AD eagles, speech mark, contact, speech mark. So we've now added unique identifiers are IDs for the Contact Us and homes action. So how did we make these buttons? No link to them areas so that when you click them, the webpage moves to that area, will be begin by reading a link the way we normally would using a H ref. So in front of the desk day and for home and when to write the a href tag. And after the closing HTML tag for home, I'm going to close the a href tag, the end, the exercise I taught you how to use a, a, a, a trap to link to an EKG, start a webpage, for example, google.com. But we actually want to link to the IDs we just created. So how did we do that? In-between the speech marks, right, hash, and then the ID you want the age ref to link to. So less is the home button. So we want it to link to the home AD. We just create it so we write home. Now what I'm gonna do to make things quick and easy is I'm just going to copy that opening HREF tag, and I'm going to paste it in front of the other three last items. And I'm then going to copy the closing, AH, href tag. And I'm going to pay us that after the remaining three, That's datums, uh, name is gonna go in and change the IDs for each one of the remaining three. So for the About Us section, the ID we created was a byte. So I'm going to make it hash. And in a boat for the way our section, the ID, we create it with us. So I'm going to re, re dash bus an M for the contact section or AD was contact. So I'm going to make the H ref hash contact. I'm not going to see if S go to our web page and refresh. So a few things have happened here. We've lost the styling. That's because we added an H ref before the last item. So we're going to need to fix that. But also the buttons in the navigation should now work. So if I click a boat, you can see the webpage moves down to their bisection. Now if I click why OS, you can see it moves down to the way our section and ethic that contact and moves down to the contact section. So the navigation they works, we just need to affects the styling. So if I pick an element from the page using DevTools and select one of the last items in our navigation. You can see what's happening. You can see the margins we create it are still being applied to the last items. But the reason why the spacing and there's no closed again is because the last item is Naim side, an H ref HTML element. So the margins need to be applied to the H ref and not the last item. So if we go into our code editor and go to the navigation rule set, we create it for the last items. We need to add a real SAT for the, AH, rafts and the navigation. So underneath where we created the navigation ALI rule set, I'm going to rate post-op navigation. And then I'm going to use the a element selector for the, AH, refs were then or navigation. And I'm going to add curly brackets. And then suddenly just going to copy that margin laughed that we had for the LA and put it into navigation a role, say it. And I'm going to remove that from the LA. Real sad. And see if now when we go back to our web page and refresh, our margins are back. But you can see that the lengths are no blue color, which they weren't before. This is because by default Bootstrap as Sainz, a blue color to your link. And because we've just added links to our navigation in the form of a traps. Bootstrap is automatically assigning a color blue. You can see that in DevTools of you select the last day and you can see that it's inheriting this blue color from the bootstrap.css. So we just need to add in a color CSS property and our style sheet to override that. So in the navigation, a rule set, we just create it. I'm going to add the property color and the value of sex zeros, which is the hex code for black. I'm going to see this stylesheet. Go back to our web page and refresh. And you can see our links and our navigation are no black again. 21. Mobile responsiveness: So our websites and they can play and a desktop either. It's amazing. But as a lot of people nowadays view websites on their mobile, it's important that websites or mobile responsive. What does mobile responsive mean? It means that the website looks good on any screen size, including mobiles. After all, what's the point of having a really nice looking website on desktop? F is not nice on a mobile. So how do we make sure that this website looks good on mobile as well? Within DevTools, on the top of the toolbar, you'll see this icon. It looks like a mobile and an iPad together. If you hover over it, it says Responsive Design Mode. Give that a crack. On Chrome. It's on the left side of the Dev Tools toolbar. Again, if you hover over it, you'll see toggle device toolbar, it looks like on mobile and an APR together give that o'clock and that's how you'll access the mobile responsive mode on Google Chrome. So there's two ways we can use as mobile responsive more than DevTools. The first way is we can go up to the top of the toolbar and click responsive and choose a device types. So we can choose iPad for example. And you can see that it will reduce the width of your website to what your website would look like on an iPad. The other way is we can go to the right of the webpage when no hover over it until you see a horizontal slider. And we can manually adjust the width of the website. So hydras our website look once we start getting dying to the smaller webs. So let's keep decreasing. And you can see by the time it gets to a mobile width, our website starts to fall apart, allow the intro section and navigation may look okay. But they are bisections broke. The Y ofs sections definitely broke. And the Contact Us section doesn't take much bear. So how are we going to fax us? How are we going to make our website look good on mobile? Luckily, Bootstrap comes a bell and features to make your website easily mobile responsive. And is literally only going to take us a few seconds to implement. But first, you need to understand high than mobile responsive features within Bootstrap work with r rows and columns. When it comes to the columns, we create it within our HTML file. We use the prefix dot cURL for column, dash, and then the number of calm webs we want it. So if we want a column went for one, we used one. If we want a calm when five, we used fav, etc. But there's actually an additional prefects we can include within our column classes, which allow us to make our website easily mobile responsive. These are Sam for small, md for medium, LG for large, and exile for extra large. And we add these between the CoA L dash and the column width. So for example, you would write CoA L dash S, N for small dash one for column width of one. So what do these assays, MMD, LG, and eggs AL, prefixes mean, and what do they do? Each one of these references are weds off your website, at which point, no matter what redshift defined for your column, it will automatically become. 12 or full-width. So if you take a look at your website within DevTools, as you change the width of your website, you will notice at the top in the first box, you can see the pixel width of your website. So for example, here I can see as 902 pixels of words. Here I can see it's 1112 pixels of web and have a mega really small. Here you can see it's 432 pixels of wet. This is the width of your website. So if you're viewing it on a mobile, it will probably be somewhere around 590 to 600 pixels of web. And if you're for you Ana on a desktop, it could be up to 1400 pixels of wet. So for example, if we take the extra large prefects, which we can add two columns, any window size below 1200 pixels, and the column will automatically become 12. Large, any window size under 982 pixels. And the column when it will become 12 medium, any browser web under 768 pixels and the columns will automatically become full web. And small end of an under 576 pixels and column, no matter what you've defined as, it will become full wedge or a column of 12. So if that's a little confusing right now, l make much more sense once we put into practice, which were NIO byte today. So let's take a look on our website and find out at what point we need the columns to go full web for it to look nice on mobile. So if we take a look at their bites action and slowly start to reduce the width of our website. You can see at 1100 pixels, but it still looks good. And if we keep going, you can see a 130 pixels of wet. It still looks good. But then around the 750 pixel mark, it starts to really crushed and not as nice. So if we take a look at our grid system that Bootstrap offers us, we want to look for a size prefects that makes our columns automatically go to a full-width or column width of 12, around 750 pixel mark. And we can see that medium is the one that's probably going to work best for us because it will automatically make the columns go for wed at any size under 760 at Pexels. So that's one we're going to use. So how do we implement this was really just a case of changing them column classes to include that size prefects as part of the name. So if we take a look at the R by R section, you can see at the minute we have column dash 4, we don't have a say's prefix included when this class. So to add it, all we would do is take this column dash four. And after the first dash at md for medium, and then another dash so that it now looks like column, dash, AMD, dash 4, and fester work. We need to change all three. Awesome. So for the second column and thereby our section and the class after the first dash, I'm going to add md for medium and another dash. And the CME for a dessert after the first dash and the class name. So CRL dash, AMD, dash four. I know that c of that. Now if we go back to our web page and refresh, you can see because we're at 750 pixels there by our section columns have automatically when full-width. So if we start to gradually increase the width for the page, you can see are over 768 pixels. The columns are defined as a web of four. So we are three columns of wet for four. And if an honor 768 pixels, they automatically become full width. And we can see that if we inspect them, you can see that the column is full-width citizen. We're going to make our website easily and quickly, mobile, responsive. But we don't want to have to go through your other classes where we added columns and dyad MD in between them all is that attack allow their time. So we're going to do what's called a find and replace. So for this to work, what we wanna do is on the class changes we just made it and thereby OS section, don't worry, we're going to reapply them. But for the math that I'm going to use, which is basically a find and replace. We need to revert the bio section back to before we added the medium prefix anti it. So for all three classes, I'm just going to remove the AMD and dash so that all three classes and I read column dash four and I'm gonna see if, so I'm not gonna do a find and replace. What I'm gonna do is I'm going to find and replace column dash. And I'm going to change it to column dash, d dash, which will add the medium prefix to all the column classes we have added within our index.html. So how do we do that? Well then our code editor, you're gonna go to your toolbar and good of feigned an and find him buffer. Or you can simply press Control and F. This will load up our Find and Replace toolbar at the bottom of our code editor. So the first thing we want to add is what we want to find. So we wanted to find cURL and dash. We want to replay assess and we want to replace it with CLL dash, AMD dash. So again, to make this crystal clear, we're going to find and replace all COO L dash classes were van or index.html. And we're going to replace it with SEO L dash, dash. So I find then click Replace All. You can see look into our document if I just close as toolbar at the bottom is we no longer need it. We have added the medium prefix to all our column classes, so it's added it to their bikes action as we did before. Also, if we scroll down, you can see it's added it to the Why Us section for both the column width of 75. It's added it to the Contact Us section again for their dress area and for the images and also for the damages were then the Contact Us section. So I'm not going to see if this go back to our web page and refresh. And if we were just our window size down to a mobile size, and take a look at our website. As we scroll through, you can say that they are by our section has went full width, which is excrete. The wire section has went forward, which also looks great. And the Contact Us section has went full red, which also looks great. So now we have a website that not only looks beautiful on desktop, but also on mobile. And as you can see, not only does it look great on mobile and desktop, but it will also look good on devices such as iPads. Because as I increase the wedge off our website, you can see that the columns well adapt to the width. So this is what allows our website to be responsive on any screen size and that Gloria on any device, thanks to Bootstrap and the column system, we have now turned our website which only look good on desktop. And two are fully mobile responsive website. And a matter of minutes. 22. How to make the website your own: So our website is now vanished and it looks fantastic. Something I wanted to run through really quickly is how you can make the website you're on with a few simple tweaks. I you can end up with a completely different booking website night for this part of the course, I'm not going to go as in-depth, but the changes, I'm Meghan, I'm just going to make the changes really quickly and allow you to come along with me. So you can see just how quickly and easily you can take what we've just created and make it something of your own, make at something completely unique and diaphragm. So the first thing I wanna do is find a new background damage. We touched on this briefly during the creation of the website. And it's going to be the same process. I'm going to go to Unsplash when a search bar grains. And I'm going to find an image, a lake. This orange is really contrast in really nice. So I'm going to download that. I'm going to go to my images folder. I'm going to add the image I've just downloaded to the images folder. And I'm just going to call it new background. I'm going to go back to the website folder and I'm going to copy and paste or duplicate the index.html. And I'm just going to call it index dash T2. I'm then going to open our code editor. And I'm going to drag this and dash, dash two and to the left pin of our core data. So the first thing I'm gonna do is I'm going to link up this new background image. So I've called it New dash background. So I'm going to go to where we've added our background and our style sheet. And I'm gonna change this to new background. And this image is also a J peg and C of S. And then I'm going to go back to our website folder. I'm going to double-click and our index dash to load up the website and our browser. So you can see we've got Australian new background image. The next thing I wanna do is move the heading and paragraph tags above this image. So I'm just going to go to our index.html and I'm going to call b the H1 heading and paragraph. I'm going to remove it when appears to evolve our image and see if it. The next thing I'm gonna do, instead of having three columns here, I want forest by over two rows. So I'm simply going to remove one of the columns. And we're gonna make the columns of Sex. I'm going to copy these two columns and I'm going to paste them, blow the two columns are already there and just the damages are different. I'm going to use their bite three MHz and thereby one image. I'm going to see if that and refresh. And you know, see we have four columns shown here. For the way our section, I'm going to remove the third row. So I'm going to go down to the third row and remove it from the layer section. And I'm also going to Spears two columns out slightly differently. So I'm going to make the text smaller. So I'm going to make the column one for the text for an image larger. And when to make the image column E. And I'm going to replicate that Diablo. So for the second row, I'm going to make them each colony and the text column four. And I'm gonna save this and refresh our page. And you can see there's no legs much definitely got much larger images and much smaller text to make the text Valley there's area and that will bear. I'm just going to make these paragraphs slightly bigger. So I'm going to turn on software app, and I'm going to simply copy and paste the paragraph we already had below the paragraph that was already in place. And I'm going to do the same for the second row. I'm going to pierce the paragraph I just copied. Blow the paragraph that was already there. See you and VR webpage. You can see the tags and they fell Zai this area much bare. For the Contact Us section, I'm going to make these two images larger as well. So I'm going to go to the columns for the Contact Us section. And the column that the TMJ is set with n, I'm going to make 12. And then I'm going to make the column which has the email and address details 12 as well. So every take a look at the webpage. You can see we now have much larger images by 12 cent relays the Contact Us text. So if I go to our style sheet, angle down to the Contact Us comment, you can see we don't have a real say or NPS for contact. So I'm just going to quickly create one. So I'm going to create a selector for a contact curly brackets. And I'm going to put text align center and see if I go back to our page and refresh, you can see the contact details oh, no, centralized. And I think to, instead of having rain damages, I'm going to make the images more rectangular, but with a border radius. So if I fire up DevTools and select one of the images, you can see the border-radius 50 percent, which we present during the building of a website fears. I'm gonna make this 10% to see how that looks. And I think that looks quite nice. So now what I'm gonna do is I'm gonna go to the style sheet. Rare provided border-radius is for damages and when to change it from 50 percent to 10 percent. So you can see we have a border radius for the centered bogs image, I'm going to make our 10 percent. And for the diameters, I'm going to make our 10 percent as well and see if I'm not going to refresh this page. And you can see our images are no longer reigned. Native got border radiuses. And so NMR of minutes, I've created a page which looks completely different to the webpage, would create it during the course. And using simple and quick tweaks to the HTML and CSS and backgrounds. You can make the website we create it in the course, completely unique to yourself. Like I said, what they've just went through was not meant to be extremely adapt to the changes they made. It was simply to show you that you can quickly make this website you're on. 23. Get your website hosted online: So now we're done recording our website and we want to show off because it looks great rate. But unless we latch, they sent people down in front of our computer, we're not going to be able to show this website to family or friends or even other businesses. This is because it's not hosted online. So how can we get our website hosted on lane so that we can let other people see it unless we require hosting. Now unfortunately, hosting is going to cost. It's not free. It's a service which usually they cause a small monthly fee. However, I've set up a fantastic offer for students are fest course. And clicking the link in the description of this video, I have partnered with say grained to offer desk kind of hosting to allow you to get online cheaply and affordably. So I recommend say grained. Again, use the link in the description of as video to get a desk kind of price on hosting. So when we're on, say grained, we're going to click Get Started up on web hosting. And luckily for us, we can use the cheapest and most affordable star up hosting package. And it's important to say at this point, you can use whatever hosts you want. You don't need to say grained, even though they have offered a desk kinda online Christians of his course, every hosting has their own web packages. And if you find a bearer 1, feel free to use it. Also loosely speaking, a Lewis processes specific for say, grained Because I recommend them all hosting companies work listening to see him. So you'll be able to follow along with this course with any hosting provider, you go away because all the stamps I'm going to show you or be the same no matter at what host you use. So I'm going to click that plan and I'm going to fill out this form for the startup plan. So just being three and filtering all the details. And I've just placed the order for the startup plan with say, grained. I'm now going to click SAP, say. So if you buy a domain name along with your hosting, feel free to click new domain where you can choose a domain name such as brand and coats.com, for example. Or if you just want a freedom and you can choose temporary demand and click Continue, we now get the option to start new website or migrate website. But we actually want to click the button down below that says SCAP and create empty website because we've already create a ours, we just want to get online. So click SCAP and create empty site. Then we're going to collect vanish. It will say creating your site. This may take a minute or two. After a few minutes you'll see this message that says your L Sam. And now if we go to Manage Site, you will see this. Now again, if you're following along with a different host, some of the buttons and menus may have different wording, but the process will be loosely the CME, as I've mentioned, all hosting companies use the same processes I am showing. But for say, grain to weaker tagging to this page. The next thing you're gonna want to look for it as fail manager. Here It's pend, so you can just click File Manager. And this has taken us to the folder system off our website. Night, this is not a hosting and Server course, so I'm not gonna get into too many details about high or less works. But basically a website is no different from the folder we have within or package that we've been working on for a website. So when you load up a website online, you're basically accessing a folder like we have created with an R package folder on our computer. So when we're looking at file manager here, we're basically looking at a folder structure within the server with just purchased. And you're going to see this folder, public underscore HTML. This is our website folder. So NF-1 we play us with endless folder, well be displayed as our website. So we're gonna click into this folder. And you can see that there's already a default dot HTML file in there. So by default, most hosting companies will automatically stack a simple HTML file within the folder. So when you see that you know that you're in the correct folder, again, it's public underscore HTML. As we have our own website already created, we don't need this, so we're going to delete it. So I'm going to click on this and then I'm going to go into the band and click Delete. It'll ask us if we want to proceed and we do so I'm going to click Confirm. So now let's add our own website. Enter this folder. The first thing I'm gonna do is click File Upload. And I'm going to go to the website folder we've been working on in this course. And I'm going to select the index.html and I'm going to upload it. You can see that we've uploaded this index.html file onto our hosting, onto our website server, but we're not done yet. Looking at our website folder, we also need to import our style images and Bootstrap folder. So did ask I'm going to click Folder upload. So not file upload, folder upload. And I'm first going to applaud our Bootstrap folder and we'll ask if they want to upload all the files from Bootstrap what to do. So I'm going to click Upload. And you can see the bootstrap folder is an eye on our server as well. I'm going to click Folder upload again. And this time I'm going to upload our images. Again. We want to upload all the files within that folder. So I'm going to click Upload. This may take slightly longer than the bootstrap folder because this folder contains all our images, It's slightly larger folder. You can see these are now uploaded successfully. And lastly, we want to upload our style folder. So I'm going to select the style folder and I'm going to upload. And I'm going to confirm that I want to upload dest folder. You can see this is night uploaded successfully. So you can see our hosting server name matches our folder we've been working on for this course that I just put them side-by-side. You can see we have our Bootstrap folder, we have our images folder, whatever style folder, and we ever index.html. Our website is now hosted online. If you go to your domain, the IBM Watson say grains, you can see at the top of this page. But the domain you entered when purchasing your hosting will be your website URL or domain name, or domain name and URL are the same. So I'm gonna go to my URL and hit Enter. And you can see our website is hosted online. It really as simple as that. You can know sand, your family, friends, our business clients, to the hosting address or URL you've just purchased. And you will be able to see the website you've created on this course online and fall. So now you have created a website, and your website is live on the World Wide Web for everyone to say. As mentioned, I didn't go into too many specifics of what hosting acts as a server as or what a domain is because this is not a hosting course by assuring you hi, straightforward and assembler as to get your website hosted on lane quickly. 24. Final words: You have reached the end office course. During this course, you have learned what website fundamentals are, the basics of HTML, CSS be ESX, selectors in classes, topography, what Bootstrap is. And then we have put all that together and Bella are very own website. I've shown you how you can make our website urine. And finally, I've shown you how you can host our website to share with family, friends, and businesses. I hope you've enjoyed this course and you've learned that coating can be fun and easy. And you're equipped with the skills and knowledge to be able to create your own professional websites. I want to thank you for taking part in this course, and I would love to see the websites you have created. So please do send them in so I can see them. If you have any questions, you can reach out to me on Twitter at brain encodes. Thank you so much for taking part in this course. I hope you've enjoyed it as much as I have creating it, and I wish you all the best and happy coding in the future.