Creating and Hosting a Website

Hi, I'm Beau Carnes with Free Code Camp. In this course, I'm going to show you how to get your own website onto the internet. I'll show you how to create a website, get a custom domain name, which is the URL people type in to get to your website, host your website, which is where the files for your website are stored, configure DNS settings, and set up a custom email address. If you are just interested in one of these topics, you can Check the description of this video for links to the individual sections. Let's get started. You may already have files for your website that you want to put onto the internet. In that case, skip to this time shown on the screen right now, or just go to the next section in the progress bar of this video. In this section, I'm going to go over how to create a website. I assume you already know what your website is going to be about. Two common ways to create a website are to create it using HTML, CSS and JavaScript. Or you can use a content management system like WordPress. WordPress allows you to create a website without knowing how to code. The simplest way to create a WordPress website is to get your hosting first. So in the section of this video about hosting, I'll show you how to install WordPress. Right now though, I'll show you how to create a site using HTML, CSS and JavaScript. For this example, I'm going to create a landing page for different programming courses I've developed. This will be a simple site based on a template just to get you started. If you want to learn how to make more complex sites, check out the playlist linked to in the description. HTML, CSS and JavaScript are all just text stored in text files. HTML describes the structure of your website. And CSS describes the style and how it looks. JavaScript adds additional interactivity and functionality. While you can create these files in any text editor, it's common to use a source code editor, such as Visual Studio Code. This makes it easier to write HTML and CSS, and even JavaScript or other programming languages. So first, let's download Visual Studio Code. So if we just go to the main website, and download for Mac or whatever operating system you have, I won't show the whole installation process. Because well, I already have installed and it's different for each operating system. So let's go right over to Visual Studio Code. Okay, we have Visual Studio Code. And now we can create the website. So this is what it looks like when you first start up Visual Studio Code, we could just click New File and create the new HTML file and the new CSS file. But we're going to do something a little different. If you're just starting out, it can sometimes be helpful to start with a website template. This just means starter code for your website. that you can customize for your needs. This can be an excellent way to learn, you can see HTML and CSS that someone else has created. And then you can start to understand how it works together. There are a bunch of sites offering templates. One of them is templated.co. There are a bunch of templates to choose from, I'm going to choose this one called full motion because it includes a responsive video gallery. And my page is supposed to help people watch video courses I've created. So I'll just click download here. But you can download one of the other ones if one of the other ones meets your needs a little better. So after it's downloaded and unzipped, I can just go to Visual Studio code, click Open folder, and then I'll navigate to the folder and click Open. And now we can see everything on the side here. This is the file browser, I can just close this welcome screen. I don't need that anymore. I'm going to open up the index.html. Now when you're creating a website, the main file is almost always called index.html. So that's the thing that you're going to want to edit, we're going to be modifying the HTML file and CSS file, you don't need to know everything to modify a template. But you should know the basics of how HTML and CSS are structured. I'm just going to give you a very brief overview. If you want to learn more about HTML and CSS, check the links in the description. So you can see this is an example of a paragraph tag. That's what the P stands for paragraph. And every HTML tag is going to have an opening tag, which is this section right here, and a closing tag, which is this final section right here. And in between the tags in between the the opening paragraph tag, and the closing paragraph tag is where text would normally be the text in here would be the paragraph. And this opening tag, and then closing tag designates the beginning of the paragraph in the ending of the paragraph. And you can see in the opening tag, there's an ID, this ID is an attribute, and the attribute of ID is set to my ID. Now the ID is often used to identify a certain tag or a certain section of your website for use in the CSS and the JavaScript. So inside an opening tag, there can be all sorts of different attributes. And you'll see some other examples when I go to the other code. So let's look at this diagram. This shows how an HTML page is structured, you can see it there's branching sections almost like a tree, it's a tree structure. So we have our overall document. And then we have our root element, which is the HTML element. So you'll have an HTML, an opening HTML tag and a closing HTML tag. And then everything will be inside that tag. So you'll have a head section, opening head tag and a closing head tag. And inside the head section, there'll be a title with some text. And then there'll be a body section with a opening body tag and a closing body tag. And then within the body, there's going to be the different components that are going to make up the body of the website, everything nests inside other elements, you'll see more of what I mean once we get to the code. Also, you're going to need to know about CSS. So CSS is used to style the HTML. So in this case, we have the body selector. So this first word is the selector. And this is going to style everything within the body HTML tag. And in this case, it's going to set the color to this hex value. So CSS is always going to have a selector, the most common things to select are tags like a body tag, or an ID, or a class, you can add a specific class, any HTML tag, and then you can style any HTML section that has that class. I'll show you some examples when we get to the actual code. So let's go to the code. So every HTML file is going to start with this. This is just saying that this is an HTML file. So here you can see the HTML tag. And at the very end, we have the closing HTML tag. And you can see there's a line here that connects them, everything is indented. So within this HTML tag, there is a head section, you can see the opening head tag and the closing head tag. And within the head section, we have a title section. And we have these metas. And then we have a link here. So you can see that within the heading of the page, the main thing we have is the title. Right now it's called full motion. So let's change that. I'm going to change that to courses from Bo Carnes. So this title will show up at the very top of the browser window, often in the tabs. If you have open up to a specific tab, that's where this title will show up. So we have these meta tags, which I'm just going to skip over for now, because they're not super important to what I'm talking about now. But this next line is important. This is how the HTML file is linked to the CSS file. So you can see that this is href. The reference of the CSS file is this is this thing here, assets slash CSS slash main dot CSS. So let's go over to this in the file browser, under assets, CSS, and then main.css. That's this file right here. So this line is connecting our HTML file to the CSS file. Now let's look at this next section, this body section. Oh, yeah, you can see some of this is grayed out. That's because this is a comment. So comments can be used to put something in your HTML file that's not going to appear on your final page, or it's not going to be read by the browser. So this section, this whole next section, you can see the body tag starts here and goes all the way down to here. The rest of the page is basically the body, or what's going to be shown in the browser when someone goes to your website, it starts with this top section. And this top section has an ID of banner. And this it says data data dash video equals images slash banner, these things can be both reference from the CSS and from the JavaScript. And it's going to use JavaScript to play a video in the top banner. Actually, let's look at that right now. Let's go over to the website. This is what the website looks like. You can see it has the title of the page here. This is not the same title that we just changed the name of, we're going to change that in a second. You can see this video plays in the background. And if you scroll down, well, you don't even need to scroll down. If you click this button, it scrolls down automatically. And you can see these different boxes here. And if we click Watch, it will open up and it will have a YouTube video. So we're going to update this so it goes to my YouTube videos. If we just scroll down, we can see the rest of what the page started out as. If you look at this text, it's not English, this is Latin, it's common to use Latin text or lorem ipsum text as placeholder text on templates and any websites where you don't know what the text is going to be yet. But we'll be updating that as we update the template. So let's go back over here. One very common tag in HTML is a div tag. And that just means a divider or some special section that you're going to style in a specific way. with the CSS, you can see this has a class of inner and the CSS is going to be used to style anything that has a class of inner in a special way. So let's go into this header section right here. I'm going to change this to courses from bow Carnes. And this time, if I save this, and I go back to the page, I'm going to refresh and I'll go to the top and you can see courses from bow Carnes. So this is what I'm talking about. you can change a template. And it's a lot easier than just writing everything from scratch. Let's go back to our code. You can see this is an h1 tag, that means heading one, or the top heading. There's also h2, h3, h4, there's just different levels of heading. And here's a paragraph tag. I'll close this so we can see more of it here. And so this is the opening paragraph tag. If we go over, we can see the closing paragraph tag. And I'm going to update this whole paragraph between the opening tag and the ending tag with an all new paragraph, I'm just going to paste it in. And so now it refers to what this new page is going to be about. So I'll just save that and go back to the page and refresh. And you can see it now has the new paragraph here. Okay, let's go back to the code, we can change this learn more, or we can change it to something else. Now you can see this is an a tag. or an anchor tag, that's a link. Now you can use it to link to another page, or you can link to another part of the same page. So here, you could add a link to another page, like I could put free code camp.org here. And then when you clicked on it, it would open up free code camp.org. But since it says this hash sign or pound sign main, it's going to make it so it goes directly to the main section here, which is right here. it's going to a dividing section or a div that has an ID of main. So that's another way that IDs are used. So you can actually go to specific sections on your page. So when you click learn more, it's going to scroll down to this section here, you can see that we have this div, which divides this section of the page as the main section that we scroll to. And then we have another class called inner So this is probably something that's going to be used in the CSS file to style a specific section of the page. And then we have another section called thumbnails. So one thing that's kind of nice with Visual Studio code, and with any code editor is these lines that come under a tag, this will show where the ending tag is. So this is the beginning tag, if you click on it, you can see this line is a little lighter. So if we go all the way down, it goes to here. So here's the end of the tag here. And so that's going to show this whole section, this whole, this whole thumbnail section. So the thumbnail section starts here, and it goes to here where the closing div tag is. So in this thumbnail section, you can see there's a bunch of box sections. So this is one whole box section right here. But there's another box section here. And then there's another box section here. So there's a box for each thumbnail that's right in the page here. So here, this is what we're going to change. One thing you can see here is that it's getting it's linking to a YouTube video right here. So the a href, this is the anchor tag or what you're linking to. And the link is surrounding an image. So when it says IMG, that's an image, SRC is source and the source this section right here, the images slash pic 01.jpg. So if we actually go over to here in the file browser, we should be able to find that Oh, here it is, the pic 01. So you can see that that's the same thing that you see right here. So that's what we're going to have to recreate with my own videos. you can also change the title. So we see the h3. Now h1 is a main heading, h3 is like a level three heading. So you can level one heading level two heading level three heading, and we have a paragraph here. So let's update this with one of my videos. So I'm just gonna go and grab it from YouTube here. So just go to youtube.com. And I'll actually go right to youtube.com slash free code camp. I'm just going to get this JavaScript one, this is the my most popular video that I've created. So I'll do a copy link address. And then I can go back over here. And we'll paste this in here. So now I just had to delete the time at the end. And now we are going to get the image here. Now, I could find the image and then put it right into this directory here, and then then link that image. But I'm going to try a different method. there's actually a URL, a direct URL to each YouTube thumbnail. So I can put an actual file name here, or I can put a URL. So I'm going to put a URL URL here. Now it says there's actually a section to update with the video ID. So I just have to get the video ID from right here, I'm going to copy it. And then I'm going to go over here, and I will paste it. Now if I save this, And then I go back to my website. Now I'm gonna refresh it. Okay, so now we have the JavaScript in three hours here. And if I click here, I was expecting the video to pop up. So let's go back and troubleshoot because that's just a little black square. Okay, I noticed that these ones have the short URL. And then I use the long URL here. So I'm just going to copy this little section, and then put into here. So we're using the short YouTube URL instead the long URL. So let me save that. And I'm going to refresh. Okay, and now the YouTube video pops up if I play. Yep, it works. So now I'm going to go back here. And I have to update the rest of the stuff. So this URL, I'm going to update for the button. So this first link is just the image. And now there's the button here. So we need the link for the button. And I can update the title JavaScript, full JavaScript course. And then here, we can update this text. Learn how to program in JavaScript. Okay, I say that go back over. Looks good. Okay, now I'm going to do the same thing for some of these other ones. Okay, I just finished updating all these other boxes. with other videos I've created. Here's the mernstack course, I got data structures and algorithms and JavaScript CSS full course, basically, I just went through and updated the URL here, and then copied and use the same URL here. And then over here, I just upload it, update the image link. And then I just added this heading and the paragraph here. So that's one great thing about using a template. that it just makes things go a lot quicker. Instead of writing everything from scratch, you can just update things to meet your needs. So if we just go over to the page, you can see now it says courses from both Carnes both create many popular programming courses. Now you can access this top courses all in one place, click this goes down. And then if you click on any of these courses, let's say the mernstack one, click Watch. you can watch it right in the browser right here. Or you can just click this picture here to open the same thing. So that's pretty cool. Let's see if there's anything else we want to change. So we have stuff down here. And I'll go back over to the code. So we have the footer here. So that's what you see right here, this whole section is the footer section. So Not only is there a tag called footer, and then we have the closing tag down here, we also have the idea footer. So A lot of things in HTML, just dividing up things in sections. So we have the footer section, and then a div can basically be any section. So we're dividing up into this intersection, which we can style with the CSS. So when you have a template, you can either update the text to be what you want. Or if you don't want that section, you just can delete it. I'm just going to delete these two sections. So if I go over here, and refresh, Now it's just going to have the social media links at the end. Again, I don't want all of the social media links. You can see the social media links are in a list. So ul means unordered list, and has the class of icons. And so we have four list elements Li are the list elements in the list, you can see there's the opening tag, and then at the end, there's going to be the closing tag here. And same with the URL and the closing URL list. and you see these are just a link that you click on. And you can see the class of the fa dash Twitter fa dash Facebook fa dash Instagram. This class here is how that is where the image is coming from. This is something fa stands for font awesome. And it's something that you can put into your website. So you can use different classes to make a specific image pop up there. And I'll show you when I go to talk about the CSS file. how this is how this works, how we get fun awesome into our website. So it works. So I'm going to, I only want to have the Twitter and the email. So I'm going to delete these two lines, the Facebook and the Instagram one. And then I have to make these links work right now. See the href. This is where the URL that we're linking to. And if it's just this pound sign here, that means it's just a links to itself. So you click the link, it does nothing, but I wanted to do something. So I'm just going to put HD best colon slash slash twitter.com slash bow Carnes. And then I'll go into this one and do mail to bow at free code camp.org. So you can either put a full URL to go to or if you put the word mail to colon and you put an email address, it will open up if you click that link, it will open up sending an email to that person. So let's save it and go back over to the page and refresh. So if I click the Twitter icon, yeah, it opens up my Twitter. And then if I click the Mail icon, it will open up sending a new email to me. Okay, let's make some more changes by updating the CSS file. But first, I'll talk about these scripts. So most of these are common JavaScript libraries. which is just JavaScript code that someone else wrote that you can use on your page to add extra functionality. So we have jQuery, jQuery, that scroll a jQuery, that pop trucks, and that's going to add different functionality on the page. And then the main the code, the custom code is toward the end, we have the util.js and the main.js. And we can look at that right in the page here. So here's our utility one. And here's our main one. And we're not going to talk a lot about the JavaScript in this video. But basically, the JavaScript helps make it work where like when you click this, it scrolls down like that. That's JavaScript. When you click this, it pops up, it fades in the background and pops up that window. That's JavaScript doing that. So JavaScript can just add some extra functionality to your page. And that's what's happening here. Okay, let's go to the CSS file, the main CSS file. So you can import just like how in your HTML file, you can import CS the CSS you're going to use in your HTML, you can import other CSS to use in your CSS file. So we can see import font awesome dot min dot CSS. Now it's getting that right from you can see right here in our assets. font awesome. men.css. So that's what this is. And it's importing that CSS. So we can use that also. And then it's also going to import and then it's this URL. So here it's importing a file. But here it's actually just importing a URL. So this URL that's being imported, you can see it says fonts, it says Google, this is Google fonts, Google has made available a bunch of different fonts that people can easily use on their websites. by importing the font through Google fonts. And you can see it's the font source stands pro at the weight 300 400. And then we have this passion one font at the weight 400. Now I want to show you something here where it says, awesome dot min dot CSS. If you looked when I opened the font awesome file, this CSS file looks very different than the other main dot CSS file we were looking at, because this has been minimized. Basically, it goes through to a automated process. when you minimize a file goes through an automated thought process to make it as small as possible. And so it takes up less space when someone's trying to download that file. It's not as easy to read, but easier for users to download that file. And it still works just like any other CSS file. So if we go, if we look at this basic CSS, we're just going to like briefly cover this, but it starts with a reset. So this is something that people often will include in their CSS to make sure all different browsers look kind of similar. So you know, there's a lot of different browsers that people can be using to access your website, there are certain CSS properties and code you can put in, that's going to make all browsers look very similar. And it's also going to just make things look a little nicer than the default CSS. So that's what we have. this reset. So it's just going to always apply this reset. And then we're going to the basic, this is the stuff that's being added specifically for this website. So now we're to the other sections. And these other sections are stuff that's specifically for this website to to make it look special to make it look how we want to look. So you can see the basic way that CSS works. that well, let's look at let's look at this as an example. So this is the selector, this the property in this the value. So we're selecting the body tag, we're changing the color to this white color. So you can see RGBA, that's just one way to specify a white, that's point 75 opacity. And the font family is going to be source sans pro, which remember was imported from Google fonts. And if that's not available, it will just use a sans serif font, the font size is going to be 14 points font ways and be 300 points and the line height is 1.65. Now with CSS, how it works is, whatever's the most specific is what style applies to the element. So for instance, we see the body here, if we go over to the HTML, we can see the body is here. So almost everything is inside. this body. But if we styled, say, the inner class, and we had styles that specifically references inner class, that's going to override anything that applies to the body. So a lot of these styles here are never going to be used if there's something more specific. So let's scroll down to some of the other things that are being styled. Okay. let's look at this, we have h1 h2 h3 h4 h5 h6. These are the headings. So the color, this is another white color, there's a lot of ways to specify the color. And this is one of them, font weight, line height, and the margin. So if we change this color to something different, we'll probably be able to see it right on our page. So instead of putting a hex value or something, I'm just going to type in the word green. That's another way you can specify colors in CSS. Now go right over here. If I refresh, we should see something turned to green. And you can see these words have not now all turned to green. So let's go back and make this white again. So another thing I want to show you is this whole section right here, where it says media and screen max with 1680 pixels, median screen max with 1280 pixels, and then you see 90 pixels, 736 pixels, 480 pixels, this is how to make your web page responsive. So the it's so this CSS is going to specify a different style, depending on how wide the screen is. Okay, to see how these media queries work. Let's look at this other code. This is for the thumbnails in the box. So in the CSS, we're selecting the thumbnails class. And then we're selecting the box class that's inside the thumbnails class. So if we go back over here, we have the thumbnails class classical thumbnails. And then we have the box class that's inside the thumbnails class. So this is going to impact everything that's inside the box class, which is this code right here. So this code is going to change. And you can see it's going to change depending on the width of the screen, it's going to either be the width of 30%, 45%, or 100%. So if we go back over to our page, and then if I change the size, you can see these boxes that show the thumbnails, they're changing depending on how wide my browser is. So if it's really narrow, it just shows one the column, then it goes up to two, then it goes up to three. And that's all from these media queries that are changing them. this is changing the width depending on the size of the screen. Okay, well, let's make this bigger again. And let's look at the things we want to change. So when you're changing something based on a template, you want to just try to find something you want to change and then try to figure out how to change it. So I want to change this dark color around here, I want this to be a different color. So I have to figure out which CSS is is selecting this dark element around here. So one way you can do it is just through trial and error, trying to figure out what you need to change to change this background color. So if I go back to my code, I'm going to just search I do did command F or Ctrl F. And I'm going to search for background. And I can see that this looks very similar to that color. So I'm gonna try changing this to another one. So with this, I can type in the name of a color or a hex code. Or I can just use this color picker here that's in Visual Studio code. So I want to make more of a greener color. And now I'm going to save this, I'll go back to my page, I'll refresh. And now it worked. So I chose the right thing. Hmm, you know, I think I want that maybe to be a little more of a dark green. Well, that's easy, I can go back over here. And then I can make this a little darker, and save it. And then I refresh. Okay, well, that looks nice. Now, since this is green, I kind of want this text or maybe some green to appear right up here somewhere. Or how about this, maybe this circle, let's see if I can get this circle to be green. So one way to try to figure out what you need to change is to right click on something and then go to inspect element. So this is bringing up the element in the HTML just in the inspector on the browser. And so it looks like this could be the right one. And I can actually test it by changing the CSS right in here. So I'm actually going to try changing this right here to instead of white, let's see if I change the screen if that will change anything. And did so you can see right on the pages, I change it in the inspector, it changes it on here. So I so now I know that I'm looking for something that styling this banner more, see how it says banner more, this is the selector that I'm looking for my CSS. So if I go back over to here, and I just had just copied it over in my browser, I'm going to find in the paste banner more. So now I can change this border if I want to change that circle. Well, how about this, I'm going to make this bigger and I'm going to change this to a green color. So we'll kind of match the other green that I have going. Now, since this is just an example, I'm not going to be like super exact, but I could try to make it the exact same green, or I can look at a color wheel to try to figure out what's the complementary color to the different colors. But for now, I'll just choose that green, and I'll go back over the refresh. Now circle? Well, you know, maybe I will try to get that exact green because I wonder if it matched how that would look. So let me go back over here. I'm gonna go back up to my body, where I did my initial green. Here we go. And now I will do my search again to come back down to here. And I'm going to just add this new color, and then go back over very fresh. Okay, nice. One thing is say when you hover over it, it gets white, I want it to be a maybe a lighter green. So let me go back over here. And let me try to find the hover section. So here, you can see, well, let me so it says banner more, and we change it to the border to be green. Well, here's banner more hover. That's what the style is going to be when someone's hovering their mouse over it. Now, it normally will just keep all the same style as the original one, but it will add these changes. So I'm going to change this border. Well, I want I still want to be a two pixel when you're hovering over. And now I want to change the color, I'm going to change this to a lighter green, and maybe add some more blue into it. And let's see what that looks like. I'll save that, go back over. And that didn't seem to Well, I guess it did change it. Oh, yeah. Now it gets lighter green. That's kind of nice. Yeah, I like that. So now when I click this, it goes down. So we can do the same thing by changing different fonts, different colors, just trying to figure out which CSS needs to change to change something. Okay, the final thing I want to do is change the text color here. So I'm going to go to inspect element. And we can see, oh, it's color white, banner h1. Now let's just make sure this is the right one. So if I change this, if I just type in blue, yeah, it changes to blue. So let's change this to a green color, I'm going to just copy this here. the CSS selector. And then I'll just search for the CSS selector here. And here it is. So now instead of being white, I'm going to change this to a green color again. But this is going to be a lighter green than before. So let's see what that looks like. Okay, you know what I want it to be the exact color that this circle becomes when you hover over it. To get that color, I can go back into the CSS file, or I can just inspect this element again. And let's see, I can turn on the hover state by clicking the hover here. Now I can get the color from right here. And it's just going to copy this color here. and I'll go back over here. Okay, so now I'm just going to paste in the color here. And I'll save that I'll go back over. I'll refresh. Okay, that's gonna be it for now. I know this design could be a little better. But I'm going to count this good for now. So I'm gonna get on to the next part of this course, which is purchasing a domain name. So let me make sure everything's saved. Yep, all my files are saved, because I'm going to have to copy these files over. Actually, let me quickly delete these because I'm not gonna need any of these pictures. So I'm not using those same pictures. But we'll I'll just keep everything else here. And we're going to be copying these files over to our hosting provider once we get that. But right now, we're going to get a domain name. So now you have the files for your website, or you're going to install WordPress. Now I'll show you how to get a custom domain. This is what people type into the address bar on their web browser to access your website. Some examples are youtube.com, free code camp.org, or CES tech. These are all custom domains. The end of the website name such as.com.org or.net is called the top level domain. Or sometimes people just call it the domain ending. While.com is by far the most popular domain ending. There are actually hundreds of other endings. Take a look at all of these on the screen right now. One ending that is increasingly popular for people in the tech industry is dot tech. And this video was made possible through a grant by the company who runs the dot tech domain. When you are deciding what you want your domain to be. You also have to decide what domain. ending you want. Here are a few reasons you may want to consider less common domain endings. More availability. The less common endings have not been around as long, so there are way more of them still available. It's very hard to find a.com name that has not already been taken. Unique. These newer domain endings may help you stand out as being unique, which can also help create more of a lasting impression. SEO. Using a new domain ending won't hurt your search presence or SEO. It's worth noting that in the eyes of Google, and other search engines, all TLDs, or these domain endings are equal. So if you get a highly searched for name in your URL, it can be helpful for SEO. There are a bunch of places where you can buy domain name, and they all work almost exactly the same. Here's some options. GoDaddy.com, domains.google, namecheap.com, get.tech. I'm going to demonstrate how to purchase a domain name on get.tech. tech, since we're getting a dot tech domain. But just know the process is similar no matter where you buy your domain name. Here, it makes it really easy. You just type in the domain you want. So I'm going to try bow dot tech. Okay, bow dot tech is unavailable. Now most likely the first domain you try is going to be unavailable. So it gives some other examples. But the other examples are almost never what you're looking for. So it's good to have the other options in mind. Since this website is all about teaching tech, I'm going to try bowteaches.tech. Okay, it's available. And I can buy for one year. So I'll choose that. I'm not going to show you the whole purchase process. But I do want to point out that this privacy protection, it says recommended. And I would also recommend this. If you don't have privacy protection on your domain name. then the records of your name and address will be out there for anybody to see your name, your address, your email address. So if you don't get privacy protection, you're going to start getting spam because there's companies out there that are constantly checking for all new domains registered to see if there's any real addresses or email addresses. And then they're going to start sending you stuff to advertise because they think you'll be interested in buying things for your new domain. So definitely get privacy protection. Okay. I'm just going to place this order. Now we're finished buying the domain. And to edit the domain, we'll just go into manage orders, and then find the order that I did for bow teaches that tech. And this is our control panel, I'll get that a little bigger. And then we can update things in this control panel to make our website work. But before we can update anything in this control panel, we have to get hosting. So now that you have your domain name, you have to store your file somewhere. When you go to any website on the internet, your browser has to download the files for that website from a physical location somewhere else in the world. A company that stores website files so that they are always available when someone goes to the URL is called a hosting provider. There are many hosting providers out there that will host files for your website. Some places will even host a website for free. In this section, I'll mainly be talking about hosting a static website, or WordPress site. If you have a dynamic web application that has to run server side code before sending web pages to the client, then the setup will be a little more complicated than I what I described here. First, I'll talk about how to get things set up on most paid hosting providers. And then I'll show you how you can host your website for free on GitHub pages. Here are some of the common hosting providers for web pages, Bluehost, Hostgator, Hostinger, GoDaddy, Dreamhost. Almost all hosting providers have something in common, which is this users manage the hosting service through a web application called cPanel, or something very similar to cPanel. So if you learn the basics of cPanel, then it will be simple to use any hosting provider. So all the hosting providers are very similar. So matter which one you sign up for, the steps should be basically the same. First of all, I would recommend just picking the cheapest possible hosting plan, whatever hosting provider you use, just pick the cheapest plan, you can always upgrade later if you need to. Often the cheapest plan will work. And you can always upgrade later if you somehow need more space or need more bandwidth. Make sure you choose that you already own this domain because you we've already purchased the domain. And the rest of this is pretty straightforward. Okay, I got my hosting. And now I'm just going to launch the cPanel. The exact way to get into cPanel could be different depending on your hosting provider. But it should all be pretty similar. And again, your hosting provider may not have cPanel, but it will definitely have something similar. There's no single look for the cPanel dashboard, because there are many themes and styles that hosts can use. But the functionality is similar. So one of the things you're most likely going to be using is the file manager. The two main ways of getting files into your hosting provider is the file manager, or through an FTP account. So let's look at the file manager. So the files we see here are the files that the hosting provider just puts there by default, we're going to go to the public HTML section. And this is where we are going to add the files. So that's one thing you're going to have to look into when you are trying to upload your files to your hosting provider, you're going to have to make sure you upload them to the right directory, it may not be the root directory, it's probably going to be something like this, the public HTML directory. And so those are the files that will appear when people go to your website. I'm going to delete everything in here because I don't actually need anything in this directory. Now we'll go to upload. And I cannot upload directories. But there is a trick to be able to upload everything at once, which is to create a zip file. So let me select all my files. And then I'll just go to compress. And it could be different on Windows. But it's gonna be pretty similar how you're gonna be able to find something to make them into a zip file. So I'm just going to upload the zip file. So this includes all the assets and all the images and even the background video. So could take a little bit to upload. Okay, I'm going to go back here. And I'm going to extract. And this is just an extra directory that I can delete. Okay, I have my website uploaded to the hosting provider. we still have to connect the hosting provider to the domain name. And we'll do that in a little bit. For now, I'm just going to close this. And let's look at some of the other things you can do with cPanel. So we could have uploaded the files through FTP. Here we can create an FTP account. If you have an FTP client like FileZilla, you can FTP into this and you can easily upload files. Another thing we can do is create a sub domain. Let's say we create one called blog. So now it's going to be blog dot bow teaches that tech, the way I get files into that sub domain is, it should show up right in my file manager. So if I go back into the file manager, now you can see there's a new folder called blog dot bow teaches that tech. anything I put into this folder will now appear at the sub domain once I connect my hosting to the domain name. So the two other things I want to show you are the email accounts and the WordPress installer. There are a bunch of other things on here that you can mess around and continue learning. But I'm just going to cover these other two for now. So right here, you can create an email account, we can also create an email account on the tech admin page. which I'll show you that in a second. Again, later, let's say we want bow at bow teaches that tech, and we create a password, and then create account. Okay, I can set up the mail client. Now this is just going to give you different ways to set up the client, depending on which method you want to use. I'm not going to go through every one. But depending on what you want to do, you just set it up differently. Okay, the final thing is the WordPress installer. So I was saying it's very simple to install WordPress once you have your hosting, just click on WordPress installer, and then click on Install now. And then that's pretty much it. Once you install WordPress, you can now use WordPress right on your site. And you can watch any WordPress tutorial to learn how to use WordPress. I'm not going to install WordPress right now. because I'm going to use the other files that I already uploaded onto there. So what I'm going to do now is just go back to the dashboard. And now I'm going to connect the hosting provider to the domain name. And to do that, we're going to scroll down until you see the name servers. Now no matter what company you use to create your domain name, and no matter what hosting provider you use, you're almost always going to connect these two together with these name servers. So I'm going to copy this name server, and then go back over to the control panel for the dot tech domain. And then you can see there's a name servers, managed name servers that use this domain name. So I'll click that. And then I'm just going to paste in the first name server. And then I'll get the second name server. And then I'll paste in the second name server, we'll put it here. And you don't really need to have every name server filled in. So I'm just going to go through and delete these other two. and then update name servers. Now, everything really should be set up for my website to work. Sometimes it can take up to 24 hours for everything to update. So you may have to wait up to 24 hours before you can actually see your website live. Okay, I waited some time. And the name servers have been able to propagate throughout the internet. And now the website works. So I go to bow teaches that tech and it loads. So you can see this and if I click here, it should open up. Yep, it opens up a video to watch here. Okay, everything's working. I can now access my website at a custom domain. Once you know how it's actually pretty simple to set up a website to host for free at GitHub pages. The first step is to create a GitHub account and log into your account. And then you just need to create a new repository, the name of the repository is very important. So for the name of the repository, you have to type in your username, your GitHub account name, and then you just type in dot github.io, bow fcc.github.io, this is going to create a repository that will be a special type of repository that will be able to host our website on GitHub pages. Okay, now I'm just going to create a repository. Okay, now that we create the repository, we can you can either upload your files using the command line or you can do it right through the web interface. So just click upload an existing file. And I'm just going to drag and drop the files. So let me grab these files here. And just bring it over here. Now it's just going to upload all the files for our website. Okay, all the files are uploaded. And I'll just do commit changes. After the files are done processing, I can go to this URL, just copy it right here. And I'll open up a new tab, I'll paste in the URL. And that did not work. Okay, it takes a few minutes for the updates to show up. So if we just wait a little bit and then try refreshing, it should work. It can take up to 20 minutes for the changes you create. on GitHub to show up on the GitHub pages. But it's now loading, you can see in the address bar, bo fcc dot github.io. And we can see our page. Now we just need to make this show up at Bo teaches tech. Before I make this show up at our custom URL, let me show you how easy it is to make changes to the page on GitHub. So you can always change it on your local computer. and then upload it again or use the GitHub interface. Or you can change it right on this GitHub interface, you can change the HTML right on here. So in order to edit this, I'm going to click the pencil icon for edit this file. And then I'm just going to update the title here. Instead of courses from bocarnes. I'm going to call this programming courses from bocarnes. And then I can just scroll down to the bottom. And you can put a commit mess, you can put a commit message, but I'll just leave this as the default for now. And just click commit changes. Now again, it's gonna take possibly up to 15 minutes to show up on here. But while we're waiting, I will show you how to make this work with your custom URL. And then if we do this, right, we'll be able to know that we're not getting it from our hosting provider, because this will change. So here's bow teaches that tech currently. And you can see it says courses from bow Carnes. And this is coming right from our hosting provider that we set up before. But now we're switching it to use GitHub. pages for the hosting provider. So after we update this, this will say programming courses from Bocarnes to reflect the change that was just made on GitHub. So the first step is to go back into GitHub. And I'm going to click on Settings. If I scroll all the way toward the bottom of the settings, I can put in a custom domain. Custom domains allow you to serve your site from a domain other than both FCC.github.io. So I'll put bow teaches that tech, and then I'll save it. So now that we updated the GitHub settings, I'm going to have to go back to our domain dashboard. So this is at the dot tech control panel or dashboard. And to make this work with GitHub pages, I'm going to have to go to DNS management, no matter what company you purchase your domain from, there's gonna be some way to update the DNS settings. your domain. So I'm gonna go to manage DNS here. And I'm going to update some things. The first thing I'm going to update is the CNAME record. So the CNAME is like an alias, or it's a way to forward to a different domain. So I'm going to add a CNAME record. And for the hostname, I'll put www. So when you go to www dot bow teaches dot tech, we're going to forward to bow fcc.github.io. And then I'll just add this record. So So now www dot bow dot teaches that tech will go there. I also want to set it up. So just bow teaches that tech without the www will also go to the GitHub pages page. So to make that work, I'm going to add an A record. So I will put nothing here. And then for this destination address, I'm going to put an IP address that comes right from GitHub. So it's going to be 185.199.108.153. And then I can click Add record. Okay, that should be all set. So I'm going to close this for now. So before I updated the name servers to work with the hosting provider. But now that I'm using GitHub pages, and I updated the DNS settings, I don't need the name servers I use previously. So to make these new DNS settings work, I'm going to have to default the name servers back to what they were. And it says right here required to use our DNS management service with your domain name. So it says we need I need to go back to the default name servers. So I copy this I'll go up to the top here. And then I'm going to change this to Venus because that was the second one. And as long as you have two that should work. So I'm gonna update the name servers. And now anytime you update the name servers, you could have to wait up to 24 hours. So I'm gonna have to wait and then I will check the website to see if it updates to use the page GitHub pages instead of the hosting provider we had before. So it's been over 24 hours and and check this out. I'm at bow teaches that tech and it says programming courses from bow Carnes. So I'm now loading the page right from GitHub pages. And now whenever I want to update the page, I just update the files on the GitHub repo. And then within 15 minutes or so the changes will reflect right on the actual domain right on the page bow teaches that tech So now you know how to set up a website with GitHub pages. So now you've learned how to create a simple website, get a custom domain and host a website through various methods. Thanks for watching.

Let's get started. You may already have files for your website that you want to put onto the internet. In that case, skip to this time shown on the screen right now, or just go to the next section in the progress bar of this video.

In this section, I'm going to go over how to create a website. I assume you already know what your website is going to be about. Two common ways to create a website are to create it using HTML, CSS and JavaScript. Or you can use a content management system like WordPress. WordPress allows you to create a website without knowing how to code.

The simplest way to create a WordPress website is to get your hosting first. So in the section of this video about hosting, I'll show you how to install WordPress. Right now though, I'll show you how to create a site using HTML, CSS and JavaScript. For this example, I'm going to create a landing page for different programming courses I've developed.

This will be a simple site based on a template just to get you started. If you want to learn how to make more complex sites, check out the playlist linked to in the description. HTML, CSS and JavaScript are all just text stored in text files.

HTML describes the structure of your website. And CSS describes the style and how it looks. JavaScript adds additional interactivity and functionality.

While you can create these files in any text editor, it's common to use a source code editor, such as Visual Studio Code. This makes it easier to write HTML and CSS, and even JavaScript or other programming languages. So first, let's download Visual Studio Code.

So if we just go to the main website, and download for Mac or whatever operating system you have, I won't show the whole installation process. Because well, I already have installed and it's different for each operating system. So let's go right over to Visual Studio Code.

Okay, we have Visual Studio Code. And now we can create the website. So this is what it looks like when you first start up Visual Studio Code, we could just click New File and create the new HTML file and the new CSS file.

But we're going to do something a little different. If you're just starting out, it can sometimes be helpful to start with a website template. This just means starter code for your website.

that you can customize for your needs. This can be an excellent way to learn, you can see HTML and CSS that someone else has created. And then you can start to understand how it works together.

There are a bunch of sites offering templates. One of them is templated.co. There are a bunch of templates to choose from, I'm going to choose this one called full motion because it includes a responsive video gallery.

And my page is supposed to help people watch video courses I've created. So I'll just click download here. But you can download one of the other ones if one of the other ones meets your needs a little better.

So after it's downloaded and unzipped, I can just go to Visual Studio code, click Open folder, and then I'll navigate to the folder and click Open. And now we can see everything on the side here. This is the file browser, I can just close this welcome screen.

I don't need that anymore. I'm going to open up the index.html. Now when you're creating a website, the main file is almost always called index.html.

So that's the thing that you're going to want to edit, we're going to be modifying the HTML file and CSS file, you don't need to know everything to modify a template. But you should know the basics of how HTML and CSS are structured. I'm just going to give you a very brief overview. If you want to learn more about HTML and CSS, check the links in the description.

So you can see this is an example of a paragraph tag. That's what the P stands for paragraph. And every HTML tag is going to have an opening tag, which is this section right here, and a closing tag, which is this final section right here. And in between the tags in between the the opening paragraph tag, and the closing paragraph tag is where text would normally be the text in here would be the paragraph. And this opening tag, and then closing tag designates the beginning of the paragraph in the ending of the paragraph.

And you can see in the opening tag, there's an ID, this ID is an attribute, and the attribute of ID is set to my ID. Now the ID is often used to identify a certain tag or a certain section of your website for use in the CSS and the JavaScript. So inside an opening tag, there can be all sorts of different attributes.

And you'll see some other examples when I go to the other code. So let's look at this diagram. This shows how an HTML page is structured, you can see it there's branching sections almost like a tree, it's a tree structure. So we have our overall document.

And then we have our root element, which is the HTML element. So you'll have an HTML, an opening HTML tag and a closing HTML tag. And then everything will be inside that tag. So you'll have a head section, opening head tag and a closing head tag.

And inside the head section, there'll be a title with some text. And then there'll be a body section with a opening body tag and a closing body tag. And then within the body, there's going to be the different components that are going to make up the body of the website, everything nests inside other elements, you'll see more of what I mean once we get to the code. Also, you're going to need to know about CSS.

So CSS is used to style the HTML. So in this case, we have the body selector. So this first word is the selector.

And this is going to style everything within the body HTML tag. And in this case, it's going to set the color to this hex value. So CSS is always going to have a selector, the most common things to select are tags like a body tag, or an ID, or a class, you can add a specific class, any HTML tag, and then you can style any HTML section that has that class. I'll show you some examples when we get to the actual code.

So let's go to the code. So every HTML file is going to start with this. This is just saying that this is an HTML file. So here you can see the HTML tag. And at the very end, we have the closing HTML tag.

And you can see there's a line here that connects them, everything is indented. So within this HTML tag, there is a head section, you can see the opening head tag and the closing head tag. And within the head section, we have a title section.

And we have these metas. And then we have a link here. So you can see that within the heading of the page, the main thing we have is the title.

Right now it's called full motion. So let's change that. I'm going to change that to courses from Bo Carnes. So this title will show up at the very top of the browser window, often in the tabs. If you have open up to a specific tab, that's where this title will show up.

So we have these meta tags, which I'm just going to skip over for now, because they're not super important to what I'm talking about now. But this next line is important. This is how the HTML file is linked to the CSS file. So you can see that this is href. The reference of the CSS file is this is this thing here, assets slash CSS slash main dot CSS.

So let's go over to this in the file browser, under assets, CSS, and then main.css. That's this file right here. So this line is connecting our HTML file to the CSS file.

Now let's look at this next section, this body section. Oh, yeah, you can see some of this is grayed out. That's because this is a comment.

So comments can be used to put something in your HTML file that's not going to appear on your final page, or it's not going to be read by the browser. So this section, this whole next section, you can see the body tag starts here and goes all the way down to here. The rest of the page is basically the body, or what's going to be shown in the browser when someone goes to your website, it starts with this top section. And this top section has an ID of banner.

And this it says data data dash video equals images slash banner, these things can be both reference from the CSS and from the JavaScript. And it's going to use JavaScript to play a video in the top banner. Actually, let's look at that right now. Let's go over to the website.

This is what the website looks like. You can see it has the title of the page here. This is not the same title that we just changed the name of, we're going to change that in a second. You can see this video plays in the background. And if you scroll down, well, you don't even need to scroll down.

If you click this button, it scrolls down automatically. And you can see these different boxes here. And if we click Watch, it will open up and it will have a YouTube video. So we're going to update this so it goes to my YouTube videos.

If we just scroll down, we can see the rest of what the page started out as. If you look at this text, it's not English, this is Latin, it's common to use Latin text or lorem ipsum text as placeholder text on templates and any websites where you don't know what the text is going to be yet. But we'll be updating that as we update the template.

So let's go back over here. One very common tag in HTML is a div tag. And that just means a divider or some special section that you're going to style in a specific way. with the CSS, you can see this has a class of inner and the CSS is going to be used to style anything that has a class of inner in a special way. So let's go into this header section right here.

I'm going to change this to courses from bow Carnes. And this time, if I save this, and I go back to the page, I'm going to refresh and I'll go to the top and you can see courses from bow Carnes. So this is what I'm talking about.

you can change a template. And it's a lot easier than just writing everything from scratch. Let's go back to our code. You can see this is an h1 tag, that means heading one, or the top heading.

There's also h2, h3, h4, there's just different levels of heading. And here's a paragraph tag. I'll close this so we can see more of it here. And so this is the opening paragraph tag. If we go over, we can see the closing paragraph tag.

And I'm going to update this whole paragraph between the opening tag and the ending tag with an all new paragraph, I'm just going to paste it in. And so now it refers to what this new page is going to be about. So I'll just save that and go back to the page and refresh. And you can see it now has the new paragraph here.

Okay, let's go back to the code, we can change this learn more, or we can change it to something else. Now you can see this is an a tag. or an anchor tag, that's a link. Now you can use it to link to another page, or you can link to another part of the same page. So here, you could add a link to another page, like I could put free code camp.org here.

And then when you clicked on it, it would open up free code camp.org. But since it says this hash sign or pound sign main, it's going to make it so it goes directly to the main section here, which is right here. it's going to a dividing section or a div that has an ID of main.

So that's another way that IDs are used. So you can actually go to specific sections on your page. So when you click learn more, it's going to scroll down to this section here, you can see that we have this div, which divides this section of the page as the main section that we scroll to.

And then we have another class called inner So this is probably something that's going to be used in the CSS file to style a specific section of the page. And then we have another section called thumbnails. So one thing that's kind of nice with Visual Studio code, and with any code editor is these lines that come under a tag, this will show where the ending tag is.

So this is the beginning tag, if you click on it, you can see this line is a little lighter. So if we go all the way down, it goes to here. So here's the end of the tag here. And so that's going to show this whole section, this whole, this whole thumbnail section.

So the thumbnail section starts here, and it goes to here where the closing div tag is. So in this thumbnail section, you can see there's a bunch of box sections. So this is one whole box section right here. But there's another box section here.

And then there's another box section here. So there's a box for each thumbnail that's right in the page here. So here, this is what we're going to change.

One thing you can see here is that it's getting it's linking to a YouTube video right here. So the a href, this is the anchor tag or what you're linking to. And the link is surrounding an image.

So when it says IMG, that's an image, SRC is source and the source this section right here, the images slash pic 01.jpg. So if we actually go over to here in the file browser, we should be able to find that Oh, here it is, the pic 01. So you can see that that's the same thing that you see right here. So that's what we're going to have to recreate with my own videos.

you can also change the title. So we see the h3. Now h1 is a main heading, h3 is like a level three heading. So you can level one heading level two heading level three heading, and we have a paragraph here. So let's update this with one of my videos.

So I'm just gonna go and grab it from YouTube here. So just go to youtube.com. And I'll actually go right to youtube.com slash free code camp. I'm just going to get this JavaScript one, this is the my most popular video that I've created.

So I'll do a copy link address. And then I can go back over here. And we'll paste this in here.

So now I just had to delete the time at the end. And now we are going to get the image here. Now, I could find the image and then put it right into this directory here, and then then link that image. But I'm going to try a different method. there's actually a URL, a direct URL to each YouTube thumbnail.

So I can put an actual file name here, or I can put a URL. So I'm going to put a URL URL here. Now it says there's actually a section to update with the video ID.

So I just have to get the video ID from right here, I'm going to copy it. And then I'm going to go over here, and I will paste it. Now if I save this, And then I go back to my website.

Now I'm gonna refresh it. Okay, so now we have the JavaScript in three hours here. And if I click here, I was expecting the video to pop up. So let's go back and troubleshoot because that's just a little black square.

Okay, I noticed that these ones have the short URL. And then I use the long URL here. So I'm just going to copy this little section, and then put into here.

So we're using the short YouTube URL instead the long URL. So let me save that. And I'm going to refresh.

Okay, and now the YouTube video pops up if I play. Yep, it works. So now I'm going to go back here.

And I have to update the rest of the stuff. So this URL, I'm going to update for the button. So this first link is just the image.

And now there's the button here. So we need the link for the button. And I can update the title JavaScript, full JavaScript course.

And then here, we can update this text. Learn how to program in JavaScript. Okay, I say that go back over.

Looks good. Okay, now I'm going to do the same thing for some of these other ones. Okay, I just finished updating all these other boxes. with other videos I've created.

Here's the mernstack course, I got data structures and algorithms and JavaScript CSS full course, basically, I just went through and updated the URL here, and then copied and use the same URL here. And then over here, I just upload it, update the image link. And then I just added this heading and the paragraph here.

So that's one great thing about using a template. that it just makes things go a lot quicker. Instead of writing everything from scratch, you can just update things to meet your needs. So if we just go over to the page, you can see now it says courses from both Carnes both create many popular programming courses. Now you can access this top courses all in one place, click this goes down.

And then if you click on any of these courses, let's say the mernstack one, click Watch. you can watch it right in the browser right here. Or you can just click this picture here to open the same thing.

So that's pretty cool. Let's see if there's anything else we want to change. So we have stuff down here.

And I'll go back over to the code. So we have the footer here. So that's what you see right here, this whole section is the footer section. So Not only is there a tag called footer, and then we have the closing tag down here, we also have the idea footer.

So A lot of things in HTML, just dividing up things in sections. So we have the footer section, and then a div can basically be any section. So we're dividing up into this intersection, which we can style with the CSS. So when you have a template, you can either update the text to be what you want. Or if you don't want that section, you just can delete it.

I'm just going to delete these two sections. So if I go over here, and refresh, Now it's just going to have the social media links at the end. Again, I don't want all of the social media links. You can see the social media links are in a list. So ul means unordered list, and has the class of icons.

And so we have four list elements Li are the list elements in the list, you can see there's the opening tag, and then at the end, there's going to be the closing tag here. And same with the URL and the closing URL list. and you see these are just a link that you click on.

And you can see the class of the fa dash Twitter fa dash Facebook fa dash Instagram. This class here is how that is where the image is coming from. This is something fa stands for font awesome. And it's something that you can put into your website.

So you can use different classes to make a specific image pop up there. And I'll show you when I go to talk about the CSS file. how this is how this works, how we get fun awesome into our website. So it works. So I'm going to, I only want to have the Twitter and the email.

So I'm going to delete these two lines, the Facebook and the Instagram one. And then I have to make these links work right now. See the href. This is where the URL that we're linking to. And if it's just this pound sign here, that means it's just a links to itself.

So you click the link, it does nothing, but I wanted to do something. So I'm just going to put HD best colon slash slash twitter.com slash bow Carnes. And then I'll go into this one and do mail to bow at free code camp.org. So you can either put a full URL to go to or if you put the word mail to colon and you put an email address, it will open up if you click that link, it will open up sending an email to that person.

So let's save it and go back over to the page and refresh. So if I click the Twitter icon, yeah, it opens up my Twitter. And then if I click the Mail icon, it will open up sending a new email to me. Okay, let's make some more changes by updating the CSS file.

But first, I'll talk about these scripts. So most of these are common JavaScript libraries. which is just JavaScript code that someone else wrote that you can use on your page to add extra functionality.

So we have jQuery, jQuery, that scroll a jQuery, that pop trucks, and that's going to add different functionality on the page. And then the main the code, the custom code is toward the end, we have the util.js and the main.js. And we can look at that right in the page here. So here's our utility one.

And here's our main one. And we're not going to talk a lot about the JavaScript in this video. But basically, the JavaScript helps make it work where like when you click this, it scrolls down like that. That's JavaScript. When you click this, it pops up, it fades in the background and pops up that window.

That's JavaScript doing that. So JavaScript can just add some extra functionality to your page. And that's what's happening here.

Okay, let's go to the CSS file, the main CSS file. So you can import just like how in your HTML file, you can import CS the CSS you're going to use in your HTML, you can import other CSS to use in your CSS file. So we can see import font awesome dot min dot CSS.

Now it's getting that right from you can see right here in our assets. font awesome. men.css. So that's what this is.

And it's importing that CSS. So we can use that also. And then it's also going to import and then it's this URL. So here it's importing a file. But here it's actually just importing a URL.

So this URL that's being imported, you can see it says fonts, it says Google, this is Google fonts, Google has made available a bunch of different fonts that people can easily use on their websites. by importing the font through Google fonts. And you can see it's the font source stands pro at the weight 300 400. And then we have this passion one font at the weight 400. Now I want to show you something here where it says, awesome dot min dot CSS. If you looked when I opened the font awesome file, this CSS file looks very different than the other main dot CSS file we were looking at, because this has been minimized. Basically, it goes through to a automated process.

when you minimize a file goes through an automated thought process to make it as small as possible. And so it takes up less space when someone's trying to download that file. It's not as easy to read, but easier for users to download that file. And it still works just like any other CSS file.

So if we go, if we look at this basic CSS, we're just going to like briefly cover this, but it starts with a reset. So this is something that people often will include in their CSS to make sure all different browsers look kind of similar. So you know, there's a lot of different browsers that people can be using to access your website, there are certain CSS properties and code you can put in, that's going to make all browsers look very similar.

And it's also going to just make things look a little nicer than the default CSS. So that's what we have. this reset.

So it's just going to always apply this reset. And then we're going to the basic, this is the stuff that's being added specifically for this website. So now we're to the other sections. And these other sections are stuff that's specifically for this website to to make it look special to make it look how we want to look. So you can see the basic way that CSS works.

that well, let's look at let's look at this as an example. So this is the selector, this the property in this the value. So we're selecting the body tag, we're changing the color to this white color.

So you can see RGBA, that's just one way to specify a white, that's point 75 opacity. And the font family is going to be source sans pro, which remember was imported from Google fonts. And if that's not available, it will just use a sans serif font, the font size is going to be 14 points font ways and be 300 points and the line height is 1.65. Now with CSS, how it works is, whatever's the most specific is what style applies to the element.

So for instance, we see the body here, if we go over to the HTML, we can see the body is here. So almost everything is inside. this body.

But if we styled, say, the inner class, and we had styles that specifically references inner class, that's going to override anything that applies to the body. So a lot of these styles here are never going to be used if there's something more specific. So let's scroll down to some of the other things that are being styled.

Okay. let's look at this, we have h1 h2 h3 h4 h5 h6. These are the headings.

So the color, this is another white color, there's a lot of ways to specify the color. And this is one of them, font weight, line height, and the margin. So if we change this color to something different, we'll probably be able to see it right on our page.

So instead of putting a hex value or something, I'm just going to type in the word green. That's another way you can specify colors in CSS. Now go right over here. If I refresh, we should see something turned to green. And you can see these words have not now all turned to green.

So let's go back and make this white again. So another thing I want to show you is this whole section right here, where it says media and screen max with 1680 pixels, median screen max with 1280 pixels, and then you see 90 pixels, 736 pixels, 480 pixels, this is how to make your web page responsive. So the it's so this CSS is going to specify a different style, depending on how wide the screen is. Okay, to see how these media queries work. Let's look at this other code.

This is for the thumbnails in the box. So in the CSS, we're selecting the thumbnails class. And then we're selecting the box class that's inside the thumbnails class.

So if we go back over here, we have the thumbnails class classical thumbnails. And then we have the box class that's inside the thumbnails class. So this is going to impact everything that's inside the box class, which is this code right here.

So this code is going to change. And you can see it's going to change depending on the width of the screen, it's going to either be the width of 30%, 45%, or 100%. So if we go back over to our page, and then if I change the size, you can see these boxes that show the thumbnails, they're changing depending on how wide my browser is. So if it's really narrow, it just shows one the column, then it goes up to two, then it goes up to three. And that's all from these media queries that are changing them.

this is changing the width depending on the size of the screen. Okay, well, let's make this bigger again. And let's look at the things we want to change. So when you're changing something based on a template, you want to just try to find something you want to change and then try to figure out how to change it. So I want to change this dark color around here, I want this to be a different color.

So I have to figure out which CSS is is selecting this dark element around here. So one way you can do it is just through trial and error, trying to figure out what you need to change to change this background color. So if I go back to my code, I'm going to just search I do did command F or Ctrl F. And I'm going to search for background. And I can see that this looks very similar to that color.

So I'm gonna try changing this to another one. So with this, I can type in the name of a color or a hex code. Or I can just use this color picker here that's in Visual Studio code. So I want to make more of a greener color. And now I'm going to save this, I'll go back to my page, I'll refresh.

And now it worked. So I chose the right thing. Hmm, you know, I think I want that maybe to be a little more of a dark green. Well, that's easy, I can go back over here. And then I can make this a little darker, and save it.

And then I refresh. Okay, well, that looks nice. Now, since this is green, I kind of want this text or maybe some green to appear right up here somewhere.

Or how about this, maybe this circle, let's see if I can get this circle to be green. So one way to try to figure out what you need to change is to right click on something and then go to inspect element. So this is bringing up the element in the HTML just in the inspector on the browser.

And so it looks like this could be the right one. And I can actually test it by changing the CSS right in here. So I'm actually going to try changing this right here to instead of white, let's see if I change the screen if that will change anything.

And did so you can see right on the pages, I change it in the inspector, it changes it on here. So I so now I know that I'm looking for something that styling this banner more, see how it says banner more, this is the selector that I'm looking for my CSS. So if I go back over to here, and I just had just copied it over in my browser, I'm going to find in the paste banner more. So now I can change this border if I want to change that circle.

Well, how about this, I'm going to make this bigger and I'm going to change this to a green color. So we'll kind of match the other green that I have going. Now, since this is just an example, I'm not going to be like super exact, but I could try to make it the exact same green, or I can look at a color wheel to try to figure out what's the complementary color to the different colors. But for now, I'll just choose that green, and I'll go back over the refresh. Now circle?

Well, you know, maybe I will try to get that exact green because I wonder if it matched how that would look. So let me go back over here. I'm gonna go back up to my body, where I did my initial green. Here we go. And now I will do my search again to come back down to here.

And I'm going to just add this new color, and then go back over very fresh. Okay, nice. One thing is say when you hover over it, it gets white, I want it to be a maybe a lighter green.

So let me go back over here. And let me try to find the hover section. So here, you can see, well, let me so it says banner more, and we change it to the border to be green. Well, here's banner more hover. That's what the style is going to be when someone's hovering their mouse over it.

Now, it normally will just keep all the same style as the original one, but it will add these changes. So I'm going to change this border. Well, I want I still want to be a two pixel when you're hovering over. And now I want to change the color, I'm going to change this to a lighter green, and maybe add some more blue into it. And let's see what that looks like.

I'll save that, go back over. And that didn't seem to Well, I guess it did change it. Oh, yeah. Now it gets lighter green. That's kind of nice.

Yeah, I like that. So now when I click this, it goes down. So we can do the same thing by changing different fonts, different colors, just trying to figure out which CSS needs to change to change something.

Okay, the final thing I want to do is change the text color here. So I'm going to go to inspect element. And we can see, oh, it's color white, banner h1.

Now let's just make sure this is the right one. So if I change this, if I just type in blue, yeah, it changes to blue. So let's change this to a green color, I'm going to just copy this here. the CSS selector.

And then I'll just search for the CSS selector here. And here it is. So now instead of being white, I'm going to change this to a green color again.

But this is going to be a lighter green than before. So let's see what that looks like. Okay, you know what I want it to be the exact color that this circle becomes when you hover over it. To get that color, I can go back into the CSS file, or I can just inspect this element again. And let's see, I can turn on the hover state by clicking the hover here.

Now I can get the color from right here. And it's just going to copy this color here. and I'll go back over here.

Okay, so now I'm just going to paste in the color here. And I'll save that I'll go back over. I'll refresh.

Okay, that's gonna be it for now. I know this design could be a little better. But I'm going to count this good for now.

So I'm gonna get on to the next part of this course, which is purchasing a domain name. So let me make sure everything's saved. Yep, all my files are saved, because I'm going to have to copy these files over.

Actually, let me quickly delete these because I'm not gonna need any of these pictures. So I'm not using those same pictures. But we'll I'll just keep everything else here. And we're going to be copying these files over to our hosting provider once we get that. But right now, we're going to get a domain name.

So now you have the files for your website, or you're going to install WordPress. Now I'll show you how to get a custom domain. This is what people type into the address bar on their web browser to access your website. Some examples are youtube.com, free code camp.org, or CES tech. These are all custom domains.

The end of the website name such as.com.org or.net is called the top level domain. Or sometimes people just call it the domain ending. While.com is by far the most popular domain ending. There are actually hundreds of other endings.

Take a look at all of these on the screen right now. One ending that is increasingly popular for people in the tech industry is dot tech. And this video was made possible through a grant by the company who runs the dot tech domain.

When you are deciding what you want your domain to be. You also have to decide what domain. ending you want.

Here are a few reasons you may want to consider less common domain endings. More availability. The less common endings have not been around as long, so there are way more of them still available.

It's very hard to find a.com name that has not already been taken. Unique. These newer domain endings may help you stand out as being unique, which can also help create more of a lasting impression. SEO.

Using a new domain ending won't hurt your search presence or SEO. It's worth noting that in the eyes of Google, and other search engines, all TLDs, or these domain endings are equal. So if you get a highly searched for name in your URL, it can be helpful for SEO. There are a bunch of places where you can buy domain name, and they all work almost exactly the same.

Here's some options. GoDaddy.com, domains.google, namecheap.com, get.tech. I'm going to demonstrate how to purchase a domain name on get.tech.

tech, since we're getting a dot tech domain. But just know the process is similar no matter where you buy your domain name. Here, it makes it really easy. You just type in the domain you want.

So I'm going to try bow dot tech. Okay, bow dot tech is unavailable. Now most likely the first domain you try is going to be unavailable. So it gives some other examples.

But the other examples are almost never what you're looking for. So it's good to have the other options in mind. Since this website is all about teaching tech, I'm going to try bowteaches.tech.

Okay, it's available. And I can buy for one year. So I'll choose that.

I'm not going to show you the whole purchase process. But I do want to point out that this privacy protection, it says recommended. And I would also recommend this.

If you don't have privacy protection on your domain name. then the records of your name and address will be out there for anybody to see your name, your address, your email address. So if you don't get privacy protection, you're going to start getting spam because there's companies out there that are constantly checking for all new domains registered to see if there's any real addresses or email addresses. And then they're going to start sending you stuff to advertise because they think you'll be interested in buying things for your new domain.

So definitely get privacy protection. Okay. I'm just going to place this order. Now we're finished buying the domain. And to edit the domain, we'll just go into manage orders, and then find the order that I did for bow teaches that tech.

And this is our control panel, I'll get that a little bigger. And then we can update things in this control panel to make our website work. But before we can update anything in this control panel, we have to get hosting. So now that you have your domain name, you have to store your file somewhere.

When you go to any website on the internet, your browser has to download the files for that website from a physical location somewhere else in the world. A company that stores website files so that they are always available when someone goes to the URL is called a hosting provider. There are many hosting providers out there that will host files for your website. Some places will even host a website for free. In this section, I'll mainly be talking about hosting a static website, or WordPress site.

If you have a dynamic web application that has to run server side code before sending web pages to the client, then the setup will be a little more complicated than I what I described here. First, I'll talk about how to get things set up on most paid hosting providers. And then I'll show you how you can host your website for free on GitHub pages.

Here are some of the common hosting providers for web pages, Bluehost, Hostgator, Hostinger, GoDaddy, Dreamhost. Almost all hosting providers have something in common, which is this users manage the hosting service through a web application called cPanel, or something very similar to cPanel. So if you learn the basics of cPanel, then it will be simple to use any hosting provider.

So all the hosting providers are very similar. So matter which one you sign up for, the steps should be basically the same. First of all, I would recommend just picking the cheapest possible hosting plan, whatever hosting provider you use, just pick the cheapest plan, you can always upgrade later if you need to.

Often the cheapest plan will work. And you can always upgrade later if you somehow need more space or need more bandwidth. Make sure you choose that you already own this domain because you we've already purchased the domain. And the rest of this is pretty straightforward.

Okay, I got my hosting. And now I'm just going to launch the cPanel. The exact way to get into cPanel could be different depending on your hosting provider. But it should all be pretty similar. And again, your hosting provider may not have cPanel, but it will definitely have something similar.

There's no single look for the cPanel dashboard, because there are many themes and styles that hosts can use. But the functionality is similar. So one of the things you're most likely going to be using is the file manager. The two main ways of getting files into your hosting provider is the file manager, or through an FTP account.

So let's look at the file manager. So the files we see here are the files that the hosting provider just puts there by default, we're going to go to the public HTML section. And this is where we are going to add the files. So that's one thing you're going to have to look into when you are trying to upload your files to your hosting provider, you're going to have to make sure you upload them to the right directory, it may not be the root directory, it's probably going to be something like this, the public HTML directory.

And so those are the files that will appear when people go to your website. I'm going to delete everything in here because I don't actually need anything in this directory. Now we'll go to upload.

And I cannot upload directories. But there is a trick to be able to upload everything at once, which is to create a zip file. So let me select all my files. And then I'll just go to compress. And it could be different on Windows.

But it's gonna be pretty similar how you're gonna be able to find something to make them into a zip file. So I'm just going to upload the zip file. So this includes all the assets and all the images and even the background video. So could take a little bit to upload. Okay, I'm going to go back here.

And I'm going to extract. And this is just an extra directory that I can delete. Okay, I have my website uploaded to the hosting provider. we still have to connect the hosting provider to the domain name. And we'll do that in a little bit.

For now, I'm just going to close this. And let's look at some of the other things you can do with cPanel. So we could have uploaded the files through FTP.

Here we can create an FTP account. If you have an FTP client like FileZilla, you can FTP into this and you can easily upload files. Another thing we can do is create a sub domain.

Let's say we create one called blog. So now it's going to be blog dot bow teaches that tech, the way I get files into that sub domain is, it should show up right in my file manager. So if I go back into the file manager, now you can see there's a new folder called blog dot bow teaches that tech. anything I put into this folder will now appear at the sub domain once I connect my hosting to the domain name.

So the two other things I want to show you are the email accounts and the WordPress installer. There are a bunch of other things on here that you can mess around and continue learning. But I'm just going to cover these other two for now. So right here, you can create an email account, we can also create an email account on the tech admin page. which I'll show you that in a second.

Again, later, let's say we want bow at bow teaches that tech, and we create a password, and then create account. Okay, I can set up the mail client. Now this is just going to give you different ways to set up the client, depending on which method you want to use.

I'm not going to go through every one. But depending on what you want to do, you just set it up differently. Okay, the final thing is the WordPress installer. So I was saying it's very simple to install WordPress once you have your hosting, just click on WordPress installer, and then click on Install now. And then that's pretty much it.

Once you install WordPress, you can now use WordPress right on your site. And you can watch any WordPress tutorial to learn how to use WordPress. I'm not going to install WordPress right now. because I'm going to use the other files that I already uploaded onto there. So what I'm going to do now is just go back to the dashboard.

And now I'm going to connect the hosting provider to the domain name. And to do that, we're going to scroll down until you see the name servers. Now no matter what company you use to create your domain name, and no matter what hosting provider you use, you're almost always going to connect these two together with these name servers.

So I'm going to copy this name server, and then go back over to the control panel for the dot tech domain. And then you can see there's a name servers, managed name servers that use this domain name. So I'll click that. And then I'm just going to paste in the first name server. And then I'll get the second name server.

And then I'll paste in the second name server, we'll put it here. And you don't really need to have every name server filled in. So I'm just going to go through and delete these other two.

and then update name servers. Now, everything really should be set up for my website to work. Sometimes it can take up to 24 hours for everything to update.

So you may have to wait up to 24 hours before you can actually see your website live. Okay, I waited some time. And the name servers have been able to propagate throughout the internet. And now the website works. So I go to bow teaches that tech and it loads.

So you can see this and if I click here, it should open up. Yep, it opens up a video to watch here. Okay, everything's working. I can now access my website at a custom domain. Once you know how it's actually pretty simple to set up a website to host for free at GitHub pages.

The first step is to create a GitHub account and log into your account. And then you just need to create a new repository, the name of the repository is very important. So for the name of the repository, you have to type in your username, your GitHub account name, and then you just type in dot github.io, bow fcc.github.io, this is going to create a repository that will be a special type of repository that will be able to host our website on GitHub pages. Okay, now I'm just going to create a repository.

Okay, now that we create the repository, we can you can either upload your files using the command line or you can do it right through the web interface. So just click upload an existing file. And I'm just going to drag and drop the files.

So let me grab these files here. And just bring it over here. Now it's just going to upload all the files for our website.

Okay, all the files are uploaded. And I'll just do commit changes. After the files are done processing, I can go to this URL, just copy it right here. And I'll open up a new tab, I'll paste in the URL.

And that did not work. Okay, it takes a few minutes for the updates to show up. So if we just wait a little bit and then try refreshing, it should work.

It can take up to 20 minutes for the changes you create. on GitHub to show up on the GitHub pages. But it's now loading, you can see in the address bar, bo fcc dot github.io. And we can see our page. Now we just need to make this show up at Bo teaches tech.

Before I make this show up at our custom URL, let me show you how easy it is to make changes to the page on GitHub. So you can always change it on your local computer. and then upload it again or use the GitHub interface.

Or you can change it right on this GitHub interface, you can change the HTML right on here. So in order to edit this, I'm going to click the pencil icon for edit this file. And then I'm just going to update the title here.

Instead of courses from bocarnes. I'm going to call this programming courses from bocarnes. And then I can just scroll down to the bottom.

And you can put a commit mess, you can put a commit message, but I'll just leave this as the default for now. And just click commit changes. Now again, it's gonna take possibly up to 15 minutes to show up on here. But while we're waiting, I will show you how to make this work with your custom URL. And then if we do this, right, we'll be able to know that we're not getting it from our hosting provider, because this will change.

So here's bow teaches that tech currently. And you can see it says courses from bow Carnes. And this is coming right from our hosting provider that we set up before. But now we're switching it to use GitHub. pages for the hosting provider.

So after we update this, this will say programming courses from Bocarnes to reflect the change that was just made on GitHub. So the first step is to go back into GitHub. And I'm going to click on Settings.

If I scroll all the way toward the bottom of the settings, I can put in a custom domain. Custom domains allow you to serve your site from a domain other than both FCC.github.io. So I'll put bow teaches that tech, and then I'll save it.

So now that we updated the GitHub settings, I'm going to have to go back to our domain dashboard. So this is at the dot tech control panel or dashboard. And to make this work with GitHub pages, I'm going to have to go to DNS management, no matter what company you purchase your domain from, there's gonna be some way to update the DNS settings.

your domain. So I'm gonna go to manage DNS here. And I'm going to update some things.

The first thing I'm going to update is the CNAME record. So the CNAME is like an alias, or it's a way to forward to a different domain. So I'm going to add a CNAME record. And for the hostname, I'll put www.

So when you go to www dot bow teaches dot tech, we're going to forward to bow fcc.github.io. And then I'll just add this record. So So now www dot bow dot teaches that tech will go there.

I also want to set it up. So just bow teaches that tech without the www will also go to the GitHub pages page. So to make that work, I'm going to add an A record. So I will put nothing here. And then for this destination address, I'm going to put an IP address that comes right from GitHub.

So it's going to be 185.199.108.153. And then I can click Add record. Okay, that should be all set.

So I'm going to close this for now. So before I updated the name servers to work with the hosting provider. But now that I'm using GitHub pages, and I updated the DNS settings, I don't need the name servers I use previously. So to make these new DNS settings work, I'm going to have to default the name servers back to what they were.

And it says right here required to use our DNS management service with your domain name. So it says we need I need to go back to the default name servers. So I copy this I'll go up to the top here. And then I'm going to change this to Venus because that was the second one. And as long as you have two that should work.

So I'm gonna update the name servers. And now anytime you update the name servers, you could have to wait up to 24 hours. So I'm gonna have to wait and then I will check the website to see if it updates to use the page GitHub pages instead of the hosting provider we had before.

So it's been over 24 hours and and check this out. I'm at bow teaches that tech and it says programming courses from bow Carnes. So I'm now loading the page right from GitHub pages.

And now whenever I want to update the page, I just update the files on the GitHub repo. And then within 15 minutes or so the changes will reflect right on the actual domain right on the page bow teaches that tech So now you know how to set up a website with GitHub pages. So now you've learned how to create a simple website, get a custom domain and host a website through various methods.

Thanks for watching.

Transcript for:Creating and Hosting a Website

Transcript for:
Creating and Hosting a Website