Hand-Code Your First Website: HTML + CSS Basics

1. Class Intro: Hey, my name is Rich Armstrong from taptapkaboom.com. I've been designing and building websites since 2007, and in this class, I'm going to show you how to uncode your first website from scratch using HTML and CSS. For me, being able to write my own HTML and CSS is more than just coding. It's a modern way of creating and expressing myself in a digital way. A website is a real thing that hundreds of people visit and use and interact with, and being able to code it all by yourself gives you an incredible advantage. You don't have to rely on other people, packed templates, or tries in complex apps to bring your ideas to life. Coding is also super fun and rewarding. During the class, I'll take you step-by-step through creating a simple one-page website for your favorite cartoon heroes or movie character. I explain everything in an approachable way and leave out the stuff you don't need to know. By the end of the class, you'll have made your first website that you can share with the world. You'll know the basics of HTML and CSS. Your friends will be jealous, your mom will be super proud, and you'll have a solid foundation to build on top of. So whether you're an absolute novice or have dabbled in some web design and development before, come take this class. All you need is a computer and an internet connection. See you in the next video. 2. What To Download: To make coding way easier, you'll need to download and install a few things, a code editor and development browser, and a way to backup your code and publish a website. The first thing you'll need is a code editor. They make suggestions, complete your code, and make parts of your code different colors. Basically, they help you code quicker and with fewer mistakes. There are tons of code editors to choose from. In this class, I'll be using Sublime Text. You can use it for free and a commercial license only costs $80. Another awesome code editor is Microsoft's Visual Studio code. It's free and open source. Ultimately, you should pick a code editor that feels right for you, what you need it for. The second thing you'll need is a good development browser. Every browser has a bunch of tools that will help you develop websites. But Google Chrome is the best. With it, we can spot errors, understand why certain things are happening, and even do a bit of design in the browser. You know, backing up your work is a good idea, right? Well, most coders use a system called Git to backup their projects. With Git you store the changes you make to your project on your computer. This is great, but if anything happens to your computer, you lose all your code. This is where Github, comes in. It allows coders to synchronize their code and the changes they make with an online version. Github also allows you to publish simple websites and they've created an app called GitHub Desktop, which makes using Git super-easy. Go download and install those three things now. In the class resources you can view a PDF containing alternative code editors and development browsers. Once you've downloaded and installed those three things, you can skip to the next lesson and learn about HTML. The rest of this lesson, I'll show you how to download and install Sublime Text, Google Chrome, and GitHub Desktop. Open up your default browser, something like Safari or Internet Explorer, and type in "sublimetext.com", There we go, and then you want to download the one for your operating system. For me, it's download for Mac, if you don't see one for your operating system, click the download button over there, and then you can see OS X, Windows, Linux, whatever. Let's go for OS X, while that's downloading our search for Google Chrome. Google Chrome, there we go, google.com/chrome. You'll see something like this. This page does change from time to time. Then you click on this download Chrome for Mac. There we go. The next thing we need to download is GitHub Desktop, github desktop and here it is up here, desktok.github.com. Then download for Mac OS if you're on Mac or download for Windows if you're on Windows. Already, that'll download GitHub Desktop. Once everything's finished downloading, we can open up our Downloads folder. I'm going to drag and drop or GitHub Desktop app into applications. I'm going to double-click on "Google Chrome". I'm going to double-click on "Sublime Text", both these will open up. I'll drag Google Chrome into the applications folder. We've got a sublime text and drag it into the Applications folder as well. You can close those two Windows when they're done and you can just eject those two DMGs like so. Then you go to your applications folder and we go for "g-o" for Google Chrome and double-click that. This is a security pop-up that pops up on Mac, perfectly okay. You can click "Open" and there we go. You've got Google Chrome installed. Fantastic. Let's go back to finder and let's open up GitHub Desktop and again we can press "Open". This is our starting page that we will see. Then finally, we want to get Sublime Text open. Let's go to Finder press "S-U" on our keyboard, and then double-click that. Again, open that up, and Sublime Text will open behind a Finder window. You've got what you need to develop like a ninja. Let's get onto what HTML is. I'll see you in the next video. 3. What is HTML?: What is HTML? Well, telling you that HTML stands for Hypertext Markup language, may not be that helpful, but what I do find helpful, is explaining that HTML is a simple coding language used to display information. It's written by humans and understood by browsers. HTML structures the content of the web page into a bunch of boxes, in most web pages, there are boxes inside of boxes. The box that contains all the other boxes is our browser window, this is what I like to call HTML box theory. Inside each box there can either be more boxes, text, a combination of boxes, and text, or nothing at all. Based on the name of the box, the browser will display it and its contents differently to other types of boxes, there are boxes for lists, paragraphs, headings, footings, images, links, and plenty more. By default, most boxes are as high as their content, and as wide as the box there inside of, other boxes are as high and as wide as their contents. Most boxes that as far to the left and as far to the top as they can, so how do we code an HTML box? Well, most HTML boxes have an opening tag and a closing tag. An opening tag is comprised of a less than symbol, the tag name and a greater than symbol. A closing tag is comprised of a less than symbol, a forward slash, the tag name, and a greater than symbol. In between these two tags, you can put another HTML box, some texts, a combination of boxes and text, or leave it blank. The whole HTML box then is made up of the opening tag, the contents, and the closing tag, and this is all called an HTML element. By default, a browser will display HTML elements, from the top of the document towards the bottom, just as they are in your HTML file. Is this all, you may be asking? Not quite, there's one more thing, HTML attributes. Attributes are secret bits and pieces that give the browser more information about an HTML element, like how to display it, and what functionality to add. We write attributes in the opening tag of an HTML element, we use attributes to style elements to tell the browser where to go when you click on a link, what file an image element should display, and plenty more. An attribute is made up of a name, an equal symbol, and a value, which is wrapped in single or double quotes. You'll use them all the time when writing HTML. Okay, you understand HTML in theory now, in the next video, you'll start writing it. 4. Writing HTML: What is a webpage? Simply put, it's a document that contains a mixture of HTML, CSS, and JavaScript coding languages. A browser interprets these languages and display something visual and interactive to humans. A website then, is a collection of web pages that are often related to one another. Let's create our first webpage and write some HTML. We'll see what our code editor can do, what Chrome is capable of, and how Git and GitHub works. Let's start by going to GitHub desktop and creating our first repository. A repository is where we keep all of our files for a coding project. It's basically a folder that GitHub manages and watches. To create one, go to File and click "New repository". We're going to call a repository or repo, cartoon-hero. The description can be, "my favorite cartoon hero". Later on the class, we'll start adding our HTML and CSS files for our cartoon-hero or movie character. Now the local path is where you want to store this repository on your computer. I'm going to install mine on my desktop, but you can choose wherever you like. You can choose to initialize the repo with a README or not. You don't have to and you don't have to worry about gitignore or license options. Let's create this repository. You'll see that we now have a cartoon-hero folder on our desktop. This is our repository folder. Once you've created your repository, you can start writing some HTML. The easiest way to do this is to go to repository and select, Show in Finder, and then drag this cartoon-hero folder into sublime text. The first thing I'm going to do is I'm going to make this window a little bit bigger, so I'm going to hold "Alt Option" and click the "Green Button", then I'm going to start writing my HTML elements. The first one I'm going to write is my heading one element. Let's write the opening tag. I'll write some content, "Hey. I'm a big heading," and then we'll write the closing tag. You may have noticed that sublime didn't do anything fancy. The reason for this is that it's still sees what we're writing as plain text. You can see down here at the bottom right it says, "plain text". The easiest way to get it to recognize that we're writing HTML is to save the file as an HTML file. Go to File and then select "Save As". I'm going to save this as test.html, which makes it an HTML file. I'll press "Save", and then you'll see there's some color in the document. When we write our next element, which is going to be a paragraph element, you'll see that as I type p, a whole bunch of options appear. These are the suggestions that sublimed gives us. You can press "Down", you can press "Up", and then when you press "Return", it writes out the rest of the opening tag and the closing tag and puts your cursor right where it needs to be. Here I can say, "Hey. I'm a paragraph element. Cool, huh" All right. The next element is link elements, or what we call an anchor elements, so let's write that. I press "Return" and sublime text will do a whole bunch of stuff for us. One of the things it does is it gives us an href attributes. This is really important when it comes to anchor elements. It means that we can specify where a user should be taken when they click the link. We can go to Google https://google.com, and then the content can be, "click Me, I'm a link". All right. We now have three elements. Let's save the file or you can press "Command S" or "Control S", and let's go to our finder and drag the test HTML page into Google Chrome to preview it. Now, this is our webpage, which is pretty cool. You'll see that the h1, that paragraph, and the anchor element all look very different. This is what the browser does when we start writing HTML. It's fantastic. Now the great thing about Chrome is its developer tools. Now one of the things that we can use is the element and spectrum. You go to View, Developer and select Developer Tools. On the right-hand side, and sometimes at the bottom, you'll see your element inspector. As you hover over an element, you'll see that it has highlighted on the left-hand side. It'll show you the width, the height, and give you some information about its margins. What's great about this is that you can double-click on a tag name and then you can specify a new one. Just like that, press "Return". On the left-hand side, your web page will update. You can also double-click the content and edit that, which is fantastic. You can also click an element and press "Backspace", and it's gone, it's deleted. Now you can do this on any web page you like. You can inspect the elements, you can edit them, you can delete them, but don't worry, it only makes changes to your browser version of that page. When you refresh, everything will go back to how it was. This test of this link actually works. Yeah. There we go. It takes us to Google. But then to get back to the page, I have to press the back button. How do we open it in a new tab? Let's go back to sublime text, and we can add a new attribute in here called target. If we specify a value of _blank, it will open up in a new tab. Let's save this and go back to Chrome, refresh, and then click on that link, and ta ta ta, it opens up in a new tab. Now you can close this and then we're back at our website. Another great attribute that we can add to an anchor element is the title attribute. When you write out title and give it a value, something like, "Let's go to Google." It gives the user some information when they hover over it. Let's go to Chrome, let's refresh and hover over this link. You'll see that that little pop-up that says, "Let's go to Google." This helps out with the user experience. Now, we've done a little bit of HTML coding. Let's go back to GitHub and see what's happened here. It's picked up that we've created a new file. What we're going to do here is we're going to say create test.html. We're then going to commit this to the master, and what we've just done is ask GitHub to remember what we've changed. You can see all the changes in the History tab. Now, let's select the Changes tab again and do some more HTML coding. Let's go back into sublime text. I want this paragraph word to be bold. The way that we do that is to wrap it with bold elements, and a bold elements tag name is just b. If we save this and go back to Chrome and refresh, you'll see that the paragraph word is now bold. If you right-click on anything in any way page, you'll be able to inspect it, which will then drill down to that element in the element inspector, and it will highlight it. If we then double-click on the big tag and we change this to I, which stands for italic or italicized and press "Return", you'll see that paragraph is now italicized. The reason I'm showing you this is that you don't have to know a whole bunch of CSS to get things to be bold, to get things to be headings, to get things to look a bit different on an HTML page. The next thing is an image element. Let's go back to Sublime Text and add an image element. To write an image element, we type img, I'm going to press "Return", and Sublime Text is going to give me a source attribute to fill-in. It's also not going to give me a closing tag, and this is an exception to the rule. An image element doesn't have a closing tag because you can't put anything inside of it. Now what we're expected to give the image is a file to display in the source attribute. Where do we get this file from? Well, let's go to Chrome and let's download an image. Let's open up a new tab, lets search for cat, because the internet is all about cats. We go to the Images tab and let's click on this image here. Now if we right-click and say, "Open Image in New Tab," what we've got here are two different options of displaying this image. The first option is that we can right-click and we say "Save Image As," then we create a new folder called img. Then inside this img folder, we save this as cat.jpeg, save. Thank you very much. Let's close that and inside of Sublime Text, in the source attribute, we'll type img/cat. jpeg. Let's save that, go back to Chrome, go back to our test HTML page, we'll refresh here. There's our cat image, it's coming from our local file system, and this is called a relative URL. The other way of doing this is with an absolute URL. If we go back to this tab, you'll see that there's this really long URL. This is an absolute URL. If we type this in again, it will bring us to this image, and this image is stored somewhere on the internet. We copy this URL and go to Sublime Text, and then paste it into our source attributes. Save this, go back to Chrome, go back to our test page and refresh, nothing will have changed. But you will see that the source attribute now has this image which is located somewhere on the internet. That's the two ways of supplying a file to an image element, will apply the same theory to a few other elements later on in the class. Now what I want to try to do here is change this test.HTML into something difference. How do we do that? Well, we actually need to write a title element and put it in the head elements of our page. You can see on the right-hand side of the element in spectra that there's an 'html' element, 'head' element, and the 'body' element, but we haven't written any of those. To double check this, I can show you what the browser is seeing. We go to View Developer and View Source, and this is what it's got. Its not seeing an HTML, a body, or a head element. What's going on here? Let's close this and come back to this elements inspector. These HTML, head, and body elements are purchased by Chrome because we left them out. It's pretty intelligent and pretty cool. But it's best practice to put these elements into our HTML page. Let's go and do that. Inside of Sublime Text, the first thing I'm going to do is actually write the doctype, and this tells the browser exactly what version of html we're writing. Let's go for smaller than, an exclamation mark, type in DOCTYPE in uppercase, and then specify what the doctype is and it's HTML. Then we'll close it off. What we're saying here is that we're writing an HTML 5, which is the latest and greatest HTML. It also happens to be really short, which is great for us. The next thing I'm going to do is write out my HTML element. Now if I press "Return" here, it does a lot of work for me. I'm going to press commands here and write all of that out a bit more manually. Now, I'll write the closing tag for HTML, which sublime helped us out with quite a bit, then I'll write my head elements. The head element is where we store all the invisible elements in our page and one of those is the title elements. We can change this to test page, and this is the only thing I'm going to put into my head element. The next one is the body elements. Now the body element is where we store all above visible content. I'll cut this closing tag and I'll paste it just before the closing HTML tag. Then I'll select all of the content and press tab and dense it, and the reason I do this is because it's easier to read and it's easier to make sense of. You can understand which boxes go inside of which boxes. Let's save this and let's go to Google Chrome and refresh again, and you'll see that nothing much has changed here, but we now have a title on our tab of test page. Fantastic. We then select View Developer and View Source again, you'll see that now it has a whole bunch more elements to work with, which is fantastic. Let's close this up and let me show you another element. This element is a line break element. Let me demonstrate this in Sublime Text. Just above the image, I'll create another paragraph tag, and inside this paragraph tag I'll say, "My name is", but I want to put this on a new line. You may expect that you can press return and type in the cat's name. Kitty cat, quite original. I'm going to press "Save", then go back to Chrome, Refresh. We've got the paragraph tag, but there's no line break. Why didn't that work and how do we get it to work? The reason why it didn't work is because all whitespace, any returns, spaces, they're all just seen as one space in HTML. To get it onto a new line, we need to insert a line break element. Let's go to Sublime Text and where there is a line break here, we just type in a br elements. Again, this is an exception to the rule, there is no closing tag because you can't put anything inside of it. Let's save this, let's go back to Chrome and Refresh and there we go. It's on a new line. We've done a bunch of changes. Now we can go back to GitHub Desktop, and you'll see that the test.html file has this yellow dot in it, and this cat.jpeg has this green plus on it. On the test.html, you can see that it's taking away a couple of lines and then adding a bunch more lines. When you commit a file and get, it's going to remember what you're removing and remember what you're adding. The summary isn't already filled in this time. What we're going to do is say "Added cat image and few more elements." You can add a description if you want to, but I only do this if there's a lot of changes and I really need to be explicit about what I've just done. Then let's commit to master. You can see the history of changes again by going to the History tab. The original one was our initial commits, then we created the test.html file, and then we added a cat image and a few more elements. Now what's also great about this is that, in Sublime Text, if you start making changes like 'I'm a big heading, look at me", and then you save that, you'll see that there's these little dots that appear. What this means is that the file has been modified and sublime picks this up because it's working with Git to notify you of these changes. You've just written your first bit of HTML. I suggest you fist bump the air or let out, next up is publishing it online for the whole world to see. 5. Get Your Site Online: We've done a few commands and that's fantastic. But, if something happens to our computer, like lightning strikes at all, we spill ginger beer on it then our computer gets destroyed, all of our code will be lost. What we need to do is synchronize our code and commits with GitHub.com so that our code is backed up online. While we're at it, we'll publish our site for the world to see. Yeah. Let's go to Chrome and set up a GitHub account. I open up a new tab, go to GitHub.com and right there you can sign up. I'm going to go for TTKB as my username, and my e-mail can be richplus1@taptapkaboom.com, my password is going to be a secret. Then you click Sign up for GitHub. The first thing that you need to do is verify your account. Let's do this and you need to make this thing straight. There we go. This process may change from time to time. If it's not exactly like this when you sign up, don't stress. I'm an up for a free account, I still use a free account for myself. Scroll down. I don't need help setting up an organization and I don't want updates from GitHub. I'll press continue, and I'll scroll back to the top. What is your level of programming experience? New to programming? What you plan to use GitHub for? Learning to code? Yeah. Post a project? Yeah. Creating a website with GitHub Pages? Yeah. Then I can skip my interests and then submit. This step is really important. You need to verify your email- address. In your inbox you'll see something like this. Just tap the verify e-mail address button. There we go. It'll say your e-mail was verified. Then you should get an e-mail welcoming you to GitHub. Welcome to GitHub, TTKB. Then it has a whole bunch of stuff that you can click on. Fantastic. If you've got this far, you've set up your GitHub account 100 percent correctly. Once you signed up at GitHub.com and verified your e-mail address, go back to GitHub Desktop, then click on GitHub Desktop and go to Preferences. Then you want to sign in to GitHub.com. Type in your username or e-mail address, and then type in your password. Then click Sign in. Once you've signed in, you can then click Publish Repository. Going through this process will then synchronize your code and your changes with GitHub.com. The name looks right, the description looks right. But, we don't want to keep this code private because later on we want to publish our sites as a GitHub page for the whole world to see, and we can't do that if it's private. Once we've double checked this information, click Publish Repository. There we go. You should be synchronized with GitHub.com. Now to double check, go to Chrome, go to GitHub.com. Make sure you've refreshed the page. You should see your report on the left-hand side. Let's click that and you'll be presented with your GitHub report page. It's quite a lot going on here. But what I want you to do is go to the Settings tab and scroll down until you get to GitHub Pages. Then select your source and select the master branch. This will refresh the page. Then scroll down to GitHub Pages again. You'll see that it says your site is ready to be published at this URL. Then click on that URL and you should find a 404 page. This is normal and is perfectly fine. The next thing is to type in, test.html after your URL. Then press Return and there we go. You should see your test page with Mr. Kitty Cat. Now you can share this URL with the whole world. What's really cool is that when you go back to sublime text and update some HTML, like hey, "I'm a big fat heading" and you save that, then you go back to GitHub desktop, you'll see those changes which we've covered but then you add your summary. You commit to master, and then you push to origin again. When you push to origin, this will automatically update that page online for everybody to see. It's really, really cool and powerful. You've just published your first site for the world to see and it's securely synchronized with GitHub.com. Every time you update your code and push origin on GitHub, your site will update. You are on your way to taking over the internet. Next up is learning all about CSS. 6. What is CSS?: We've written some HTML, but it doesn't look pretty. This is where CSS comes in. Basically, the CSS we write makes our HTML look good by overriding boring default styles provided by the browser. We write CSS to tell the browser how HTML elements should look. To do this, we write a property name and value separated by a colon and ending with a semicolon. We can style an element with as many property pairs as we like. There are tons of properties you can write to change how an element looks and feels. Properties like width, height, background color, font-family, font-size, and a whole bunch more. Now there are two methods of writing CSS. The first is by using Inline styles, where we style an element using its style attributes. The second is by using Rule sets, where we select elements to Style, followed by the CSS properties and values for those elements. We will cover both these methods in the next lesson. 7. Writing CSS: In this lesson, we'll cover writing CSS with in-line styles and rule sets. It's best to explain by getting into code. So in sublime text, let's create a new file and then let's save this file as a new HTML file. I'll call it style-test.html and then I'll save that. Because Sublime knows that it's an HTML file, I'm going to start writing my HTML tag and then press return when it suggests it to me. It's just written a whole bunch of the HTML for me, which is fantastic. I'll give this document a title of style test and then I'll go into my body and start writing some HTML elements. I'm going to start with a couple of h one elements, and I'll call them heading one - one and then I'll copy this and paste it twice, heading one - two, heading one - three and then what I'll do is I'll create an h two and do the same thing here. Heading two - one, heading two - two, heading two - three. I'm going to save this and I'm going to go into my finder and drag the style test into Google Chrome. This is what it looks like by default, three Heading one's and three Heading two's. Now I'm going to begin to style them. So, inside of Sublime Text on my first h one elements, I'm going to add a style attribute, and inside of here, I can start adding my property name and value pairs. So the first thing I'm going to do is go for a font size, so font size, press return. Let's go for something like 30 pixels, and then I want to add a color so I'll go for color and it is spelled the American way. Everything in HTML and CSS is spelled the American way, just so you know, a colon, what is a color value? Well, there are a couple of ways to do color in CSS, I'll show you two in this lesson. So let's go to Google Chrome. Let's open up a new tab and type in htmlcolorcodes.com. On this website there are a few ways to get colors. Let's scroll down a bit and here we have a really nice color selector. It looks a lot like a color selector you'll find in Photoshop or design app. So if you're comfortable using Photoshop or something like that, use it there instead if you want to. Now this is the easiest way to select a color. Once you're happy with the color that you have, you can then double-click and you can copy that value. You can go back to Sublime Text and paste it in. Remember to put a semicolon afterwards, and you'll see that this is a hex code value and it's got this hash symbol before this number. So when we save this and go back to Google Chrome, we can then refresher and you'll see that our heading one - one now has a color and a font size. Another way to go about doing colors in CSS is to use color names. Now if you go back to the HTML color codes website and scroll down a bit until you get to these color names, scroll a little bit further and then click browse the full list. Then scroll down again and what you'll see here is that there are a couple of names that have been assigned different color values, and sometimes these are a lot easier to remember than hex code values. So if I remember salmon and I'm in Sublime Text, and instead of this color, I just type in salmon and I save, then go back into Google Chrome and then refresh here, you'll see that the color comes up, which is pretty handy. So I'll be using these color names in this video just to keep it really simple. Now back in Sublime Text, what I want to do is I want to style all of these headings the same way. So what I'll do is I'll select the style attributes I'll copy it, and then I'll paste it again and again and again and again and again. I'll then save. I'll go back to Chrome and refresh here, and there we go, all of our headings now look exactly the same. This is really cool because it means that our heading one's, which are meant to be really big, can now also be the same size as our heading two's. Now I want to style my heading two's slightly differently. So I'll go to Sublime Text and then my h two's, let's change the font size to about 20 pixels and the color, I'm going to go for hot pink. Then what I'll do is I'll select these values here and I'll copy them and paste them onto the other h two elements. I'll then save that, go back to Chrome and refresh. Now I can see that the heading two elements are slightly different. Now if you haven't picked it up already, in Sublime Text, copying and pasting these values over and over can feel a little bit repetitive. Also, there's a lot of CSS here, compared to how much HTML and how much content is actually here and you start to get all of these different line breaks happening man, it's a little bit messy. So what I'd like to do here is change from in-line styling to rule set styling. One of the ways we can do this is to create a style element inside the head element. Let's create a style element and you'll see that Sublime gives us an attribute of type text CSS. We don't necessarily need this, but again, it's really good to be specific. Now, inside of this style element, we can start doing some CSS styling. So what I'll do first is style my h one elements and how I do this is by selecting all h one elements and then declaring that all h one elements should have a font size of 30 pixels. Then I make another declaration that all h one's should have a color of salmon. Now this is the equivalent of this attribute and its value on all three of the h one elements. So I'm going to remove these attributes like so. Now what this is called is a rule set. This is your selector statement which targets a bunch of elements to style. Then within these curly braces is your declaration block, and each line is called a declaration with a declaration property and a value. Let's save this and then let's go to Google Chrome and refresh, and nothing has happened. But check this out, if we right-click and inspect these elements, you'll see now that there's this element inspector panel, and then there's a bunch of CSS properties at the bottom over here. You'll see that this h one has a font size of 30 pixels and a color of salmon. So if we wanted to change the font size, we would click on the font size value and change it to something like 50 pixels, it would change all of them. Now, if you clicked on this h two elements and you want to change its font size, you can change this to 50 pixels, but just one of them would change. So you can see the differences between in-line styling and rule set styling right here. Now when we refresh our page, everything goes back to normal. So if we go back to Sublime Text and we want to change our color to perhaps something like teal. You can see how quick that was compared to copying and pasting between the different elements. So I'll save that and go back to Chrome and refresh. Now let's get onto styling is h two's with rule sets too. So what I'll do is create another rule set. I'll select all h two elements and then I'll make a declaration that all h two elements should have a color of red. Then I'll save. Then let's go back to Chrome and refresh, and what has happened here? That's a really good question. So if we inspect this h two element, you'll see that the h two style is coming through, but it's crossed out and instead, this color of hot pink is taking precedence. Why does this happen? Well, the key idea here is that the more specific style will take precedence. So what's happening here is that we're saying all h two's, we want you to have a color of red. But what's happening on the actual elements, is we're telling the elements that it has a color of hot pink, which means it's more specific because only this element is going to have a color of hot pink. So this means if we uncheck the color of hot pink, it will then have a color of red, which is pretty interesting. If we go back to Sublime Text and scroll down and remove all the color declarations from the in-line styles, then what do you think will happen? Let's go back to Chrome, let's refresh and there we go. All of our heading two's are now red, but they still have a font size of 20 pixels. So when you do in-line styling and rule set styling, they combine, they don't over write each other unless there's a conflict. When there's a conflict, remember that the more specific style will take precedence. Now let's go back to Sublime Text and take out this font size of 20 pixels and put it into the h two rule set, and then we can remove all of these style attributes. Now, I can clearly see what's going on. It's way, way better. Now, when I mentioned conflicts, I was talking about inline styling verses rule set styling. But what happens if there's a conflict within rule set styling? If I write another H_2 here and I set a color of green, what's going to happen? Let's save this and find out. I'll refresh here, you'll see that the font size is still the same, but it's now green. What's happened is that if there are two styles that have the same specificity, then the one that was written last takes precedence. You can see over here that says style test HTML line 16. This one was style test HTML line 11. The one that was written last then takes precedence. But now, what if we want some of these elements to be different? One way to make one or more elements difference is by giving an elements a class attributes, and then styling elements with that class differently. Let's go into Sublime Text and do that. If we go to this H1 in the middle and give it a class of big, and we then copy and paste this style onto this H_2 and the last H_2, we save this, we go back to Chrome, we refresh. Nothing's happened. So the class of big doesn't actually do anything. What we need to do is actually write some styles for this class. Let's go back to Sublime Text and just beneath this H_2, we're going to write our selector for all elements with a class of big. The way we do this is by putting a period and then putting the class name. What this means is that we're saying all elements with a class of big, I declare that you should, and what are we going to do? Well, let's set the font size to something like 60 pixels. Then we're going to save this, go back to Chrome, and refresh. You'll see here that only the elements with a class of big had this huge font size. It doesn't matter if it's an H_1 or H_2 element. Now, if we go back to sublime text and we put a class on the first one of uppercase, and then I copy this, and I put it on this H_2 over here, and then if I copy uppercase and add it to the first H_2, which means that it will have two clauses, one of big and one of uppercase and then save. Then I write a selector for uppercase and then a declaration block and give it text-transform of uppercase, and save that, go back to Google Chrome, and refresh, you'll see that all elements with a class of uppercase are now uppercase. If we select this H_2 element with the class of big and uppercase, we can see that because it has a class of uppercase, it has a text-transform of uppercase. Then because it has a class of big, it has a font size of 60 pixels. This H_1, because it has a class of uppercase, it has a text transform of uppercase. This H_1, because it has a class of big, it has a font size of 60 pixels. This is really powerful. Now, what's even more powerful is in Sublime Text, or your code editor, you can say all elements with a class of big and uppercase, I declare that you should have a color of navy. Let's see what that does. We save, we go back to Chrome, and refresh, and you'll see that only one element will actually change color because it's the only element that has a class of big and uppercase. The idea of selectors is really powerful and it can get really complex. Now, let me give you another example of a really cool selector. Inside of my first H_1, I've got this word heading. How would I make just that heading a different color? What we'll use is a span element. A span is like a blank box by default. It has no default styles and inherits the text styles from the element it's inside of. Let's write span, and then after hitting one, we'll then enclose that span. I'm going to save here, go back to Google Chrome, and refresh, and nothing will have changed. Now, let's go back to Sublime Text and let's write another span just outside of here and put in span element. I'll save that, go back to Chrome, and refresh. It will be default text. It's not going to have anything special on it. You'll see that this span, it looks like the heading it's inside of, and you'll see that this span, it doesn't look like anything. Check this out. If we were to style all span elements, and say all span elements, I want you to have a color of violet. Let's save, and let's go back to Chrome and refresh. You'll see that this span element and this span elements are now both violet, which makes sense. Back in Sublime Text, if we were to say, all span elements inside of an H_1 be color violet, we can write it like this: H_1 space span. Then we'd save. We'd go back to Chrome and refresh, and only the span that's inside of the H_1 would be violet, which is really, really cool. What we've seen here is super powerful. Back in Sublime Text, I found a quite frustrating having to scroll between my styles and my HTML. If I wanted to create multiple pages, I'd have to copy the style elements with all the styles in it and paste it in every single page that I want to look the same. Then if I made a change, I'd have to copy and paste in all the other pages again. How do we work around this? Well, check this out. I'm going to create a new file, and I'm going to save it as a CSS file. I'm going to create a new folder called CSS. Inside of the CSS folder, I'm going to save this file as test dot CSS. Then I'll save this, and you'll see that Sublime recognizes this as a CSS file. Then I'll take all of these styles inside of the style elements, I'll cut them, I'll put them in test CSS, I'll paste them. I'll then select most of them, and then press Shift and Tab to an indent them, and then I'll save this file. Then I'll go back to style test of HTML. I'll save this file, go back to Chrome, and refresh. You'll see that all the styles have disappeared now. This is really cool because, wow, I can actually see all of my HTML and don't have to keep on scrolling up and down. But how do we now get to style file to be applied to this HTML file? How we do this is, instead of having the style elements, we'll now have a link element. We'll start typing link like so, and just like that, Sublime Text will fill in the rest for us. This row attributes stands for relation. We're saying, let's link to this file, and the relation is style sheets, and the type is going to be text CSS. This href looks a lot like an anchor tags href. We can either use an absolute URL, all a relative URL. The absolute URL could be located anywhere on the Internet, but we've got a CSS file that we've just created. I'll say CSS slash, and we call that test.CSS. Let's just check that. There we go. Test.CSS. Fantastic. I'll save this, and then go back to my browser, refresh. All of our CSS is back now. This is great because in our code editor, I can just read my HTML. I don't have to keep on scrolling up and down, changing CSS and changing HTML, and that means I can create multiple pages that make use of the same CSS file. Now, let's just do one more thing before we end this lesson. In my test.CSS file, I'm going to give the body a background color. Let's go for the body element, and I want the background color. What color do I want it to be? Well, let's try a light gray. Something like that. Refresh. There we go. It's not too pretty, but now you've learned another CSS property. If you tap on body and tap on this value, perhaps we can find something that's a little bit more colorful. I'm going to type in yellow, yellow- green, green-yellow. What about light goldenrod yellow or light yellow? Light goldenrod yellow sounds amazing. That might be one of the most fantastical color names I've come across. Finally, we need to go back to GitHub desktop and we need to commit our files. What have we done? We've created a CSS test, HTML page, and CSS file. How about that for a summary? Commit to master, and then what we'll do is push origin. This will synchronize it to GitHub.com. Then we can go back to our browser, open up a new tab, go for ttkb.github.io/cartoon-hero, and instead of test HTML, we'll go for style-test.html. If it's not found immediately, it might just take a little bit of time for it to come round. Let's refresh here, refresh again, refresh again. There we go, finally live. Now, you know the basics of CSS. In the next video, we'll talk about planning. I know it sounds boring, but it will help you become a coding ninja. 8. Planning Your Website: I know you don't want to hear this, but planning is essential when it comes to creating a website, even a simple one. Without a plan, we could be coding unnecessarily for days and we don't want to do that. To start with, choose a character to make a simple website for. I'll be making a website for Wreck-it Ralph. Planning is a must. I normally do a few quick sketches to see what I want my website to look like. Next, I create what I like to call a box wireframe. It's where I draw the HTML elements as boxes, give them names and indicate which boxes contain other boxes. I don't try to plan everything all in one go and often draw an arrow from a box and fill in the details later on, on a separate part of the page or even on a new page. For me, planning is like looking at a maze from above and sketching a route. It's a guide. Coding is like running through that maze while following the guide. So I find it tricky to plan and code at the same time. For this class, I've made a box wireframe for my characters website. It includes a header element containing my character's name and profile image, and main elements containing headings, paragraphs, lists, and an image and lastly, a footer element containing a small amount of text. Now it's time to create your own box wireframe. You don't need to know anything about design or styling to create one. All you need to know is that HTML is a bunch of boxes inside of boxes. I've included my box wire-frame in the class resources for you to check out. You can use it as a reference if you like. Once you've completed your box wireframe [inaudible] part one, you can start creating your characters websites. If you want, post your planning in your project gallery. 9. Your Website's HTML: Let's get nerdy and write the HTML for our character's web-page. You can refer to the common HTML elements PDF in the class resources when writing your HTML. I'll go over each HTML element as I write it. Now the only thing that's changed in my "cartoon-hero" folder since I was last year, is that I now have a "box-wireframe.pdf". I'm going to open this up and refer to it as I code my HTML. You can see that I've got a header element, I've got a main element, and a footer element all the way at the bottom. What I'm going to do is code my HTML from the top to the bottom and refer to this document as I go. Let's get into Sublime Text. I'm going to create a new file, then I'm going to save this file as index.html. The reason I'm doing this is because the browser looks for this file first, and it loads it automatically. If you go to taptapkaboom.com, you don't have to type in "index.html" or "bar.html". It automatically loads the index.html file first. Let's save it. Then I can write my HTML elements. I'm going to press enter. I'll give my page a title of Wreck-It Ralph, and then I go down to the body. The first thing I'm going to do is write my header elements. Now a header element says, "hey, this is what the page is all about, it's where headings go, it's where big images go." It's not really the contents of the site, but it's normally big and bold. Let's write our header elements. Inside our head element we'll write, an image element which is going to be our avatar. Then we'll write our h1 elements and put Wreck-It Ralph inside of there. Now for our avatar, I'm going to need an image. Let's go to Google Chrome. In this tab I can search for Wreck-It Ralph. There we go. Let's go to images. I'm going to look for something that's like an avatar, preferably square so I don't have to crop it. Let's scroll down a little bit. This one looks pretty good, 440 by 450. That looks great. Right-click on it. Let's go open image in new tab. Then I'm going to right-click again and ''Save Image As". Inside of my image folder, I'm going to save it as ralph-avatar, and then save that. Ralph-avatar.jpeg. I'll close this and close this, and I can also close this. Then inside of the source attribute I can write img/ralph-avatar.jpeg, and that is our header element for now. What I think a great practices especially when you're learning how to code, is to use HTML comments. Now I haven't taught you this so far, so listen up. Just above my header, what I'm going to do is I'm going to write a comment to myself just to make it abundantly clear what this next element is. To write a comment, you go for a less than symbol, an exclamation mark, two dashes, and I will see everything beneath this goes gray, and that means it's committed out. The browser cannot understand this, it won't read it. Inside here, I'll say, "header elements". Then to close the comments, I'll do a dash dash, and then a greater than symbol. There we go. That's a really easy way to leave yourself notes. I'm going to save now, and it's a really good idea to regularly save your work. Let's refer to the planning document inside of preview. We'll then write our main element with an h2, a paragraph, and an image to start with. Back in Sublime, let's create a new comment. Now instead of typing that out, there's a shortcut. I can press "Command" or "Control" and forward slash. There we go. I don't have to remember how to write an HTML comment. I'll type in "main element". Then after, that we can write our main elements. Now, our main element is where the main parts of your web page goes. It's pretty self-explanatory. Then we've got an h2 and after our h2, we've got a paragraph, and after the paragraph we've got an image. Inside of the h2, what was it? About Ralph and a little bit about him plus an image. Let's say "About Ralph". Now let's write a little bit about him. "Ralph is awesome. He's an 8-bit video-game bad guy who travels the length of the arcade to prove that he's a good guy." Then beneath this we've got an image. I'm going to save and then go search for another image. Let's go into Chrome again and search for Wreck-It Ralph. Go to "Images", and then under "Tools", I'll select a large image. There we go. Now I want one with him and his friends. Scroll down a bit. There we go. That looks pretty good. What happens if there's something a little bit better? That one also looks pretty good. I'm going to click on this one. Right-click. Let's open in new tab. Right-click again, "Save Image As". Then inside our image folder, I'll say "ralph-bhig.jpeg". Save that. We can close this, close this. Then inside of Sublime we can type "img/ralph-big.jpeg". Over here, you can see that I've misspelled that. I'll put an "h" in there. We did actually have an "h" over here, ralph-avatar, ralph-big. That looks good. We've now put a few elements into our main element. What's next? Let's go to "Preview", scroll down a bit. We've got a paragraph, an h2, and then an ordered-list. Let's write this paragraph tag, and here it's a caption. I'll say, "Ralph and his friends." I will spell friends correctly. Then we'll create an ordered list. Now what an ordered-list is, is basically a list with numbers on the left-hand side. It's really cool because your browser will create those numbers for you. Let's go for an ol for ordered-list. Inside this ordered list there are going to be a couple of list items. Let's go for a list item. Then inside of this list item, we can say, "He's got big hands." We can create another li and we can say, "He's treated as bad-ass." Then the third one we can say, "He's trying to be the good guy." There we go. I think there was actually another element over here, perhaps an h2. Let's go back to preview characteristics. Let's put in that h2 and type in "Ralph's characteristics". It's pressure full when you're typing on camera. Everybody's looking at your spelling. I'm going to save that. Let's go back to "Preview" and see what's next. We've done the ol with the list items. Then there's an h2 for friends, a paragraph, and an unorganized list. Let's go back to Sublime. Over here I can write another "h2", "Ralph's friends". Then we go for a paragraph element. Now we can write a little bit about that, "Ralph has some awesome friends. I think his best friend is Glitch. She's awesome." Then if we go back to "Preview", you'll see that I've put in "& links". I want these list items to be links. Inside of Sublime Text, I can maybe say, "Click on the links below to read more about them." Something like that. I'm going to save that and then let's create an unordered-list, ul. This is different from an ordered list. Instead of numbers, they'll be [inaudible] on the left-hand side. His first friend is Pac-Man. Now I want to turn Pac-Man into a link. Perhaps I can cut that, write my anchor elements and then inside of these two tags, I can paste "Pac-Man". Then I want somewhere to go. Where is Pac-Man going to take me? Let's go to Chrome. Let's search for Pac-Man, something like that. Scroll down a bit. Here we go. Perhaps you can go to the Wikipedia article. I'll copy this URL, go to Sublime again and paste that. Then I'm going to copy this list item, paste it twice more. His second friend is going to be Mario, or maybe Mario Brothers. Or maybe it can be Mario and the next one can be Luigi. Luigi, there we go. Then in Chrome, I am going to search for Mario. Let's scroll down a little bit, Mario Nintendo, Super Mario. Maybe we can go for this one. There we go. I am going to copy that URL, go back to Sublime and paste it over there. Then, let's search for Luigi, scroll down again and again, let's go to Wikipedia. So I'll copy that URL, I'm going to go back to Sublime and paste it in there. Then his final friend obviously should be Vanellope von Schweetz. So let's type in, Vanellope von Schweetz. There we go. When we search for Vanellope von Schweetz, there we go. Let's go to this first link. Accept the cookies. There we go. There does not seem to be much information here. Oh, there we go. There is a video. Let's pause that. Let's copy this URL, let's go back to Sublime and paste it in over here. Perhaps we can say A.K.A. Glitch. I am going to save this and perhaps what we can do here is, put a little bit of comments just above these h2's. So I'll press Command slash for comments and I'll put in a friends and here, I'll press Tab and then Command slash again and I'll copy and paste that word. It is really long and hard to spell. About Ralph, that is okay.I do not think I need to put a comment in there. So we have done our main element, now, let's do our footer element. So I'll create a new comment, footer element, and then write our footer element. Now, footer element is something that should exist on almost every websites, almost every web page, and it should just have a few links or a little bit of information about the site. Maybe there is a new set of subscription, links, a copyright symbol, that stuff. Then, inside of this footer elements, I'll write my paragraph elements. Here, we can say this site was created during a TapTapKaboom class. Then after that, we can write our copyright symbol even though we do not really have any copyrights over the content but it is still fun to do. So the way we do this is by using an HTML entity. The HTML entity for a copyright symbol, is like so. You type an ampersand symbol and then go, copy, and then put a semicolon after that. You should see that it turns purple or different color. Then you can put your name after that. Then TapTapKaboom class, I want this to go to my website. So I'll put an opening anchor element tag and then after that, I'll close it. We can put an href and here and tell it to go to https://taptapkaboom.com and then I'll save that. Now, we've actually done all of this without having a look at what it looks like. This is okay, it's been as simple HTML process, but now we can go and have a look if everything's working. So let's open up Finder and drag index.html into Chrome. We can close that first tab and then have a look at what our site looks like. We've got our avatar image, we've got our h1, we've got an h2, Ralph is awesome, we've got that in a paragraph, then we've got a really big image, wow, that's huge. Then let's scroll down a little bit more, Ralph and his friends, that's the caption. Another h2, and there we go. We've got an ordered list. You can see it's got the numbers on the side and we've got Ralph's friends to paragraph. Then, we've got a bunch of list items in an unordered list. You can see it's got these disks on the side instead of numbers. Then finally we have the footer tag. This looks fantastic. What is really important here is that, if you've got no styling on your page, things makes sense. This is how a search engine will see your page. So if it makes sense to you without any styles, is should make sense to a search engine. Now I just want to double-check that everything is where it should be. So I'm going to click on View, go to Developer and open my developer tools. Let us scroll up here inside of our body, we've got our header, that looks good. Inside of our main elements, we've got all of those main things. Then our footer, there we go. Fantastic. You can see that the comments are here also but Chrome won't pay any attention to those. Let us see if these links work. If I click on Pac-Man, goes to Pac-Man and what I want this to do is open in a new tab. So let us go back to Sublime Text and we'll put in target_blank. I'll copy this and paste it on all the other anchor elements. There's one down here too. All right, I'll save that. Let's go back to Chrome and refresh. You see now when I click Pac-Man, there we go, opens Pac-Man. If I click on Mario, opens Mario. Luigi, there we go. Finally, Vanellope von Schweetz, there we go. Fantastic. Let's close that. So our links work, things are looking good. The last thing that I want to do is, I want a little tab icon thing. I know what this is called by perhaps you don't. What I am going to show you now is, how to Google for something. I think it may be called a tab icon. So I am going to search for that. Open up a new tab and go browser tab icon, HTML, maybe. Now you can start to browse the results. Stack Overflow is really good, let's check that out. How to add a browser tab icon, favicon, that is a good word to know for websites. Let's scroll down a bit. So often what happens is, someone will ask a question on Stack Overflow and a bunch of people will give answers. Then you look for a green tick, and this is often the right answer. Simply add the following code to the head element. There we go. Let us copy this. PNG favicons are supported by most browsers except for browsers that are IE lower than or equal to 10. For backwards compatibility, you can use ICO favicons. I have no idea what that is. Well, I do, but you probably don't. So let's copy that. Let us go to Sublime and scroll to the top and let's put it in our head element. No, we did not copy it. So let us go back to Chrome, copy that, and then go to Sublime and paste it. This looks a lot like a link with a row of style sheets, but obviously different because it has a row of icon and it has an href. So let's change the href and we'll need to supply an image most probably. What I want to do is use the same image that we use for our avatar. So I am going to copy this and paste it over here, then I am going to save. Let's go back to Chrome and refresh here and there we go. We now have one of these things which is called a favicon. Now if you don't have a square image for your character or your movie hero, search for something like image resizer. There we go. Resizeimage.net, that will work great. Simple Image Resizer, PicResize. All these websites will probably do a great job. Try them out, crop your image and then download that image and put it into your HTML. Let's close this and we can close this tab too. So, this is looking pretty good. It's now ready to be styled, which we'll cover in the next video. But first, let's come into our code. Let's go to GitHub Desktop. Yes, we've added a box wireframe, we've added two images and an index.html file. So let us write a summary of wrote our or maybe we can say, added our character's index.html file and few images. Maybe for description we can say wrote the HTML and added a favicon. Then let's commit to master. Once you have done that, we can then push the origin and when that is done, well, then let's go to our browser, open up a new tab, type in your GitHub username, mine is tt and kb.github/cartoon hero and then instead of test, we could use index.html or we could just leave it blank. So, let's try just leaving it blank, pressing return. There we go. Now looks way better in writing index.html or bar HTML or test HTML after the final slash. But if you want to, you can do that too. Same thing. At this point, you can be pretty proud of yourself. You have just written the HTML for your characters web page. I think you should give yourself a high-five. Yeah. 10. Your Website's CSS: Now comes the fun part of our characters website, the CSS.What's amazing about CSS is that with it, you can make the same bunch of HTML looking very different. Try and make your heroes website match his or her personality.I'm going to work from the top to the bottom of the page and change our HTML a little bit as we write the CSS. I'll explain everything as I go. But if you want to try something different, go for it, simply google it or have a look at the common CSS properties pdf in the class resources. This is what our web page looks like without any CSS. Now, we get to have some fun.I'm going to refer to my box wire frame pdf again during this lesson. The first thing I'm going to do is address this header. I want it to be really wide and I'm going to give it an orange color. For the avatar,I want to make that a circle with a border and I want the image and the H1 to be in the middle. Let's get to it. Inside of Sublime Text am going to create a new file, and this is going to be my CSS file. I'm going to save this as,hero dot CSS, inside my CSS folder.There we go. Then inside of my index file, I'm going to write, in-link element, press return,and the role attribute is going to be Stylesheet.The type is text CSS and the HRF is going to be CSS slash hero dot CSS.I'm going to save that. Then inside of my hero CSS, I just want to make sure that this is all working. I'll write some styles for the body element and the background color, I'm just going to say red for now just to double check that it's working. I'll go back to Chrome and refresher.Ta-da.It's working. Let's go back to Sublime Text. Let's take this out. The first thing am going to do is set my margin to zero. When I save this and go back to Chrome, you'll see that on the left and the top, and hopefully on the right and at the bottom, there is no more margin on the body. Now, let's do some header styling. Beneath here, let's go for our header element. What I want to do first is add a background color. My color that I have memorized is D14635. This is an orange a color. Let's save this.Let's go back to Chrome and refresh.There we go.It's the Wreck-it Ralph orange. Well, I think it's a Wreck-it Ralph orange.Then what I want to do is, I want to make the heading, well, H1 inside of the header white. So I'll say H1 inside of header, color I want you to be white.There we go. Then what I want to do is, I want to center line the H1 and the image. One way to do this is to set the text align property to center. This will then align the image and the H1 in the middle.I'll save that, go back to Chrome and refresh.There we go. That's looking pretty good.Now, I want my image to be a circle. Let's go to Sublime Text and say "hey, image inside of header.I want you to be a circle". The way we do this is, is by saying border-radius. You'll see it down here, border-radius,and we can say something like a 150 pixels. This will make a really nice rounded corner. If I save this,lets go back to Chrome and refresh. Yeah, that looks pretty good. But now I'm going to inspect this elements and I want to make it a circle.We've got a border-radius of 150. But then if I set the width to 300 pixels, there we go, things become circular. I'm going to copy this style and go back to Sublime Text and paste over that. There we go.Now, when I go back to Chrome and I refresh, it's circular.Fantastic.Then I want to add a border. Let's go for a border. This border property is actually a shortcut. The value is going to have three different things to it.We're going to see how wide it's going to be. I'm going to go for ten pixels and then going to set the style of border, which is going to be solid. Then I'm going to set the color which is going to be,#483A94, which is this really cool purple color. Maybe I can change the 10 pixels to something like 20 pixels.There we go, that looks pretty good. But you'll start to see now that it's not circular anymore. This is because of the box model. This fancy word.But what you can see on the right-hand side here is that I've got 300 by 300 pixels, then I've got a padding of nothing,and then I've got a border of 20 pixels on the left and 20 pixels on the right, which makes it 340 pixels wide and 340 pixels high. That means that I need to increase my border-radius from a 150 to a 170. How does that look?Pretty good.Let's copy this again.There we go.Let's go back to Sublime Text and paste this.There we go.I'll save that.Go back to Chrome and refresh.Fantastic. Now, I want a little bit of space above this image and below the H1. What I'll do is in Sublime, I'll add a thing called padding. We can go for padding top and I'll go for about 50 pixels, and I can go padding bottom 50 pixels too. Let's save,lets go back to Chrome and refresh.There we go.That looks pretty good.Although I don't know if I'm a big fan of the purple border. Maybe I could just change that to white. I'm going to go back to Sublime. Let's change the border color from that purple to white. Save and refresh. Yeah, I really like that. Now, this Wreck-it Ralph in this kind of font, doesn't look too good. It's pretty easy to change your font-family in Sublime in our header as you write in font-family and then give it a value. Now, there are a couple of default fonts that will work across your computer and the user's computer, But if you specify a font that's only on your computer. It won't work on somebody else's computer. What you need to do here is to apply a few fonts that will work if the previous one doesn't work. What I'm going to do is write Helvetica. If they don't have Helvetica, then we can use Arial. If they don't have Arial, we can use sans-serif. Now, a serif font is one of these ones that we currently have, and it's got these little feet and little arms. Sans serif means it doesn't have these feet and arms. Now, you can also write Helvetica with quotes around it, and Arial with quotes around it, if you like,but it's not really necessary. Remember to put your semi-colon after that. If we save that and go back to Chrome, refresh, that looks a lot better. But what about the rest of our site? Well, perhaps lets change it all at one go. What I'm going to do is cut this font-family declaration and go to my body rule set and paste feature.Then I'll save, go back to Chrome and refresh. Now, our whole site will have this font applied to it.Fantastic. Let's just double-check that it actually does have that font. I'll right-click, inspect, then in the right-hand side here, I'll scroll down font-family Helvetica, Arial, sans-serif. If your computer doesn't have Helvetica and it doesn't have Arial, it'll use any sensor font that's on the computer. Now,for my headings, I want to use something a little bit more special. I'm going to go to Google Fonts and find a really cool fonts to use. These are called web fonts. This will work whether a user has the font on their computer or not. Lets open up a new tab, go search for Google Fonts.Click on this first link. Then here you can go wild. Search for something that matches your character. I know that the font that I want is called Press Start 2p. Here we go. Once you've found your font, you can then press this plus button. Then once you've got a family selected, click on this black bar. Then there are two ways to get that font into your styles.The standard way is the easiest. Let's copy this and let's go back to Sublime, go to our index and before the CSS file, let's paste this link element. You can see that it's roughly the same.It's just in a different order. It's got an HRF of sewn it has a role attribute of style sheet and that's all we need.Then let's go back to Chrome. Then, say specify in CSS. Use the following CSS rules to specify these families. Fun family, press Start 2P. If it doesn't have that,it defaults to cursive. Let's copy that. Let's go to Sublime and its, save this index HTML file,and then in our hero CSS, what I'm going to do is I'm going to apply this style to all H1s and, all H2s. This is another type of selector. Instead of writing a rule for H1s and then another one for H2s, we can simply say, hey, all H1 elements and all H2 elements,I declare that you should have this font family. Let's save that and let's go to Chrome now.Got to our first tab and refresh. That looks pretty good. Now looks quite a video game-y. Yeah, I like it. Our header is looking pretty good, but I'm not quite sure if I specified a font size for my h1. We said white, but I want my font size, font-family no, font size there were go, to be 50 pixels. Save that and do a refresh again. Whoa, that's pretty big, but that's okay. At the moment we've got our element inspector here. If we close it or, if we move to the bottom and scroll up, yeah, that looks a lot better. Fantastic, but I'll move this back to the side because it's easier to see what we're doing. Now get onto styling the main elements and the content within it. Let's go back to sublime text. What we can do here is add a couple of lines and then write main and write some declarations for our main elements. The first thing I want to do is set a max width of 800 pixels. So 800 pixels wide. This is so that if there is a massively wide browser. It doesn't feel like you have to scroll your eyes from left to right. It's quite easy to read. I'm going to save this, go back to Chrome, hit refresher. Then I'm going to close this for now and you'll see that. It looks like it only goes up until there, which it does. But you don't really know this for sure. Let's right-click and inspect this, and we can make this a little less wide. Then when we hover over main, and you can see where the blue highlight is, that's how wide it is. It says that it's 800 pixels wide. But now why is this image so wide? What do we do about that? Inside of Sublime Text, what I'll do here is I'll say all images inside of our main element, I want you to have a max width of 100 percent. The reason I do this is because if I change the max width of our main element, then this one's max width will still be the same as the main element. I'll save this, let's go back to Chrome and refresh, there we go. What's really cool about just setting the width is that the height scales proportionately. You will have noticed that with our Avatar image and with this big image. Now what I'm seeing is that all of our content sitting to the left-hand side. I don't want this, I want to be in the middle. Let's try a text-align. We'll say text-align center. I'll save and then back in Chrome I'll refresh. All this has done, is made our text align center, which you may want, but I don't want. Let's go back to sublime. Let's undo that, and what I'll do here is add a margin. For the value, I'll say 0, which means top and bottom values, you're zero and then I set the left and right values to auto. This is a really nice shortcut for centering items. I'll save that, go back to Chrome, refresh. Now my text is aligned left again and all of our content is in the middle. That means if I close my element inspector, there we go, that feels pretty good. But now if I open that up again, so let's inspect some elements, and I make this a little bit wider. You'll see that all the contents sits exactly to the left and exactly to the right. I want there to be a little bit of padding on the left and right. Let's go back to sublime and add some padding. Now, we could add padding left and padding, right, or what we could do, is use the shortcut. So for padding, I could say is zero and that would sit all of the padding to zero, or I could just go for top and bottom with his first value and then left and right. I could go for something like 20 pixels. Then if I wanted to further the shortcut, I could then set the bottom value to zero or maybe even 20 pixels as well and then I can set the left-hand value if I wanted to. If we set this to something like 100 pixels, it will be really evident what this does. I'll save that, go back to Chrome and refresh. You'll see that when I select my main element, there's no padding at the top, but there's a massive padding on the left, a little bit of padding on the right. If we scroll down, you'll see there's a little bit of padding at the bottom. If I change this to, let's go forward 20 pixels. You'll see that the padding changes or around, which is great. Then if I set the first value to zero, put a space at the top and bottom will have zero padding and then the left and right to have a padding of 20 pixels. This is exactly what I want. Let's go back to sublime and let's make it so. Fantastic. I'll save that, go back to Chrome and refresh. You can see that we're going back and forth between the browser and our CSS. I really like doing this because I'm basically designing in the browser. Now I'm going to style my h2s. Let's inspect this guy. What is the font size? We actually haven't set one. Let's go back to sublime, and let's change that, I'll say, all h2 elements, I want you to have a font size of 35 pixels. I want the color to be e70c19. I'll save this and scroll down a little bit. Let's go back to Chrome and refresh. About Ralph, Ralph's characteristics, Ralph's friends. They may be a little bit big. Go back to sublime and change this to 30 pixels. Let's see what this looks like. Okay, that looks pretty good. Now the paragraph elements, we haven't done much about that. Let's set that explicitly. I'll say, all paragraph elements, I want you to have a font size of 20 pixels. I'm going to save that and refresher; okay, that is looking pretty big, but our list still have that old font size. Instead of writing styles for our ordered list and our unordered list, what I'll do is I'll just apply it to the body. I'll cut that from our paragraph tag, go to the body elements and paste that there and let's save that. Let's go back to Chrome and refresh, and there we go. That's looking a lot better. The next thing that I wanted to do on the body elements is set a line height. This just makes the text a little bit more legible. I'll set it to about 30 pixels that see what that does. Things are a little bit easier to read now, this is looking really good. The next thing I want to do is style these links. Let's go back to Sublime scroll down a little bit and instead of this paragraph elements, I'll use it to style all my anchor elements. I'll press escape to get rid of the suggestions and the color that we're going to go for is going to be the same as our h2 hash, e7 there we go. Let's save that, let's go back to Chrome and refresh. There we go. Now as I hover over it and wanted to change color. The way to write a pseudo-class on an anchor element is to write a and then colon and then hover and this is a hover pseudo-class. What we're doing here is declaring that when you hover on any a element, we want to change the color and so we'll say color and we'll go for that purple color that we wrote a bit earlier. Hash 483a94. Let's save that. Let's go back to Chrome, refresh you see that when I hover, it's not purple. We can also have some fun with this so if we go to Sublime Text and we change this to a background color instead, and change the color to white and then I'll just indent that. Let's see what this looks like. Yeah, that looks pretty good. Super. The last thing that we have two style is our footer. I'll go back to sublime text and we'll put in our footer element and I want it to be the same orange as our header. I'll scroll up here a little bit and I'll copy this and I want the text align to be center as well and I'll paste it into our footer elements. Let's save that, let's go back to Chrome and refresh. Now that is looking a bit weird so let's sort that out. I want the color all to be white and then I want the a elements inside of the footer to have a color of white as well. Let's save that and let's see what that looks like. Then if I hover over it, it'll have this purple background color, which I'm not sure I really want. Let's go back to Sublime, and let's copy and paste this and put a pseudo-class on this anchor elements and say, well, when you hover on this, I want the capacity to be 0.5, and I want the background color to be transparent, let's save this. Go back to Chrome, refresh. There we go. Looks pretty good. Now the only thing left to do with my footer is to get rid of the space at the bottom and to give it a bit of padding. Let's do that. Now I want my padding and my footer to be about 50 pixels and I want to make sure that the paragraph tag has no margining. I'll say, all paragraph elements inside of the footer, you can have a margin of nothing. Let's save that. Go back to Chrome and refresh. There we go. It's looking really, really good. Let's close this elements inspecter and have a look at what our site would look like to most people. Yeah, I think it looks pretty good, perhaps we can add a bit of padding at the top of our main element and maybe at the bottom too. Inside of Sublime, let's go back to our main elements and instead of 0, we'll say 20 pixels. Maybe we can just make it all 20 pixels. I'll save there. Go back to Chrome and refresh. Yeah, that's looking pretty good. I think that this Ralph and his friends may be actually needs to look like a caption rather than just a regular paragraph element. So let's deal with that next. Inside of my index.html, I'm going to scroll down to this paragraph now I'll give it a class of caption. I'll save that. Go to my hero CSS. Scroll down a little bit and then at the bottom I'll say all paragraphs with a class of caption I want you to have a color of gray. Let's see what this looks like. Refresh. That's still not so light gray so let's go back to sublime and it changes to something like 999999. Let's save and yeah, that looks pretty good. Now I want it to be italicized. We could put an I element around the text, but because its a caption, we can actually do this in CSS. Let's go for font, style, and we'll give it a value of italic, will save, go back to Chrome and refresh. It's now italicize, but it still has this margin above it, so let's change that. We'll say margin top, and we'll give it a value of 0. Then when we save this, go back to Chrome and refresh. Yeah, that looks a lot better. Now the only thing that I still want to do is put a bit of space between the h2s and the elements above them. Let's go back to sublime text. Scroll up until we get to an h2 and then we can set a a margin of lets say, 40 pixels at the top, on the left and right will be 0 and then below we can say ten pixels. I'm going to save that, let's go back to Chrome and refresh. Yeah, that looks pretty good. All in all our pages looking fantastic. Now all we need to do is commit it. Let's go to GitHub desktop and for our summary, we can say, " Wrote the CSS for our characters website and change some HTML." Then you commit to master and push origin. Fantastic. Now, we can go back to Chrome. We can close Google fonts, open up a new tab, type in our GitHub username and there we go. Go to cartoon hero and press return. Your characters website, you have a URL that you can share with the world. The last thing that you may find quite useful is how to write a comment in CSS. It's a little bit different from HTML. Inside of your code editor, all you need to do is type a slash and Asterisk. Write your comments, something like, header styles and then write an Asterisk and a forward slash again. There we go. Then again, if you want to do this with a shortcut, all you need to do is press Command or Control and Forward slash, and then write your comments here. Well, Raphl's web page looks smashing. I think it fits really well, and I'm hoping that yours looks awesome and fits your character too. If you're feeling up to it, share it with the world, tell your mom, your friends, the guys you work with. It should make everyone super proud or insanely jealous. What's even cooler is that every time you commit and synchronize your code, this page will update. Magic tada. 11. Debugging + Common Errors: Guys, no matter who you are, even if you're super ninja coder, you will make mistakes when you code. They're called bugs and there are frustrating. How do you deal with them and make them go away? Let's cover an example bug together. If you want this image to look like an avatar and it isn't, what should you do? The first thing to do is relax. There's probably a logical reason for not working. Take a deep breath and take note of what's going on. It doesn't have any of the avatar styles I've written for it, and it looks like a default image. Then I'll go over the things that go into making this thing work. In this case, all that goes into making an image, an avatar. I'm going to go into sublime text. Then inside of my index, I'm going to scroll to where I wrote this avatar. The image looks correct. Now, I'm going to go to my CSS and scroll down to where I wrote the styles for this avatar. Then I'll say all images inside of the header elements. I can see my mistake already. You see that here, I've put a period, and here I'm saying all images inside an element with a class of header. This is not what I want. I'm going to remove this and then remove this period. I'll then save and then go back to Chrome and refresh. There we go. Bugs are really simple to see in hindsight. The more you code, the better you become at spotting them. During this class, you may face a few common bugs. The first and biggest bug is spelling errors. Watch [inaudible] , it's the little bugs that often cause the biggest headaches. I'd suggest copying and pasting where you can. The second is case sensitivity. If your images aren't coming through or there's no CSS when you view your site online, there's a good chance it's because you're trying to access a file that does not exist. On your computer, accessing avatar JPEG may work because avatar JPEG and Avatar JPEG are seen as the same thing because your computer's file system is case insensitive. But GitHub sees them as separate files because GitHub is case sensitive. So check the actual file and folder names versus the ones you've written in your HTML and CSS. To prevent this from happening, choose a standard way of naming your files and stick to it. I prefer naming everything in lowercase and using dashes instead of spaces. This is called kebab-case. A third common issue is forgetting a period before a class name when writing CSS selectors. So if your elements aren't getting the styles you wrote, this could be the issue. If you're banging your head on your desk because something isn't working, take a break, go for a walk, look out the window, or explain the issue to someone else, even if they don't know how to code. If you can get some help from someone who codes, ask them. But only after you've tried to debug the issue yourself. Now if you want my help, I'll gladly give it. But to help me help you, commit your code and synchronize it with GitHub.com. Tell me what lesson you're stuck on. Describe what is happening. Describe what you think should be happening, and then tell me what you'll get some username is. Then I'll try to help you out. 12. Your Own Website: If you want to be fancy and have your own website with your own special URL, you need to purchase a domain name and host your files on a server. You can use Github to host your files and point your domain at Github. Or you can use a website hosting company who will offer you the ability to purchase a domain and host the website with them. I found this to be the easiest option. I'm not going to chat more about hosting during this class, but I have included some links and ways to get your website online in the class resources. There are few discounts in there too. 13. The End (Party): This is the end of the class, but hopefully it's just the beginning of your coding journey. I hope you've had fun. I hope you've learned a lot, and I hope you'll embrace more of your nerdy side from now on. What this class is giving you is a base on which to learn more on top of. There's tons more to learn and it can be really fun making websites for yourself, for friends, and for client. Now, if you haven't already, you'll need to celebrates. You've just created a website. Hi five yourself, let out a whoop, dance, jump up and down, run around like a crazy person. Well done. If you haven't shared your characters website in your skill share project space, do it. I'd love to see the site you've created. If you've enjoyed this class, please leave a review. It means a lot to me, and be sure to follow me and join the taptapkaboom fan club on taptapkaboom.com. If you like the way I teach, I've got a bunch of classes on a range of topics and more on the way. That's it for me, bye for now. 14. Bonus: Absolute + Relative URLs: How does a browser know which image to display or what CSS file to use to style our site or where to take us when we click on a link. In these cases and many more, we give the browser a web address of the file we wanted to access. Now, the proper name or the correct name for web address is U-R-L, which stands for Universal Resource Locator. It sounds really futuristic and complicated, but it's not too bad. What is a URL? Well, I like to think of it as a set of directions we can give to the browser about where to find a file. Now, there are two ways of doing this. One is with an absolute URL and two is with a relative URL. What's the difference between an absolute and relative URL? Imagine we're at a friend's house and you ask me, where do you live? I could say 22 long streets, 1701CA, Amsterdam, the Netherlands. This is like an absolute URL, it never changes and it's always the same. I could also say, well, you walk out the front door and you turn left, you carry on walking until you get to long street, then turn right, and then I'm number 22. This is like a relative URL. The directions change based on your current location. With an absolute URL, we begin with the domain where the file is located, like taptapkaboom.com. Then we tell our browser which set of folders to look inside of. Each name, followed by a slash corresponds with the folder on the server or file system. Finally, we end with the filename and extension. With a relative URL, we start automatically from the address the browser is currently at, without having to explicitly say so. We then add together a combination of relative path components which tells the browser which folder or file is in. Then we end off with a filename and extension. Now, what are these relative path components? Let's get into that now. The first one is a slash. If we begin with a slash, it tells the browser to start at the top level folder or base URL of the current domain. This can be useful if you are a few folders deep and want to access a file close to the top level folder. The second relative path components is dot slash. When we use this, it explicitly tells the browser to use the current folder. The browser does this by default, so I hardly ever use dot slash. The next path components is dot, dot slash We use this to tell the browser to go up one folder level. I use this all the time, it's pretty common. The final path components is a folder name followed by a slash. This directs the browser into a folder with that name. This is super common. With a path to a file name, we can combine multiple dot, dot slashs and folder names together to give the browser directions to the file. When do we use absolute URLs and when do we use relative URLs? You don't have to use a relative URL for anything at all, but they're often much quicker to write and a lot shorter, which makes your code a lot easier to read and write. I normally use relative URLs when the file is located on the same domain, especially if it's only one or two folders away. If you want the browser to access a file on another server or domain, you will have to use an absolute URL. For example, if you want to load a CSS file from Google fonts or navigate to an HTML file on another site, you'll need to use an absolute URL. If you have a choice between using a relative URL and an absolute URL, ask yourself which one is going to be easier for me and my team to read and write, and which one is going to cause fewer bugs and fewer issues. Those are two really important factors to consider. Let's cover some examples now. In this example, I want to create a link from index.html to about.html inside of the Pages folder. Then I want to create a link inside of about.html, then links to index.html. Let's jump into Sublime Text. What we have here is an ink element or a link. When I click it, the browser takes me to some page. Inside the href attributes, I'm going to go for Pages, then about.html. I could go to dot slash here, but that's unnecessary. I'm going to undo that, save this, and then go to Google Chrome. Then this is my index.html page. We'll get to the broken image, but I'm going to refresh this and click on the About page. There we go. It takes us to the about page. You'll see that the URL changes, it now got pages/about.html. Let's go back to Sublime Text and open up about.html. Now I want to visit the Home page. What I need to do here is go dot, dot slash, and this will open up the previous folder. I could then write index.html. Let's see how that works and go back to Chrome refresher. Click on the Home page. There we go. It takes me back to index.html, and this takes me back to about.html. In this example, what we're going to do is we're going to find a file to put in the source attribute. Inside my Finder, I have this silly-face.jpeg, amazing, I know. Then inside my image folder I have this frog-face.jpeg, another amazing image. I know. The file that we're in at the moment is our index.html, and that is in the roots of offsite. Here we are, index.html, and now I need to find an image for this image element. I'm going to go for silly-face.jpeg, and I'm just typing that. Press Return. I'll save this. I'll go to my browser and refresh here. There we go. There's my one face image. If we go back to Sublime Text and go inside the Image folder, what we can do here is type an IMG, which is the folder name and then slash, which means it's going to look inside the Image folder, and instead of silly face, we're going to use frog face.jpeg. I don't want all that again. I'm going save that and go back to Chrome, refresh, and there we go. Frog face is there. That is really cool. We've used a folder name and then the file name with an extension. This changes a little bit when we go back to sublime and go into pages and go to our about.html page. I'm going open this up and over here, what we want to do is access silly face once again. I'm going to go for dot, dot slash, which goes a fold up, and then type in silly face.jpeg and save that. Let's go to Chrome. Refresh. I'm going to go to the About page. There we go. You have my silly face. Then if we wanted to access the frog face, what we need to do is go dot, dot slash and then back inside the Images folder. We went one folder up and now we're going inside the images folder for frog face. There we go. I'm going to save that. Go back to Chrome and refresh. There we go, there is my frog face. You can see here in sublime that we've used different relative path components to access the same images because we started from a different file. In this example, I want to use a Google Fonts in my site. I found this great font called Bangers. I'm going click on that. I'm going to then say select the style, and then I'll press this button here. I'm going to select all of that. I'm going to copy that, go to Sublime Text, and then I'll paste that like so, super. You can see here that it says https:// and this long URL. Now that is an absolute URL and there's no ways that we cannot use an absolute URL for that. There we go. Two relative URL examples and one absolute URL example. That is the end of this video. For more stuff like this, and to level up your creative superpowers for that taptapkaboom.com.