Learn to Code with HTML and CSS

1. Welcome: Hey, everyone. My name is Emily Maskin and I am super excited to teach you about HTML and CSS. I've been a web developer for almost 10 years and I love constantly finding new ways to make beautiful websites. This class is great for anyone who's ever thought, I want to learn how to code, but I don't know where to start. HTML and CSS are the perfect way to dip your toes in because you can easily see the results of what you're creating in a very straightforward and visual way. By the end of this class, you'll be able to create a beautiful profile page for yourself or for someone else. It's a great way to showcase your new skills and promote yourself at the same time. All you need to get started is a text editor. I've provided download links in the class description to a few popular ones for you to choose from. So let's get started and I can't wait to see what you come up with. 2. Anatomy of a Website: It takes a lot of different languages and technologies to make a website, or at least to make one that's more complex than this. One helpful way to think of the parts of a website is as parts of the human body. First, we have the skeleton. That's the structure, the different pieces all fitting together. That's HTML. Websites all have certain basic HTML components, such as a head that goes on top of a body. Within the head and the body, there are a lot of possible HTML elements, and they can mostly go in any order, but at that point, the skeleton metaphors starts to get weird, so maybe we won't go there. Now what? Well, our skeleton needs skin, first of all. Clothes would also be good, maybe hair and makeup. That's CSS. It's what allows you to turn pure structured information into something people would actually like to look at. Now, at some point, we're probably going to want this person to actually do something. They need some behavior, actions, memories, personality. That's where JavaScript and sometimes, some other languages come into play, but for now, don't worry, we're only going to cover HTML and CSS in this class. 3. Getting Set Up: Let's take a minute to get set up. First, we'll create a folder on the desktop. This is where we're going to save all of our work. You can call this folder anything you want. You can even leave it as untitled folder if you want. I'm just going to call mine Emily. Now, let's open up our text editor, I'm using atom and we're just going to start a new file and we'll type hello, world into it. Now, we're going to save it into the folder we just created on the desktop and we call this file index.html. That's what you always save the main page of a website as, save it and then we're going to open up our web browser and we're going to just open that file right in the browser. So open, here's my index.html file and we can see the text hello, world. 4. Intro to HTML: HTML is basically a way of putting a website's content into containers in order to create structure. HTML uses tags at the beginning and end of pieces of content. In general, each piece of content will start with an opening tag and end with a closing tag. For example, a <p> tag is used to create a paragraph. Let's see how we can put one around our Hello, world text. We start with the opening tag at the beginning, which is just a p inside pointy brackets. Then we add our content. Then we put the closing tag at the end, which is the same as the opening tag, except with a slash before the p. Every time you have a tag with or without content inside of it, it's called an element. There are also a bunch of tags you can use to create headings and subheadings on your page. These are h1, h2, h3, et cetera, all the way through h6. By default, these gets smaller as the list goes on. H1 is the biggest, then h2, et cetera. For instance, we could put a heading above our Hello, world paragraph by using an h1 tag. Now depending on the browser we're using, this code is going to result in something like this. Here's our h1 element and our p element below it. It's not particularly nice-looking yet, but that's okay. That's where CSS will come in, in a later video. Next up, we have div tags. Divs are mostly used to group other elements together. For instance, let's say we wanted to put a border around these elements or put a background color behind them or move them to a different part of the page, a div could help us do any of that. As you can see here, tags can be nested, which means we put one element inside of another. We nest tags all the time. Otherwise, there would really be no good way to organize our content. The only trick with nesting is that you have to remember to close the tags in the correct order. Remember how we said an element is a container. So just like these Russian dolls, you need to close each inner one before you can close the next outer one. 5. Let's Write Some Code: Go ahead and delete hello world from your index.html file, and we'll start writing some html. So all html documents start with the doc type declaration, which looks like this. That's just to tell the browser that we're going to be using html. On the next line, let's create an html tag. So here's the opening tag and the closing tag. Then inside of that, where we're going to put all of our code, we're going to create a head tag and a body tag. We put information about the page in the head and the actual content that we want to display in the body. Let's start in the body and let's give our page a heading. So we're going to use the h1 tag and this can be anything you want. I'll just call mine about me. Save it and now if we go back to the browser and refresh, you should see the heading you just created. Now let's give our document three paragraphs. These can be as long or as short as you want. You can write a novel. I'm going to keep mine short and sweet. So I'll say, "My name is Emily. I am a web developer. I love my cat." Again save and there are my three paragraphs. Finally, let's add a title. The title is what shows in your browser tab. Since it's not content that gets displayed on the page itself, it goes in the head tag instead of the body. I'm going to give it, "Title of Emily's page," and go back to the browser, refresh and up here in the tab, you can see it says Emily's page. 6. All About Attributes: Tags don't do very much on their own other than create structure. The next step is to give them attributes. Link elements or a tags, use attributes to provide the link address. Let's create an a tag, a stands for anchor by the way. After your third paragraph, you can just create an a tag, and first we'll put the text that we want to display in between the opening and closing tags, just like we've already seen. I want to link to my personal website, so I am going to just put my website. You could also link to your Twitter or a video on YouTube, or your company's website or anything you want. Next, we'll give our a tag and each HREF attribute, which will tell it what URL to link to. Inside the opening tag right after the a, we'll put a space and then add an attribute of HREF , which stands for hypertext reference, and set it equal to URL you want to link to, and that goes in quotes. In my case that's http://emilymaskin.com, and if we go back to page and refresh, there is my link. Images are another element that rely on attributes. They need a source attribute to tell them what actual image to display. Go ahead and find two images to include on your page. You're going to save them into that same folder we created on the desktop. You can use images you already have on your computer by copying them into that folder. Or you can find images online and download them to that folder. Give your images fairly simple names when you save them, such as me.jpg, if it's a picture of you, so you can easily reference them later. I've already added mine. I chose to pictures of my cat Lucy. Feel free to pause the video and come back once you're ready. Now add an image tag that's IMG to your document. You'll notice here on mine that the tag looks a little different than the others. It doesn't have an opening tag and a closing tag because images don't contain content, they are the content. Now we'll give the image tag and attribute source SRC and set it equal to the name of your first image file. Again, it goes in quotes. For me that's Lucy1.jpg. We'll also give it an alt attribute. Alt is used to provide texts to show if for some reason there's an error loading the image, and it's also important for accessibility, for instance, for users with screen reader. I will give it alt texts of My cat Lucy. Now let's save it and go back. There's my image. If yours came out huge, like mine did, don't worry about it for now. We will fix that very soon. Now on your own, you can do the same thing for your second image, and then we'll pick back up in the next video. 7. Intro to CSS: We use CSS to style elements by essentially saying, ''Hey browser, every time you see an element matching this description, do this to it.'' We do that using this format. I know that doesn't make things much clearer, so let's see what it looks like in practice. For instance, this will make all text in all paragraph tags show up red. Let's try it out. Add a style tag inside your head tag. Inside it will add H1, curly braces, color, colon, red, semicolon. This will turn your heading red. Basic colors like; red, green, blue, et cetera are recognized as words. Otherwise, we can use hex codes such as FF0000 which is also red. If we go back and refresh, nothing changes, which is what we would expect. If you go to HTML color codes.com, you can play around with finding the exact shade of the exact color that you're looking for. Some other styles you can give to text are font size, which is measured in pixels. Let's give this 60 pixes. That's pretty big. Font family, so that's things like Times New Roman, Arial. Personally, I like Garamond. Text align, we'll go with center. Let's see how that looks so far. Our heading now is 60 pixels, it's centered and it's in Garamond. Let's try putting a border around our header. Borders require three values, that's the width, the style and the color. Here's an example; border, two pixels, solid, blue. Save and go back. That it's a little tight on the top and the bottom. Let's add some space within the box, so we'll use padding to do that. Padding give it 20 pixels, save and go back. Okay, there's a little more space there. That's pretty good. Maybe we should also give that box a background color. Let's use a hex code this time. We'll just go with a shade of light gray. I happen to know this one already. But again, you can just go to HTML color codes.com and find any shade you could possibly want. Let's also add a margin under it. We'll put a 100 pixels under the heading. Now if we go back and refresh, we can see we have a light gray background and a 100 pixels underneath. It's certainly not going to win any design awards. But hopefully you can see the potential here. Try playing around with some of these properties on your H1, P, A and div tags. 8. Getting Specific with Classes: Did your images come out huge like mine? We can use the width property to shrink them down, so here we'll use image as the selector and give it a width of 300 pixels, save it and go back, and now our images are nice and small. Do you see any issues with this approach? What if you didn't want both of your images to be the same size. We can use the class attribute to target one or more specific elements while ignoring the others, so let's give one image a class of small and one a class of large, now we can change the width of the small one to be 300 pixels by adding dot small to our image selector and it's important that there not be a space around the dot here because that will do something different, which is a little bit out of scope of this class. Now we can go back and refresh, and we see that only the first one is shrunken down to 300 pixels, and the other one is back to being huge. So now let's change the second one so we can do image dot large, and we'll give that a width of 500 pixels, save and refresh, and now a little bit bigger, but still pretty reasonable. One other thing you might want to change here is the fact that the images right now show up next to each other and next to the My Website Link instead of being one above the next, that happens because image elements and link elements all display inline by default, and what display inline means is that they only take up as much room as they need, and we'll try to fit as many as possible on the same line. The opposite of display inline is display block, and that tells the element to go to the next line even if there's still room. So we can go back to our image selectors and make both images display block, and then if we refresh and go back, now it's one on top of another, now you can go ahead and play around with some of the other CSS properties we've learned, maybe you want to create margins in between the images, maybe you want to center everything, go nuts and have fun. 9. Review: Let's go over what we've learned. First, we learned how to set up a new HTML file. Next, we learned some of the HTML tags you can use to add content to your page. We learned how to give attributes to elements to provide them with more information. Then we learned some CSS properties and how to apply them. We used the class attribute to target individual elements or subsets of elements. We learned some of the many CSS properties you can use to style your website. If you want to learn about some of the others, check out the link in the class description or just Google CSS properties. For your class project, I invite you to create a profile page about yourself or someone else. Use the HTML and CSS we learned today to add content to your page and style it. Have fun and get creative. I hope you enjoyed this introduction to HTML and CSS, and I'm so excited to see your projects.