Learn to build a site: an intro to front end web development. | Sunny Singh | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn to build a site: an intro to front end web development.

teacher avatar Sunny Singh, Software Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (1h 2m)
    • 1. Welcome

      1:06
    • 2. How do websites work?

      7:02
    • 3. Front end languages

      3:07
    • 4. Installing a code editor

      1:55
    • 5. Creating content: HTML

      7:45
    • 6. Creating HTML pages

      17:11
    • 7. Styling content: CSS

      6:38
    • 8. Adding site layout

      10:36
    • 9. Adding functionality: JavaScript

      3:14
    • 10. Uploading your website

      2:00
    • 11. Final thoughts

      0:58
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

455

Students

2

Projects

About This Class

This class is for anyone that wants to learn how to build a website. No previous coding knowledge, just a curious mind on how the sites that you visit every day work.

You will learn the fundamentals of HTML, CSS, and JavaScript—the languages of the web that allow you to create content, design layouts, and add interactive features to your site. You will also create your very own website for others to see, all built with simple static files.

Meet Your Teacher

Teacher Profile Image

Sunny Singh

Software Engineer

Teacher

Hello, I'm Sunny. I am the creator of IronMic and host of the Sunny Commutes Podcast.

 

Looking for more software development resources? Explore on Resrc or subscribe to my newsletter.

See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome: lo and welcome to my sculpture class. If you're like me and you're curious about how the technology that you use every single day works, then let me show you how simple it is to actually build your own. But first, a little bit about myself. I learned to build the age of 13 and it continues to be a big passion of mine. I love to code built prize and share what I learned with others. I also turned development into a career because that worked with different start ups, a large corporations and also build some projects of mine on the side. My preferred way of learning is by doing so, I structured my videos in a way which you can follow along by building your own project. I recommend that you build a personal site, but you can build whatever you want. I hope that you also share your sites in the project gallery, and I'll be posting more classes in the future, so make sure you follow my program. All right, let's go ahead and build a safe 2. How do websites work?: all right. Welcome and a really glad that you decided to join the class in this first video. Want to ask the question? How do websites work? I think that it's important before we write our first line of code to understand how all of the different pieces come together to build a fully functioning website. First, let's talk about servers. If you try to visualize the concept of a server in your head, you probably think about these complex machines with a bunch of cables and lights. Probably not a hamster trying to power them like you see here. But you get the idea. You think about something very complicated, something that you can't really wrap your head around, what I want to do. It's simplify that thought process of how websites and servers work together. So the most important thing to understand is that websites are just files on a computer. The way that you access those files or that server is by an I P address. An I P address looks like a bunch of numbers separated by periods. Have an example when here 172.217 dot 9.78 it doesn't really matter. And most people wouldn't really memorize thes I p addresses. In fact, you probably already know that you type in a domain or you are l to access a website, not an I P address. So I'll talk about that in the next slide. So yeah, if we had to memorize all of these i p addresses to access websites, we probably go insane. Thankfully, we have domains as sort of like shortcuts to access those websites I p addresses are hard to memorize, and so domains serve as shortcuts to those I p addresses. I have an example. One here that I showed before, and it's actually a an I p address to a Google server. We can actually try to enter this into a browser and see what happens. I'm going to copy this I p and simply enter it into the address bar had enter and a go straight to Google. So this is really cool. You can try this for yourself. You can see how we have I p addresses that actually do work. They go to different Web servers, but most of times you would just use the domain. So if I open a new tab and enter google dot com and goes to the Google Home page. Browsers are the last piece of the puzzle and helping us understand how websites work there , what she used to access websites and they communicate with Web servers. I'll explain what that communication means in a second. The great thing about browsers is that they constantly evolved to support complex websites . This basically means that they just gain new features from time to time and which allows websites to take advantage of those features. This makes it where websites now can become more like fully fledged APS similar Tuapse on your phone or on your computer. Browsers and servers communicate with each other, which means that a couple of things happen here. So first you type of domain, say google dot com into your browser. Then the domain finds the I P address of the Web server that the website files are located on. The server will respond back with the file contents and other data. In this case, it ends up being code and other any other information needed to render that what page properly. So the browser finally interprets this response from the server and is able to display the website. The code that the browser interprets in that file content is actually what will be writing . That is html, CSS and JavaScript, and I'll talk about that in the next video. The final thing that I want to mention about browsers here is that they actually are really great developer tools. They include the ability to view source or inspect element on any website. You can do this in Google, Chrome or Firefox and other browsers. You may have to enable a developer option. Let's actually try this out in her browser right now. So pick any website in this case. I'm on skill share dot com, and I'm in Google Chrome second right click and click on view page source. Now, don't let this intimidate you, but this is the code that's necessary to display this website. And while a lot of this won't really look much to you, let's take a look at one of these. Tax here can see it's as title and it says home dash skill share. So this is actually the title of the website here. You can see in this tab it says home skill share. And so this is some of the data that the server responds with. And as you learn more of this code, you'll actually be able to understand as you browse through this and see, look and see all of these different dibs and different links in here. Ah, you'll be able to have a much better understanding of this. You can also right click and click on inspect or inspect element, depending on what browser you're using. This will open up this little developer tool panel here. This looks similar to the view source, but it's organized a little bit better. You can actually click on some of these to expand them, and there's many different taps here, which I won't really get into. But these are really great developer tools that are built into browsers that help you to develop websites. Okay, so that's it for this video. I hope you're able to get a better understanding of how websites work, and if you want to learn a little bit more, I have a Lincoln here that goes to Mozilla's developer network. Ah, it's an article here, and it does a really great job of explaining more in depth of some of the things that I talked about. So check this article out if you want to learn a little bit more and I'll see you in the next video. 3. Front end languages: html. CSS and JavaScript are the three front and languages that will be learning. Each one has a different purpose in building a website. HTML, which stands for hypertext markup language, is used for creating content, the text, images and links that you might want in your site. You'll use different HTML tags within a dot html file so you can see an example here for Ah , home page. You might create an index dot html file, and inside that you might have some text that is surrounded with a B tag. This is an HTML tag that will basically make the text bold. Next is CSS, which stands for cascading style sheets. It's used for styling content, which includes changing up colors, applying differently out, changing up the positioning, different text and fonts and things like that. Have an example here where I'm selecting an HTML tag in my page with an I d of my text and then I can provide different properties that do different things. I just want to make the text blue. And so I say that I want the color to be blue. Lastly, we have Js, which stands for JavaScript. I will refer to it by its full name. But I do want to give a small for warning here that if you're trying to look up information about JavaScript online, make sure not to confuse it with Java, which is a completely different programming language. What we're talking about here is Java script or J s for short. JavaScript is used for adding functionality, such as when you click on a button, you want something to happen like an image shows up in full screen or other interactive features. Have an example here, which simply shows an alert message that says Hello. There are a ton of different things that you can do with JavaScript making the most powerful language out of the three Front and languages were not going to dive too deeply into it. But it's still a very fundamental aspect of building websites. HTML, CSS and JavaScript are the three languages that are understood by browsers, which is why they're also referred to as front end or client side languages. You can right click on any website and view source, which shows you all of the HTML code that is sent from the server to the browser. Keep in mind that HTML files are Web pages, which then reference to CSS and JavaScript for adding style and functionality. Have another article here from the Mozilla Developer network that you can check out if you want to learn more in depth about these three languages and other topics in what development In the next video, we'll get ready to writing some code and talk about the different editors that you can use to write html, CSS and JavaScript, so I'll see you in the next video. 4. Installing a code editor: Okay, let's talk about text editors or code editors that will use to write HTML, CSS and JavaScript. First, you can actually use the text editor that's already on your computer. If you're on a Mac, you can use text at it. If you're on Windows, you can use no pad. This works perfectly fine for writing code. The only thing you will have to make sure is that you save the file as an index dot html file or whatever will be creating at the time. The only thing that you don't really get with the native editors on your computer is syntax highlighting, which will help you get a better visual of your code with different colors and a different structure that other text editors will show you. There are many different options for editors that you can download. The 1st 1 here is called Visual Studio Code, or V S Code. It's what I'll be using in my videos, so I highly recommend that you download this one. However, there are other options. Here's Adam, which is a very simple editor and another one called sublime text. All of these you can use for free but sublime text will nag you about buying the license. Another option that I want to quickly talk about is called Coat Pen. It's actually a website that lets you write code right within your browser. If I create a new pen here, it will let me write HTML code and give me a nice preview. Down here. You can also write a CSS and JavaScript. This is great if you want to get up and running very quickly. But if you want the files for your website to be local on your computer, I recommend you install an editor and edit those files locally. Like I said, I'll be using V s code some. Once you download it or pick, a different editor will be able to get right into the code, so I'll see you in the next video. 5. Creating content: HTML: All right, now we're ready to create our website. The first thing you want to do is create a new folder. This could be on your desktop, Your documents? It doesn't really matter. But all named this my website. And this is where it will be storing our HTML CSS and JavaScript files. Now let's go into our code editor in this case, amusing V s code. We'll go ahead and open the folder that we just created. That's open my website, and this is where it will start to create new files for a website. Let's click on new file and and save this file right away. We'll name this index dot html. Now let's put some text inside this file. It is typical to say hello world can for anyone's first program that they right. But you can put anything in here my first website. What's up? You know anything, make sure that you save this file and now what we'll do is go back to the folder that this file is in and we'll right click and will open this in Google Chrome or whatever your default browser might be. You can see now that it says Hello world. That's a text with put inside that file. And while this is very simple, this is your very first website. Let's do something a little bit more interesting here in HTML. We can use different tags, and I showed some examples of this in the slides where you can use something like the B tag to make this text bold. So the way that you have right these tags is you start with the opening tag. That's this one right here with a less than symbol, the name of the tag and then a greater than symbol. And then on the other side we have the closing tag that says that basically, you know, we start building text here, and then at the end of this text, we stop holding the text. So we have first less than sign a slash to show that this is a closing tag, the name of the tag and a greater than symbol. Let's save this file, go back to our browser and let's reload the page. Boom. You can see it's a small difference, but you can definitely see that the text is now bold. Let me show you some other tags that you can use. There's a way to a tele size text with the I tag. Let's say this file photo browser and reload the page, but you can see the teletext next to the full text. Oops. There's also a way to create different headings. So if I do in each one, this means heading one and close the tag. You can see there's, ah, consistent way to open and close tags. The only thing that's changing here is the name of the tag. Save this file. Go back again and reload. Now we have very large text. This is commonly used for creating different headings within the page. Just imagine like a word document. You might have very similar formatting there, and the list kind of goes on. This is like smaller texts. Okay, it's heading level two. You can see it's a little bit smaller. Okay, let's do a slightly more complicated tag, so there's a way to link to other pages or other websites. In general, the name of the tag is a which stands for Angkor. It's the same way you'll make an opening tag. The text inside this will be the text that will be clickable. It's actually named that something a bit longer, Slink. And then, of course, a closing tag. Now, if you just save this right now, go back and refresh. You can see it's actually just looks like regular text. Nothing really happened here, so anchor tags require an attributes to make them actually work. What you do is at an attribute in here called Patron, and so after the A here make a space type H R G F that stands for hypertext reference equal sign and then two quotes inside. These quotes here will enter the U. R L to a Web page. I will just type it out here. This is google dot com, but you'll probably just want to copy and paste from your browser. So let's save this and see what happens. Okay, now you can see this link is now purple. Normally, links are blue, but it's purple because I visited this page before and it's also underlined. This is the default styling. And once we get to see assess, you'll be able to see how you can customize the styling, but for now would get the default styling here. If I click this link boom. You can see it goes to google dot com. So now we know the concept of these attributes, and we'll be using these quite a bit. Let's go ahead and add another attributes onto this anchor tag because let's say we want to open this link in a new tab. You see this very common on certain websites, and this will also show that you can add multiple attributes Teoh to an HTML tag. So there's another attributes that you can add called Target. You can see these attributes are all separated by a space here, and they all exist after the tag name but before the angle bracket. So we set the target to underscore Blank. This tells a browser to open this Web page in a new tab. Let's see this the backs of the browser. And now if I click this link, you'll notice that it does open in a new tab. We still have our website hoping here and go go open in another tab. You now know the basics of HTML, and in the next video I will dive into the correct page structure that you should use for your HTML pages. as well as the more complex attacks that you can use to add things like images. This is a good time to practice writing tags so that it becomes very natural and you're able to write out tax very quickly. 6. Creating HTML pages: in the previous video would learn how to write basic HTML tags so that we could get content in her page. Now let's talk about page structure because browser's expect two different things to come from your page. One is the visual content that you can see in your browser and then metadata that she wouldn't be able to see but is very important to browsers. This is where you would include certain information about your site, the CSS and JavaScript that disassociated as well as things like the title and description . Okay, let's add a page structure to our current HTML. Let's go to the top of the file here and add something called a doctor. This will tell the browser to use the latest rendering engine to display the site. There have been different ones in the past. This basically means that we want HTML five, the latest version below that. Let's create on HTML tag, and this will actually wrap her whole page. Let's go to the bottom here and at a closing HTML tag. It's also a good idea to add a language attribute on this oops language attributes actually just laying and make that equal to E n This, of course, meaning English. Okay, now let's add a body tag, and this will wrap the content that we had before. This is the visual part of the page. After we at the body, what's add a fed tag? You can see him spacing this out so that I can visualize this a little bit better, but we'll be adding certain metadata here in the head. What's press tab in here? And add a title tag and the title could be anything. I'll just put my website, and so let's pause for a second here. The way that I like to think about this structure is that the head is like the brain of your website. It includes data like the title description CSS stuff that you won't actually see but is important, and it's just data. Then we have the body, and this is the actual content that actual what you see in your browser. And so these two different tags, they have different tags inside of the head and the body. Let's take a look at this file in our browser again to see what changed. So if you re load and get the latest version of this file, we see that the content is still the same. But something did actually changed and that is the tab are here. You can actually see it, says my website. And this is the title now. Where is that coming from? Well, we added this data here in the head. So it's coming from this title tag, even though you don't actually see it anywhere in the page itself, it is displaying in the tab while we fear in the browser. Let's go ahead and look at def tools. This is something that's included in Google. Chrome and Firefox and other browsers might also include them, although you may have to edit the settings to enable developer options. So all I did here was right Click and you were in the page and clicked. Inspect or inspect element. What you'll see here is the structure of your HTML. This is the code that you added to your page can see. Here we got the doc type HTML. Tag the head with the title and you can see this is in the source code here. It's not something that you can see on the page, but it is doing something in the body with all over tags here. This is a great way to see if something's not working. You can inspect it and see what it's actually displaying in the browser in the code here. Another benefit of this tool here is you can hover over each tacked to see the layout and the styling as well, so you can see there some spacing on this H one tag here. And once we get to the CSS portion will see that the's air, the different properties that are applied by default will be adding our own to add our own custom styles. Some of these tags air also in line, meaning that placing them next to each other will show them on the same line. We can see this H one and H to tag are on separate lines us because thes air block level elements, the anchor is an in line, but because the one before it was a block element or a tag, those air synonymous by the way html tag an element are the same thing. But because this was a block tag, it actually ends up taking the whole with. So you can hover over that to see that it takes up 100% of the with. However, these B and I tags do not. So if I was to put that anchor tag next to the I tag, it would just appear on the same line right next to it. I want to quickly mention a great reference guide for all of the different HTML elements or tags that you can use. This is another resource from the Mozilla Developer network, and it'll and it lists all of the different tax here. It also categorizes them, for example. Here's all the text content elements. You can have different things here. You can have quotes, you can have lists and will use the's in our own webpage. You can also click on the tax themselves, so click on one of these, well despoil the different attributes to keep that you can use as well as examples. What I want to do now is clean up this content that we added earlier and to make something that resembles more of a website. So first, let's add an H one tag. This will be kind of the title of the current page. It's all. Just name it my website. You can put your own name here or something like Sonny's personal. Say something like that. Now let's add an image tag. This could be something like, Ah, logo or maybe a picture of yourself. So let's say that we didn't know how to do this. We can look up what the image tag would be from the Mitzel, a developer network. So the image embed element see lets you embed an image into the document. And I could just scroll over to the example that they have. You can see using something like this will show this image here. Let's go ahead and copy in peace that so you can see there's, um I am I m g tag and has two different attributes. So there's a are SRC attributes or source attributes and a points to an image file. I'm actually gonna pull in one of my own images into our website folder, and then we'll reference it here. Then there's also this A lt attributes stands for alternate text. This is useful for many different reasons. Let's say the image doesn't load or a search engine. It's looking through this page to show something for search results. Or perhaps the user is a blind user. And so they're unable to visually see what this image is. And so we were able to provide alternate text. That kind of describes what this image is. I can say this is a picture of myself, and so you don't actually need to see the image to know what it iss. Something interesting here is that this tag actually doesn't have a closing tag. You know, normally you would do something like this, but because we're not really displaying any text in between here, you actually don't need that closing tag for sanity sake actually like to include a slash at the end here to show that this is a self closing tag. But this is completely optional. So two embedded image into our website. We need to have an image inside of our website folder. So included an image of myself here, right next to the index dot html file. They live in the same folder, and so we can do this. The source of this will be just the name of the file. That's a J peg. Yeah, Sonny. Dodgy Peg. Uh, we can provide different pass here since the same folder but can do this. But if it existed in another folder, let's say I have an Images folder drag that image into their now to reference the image this way. This is good for organizing. Let's save this and open it in your browser. Reload and you can see you have an image of myself here and the title over here. I think this image is actually a little bit too big, so we can actually resize this. Let's go ahead and add a with a tribute here. Now we can at now what can pass in a pixel value. Let's say I do 100. Save that now. You could say it's a lot smaller. Maybe I wanted to be a little bit bigger. Just make it 200. Okay, I think that's a good size there. We can add a couple more things here. I want to include some text. What's at the paragraph tag is just a pitak here with some text inside. Let's just say this is to just play my There's something like that, right? Um, and now we can add a navigation so that we can link to other pages for our site. Let's go ahead and just included at the bottom here. Now here. All include a list of lengths. So let's do an on ordered list. This is a U L tag and could look up information about these tags to learn a little bit more inside will have list items. It's a good idea to just have these on new lines and tab everything that's inside when you have just thes nested tags like this, its course to do links, we add anchor tags. Feel free to positivity of This is going too fast so we can link to different pages that they want to add an about page it's linked to about that. HTML. This does not exist yet, but will in a moment and have that link read about. And maybe we'll have other pages as well. It was just copy that Maybe let's include a copy speech here. Okay, so we have our navigation list here. Let's save this. Go into a browser in our browser. Reload. Now you can see we have a little description paragraph here in different links, but click on this right now says your file was not found. So let's fix this envious code. You can actually create files directly in here. Click on this icon right here. Or do this right click and click on new file. Let's type about dot html. It's closed this tree again and these air just manual files. So keep in mind, you know, we now have about that each small file here. Insider folder. Let's go ahead and just copy all this. So copy that into about dot html. And let's change this I have to say about with a little bit about Sonny. We'll keep the image there. That's fine. I, um and that's a good idea to keep the navigation here. However, since we're already on the about page at this point, it's at a page Two are linked to go back to the home page, so it will go back to index that html and they'll say home. Okay, so now we have in the about page, go to our browser, and if I reload, this boom will now have an about page. See, the title here changed us well as well. It's the heading level description, text and now conflict between this home and about page. We'll do the same for hobbies real quick. Let's go ahead and just copy the about page and making your father. It's obvious that HTML is that hobbies. These are to a watchman or something like that. And let's change this hobbies link to about beach. Okay, this is looking good. It's re fresh. A hobbies page. Now we have this peach here. So now we learned how to create links here that go to our different pages in our website. You can see it just goes to those files. Poppy, start html index dot html. Also quickly want to mention you might have been wondering about this. We're just displaying these files in our browser. These air just local. If you share this with anyone else, they're not gonna be able to access this. But at the end of this class, he will be able to upload your website so that you can actually share this with other people. I think that's it for this part. In the next video, I'll show you how to utilize CSS to style your website 7. Styling content: CSS: Hopefully, you've gotten more comfortable in using HTML. Now let's move on to styling our website with CSS. This will hopefully make this look a little bit nicer. Let's go ahead and make a new file. This one will be called style dot CSS can see we have a style dot CSS file inside of our folder alongside or Images folder and our HTML files inside. Here. This is where will be writing our CSS and will be targeting our tags insider HTML and adding different properties to change a color, fonds spacing and different things like that. What we need to do first is link up our file with our each team out. So remember we made this head tag earlier. We can add data here that will tell the browser to use their new styles. So it's at a link tag inside here will say that the relation s style she and point to our new styled CSS file similar to the image tag. This is another one of those self closing tags. Let's save our HTML file and go back to our style dot CSS file. What's that? Some basic styling to show that this is actually working. First, we'll start with a selector. This is where you target one of your HTML tags. I'll start with the body and then space and then add curly braces. So obvious code is nice enough to add the closing grace automatically. Make sure you have an opening brace in between. We'll have our different properties and then a closing brace. So inside of here, I'll make a tab to make this look a little bit nicer. Visually, so can see the difference between the selectors and the properties. Okay, let's change the text color, cell type color colon space and then a name of a basic color like blue green. You can also use hex colors here will do that in a moment. Let's save this file. Insider browser. Let's reload the page. You can see the color of the text changed, and it actually affected our whole page. If you remember, CSS stands for cascading style sheets, and this is the cascading aspect of that. Even though we targeted the body tag, the style of the text color, it cascades down. You can see that the link colors are still a different color because they set their own colors and so we can override the color that was set previously. Let's say we want the paragraph tag to be a different color. So let's target those tags right now below the body. Let's say P space, curly braces. I want the color of these to be green. Okay, let's save that reload. And I can see the paragraphs are now green. One interesting thing to note here is that both of the paragraphs or green and that's because they're both using their paragraph tag. If you right, click and inspect, use deaf tools here to see that. Okay, with selected that paragraph tag and in this right panel here is showing the different styles. Second, see on the paragraph tag. We have the color green, however, on heading that each one here I could see there is no color on the H one, but it says here inherited from body. So chose here that actually the blue color is being inherited from the body tag that we declared in our CSS. What if we wanted to get a little bit more creative with the colors that we use? We can use something called a hex color code, which starts with a number sign followed by six letters or digits. I'm just going to use the website called color picker dot com. This lets us pick a specific color by dragging inside this color picker and then giving us this hex code. Now, instead of using a color name could just pace that hex code. But make sure to keep that number sign in the beginning there. Save the file, reload the page and now we've got a slightly different shade of blue here. Let's take a look at some other ways that weaken Styler text. You can add a different font size by providing a pixel valley here. PX Standing for pixels can change the font family. Let's go with Ariel can. You can also make the text bold. There are many different ones, but let's leave it at that. In a browser we can reload and see that we now have this different looking text here. It's bold, it's a little bit bigger and it's in the aerial fund. Let me show you how you can add spacing with margin. Let's I want this image to be a little bit to the right. Let's selected image inside of our CSS in adding margin dash left property. Let's say 50 pixels reload the page and you can see it's moved a little bit to the right. That's it for this. Video, of course, is always a link. Another resource you can use to learn a little bit more about CSS that the different ways that you can style text boxes create a layout and things like that. 8. Adding site layout: all right, things are looking pretty good now. We've used HTML and CSS to make what looks like a decent looking webpage, but I think we can do even better. Let's turn this into more of a traditional looking site layout with a header at the top, a navigation menu and then maybe some columns here as well. Let's begin by creating the different sections of her page and moving our tags inside there . In HTML five, there is a header tag that we can use. This will be the header over a website. Let's copy this each one tag in there. Okay, Cool. Also inside the header, we probably want a navigation menu. We can copy this, UL here. That's list of links inside here. Fix the tabbing here and there's actually a knave tag that we can use here. And it's a good idea to show that this is our main navigation of our page with this tag. Now let's also add a footer. And of course, that's the lead. Our navigation were to have it here, so it's about at the bottom. We can have a footer tag and we'll just say copyright like put your name here. So 2018 can our content will go here. Okay, Cool. So now let's go to our CSS file and start styling those tax for a Feder actually wanted to have kind of a bar. Look where it looks like a bar at the top of the page. So let's make the color here to be white in the background color to be gray. Let's check this out so far, how this looks, okay, we can probably fix this a little bit. Now let's inspect and see why. There is a lot of space in here at the top. So it looks like the body has a couple of margins on the top in the left here, and each one here has a margins. Well, let's fix that. You can say the margin. I want all of the margins on the body to be zero. And for the H one, it's removed. The margin on here is well, okay, it's a lot better, but I don't really like this great color on color picker dot com Let's go with my favorite blue to make this a little bit. Maybe a dark one like this. The number sign with the hex color. I can relate the page looking a bit better, and we could also center. This is well, so let's enter the text inside of our each moment. Okay? Sweet. Could probably use some spacing at the top. A swell. You can also use something called padding. And this will simply add spacing inside of, um, the text essentially instead of on the outside of it. Let's say maybe 20 pixels. Okay, sweet. Let's also changed the fund on the heading here. So what I will do is add a font family on the body. Okay, It looks a little bit better if you don't like these funds. By the way, you can use the site called Google Fonts that provide a bunch of different fonts here that you can import and use inside your website. I like this one a lot, so I'll click on the plus sign. You can copy this code here, frontier html file inside of your head tag. Simply copy and paste that there. Next you can see the font family would can copy that. Save that three lewd. And now the font on her whole site has changed. Next, let's go ahead and fix this navigation menu. Let's add a selector on the UL tag and center the text inside here, which will center the links. And we should also probably add some spacing at the bottom of it as well. It's reload that see the links air now centered. But I also want to make these list items on Beacon. Look at the different taxi having here at any time. So the list item. I actually want those to a line next to each other. I'm not sure if you remember when I spoke about a block and in line tags and how they display a little bit differently. So if I make these in line can see, they show up right next to each other. Now let's customize the color of those links. Select all of the anchor tags, make those links play. Okay, Sweet. One problem to this approach is if you add a link inside of your content here, those links will be white as well. So what you want to do is before the anchor selector you want to at another tag in here. So this will say that you only want to select links inside of the navigation. This will work the same. But now the links inside of content, they will not be Wait. Okay, let's also center the footer text here. So it's like the footer tag text the line center. Okay, now the footer is center lined as well. Now for the content here. We can probably just center this, but I mentioned how you can add columns. So let's try to do that. Inside of your HTML will have to make new tax here to hold our sidebar content and our main content. Those will be our two columns. So we're going to use attack called a div, and then we'll have two more dibs inside of there. Copy and peace. Now these air just generic tags that you can use and so we need to give them names. Could do this by giving a class in the class Name will say container. This one will be a sidebar. And finally, the content it can name these whatever you want. It's up to you. And so let's go ahead and cut and paste these tags into here. The image will go into the sidebar in the paragraph, tags off course, going to the content inside of our CSS. We need to now select our new container element, which is this day right here. Classes we can select with a period and then the name, the dot container. And to create columns, we use something called a flex layout. So we'll say display flex, reload the page and boom. We got two different columns here. The image on the left and the text on the raid. Let's fix some of the spacing. I already know that paragraph tags have a margin tops. Let's set that to zero. Okay, that looks a little bit better. And for the content, let's add some padding on the left and have that equal. Let's say 20 pixels. Okay, it's now we've got some spacing on the left here and finally, maybe some padding on the top of the container. All right, that's looking really good. Now, maybe some batting on the bottom. It's well for the footer there. And so, yeah, this looks pretty good Now. It's also responsive as well. You could say I can resize and everything kind of just size is down as well. All right. This site has come along really far. Now we've got a nice looking layout here with a header. We've got the heading and the Nap Bar, a two column content area and a footer at the bottom. And the next video, we'll get to JavaScript to add a little bit of interaction into our site. 9. Adding functionality: JavaScript: up until this point, we used HTML to add content and CSS to add some styling. Now let's add a little bit of interaction by adding a button that someone can click to display a secret message. We'll need to make a new file again. It's called this script dot Js Inside. Here we'll write some code to select a button on the page, so we'll say document dot get element by I. D. Envious code will offer suggestions here. Don't worry too much about the code here. JavaScript is a full programming language, so it's not quite a simple as HTML or CSS Cento X. So we'll say button. Then add an event listener. So when they click on the button will run a function. And I should have this coat in the notes if you want to just copy and paste in case you're not able to get this exactly the same. And now we'll show a secret message with using the alert function here. My secret message. Okay, this should work, but first we need to add that script into where each team L Page can see already have it here, using the script tag with the source pointing to the script. RGs file. We actually do have to have a closing tag for the script tag. Next, we need to add this button somewhere so we'll use the button tag show secret message. This will be what the button says. And because we selected a bought and with an i d of button you need to at that I d. Here. We can probably give this a better name. That's a show message. An update, our job script here to say show message. Okay, so quick. Little recap. We made a new file here. Script dot Js We added that into our page with the script tag. By the way, make sure this is at the end of the page. This way, all the html will be ready before the script, Terance. And finally we added a button inter html so that when they click it, they'll show that secret message. Let's reload our website. You could see the button is here Now. If I click this boom, it says the secret message in this little alert box here. That was a quick introduction into JavaScript. Like I said before, it's a programming language that can do a lot of things and so link this resource here. If you want to learn Java script more in depth and do lots of cool things with it, build some cool little applications. 10. Uploading your website: Now let's get our site uploaded online so that we can share it with others. There are many different services for this. This one is called nettle. If I There's also another one called get help pages and surge. Personally, I think metal, if I will be at the easiest one for you. Um, logged in here. So once you make an account, you and you log in, you'll land on this page here, go ahead and open the folder that we stored all of our files in and dragged us over to the nettle If I tab Okay, so after a few seconds, depending on how fast it is you get this. You are well here. If you click that and boom can see our site is now online and working. And here's the domain slash You're all here. You can actually start sharing with people. Someone else will be able to go to this and see everything that you added on here. If you ever want to update your website, you can go ahead to the deploys tap here and then dragged your folder again with updated files. All right, huge. Congratulations to getting your first website up in online. I hope that you share it in the Project gallery on my skill share class. Make sure it's also follow my sculpture profile and look out for other classes that I posed in. What development? But for now, make sure to keep improving in your HTML and CSS and your job script skills. This way you can keep adding more stuff to your website, which I think is where the fun in this really lies. I've already mentioned the Mozilla Developer Network. They have really great documentation on these three different technologies on the Web as well as many other different things. So definitely check that out. Continue learning and I'll see you in the concluding video. 11. Final thoughts: Okay, so that concludes the class. But before you go, definitely let me know with the review in terms of what you learned how this class has helped you. Or maybe it hasn't definitely prefer anything constructive. And if you build something really cool power personal site, you know, something super simple or took it farther. Definitely love to see it. I get my feet back on it as well as anyone else that's in this class. And so make sure poster project in the project gallery and I will post more classes in future developments. If you want tapes farther, I'll definitely show you how to do that. So make sure you follow my profile that way. You know something. And again, thank you so much for watching the videos of being part of the class.