Start Building Websites Today! No Experience Required.

1. 1.1 - Course Introduction: Greetings and welcome. My name is Aaron Craig and I'm going to be your instructor for this course for absolute beginners to HTML and CSS. This course is aimed at people who have always wanted to make a website but didn't quite know where to start. Or they were too intimidated by the process of learning how to code or the technology behind it. I'm going to tell you that you can be a web developer and I am here to help you along that path. We're going to be covering the basics of HTML and CSS step-by-step, how it works, how to put it together, and how to design your first website. If you know how to code, you can take this course, but it's going to go really slow and it's just going to be a refresher for you, but if you don't know how to code or you think you know someone that sounds like this course would be good for, I encourage you to share it with them, get it out there because everyone can be a web developer if they want to and I believe this is going to be a great course for them and for you. With that being said, let's talk about why HTML and CSS are still relevant today in the next video. 2. 1.2 - Why Learn HTML & CSS Anyway: So in this day and age, it may not seem necessary to learn HTML and CSS. You've probably seen advertisements for Squarespace and Wix and WordPress, drag and drop, build it yourself. No coding experience required at all, and some of those can work. You can make some pretty nice websites with those, but the thing is that every website on the Internet uses HTML and CSS as their backbone. The way it gets delivered may look very different depending on the technology being used, but it is still HTML and CSS, which is why I firmly believe it's essential for every web developer to have a grasp on it and that's what this course is going to do for you. We're going to cover the basics and I'm going to give you the resources to continue learning after this course to become the best web developer you can. Now in the next video, let's talk about how this course is structured and the best way for you to get the most out of it. 3. 1.3 - Course Structure: This course is designed to be a follow along coding course. That means that I'm going to be typing out what I'm saying and explaining it as we go. But you should have me up on the side of a second monitor or on your primary monitor and be coding along with me. If you're not, you will not be getting what you need to be out of this course. You can watch a 1000 tutorials on how to throw a javelin. But until you're out in the field trying it, it's all head knowledge, not practical. Same thing comes for learning languages and coding in general. You've got to be doing it yourself. Be making the website as we do it too and you'll be much better off. As you're watching, if you have any questions, feel free to ask them. Remember, this course is aimed at beginners. If you run into a problem or a glitch, or you're not sure of something, you're not going to be the only one so ask it and we'll do our best to answer it. As we're going along, if you're wondering, hmm, I wonder if this could do that, pause the video and try it out. That's another great way to learn and you'll be way better off for it. At the end of that rabbit trail, you'll know new knowledge of whether something works or it doesn't, and that's great. Now I'm going to be using Visual Studio Code, a piece of software that is free and open source to everyone on any platform. You can use that or something else. It really doesn't matter. I'm going to show you how to make an HTML file loaded up and see the changes that you've made as you go along. Everything we do in this course is going to be software and platform independent so use whatever you're comfortable with and you'll be good to go. Now with all of that out of the way, we're ready to dive into looking at what HTML is and how it works. I'm super excited. I hope you are too, and I'll see you in the next section. 4. 2.1 - What HTML is and isn't: The first thing I want to cover is what HTML is and how it differs from traditional programming languages, which you might have heard of and you might not have. HTML stands for Hypertext Markup Language. It is a design language around tags that you then put information between those tags or assigned attributes, which we'll get to. Hypertext Markup Language is the foundation of every website, and that's why it's really important, because it is what you're actually going to see. Now, it is a tag based language, which means that if we want to input, say, a paragraph or a heading, then we actually give it a tag which, a tag would look like this h1, and then we put information between it, and that's what it would say. This is just HTML, all right here, all the different kinds of HTML that we're going to be covering over the next couple of videos, and it looks like this. This is the heading you've got here, here's a paragraph which is just some text and image of video, a list, tables, a form. All of this is a pure HTML page, there's nothing else inside of here. You can tell that it doesn't look very good, and that's because we don't have any styling, which is what CSS is, which we're going to cover later. What we make right now isn't going to look very pretty because the styling that designs how everything looks and feels and moves and the layout of it, that all is going to come later. Right now, just get used to having it look like this. It just kind of all goes straight down, there's not much to it, there's not much color, that's just how it is, and that's okay. That's basically what HTML is. Now, what HTML is not is a programming language. So here is a project that I have. This is a C-sharp project, also building a website, but this is more of the server-side back-end code, which don't worry about it. But basically what that means is all of this stuff here, variables, functions, if else statements, lists, data structures; all of that kind of stuff, if you've heard of any of it, doesn't apply to HTML. Anything that you see right here, we're not going to be doing with HTML because it's not a programming language. We're not creating a program for making a website. The website is defined by tags and by styles that we're going to learn to set up. So that's what HTML is, and that's what HTML isn't. So it's not a programming language, it's design language which is really nice because if you're just getting into coding, HTML and CSS are fantastic language to start with because they're fairly simple, but you can create things right away and you can have things start looking good pretty quickly once you learn what you're doing. So it's great for beginners, in my opinion, just in general because a lot of beginners like to see results; I used to be one of them when I started out. I wanted to get things done, I wanted to see things right away happen. Programming languages much harder, but HTML, CSS, and you get to be building a website the entire time and it's really cool. So that's what HTML is and what HTML isn't. In the next video, we're going to start tackling some of this syntax and I'm going to explain it, and we're going to make just a basic HTML website as we go along. 5. 2.2 - Basic HTML: The very first thing that you're going to need to start making your website is the file for the website. Whatever software you're using, you'll be able to probably make that inside of there if you want to by just doing New File and choosing HTML. But if you're doing it an old fashioned way with like notepad or something like that. You can anywhere in your browser right-click and say, New and it needs to be just a text document. It can't be a word document. It can be like a notepad, but it can't be anything more than just a plain old document. You give it a name called index and then you change the extension from.txt or whatever it was, to.HTML. I might say that's going to become unstable, that's okay. Click ''Okay'', then you have your first web page ready to go. It's going to be blank right now. We can open it, see that there's nothing there, that's okay. But it is a website file that will be opened by browsers and it will know that it is a website that is ready to be read. What we're going to do is fill it up with information. To do that, I will be using Visual Studio Code, but you can use anything that you like if you're comfortable with something else or you don't want to use what I'm using for some reason, that's okay. You can even go old school and open it up in Notepad or Text Editor and do everything by hand. I wouldn't encourage it, but you definitely can. The way to view your file as you're editing is to just navigate to wherever your file is, double-click on it. Right now it's empty because we have nothing inside of it. But every time you make a change, you can just save your code and then come in and press ''F5'' and it will automatically reload that in the browser of your choice. I'm using Firefox, but you can follow along and whatever browser you're using and it will do it exactly the same. Let's get started with some basic syntax. Now, there is a structure that all HTML files follow and it's required for publishing online. But for right now, we're going to skip it and we're going to cover that at the end. That's because the necessary structure is actually filled with some fairly advanced tokens and tags and syntax and I don't want to bog you down with that without even knowing the basics. We're going to start super-simple. The first thing we're going to cover is the header tag. We're going to start this by pressing Shift and Left on the comma key to open up a bracket and if you're using code, you can see here that it gives you all the options and we're going to cover some of these, but not all of them because we don't need all of them for everything we do. I'm going to cover the basics. We're going to start with a heading and we have h1 trough h6, which stands for heading one through heading six. I'm going to go ahead and type h1 and then close that bracket with shift and period. You can see here that mine auto completes that , but if it doesn't, what you need to do is then put another bracket that opens and then followed by a backslash and then that same tag and that will close the tag out. Every HTML tag, well, almost every HTML tag is going to follow this structure exactly the same. There are a few that differ, but for the most part, this is what you need to do. You open it up with brackets, you put the tag you want inside of it and the tag is what we're calling whatever we type inside of there. There are predefined tags like heading and image and video and then there are tags that you can, if you wanted to actually create yourself and then set how they look and feel and what they're supposed to do. For now, we're just going to be using the ones that are predefined across every browser, everywhere. Heading is a great one to start with. A heading, as its name implies, is something you put at the top of an article, an image, video, something that you're introducing. They have predefined text sizes and looks across your entire website, which is what they're really useful for. Heading 1 is something you'd use for the heading of the page. You wouldn't use heading one all the time. You use, well, I guess the smallest number here, one and that will give you the largest font size. If I say, welcome to my page and I save this, I'm going to go ahead and click, go live down here. That's going to open up my web page and it will be auto refreshed. You can see that this is heading one and that's a fairly large heading. You can increase the size with CSS later, which we'll talk about. But this is default and this is what you would use to introduce basically your whole page. Then from there on if you had articles, you maybe use a smaller heading, h2. So call this article title, I'll save it, come back to this, refresh and then you can see that my article title is a little bit smaller and so on and so forth. Each of these headings is going to look a little bit different. If we come in, we can type out each one and you can get a feeling for how they look and the size that they have. Now, with CSS later on, you'll be able to customize all of this completely to your liking, which is great. Some of these headings get pretty small, like Heading 6, I've personally never used Heading 6 or 5. I usually stick to one and then two and three depending on what I'm doing. But you can see that you've got a lot of options here, keep that in mind. That is the basic structure of HTML tags. You open it, you put something in the middle, usually text and then you close it off. Just because I want to show you how to break that rule right away, I'm going to show you one that doesn't follow that and that is the image tag. If we open this up, you'll notice that HTML and really programming and coders in general are really, really lazy. They don't type out full names for pretty much anything. When you're looking for something most of the time it's going to be either abbreviated like image, IMG or it's going to have a different name that tells you what it does, which a is actually called an anchor, which is a link to another web page. If you typed in like link here, this is something here, but this is not how you link to another web page, it's something else entirely. There are a few things that you need to know and that's what we're going to cover. But first let's go back to image, IMG. If we close that out, you can see that there's no closing bracket that automatically gets filled in here and that's because an image is a self-contained closed tag. You don't have to have anything in there. Then image actually uses something called attributes. Attributes are things that you set about that tag. An image and a link and a video and several other tags will need to have information that you set so that it knows what to do. Because right now we have an image tag, but we have no image to use. Let's go ahead and open this up and let's look for an image. One of the things that I like are games. Let's go and search video games, go to images, and we can just grab one. I'll go ahead and grab something, this one looks cool. Now, copyright notice really quickly, you can't just go online grabbing images and throw them on a website you do, that would be copyright infringement, very big deal, don't do that. If you're looking for images for your website, there are lots of great places to get them. I'll include some resource sources at the end of this course, check it out there. But don't just go and steal images. For what we're doing right now, it's fine because I'm not going to put this online, not going to make money from it and nothing like that, it's all okay. When you find an image that you like, you can either download it, you can download it directly or you can copy image location and then from there we can use it in our website. Let's come back in and we are going to type in, inside of the brackets here, SRC that stands for source, then we're going to type equals and then inside of quotation marks, we're going to paste that entire thing that we just copied. Some of them are going to be really long, some of them would be short, just depends on the URL. If we had a local image, which I'll show you how to do that later for a video, then you would just link to that here. But right now, this is everything we need for an image to show up on our website. I'll save that, come back here, refresh our page and you can see that that is now there. We have headings, we have an image and we're starting to get somewhere, which is awesome. Now, let's cover some of the other tags that you'll probably be using all the time. One of those is going to be a paragraph tag and that is going to be just p. A paragraph tag is where you put the bulk of your text. If you had an article, your text would be inside of here, if you had a caption for an image, then if it was long, you'd probably want to put it inside of its own paragraph tag, stuff like that. Inside here, you just put text. This is some text I'm typing, I'll save it, come back, refresh. You can see down here that it's not bold, it's not italicized, there's nothing special about it. It is just default basic font and that's what paragraph is, so that's great. Let's look at the anchor tag, something that starting out is really an intuitive but essential for making websites. The anchor tag, you can think of it as it's anchoring to another place on the Internet and it's holding on there and you get to tell it where it's linking to. When you do that with a attribute called href and this stands for hypertext reference.This is going to be pointing to another website. We're going to open up quotations and you can choose any website you want here. I'm going to choose Google and the thing to remember is that you want to put in the prefix for the entire website as well, which means that you're going to want to have the HTTP or HTTPS. Not every website needs it, but some do so to be safe, always include it. We're going to say HTTPS:// and then www.google.com and close the anchor tag. You'll see here that it has a closing tag as usual and then we need to actually put in the link that they can click on. As good practice, you want to let your users know where you're directing them. I would type in Google, save this and refresh my page. You can see that there's some default styling for links. It changes your icon to a hand and it shows up as underlined and purplish. If I click on this, I'm going to Google. I'm going to go back and that is good practice, it tells your user exactly where you're going. Now, you could just as easily type in something called Facebook and if we reload, now it looks like this is a link to Facebook, but it's not. So don't break the trust of your users by using bad links in leading them somewhere else. That's really bad practice and everyone is going to get very upset by it and people will not stay around on your website, just keep that in mind, that is basic HTML syntax. There's a little more that we're going to cover in the next video with advanced HTML because there are some tags that require more attributes. There are some tags that are a little weird that we're going to cover and we're going to do that next. But this is the basics, if you have this, you can play around and make a basic website. You have headings, images, paragraphs and links, stuff that you need to get going on whatever website you want to build. What we're going to cover next is more advanced HTML syntax where tags and attributes are a little more confusing and definitely requires some explaining if you're just starting out. 6. 2.3 - A little more advanced HTML: The first new tag I want to introduce you to is the list tag, but the list tag cannot go by itself and it's not called list. Instead, there are two lists that you can have. There is a ordered list which stands for OL, these are things where they need to be in order, and the corresponding style is going to show that they are ordered, let's take a look at what that means. First, we close the tag and press "Enter", now mine does auto indentation, which is really fabulous, if it doesn't, I would recommend indenting about 3-5 spaces each line so that you know that this is a new line that is inside of this tag. Inside of this tag, we need to put list items, things that need to go in order. An ordered list, like I said, in order, to do that, we need to put in LI, that stands for list item, and it needs to be inside of an OL, UL or a menu element, right now, we're just going to cover OL and UL. UL stands for unordered lists, which we're going to make next, list item, we close it and now we need to put some text inside of it. What do we want to put inside of an ordered list? Well, you can do whatever you want, I'm going to come up here and I'm going to add a title that says best games ever, now my list has a title and it is an ordered list because I'm putting them in a ranking, I'm going to say Zelda, I'm going to press "Enter" and open up another LI, and then I'm going to say Mario, I'm going to add one more LI and then Final Fantasy then save it. We're going to come back to our website, press "F5" to reload it,scroll down to the bottom, now you can see that I have got my heading, we know how to use those, and we have our list that actually has numbers next to it. That is the default styling for ordered lists, and that's why it's really important to make sure that you use OL and UL correctly. UL is just going to be a dot next to it, which we're going to make right now. Let's do another heading and let's call this foods I like. It doesn't need to be in any order, it's just a list. We're going to say UL and then open it up and we need to put in list items, I like watermelon, list item, I like pizza and another list item, I like soda. Let's save that, open it up. You can see here that now it doesn't matter the order that they're in, I will blow this up so we can look at it. We've got an ordered list first and then we have an unordered list. You'll want to use those as you see fit, and of course, when we get to CSS, you'll be able to change all of that with just a few lines of code. Now we're starting to get into more advanced tags, you can see that some tags you need to be nested like this. A list item by itself outside of a tag isn't going to do much. If we put LI inside of here and say, "Hello." Well, it'll be there, but it's going to come up as a default unordered list item, and it just looks very strange, and I would recommend that you never do that. Some tags need to be nested, that's just how they work, and along that lines, let's take a look at a fairly important tag that has some weird attributes that are not intuitive, I'm going to show you how they work, but are really essential for pretty much every website if you want people to be able to interact with you, and that is the form tag. This one actually has a name that makes sense, it's a form, we open that up, come onto a new line. Now inside of here, we can just type out text and it'll show up like this; first name, save that, we'll come back. Well, right now, first name shows up at the bottom. Now, it doesn't look like there's anything special here, but something is going on inside of this section. HTML, the website knows that it's a form, later on, not in this course, but when you want to accept input from the user using either PHP, C-sharp, JavaScript, something else later on to enable that kind of functionality, your website is going to know that this is the place that they're going to accept it. The way that you can do that visually is by using another tag called input. The input is how you get the input from the user, this is going to create a box that they can type into. Now there are some attributes that are very important for the input, we're going to say one of them is the type. The kind that we want is going to be text, I'm going to click on that and it types in text for me, which is great. Now, we need to give it a name as well, this form box that they can type into, we're going to give a name and we're going to call it First name. I'm going to put in another tag called a break tag, which is BR, that one doesn't have a closing tag because all it does is Inserts a break, basically a new line, basically some space in between your elements here so that there's space in between one element and another. If we come in here, we open this up, now we can see that there's a place for us to type, I can type my name. If you start typing something that you've typed into four, autofill from your browser might pop up and be very useful, and that is a form box. Let's go ahead and add some more and actually make like a nice-looking form, let's say this was a form that on your website people could fill out to join an emailing list. One of the things you'll want would be an e-maill, we'll put in email and then we need to type in input, make another tag. This time it's going to be an email tag and the name is going to be email, put another break in there, otherwise, all of these elements are going to be really close together and we don't want that. One more that we can have inside of here is a radio button. A radio button are those little circles that you can click on to have different options. Let me show you what it is so that you can understand it. Let's make new input tag, this time we're going to give it a type of radio. Here the name is going to be, let's say instead of an email list, they were ordering a shirt or some kind of wearable item that has a size, we're going to say name equals size. We need to give it a value, because this value is going to show up right next to the button. The value here will be small. A property that we can set that doesn't require putting in our own text is called Checked, we can say that this button is going to start out checked, we're going to put small just as a text right next to this. At the end of our input tag, add small, not inside of it, then we can come back and we can look and see that the input button, the radio button, is right there and it says small right next to it. We can add in a few more, if I copy this, I could paste it. Now we can change the value to say medium, get rid of this checked icon and change the text to medium, save it, reload and now we have two options. Radio buttons are things that can only be clicked, only one of them can be selected, which can be very useful when they can only choose one, you also have things like checkboxes and drop-down menus, which we're not going to cover all of them because there's just too much, but at the end of this course, I'm going to refer you to some really great resources which will act like a index or gallery that you can just search up if you ever wanted to do a checkbox instead of a radio button. It will have documentation, examples, code, everything because I don't want to try to cover every tag you could ever do. It would take too long and, in my opinion, be useless because even though I've been designing websites for years, I still use those resources to look up how to do things, I don't have everything memorized and I don't expect you to memorize anything either. Well, not anything but not everything. There are some things that you'll definitely want to keep in mind because we use them so often, but other things, you might not need them all the time, and that's totally fine. Those are some of the more tricky tags, like I said, there are a lot more, but for what I want to cover, this is enough. This is some basic HTML that allows you to cover your website with information, images, stuff like that, all of this stuff is really useful. It's on websites, all over the internet, probably on every single website except maybe the lists because those are a little more niche item, but they're all over. This is the stuff you need to get started, and that's all I wanted to cover. The last thing for HTML though, is going to be the necessary structure, which I mentioned when we started the HTML section. Now I want to cover in the next video because you need it if you're actually going to put your website online, if you don't have it, you'll be in a lot of trouble. Yeah, I think that's a good enough reason to make sure you put it in there. In the next video, we're going to cover the necessary structure you have to have inside of your HTML document. 7. 2.4 - Necessary Structure: Now we need to tackle the necessary structure for your website to have in order for your web browser or any browser to interpret it as a website correctly. The information we're going to be tackling really isn't going to alter the look or the feel of your website. We're going to include a title for your page which will, and that's really important, but a lot of this information is not for the design. Instead it's for the browser, it's for the search engine, it's for the meta information that things need to know about your page, but the page itself isn't going to change. That being said, it's still really important. If you don't have this, your website is not going to function properly. It might not even work at all because your browser is not going to know what kind of file this is. At the top, let's press Enter a couple times and give ourselves some space to work. The very first thing that you have to put in there is the kind of document that it is, and of course this is done inside of tags. Open up a new and a left bracket do exclamation point, DOCTYPE all capitals. Then we need to tell it that it's going to be a document type of HTML and then close the tag. That needs to be the very first thing on every page that you have. That's essential. If you don't have that, your web browser will not know that it is a website and it will not know what to do. Well, it might not know. Some might be able to figure it out, but if you don't have it, you're going to run into problems, so make sure it's there. The next thing is going to be the root of your website. That's actually the HTML tag itself. HTML, close that out. Now, this needs to go at the very bottom, because everything inside of our website needs to be enclosed within HTML. I'm going cut this out, scroll to the bottom, and paste it in here. Now, everything that we've done is between these HTML tags, which is essential because all of the code now within those tags is HTML. The next thing is head. So we're going to open this up and type head. This hasn't open and closing tag. We're going to press Enter because we're going put a little bit of information inside of here. The first thing we want to put as the title, so the title that we want to use is going to be the title of our web page. We'll type title and then put whatever you want inside of here. I'm going to save my first website. Save this, come into our web page. Then you can see that tab now has that title that we want. That's how you change the title, and you can have a different title for each page that your website has, although you probably want to keep it consistent. If you have a website called Facebook, then you might want to keep Facebook as the main title for everything. But then if they're like on Messenger, you could do like a slash or a dash and say Messenger, so it'd be Facebook dash messenger while you're in Messenger. You get the idea, but keep the title consistent and easy to read because that's really important for usability. There is more information we can put inside of here. There are meta tags, we can actually type out meta. This is stuff like keywords and browser information. We're not going to cover it right now because it is not essential and I want to keep it bare bones. But this is something I encourage you to look up, and make sure you understand for when you publish your website. Things like search engine optimization, they're going use keywords and key phrases, and you put that information inside of the meta tag, inside of the head tag. Awesome. The last thing is actually the body. We're going to open this tag up, type out body, close it. Then we need to take that closing tag, cut it, and put it all the way down at the bottom before HTML, and then our website is for all intensive purposes, complete. Now we have all of the necessary structure for making our website readable to web browsers and displayable across devices. Now, if we open this up, refresh it. Nothing's going to have changed. Nothing's going to look different. But now your browser will be able to read it correctly and you won't have any problems of showing it all over the place. That is very important. That's HTML in a nutshell. You now know how to use it, what to do with it. The next thing that we're going to cover is how to design it, which is going to be our CSS. You're going to become a master of making your website look the way you want it, just the way you want it. It will conform to your every win. We're going to cover that next. 8. 3.1 - What is CSS?: Now, it's time to get into CSS. CSS stands for Cascading Style Sheets. Cascading is a way of describing how they work and how they look. Because how the basic syntax plays out is you give it a type, or a tag, or an ID, or a class or something to target and then you tell it to change lots of attributes about it. We're going to go in depth in these later. But I want to just take a moment to talk about what CSS is and how it is different from HTML. The difference probably stands out right away. There's really no tags inside of here. You are targeting tags, but you don't see any angle brackets in here. You're not giving it a P tag and filling it in with text. CSS is only for styling. Now, CSS can go a very long way in that styling. There is actually a grid system that you can implement, which is way beyond the scope of this class, for how your contents should lay out both on large devices and mobile devices. There are animations which you can do, which at the end of this section, I'm going to show you some really cool CSS animations that are out there in the wild, just to spark your imagination. CSS can do a lot, but its primary function is to take the HTML that you've coded into laid out and design it in a specific way. You can change things like colors, rotation, back grounds, animation. Really anything you can think of, CSS can target it, change it, and make it exactly the way you want. Now, it's not easy when I say you can make it the way you want, it's true, but it can be tricky at times because there are default settings that HTML tags have. Like some tags are supposed to take up an entire line, some are not. When you change that property, weird things can happen and it requires a lot of tinkering around, but you can do it. I guarantee you can make your website look exactly the way you want. It's just going to take some practice and some patience. But that's the difference between CSS and HTML. For one they have different names. For two, one of them is a tag based language and one of them is more of a cascading design language. So they go in tandem. You use them together because CSS without HTML, well, there's not a whole lot you can do this a little bit, but you can't really do much. HTML without CSS. Yes, sure, it's there. It's informative, I guess, but no one wants to look at it for long. They need to go together and when they do, they are perfect. What we're going to do first in the next video is start targeting tags like you can see right here and I'm going to show you how we can change some attributes of specific tags to make them look and do whatever we want. 9. 3.2 - Styling HTML Tags: Like I said, CSS without HTML isn't that useful. That means that we're going to need HTML and instead of coding another website, I'm just going to take what we did last time. If you want to go ahead and write up some more HTML, I encourage you to practice that as much as you can and then come back when you're ready with that. That being said, I'm not going to, I'm just going to take exactly what we've done. I'm going to copy that, paste it inside of here. Then in Mine, I'm going to open up that folder because that's how that works. There is my HTML code. Now a CSS file has an extension of.css. If you have a TextPad you make a file in there. If you're using some software, make it however you do. In here, I'm going to click New File. The traditional name is site.css. Now, CSS names can vary wildly. You can have it be called style, styles, you can have a CSS page for every page of your website, which if it's large, I wouldn't recommend, smaller would be okay. But traditionally it's called site.css. Now the first thing that we have to do is actually link our CSS to our HTML. Where we do that is inside of the head. Now this is going to be a link. Now we looked at this very briefly. We didn't really talk about it, but now we're going to use this tag. We're going to link to our CSS page. Fortunately, our CSS page is actually just right here, so linking to it is going to be fairly easy. If you have it up in a folder or a couple of folders out, then you need to use some dot, dots and a slash. What that looks like is something like this and inside of what I'm going to show you in just a second, that means a folder up. If you need to go up a folder, that's how you do it. Otherwise, you should be able to do it just like this. There are a couple of attributes for link. The first one is rel. That stands for the relation. The relation for this link is going to be stylesheet, because there are many things that you can link to. The type is going to be specifically text/css, because that's the file that we're going to be using here. Then we use href. Again, we've seen that in the anchor tag and we give it the name of our CSS file, so ours is called site.css, then we close that off and save it. Then we are good to go. I'm going to go ahead and open this up and make sure that we've got the same website, everything looks the same. Awesome. Now, what we're going to do is in our CSS page, we're going to target first the built in tags that we have. That's because those are the easiest to understand and to showcase off. If we look at the structure, one of the tags that we have is actually the body tag. This body tag encapsulates everything. If you want to change the background of your website, the way you do that is by targeting the body. All we have to do is type in the name of that tag body and then we need to do what I call curly braces. This is going to be shift, and this is going to be to the right of the letter P, is going to be an open curly brace and sometimes it's going to complete. If it doesn't complete, then do shift and the next one over and it will do an open and closed curly brackets. These you see all the time in programming. For CSS, all of the style that we're going to change for the body is now in-between these two curly brackets. To use CSS, we open it up like this and then this is what the syntax looks like. You put in the style, the attribute that you're wanting to style. In this case, we're going to change the color. We're going to say background color, then we use to do a colon, which is shift to the right of the L, colon and then give it a color. I'm going to say just read. Now you can also see here that it has the x value of that color and VS code and many other editors. You can also choose from RGB colors. If I hold this over, I can change it. Now I can go too right now, but you can. At the end of a attribute of a property, you put a semicolon. Same thing, just no shift. That is how you style it. That is the default styling. I'll save this and we open up our website. My CSS has automatically been applied and a very bright red has been applied to this whole page. Now, the formed elements aren't red because they have a specific style attached to them already. But everything else is now red. Now that red is very bright. In VS code, I can hover over the color and then I can change it. I'm going to bring it down to a much darker red, save it. There we go. That's a little bit easier on the eyes I think. That's how you target a tag. Now, we looked at a lot of tags inside of here. Any of these tags are up for grabs. But the thing to remember is that all of them will be changed, so h_3, we have a couple of these tags inside of here. Let's go in and change one of these h_3 tags; h_3, open and close the curly brackets. We don't want to change the background color, because it does have a background color, but instead, let's change the color of the font. To do that, it's not font color, it's actually just color, so color and let's change this to white. I'll save it. Now every heading is now white, every heading three. That's really important to remember. Because if you change a tag, when you use that tag on any of your sites that is using this CSS page, all of them will change. Sometimes that's good. You might want all of your headings to have white as their primary color. If that's the case, you can do something with commas. Inside here, we could add a comma and then we can apply this style to something else. If I said h_1, h_2, h_4, h_5, and h_6, save that. You can now see that all of my headings have white, which is great. But if for some reason we didn't want one of these headings to have white, there's no way to change that because we have applied this to every single heading on every single page across our entire website. That is really important to remember. For now, we're going to keep that the same. I'll show you how to change that in the next couple of videos when we target more specific tags and elements. We have tags here. We've change the background color and the color, things that you're probably going to do all the time to fit in line with the color theme that you choose for your website. But CSS can change way more than just, I guess, the style of an element. It can change the way an element actually behaves on the page as well. If we go and we look at this, you can see that each of these headings, and even like this paragraph, there's tons of room over here to the right. There's no reason that they can't be over here, except that the built-in styling says the paragraph, the link, all of that stuff those are on their own line. They take up an entire section. We can actually see that if we come in and we change something about our headings. We can change what's called text-align and do a colon and then we say center, put a semicolon at the end. That punctuation is very important. If we come in, you can see now that they are centered along the entire page. That's because they are in essence going from the very left to the very right and taking up that entire section. This looks more like a heading tool. I think that makes a lot more sense to have them centered. That's cool. But what if we didn't want them to take up the entire page and we wanted them to be more in line. Well, that comes in play with something called display. The first thing we'll do is type out display and then colon. Now there are a lot of options. These options are confusing when you're starting out. If you want to just style and not change the actual functionality of tags, then I wouldn't mess with the display, but eventually you're going to need to, so keep this in the back of your mind. The display is how elements are aligned on the page. There are elements that are block elements. Block elements are, well, they are block. They take up an entire section, usually an entire row of the page. That's just how they work. There are elements that are inline block. These elements take up a block, but they don't take up the entire page. Now you can see that all of our headings, well, they take up a certain amount of space and then they don't take up any more than what they need. That makes sense. You've got that. That means that our image can be over there as well, which is cool. Now, there are some other options as well. Some of them like inline-flex. I wouldn't worry about for now. Flexbox Tables, stuff like that. That has to do with the CSS grid, which is really powerful. But again, I don't want to talk about that now because that's an entire framework that CSS has been building up for the last couple of years, which once you become more advanced, definitely look into, but for now, we can do block, we can do inline-block, we could also do none, so it basically disappears entirely. Now it's gone. You can also do inherit, which is confusing if it's the only one you're inheriting from, you can think of there's a hierarchy here and that's where the cascading part comes in. Because if I was to say Heading 2 inherits from Heading 1, then everything that I do to Heading 1 would inherit from Heading 2. But that inheritance is a little again beyond what I want to cover right now, but I wanted to show it to you because I think that's really important. The last displayed tag that I want to show you is just called inline. Here inline is going to do the exact same thing that we did before, but now it's not even going to be a block element. Looking at it, it can't looks the same, but it does have different display properties. These display properties, are how you're actually going to align elements on here, so if we wanted to split our page like into two rows, then we would need to change our headings from block-level to either inline or inline block, otherwise we wouldn't be able to have anything side by side. Display is really powerful and can get confusing pretty quick, so keep that in mind and play around with it. But don't get frustrated because it can be difficult to execute exactly the way you want. But there are also tones and tones of other properties. I'm going to try and cover a few here, rapid fire, but just know that there are so many CSS properties and ways to use it that I cannot cover them all. But again, I will show you some resources at the end of this course that are really fantastic, especially for CSS, because there are really great websites out there dedicated to using CSS and it's really fantastic and very helpful. I encourage you to check those out. Let's do some rapid fire. Let's talk about padding. Let's do h1 and let's do a background-color on this and we're going to change this to blue. Let's open that up. Now we have a bright blue background-color for our heading. You can see what I'm talking about, what that display all the way left to right. Now, two important properties are padding and margin. Padding is the space inside of this background-color. If we come in and change the padding, we can change the padding with pixels, so we're going to give it 50 pixels, so we say 50px. I'll save that, and then I have to change this blue. It's even hurting my eyes. Let's bring it down. You can see that now all of the space inside of that heading, that is the padding that is associated with that element. Every element has an amount of space around it, margin and padding. Padding is inside of that element, so there are four elements for padding. You can do padding, left, top, right, and bottom, and each one you can control individually or you can just set them all like we did before. If we only wanted the padding bottom to be 50 pixels, we could do that and that's exactly what that would look like right there. Now let's get rid of padding and go to margin. Just like padding, there is top left, right, and bottom all around the elements, but margin is the space around the actual element in relation to others. If I come in and said margin, 50 pixels, you can see that the background color hasn't expanded, but the space around these elements and its relation to the top of the page is now a lot of space around it. The margin is that space that doesn't get occupied by the background color there and even on these edges you can see it's not near, as close as it was before. Margin, padding, two very important things to talk about. Now, another one, let's go down and go to image. Things that you can adjust are the width and height, and this is not just with images, but this ll be the easiest to see here. If I said width 25 percent, our image is now taking up about 25 percent of our screen. You can see this if I come into the index and I copy this image, and I paste it three more times. You can see now that it takes up right about 25 percent. There is some display and some padding on the body itself. You can see that even with the background elements of our heading, there's some space on the left and the right, so we can't do 25 percent all the way through. But you get the idea that now this image takes up 25 percent of our page. You can change that with the percentage or if you have a specific height that you want it to be, you can do that in pixels. If we wanted our image to be 250 pixels wide, we could do that right there. If we wanted it to be 1000 pixels in height, we could do that as well. Obviously it distorts the image, not great looking, but you can do that, so you have complete control over how that looks. Let's go in and I'm going to add a width of 50 percent, so that makes it pretty large and a really cool thing that you can add inside here, CSS can do, like I've said, about anything you want. One of them when it comes to images is border radius, so you can add in, I got a rounding effect to it, which I think looks really nice. It looks really good on a lot of different websites of modern feature of just rounding all your images. You can do that if you want. That's a cool one to have. From there, I could keep going and going, like I've said. But this is the basics of it. If you are using an IDE, which I hope you are when learning CSS because it really helps. All you have to do is type in a letter, so if I typed in a, I could see all of the CSS that begin with a. All of these properties I can look at right there. If I wanted to look at t, same thing. Things like font size, you can change that of course, so we could change this font size of every heading to be 50 pixels, then they don't look very different, but they still are, so there's that. I encourage you to play around, see what you can find when it comes to CSS, and see what you can discover, there's tons of things you can do. The next thing we're going to cover, and so they're just talking more about styles because we can do that forever. We're going to talk about how to target specific elements, both one at a time and in groups. 10. 3.3 IDs and Classes: Now that you know how to target tags, you can do a lot. There's a lot you can change, but sometimes you don't want to change a lot. Sometimes you only want to change a little. That's where IDs and classes come into play. Both of those are attributes that you can apply to any HTML tag. Let's come into this paragraph right here, and inside of the paragraph tag, open it up with a space, and let's put ID, and let's press "Enter". Here we can type a name. This name can be anything you want, but I encourage you to make it make sense. If it's just some string of letters and numbers, yeah, it'll work but to have good coding practices, you want to make it a meaningful name. This would be like intro paragraph. I also encourage you to use the CSS naming convention, which is separation by a dash and really no capitalization at all. I'm going to save that. Now we have an ID tag associated with this paragraph. That does nothing by itself. Here's the text, but it allows us to go in and manually change this one tag against everything else. To show you that that's true, let's add a second tag really quick. I'm going to put in, I'm more text. Now we have two texts, two paragraphs, and we're only going to target one of them. I'm going to come into the site, to the CSS, and I'm going to say pound symbol or hashtag, that is how you target IDs. So pound symbol and then put in the name that you put in there. Intro paragraph, open and close it just like we normally do, and then let's give it another color. Let's say, color is equal to purple. Let's open that up. Now that color is purple. We are only targeting that one color. Now, you can barely read that so instead, I think what we'll do is change the background color to purple. Or let's change it to aqua, that's a nicer color. You can tell that this is a block level element, and it now has a background of aqua, and this one does not. That is an ID. IDs you only use on one element. So if I wanted to come in and change this paragraph to something, I would not come in and say, intro paragraph. Now, it'll work, but it is really, really bad practice. IDs in and of themselves are supposed to be for only one element and that's it, nothing else. But if you want more than one element, which you will a lot of the time, you'll want to use a class. That is what we're going to do right now. Let's come in and let's say this ordered list had a class. We'll say class and open it up and give it a name. We'll give it a name of list. We'll come down here to the UL and we'll say, class equals list as well. Because classes can be on as many elements as you want. In fact, you can combine these and have many, many that you want. Let's add a second one here just to show you that we can have multiple classes. I'm going to say, cool background. This ordered list has a class of list and cool background. This one down here just has list. Now, to access the list, you do a period. I'm going to say, list. So that's the first one. Then I'm going to do period.cool-background, it will change each of these in turn. The first one is our list. Let's go ahead and bump up the font size to 25 pixels. Then we can take a look at the lists, and they are a lot larger in font-size. That's great. Now, what about the cool background? Well, this is a list so it can be applied to multiple elements, and we can have it be something specific. So let's change the background color to aquamarine. That's a cool sounding name. Semicolon at the end of that. Now that one has the background, and you can also see that it is a block level element. When you start building larger websites, the thing that you're going to want to do is compartmentalize your classes and the effects that they have. This is advanced, but I do want to talk about this because if you start doing your CSS like this, then you'll be much better off than trying to change it later on. Inside of our website, if we had several elements that we wanted to be of a cool background element, but they also have other things like, they were large font, but we didn't want all of them to be like that. Then what we would want to do is make a class like cool background, and it adjusts just the background color. So we have this background class that we can go in and we can actually apply to everything. If this element, the anchor tag, we wanted to have it be a cool background, then we could do that. You can see that it's not a block-level tag, but it now has that cool background. If we want it to be a larger font, then instead of changing cool background class to have a large font, we could just add that list class because right now it's just increasing the font size, and then it has a large font. You don't have to do a class for every single unique style that you're applying, but it can be very helpful to put certain styles in a class and then apply multiple classes to your elements. That's just something to keep in mind. If you can learn to do your CSS like that, I think you'll be much better off down the road because it's easier to manage, its easier to edit, and it's much easier to read as well if you have descriptive names on your classes. But that's how you can target specific elements with IDs and general elements, but not the whole tag with classes. Classes and tags, you're going to find yourself using all the time everywhere. Make sure you remember how to access them with the hashtag and the period, and then you will be good to go. The last thing I want to show you is just some animations from around the web that use CSS and some of the really cool things that you can do to inspire you to get out there and learn them. Because once you know the basics of CSS, like you do, you can go out there and copy someone's CSS, and dissect it, and read it, and figure out exactly how it works, and then throw it up on your website. That's one of the really cool things about the Internet is there's so many cool things out there that people are ready to just share and give you, and all you have to do is learn how they work to be able to put them on your own website. Let's look at some of those next. 11. 3.4 - Some Awesome CSS Stuffs: All right, these are some things that were done with pure CSS. Most of them are inside of here, the CodePen.io, which if you start looking for questions and examples, you'd probably end up here. It's a really, really cool thing that allows people to just put their code out and you can see in examples and you can copy it. Now all the examples I'm going to show you are with HTML and CSS, there's no JavaScript, there's nothing else. Some of the CSS is extensive, like this one has over 1,000 lines, but you could copy it and paste it in and have it working in your website just by doing that. This is the Avengers CSS, really cool, the Hulk growls and the screen shakes. It's really, really neat. Then you have a really cool signature animations. If I click this Replay button, it draws that signature, which is really cool. You have the Chrome dinosaur being animated running around. That's pretty neat. You have a walking robot that is moving around the z-axis. That is pretty cool, all done with CSS. You have an animated character completely done with CSS. Here's a loading animation which looks really cool. Then here is a third party apps for Google now. This is all done with CSS, just animations, keyframe, stuff like that. Stuff that you can learn now that you know the basics of CSS, you can definitely do this. Making it from scratch, that's a lot harder. Even I have a really hard time doing animations because I'm not an expert in them. But what I can do is Control A, Control C, put it in my project if I love it and you can too. You just got to also copy the HTML and then you can dissect it and figure out exactly how it works. That's some really cool CSS. I hope that inspires you and shows you the power of what CSS can do. It's a styling language, but it also does more than that. There is so much that CSS can do, it's vast, it's broad. Don't be intimidated, be challenged and encouraged, because you can learn this, you can do it and you can put it in your own website without having to do it from scratch because there's so much stuff out there that you can just find. What I want do in the next section is give you some resources to learn CSS and HTML beyond what I've shown you and to challenge you for the project for this course of making your first website. 12. 4.1 - Great Online Resources: Let's talk about some of the resources that you'll want to use when building your websites and just in general for research. The primary one I'm going to recommend to you is W3schools.com. This is a website that I have used countless times as a reference and as a go-to for learning how to do certain things. W3schools.com teaches tons of different things, but they also have extensive knowledge on HTML and on CSS. The really cool thing about this is everything that they talk about has a "Try It'" button. You can click on it, open it up, and you can actually change the code over here to see exactly what would change over here. It's really cool, it's interactive, it's thorough, and it's completely free. You can go and learn HTML, CSS, and then you can go through and learn so much more if you want to. Definitely check it out. The next one is Code Academy. They have lots of classes for you to take. If you want something more in-depth on CSS, which I highly recommend because this was only supposed to give you a small taste of what you can do, then you can come in and you can take their free course here. Now you'll learn CSS, the same stuff that we were learning just way more in depth and it's really useful. It's really great. Another CSS that's a little more advanced is CSS-Tricks. On here they have a place where they publish articles. You can join their community, you can look at questions that people have asked, and it's very useful if you're looking for how to do something that maybe a lot of other people have done. There you're going to have examples that you can go through, play with the code, all that stuff. It's really great, very helpful. This one is definitely more advanced. If you'd like to read or you can read a lot, CSS-Tricks is really great and has some really awesome stuff. There's tons and tons of more stuff that you can use as well to learn. But these are what I'd recommend. The last one I'd recommend is when you search for something, what you will do is phrase your question as specific as possible. If we were trying to align our image and we just knew that we wanted it to be aligned in a certain way, we would want to say the language we're using, so "CSS line up image on the right". What you're going to be looking for, well, here's a good website CSS-Tricks. But another one you're going to come up across all the time is "Stack Overflow". This is a place that you can go and ask questions and get answers by professionals, people that have been working on this stuff for a long time. Most of the time you're going to find these questions have really good thorough answers with code that you can go and play with. They have stacks, which is what they call like their community for everything. They have HTML, CSS and then they have way more than just tech, as well they have life, well, really anything you can think of, there's a stack where you can ask questions and people can respond. That's a really great one as well, "Stack Overflow". I highly recommend you using it when you're looking for it. Just ask questions as specific as possible to get the best answer that you can. Those are some of the resources I highly encourage you to use and you're going to need them for the next video, because I'm going to challenge you to build your first website without any help from me. 13. 4.2 - Your First Website!: What we've done so far is learned the basics of HTML, CSS and then I gave you several really good resources that I again encourage you to use. Now, what I want you to do is to make your first website. We have done a little bit here. I would not call this a website worthy of publishing. It was never supposed to be, it's supposed to teach you. I want you to take these skills, the HTML and the CSS that you've learned and go and make a website about something you love. The cool thing about this is it can be anything you want and you can make it however you want. If you want to just fill your website up with images and have captions underneath, great, go for it. It's going to be like a photo gallery. If you want to find lots of videos and put them on their side to side and have them all auto play as soon as the page loads up, great information overload, but still really cool. Go for it. If you want to have a really minimalist website with just a heading, three paragraphs and one photo, do it. Line it up, color it, theme it, make it look awesome. Take what we've learned. You can download all of this source code that I've done, although really there's not that much. You can take it if you want but I encourage you to use those resources again and again because I use them too. Go and make a website. When you're done, upload it and share it with the community here. Show us what you've done. Show us how you've made it. I want to see it. Others want to see it and be encouraged as well. Now, don't have huge expectations for your very first website. It is not going to be, well, it could be, but it's probably not going to be something stunning and amazing and to revolutionize internet. It's going to be a little junkie, it might have some weird colors. Things might not work exactly perfectly, and that's okay. It doesn't need to. What you're doing now is putting into practice what you just spent learning. Because if you don't do that, you will not become a web developer. I can tell you as fact, just as with anything you're learning, if you don't go and do it and put it into practice again and again, it will not stick. You will not really learn it. You can watch a 1000 tutorials and have a bunch of head knowledge and know every single tag. But if you don't put it into practice, you are not going to be a web developer. This is my challenge to you. Make a website about something you love. Post it, and share it with us here. When you do that, you'll be done. You'll have your first website and you can call yourself a web developer. I look forward to seeing what you've got. I am really excited. When you're done with that, jump into the next section where I just have one video to congratulate you and where to point you to go in the future. 14. 5.1 - What Next?: Congratulations and way to go. You've made your website. Hopefully you've shared it, and I just want to say that you are now a web developer. Now, this is the first step on a long journey. There's still a lot to do. But, because you've made it this far, I know you can make it the rest of the way. Here are some websites that are really good and do a lot to showcase the power of the internet and what you can do as you grow and learn. There's a lot of really cool stuff that you can do when it comes to interactivity, themes, colors, tons and tons of really cool stuff. These websites show it off. If you just do a search for awesome websites online then you'll find something like this, and all of this is not being done with just HTML and CSS. What that means is once you feel comfortable with that, it's time to take the next step, and the next big step is JavaScript. If we search W3schools JavaScript, this will come up. JavaScript is going to be how you make your website really interactive. This is a great place to learn if you want to just go ahead and get started, and then from JavaScript, you'll want to learn something for the back-end if you want to do full stack design. What that means is, most websites have something that stores information on the back-end called the server. This would be like actual programming languages like C-sharp, Ruby, PHP, something like that. That's code that takes the information from a website, like an e-mail list or a contact form or something like that, and then processes it, saves it to a database, sends out an e-mail, sends you a text message, something like that. If you want to get into that, then I encourage you to go and learn a PHP, C-sharp, pick up one of those languages and just start working with it. It's a lot different than what you've done here, but it's really powerful. JavaScript is like one of those languages, except that it is designed for the front end or, I guess front-end is how we would call it. It takes the information that you want to work with on that page and does something right then and there. Here's an example showing the date and time. This is a button that has functionality that gets the date and time and then posts it inside of here. JavaScript, a lot of it is actually just modifying HTML or CSS that you've already put on your website. JavaScript can change the CSS of an element, it can find a specific ID or class and hide it or add to it, stuff like that. It's really powerful, you can make full games with it if you want it to go like that, or you can integrate it into your website to add a lot of functionality. Stuff like hovering effect, stuff like animations on clicks or tracking the mouse, things like that, that you can't do with just HTML and CSS. After you've done this, after you've made your website, keep practicing, keep coding, keep making websites. Make them for your friends, make them for more subjects about what you love, make them for your company, make them for your school, whatever. Keep making websites, and as you're doing that, keep learning. Learn JavaScript, learn C-sharp, learn Python, learn PHP, pick something and go and learn it. There is so much more to learn, so much more to create, but you can do it because you've made it this far, you can keep going. That's what I've got for you, that's the course. Congratulations, way to go. Once again, I hope you've enjoyed it. I have had a really great time teaching this, and I've had a great time interacting with you. Thank you very much for joining me, and as I like to say, have fun making great websites, and I'll talk to you again later.