Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:32Length:5 hours

Next lesson playing in 5 seconds

Cancel

30 Days to Learn HTML & CSS

Course Introduction

00:55
  • Overview
  • Transcript

Even if your goal is not to become a web designer, learning HTML and CSS can be an amazing tool to have in your skill-set – both in the workplace, and at home. If "learn to code" has been on your to-do list for some time, why don’t you take thirty days and join me? Give me around ten minutes every day, and I’ll teach you the essentials of web design with HTML and CSS.

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

1. Introduction

1.1 Course Introduction

Much like many people I would assume, years and years ago I built my first website for a family member who was starting a new business. Now of course, the business died almost instantaneously, but it was the best thing that I ever did for myself. I always tell people, even if your goal is not to become a web designer or a web developer and do it professionally, still learn HTML and CSS. It's an amazing skill to have, especially in today's day and age. So over the course of 30 days I want you to give me 10 or 15 minutes, right around there, of your time every single day. And I promise you, at the end of the 30 days you will have developed a new skill and you will have a solid, solid grasp of how to build websites, standard websites, with HTML and CSS. So when you're ready get started with A1 and lets dig in.

2. Week 1

2.1 Your First Web Page

[NOISE]. >> As you'll find with most programming languages, whether it be HTML or CSS or JavaScript or PHP, many of these you've probably never heard of. It's very traditional when learning them to do the first obligatory hello world example. And this means we're gonna find a way to get the words hello world typically on the page, meaning within a web browser we want to see hello world to show that we are up and running. And we can do that without using any tools other than maybe a simple editor. Even something like Notepad or TextEdit will work just fine. So if you are on Windows, open Notepad, I'm on a Mac so I will search for TextEdit and open that up. Now TextEdit is traditionally for writing Word documents. Whether you're writing a story or a letter, but it can also be used for a variety of things including creating HTML pages. So we will use this for the first example and then I'm going to explain to you why you do not wanna do this for your actual coding. But let's go ahead and get hello world in a browser. So to start, we're not even going to use any kind of markup. We're going to type hello world, and then I will go to file, and save it. And we want to save it as an HTML page. So rather than using the default RTF or TXT extension, we need to specify that this page should be rendered as HTML. Next, I am going to save it as index, and this is pretty traditional to specify the default page. So save that to the desktop. And now you can see that we have this new file. So if I would like to view this in the browser, I can either open a browser like Chrome, and I can go File > Open, choose that file. Or in some OSs like Mac, I can take the file and drag it into the browser and you'll see that it works like so. And it looks like I have hello world I, so let's make our first edit. I will come back and change that from hello world I to an exclamation point. I will save that by pressing Cmd+S or you can go to File > Save. And if we refresh, we've made our first edit. Now, notice we haven't added any true HTML here, we've just added some words but nonetheless it's still showing up in the browser. How is that? And that's because even though it's not HTML, the browser will make some assumptions. And when you have Hello World it's smart enough to know that you simply want to display text on the page. That said, this is something you will never ever do in your projects. You wanna use structured markup using HTML. So let's do it the right way. The very first step is, we need to specify a doctype. Now, I don't want this to confuse you. I will go ahead and add it, doctype HTML. Now what this does is it instructs the browser what version of the markup language is currently being used. Now, if this looks confusing to you, you'll be surprised that years ago, it was a long string because we had very different versions, whether the strict version or a more flexible version. Now, I don't want you to worry about this too much. Just know it's a way to instruct the browser as to the version of the markup language you are using. Don't let that confuse you though. Next, let's bring up the text just a bit, so I will bring that up to 18 like so. Next, we need to specify where our HTML is and we can create HTML tags by doing it like so. Now note that we have this opening bracket or a less than sign. And then we have the name of the tag, and then we close it out. So if we just had it like this we could add some text, but the problem is, the browser will not know when you are finished with this particular tag. So it will assume for as long as the document is, this text will be within the HTML elements or tag. You can use those interchangeably. So we should specify when we are finished with a tag, and we can do that by typing the same thing again, but the only difference being before the actual name, you do a forward slash and that way we designate that we are closing that tag off. So now, I'm gonna remove this cuz you don't traditionally put text within an HTML tag. The next step is, we need to provide a couple details about the page itself. For example, let's open up Chrome again. And I want you to note if we go to a site like Nettuts, do you notice that the title, right up here within the tab, says web development tutorials? How do you specify that? And that can be done within the head section of a page. So lets do that now. I'm gonna create a head and now we are going to specify what the title of our page is, so I'm gonna hit tab a couple times and we use, as you might expect, a title element, and I will say my first website. Next remember if we simply hit Enter and start typing again, the browser is going to assume that all of this is part of the title element. But it's not so we need to make sure that we close this off so the browser understands that only this text should be part of the title. Next, we should specify the character type and again, I don't want this to confuse you. So I will go ahead and add this in, and this is again another way to instruct the browser how to render specific characters because it will be different from country to country. Now I want you to note, this looks a little bit different. How come we have this forward slash at the end? Well let's dissect this. First, just like title, we have a meta element or tag. But next we need to provide some attributes of the tag. And we can do that by doing the name of the attribute followed by an equal sign. Then within quotation marks we paste in the value. So we can say name equals value. Attribute name, attribute value. Now, what's this forward slash right here? Well, while we could do something like this, you'll find that when there's not any text meant to be placed in between a tag, it's very common to what we call, self close the tag. Which means, if there's never gonna be anything here, we can simply copy this forward slash, put it at the ends and then remove it which saves us a little bit of space. And what you'll find is most developers prefer to add a space right after that last equal sign. However, do note that this is optional. Years ago it was considered a best practice, always close your tags, but with HTML5, which you'll learn a little bit more in this course it's actually just okay to do it like so. So whether or not you wanna close it, many developers have gotten into the habit of it. They feel more comfortable doing so, that's fine. But if you'd like to leave it off, that's fine too. There's no right or wrong in this example. So now we have an element with an attribute name of charset, or carset, and the value is UTF-8. And again, I don't want you to worry about this right now. It'll just make sure that your symbols are rendered correctly. So now, we're done with the head section. But, remember, we have to close that off. So I will do forward slash head. Next, we want to display that Hello World. But we don't do it like this. Instead, it's traditional that you wrap the text, the body of your page, within an element called body. So I will type that now. And once again, I have to specify the end of the body of my page. So right at the bottom I will close that out, like so. So let's save that. I'm gonna go to File > Save, and now let's reload the page. So this time, because the browser is open, I can take the file and simply drag it in, like so. Now we'll see that strangely it seems that our tag names are being displayed on the page in the same way that Hello World was, but certainly with the page, we don't want to see these tag names. And that's because within TextEdit, it's still being treated as actual text, actual formatted text. So I will go to Format > Make Plain Text, and then I will go to File > Save a Version, and notice how it's defaulted to txt. So let's come back and change that to HTML, and try to view it in the browser. And now, you can see that has change. So yes, that is a little bit odd, and that's because TextEdit is making assumptions, and assuming that you want formatted text, when you really want simple HTML. So now you see only what was contained within the body element. If you'd like to get to the markup that we created, we can go to View > Developer > View Source. Now note within each browser this will be slightly different but you should be able to find it if you hunt around the menu bar. And now if I load the source you can see this is exactly what we typed. We specified the doc type which tells the browser what version it is. We've specified where our HTML is, next we've specified the head section. Now I want you to note if we come back it says, My First Website, and that's coming specifically from the title elements. Next we specify the meta charset, don't worry about that too much right now. And then we add our first Hello World, which is displayed on the page. And this is good formatting, this is the formatting that a pro would use. It's nice, clean, or following best practices. So good job. Pat yourself on the back. You've just built your first webpage. It doesn't do much just yet, but you'll get there. So in the next lesson, I'm gonna start showing you how to format this text.