Build Websites from Scratch using HTML, CSS, and JavaScript (NO PROGRAMMING EXPERIENCE REQUIRED)

1. Epic Intro: How does someone with no programming experience and go from an empty white page to an interactive, stylized website using code. I'll tell you, but first, let me explain what makes a website. The web uses three fundamental languages to work. These languages are called HTML, CSS, and JavaScript. What do they do? You might ask, well, HTML is used for structuring the content of web pages. Without it, your website would look like this. However, HTML alone makes for a pretty boring website. That's where CSS comes on. Css is the design line. It makes everything look pretty so that people will come back to your website. Lastly is JavaScript. It helps make your website interactive so that it can do things like this. So let's go back to our first question. How does someone with no programming experience create a stylized website using code? It's simple. In less than two hours, they watch a beginner friendly course that gives them the skills necessary to start becoming masters of the fundamental web languages. Lucky for you, I know just the course. It's called build websites from scratch using HTML, CSS, and JavaScript. No programming experience required filling. In this course, you'll learn how to create the building blocks of a website in HTML. Make it look awesome CSS, and get a little extra cool with JavaScript. Who'll your instructor be? Well, that's me. Hi, I'm Taylor English and I like programming. So what are you waiting for? Click on the next lesson to get started. 2. How to Set Up Your Computer to Write Code: All right, The first thing that we're going to need to start writing our website from scratch is a code editor. Now, if you want, you can use something like Notepad, but I wouldn't really recommend it because this is just a basic text editor. There are much better tools that can help us write code. The program I'm going to show you today is pretty easy to use and I'm going to show you all the tips and tricks that you'll need. It's a program called Visual Studio Code, also known as VS Code, and it's made by Microsoft. So if you go to your web browser, you can simply search VS Code and just click on the first page. Now I'm on Windows, so I'm gonna download it for Windows. If you click on this arrow here, you can also download it for Mac or Linux, or there's other downloads as well. Now, if you're on Windows 11 and maybe even Windows ten, this might work. You can go to the Microsoft Store, which is built into your computer. You can download it from there too. If you do it that way, I believe it will automatically keep the program updated for you, which is pretty nice. I'm just going to download it for Windows. It's a pretty small download. Should be pretty quick. There it is. You can just hit open. And the installers pretty straightforward. Just accept the agreement. You don't need to modify anything on this page unless you want to, but we won't need to for this tutorial. Just hit Next and then click Install. Now, I already have it on my computer, so I'm not going to re-install it, but let me show you how it works. So when you log in, you'll probably see something like this. Now this is just a little Get Started page something to help you write your code. You can use this if you want or uncheck this box so that it doesn't show up on startup. But what we're going to need to do first to start our project is create a folder where we can store all of the files for our website. Click on file, and click Open Folder. Now we need to choose a place to store this. So I'm going to, let's see. I'm going to create a folder here. I'm just going to call it my my website. Now, if I were you, I would make it all one word without any spaces or fancy symbols, just because that might make some of the process easier later on. Click on this click Select Folder. Now we're inside that folder. So let me show you some of the features of Visual Studio Code or VS code. Over here on the left we have our explorer. This is where you'll see all the files that are in this folder. You can click on this icon here to make a new file. For example, if I wanted to make a simple text file, I could say some file.txt. And when you put that file extension, the dot TXT, it automatically recognizes what that is and it'll give it a little icon. Now for you, the icons may be different. I use some special modifications. This program to make. Some things look a little different, so it may not appear exactly the same for you. If you dig through the settings, you can change the color scheme and things like that. But we won't do that in this tutorial. You can create files. This button will create folders. Again, you may not have these icons. You may just see this arrow and that's just fine. This icon will refresh this folder in case any changes have been made, which usually you don't really need this. If you have folders open. So for example, if I had this file in here, then pressing this button would collapse all up and boulders. Okay, Let's look at some of the other features. I'm going to just delete this. This is the search, the search option. This allows you to search your entire project, search all of your folders and files. So that's super nifty. We won't need to worry about source control. We may get to that later on when we start to publish a website, but not going to worry about that right now. We won't worry about running d by remote Explorer, but we will take a look at extensions. This is one of the best features about Visual Studio Code. Visual Studio Code is very modular, meaning that you can add lots of functionality to it very easily and it's free, which is really cool. In here. There are all sorts of extensions that you can get that will, they'll help you out. So I'm just going to recommend a couple that could be helpful for this course. If you look at HTML tag wrap, that's something you may see me using from time to time. It's just a way to select some text and then wrap all of that text in HTML tags, which we'll learn about later. Not necessary but helpful, lives there. You will want to download this, this will be very helpful. It'll just help us, it'll just help make the process of editing a lot easier. I would highly recommend downloading live server. Then if you do want your icons to look the way mine do, you can download this material, Icon, Theme and so forth. So I believe that's all of the extensions that will actually need for this. Of course. Often when you're editing in other programming languages, you can get extensions for the various languages and it will help their syntax highlighting. The syntax highlighting basically just means parts of the code are colored differently. So it helps you see things better while you're editing. Those are the main aspects of the editor. In the next video, we'll get into how to actually start up your project and start writing code. 3. How to Set Up Your First Webpage in HTML: In this video, we're going to start creating our first, our first web page, just a simple page. And I'm going to show you the structure of HTML and basically how to structure a simple website and run it on your own computer. We're going to hop to our code editor VS Code and come over here and go ahead and create a new file. And we're going to call this file index.html. Now you're probably wondering, why are we calling index. That's just sort of a standard with web development and it helps the process of publishing your site go a lot more smoothly. Now we need to put dot HTML because this is an HTML file. So let me explain HTML. Website structure. Essentially there are three components to almost every website. Html, CSS and JavaScript. Html is the structure of the page. All of the images, all of the text, of the buttons, everything like that. Css, which we'll learn later on, makes it look pretty, right. It makes everything look nice and neat, just the way you want it. Then JavaScript makes it the website interactive. It makes buttons do things. It makes things happen when you click on stuff or whatever. We're going to learn all three of these languages to some extent. But we're gonna start with HTML. Let me explain how HTML works. It uses a system of tags. Let me show you just some basic structure. Then I'll explain how all of this works. Everything is nested inside of these tags. You'll have an opening tag, which is simply these two brackets with the name of the tag inside. And then you have a closing tag which has a forward slash, and then the name of the tag you always need. Well, I shouldn't say that. You almost always need both. There are some tags that don't require a closing tag, but the majority of them do. Every website is going to have these three tags. By three, I mean, these, these three opening tags and there companion closing tags, you need an HTML tag, a head tag, and a body tag. Let's start with HTML if you want to. But one thing that's really nice about VS Code is you don't have to type out the full name of the tag. You don't have to take out the brackets. You just type out this quick name like HTML and press Tab and it will autocomplete it for you. And then I'm just going to press Enter. And that's going to create that space right there. The HTML tag. It doesn't do a lot, but It's sort of the standard of creating the structure of the page. Everything in the HTML page bits inside the HTML brackets for the HTML tags. Now we have the head tag. The head tag is important because it specifies important information about your website. For example, the name of the page which is displayed on the tab at the top. So for example, if I were to write here where it says new tab, that is something that we defined in the head tag. It's important. We'll define some other information in there, but we probably won't get very deep into it. We won't need to do too much with it. Now under that is the body tag. Now be careful not to put the body tag inside the head tag. It has to be below it. Inside the body tag is basically where we put everything else. This is the rest of the HTML page. It's the body of the page. To get started with our simple website inside the head tag, put a title tag. The title is that part. At the top of the page, the tab that you see. I'm just going to say my website. You can say whatever you want here. It doesn't matter. It's just gonna be that text displayed up there. Because this is just a simple one-line statement. I'm not going to break it up like I did the other the other ones. That's all we're going to put in head for now. Then in body, Let's do a p tag, which stands for paragraph. And that is just some normal text. And you just put any text in the p tag. And we're just going to say, welcome to my website. Press Save. Now we need to run the page. This is when that Live Server extension comes in handy. If you'll notice down here in the bottom right is a button that says Go Live and it says click to run live server. Go ahead and click that. If you don't see that button, you can just right-click on the page and click Open with live server. That's going to open up a page in your web browser that displays your website. I just want to congratulate you real quick. You have created a website. This is a website for all intents and purposes. It's that it's not a very interesting one yet. But this is a website you can do. This. Web programming is really fun and it's not terribly difficult. We can learn this. That's our website. Now what's really cool about Live Server is that while we're editing, anytime we press save, it, automatically refreshes our page and refreshes our changes. If I add another paragraph tag and just say hello world, and save it, automatically refreshes and appears on the page. Now one thing you'll notice when I put down that hello world is that it appeared below. Welcome to my website instead of next to it. And that's because paragraph tags display things as blocks. Meaning. You can imagine a block that goes all the way across the page. For this welcome to my website. In fact, we can visualize this like this. You have to worry about what this is. These are just some helpful development tools in the browser. But pay attention to this. Everything I've highlighted in blue is the body. And you can see that highlighted right here. Now if I highlight over each of these, you can see it says it's a paragraph tag right there. You can see the letter P and it takes up this whole row. And that's because the paragraph tag is a block tag. It takes about whole section. Any other tag that you put next is going to go under it automatically. This is something that we'll be able to change later on using CSS if we like. But for now, just acknowledge that. And let me show you a couple other useful tags. So we learned the p tag. That's for simple paragraphs. If you want headers, there are a couple of tags for that. So there's H1, H2, H3, by H6. Okay, So these are the sudden or sorry, the six sizes of headers. One being the biggest, six being the smallest. Us. It's a useful tag to have. So for example, if we've got, if you're writing a blog, for example, you can have a header one and welcome to my blog. Then under that you can put a paragraph tag and say, put some text here. That's kind of how you can use those headers. That's a very common and useful tag. Let's learn some other tags. Let's learn about lists. If you want a numbered list, then you can say l, which means ordered list, meaning it'll be ordered 12345. So on, inside of the ordered list, you need to put list items which are LI tags. I want to say item one, item two, item three, and so forth. You'll also notice that it automatically indents them. Now if you want a bullet point list, then that is what we call an unordered list or a UL. We can do the same thing, but those same list items in there. But instead of numbering them, it gives them bullet points. Alright, so these are just a few of the tags that we're going to be using. There are other texts for things like images, links, buttons, and so forth. And we'll get into that in later videos. But for now, this is the basics of how to set up an HTML website. Remember we created an index.html. The dot HTML is very important. Then we have opening tags and closing tags. Every HTML page has an HTML tag, a head tag, and a body tag. 4. Other Useful HTML Tags (Part 1): In this video, we're going to talk about some other HTML tags that you will probably find useful. The first one that we're going to start with is called the a tag. And we're going to use it for making links. And why it's called the a tag. It's a little confusing. It stands for anchor, but we don't need to worry about that for this video. So just go ahead and type the letter a and hit Tab. You'll see that it creates a tag with an attribute called atrial. H ref is essentially where we put the link for whatever we're going to put in here. Ups make a quick note about attributes. And attribute in HTML is kind of something that you put inside of the opening tag of an element. These are all elements to put it inside the opening tag. And we're going to learn a little bit more about attributes later, but they let you change styling and other things like that. But for this one we need to put the link in it. So I'm just gonna go to Google. I'm just going to grab that link, throw it in here. Now if I hit Save, you'll notice nothing happened. And that's because we actually need to attach the link to some text. I'm just going to put in-between the opening and closing tag. I'll just type Google. You'll see that we have it says Google right here and it's underlined showing us that it's a link. If you go ahead and click that, and it'll take you to Google. Quick note about a tags and links. It is very important that you have the HTTP or HTTPS. I am pretty sure that it will not work without it. I could be wrong, but I would usually be safe and include that. The next tag we're going to talk about is the b tag. This is pretty straightforward. It just stands for bold. If I have a p tag, I've got some text and I just say, hello world. If I want to make World bold, then I'm going to surround it in a b tag. Okay, So it makes that bold. Now I'll make a quick note about what I just did. You saw I selected world and I pressed Alt W on my keyboard, which doesn't, it won't work for you yet. I'm going to show you how to make this work. This is the tag wrap extension that I talked about earlier in the video. If you go to Extensions and find HTML tag wrap, go ahead and install that if you want. This is just a useful trick. The way you use it as you select the word and press Alt W. And then you can type in anything you want. And it will put it in both the opening and closing tags. So if I put the b here, then it puts its inputs both right there. It's pretty cool. Now if you want to make the spacing a little less confusing, you can actually nest the paragraph tag like this, and that's just fine. Now I'm going to show you another tag. That is the I tag or italicize. So let's just say it again. We'll put that in. You can see right there, it italicize that. Now you're probably wondering what just happened here, where it puts both of these phrases next to each other instead of one on top, one on bottom. Because in the code editor, one was on top and one on the bottom. Well, if we go back to what we talked about with block elements, paragraph tag is a block element, meaning it's going to be a single block. Everything inside of it will be a block. If you want to put something under it, you need to put another block under it. The way that this text is being read, it might as well be directly attached to it. Not having us pressing Enter right here and doing that break. It. It doesn't help us here. What we would need to do is. Create a second paragraph tag, so a second block and put it in there and that way it would put it under. Now, again, you don't have to nest these, but it can help if you have multiple tags that can make things a little less confusing. Let's now talk about the image tag. Go ahead and type IMG and hit Tab. This is simply for displaying images on your website. It has two attributes. One is the source attribute and what is the alt attribute? Source is where your photo is located on your computer. I'll tell you about ALT in a minute. Let me go find I've got a picture here on my computer, so I'll go grab that and just drag it into my files. This is just a picture of me playing the piano. If you don't know, I really enjoy playing the piano. But anyway, I've got that picture right there. To make things simple. I'm going to go to rename and I'm going to stick. I'm gonna get rid of all the spaces that will just make our lives easier. In the source tag, we need to type in this playing the piano dot JPG, JPEG. That's the source. Now if we hit Save, it's going to show up. Really, really big. Wow. It's an enormous picture. I'm going to show you how to adjust that in just a minute. But let's talk about this alt tag real quick. The alt tag is used to display a description of an image. If it fails to load. If we were to put playing the piano right here. Let's mess up the stores link real quick. Get rid of a letter and hit Save. It can't find the image because it doesn't know what it's called properly. And so we get this little error and a description playing the piano that can be handy. Now if you've ever hover your mouse over an image or something else, and it shows you the little floating text box. That is what we call the title attribute. And let me show you how that works. We can add an attribute here and say title. And if we say playing the piano right here, then when we hover over, the image, will get that little text blurb where it says playing the piano. Now, this image is not very well sized, its enormous. So how can we fix that? We can add a width, attribute, the tag. If we say width, we can enter a measurement. We're going to do it in pixels. If you're unfamiliar with pixels, essentially your screen is made up of millions and millions of pixels, and that's what creates the whole image on your screen. A picture such as this, me playing the piano, is made up of a certain width in pixels and a certain height in pixels. We can check what it is for this image by going into our file explorer. We right-click on the image. Then say Reveal in File Explorer. Then we can right-click on this and go to properties. And then go to details. Right here you'll see the dimensions. It's 4 thousand by 6 thousand, and you'll see the width is 4 thousand pixels, height is 6 thousand pixels. I'm going to try to resize it to something pretty small. I'm going to shrink it quite a bit and just say 300 pixels. You write that by 300 px and make sure there's no space between the number and px. And hit Save. There's the image. Now, you're probably wondering, do I have to check the size of every image I put on? Absolutely not. You can definitely mess around with this however you like. You can just guess numbers. And if it's not quite what you'd like, make it a little bigger. Now, the reason we're only putting in the width is because if we only put in this one measurement, this one-dimension, it will automatically keep the scaling of the height so that it stays the same. If we wanted, we could add a height attributes and we could choose whatever we want. I can make it a square and say 300 pixels. That would squish our image into a squared. Now that's probably not ideal for most cases. That's why you would just keep keep the one-dimension. Either you could keep the width, the height. It would automatically scale the other. It would keep your image intact. That is the image tag. In the next video, we'll talk about a few more tags. 5. Other Useful HTML Tags (Part 2): We're going to talk about three more tags and then we're going to move onto styling. So I'm excited for that. Earlier I told you about the paragraph tag and how it's a block element. If you remember, we showed you an example where if you put some text inside of this paragraph, it's actually just going to append it directly to the last bit. What if you want to replicate that behavior but have separate tags? Well, there's a tag for that. It's called the span tag. The span tag is not a block element, It's an inline element, meaning that it will be put next to whatever, whatever you're trying to create. Now the thing with inline is that we can't put it next to the paragraph tag because paragraph is a block type. Anything you put under it is going to be a new block. However, we can attach a couple of span tags together. These span tags will sit next to each other. But if we were to put another paragraph tag, that would be a new block. Okay. Let me show you something. If I, I'm going to highlight these in a way that you can see each of the elements. You can see that hello is its own block. Then these are inline elements, they are separate. You can see the hello again is attached to each other. They're separate from each other, but they're on the same line. And then the paragraph tag separates from those ones. That's the span tag. Next, we will talk about the break tag. The break tag simply means you want some space between different objects. So if I have my paragraph tag here and then I want to put an image, let's say, Do I still have that image out there? It is, yes. Let's say I've got this image with a width of 100. Let's say I want more space between this image. I'll say playing the piano. I can simply put a break tag which is just BR. Now you'll notice it only created the one opening tag. The break tag is one of those tags that doesn't need a closing tag. It just is its own little thing. You can see it put that space right there. Now, I can copy and paste this a couple of times. And it puts a bunch of space. That is the break tag. Now the third tag that we're going to talk about is the button tag, which we're not going to do a lot with it right now, but we're gonna do a lot with it later. The button tag is fun, it's fairly straightforward. You just put some text inside of what you want the button to say. I can say push me. Now there is a button. Now this is a fun fact. You'll notice that the button went next to the image and that's because the button is an inline elements as is the image. Those are both inline, so they're both next to me. So for example, if I wanted to put the button under it, if I could just put a break tag, maybe a couple. Now you can see the push Me button. I can click it, and it's pretty basic, but it doesn't do anything. It's kind of tricky to get a lot of functionality with buttons using just HTML. We're going to need some JavaScript for that. So stay tuned. We're going to do some cool interactive things later on with JavaScript and width, the buttons. 6. Let's Build an Awesome Website!: In this section of the course, I'm going to show you how to replicate the website that you're looking at using HTML, CSS, and a little bit of JavaScript. So let me give you a quick tour around this website so that you know what it is that we're working on. It's it's pretty basic and its functionality, it is a simple slideshow. It doesn't move automatically, but we can change the images here by clicking on these images below. You'll see that there's a little bit of a bubble effect. So when I highlight over each of the images, they pop out a little bit. You can see they're evenly separated and they're centered on the page like this. You can also see this Explorer logo at the top. Just a fancy font that turns blue when I mouse over it. And the navigation buttons turn red when I mouse over them. I'm also going to show you a page navigation. So if we click on this gallery page, It's just a simple page I created that displays all four images that are available, but I'm going to show you how to do that page navigation. Now, although this website is pretty simple, I want to impress upon your minds the importance of the CSS in this project. And I can actually go ahead and disable the CSS here and show you what it looks like without. Let me go ahead and do that. This is the raw HTML of the page. We have enormous images that don't fit on the screen. Then we just have some weird navigation buttons that aren't that great. Except the CSS was still on that other page. But you can see that the CSS plays a huge, huge role in what a webpage looks like. And we don't want it to just be made of HTML. In the next couple of videos, I'm going to show you how to structure this site in HTML. And we'll learn a couple of new things there. I'm also, and then the later videos, we will learn all the CSS required for this as well as the JavaScript for it. There's not very much JavaScript, but there is just a little bit to make the image changing in the slideshow work. I'll see you in the next video. 7. Styling Your Header and Main Image (CSS Part 1): Alright, let's get building this website. To begin. I've started out with a fresh folder. You're welcome to do the same or modify the files that we worked on earlier. If you'd like, I would recommend starting with just a fresh folder though. What we're going to do first is create our index.html file. We're just going to create one file at a time. I'll create that new file, index.html. We'll start with the basics, the HTML tag and inside the head tag, and inside that, the title type. The title for this. The goal here is to replicate this page. Up here on the tab it says explored. And so that's what the title tag is. Four. We're going to explore. Then we can actually line these up here. There we go. Then under the head tag, I'm going to create a body tag. We're going to put an H1. Just say explore that. We get that big header up there. Let's see what this looks like so far. I'm going to save it and right-click and press Open With Live Server. This is going to open up another tab here. We can see what our page looks like. This is what we have so far, just the H1 and it also says Explorer up here at the top. That's awesome. Next, I'm going to skip the navigation for now, but let's put in the images. Okay? So what we want is a main image with four images underneath. I'm just going to put an image tag. Now we need the actual images. I'm going to include a link in R. I'm going to include download links for the images and any other, like links or things I talked about in the course, that'll all be in the description of the course. I'm going to include links to download the images, but let me go ahead and grab those real quick. I've got those four images. Let's put it right here. Now you'll see, you may see this dot VS code folder. You don't need to worry about this. It's just something that's automatically created by VS Code and it seems certain settings in it, but we won't touch it. It won't affect our project in any way really. I've got my four images and I can actually view them here in VS Code. They're really big images, so they do take a second to load. But I've got my four images. So what we want to do is we want our main image to start as we want to take one of the images to start with, I'm going to just choose Image one, which I've named as for this, this image in the source, we're just going to say immediate one dot JPEG. What we can do in the alt text, which if you remember, the alt-text is we'll appears if an image cannot display. Here, I'm just going to say mountains. Or let's see, I'll say a city in the mountains. I think that's a decent description. Doesn't do the picture justice though. Okay, so I'll save that and we'll look at our page now. We've got Explore up here and then an enormous image. We're going to have to work on re-sizing that, which will be done with the CSS. We've got our main image. Let's just start with that. Let's start working on our CSS. We need to create a new file. We'll call it style.css. We need to link that file in our HTML inside of the head tag. Under the title tag, we're going to say link. Then you can mouse down, arrow down to CSS. And it will create all of this for you. Let's say it's a style sheet, which is what CSS is. And then the link to the actual file by default it is style.css. We're pretty lucky there with our naming. Now, we need to test to make sure the CSS file works. So let's try to tweak something simple. We want the page to be black. One way we can do that is we can actually. We can attach some styles to the entire body of the page, to the body tag itself, and make the page black. Let me show you how to do this in our style sheets, in our CSS. You can name a tag. I'm going to say body name of the tag. And then you're going to put these curly brackets here. And once you create, once you hit the opening bracket, it creates a pair automatically, then you can just press Enter and it will do this for you. Now, we can put just, we can put our CSS properties in there, which are the individual elements of style that we add to the page. What we want here is background color, black. It's pretty straightforward as we work on more CSS, you'll see that a lot of it is very readable, easily understood. Now, SSS is not always easy. It can become very complex. But I hope that what I showed you will make sense. And I hope that you're not scared away from CSS because it really is a great language and it is fairly intuitive most of the time, in my opinion. So go ahead and hit Save. So what we've done here is we told the body tag and make it's background color black, meaning the entire background of the page should be black. If we go to our page, you can see it is technically true. But we just have this image that's taken out most of the page so you can't really tell that it's the background is black. Okay, so let's work with that. Let's, let's shrink the image. I'm going to show you something called an ID. In CSS, we have essentially three main ways of attaching styles to elements. We can select an element by its tag name, which you just saw with the body tag. Or we can use an ID or class. A class is when you want to attach a style to multiple things. You give the same class to each of the tags. And then you can give the same style, all of them. And ID is where we only want to give a style to one. Let me show you how to do this. In an image tag. We want to shrink the width a little bit. So what I'm going to do is inside of the tag, I'm going to add another attribute, sources, an attribute, alt as an attribute. We're going to add another attribute and we're going to call it ID. If you just press ID and hit tab, it should create this little equals and then quotation works. Now inside this is what we name the ID. This can be whatever you want. I'm going to call it main image. Okay? Now, typically, if you want multiple words in the name of an ID or class, you'll want to put a hyphen between the words. That's just the standard that's usually followed. We're going to put main image there. Now what we can do is we can select that in our style.css. Now in order to tell the CSS that this is an ID instead of a tag, is we need to put a pound sign, let's say main image. If it's a class, we would put a dot and say main image like this. But it's an ID, so we'll put a pound sign. And now we want to change its width property. Let's see here. We're going to give it a width, 100%. Now, this means the width is going to take up 100% of the container. Essentially. The container for this image is the body. That's how it sits in the hierarchy. Inside of the body. It's going to take a 100% of the width. So let's see what that looks like. Awesome. We can see that now the image doesn't extend beyond the width of the display of the screen. It does extend beyond the height. But it fits width wise on the screen because it takes up a 100% of the width. Now, what we want to do is the thing is if we resize this, you'll see that the how much of the image changes depending on what the width is. We want this to stay pretty constant. We're going to give it a height of 400 pixels. Now you can see that squished the image a little bit. But this is essentially the same size as it is here. We take a look. It's about the same size, but it's all blurry. Now we're going to use a CSS property called object bit. And I don't know everything about this property. But what I can tell you is that like the name says, it changes how the object on the page, the value that we're going to give to it is cover. Now what that did is it made it so that the image isn't squished anymore but it is cut off. Meaning if you change the size of it, you'll see different pieces of the picture. Essentially it's keeping the same aspect ratio. But depending on the size of the screen, you're going to see a different part of the image. Now for our purposes, that's okay. You can see on the main page, as I re-size it, we get that effect as well. We've got our image. Now, what we want to do is we can't see any of our texts. We can't see the Explorer up here. It's there, somewhere. There we go. It's hiding because black. Let's go ahead and change the color of that. Let's see. We have our one here. So I'm going to add 81 because it's the name of the tag. I'm just going to say color, white. You can see CSS, it's not too bad. Now things like object fit can be a little confusing. I will put links to a CSS reference and an HTML reference that will show you every HTML and CSS property and tagged that you could possibly want to use. And it gives you great detail about how to use it properly. Very helpful. When you're doing web development. You don't need to memorize everything. You don't even need to memorize exactly how everything works. What is important is that you know how to research and figure out the information that you need. And that's actually pretty common in most programming. Before I end this video, Let's do one more thing. Let's change the style of this Explorer so that it has that fancy fonts and so that it's centered on the page. The way I did this as I used a website called Google fonts. If you go to fonts.google.com, you'll be brought to this page. You probably didn't know this existed, but it's pretty awesome. Let me show you how it works. I can type something in here. I could say Explorer. It's going to show us all of these different bonds that we could choose from. A whole bunch of different things we could use that we can incorporate for free into our website. The font that we want to use is called water brush. That's this one right here. You can go ahead and click on it. And most fonts will have several weights, meaning basically how bold is. And so you can see those. You can also just type and see what it would look like in different sizes and that type of thing. What we want to do is click select this style. Now come up here and click view selected families. Now I've got some other stuff, so let me remove that. I just have this water brush. Now it says to use on the web. All you need to do is embed this tag, this piece of code into HTML, and then use this to use this font family in the CSS. We'll copy this, will come over into our HTML. And we'll paste it underneath our link to the style.css. I'll just paste up there. It might appear really in here. If you click at the beginning of a line and press Tab, then you can align everything properly. Now if we hit Save, it doesn't immediately make it look like we want. The other part is very important to where it says the CSS rules. We're going to go ahead and copy that. And in our H1 in the CSS, just go ahead and paste that. This property is called font-family. And as you can imagine, it changes what the font is. This font is called water brush, which has access to using Google Fonts. And it says it's cursive. Will press Save. You can go ahead and look at the page. And then we go, It is now fancy. It's all cursive. So that's pretty cool. Now what we need to do is center it at the top of the page. What we can do for that is we're going to change the font size now by typing font size. If you scroll down, you'll see that there are lots of different strange symbols. Basically, these are different units of measurement. We're going to use one called EMS, spelled EM. Let me show you what one looks like. It looks like this. M is essentially the default font size of your browser. I think it's based on the height of the letter M. This is one m, and this may be different depending on your browser settings. But what we want to do is if you change it, this is two times that. What we want is five amps, which has five times the default font size. There are other ways you can do block sizes. You can do them in pixels. You can actually do them in inches, centimeters, all sorts of things. You can experiment with those or look online to learn how to use them. That, because there are lots of interesting ways of doing things, you can also use percentages like we did up here. But we're going to use ems. Now we've got it. We've got the font size going. What we need now is to align it in the middle of the page. I add another property and say text-align center. And as you can imagine, that aligns the text in the center of the image, just like we wanted. Were getting close. You can see we're not quite there yet, but we're getting a lot done. In the next video, we'll do even more styling. 8. Selector Specificity and Hover Effects (CSS Part 2): Alright, let's do some more CSS. Okay, so the first thing that I want you to look at, when we compare these websites, you can almost see a difference in the side of the image. You'll see here this image extends all the way to the edges of the screen. Whereas here it does. Why is that? Well, browsers will automatically put sort of a padding or essentially a layer of space on the page. They just do by default, we actually need to do something to get rid of that so that we can style it how we want to make it look exactly the same on every device. Okay, So let's go ahead and look at our code. Here's how we can do this. At the top of our CSS. Make some space and put a star, an asterisk. The asterisk is a symbol that means everything. Meaning. Instead of selecting one tag or a class or an ID, this applies to everything on the page. Okay? Now I should mention each of these is what we call a selector, a CSS selector. So this is just another CSS selector and it means we're selecting everything. So what we need to do is get rid of the defaults. And so we're going to add two properties. One is called margin and one is called padding. So what's the difference? Well, margin is essentially how much space is on the outside of an object. So if you have two objects right here and right here, the margin is the space between them. The padding is, for example, if you have one object here and then an object inside of it, like some texts, the padding is how much space is between the edges of the object and what's inside. Okay, So we'll probably talk about that a little more. As we go on. We'll add some margin and padding to things. But what we wanna do is we want to set those properties to 0 by default, we want a margin of 0, padding of 0. So watch what's going to happen. We hit Save and instantly you'll see that the image went up against the sides of the screen. And that's because we got rid of those default properties. So you may be wondering, well, if we apply a margin of 0 and a padding of 0, everything, what happens if we want to change those properties later on? Well, the neat thing about CSS is that the property that applies to an object is it depends on how specific you are. Okay. That sounds a little confusing. Let me explain. For example, if we have this body tag, have a background color of black. Well, let's say we want to put a box somewhere on the page that has a background color of blue. Okay. What we can do is we could give the box, I'm more specific selector like an ID or a class. And say it has a different background color. And then the one that's more vague, we're farther away is canceled out. So if we look, so the way the specificity works is tags are the most general, then classes and then IDs. So an ID is going to be trumped everything. It's going to make it. So whatever you say in the ID rules out everything else you've said before. Alright? I hope that makes a little bit of, a little bit of sense. We're not going to have to worry too much about specificity in CSS in this class. If you want to learn more about it, you can find tons of stuff about it online. But just thought I should let you know what kind of how that works. If you didn't understand what I just talked about, let me sum it up by saying, we can apply this margin of 0 and this padding of 0 to everything. But this selector is very general since it just applies generally to everything. If we make something more specific, like we select the tag or the class or the ID. Whatever margin or padding we've put on that trumps everything and out rules. This. Okay? This just sets the stage for letting us do whatever we want. Go ahead and save that. What's different? Well, there's some different spacing here between the the header here and the nav. We also have these images down here. And we also have these neat hover effects. So let's start with that. How to do the cool hover? Alright, it's fairly simple. What we need to do is create another selector. And we're going to say it's H1, but we put a colon and we say hover, meaning we're, we're selecting the H1 tag, but we're being specific and saying if we're hovering over it, like this, hovering the mouse. Okay. So then what we can do is we can put a color of blue. And more specifically, we're going to use this color. Alright? Now, what you can do is you can copy this word for word if you want. But let me show you how how this works. So when I created this, I originally started out with blue. The cool thing about VS Code is that if you mouse over a color, it lets you change it. You have this color picker. Okay. I found the color that I wanted. And you can see it's got this RGB code at the top. And so that's essentially what this is. The RGB code basically means this is the amount of red, this is the amount of green, and this is the amount of blue to get this color. And so the syntax for that is RGB. And then in parentheses, you just separate the values by Aqaba. And make sure there's a semicolon after that. So if we hit Save and we go to our page, if I highlight over it, it now turns black color. You will notice however, that my cursor is not quite what we want it. If you look over here, it's got more of the pointing finger. It's something that identifies that you can click it, which you can. But we don't have that here. So how can we get that? Well, on this same hover selector will add another property called cursor. There are a variety of cursors that you can get. Everything from loading to basically every cursor you've ever seen on the web can be defined here for the most part. For example, if we put grab and we hit Save, it gives us that little grabbing hand, like we could move it. Okay, so the one we're looking for is called pointer. That's just this simple click sort of thing. So we want that. We also want to put a transition here that sort of fades in, fades in the the balloon so that it looks a little more natural. Like right here. You can see it kind of fades in a little more slowly. So we're gonna put a property here called transition. We're going to use a transition called ease in, out. Now, what that means is the transition has, it basically has a slow start and a slow end. Ease in and out. Okay? And so the output is a little hard to see with this here, but you can also just say ease in. There's a variety of transitions you can use. Next to ease in out, we're going to put a space and put 0.2 S four seconds. So that essentially makes it so that the animation I'll happens within 0.2 seconds. It save. And now we mouse over it. And you can see even though it's only 0.2 seconds makes a difference. It feels more natural. It's just, it just feels nicer. Okay? So we've got our header basically done. Why don't we put the four images underneath the main image here. What we want to do in our code, we're going to create an unordered list. So the unordered list is basically a bullet point list. It's not numbered. An ordered list would be numbered. So we're essentially making a bullet point list and I'll show you why in just a minute. But inside this bullet point. Lists, we want to put each of the images. So we're going to say LI for list item. And we're going to create an image tag. Image and the source. We want image 1234. We want to display all of them. They'll say image one dot JPEG, JPEG. And we can put in the mountains right there. Okay, Now, I'm going to copy this and paste it three times so that we have four of these. Then just change image to image three and image for. Now, for the purposes of this class, I'm not going to worry about the other alt tags, but that is something you probably want to put it in. You're going to choose. Let's see what this looks like. Okay, so we can see it shows the images. They're enormous though. It looks like we need to resize those. Okay? So what we're going to do is we're gonna create a class for these images. Because if I were to just say select, sorry, if I were to just use the image tag, it would also modify this. And we don't want this to look the same as the smaller images. So let me show you how to create a class. We're going to add an HTML attribute called class. You can just hit tab there. And we're going to call this small image or IMG. Now the reason we're creating a class is because we want to apply the same properties to all four of these images. So we're going to add this class, each tag in the list. I'll save that in our style.css will type dot for the class and we'll say small image. And we want to give each of these a width of 100 pixels. Okay, It's just make them really, anybody just really small. And let's see what that looks like. Okay? So we have the four images right there. Okay? Now we need them to be centered. So let's just keep going. Let's, let's actually just style the images first and then I'll show you how we do the spacing. Okay? So let's give each of them a border of, we're going to say a three pixel border, which means it's three pixels thick. I'm going to say solid white. Now to round the corners, we're going to use a property called border radius, which is just a fancy way of saying we're going to round the corners and we're going to save ten pixels. So you can mess with the measurement here. But essentially, the higher the pixel count is, the greater the current is until it almost becomes circular. So we're gonna say ten pixels to just get a rounded rectangle. Look. Okay? And yeah, so let's leave those there for now. In the next video, I'll explain how to how to align them horizontally under this image. 9. Learning Flexbox and Margin Spacing (CSS Part 3): In this video, we're going to learn about an awesome CSS property called Flexbox. Sounds scary, but I promise it's awesome. Let me kind of draw out what it is so that you can understand that a little bit better. Let's imagine that we have this box, this container, okay? And actually, let's size it like this. Right now. Our images are stacked like this. Okay? So that looks like that. So that's kind of what we have going on. Now when we apply Flexbox. Here's what's going to change. Everything is going to become horizontal. And then suddenly everything is going to be aligned like this, right? Oh, you didn't see I'm not very skilled at whiteboard. But you get the idea, everything will be inside of it. And the flexbox gives us some other interesting properties. I'm going to put a link to a specifically a flexbox reference in the class description. I would highly, highly recommend looking at it. It's beautifully diagram, just really explains things a lot better than I can here. But I'm going to show you how we're going to use this in our site. So what we want to do is apply the flexbox property to the unordered list because that is what is containing All the list item elements. So if you forgot, these are technically all bullet point items. You just can't really see the bullet points. Because everything is black and mashed together. And we're actually going to get rid of the bullet points later on, I'll show you how to do that. But what we need to do is make this into a flexbox so that it can be horizontal. So I'm going to type UL for the unordered list tag and say display flex box. Now, if you look, there are other things here. When we talked about HTML and the beginning of the class, we talked a little bit about block and inline elements. So another type of display for an object is a flexbox. And you can actually just write blacks to use the flexbox. Okay. Let's see what happens when we do that. Okay, instantly it turned it sideways. Now we need some space in-between it. So we're going to use a property specific to Flexbox called justify content. So basically, that means justify is the spacing. So how we're going to space the content inside of the box or the unordered list. So we're going to say space. So what that does is let me show you some clips. Sorry, not there. Let me show you something neat here. This purple box is our unordered list. So you can see when we use space between the elements are touching the sides on the ends, but there's space between all of them. If you were to say space around, there would also be spaced on the outside of it. Okay. So that's definitely a step better, but not quite what we're looking for. Okay, so now we need to add another property. We want to give this a restricted width so that it can be cut off and not take up the entire width of the screen. And we're going to give it a width of 500 pixels. Now. Smashed together, it's starting to look more like the original website. Okay? Now what we want to do is we want to put some space in between the main image and these guys. So we're going to use the margin property here. Now the way the margin property works is you can give it anywhere from one to four inputs. Okay? So if we were to say ten pixels, that would put a margin or a space of ten pixels on the top. The bottom and the sides, you can only really tell that it's on the top and on the side. If we were to put a second property, like five pixels, this means there would be ten pixels of space on the top and bottom, and then five pixels on the left. And the rate. If we put another one like five pixels here, then this is ten pixels on the top, five pixels on the left and right, and five pixels the bottom. And then the fourth property, if we put something else like three pixels, then it'd be ten pixels on the top, five pixels on the right, five pixels on the bottom three-pixel lung side. So that sounds really confusing, but let me explain it in a, in a pretty straightforward way. Okay. Let me pull up my whiteboard again so I can explain this a little better. So we have a box here, and then we've got some spacing up here. Some spacing here, here, and here. When you're inputting measurements. Or let's see. When we're inputting. Putting inputs into the margin property, this is how it works. Always start at the top and go counter clockwise. So if we say ten pixels, we start at the top. And because there's only one value, it applies to everything. Okay? If we put another one than the first one is ten pixels. The second one is five pixels. And that applies to both sides. And then the bottom is ten pixels can basically top and bottom are our this first value and then the sides of the same value. If we add another value, then the top is ten pixels. That's sides are five pixels, and the bottom is three pixels. So you can't ever just moving clockwise. Okay? Then if we put one more than the top is ten, the right is five, bottom is three, left is one. I hope that helps somewhat with this. For our purposes though, we're gonna be using something a little different. So we're going to start with a margin of 20 pixels. Let me show you what happened there. It puts the 20 pixels on every side, but we want it to be centered. So for our left and right value, we're actually going to say auto. And what that means is the height is 20 pixels, and then the sides are basically just split up to automatically to be the same space. What that means in practice is that if we re-size this, the space on the left and great changes, but the spaces are the same, right? So the total space changes, but these sides are equivalent. What I, what I mean to say that auto is going to help us Center that they're okay. And now let's put that hover property on it. Okay? So with this one, we want to do it on our small images. So what we're going to do is we're going to actually the first thing that we want to do is get rid of any bullet points that may be there. You can't actually see them because of black. But if this, if everything was white, there you go. If the page is white, you can see there's bullet points, so we need to get rid of those. So what we're going to do before we added the small intimate images is we're just going to say for all list items, we want the list style be none. Meaning you can style your bullet points in different ways and we want there to be no styling, so just doesn't show anything. Okay. Now back to our small images. We're going to create small image. Colon, upper, right, just like we did with the H1. And when we hover on it, in order to get that bubble effect, we're actually going to do something that's pretty simple. You can see the images just get a little bigger. And that's because all it is is it's increasing the width. We can change the width to be, let's do 110 pixels, because normally it's just a 100. And so you can see it's very snappy. When I highlight over it instantly changes. So what we want to do to make that a little smoother is another transition. And for this one we're just going to say ease in and do 0.2 seconds. Okay? So it's a little better. But it looks like there's still some, some work that needs to happen. So it's smooth when we mouse onto it, but when we mouse off it, it's a little too snappy. It's not very smooth. So we want to put the ease out property onto the small images. It's on the small image itself and not the hover. I'll show you why. So if we were to put it, put transition about transform, sorry, transitioning and we say Ease Out Maybe 0.3 seconds. What happens is it eases in when you highlight over it, but then when you mouse or it uses out. So why did we put it on the small image and not hover? Well, because when we hover, we want it to ease in. But when it's just normal, like just without the hover, we want it to ease out. Now you'll notice when we refresh the page, Let's see. It's a little hard to tell. But sometimes the images are. There you go. You can see that the image is do a little ease out effect when the page loads. And that is a result of us putting this here. But I think it's, I think it's alright. Now, there are two more properties that I'm going to add in this video. The first one is that when we mouse over these images, we want it to look like we can click them. Okay, so I'm going to put my cursor and say pointer. Okay, that way it looks like I can click them. Now one more thing you'll notice, when the width of the images expands, they're not centered together. You can see all the tops are aligned here, but the bottoms are not aligned. So we can fix that by going to our UL and adding a property called align items. Now, unlike justify, content, justify is sort of a left and right alignment and align items. Or when you say a line, it's a vertical alignment. So when we say center here, It's going to realign all the images so that they're always centered so that the center of the images is always in line with each other. And that way it's not too big on the bottom or the top right. Until we can get that bubble effect. In the next video, we're going to start creating our navbar. And so that's gonna be really exciting. So I'll see you in the next one. 10. Creating a Navigation Menu: Okay, Let's talk about navigation. This is our nav bar up here. Let me explain some of the features to you. We've got a different font here than the default font, although it may be hard to tell this is not the default font. So we need to add that. We will get that from Google fonts. We need to do a hover effect with the colors. We need to do the margin, get some spacing there. We're going to use some Flexbox elements with it and the UL stuff, the unordered list, things that we did with the images down here. And we need to make it actually navigate to other pages. So let's get started. The first thing that we need to do in our HTML code is add a nav element. Now, the nav tag doesn't really do that much. It's more of a separation in our code for the person creating the website to be able to differentiate the different parts. It's one of those weird HTML standards that is just a thing. But we're going to use it here to make sure that we can kind of keep things in line so that we don't get confused about where the navigation is. And inside here we need another unordered list. And we need list items, right? So we've got the four pages. We want home gallery about and contact. Obviously, you can do it however you like. But this is just what we're going to do for this one. So we're going to create a tags for our links. Let's create an a tag here. And for the H ref, we're not going to put anything quite yet. I'll show you what we're gonna do with that in a second. But in between the opening and closing tag, we're going to put home. And now we need to copy this a couple of times so that we can have Gallery and bounce and contacts. Now if you take a look at what this has created, you can see it actually showed up down here. Okay, so that's, that's interesting, that shows me that our code is probably in the wrong order, which is, you can see our image tag here is above them. So we need to move that down there. And I'll Save. And Okay, now it's up here. You can see it's all perfectly. I believe that means the link has been visited. So if you see an unstyled blink, It's often underlined and it changes colors depending on whether or not you've clicked it. That hip thing, we want to get rid of all of that so we can make it our own unique thing. Okay, now you will notice something very interesting. It's already spaced out. Basically how we want it. Why is that? Well, let's go take a look at our code. Okay? Earlier, we specify that if we have an unordered list, we want it to be a flexbox. We want to have space between. We have a specific width, specific margin, and alignment of objects. And because the navigation is also an unordered list, all of that applies as well. Not only that, but because we have the LI here with the list style of none, that also applies. So we don't have to worry about getting rid of bullet points. So half our work is already done and we didn't have to do anything extra, which is pretty epic. The main thing we need to do is change the font, get rid of the underlines and make the links work. Let's start with that font. We're going to head over to Google Fonts. And we're going to get a font called rowboat density. I'm going to search here for real bumped around rowboat. Yeah, I don't know he's at but let's click on that. Okay. So you can see, unlike the other one, there are lots of different styles here, lots of different thicknesses. And so we'd need to decide what we want because we don't need anything fancy. We're just going to go with regular 400. Just the Sort of standard basic font. You can select multiple bonds which will allow you to change the font weight, or essentially the boldness in the CSS. But we don't really need that. We're not using that many words on the page. So we're going to select this style here and go up and you are selected families. And now we need to include this link in our code. So let's go ahead and add. Now you'll notice something interesting. Some of the code it connected is step where you have. So we have these two lines for the previous font that we used, but then it included them again. So we don't actually need the duplicates and get rid of those. All we need is this special, excuse me, this special one that specifies Roboto. Okay, that's great. One or two less, fewer lines of code. And now we need to copy the CSS rules or the properties that will copy this here. And let's see. So the way that I want to do this is I think it would be good to have a class on each of the list elements. So what we're going to do is put a class of nav item. I'm going to copy that. Each of these. Great. Now we're going to go and do a dot or period for our class and say nav Item. And copy this again. Great. So let me show you what is happening here. The farm family we chose is Roboto. But it has the second property which is San Serif. Sans-serif is a pretty basic font. And the reason it includes it is because if it can't, for whatever reason it can't get roberto, it defaults to send Sarah. So like if Google's website were to crash and we couldn't find the font, then it wouldn't break everything. It look a little uglier, but it would default to this answer. So that's what that means. We'll go ahead and hit Save. And let's see the results. Okay, So the font, I believe that's different. Let's test that out. I'm going to press Control Slash on my keyboard here and it comments out this line so that it doesn't, it's not an effect. Okay, yeah, So there is a small difference in the fonts. I like it, but we're going to, we're going to have that. Okay? And now what we need to do is let's get rid of the purple and the underlines and everything. So I'm going to add another selector down here, and we're going to call this a colon gouache. So this is referring to, referring to the a tag and similarly to the hover that we did up here, this is the property of the a tag called link. And we can style this specifically. We're going to say text decoration. None. Meaning it doesn't underline it. Similar to how we had list-style none. They got rid of the bullet points. This is how the text is decorated. For a link. We don't want it decorated at all. We put that there. Now we add one called a colon visited, which mean by this is it visited, which means the link was visited previously. And that's why it's purple. And we don't want it to do anything. So again, we're going to say text decoration. No. That did not did not do anything. Okay. Maybe that property was not needed. But I'm going to leave it there just in case. But what can really change this is adding a color of white. Okay, great. Now, when we visited the link, it doesn't do. It doesn't go purple, which is great. We just need it to turn red when we highlight over it. So what we can do for that is create nav, item colon hover. We've done this before and just say color red. And again, we want to do a nice transition so it looks smooth. So put transition. And this one will say ease in, out. And dew 0.2 seconds. Now if we highlight over it, It's nice little. Nice effects. Great. Okay. And so we basically covered everything. When we highlight over the nav item. We've got the pointer. I believe it's a pointer by default because it's a link. And then it hovered. When we hover over it, it's read. All we need to do now besides making the links work is get the spacing right. So I'm going to come right here and right the nav tag, so we can style that specifically. Now you'll notice I keep hopping around this file and add in things in different places. The reason is I like to be organized and can group things together. So you can see all the nav related elements are together, all the A's are together. And the ULs, the allies like everything, works together. Group I group it together. So that's what I'm doing. Okay, So really the I should mention that it doesn't matter where in the file you place this. It will always work. So I could cut this and put it way down here. And it wouldn't make a difference, right? It just matters that it's in this file. So the last thing we need to do here is the margin. Okay? So I'm gonna put margin. Now the spacing on the top already looks pretty good. So let's go with 0 for the top. Now on the left and right, we don't really need to change anything because we already have that nice margin. So, whoops. Let's try another 0. Then for the bottom, well, for the bottom, we'll just do ten pixels. And then again, oh yeah, yeah. So this will be top 0, left 0, bottom ten pixels. Okay? So you'll see that it looks nice now because we have zeros here and we're only using the bottom, there's actually a different property we can use. And it's called margin, bottom and all we can just say ten pixels. So we actually don't need to have all of this here. So I'll just say in margin bottom ten pixels. And let's see how it's coming along. Let's see how similar it looks to our other website. Okay, you can see they are identical. The only thing left is the functionality. So let's start doing those links. Okay? So we have our H ref elements here. We need to link it to something. Previously, we talked about linking it to a website, but we need to link it to a file that we have in our folder with us. So we're actually going to create another page called gallery dot HTML. This is the gallery page that just displays the other four images. And the reason I have that page is just to demonstrate the links to, excuse me to style this one. We're actually going to just press Control a and copy everything over it to it and just get rid of what we don't need. That way we don't have to rewrite most of the things. Okay? So let's see here, we can get rid of the main. Well, we're going to get rid of all of this for now and just leave the top. That way the fonts and everything still work. Okay? Now, what we wanna do here is let's see, we want to do a main image, meaning this is the main image. And on the gallery page, we want to display it like that over and over. So we're going to use main image as a class here. And so let's do that. We'll create an image tag. And we're just going to say the source is image one. And then I'm going to copy this. Let's change this to three to four. Now, we need to give it a class of main image. Here's the problem. We already used. Main image over here as an ID. So let's actually just change this to a class. And then in our CSS file, we'll find main image. And instead of having a pound sign will put a period. And now it's a class. So let's see, everything breaks, okay, It's good, It's good. Okay, so now let's add that class of image. And I'm going to copy and paste that to each one. Okay, now we can't see what the page looks like yet because we don't have a way to get to it. So in our index.html on the gallery H ref, we're going to just put gallery dot HTML. It's as simple as that. We hit Save. I can go ahead and click here now. And it brings me to the gallery page. Now you can see that it's not exactly like we want. We need some space between things and we still need the nav bar at the top. Okay, here's what we're going to do. I'm going to show you how to create inline styles. So an inline style is when we include CSS directly in the HTML file. Instead of creating an external file like we did here. The reason you may want to do this is if you just have one or two things that need styling and not a bunch. Usually I don't recommend using inline styles. If you have a lot of styles that are going on, it just clutters the HTML file. But here it can be useful. So inside of the body tag, I'm going to create a style tag. Anything inside of the style tag is treated as CSS. So we're going to say IMG for image because we want to put spacing between all of these images. I'm just going to put a margin bottom 50 pixels. That way there's a little bit of space under each one. Okay, That gives us that nice, nice effect, right? So that's how you do an inline style. Now what we need to do is finish our nav bar. So we're only going to make links to two of the pages. Further homepage. We're going to link it to index.html. So that no matter what page you're on, if you click Home, it brings you to that main page. Now in these ones, since we're not putting anything, we're just going to put a pound sign. And that's sort of a placeholder. If you click on those buttons, it'll actually just redirect you to the index.html. So now that we've got this, we're going to copy it and paste it in our gallery under the Explorer. Okay, and now we've got our navigation bar. Now, you may notice we've got two problem here where these guys aren't doing what they're supposed to. They're blue when they should be white. So let's see what we can do to fix that. I'm going to go to our nav item here in our CSS and tell it to always be white. So I'm just gonna give it a color of white. So by default, it's always white, no matter if we clicked it or not. But that should fix that problem. Now the one last thing I want to do navigation wise is make it so that we can click on this explore icon and have it go to the homepage. Right now, it's just an 81. And so we need to do a bit of modification. To do this, we're going to put the H1 inside of an a tag. So let's go ahead and create that a tag. And we want the H ref to the index.html. So that's our homepage. Now we can just cut this text and stick it inside of our a tag. You can nest tags like this, and we'll just have our H1 inside of the a tag. Now, if we click it, it takes us to the homepage. So if we go to gallery, we actually will need to copy this and paste it in our gallery as well. Now if I click this, it takes us back to our homepage. Okay? Now you can see that we are so close to being done. The websites look like they look identical. I think there are no differences stylistically between the two sides. The only thing we need to do is add some JavaScript to make it interactive so that when we click these images, this part of the site changes. And we'll do that in the next video. 11. Making Your Slideshow Interactive! (JavaScript): To finish up, we're just going to add some JavaScript to make it so that when we click on these images, it changes what is displayed as the main image. We're not going to use very much JavaScript. So this is definitely not a comprehensive course on JavaScript. This was a mainly in HTML and CSS focused course. But I'm going to show you a bit of JavaScript to make this work. So in our in VS code, we need to create a new file. And we're going to call it app. Actually, no, sorry, not app. We're going to call it slideshow. Dot js. Json stands for JavaScript. So if you remember, JavaScript is the language that makes things interactive. Now, in order to use our JavaScript, we need to insert a script tag in our HTML. We will actually do that below the body element, but still inside the HTML element. So we'll say script. And you can move down to the source. And we will say slideshow dot js, and that's all you have to include here. Now why below the body tag? It's because when everything, well, when we load the website, we need to load all the HTML and load the script last. That way, everything works together properly. It wouldn't really be a problem in this website. I don't think if we had the script tag before, but in many cases you do want it to just be below the body tag. So we've got that in there. Now. Let me show you the basics of JavaScript. I won't show you very much just enough to figure out how to make this work. Javascript is One of an actual programming language. Html and CSS are often considered non programming languages by people because they don't have a lot of the same features that most languages do. I like to call them programming languages because it makes me feel better and I think they're cool. But JavaScript is more of a traditional programming language, meaning that we can create variables. A variable is just a little, you can think of it like a box. And we can say, we're gonna give this box and name and we're gonna put stuff inside of it. And then later, when we're in a different part of our program, we can say, Oh, go get that box that had this name on it that had something written on the side. We go get it and we get whatever is inside of it. So I hope that makes sense. I'll show you how that works a little bit. To make a variable in JavaScript, we need to use the let keyword. Let just indicates that you're creating a new variable. Then we give it a name. What we want to do essentially is we want to create a variable that contains this main image. And then we're going to change what the source of the images so that we change it to the other images. We're going to call this main image. Now the reason I made DM lowercase and the eye capital is because this is what we call CamelCase. It's a standard in a lot of programmers, where if you have multiple words in a variable name, the first letter is lowercase, and all the other words are capitalized on the first letter. So if I said main image, cool, we would capitalize that. Now I'm going to set it equal to something. This is the part where we put something in the box. We need to put the image in the box. Okay, the way we do that in HTML is we're going to call the document object. The document just means it's an HTML file. So we're going to say document. We're going to access a part of the document. So the way we do that in JavaScript is by putting a dot. And now we're going to, one of the properties that the document has is it has the ability to go get an element based on information, give it, give it. So we're going to say document dot, get element by ID. That's normal enough English to get element by ID. What it means is we're going to give it an ID and it is going to go get the element that matches that ID. Okay? Now, if you remember earlier, we changed the main image into a class. So in order to make this work, we're actually going to add an ID. So you can have multiple classes and IDs for an image or an object. So we're going to give it a special ID just so that we don't conflict with the main image class. And so for this idea, we're just going to say main image dash JS. That's just going to indicate to us that this is for the purpose of the JavaScript. That's why we need this id. So we've got this idea. I'm going to copy this here. And in our code we said get element by ID. Now in parentheses, we're going to put single quotes and the name of the id, and then put a semicolon at the end. So what this says is, it says we've got a box and it's called main image. Now we need to put something inside the box. So we're going to go to the document, which is just the HTML. And we're going to say, Hey, HTML, I need to get the element that has an ID of main image js. And the HTML's does, okay. The id main image js applies to this specific image indicating the main image on the page. This one. Okay? And so we said, okay, we got that image now when we play it in blocks. So I hope, I hope that makes sense. We've got the image and it's inside our box. Now what? Now we're going to create what's called a function. A function is something that can be called over and over when you do something. In this case, every time we click one of the images, we're going to treat it like a button. And we're going to call this function. And what it's going to do is it says, oh, you clicked this image. Well, let's make that image become the main one that we show. To do this, we write function and we give the function a name. So we'll just say change image. Okay. Now after change image, we're going to put these parentheses. That's just the syntax for a function. Syntax meaning just the way you write it. And then we're going to put the curly brackets. So this is what a function looks like in JavaScript. So let's put from the inside of it. What we need to do is we need to get the main image which we now have saved as a variable. So we said, Okay, go get that box. And we're going to do something with what's inside of the box. And we do that by pressing period, just like we did with get element by ID. So we say main image. Now we're going to say set attribute to something. If you remember, an attribute in HTML, is there are these things like class H, ref, ID, Alt, all of those things that fit inside of the opening tags and have some properties That's called an attribute. So we want to set the source attribute, the main image right here. We want to set the source attribute to be the same as the image we clicked. Okay? How do we do that? Well, inside of set an attribute, we can put two things. One, we need to put the attribute that we want to set. Though in quotes, we're going to put SRC for source. And after that, we put a comma. And now we need to put the new image in, but we don't have a way yet to get it. So let's figure that out. In our index.html, we need to find some way so that when we click on an image, it calls the function and tells it what that image is source. So let's add a new attributes and this relates to JavaScript. This is called onClick. So it's pretty simple. When you click something, it does, it runs a function. We say onclick. We need to run the Change Image function. Now, something cool we can do in JavaScript is when we call a function, we can pass it an argument, meaning we can say, here, I'm going to change the image, and here's the image I want to change. We give it something else, something to work with. So we're going to give it something to work with. So inside of change image, we're going to put quotes and we're going to say Image one dot JPEG. So when we say change the image, we're going to say, Okay, here's what we are going to give you. We're gonna give you image1 dot jpeg. That's going to be what the function uses. So I'm going to copy this to each of these list items. And we're going to change this one to, to change this one to three. And this one too. So every time we say we click on image three, it says, Okay, change the run the change image function. And we're gonna give it image three dot JPG to work with. So now how do we implement that in the JavaScript itself? So what we can do is inside of the Change Image function in these parentheses, we can just gives a variable a name. So we're going to just say image. This essentially means we're going to pass the function something and we're gonna call that image. So it's not like a normal variable like these ones. It's more of like we can call the function and give it whatever we want. And it's just going to call that thing an image. Now we can stick that image in here and make sure you get that, that semicolon. So what this did is it said, Okay, well if we're choosing Image three, then we say, okay, Change Image and give it this string of text, image three dot JPG. And it says, okay, that string of text, we're going to call that image. And now when we call set attribute, we're going to stick that string of text in there, replace image with that string of text. What it does is it sets this source attribute equal to that string of text. And that's all we need to do to go ahead and hit Save. Now if we go to the website, wherever it is, you'll see that every time we click an image, it changes what image is there. Because it says get the image, sorry, it says make a box called main image. Go find the element that has main image dot js, which is this big picture. And it says, okay, every time we click on a little image, then change the big image, set its attribute of source to be the new image source. So if we click on image for, it sends the image to the image source to image. That's all the JavaScript that we're going to use in this course. Like I said, we're not going to get into the complexity of doing an automatic time slideshow in this course. But that's definitely something you'd be able to find online. And so this is the finished product. Now, in the next video we're going to talk about the class project and sort of wrap things up. I'll see you in that one. 12. Final Project and Conclusion: Before you finish this course, I want you to do one last thing for your final project. I want you to use the skills that you've learned in this class to create something of your own. Why you to create something, maybe a portfolio website or something for your business, or just something for fun. It doesn't have to be complicated. It can be very simple, but it can be yours. You can create it from scratch with the skills that you learned in this course. One way that I like to approach fun creative projects of my own is I write out what I want to create. Either I'll draw it on a whiteboard or a piece of paper. I'll just kinda think of what I want the website to look like. Then I find, find out what skills I need to learn in order to make it look like that. So I'll go learn what HTML tags I'll need, what CSS I'll need to style it properly the way I want. And then I'll go learn what JavaScript I need to get the functionality that I wanted. And so I would recommend doing that. Use the resources that I have linked in the course description to learn more HTML, CSS, and JavaScript. Now, I have two more things for you. So if you enjoyed this course, please go check out my other Skillshare classes as of right now, I've got two other ones. One is on JavaScript DOM manipulation, which is essentially what we did in this course. A little bit where you manipulate the HTML and the CSS with JavaScript, It's a very useful skill. The second course is learning Angular, which is a JavaScript framework. A framework is basically an expanded version of JavaScript that gives you more features, more functionality, and it makes complicated things easier. So I would highly recommend you go check those out if you want to make your website more expressive, more dynamic, they're really great skills to have. The second thing is that if you want to see more tech tutorials for free, if you want to learn more about programming for free, go check out my YouTube channel at youtube.com slash Taylor English. There you can see a host of videos that I've put up for all sorts of questions that you might have or things that you might be interested in learning. Okay? Now aside from that, if you're interested in music for whatever reason, you can go check me out on Spotify. I'll link that down in the course description as well. I make a piano solos and I'm hoping to make more piano and maybe techno music in the future. So if you want to go check that out, That's awesome. But I just wanted to say thank you so much for watching this course through to the end and for learning these amazing skills. Because I know that what you've learned is really going to bless your life and the lives of those that you help. So thank you for taking this course and I hope to see you again soon. I wish you the best.