How To Create a Website With HTML and CSS | Robin Haney | Skillshare

How To Create a Website With HTML and CSS

Robin Haney, Web Developer and Online Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
35 Lessons (2h 12m)
    • 1. Introduction To Our Project

      1:24
    • 2. Create Your Very First Webpage

      2:07
    • 3. Working With Coding Editors

      1:39
    • 4. What is HTML?

      1:25
    • 5. Creating a Wireframe For Our Project

      1:53
    • 6. Creating The Structure of a Webpage

      3:33
    • 7. HTML Content Containers

      2:58
    • 8. Creating Our Websites Navigation

      4:35
    • 9. Building Our Portfolio Page

      2:36
    • 10. Adding Images To Our Portfolio Page

      2:29
    • 11. Building Out Our Footer

      4:42
    • 12. Introductory To CSS

      6:36
    • 13. External and Internal CSS

      4:28
    • 14. What Are ID Selectors

      2:52
    • 15. Centering Our Websites Wrapper

      4:36
    • 16. Lets Take a Mobile Friendly Approach

      2:54
    • 17. Styling Our Website With Some Color

      3:52
    • 18. What are CSS Classes

      3:38
    • 19. How To Add Comments To Your CSS

      1:59
    • 20. Adding Fonts On Our Website and Adjusting Text Size

      8:22
    • 21. Styling Our Portfolio Page

      4:52
    • 22. Creating a Horizontal Navigation

      1:39
    • 23. Fixing Up Our Footer and Navigation

      4:52
    • 24. Create an About Page

      5:22
    • 25. Styling Our About Page

      3:44
    • 26. Create a Contact Page

      6:17
    • 27. Creating a Blog Page

      9:02
    • 28. Creating Our Portfolio Page

      2:07
    • 29. Adding a Grid To Our Portfolio Page

      4:31
    • 30. Final Adjustments To Our About Page

      5:01
    • 31. Final Adjustments To Our Header and Footer

      2:38
    • 32. Finishing Up Our Portfolio Page

      1:03
    • 33. Finding a Domain Name

      3:04
    • 34. Finding a Web-host For Your Domain Name

      1:31
    • 35. Connecting Your Domain Name To Your Hosting Account

      7:14

About This Class

If you have always wanted to learn how to code and build websites online then this course is exactly what you need. You will learn how to create your very first website with only HTML and CSS from complete scratch. You will then upload your website online and will be able to showcase your work to everyone in the world.

This course is perfect for beginners and anyone who knows absolutely nothing about HTML and CSS or web developing in general. This course is also a great review and refresher for those who need a little bit of helping just piecing everything together to design a website from start to finish.

In this course we will pretend that a client hired you to build an online portfolio for her hair styling business. You as a web developer have been hired and you have a job to do. You have to build a website that is mobile responsive and looks great. Don't worry, I know you will do a good job.

Let's get started.

Transcripts

1. Introduction To Our Project: Hi, my name is Rob. This course is perfect. If you've never written a single line of code before or if you need a refresher on how to build a website you were, start things off by learning basic HTML in creating the structure of a Web page. In this course, we're going to pretend that we have building a website for a client. Once you have HTML down pat, we'll move on to the basics of CSS as well as intermediate level CSS styling for a website . This will be the finished product of our website. This is our lining page for a website movie Billy and a belt page for a client. A blawg page contact page in a portfolio that functions as a grid that shows our clients work. Our website will also be mobile, responsive and adjust depending on what device our website is being viewed on. We can see her all pages on the website or mobile, responsive and look great and mobile and tablet devices. We will be building all of this from scratch. She will be learning a lot in this course. This is great for anybody needs that extra little help to just put everything all together to get a website online. If you've ever wanted to learn what development in this course is perfect for you, please internal today and I look forward to seeing you inside the course. 2. Create Your Very First Webpage : Hello. Welcome back to the course. I hope you're excited as I am to get started designing a website with me. Now, before we can start building our website, let's get you started with some basic HTML. In this lesson, you're going to create your very first webpage. Let's forget the very first thing that you're going to need to do is create a folder on your desktop so you can keep all the files we will be using throughout this course and one organized location on your computer. Next up, let's open a new no pad file, and you can give it whatever name you prefer. After we open up our document, we're going to write our first line of HTML code. I'm going to create what is called a headline element. As a type of the code, you will see that first I am creating what's called it opening take and then we use the Ford Slash to declare the closing. Take anything we type in. Between the opening and closing take will be a Level one headline, which is basically really big text on a Web page. I'm going to type ascendance here to start off now Let's save the file and give it the file name. HTML. This is telling our computer to open this file as an HTML page. So we're going to Kara File Index. But make sure that used the dot html extension. Like I mentioned earlier. This is telling our computer toe open this file as an HTML page. After we savor what page we can see, a new copy of it is created here. Let's open it up and see what it looks like. Cool. We can see the text we wrote before as an H one element on our Web pitch. Congrats. You just created your very first webpage. I know it's not much, but we all gotta start somewhere, right. Try this out and see if you can create a Web page on your computer all by yourself. When you're ready to move on, meet me back here and we can get started with the next lesson. 3. Working With Coding Editors: you probably noticed already that coding in no pad can be a little bit sore on the eyes. Luckily for us, they're coding editing programs that can allow us to program or websites a lot easier. The example that I'm going to be using his code No pad plus plus this coating editor it's free. You can download it from their website as I'm about to show you here. Once you have no pad plus plus installed in your computer, we can begin to edit our Web pages by right clicking them in selecting edit with no pad plus Plus, Doesn't that look a little bit easier to read? Let's write a few more headline elements just to add a little bit more code to our webpage . Let's add H two element and in H three element as well is you might have already guessed in . H two is smaller than in H one, and H three is smaller than in H two. As you're writing out your elements, be sure to add a opening take and a closing take as well. Let's go ahead and savor webpage and see how this looks visually in our Web browser as we can see or each one is the largest. Inner H three has a smokes text on the page. There are paid options for quoting editors that you can look at later, but for now, coding with no pet plus plus will work just fine for us. 4. What is HTML?: before we go any further in the course, let's take a few minutes to talk more about what HTML is. HTML is an initial ism that basically stands for hypertext markup language. Don't worry too much about what this means, however. Hypertext is referring to any tax that can be displayed on a screen, and a hyper link is a link that basically links to documents or Web pages together. Each team Ellis primary used to create the structure of a webpage building a website structure is a lot like writing out a newspaper. You have your titles, paragraphs, photos and headlines. We use HTML to create the basic structure and at all of these moments to our what pages. CSS is another language that will be learning later on That will allow you to change the visual presentation of your website. This can be a little bit tricky to graft in the beginning, but after you start working with CSS more, you will understand HD mail a lot better. Last but not least, it's worth mentioning that HTML has evolved to design and build the websites that we have today. And HD Mo has been around for a very long time I've went ahead in length, toe a few documents about the history of hte email and the teacher's notes section of this course that you can check out if you're interested in learning more about HTML. All right, let's move on. 5. Creating a Wireframe For Our Project: now, before we can go any further with designing and building on our website, we actually have to build a wire fame for a project. Now I have the final version of a website here, so you don't have to plan nothing. Everything is kind of already done for us in our keys. But usually you would have to plan on the content on your website. So this is basically the home page I have and I created this website ahead of time just so he knew exactly what we were building. So these are the different individual pages on a website. We have our about page. We have a blocked page. We're have our block post title and a sidebar here with the author picture, some site pages, we have a contact page will just be a basic picture with some information about our clients in the email us link and we have our portfolio which would be a grid format like this. And we have our footer at the bottom and of course, our header. Now this one plate is not super complicated, but is definitely going to be something that's going to be challenging for you if this is your first website or if you are new to hte email or even CSS. One thing I'm also going to point out is when creating a wire frame or creating the structure of your website. It's also good to create mobile, responsive versions of your website as well. And if I strength my window here, you can actually see that a website changes. And this is because a browser window is changing, just like it would on a mobile device we can see here. This is the mobile version of our website, and it looks a lot different than when a window browser is stretched out, which is the desktop version concealer. Different pages are all formatted differently, so when creating your wire frame, you want to do a mobile version first, and then you can expand that more bio version onto the desktop version like it is right here right now. So in our keys, all the hard work is already done for us. We know exactly what we have to build, so now that we know what to do, let's get to work building our portfolio for our client 6. Creating The Structure of a Webpage: now that we have a visual idea of what we want a website to look like. Let's go ahead and get started with building the structure and HTML before we get started. It's worth mentioning that right now hte email is changing a lot. New elements have been added over the last few years, and currently each team 05 has brought a lot to the table. As we build out our Web page, we would use the latest elements support. It's that your website is modern and up to date now, since that's over the way, let's get back to coding on our website. So the very first thing that you must add to your website is a document type or doc type. For short. We tape it out as follows. This doc type must be inserted at the top of your Web page before anything else. All this really does is basically tell the browser that this page is an HTML document. Next up, let's create another HTML element called Well, html. This take is going to contain all of our hte email that we have on our page, so we need to take our existing H one element and wrap it inside the HTML element. Notice how there is a little bit of an intent for each one element. This is called Nestea, and it's used to help us tell what elements are nested within each other. You will start to see how useful this is once we start to add more code toe our webpage. Next up, I'm going to add what's called a head element to our webpage. Our head take will contain elements that add structure to our webpage but are generally not visible on the Web page itself. This is also called Mehta Information. After ahead take, I'm gonna add a body take a swell the body take will contain the vast majority over websites content. I'm also going to grab our each one once again in nested inside our body element as well as our HTML element. All right, now let's create a title for a website. Our title is made information, so it goes inside the head element. We can use the title element to declare the name of our website. I'm going to go ahead and type just a random name here just for now. Our websites title were appear at the top of your browser or tab that you have open. The last thing we're going to do in this lesson is add the character set for our webpage. We also insert this insight. Our head pig Here is the code that we're going to need. You don't need to really memorize this quarter. Anything. But what this code does is help for Web browser process informant R h seem a webpage. No, let's save our webpage and see how it looks. You can also hit control C on windows to see the document quickly. As we can see, our websites title is showing at the top, and that's pretty much all the visible changes that we have made so far. In the next lesson, we will be any more structure to our webpage with content containers. 7. HTML Content Containers: I'm going to start off by going inside our body take and adding a header element. The header is the top part of our website, so I'm also going to put our each one we created their earlier as well. Underneath are header take. I'm going to add a section take and a foot or take as well after that. So let's go over these three new takes I just added to or what page? The header tag is different than our head Take. A lot of people get Thies to taste. Confuse our sights Title and navigation is generally kept here. Inside the header take as well. The section take can be used to break up the page into different sections in our sections. Take I'm going to add a new element called a paragraph element. This paragraph moment will take any text you type in sight of it and turn it into a paragraph. I'm just going to put some random checks here which we can later changed to a portfolio and block posts later on. But I just want to give you an example of how the paragraph element works with HTML. The footer element is similar to the header element, except that it is at the bottom of her webpage. We will put our copyright information as well as other links to our social media platforms in the footer for our client. Let's add a paragraph in the footer take as well that we contain our websites. Copyright information. You might notice that some characters that you want to display on a website cannot be typed on your keyboard. We can use HTML entities to represent those characters. For instance, the copyright symbol can be displayed on a website by typing out the following HTML entity . Memorizing HTM Oh entities is not recommended as he went up using them very often. Whenever you need to figure out one of the HTML entities, you could always search on Google to find a reference. I also went ahead and linked to one reference sheet as well. In the external file section of this course, if you ever need to refer to it now, we added a lot of new code in HTML elements to our website. Let's give her pages save and see how it looks in the browser. So far, notice that as we look at our webpage. The elements are displayed one after each other. This is how browsers display HTML elements. Now what Page looks a little empty, But don't worry. You are off to a good start. We will be using CSS later on in the course to add a lot more style and color to our Web pages. 8. Creating Our Websites Navigation: in the last section of the course. We created the basic structure of our website with HTML. Now it's time to start adding content to our website. Let's start off design the navigation for our website A websites navigation. We usually consist of a title or logo that links to the homepage and links to the other important Web pages on the site as well. So let's start off by making our site title link back to the home page of our website. I'm going to be adding a new element here called an anchor element. I'm going to then wrap my each one in sight are newly created anchor element in at an attribute here with the text index dot html. What we're doing here is anchoring our your L a K index html to the text of her H one element index dot html is generally a homepage of a website and also the name of this file . When we create the other pages for a website, we will insert their names as an attributes as well. For now, just stay with me and you will see how it works more clearly as we develop our website, the navigation for a website is commonly created with a list. The first thing we are going to do is at a new moment for our navigation inside our header . What I'm going to do now is at our links as an a nordeste. This will add our links in a bulleted form, sort of like in Microsoft Word. The you'll take here stands for a non ordered list. We're then going to add our other pages as list items. Insider in order list. The L I take stands for list item. First, let's start off with our about page and then make a list time for all the other pages we will be creating later on for our website. I'm gonna start off putting an anchor element with their H ref and it's looking to our about dot html page, which we don't have created yet. We also need to add text to display as your list item. So I'm gonna type in about here. Once this is complete, we're going to have to copy this piece of code here, and we will just paste it for other pages and then make some small changes to reflect those pages. So it's Copy this and paste it a couple times in here. So let's change this to our block page. We're also gonna change this to our contact page, and we need to add one more here, and that's gonna be for portfolio page after you change the text that's being displayed for each list item, we have to change the HTML pages. Now, we haven't create these pages yet, but I'm just gonna go ahead and add them here because this is what we'll be naming these pages later on as we create them now, before we go any further, let's give her what peach a quick safe and see how everything looks in the Web browser. All right, cool. Our site title now links back to our index dot html home page. We have our list yet with the name of each of our website pages. Of course, if we click on them, they're not working right now because we haven't added or pages. But once we do enter what pages to our website, everything will work correctly. Before we go. However, I noticed that my home page link is not working, and this is because we're linking to induct indexed on each team Ail here. But unfortunately, up at the top here, we actually have our index dot html dot aged email. So we have our name incorrect here. So I'm gonna go ahead and fix that, and then our links should be working correctly. All right, so a five past should be correct. Now, now it's opening up, and, yes, we can see it's now actually just going back to the same page, so it doesn't look like anything is happening, but we're actually just going back to the page or currently viewing. So again, um, our title is linking correctly, and we got that all figured out. Good job. We did some solid work with our website navigation, and we are ready to move on and start working on our portfolio page. 9. Building Our Portfolio Page: We finished building our navigation for now, but it's time to build out the content for our portfolio page. We will structure our image gallery similar to our navigation with an A Nordeste. We are going to create our portfolio in the section element of our page for are blocked page in about Paige and Contact Page. We will use this section element for something else. So let's go ahead and delete the paragraph we created earlier in place it with an UN order list with a single list item. For now, before we go any further, it's important that you down the files for this course lecture. There you will find the image files for our portfolio page. If you do not place the image folder in the same folder as your each day HTML document that are pictures were not display correctly, I've went ahead and found some sample. I mean, just online that we can use as if they were images our client gave to us. So let's add our first image to our webpage. I'm going to open up our first list item here and write an image Take. I'm then going to add a source attribute to this take, and inside that attributes, I am going to put the path to our first image we want to display on the page notice. I include the Image folder and the name and extension of the image file We are grabbing this all needs to be correct. Otherwise, our image or not load correctly. I'm also going to go ahead and add an all take at the end of her image that stands for alternate text. If, for whatever reason, the image does not display, then the whole text will be displayed in its spot. I'm actually going to leave the old text blank just for now. This might not make a lot of sense right now, but as you work with images, you will get better at adding them to your Web pages and working with the syntax. Now, before we finish up, let's save a file and see what it looks like. Let's see if her image is being displayed correctly on a webpage. There we go are images on our webpage. It's now time to go back in ad or other images to our portfolio, and then later on we can actually fix these images because right now this is way too large to fit on our webpage 10. Adding Images To Our Portfolio Page: in this video, we're going to finish adding the rest of our images to our portfolio as well as changed some of the information on our website because we will be changing the size of her images later on to be a lot smaller to fit on the screen. We want our visitors to be able to click the image and see the full size if they choose to . We can do this by hiding an anchor, omit to our image and linking directly to that image. So if the user clicks anywhere on the image from the webpage, they can see the full size of the image if they choose to. So we'll start off by hiding our anchor omen here. And I'm gonna copy the file path to our image and use that as the link. So again, when the person clicks on it, it will just go directly to the image. And I'm gonna close up the acres moment right after our list item here. So this is the standard code we're gonna have for each image here. So now that our image is complete and all we need to do is copy our list item here and repeat it for all the other images we're going to add to our about page. So let's go ahead in pace that in here. Remember to change the file paths, according accordingly, to what image you want to display. Otherwise you were displayed the wrong image. I mean, this really easy here and hide number the images image. One image to which three. Image four and image five. So it's a lot easier to do. Remember to change both file paths for the source when people click on it, as well as what images being displayed. Once we're done with us, we can save our page and check to see if our images are being displayed correctly. So let's go ahead and do that right now. I'm also going to double check our file paths just to make sure I got them correctly. It looks like this should be good to go. So, yeah, we can see that our images are being displayed here correctly. Also, if we click on any image notice that were taken directly to that image and a newly opened window, great job. Next time we will learn how to build the footer of our website 11. Building Out Our Footer: All right, so we added our Web sites. Navigation got our portfolio rolling. Now it's time to work on the footer with our footer. We're going to add a few links to our social platforms online. Assuming our client has them here, we are going to be adding a Twitter, Facebook and Google. Plus, we will also be adding a few other things to our footer as we go. But for now, let's get started with this. Be sure to tell him the files for this lecture so that you can use thes social media icons I have provided. Feel free to use your own if you like, just for a bit of practice as well. Let's begin by schooling down to her footer and typing the image element to add our first icon. Our source file for this image will be the name of the Twitter icon file. Don't forget the extension as well. In our case, these sets of icons are PNG files for the alternative text. I also go into type Twitter as well. Once that's complete, I'm gonna save some time by copying this whole line of code and then pasting it to other times for our other two social media icons. This is a pretty easy fix and all we need to do is change the file path as well as the alternative text to reflect whatever icon we are showing. So I went to go ahead here and we'll start with the 2nd 1 Delete the Twitter part here and we'll add Facebook. And then we'll also switch the alternative text to reflect Facebook. And our last one will be Google Plus and I believe I typed Google plus like this. All right, so our images air set to display and the last thing we need to do is linker icons to their corresponding websites because their client doesn't actually exist. I'm just going to link to the website's homepage instead. So let's create our anchor element before our image and close it after our image are a true value, is going to be linking to the websites homemade home page that we're linking to. So the Twitter icon is going to link to the twitter dot com home page, and the Facebook icon is gonna link to the Facebook home page. And of course, the Google plus icon is going to link to the Google Plus home page. Once we're all finished up here, we can save our webpage and see how it looks for some reason or icons or not displaying. So there must be an error in our code Summer. Let's go back to our file and see if we can spot the air. Oh, I can see where it is. We forgot to add the closing take after our link to our domain name we were linking to. So we can close this up here and give it a safe and this should fix the problem. There we go. We can now see that our images are displaying correctly and working. Give yourself a pat on the back. You are now starting to get somewhere with designing your Web site. We can also give these images a click and see if they're linking to the correct website. You see the Twitter ones working? Our Facebook icon is working as well, and our Google Plus also Rex as well. When you could click on it in the next section of the course, you will begin to start learning all about CSS. I look forward to seeing you there 12. Introductory To CSS: for now, let's look at the very first way we could add CSS to our webpage. We can do this with the style pig. We must put the style take inside our head element. This is where all of our CSS must go. Let's create our first CSS rule. I'm going to type it out and then we will review it afterwards. Okay? Can you take a little guess about what this might do? First off, we have our CSS selector, which is selecting the header element of HTML. A document you're then telling our browser to change all the texts found within the header to be blue with this color property right here. Let's give her file receive and see what happens. Okay, we can see here that we don't actually have any text on her page in her header. We have some links but links or style differently than text. So I'm gonna have to do here has come back into our header in our html. And I'm gonna add a little paragraph element just to add some text to our page inside the header element. Refresh the page. There we go. We can see we have some texting her head a Roman, and it's automatically styled to be blue. Pretty neat. Now remember what I mentioned earlier about the cascading nature of CSS? So if I went back into our CSS and added the exact same CSS rule as the one we currently have. But let's say I changed the text to Green. What do you think will happen with a text? Be blue or green? Let's try it out and see what happens. As we can see the Texas actually green because the last rule will always override any previous rules within the exact same selectors. This does take a little while to get used to, but we will actually use it to our advantage later on. As we build out our website before we move on, there are a few things about our CSS rel that I want to point up. The first word here is our selector. It targets the element that we want to style here. Then we have our curly braces which will contain our actual CSS code. Finally, at the end of each CSS statement, we had a semicolon as he worked more with CSS. Syntax will become second nature in no time before we finish up with this lesson. Let's try a few more rules in CSS so you can learn some new ways to style your Web pages, That's what Let's just get some good old fashioned practice. Let's create another CSS property. This time I'm going to change the font of my H one element. So we start off by declaring the each one selector, and I'm gonna type in a new CSS property called font size. The font size property will change the font size of your selector that you are selecting in this case, or each one font size will be changed. So again, here we have our selector, which is their H one element. Then we have our CSS property font size. Then we have our actual phone size in pixels. The larger we make this number, the larger our text will appear on a Web page. In our case, our Texas going to appear really large. Let's save the file and see what happens as we can now see, our text has increased in size. Keep in mind that since we're targeting our each one element, if you were to go back in our html and Target or create another each one element. That element would have very large text as well. Our code here targets all CSS h one elements under page and was styled them accordingly. So let's go on a code. And I'm just gonna copy or code here in peace to again to show you an example. If we create another age one element on her page, I'm going to save it here, then go back in preview are what page we can see that the new H one element is giving the exact same styling. Also, keep in mind that we can also be a little bit more precise with our selectors, for example, like a type Petr H one which instead of targets all each one's on our page and styling them with our code, it will only apply these dials to H one elements that are found within the header element of her page. So I'm going to go back into my code here, whoever each one from earlier, and actually move it outside of the header so we'll find the end of her header take here. Let's paste in our code And last but not least, we actually have to create our rule that will target our header each ones. So let's go into one of these rules here and that's just type header before each one. It's now what we're saying is, let's target Onley the each ones that are found within her header. If we refresh the page, we can see that our first each one up here is very large, but our second each one, is not having our styling. This is the power of CSS. But wait, there's still hot more that we can do, especially with CSS. When you feel you are ready, let's move on with the course and I'll see you in the next lecture. 13. External and Internal CSS : So let's grab our styling we created earlier and cut it. And what I'm going to do now is create a new folder called CSS, Make a new word file and give it the name CSS as well as the extension dot CSS. We can go ahead and delete this old folder as we don't need it anymore. And let's open up our new CSS file paste are old coat inside and save it For now, I noticed that as I opened up my CSS file that we have these two tabs appear that no pad lets us edit both files really easily. So I paste my CSS coding here, and I'm gonna give it a quick safe. The last step is to link our newly created CSS file to our HTML document. Let's open up her HTML document and inside the head tag, I'm going to write out the following coat. What we're doing here is linking our CSS file to our HTML document. Make sure you get the correct file path name or else it will not work. What we're doing here is we are linking toe a relative style sheet and in the eight breath we have our CSS folder are CSS file name and then our dot CSS extension. Let's say both files and open up a webpage and a browser to see if this works awesome. We can see that our CSS styles are still being applied to our webpage. This means that our external CSS style sheet is working correctly. Now let's get rid of the CSS for now, since we don't need it anymore. Also, if we save our newly file, we can see that our CSS styles are no longer being applied to our webpage. Now, before I finish up this lesson, I'm going to link to another CSS file called normalized dot CSS. In order to get this fell, you're going out to go online and just follow along here. As I grabbed this CSS file, I'm going to go to Google. I'm gonna type in normalize dot CSS or just normalize. The first result right here is the one you want and you're just gonna want to download the latest version here so we can just click, download and next up we can copy all this text in here. It's gonna give it a quick copy here and then we need to actually create a new file, give it the name normalized dot CSS and then paste I code we just copied inside that file normalize dot CSS is some basic CSS formatting created by some really smart developers online that helps renders some elements consistently across all web roses. So your website will look better on different systems and tell us I recommend you throw it in all of your projects just in case, because it does make a really big difference. All right, so we're give this a quick safe and I think normalizes pretty much good to go. You don't need to edit any of the code, just paste it in there, and now we need to link to it from our HTML fella sheet. We can just copy the cold we created earlier because it's pretty much the same. The only thing we need to change is the file path, which would be the normalized out CSS because we pasted normalized out success inner CSS folder. We already are calling the CSS folder and then we have normalized us to assess their just give it a quick safe and everything should be good to go 14. What Are ID Selectors: The very first thing that we're going to do in this lesson is created element called a diff . We're going to use this div to help wrap the main part of our content. As you work with dibs, you understand them further For now, just think of it like a box that organizes our websites content. We're going to create our first did in between our section and header element and close it in between our footer and bodies closing takes. Since our HTML content here is inside our newly creative we need to invent our code. We can just select this whole block of code here and indented all at once by pressing the tab key because we're going to be creating lots of did takes in our HTML code. We can actually assign unique i ds to our dips to separate them from each other. We can do this by adding an attribute to a diff cult and I d and then we give that I d the name. Since this div is going to be the wrapper for a website that actually called it rapper. Now the cool thing with dibs is that we can also select them as a selector in our CSS. In order to do this, we can type out the following and our CSS code. First off, we're going to start by selecting our I d called rapper We're gonna add or curly braces. And then inside those clearly races, I am going to create a new CSS property called text Align with this text align property does is allow us to shift our text on our page or within our element. In our case, we're gonna actually align our texts in the center. So if we save her page and then go view our website, all the content inside our wrapper take should be centered on her page. Let's do that right now. All right? We can see that our content is now centered on the page. Now that pre much shows you how to work with dibs and I ds in the next video, you're going to work on centering our wrapper in a more effective matter 15. Centering Our Websites Wrapper: in the last video, you learned how to use I DS to create dibs to separate your content. In HTML, you also learned how to target in style ideas in CSS. In this lesson, we're going to build incentive or wrapper for a website. Let's begin. Let's start off with adding some basic styling to our wrapper. I'm going to type out some CSS properties and values, and then afterwards we will walk through them and explain what each one of them does. So here we have a max with of 940 pixels and a margin of zero and auto. The first property we have here is Max, with what this does is tell our Div that the content cannot grow any larger than 940 pixels , but kang or smaller, depending on what the browsers resolution ist. For example, if we save our page and I resize the window, I noticed a rapper adjust based on the screen. I also noticed that once we hit 940 pixels are content doesn't change in size. This is because of our max with property. Our margin property will just the spacing for our wrapper element. The margin is the space around an element. The first value sets the margin on top. The second sets the value on the right. The third sets the value on the bottom and, lastly, the margin on the left Try to think of it like a clock. So here we are saying you want the margin on the top and bottom to be zero, and the margins on the left and right to be set to auto the auto value will fill in any empty space on the left or right side of the diff. This could be a little bit confusing to understand at first, but as you put more websites, you will understand how margins work. In the meantime, let's get a visual on how this code affects our Web page. Let's add a background color property to style the background of her death. Let's save the page and take a look First, let's make a browser small, like how it would look on a mobile device we can see that are dipped, takes up the entire page. As we increase the size of our browser, our margins automatically adjust and center are rapper. Notice that once we hit over 940 pixels are margins. Add extra white speech since we said a rapper to go no larger than 940 pixels. Also note that some of her images out a little bit too large, furtive, so they're sticking out a little bit, but we will go ahead and fix that later on. One problem that I noticed a little bit earlier on is that on smaller displays, our text is a little bit too close to the sides of our screen. What we need to do. It's at a little bit of padding to a rapper. Remember how we used margins to add space around the outside of our element? Well, we can use padding to ad space on the inside of an element as well. This is how we type of the code, just like with margins are patting works in a clock right matter. So here we're basically saying zero patting on the top and bottom, but at 5% to the left and right side to the screen. So 5% of the total with other rapper will be applied as spacing inside the element on the left and right side again. Let's save it and get a visual view of what has changed. There. We can see on the left side and right side. We have some spacing before text and icons. A good way to remember The difference between margin and Patty is that margin is the outside and padding is the inside s. You create more websites and once we start to look at designing websites that are mobile friendly, you will notice why this is very important for reference. Have also attached some margin in panning diagrams. To give you a better understanding, CSS properties work with elements. 16. Lets Take a Mobile Friendly Approach: it's important that we take a mobile first approach when you build out our websites. The reason being is because it is much easier to take a mobile site and expand it to a desktop version instead of taking a desktop version and turning it into a mobile website. This is also good for you because mobile websites are easier to build and they are a must have. Every website needs to be mobile friendly, since over 50% of people view the Web from some type of mobile device. Designing mobile websites is all about simplicity and user friendliness. Once you get your mobile website complete, you can start to work on more complex features for a desktop version. Now let's go back into her code and start making the mobile version of our website. We can actually get rid of our background. Since we don't need it anymore, I'm going to actually work on the logo and header section of our Web sites. Since our desktop version will have a logo, let's go ahead and use an H two element to add a subheading to our website. Now let's wrap our two headings in an I D called logo. I'm also going to delete our paragraph element since we don't need that anymore. We also need to make sure that our DIV element will cover our H one N R. H two as well as the anchor element. Now let's go into our CSS and create a new declaration for our newly created logo. Idee. I'm going to center, align our text and give it a margin of zero. For now, in order to align our text, we will use the property we learned before called Text Align and give it the value of center. If we go ahead and savor Page, our background is going to be gone in her text should be nicely centered on our page. There we go, our Texas nicely centered as it is on a wire frame. We will go back and do this for a navigation later on. Great job. You've learned some basic features of CSS. After you take a quick quiz, you will be ready to move on to the next section of the course, which work on more styling and working with CSS on our website 17. Styling Our Website With Some Color: in this lesson, you're going to learn how to add some color to your Web pages. Let's start off installing our websites links. I'm going to target our anchor element here and create two separate declarations. The 1st 1 is going to style all links on our page that air unvisited and the second decoration with style visited links the exact same color. Now, you might be asking, What is this number? Well, that number is called a color hex, which basically means this hex code represents a hot, pinkish reddish color. If you Google hex color codes, you can actually look at all the different colors. So you confined with hexi decimal codes. You could also look up html color keywords as well and use them on your website for reference. I'm included links to hex and cured colors in the external links section of this course on this example website. You can see that we can pick our colors here and on the right. They have listed all the different hex codes that we can use to clearer links or any other elements on a page that we desire going back to our Web site. However, this code was style links on a block, this pinkish reddish color. But we will change that in a few minutes. Anyways, let's save and see how our links are. You gonna look all right? We can see that they are a reddish kind of reddish color. But the problem is, we don't want our header links this color, so we actually need to change that. Let's go back into our websites code and let's create a new CSS declaration for our header one take. Let's give the links over each one a grayish color. I also need to do this for mate H two as well, because we want our other websites links to remain this reddest color. We actually the target our idea logo and target the links that air inside our I D logo. So what this code is going to do? Well, make the links inside our I d logo grayish color, but keep all the other links on our website read. Let's give it to save and refreshing. See how it looks. All right, there we go, the top two each one at age twos that are inside of our logo. I d are now this grayish color. I'm also noticing this underlying interfere links. We actually need to get rid of that. So in order to do this, we're gonna have to go back and target the header and add a new CSS property. The property that we're going to use is the tech decoration property. The text decoration property lets us at even more styling toe are links every prefer to. In our case, we actually want to remove all the styling so we can put none here. This will get rid of the underlying on your links and our websites header. Let's give our pages safe and see if it's working as you wanted to. Oh, we can see here that are underlines. We're still here. Why is that? Oh, I can see. And our header take. I forgot to include the anchor element because they're headers. Links are actual links. We need a target links more specifically. There we go. Now The underlying for new links are now gone. All right. So robe status starting to come to life with some color. We still have a lot of work to do. However, and the next lesson you were going to learn how we can use classes in CSS 18. What are CSS Classes: in this lesson, you're going to learn what classes are and how we can use them correctly. In CSS, the class is very similar to an I D. Except for one major difference, and I d can only be unique and cannot be repeated on the same page. A class, on the other hand, is a little bit more flexible. We can have as many classes as we like on any single page. Let's add a little bit more styling to our webpage and going to add a new class to our navigation links. I'm going to navigate to our UN order list and give it the class name navigation links. I'm going to actually increase the size of all of our list items font slightly. We also need to close our dip just underneath our UN ordered list right here. Now let's go over into our CSS and use our newly created class as a selector. I'm also going to slick the list item property as well. All right, so we're going to use a new CSS property called font size. And what the font size property does is control the font size of whatever class where element you were targeting in this case, reiterating the font size of our navigation links. Let's give it a save and open up and see what happens. We can see here that, as we change our font size are find changes on our Web page. The more higher the number, the bigger the font size kids. We have selected 18 pixels, which is slightly above average, so our front sides of our list times got just a little bit larger here. Next up, let's add a cool hover effect. When someone mouses over our navigation links, we're going to need to target our navigation bar anchor links, and we are also going to target a prosciutto class called hover. So whenever somebody's mouse hovers over the navigation links in our naff bar, whichever color we put here is a clear the links were turned into. Next up, let's actually add a color. I'm going to add a slightly darker color than what are standard link Color is right now. This is kind of like a darker red color. In order to find this killer, however, I'm gonna take our standard reddish link color, and I'm gonna type it into Google and try to find a darker red color. So I'm gonna grab the code here, and then I'm gonna open up my Web browser and search for the website that we use earlier to find our standard reddish link color typing hex colors. All right, so we actually pasted or color here and here we could see different shades that we can use . Something's gonna grab this, collaborate here, cocked this hex code and then add it to our hover effect. Once we are all done here, we can save our webpage. And let's see how everything looks in the browser. Right on. It looks like our text has increased in size to be a bit larger and have the most over our links. A darker reddish color is applied. They're looking pretty good so far. You know, how do you see assess classes? And you know the difference between a class and an I d. When you're ready, let's move on to learn about organizing your CSS with comments 19. How To Add Comments To Your CSS: Now that our website is trying to actually get somewhere, it's important that we organize our code that we can easily navigate it when we decide to work on our website. Comments are very useful because they allow us to add note into our code and help us organize everything just a little bit better. It's also important to note that a Web browser were ignore comments when it processes your coat and site. Visitors will not be able to see your comments unless the view your website source code as well. We can start a comment block by typing ford slash in the ass tricks symbol, and then we close the block with a gastric symbol and then the Ford Slash. Anything inside this common block will be ignored by the Web browser and and no pad. Plus, we can see that it turned screen. Let's start off by commenting what some of our CSS properties do, as well as organizing summer of a code so you can get some practice as well as have a reference for what these properties actually do. We're also going to add some comments to organize our websites logo, a rapper or footer and Header and some other things as well. Let's go in and do that. So right here we can organize our link styles. Here you take link colors. Most are gonna add maybe some properties here as well. So we go link colors and properties. Let's also comment these colors and as well just so that you know what they are when you reference them later on. So this link color is clear of red. This logo is kind of Ah, darkest greatest color. The last thing I'm going to do is change the hover color of our links here in the naff bar . And it's put a darker red kind of color here and that should be good for now. For our comments in CSS, we will be adding some more later. As you progress through this course. 20. Adding Fonts On Our Website and Adjusting Text Size: you have learned quite a bit of CSS right up until this point, I think it's time we add a font style to our website in order to get a font for a website actually going to have to head on over to Google funds. We can search around for a font we like, But just to keep this video short, I'm actually going to go ahead and grab the 1st 1 I see that looks a little bit different. Since we are building a hairstylist Wallich, we're gonna go for a trendy font, one that I normally wouldn't pick, but one that has some style. Let's try this one right here. This one looks pretty good. So we're gonna click and add this to our collection. And I'm also going to grab an open sons front as well, which we would need for the body text of our website and other different elements were styling. So once we're ready to move on, we can click the use button and we have our two funds here and you construct which one you want. We can click the normal or the bold for the dancing script, and then you see open songs has a lot more options as well, which everyone you want to you select it. And here we have the code that we can actually insert into our website. So we have our This is our HTML code here, so actually have to copy this. Go into our HTML a Web site and in the head section would just insert it here because this is basically linking us to the Google font. So after that, we actually have to put the CSS for a font. We can use this font family property to style whatever element we want with the specific font. So in the case of our title, we're actually gonna style or logo, I believe with this font here that I'm going to use and we can just copy and paste to see, assess and just stick it in here like this, and it should be good to go. So anything in our local have that new fund style again, I'm going to copy our comment here, and I'm just gonna type fonts for are logo just so we know what this font is used for and let's actually test it and just see if everything is working. So we're giving us safe and open up. And yes, we can see that our new font style was being applied to our logo. And we can also see that are other elements Do not have this new fund style. Make sure you save your each Nemo page and your CSS page. This is a common mistake that a lot of people make, including myself. When I first started and we can see here at the bottom again, it's just a default style fun. So we have to go back into Google funds and we're going to actually grab the open sons CSS found here. I'm gonna copy this, and we're gonna actually add this to our body so that everything else in the document gets this open Salins font styling. But what we're gonna have to do is actually going to have to add this to the very top, since if we put it in our body, take this will make it so that every element in our page has this open so in style. But we actually want a logo to have a different style. So we put it after our body take because remember the cascading nature of CSS. So our logo font family is gonna override the body fund family. This is another example of how we can use the casket he nature of CSS to benefit our webpages. So let's give this a quick safe and let's see how it looks. All right, we can see our font style has changed. So we have the open sons fun being attitude, everything on the body. And since our logo declaration of Reform Family was after our body take, we have our different styles being applied for our logo. Next up, actually going to change our H one fund size to 2.0 e m and GM is just like a pixel except that it is mobile responsive. 1 a.m. equals the current standard of viewing device font size, which is usually around 16 pixels. So why not use just pixels? Well, the problem of pixels is that they don't change on mobile devices. 16 pixels might be too large by setting our fund size to e EMS. Are fun will scale depending on what device is viewing our website. So this to M is the same as saying 16 times too, but of course this to him is going to scale on her page. So I'm actually gonna cut of this comments section here and I'm going to write this year. Just so we know for reference what 1 a.m. equals. And actually, I'm gonna change this really quickly. Here to him is not gonna equal 16 pixels is actually going to equal 32 pixels. I know this is a little bit confusing, but we will cover this in more detail when we get to testing our website for mobile responsiveness. For now, I just try to use E m if you can, because they will scale and make your website more mobile, responsive. When it comes to the text being displayed on your website, I'm also going to change the font size of our H twos and our logo property. So let's copy this code based it out and switch this each 12 and h two and we're gonna make the text size just slightly a little bit smaller. Let's go. Something along the lines of font size equals 1.25 PM so it's gonna be a little bit bigger than what normally the each to text would be, but it's also gonna be a little bit smaller than her. Each one. I'm also going to add a fund, wait to R H two and I'm gonna search to normal because by default, headline elements have a front went off, bold added to them. So if we add a footnote of normal, this will change the signing of the age too. And add more emphasis on her h one. Before we finish up here, I'm going to grab our comment quote here, and I'm gonna organize our navigation just a little bit better. I'm gonna add a navigation section here. Just so our navigation links and all that are a little bit more organized in our code. While we're here, let's also create a new Nath property and let's text align all the text InterNAP element to be centralized. So this or make ours our navigation actually center on the screen instead of appear on the left and you'll see that in a second when I saved the page. And last but not least, let's copy are common code here. And let's create a section for our flitter. Inside are footer section here. Let's target are footer and we're going to once again change the font size to 1.25 PM This is gonna make the Texan or footer just a little bit smaller and also make it mobile. Responsive. I'm also going to change the color of the text air filter. So I'm gonna create a color property. And what we're going to do is we're actually gonna grab that kind of darkish shade of gray we used up at the top here, Let's screw up and find it this great color reader. So I'm just going to copy that in and just like our header, we're going to text, align our text and make it sent arised in our footer. So I do believe we're done here editing our CSS for this lesson. Let's save our file and see how it looks in the browser. All right, so we can see that are fought. Sizes have changed on our header. We also summarized everything We can see our navigation here now in the center of our pager and if we scroll down to our footer, we can see that are footer is now everything's in the center and our text has changed a little bit there as well, so it's looking pretty good. Our website is starting to come together. We still have a lot of work, but in the next section will be doing even more styling to our website. 21. Styling Our Portfolio Page: Now that we have finished with the typography styling for a website, it's time to move on now. We covered most of the basics. It's time to do some work on those images we have on our website. Now, since we do have multiple lists on her page, we should probably give her portfolio. And I d. I want to go ahead and give it the name portfolio. Now that we created an A D for a portfolio, we can now begin to style our portfolio. I'm going to copy our CSS comment here, and I'm gonna make a new section for our portfolio styling. Okay, Dokey. So the very first thing that I want to do is change the sides of our images as of right now , the way too large for what page? And it doesn't look very good. So in order to fix this sizing problem, but we're going to do is declare a max with for images. When you give them a max with of 100% we would use the image selector to target all the images on a web site. This max with property will tell our images that they can only be as large as 100% of the container that they Aaron. If the container shrinks in size, so does the image. This seems minor, but it can have a huge impact on the responsiveness of our website. Next up, let's do our part for you. First of all, let's get rid of the ugly dots that we have for each item on our portfolio list item. We can do this with the less style property and we selected to nut. This will get rid of those red dots beside each image. Next up, let's target a gallery list item. Let's give it a with of 95%. Let's give it a with of 95% and we're going to set a margin of 2.5% on the left and right side of each item. This will make our list item be 95%. With of the page, the extra 5% will be applied to the left and right side of each picture. Later on, we were just a websites Leo using media careers and the flow property. But remember for now we're still working on the mobile version of a website. Let's savor document and see how it looks. Okay, we can see here that are images shrunk a little bit in size. We can also see that these dots are still here. For some reason. Let's go back in our code and see if maybe we made a mistake or type something wrong. All right, Looking at our portfolio, I I d Well, I think I know what the problem is. I think we accidentally we put a capitalize on her i d But when he used it in our CSS, we didn't capitalize or CSS. So we need to do is change this to a lower case p and it should work as we want it to. Let's try that out and see Right on. There we go, our images there now 100% of the rapper and our little dots beside each image are now gone . Also, let's do some testing here. So you noticed that that as a decrease the size of our page here or images scale with the page and our percentages on the site also scale as well. When we get 5% of a margin on the left and right side of our portfolio items and as we decrease the sides of a rapper, are images scale with the sides of it. So this is a very important step for making our website mobile responsive. One thing I'm going to do here really quick isn't gonna add a margin to the top of each image at a little bit of space on the mobile version. So let's add 10 pixels here and we'll save it up in your upset again. You see here that lips I didn't mean to do that. We have a little bit more space here. We can adjust this later on, but for now it's looking pretty good. And again, this is very important for making a website mobile responsive. 22. Creating a Horizontal Navigation: it's time to do some work on our websites and navigation. We are also going to do a few other quick fixes. Why we are at it here first. Let's Target are naff on ordered list. I'm also going to us like the nap and ordered list list items as well. In this property, we're going to give our list items patting of zero. I'm also going to set some margins as well. Let's give it a margin. Top of zero margin right of 20 pixels and a margin bottom and left of zero. I'm also going to set the display value to be display in line block. This will change our list items to instead of being displayed like a bolted point list from top to bottom to actually be displayed horizontal on a Web page. To give you an example of how this works, let's now save up our document and see how our webpage looks and note the changes that happen to our horizontal list for our navigation. We can now see here that it's displayed horizontally on our website. Pretty cool if for more information on the display property mr to check the external follows for the scores as I linked to a document that talks about the display property and a little bit more in detail. For now, we're pretty much good to go here or navigation looks pretty good. And the next lesson we're going to polish up our newly created navigation as well as some of our footer elements that we need to work on. 23. Fixing Up Our Footer and Navigation: now, since our navigation list items are going to be links, we're going to need to style them. So let's target our navigation anchor elements and give them a font weight of bold. And let's also add a little bit of spacing in them as well. I'm gonna make you here so that when somebody hovers over our links, they bowled. I'm also going to change the size of our social media icons at the bottom of her page. Right now, they are a little bit we can target our images, but I didn't a class to them. The next thing here is that we can actually give both images the same class because remember, classes can be used multiple times so we can use this social icons class with all of our social media icons and then declare the stylist for that one class and there will be applied to all three icons. So let's go ahead and copy and paste the class here, give all these three images the same class, so let's go ahead and actually target this class and give our footer images some styles. I'm going to change the height and with to be 30 pixels each. Let's give this a save and see how it looks on our website. Just drink that over here. All right? So if we hover over links, we see that they get that bold effect with them. And at the bottom Here, we can see our images or kind of tiny. But you also have these little arrows here. There's a pop enough. So we have some kind of air going on in our code. So let's investigate that and see if we can spot the air. So looks like our classes. Okay, but you can see here accidentally added an extra aerial here for a closing tag. So we're get rid of that, You know, just copy and paste our class and stick it back up here. And that should get rid of those weird arrows that were popping up for our closing takes. But close that up here. And there we go. That should fix that problem. Let's give it a quick save and check and see. Oh, there we go. There. All got. But you also noticed that we have these weird spaces in between our images as well. So what is causing that to happen? I think we might getting some text decoration styles interfering with our foot or social media icons. So I'm gonna go to Footer and I'm going to target the anchor elements, and I'm gonna give it text decoration of none. And let's see if that fixes the problem because I think that's what's college in those little Dash is there to pop up. It's true that and they're you. They're all gone. So our images, we're looking at a little bit better. Let's check our state on the mobile version as well, just to make sure everything's good. Okay, they look pretty good there as well. Um, one thing I do want a notices. I might make the images a little bit bigger. They're a little bit smaller right now, so maybe we should go make go back and make them just a little bit bigger. I'm also noticing that there's needs to be a little bit more space here between our list items. We can see here that they're a little bit close together, so let's go back into our navigation list items and let's add a margin bottom of maybe 10 picks over. So and let's see how that looks all right. We could see there's a little bit more space, and that definitely looks a little bit better there between our list items as well. So going back to what we had to do before, let's go back to our social media icons and let's make them just a little bit more bigger. So we're gonna go to our social icons we created. And let's try 40 pixels and see how that looks. Make the images a little bit more bigger. All right, that looks a lot better, a little bit bigger, but not too big. I'm liking that, and so far everything else looks pretty good. So after this lesson, you have a quick quiz and then you're going to learn how we can add all of the other pages to our website. 24. Create an About Page: it's time to start adding more pages to our website. In this section, we're going to be creating art about contact and blocked page. Let's start off with Creating are a boat page. The very first thing that you are going to need to do here is create a new text file and your Web Sites folder. After that, let's open up the file and save it as dot html. The next thing we're going to need to do is copy all of our HDNet html from our next page to our newly created a boat page. We can do this and Windows by hitting the control, See Key to copy it and then control plus P to paste it. Now, if we view this page, it is going to look exactly like our portfolio page. So of course we need to change that. The very first thing we need to get rid of is all of our images. So let's like everything within the section tag and delete it. So now if we savor foul and open heart newly created a boat dot html file, we can actually now click on our about page in our next file and were taken to our page. We just created here. But of course there's nothing here because we just deleted it all but our boat pages now working correctly on our website. Pretty cool. So let's go back into HTML and start building out our about page. The very first thing that I am going to do is at our clients picture to the page. I noticed that I'm also going to add a class to her image as well, so that we can style it specifically with CSS later on. In order for this image to dispute display correctly, going to have to down the project files for this lesson as well, or if you like, you can use your own picture if you feel like it, I'm just going to quickly double check our extension here. So I got the right extension for a picture and it is a J pig. And for the alternative text, I'm going to put our client's name here. And lastly, let's add our class to our image, and we're gonna add the class profile pic. Next up, let's add a title to our webpage because we already have an H one and H two in the header. We're going to have to use an H three. Let's give the HD the title about me. You could also use a age to Here is well, if you like After this, let's Addy paragraph where a client can add some text about herself. For now, I'm going to insert some sample text just so that something is there and we can see how it's actually going to look in the browser. I'm going to also add a few paragraphs element here. So our page gets built out a little bit and we can see the spacing in between. I'm gonna take a little time here to clean this up a little bit. I grab the slalom if some online, which is basically just filler text weakened insert here. I'm also going to take each paragraph a texture and wrap it in a paragraph element as well . Remember to close your paragraph element as well. Closer last one and weaken. Delete this last paragraph closing take right here, since we don't need it anymore. All right, so our about page is looking pretty good. Let's give it a quick seat and see how it looks on our website. So we click on a boat. We now have our boat page here for our client. It's looking not too bad. Here we can have our About me, which is the title are paragraph to text and a picture of her client. We're gonna go back and style this all in the next lesson. One last thing I'm going to add, though, is underneath our client's profile picture. I'm going to add a paragraph, and I'm gonna type the client's name kind of like a caption for the picture. And when we refresh, we can see that now that caption is displayed here by our image, so I think it's looking pretty good so far. In the next lesson, we're going to expand upon our newly created a belt page for our website. 25. Styling Our About Page: All right. So we just created our about page and set up the basic HTML. Now it's time to do some work with our CSS. Let's create a section here in our CSS for our about page. I'm gonna grab this year and I'm gonna copy and we're gonna call it styles for our Boat Beach just to kind of keep everything a little bit more organized. Oh, yeah, No. Let's start off with styling our profile picture. I'm going to give it and Max with of 200 pixels as well as some margins, remember that we need to actually target are dot profile picture. Let's try emergent of five pixels all around just for now, just to give the picture a little bit of breathing room. And lastly, we need to set this display to block so that our auto margins on the left and right will center the image on the page. Now, before we finish up with their styles here, let's do some styling for our each three headline. Oh, I'm going to do here is at the margins, specifically to the bottom of the elements that there is a little bit of separation between r H D and R paragraph element. Before we do anything else, let's give this a quick save and just see Haro upset. Looks we can see here that are profile pictures, actually a little bit small. So I'm gonna go ahead and make that a little bit bigger. Let's try something like maybe 300 pixels. All right, that looks much better. A little bit bigger. Lastly, let's go ahead and change the title of our website. So in order to do this, we're gonna have to go into our HTML to go to our each one and let's put the actual name of relapse the Rio. We have the name of our website here, and I'm actually going to get rid of the H two because I think it looks a little bit better without the H two. So let's delete that for now. Also, I'm going to go into our cooperate information and type our client's name and because we're only doing this under a boat page, we're actually gonna have to go back and open up all of our individual of pages and change the settings in them so you can go ahead and do that on your own. I'm just gonna change my index here and a and change the name and the footer. Oh, yeah, So I think that's pretty much it. Let's give it a save and refresh the page. There we go. I think that looks a lot better, so we're pretty much done here. The mobile version of our website is almost complete. Once we're done with designing the mobile version everywhere, pages will move on to designing the desktop version of our website. 26. Create a Contact Page: We finished two pages so far, and now we have two more left to go. Let's continue onwards and start to work on our contact page. We're going to create our contact page just like our about page. First, let's create a new text file and call it contact dot html. All right, we can delete the old one here. Let's open up our contact page and what we're going to do here is we're going to grab everything from our index page and again cop, copy it into our newly created contact page, just like before. We're going to have to go inside here and delete our portfolio. Since we won't be needing it on our contact page, let's navigate to our portfolio selectively items and lead them. Now let's create another section. Take here. We have two columns. Our first section take is gonna be our first column, and our second section take is going to be our second column for our mobile version of the website. These columns would just be stacked, but when you expand our website to desktop view, these two columns were float side by side. So for now let's create a H three for the title and inside I'm going to write. Contact me. It's going to be the title for our page on this page. We're going to be displaying our clients contact information right underneath our H three take we created. Let's add a paragraph element and write some contact information about our client here. We could put something like, If you ever need to get a hold of me, you can contact me using the details below or something along those lines were worked perfectly fine. Or you can just sort insert any text you like for now, just to put something there so you can see how it will look. Except we're going to actually create a second paragraph here. And in our second paragraph, we were going to actually insert the different ways people can reach our client. We're going to do things such as at a phone number, our clients, evil address, and we might add some special market to these elements as well. I also went ahead and stuck in our clients physical address as well. Keep in mind, this is just have made up address that I found on the Internet and we will be using that just for the example of this website. Next up, I'm going to paste in. Our clients once again made a phone number because I want thes different contact omens to display as separate lines. We actually have to make a paragraph element for each one separately. And last but not least, let's add our clients email address just in case if anybody wants to contact our client by email. So what we're going to do now is we're gonna actually add some special market to these different elements. HTML has some markups to add for particular things like email addresses and telephone numbers and physical addresses. So I'm gonna go ahead and add these tags to the different contact ways we created earlier. Go ahead at the address element. The other one we're gonna add here is we're actually gonna add a link to our emails that if our client clicks on the email us button, it's actually going to love into directly email us. So we can do this by creating a link here with the A treff and then putting mail, too. Web master dot com or whatever your email addresses. For example, you would put male to whatever your email address is again. This is just made up when I created just for reference. All right, so I think we're done here. Let's savor Page, open it up and see how it looks. So I'm gonna start opening the index, go to our contact page, and cool. We could see everything here is displayed pretty neatly. We have our link for our email address, and we have a little bit of special mark up here for our contact information. Now, there's one last thing missing from this page, and that is our clients photograph. I'm actually going to take their profile picture and the contact pages. Well, you could just leave it like this if you like, or you can add a photo. It's completely up to you. But I'm gonna go back in and in our first section, take I'm going to insert our picture that we created earlier. All right? We can see here that our profile picture is displaying right here. Exactly how I won. I think that looks a little bit better. Adds a little bit more personality to the page. So I think our pages looking pretty good so far We're actually gonna keep our contact page for this website. Very simple. Into the point. All right. Great job. We have one more page left to create on our website. 27. Creating a Blog Page: it's now time to create the blawg page for our website. So let's start off by creating a text document and we're going to save it as blawg dot html . Since that is gonna be the name of art Blawg page, we can do it. This old text file we don't need anymore. And what we're going to do is we're going to grab are contact page html and we're gonna copy it all and stick it into a blocked page and paste it all in there and we can go ahead and delete everything we don't need. So we'll keep our profile picture but would delete this paragraph here. I'm also going to delete everything in our second section tag that we have here and then going to create a paragraph and add some sample text in here so we can see what text will look like for our block posts were not going to make an actual block post. We're just gonna pretend that we have one here for now. So we're close off our paragraphs. All right, Nadal looks pretty good. Next up, I'm going to give this section a class and I'm gonna give it the class of blawg content just so that we can target and style this section class here and we're gonna give this section tag the class of sidebar. Since this image here of our client is going to actually go in the sidebar on the block page, I'm also going to add a age three here that's gonna say a bulky author and this is going to go rate above the profile image on the sidebar and right underneath here, I'm going to add a new class to the profile picture in court. Blawg profile Picture since we will use unique styles to this picture and we won't be using these stylised under other pages lastly, let's create a each three for our site pages in our sidebar. And then I'm gonna grab our list here from our navigation and copy it and paste it underneath here. So we're gonna have a list of our site pages in the sidebar as well. All right, so that's looking pretty good. The next thing we can do is go ahead here and at a tighter for art block post. I'm going to add an h three and then let's just take our blawg post tail or something similar to that extent. That's an example. And again, this could be in each two or NH three, whichever you prefer. Next up, Let's give her document, isi, and just see how everything looks for now. Open up our index clicking her blocked page. And you can see we have all these different things here. We actually have our contact me title here that we'll actually need to get rid of. Forgot to delete that. So I'm going to go back into her HDL document here and just get rid of that H three. Next up into style are blawg picture here. We're actually gonna grab this picture in fluid to the right of her page and, yeah, contents going to kind of go in the left ear side and you'll see what I mean. Once we actually do that, we're gonna do that with a float. So let's go back into our CSS. And I'm gonna make a new section here, and I'm going to call it Style is for our belong Page. And I'm gonna start off by targeting our picture. I'm just gonna double check the class. All right? So it is blocked proof, proof log profile pic. All right, it's making sure I got that right. And we're gonna do a couple different things to this picture. The first thing I'm going to do is actually copy all their profile picture settings so that the image displays exactly how it is how we have before peace that in there Next up, I'm going to add a border radius, and I'm going to make it 100%. What this is gonna dio is actually gonna make our picture round, make the border of her picture around. So as we savor page you see, we can't have this rounded picture effect now, which is kind of cool, and we can change the way that border radius displays by changing the percentage value, we can go below 100% and I'll make it more of a square. But 100% is a complete circle overall. Next up, let's target our sidebar unknown ordered list list items, and we're going to do here is one going to text decoration, and I gonna set the tech decoration to none. So we get rid of, uh, the little bulleted points that are popping up there you actually have to make this the links, links, styles, interlace Tatum's. I'm also going to add a list style of none as well. And I'm actually gonna changes to just target our list item because that might work a little bit better. All right, so that's gon are both points are gone. Our links are still underlying, but I think that's okay. We can leave them like that. That makes a little bit of sense, especially if it's in the sidebar. Get rid of that. Textile decoration equals none. Okay, that's good. That's working and looking pretty good. Next up, let's create a CSS declaration that is going to target our sidebar on Lee. And we're gonna meet a new command and we're gonna call it float. We're gonna go float, right? And what this is gonna do, it's gonna take our cyber and floated to the right of the content and you'll see that in just a second so we can see our sidebar. Div here is now floated to the right of the page. Now we're gonna need to set some margins and fix some the text here. But again, you can kind of see how it it's floating here on the right side. This is because of the CSS float property. And like I said, we gave it a value of right. So let's do a little bit of styling for our sidebar. Let's grab her side where each threes and let's align the text to the center of the page That should make it look a little bit better. Let's check it out, Dario. That's looking a little better. But we also need to get the list item here to be sent arised as well. So let's do that. We'll go into our We'd actually just target our sidebar, and there we go. That works as well. You see here that we got a little bit of an indented here from our list items, and that might be from padding or margin from the list items in themselves. But before we deal with that, let's add some margin space to our cyber Tietz and breathing room to our text. We're gonna give it a margin top of 0% and we go with left and right of 5% and that should clean up the page a little bit. Ariel, we now have some breathing room to our text nurse sidebar. It is looking pretty good. Let's shrink the size of the window and see how it looks. We can see that the smaller viewpoints here, some of the Texas hard to read it looks a little goofy, but we're actually gonna use media queries in the next section to fix that. So it's fine for now. We can leave it as it is, but overall, it's looking pretty good. But I'm also going to try increasing it to 10% just to see how it looks. Let's see how that looks. Okay, so it's a little bit more space that does look a little bit better in the Brower's. Why do you like the extra space here? So we maybe will keep it like that. So I think are blocked pages pretty much good to go. Well done. We've now completed designing all of the pages for our website 28. Creating Our Portfolio Page: it's now time to create our portfolio page for our website. So we're gonna do it exactly the same as the other pages will create our document, then save it as portfolio dot html and our portfolio page is pretty much already done for a website. It's actually the home page, a KR index page for a website. So all we really need to do is going toe index page here. Copy all the code further in next page and inserted into our newly created portfolio page of our website. So I'm going to do that right now. Here. I'm going to save the document. And now when we open index dot html, we now have our portfolio page. But of course it's the same page. Is there in next page because we copied all the text? I'm actually going to take our blawg page and use it as the index page for our website. So what I'm gonna need to do here is go back. I'm going to open up our block page, copy only html in our blood page and then paste it into our index dot html page. We can delete all this code here paced in our block page, give our website to save and then open up html agan Index that h e mail and we could see our blood pages now being displayed on the homepage. We have our about page are blocked page contact and portfolio. So we're not done adding all the pages that we need to our website. It's time to move on and start styling and finishing up our websites pages. 29. Adding a Grid To Our Portfolio Page: it's time to make some really big changes to our website. In this lesson. You were going to learn how to use media queries to add break points to your website so that our website will look good on all mobile and desktop devices. Media queries allow you to add custom CSS to your page that will only be applied your page when your browser is that a certain with whenever you Adamia career where I need a break point. Let's go ahead and air Insert immediate query Inter CSS. I'm going to type it out and then now explain what it all means. First off the at media screen is telling the browser that we're targeting media devices displaying the weapons. Next, we have the key word and and our minimum with of 600 pixels. Lastly, we have a bracket which is where our customs uses will go for the CSS rule. Next up, I'm going to target our portfolio. I d here and we're going to use the new CSS property called a float. So what we're gonna do here is we're gonna float, are before your list items to the left, and we're gonna give them A with each of 45%. I'm also going to add a margin of 2.5% all around. Let's save our CSS file and see how this actually looks in the browser. If we bring our index page here we navigate. Let's make this big. First of all, navigate to pro folio. We can see that on a larger display. Our images are now displayed side by side. And if we reduce the size of the screen, then they lose that float property. Remember our media query we created? As long as our screen is bigger than 480 pixels, then that CSS float property will be applied to her images. And they were appeal side by side. Pretty cool. Now, because our footer element is floating with her images, we actually need to add a special property to it to stop it from floating, we're gonna put clear, and we're gonna put give it the value of both. So what this is going to do is this is now going to make our footer go back to where it normally is and not float with everything else again. Let's increase the size of her what page it's. We can make sure that everything's looking good on larger displays. All right, it looks pretty good. But let's say, for instance, what if he wanted to actually create this into a three column layout? When we get to the extended desktop view? Well, we could also do that with media queers. Let's go back into our CSS and let's create another media query for larger screens going to copy our code we had before. But instead of having it 600 pixels, I'm gonna have a 900 pixels. And what we're gonna need to do is we're gonna find a with that allows our images to appear three on the page. Let's try 25% and see how that looks saver, webpage and open it up again. Refresh and extend their display. And that looks not too bad. I think we could make these images a little bit bigger, though. Let's try something along this ends of 28% and see if that will make her images fit just perfectly. All right, that looks much better. So again, let's bring up our website here and let's look at it in the extended view we can see that our image or just are displaying pretty good here in a three column layout. We are missing an image here on the bottom, right, and we're actually gonna add another image to make this look a little bit better. But I guess we extended. It really looks pretty good, and as we shrink it, we can see that a website will switch to the two column layout, and then when she gets to our last meeting query, it will switch to the mobile version view over website. So by using media queries, we can really create a responsive website that looks great on all desktop and mobile devices. 30. Final Adjustments To Our About Page: All right. So it's now time to finish up all the final changes we're going to make on our about page now, I'm gonna open up in next year and let's take a look at our about page. So our about page is almost done. Do anything I really want to do is I want to float this image here and our little texture with our clients name. And when I floated to the right, kind of like how we do in our block page kind of make like a sidebar fort. So in order to do that, we're gonna have to go into our first let's open up each team out for a boat page, and then we're gonna open up this CSS for our about page as well. And the first thing we could do is we can go into our HTML and we're going to grab our picture here in a paragraph, and I'm gonna stick it at the top here so that when we do float it, it's going to float correctly, kind of like how we did on our block page, and I'm going to create a separate section for it. And since we already created a sidebar for a website to style with on our block page. We can actually go ahead and add that cyber class to this new section element and all of the styling we did already for a sidebar. It would be applied. So most of the work is already kind of done for us here. So let's open this up Peaster image in her paragraph. And if everything is working correctly, if we say this and then if you are a webpage, we should have our cyber working correctly and there we go. Everything is looking pretty good. So the final desktop version of her Bo page is looking pretty good. But let's check out the mobile version. We can see that we're having the exact same problem we had before where when you get to lower mobile virgins like this, the Texas kind of looking a little weird around the image. So what we're gonna do here is when our image actually gets to a low point, we're going to remove that float. We're going to say no fluid is going to be added, So it's just gonna kind of stack like how it looked. Any wire frame for our mobile to design. So lets navigate to our media queries. And I'm gonna change us for media queries for pages since we're actually gonna be using them for our pages on our website. And I'm gonna What I'm gonna do here is I'm gonna target our image. So let's go back into my HTML so I can see what the class is called. Kids sidebar in the classes profile pic OK, and I think the easiest way to do this will be to grab our sidebar float CSS property, and just inserted into a media query here. Actually, I'm just gonna go up here and copy and cut it out here. So what this is going to do? Is this going to add this side where float on Leigh Winner page is a minimum with of 600 pixels. So if our pages larger being viewed larger than 600 pixels that are foot would be applied. But if the pages less than 600 pixels, it won't be applied as we can see here. So let's looking pretty good, but our images not centered anymore, so we're gonna have to fix that really quickly. Here. Let's go back to our Blawg profile picture and let's give it and margin left and right of auto in a top and bottom margin of five pixels. So this should fill in that extra space and center our image and that looks pretty good. Next up, we can see here that are about me. Title needs to be sent arised on her page in the mobile view. So let's text align this to center saver webpage. And there we go. That's now in the center, and I like that looking a lot better. Let's check to see how it looks in the desktop, and that looks pretty good. The only thing I want to do is actually wanted changes about me h three to not be sent arised on the desktop. So once again, in order to do this, let's copy R H three. Let's go down to Immediate Query. We're gonna select our first media query and we're gonna pace this code in here, and the difference we're going to do here is instead of text aligning the H three to be in this center, we're gonna change this to left, so it's actually gonna text align it to the left of the page. Let's go left, and this should work is we wanted to. All right, give it a safe. And when we go to the desktop version, we can now see that it's aligned to the left of the page. That's looking pretty good. All right. So I think our about page for our website is now complete. Congratulations. We're almost done designing our website. We have just a couple of pages left to finish up. 31. Final Adjustments To Our Header and Footer: all right, everybody. So it's time to make some final adjustments to our header and footer on our website, our website. It's pretty much complete but there's a few small things I want to fix up here. The first thing for our header is I want to trust you with some of the list items and inter fitter. I want to add a little bit more space and I want to add some styling to the text in her footer. So if you look at a blogger now, we can see that these list items and them above you are a little bit close together. Let's change that. What we're gonna do is add a little bit more spacing. So in the mobile of you, they're showing a little bit different. So let's go to our list items here and let's chain this margin 40 pixels to 50 pixels and let's just see how this looks. All right. So listen, list times were spread out a little bit more, but let's go even further. Let's try 70 pixels, All right, so we can see her list items and now kind of stacked here like this. And I think this looks a lot better. Then, as we drag out her page, our desktop styles replied, So I kind of like that a little bit better, And I think we're gonna keep it like that for now. And I think that's all the changes I want to make on her header For now. Next up, let's go to our footer and Inter footer. I want to add a little more space in between our social icons and our text on our page. It's a little bit squished together, so the way that we're going to do this is we're gonna add a margin top to our footer, and that should create enough space for our social media icons. Let's try 50 pixels for now, and yes, we can see we have a lot more space now and that does look better. So free. Zoom on the desktop view lots more space, and our header and footer look much better now. Last but not least, let's style the paragraph text of her footer, Let's grab our footer are paragraph text, and we're gonna have some emphasis to our foot or text on our website right here on the birdie bottom. So it's at a font style property and let's give it the value metallic that will add some emphasis to our foot or text. Let's see if that works and there we go. Now we can see it styled a little bit different than your paragraph text, and it stands up. So are a header and footer cleaned up, and everything is looking good on both our desktop and one of AH mobile version of our website. Our website is almost complete. We have two more pages to go and we'll completely done this project. 32. Finishing Up Our Portfolio Page: for our portfolio page. The only change we really have to make is adding that extra image to fill that empty space . We have so again down the files for this lesson, so you can get the image or you can add your own. But we're gonna stick an image right here and kind of fix up this portfolio page. So let's grab. This year, we'll copy out the list item and paste in here, and I changed the names already. So we always have to do is put Image six Go image six year, and everything should be working correctly. Let's open up the file portfolio and we could see our image here is now good to go, and that's looking pretty good. If we change the size of our what page, we can see our portfolio displaying pretty correctly on the mobile tablet and desktop view , so everyone looks pretty good here. Unlike in the way it's looking so far, that's it for a portfolio page, it's time to finish up the last page for a website, which is the block page 33. Finding a Domain Name: in this lesson, you're going to set up your domain name, live on the Internet. But first of all, before a website extra gets online, we need to purchase a domain name. But what is the domain name? Well, the domain name is basically the U URL or address of your website. Take Google, for example. W w dot google dot com is Google's remaining same with Twitter. Here we can see that Twitter is the domain name of the website www dot twitter dot com. Another example is my personal block. We have www dot Robyn and haney dot com. This is a domain name of my website. So in order to get domain name, the first thing we need to do is we need to go to a domain name provider. There are a lot of providers out there, but I'm gonna go with go, Daddy, since I like their interface and I've had experience using them before, So the first thing we can do here is search for domain name. You don't want to pick a domain name that has something to do with your website. For example, if you're making a portfolio or block, maybe consider doing your name or if you have a name for your brand, you can use that as well. We're gonna look for the one stop shop shop is actually the name of our website, and we can see here that the name is already taken and this generally happens a lot, especially if it is a domain name is popular in our case. Since I'm actually from Canada in our client is Billy notable for their further salon, Then in our keys using the extension dot c A makes sense because they're not gonna retargeting a global market. Generally speaking, if you're marketed to global, you want to go for a dot com. But if it's gonna be a local like our client is, and in this case, we can actual for a dot c eight. So in our case, I think we're gonna go for a dot c A. So it's check this box here, and we're gonna continue to our Kurt. All right, So go. Daddy is going to try to sell you other things with your domain name, and we're gonna skip all this stuff. We don't want anything. We just want a domain name and next up. We have to enter our account information, so I'm actually actually have an account. So I'm just gonna log in here, and after I log in, I'll meet you in the next screen. All right? So a lot into my account. Depending on the domain you pick, you might have to sign an agreement. So I'm just gonna check this box here, go to continue to check out. And I have some experience means, but would just skip that. And here we have our screen for our check out. Now you can select how many years you want for your domain name. I'm just gonna pick one year in our case, but it's up to you. It's generally about 10 to $11 roughly per year, depending on what domain name extension you're going for. And make sure none of the stuff at the bottom is checked either, as this is extra stuff, you don't eat. So I think I'm pretty much good to go. I'm gonna continue to the check out and you can select your payment method. And after you're done all this, you can meet me in the next lesson and we will continue on with selecting are hosting package for a website. If you also like, you can pick a hosting account from Go Daddy, which is I'm gonna do a swell, but, um, yeah, just sign up. You get your domain all set up for now, and after you do that, we can move on to the next step. 34. Finding a Web-host For Your Domain Name: All right. So we have our domain name purchased. It's now time to set up for hosting account. Now we're gonna set up a hosting coat on go Daddy as well. Since we already have a domain names it up there, this is easier to have everything in one spot. So we're now in a go daddy home page. We're gonna go to hosting. We're gonna click on Web hosting. We're gonna go to get started here and now we have our packages for a hosting plans. The two plans were interested is our economy and deluxe. The difference is $1 per month and a different The main difference between the two packages set with the economy, you can host one website, but with the deluxe, you can host unlimited websites. So we're just going the deluxe because it's by far the better deal. And it doesn't really matter which one you want. If you're going to building a lot of websites online as a Web developer, I'd say go with deluxe, But you could always upgrade it any time, So it's not a big deal. Next up, we select our term length and we're just gonna pick one month. You do say money. If you do pick more months. So if you know you're gonna have this domain name and its host account for a year and you can afford to pay it all at once, then go 12 months. But if you're not sure you can always go on a month by month basis. It's not that expensive, Really. This is the extra stuff that we don't want. So it's going to continue, and we have our checkered here and again. You want to make sure you don't have anything else set up here. I just want to go to proceed to check out. And we can feel it information here and then play. Sort order. And we're all good to go. So once you have your hosting account set up, meet me in the next lesson. We're connect our domain name to our hosting account on Go Daddy 35. Connecting Your Domain Name To Your Hosting Account: it's now time to connect our hosting in our domain name together. Let's go to our Go Daddy account and let's visit our account dashboard in our domain section. Let's navigate to the domain that you purchased. Let's open up our domain settings in our domain settings. Let's click. Use my domain in here were actually going to build a new website on it. Let's click this option right here and now. What we can do is we can use Go Daddy's Website builder. But since we already bought hosting, we can click on this hosting Tad right here, and we're gonna click this link that says, use it with your domain because we already own hosting. Now, this is our hosting account for a go daddy. So let's go to manage here, and this will bring up our C panel. Now, if you bought your domain and hosting account at once and go daddy, then it should are already be connected, and you should be good to go. But in our sake, we have to connect the two together cause they're separate. So what's going? Add on the means we're going to do here is we're gonna add or to me. So I'm gonna type our domain name out here. One stop chop shop, and we have to put her extension dot c. We clicked down here, and these settings will be automatically filled. So everything here is good to go. A snow click Add domain. All right, cool. So, Adam Domain is now created in our C panel, so that is all good to go. The next thing we have to do is we have to go into our domain in point our name servers at her hosting account. Now, what generally happens is when if you send up for a web hosting account, you will get a welcome. An email that will list your name servers for your hosting account in our case already. Know what my go daddy hosting name servers are. But if you just purchased a hosting account from then check your email for your name server information. So I'm gonna go back into my dashboard and I'm gonna click on domains I'm gonna navigated to my domain and click managed DNS, which is domain name servers for short. Let's go down here and let's click on the manage name servers Button right here. Now I have my unsaved in a no pad. So I'm just going to copy and paste them one by one again. Check your email for your name servers. If you can't find your name servers in sentiment email to support at whatever hosting account you with and they will most likely get your domain server sent you in no time at all. All right, so everything is good to go here and we can hit, save everything. Should be good to go Now. It does take some time for your name servers to propagate on the Internet and to kind of get themselves set up and whatnot. So it may take a couple hours or it might happen right away. It really depends. What we can do in the meantime, though, is upload our files to our website. Let's navigate back to our C panel account and what we're going to do If they're going to scroll to the top and click on file manager, we will select our name, throw domain name and make sure you click public FTP route as well. And we go with our domain name in the list. Here, click Go and next up we're going to hit public html here, and I just navigate back to a domain name just to make sure we're on the right one. Okay, so we're good to go here. Now we can upload a website files here, and they will show on a website when people visit our website. So let's go back to her desktop. Let's grab up our website. What we're going to do here is I'm just gonna find the last lesson where we actually have a completed version over a website, and I'm going to just double check here to make sure a website actually is the complete version. All right. It looks like this one's good to go. So I'm gonna do is copy all these files, right? Click them and I'm going to click on send to compressed Zip folder. This is gonna take our files and save it into one folder that we can upload to our website All the ones after it's done here, I'm going to have our new folder and I'm going to call it Index. Actually, let's call it one stop chop shop, just so I know exactly what it is. Okay, So our folders here Now, let's go back to her hosting account and hit upload. Choose their file. Find the right one here, and upload our file up to our website. This is gonna take a little while, depending on your upload speed. But once you're done, uploading meet me back here and I'll continue with this lesson. Okay? So where a website is almost complete here, we'll wait a few more seconds for it to finish. No, let's go back and let's refresh this page. And now I can see are zip files here. Let's right. Click it and go extract. It's gonna extract all the files onto our public html again. You first the page, and here we can see our website files here about dot html or blawg contacted even the index page and portfolio page. So whenever somebody visits a website, they were cr index dot html page. Now, our DNS is not set up yet, so I'm gonna wait a few hours, and then I'm gonna come back and we'll see if everything is good to go. So I decided to wait a whole day since I was getting some heirs with her dean s and it actually took a long time for a website to pop up. Usually it takes minutes. But just so you know, it can take a little while. So maybe give it a day or so. Um, but now let's try or your own See if our website works, go to one stop chop shop and remember, we're dot c A. We have to make sure you put dot c en voila. We're now live on the internet, and our website is now working. Whenever somebody types in the euro, they're taken to the index, the HTML page. And remember, it's always the index dot html a k a. The homepage that people were taken to the click on our individual pages. You can see if they work perfectly now. I actually had to go back into our hosting account and I had to change our page, um, names to ah, higher case here because when I uploaded for some reason, they uploaded in lower case. So if you click on your pages and you're getting like an error, some think that go back to your hosting account or go into your HTML document and just change your about dot h email your blogged out html toe a lower case or whatever you're linking two. And it will fix that problem that I had earlier. But we can see here that everything is working perfectly. And a website. Check all the links here to make sure. Yeah, everything is good to go to. Our website is now live on unit. Congratulations. You've just created your first website and you have also completed this course.