Code Isn't as Scary as Zombies: HTML and CSS for Writers, Editors, and Beginners

1. Introduction: Hello and welcome to code isn't as scary zombies. HTML and CSS for writers and editors. This course is going to talk to you about code and how non-scary it is. You'll get to work with HTML and CSS in a way that is supportive and allows you to figure out what you're doing without being so scared of it. We'll talk about HTML, what it is, how is the structure of the web, and how you can create your own tags or at least write your own tags rather and include them in your different projects. We'll also talk about CSS, which is more about the design and how to make it look pretty and help you use that to further enhance your projects and allow you to not be scared of code. Along the way, we'll try to kill some zombies and help you to have a little bit of fun. 2. Your Zombie Fighting Tools: Hello. In this episode we're going to talk about what kind of tools you'll need in order to work with this course. The truth is you don't need a whole lot. There are lots of different things you can use but here are some recommendations. First of all, plain text editor. If you're on Windows, you can use Notepad or if you happen to be on a Mac, you can also use Text edit, though you should use it in it's plain text mode. All of that said, well you can't use a plain text editor, it's probably not the most ideal just because it doesn't give you as much help as it could. For that I still recommend a color-coding editor. What it does, it's going to color code the code so that you can actually see what types of code or pieces of code, how they interact with each other and the tags and getting a different color than say, content and some of those things. It makes it much easier to debug and figure out whether you've got a syntax error or something going on or some other type of error. For those, they help you spot errors. Notepad++, I believe is available across platform, but it's definitely available on Windows. Atom is definitely available across platform. Another one, Brackets and then Sublime Text is probably a little bit beyond the school level. It is a great text editor and a very powerful text editor and probably more than you need. I wouldn't buy it if you don't need to. Notepad++, Atom, and Brackets are all free to download and really anything else you use, any other coding tool for HTML and CSS should work fine. Just about anything really. Thing that I'm going to recommend though is codepen.io. This is a website that's available free to use. It's easy to use. It automatically updates as you type, which is super helpful as you're learning. It takes care of all the fiddly stuff with just how to build a page and what to do for those things. It will allow you just focus on the code that you want to focus on rather than having to deal with all of the code around that code that you would need if you're using just a basic text editor and any class demos will be in codepen.io. Let's take a look at that. We're going to look at getting set up, how to create a free account. It's important to save your work mostly so you can go back to it and fix it and also play with it. When you start working on your project, it's good to have it in place where you can save it over time as you go through the course and are able to then just publish it so that other people can see and look at what you've done. Let's go ahead and punch them zombies in the throat. This is the CodePen website. Down here in the bottom left you're going to have sign-up. You click on that, sign up with e-mail. That process is pretty typical. I'm going to login just because I already have an account. Logging in. These are some pens that they think you might be interested in. But what we're going do is we're going to go to Explore, we're going to Create and a Pen. In CodePen, a Pen is a HTML, CSS, and JavaScript portion of a page that you can play with it. The JavaScript portion is not something we need, so what I'm going to do is to minimize that. We're actually not going to deal with CSS right now. We'll get to that a little later in the course. I'm going to minimize that as well. We just have some HTML. I'm just going to write a quick little thing here. Hello World. It's a default way to start learning a programming language is to type hello world and output it to the screen. As you can tell, as I typed, it came out. Codepen.io is just a really great tool to use, really easy and hopefully will make your life a lot simpler as you try to follow along. Those are the tools. Thanks. Let's head to the next section. 3. Why Zombies Hate HTML: Welcome back to Code Isn't as Scary as Zombies. We're going to take a look at what HTML is and why zombies hate it so much. First of all, what is HTML? It's a programming language, but really, rather than providing so much programming or processing, it provides structure to documents. I like to think of it as the skeleton of your page or the skeleton of your website page. It allows you to build out the page and have different types of flash and different types of colors and all those sorts of things that go into a website page, but it has to hang on something, and HTML is that hanging point. It provides information about the content of the document. Now, there's about four parts to an HTML element, it's a single unit of HTML, four pieces: opening tag, attributes, content, and a closing tag. The portfolio opening tag uses the angle brackets, less than and greater than signs to set off the tag, so it starts with a less than sign, and the tag itself ends with a greater than sign. For example, the paragraph of opening tag looks like this, that's an opening paragraph tag. You probably already saw that in the last video when I was demonstrating CodePen.io, but this is an opening paragraph tag. Next, we have attributes. This is something we'll get to a little bit more later, but just want to introduce it here. They are things about the tags. They come right after the name of the opening tag and before its closing angle bracket, so they're used for additional information, identification or options, gives some other ways to use tags or helps the browser know how this particular tag is being used. The class attribute helps us, particularly when we get to CSS, it defines a group of elements, type of HTML content. It doesn't have to be the same element in particular, but it could be a class of elements that act the same way or do the same thing or have the same aspect. Could be all of these have read text or all of these have a certain setting of margin between them, something like that. It really could be just about anything, but when you're adding a class to an element, this is how it goes. It's the opening tag of the p tag. Then before the closing angle bracket, we have class equals and then "learning". Hopefully, you're not learning in "quotation marks," but the class has a value of learning, and there could be multiple HTML elements on the page that had that class. There are a lot of other attributes that we can use, and we'll talk more about those a little bit later. Now, the third thing or third piece of an HTML element is probably the most important, it's the actual content. It's the information that goes inside. It's between the opening and closing tags. Often, this is text, but it could also be other elements. Often, it is also other elements as well. Some elements will have limitations that they can't be inside other elements, depends upon the particular job that the element is doing and what is appropriate for it. Some elements just can't exist within some other elements. Other elements only exists within other elements. It really just depends on the particular element that you're working with. HTML is also pretty forgiving. Even if you totally mess it up, the browser just tries its best to do what it thinks it should. Often, it does a good job. Sometimes that's good and that it won't fail miserably. It's bad though if one browser does not allow it to fail, but the other one does, and you don't test in that browser. Having good code is the best option for consistent previews of pages across multiple browsers. Closing tag, it looks a lot like the opening tag, except it has a slash in front of it. The paragraph tag has a slash p. Some tags are what's called void tags and do not have a closing tag. Notably, these are image break, and HR or horizontal rule, so IMG, BR, and HR. These are the main ones that we'll probably be talking about within this course. But there are a few more than that as well, but most tags have a closing tag. Usually, the only reason they don't have a closing tag is because the content of the tag server resides in the opening tag, rather than having something in between it. For instance, an image will get there eventually, but you'll have a source attribute that'll tell you where the image can be found and the image just shows it, so it doesn't make sense to necessarily have an opening and closing tag for images. Here's a paragraph tag example. Bringing in an attribute as well as the opening, closing tags, and contents, so we have start with a p tag with a class of learning where killing zombies is fun. That's our content and then slash p is our closing tag. Nesting. Another important thing about HTML tags is to make sure that you have opening and closing tags nested properly. For instance, this is incorrect. You have Tag 1 and Tag 2, both opened and then slash Tag 1, so Tag 1 is closed before Tag 2 is closed. That's incorrect. The correct way to do this or to properly nest it, would have Tag 1 open, then Tag 2 open, and close Tag 2 and close Tag 1. Those are, of course, not actual HTML tags, they're just an example to show nesting easily. Zombie families. One of the important things about nesting is we're going to call it families. If element A is completely enclosed by element B, then A is said to be a child of B, and B is a parent of A, so you can have children and grandchildren. A lot of times, particularly when we get to CSS, we'll be talking a lot about these relationships. But if one element causes another, the first element is the parent and the enclosed element is the child. For instance, we have zombies have no family. I, the italics tag, which we'll get to soon, is a child of the p tag. 4. Zombie Blocks of Content - Part 1: Hello and welcome back to Code Isn't as Scary as Zombies. Right now we're going to look at zombie blocks and other blocks of content. First of all, we have paragraph tags, talked about those in the last section. All paragraphs should, surprising as it may be, be in paragraph tags. It's the most basic unit of text and 90 percent of the text is going to be in paragraph tags, though not all of it, of course, 10 percent. Clearly is not going to be. But these can be styled with indented text or to have a carriage return or at line between the two, depending upon what you want to do with your site. Probably more typically on the web, it tends to be a blank line between paragraphs, but there are some exceptions to that. Another tag that we can talk about is the break tag. Now, most of the time you don't want to hard wrap text, you want it to flow within its container. Because particularly with responsive design, you're not going to know exactly how wide or tall or whatever the container for the particular text is. If you do some hard returns then it's going to look funky if somebody looks on a screen that happens to be a different size than yours, which is almost certainly likely because of the proliferation of devices that have different screen sizes and desktops, and who knows what size the width is going to be on the desktop, etc. There will be times, however, when you need to format an address or similar piece of content where you don't want lines between them. For instance, if you've done a blank line between paragraphs, if you create another paragraph, it's going to continue to make blank lines between the things. That doesn't look great, particularly on an address or other types of content like that. What you can do then is use a break tag, and rather than skipping a line, you can just go straight to the next line. Now, there are often times when we need to boldly go where no zombie resistance fighter has ever gone before, which in here is the bold tag. HTML's mostly structural, most aesthetics go with CSS, but you can also designate what should be bolded or strongly emphasized. For instance, we have the b tag, which is the bold tag, this is what we had it's about HTML4 when it came together with XHTML. When HTML and XHTML came together, they wanted to be very strict about how what tags they used. They brought in the strong tag, which is basically the bold tag, but labeled strong. In theory, gives you a little bit more information than just the letter b does about the content that's in there. But strong takes longer to type. I'm in the shorter typing is better camp. Eventually they basically said that b and strong are equivalent and can you use them that way as you see fit. Both b and strong will make content bold. There's a similar struggle with i. I would be the italics tag. At one point they wanted to do something better and so they came up with the em tag for emphasis, which doesn't really make sense to me because it's about the same cryptic level as i and can be confused with the CSS size unit. We'll get to there shortly. But yeah, it just doesn't seem like it really helps. Eventually they just made them the same as well, particularly HTML5. Both i and m tags will make the content italic. Let's look at some code. Okay. This shows you paragraph tags, italics tags, and bold tags. We have a p tag here. Ends with a closing p tag. Here we have an em tag. You can also do an i tag. here's an example. Here's the examples down here. Not because zombies are not cuddly-wuddly surprising as it may be. There's the italics. Rigor-mortis really affects flexibility. If you're surprised by that, there's a zombie on your head. That's bold or strong. This is a bold. Then here we have an example of what not to do. This is basically both improper nesting and improper ending tags. We have matched up the em tag and the i tag together, but while they do the same thing they don't necessarily interact properly. This slash i does not close this m, so that's why zombie is still italicized. The slash strong doesn't really close the p tag, but that's harder to see because that's where the page ends as well. But yes, that's the code there for paragraphs, italics, and bolding. 5. Zombie Blocks of Content - Part 2: Next, we need to talk about links. The a or anchor tag is what's used to create hyperlinks, href attribute is what holds the destination URL, and the content or the link text is the text between the opening and closing tags. Here we have an opening a tag, then we have a href attribute linking to https://undead.institute, which is my website for Zombie-themed Web Development books, if you ever want to go deeper, there's a place to go. Then we have the link text, which is more Zombie Web Development, and the closing a tag. One thing you want to be careful about is absolute versus relative links. Links with http:// or https:// are usually absolute links, and as long as the page is working the browser should get there. If you don't include the http:// or https://, these are relative links, the browser assumes that they will be in the same folder path or on the same server as this current page. If you go to https://google.com, it will go out to another web page, get google.com and bring it back to you. If you just type in google.com, it will look for a file named google.com, which not quite as helpful generally. Let's do some more LIVE CODING, here we have our a tag with href, undyinglove.org, undying love. We have some break tags just to break it up, and here we have an email link. Email links work pretty similar to regular text links, but here you just start with mailto: instead of http:// never allows. Then when somebody clicks on it, it will open up the default email client on that computer. You can also set up telephone links, so tel and sms links, those last two particularly useful on phones but can also be used everywhere way as well. That is how you do some links. Often times, when we're creating text for the web, it's important to make it skimmable or make it easy for people to just skim through it, one of the best ways to do that is through headings and subheadings. HTML starts with <h1> through <h6>. It's important to avoid blank heading tags, just as anyone who is a sighted user will scan through a page with their eyes jumping from heading to heading try to find the content they're looking for. Also, screen reader users will scan with their ears and jump between headings to try to find what they're looking for, blank headings can particularly throw them off, even if they don't throw off cited users that much. Headings, each one is generally going to be your largest Heading, but it usually holds the title of the page so you jump, don't want to often use </h1> Unless you know it's not the title of the page. The next is <h2>, and you should begin to break your content out there, </h3>, and keep going, </h4>, more subheadings, </h5>, often if you get here, you usually have some content problems, you might want to really look at that and if you get to <h6>, you almost definitely have some content problems. Here we have HTML headings, you can see as you go up in hs, <h1> is the largest here, then <h2>, 3, 4, 5, and 6, or PFC Wiggins must report to a random chipmunk apparently and as you can see;<h1> </h1>, <h2> </h2>, etc. One last section we're going to cover here is about quotes. There are two different tags you can use for quotes in HTML. Inline quotes, we handle it with a <q>, you can also actually use quotation marks. But if you happen to be in a culture that does not use quotation marks the way Americans tend to, for instance, French language uses a different type of quotation mark, but if you're using a <q> tag, it has two big benefits, one is that there's a cite attribute that can allow you to place a URL from where you got the quote from so that people can access that content. It also allows you versatility in styling quotes, particularly if you need the double arrow quotes or guillemet, I think it's called, that are used in French. You can make those changes with CSS rather than having to rewrite the page or change the page. There's also block quotes, which has its own tag of <blockquote>, surprising enough. That's for very long quotes that are going to prevail against the stinky zombies, of course, and by default it will set the quote off from other texts, indenting it and giving it some space above and below it from the surrounding text. You can also use the cite attribute on a blockquote, but there's also cite element is that with a blockquote, refers to a creative work and must include either the title, the author, or the URL of that work. That said, another web standards agency says you should never use the author in cite element, use your best judgment. Finally, here we have two examples of quotes, Alice in Zombieland, using the cite element, using the <blockquote> and that's how you can play with quotes and really start marking up the types of content within your website. 6. Listing the Undead's Weaknesses: All right, welcome back to Code Isn't as Scary as Zombies. Here we're talking about lists and listing the Undead's Weaknesses, and anything else you want to list. First, organizing zombies. So lists are a great way to continue to make your content more skimmable. They allow you to set some things off, as well as just make it easier for people to pull out the content that's important. HTML itself has three kinds of lists. There's an ordered list, and unordered list, and a description, or form of the definition list. All of them are made up of two or more elements. Description list is made up of three while ordered and unordered are made up of two separate elements. For instance, if we're doing an ordered list, we start with an ol. Then we have our first list item, our second list item, third, however many we have, and finally, we end with a closing ol. With order list, you can actually change the numerals used, decimals are the default, but you can also do lowercase alphabetic like a, b, c, d. You can do roman numerals, i, ii, iii, iv, etc. You can also do capitalize versions of those. So a capital A for the type is a capital alphabetic, and capital I is capital roman numerals. You also change the start of the numbers by using the start attribute, and just setting that to whatever number value the list starts with. To start the list at seven, you'd just have start equals quotation marks seven. You can also do unordered lists, and they are very similar to ordered list except they use an ul instead of an ol, but they still both use the same li. For instance, we start with a ul here, we have our li item, just like we do with an ol, and we have as many of those as we need, and then we close it with a ul. Description lists are a little bit different. They have a list of terms and descriptions, so you will have a two different things that you're listening. Prior to HTML 5, it was called the definition list, but they changed it to a description list to widen its scope and you use it for more things. The outer element is dl for description list, the designated term or the element for the term is dt, and the element for the description is dd. It works similarly. We start with a dl, we have a dt ,we have a dd for whatever the description should be. Then we can do another dt, dd, dt, dd, etc and then close off with our closing dl. Let's take a look how this would work. First of all, we'll look at ol's. So here again, we have our ol, we have our li's. If we wanted to say start with seven, we can do that. Should be in quotation marks that might also work without them, so you can see it starts with seven there. I could also do type equals i, and you can see I'm starting at seven and it starts with the seventh roman numeral, or right there. So we have the ol and we have a start and type, you can play with that. Next, we have our unordered list, which has again a ul and li. You can also change the ul type. For instance, I can put in a square and it makes square ones. Disk is the normal bullet, and you can change that as needed. Moving on to definition lists or description lists, so we have here again, our dl, dt of a walker, dd of the zombie still walk, shuffle. If crawler, its definition or description and of course PFC Wiggins, our intrepid friend, and that's about it for lists. 7. A Picture's Worth a Thousand Moans: One of the things you probably going to want to put in your articles and such are images. First of all, images are added using the HTML image tag. It's a void tag so there's no closing tag. You'd use the source attribute to tell the browser where to load the image from. Then there's also Alt attribute which is used to give a description of the content, is particularly great for screen readers and search engines because they just can't access the content of the image otherwise. But it is important that you add all text to help make it accessible to anyone who has low or no vision. You've got your image tag, your source attribute, in this case is zombie.png. If it were in a different folder, you would start with whatever that folder is or the path to that folder, then zombie.png. But if it's in the same folder, then you can just use that. You can also pull something in from elsewhere using the full URL if you had that as well, the alt text is just going to be text about the image. In this case a lone zombie search for his horde. It's also important to know that you don't want to say like image of or graphic of because that's already inherent in that it's an image. A screen reader is going to say that is an image before it reads the all text. You do a lot of things with size on images. There's height and width attributes that you can set to determine what the size should be. It is generally better to do it in CSS, which we'll get to eventually, but you can do it in your HTML as well. If you try to make an image larger, using the height width attribute, you're going to degrade the quality because you're spreading the information over a larger area. It's like if you have a given resistance, so for these zombies and you spread them too thin or against the zombie horde, they're not going to be as effective. They're not going to do as well because they're spread too thin. You can make the image smaller and we'll leave the quality intact. The problem is still going to be the same file size. If you have 10 meg image and you shrink it down so it's only like a 100 pixels by a 100 pixels, it's going to look really small, but it's still going to take the whole 10 megs to download to look right. It's often best to have the exact height and width of the image that you're using in order to prevent over downloads or lower quality. If you change the height and width just at random, without preserving the aspect ratio or without doing it so proportionately, it's going to squash or stretch the image, and it just doesn't look good. Unless it's a zombie, then you can squash and stretch them all you want. As I said before, ideally, the image should be its natural size to get the best balance between smallest file size and best quality. So let's talk about the different types of images you can use on web sites. First of all, there's GIF, it stands for Graphic Interchange Format. I pronounce it GIF. A lot of people on the internet would say that I'm wrong, but I would say that it's not jraphic. So it's not JIF it's GIF, but it's up to you, on which side you want to fall in that fight. GIFs work in all browsers. They allow animation, which is one of the reasons why they're still around. A lot of the animations you see on the web are often in GIF particularly up until recently. Though there's a lot of new stuff going on with CSS and animation that allows those to be done natively as opposed to just in GIFs. GIFs also allow for transparency, which is helpful, but the transparency isn't always as good. Sometimes it's a little crunchy or shows more of the edge then you want to. It is a lossy format, meaning that when you save as GIFs, you're losing information. So it's not keeping all the information. So you're degrading quality a little bit. But the benefit you're getting is that you get a smaller file size, which takes less time to download. So it's balanced between high-quality or quality of image and size of image. GIF works particularly well with large swatches of color, such as logos or line art. JPEG stands for Joint Photographic Experts Group. It works in all browsers, does not allow for animation, has no transparency allowed for it. It is also a lossy compression. But it is super great for photographs and does a much better job of compressing them than a GIF does, and so it really shines in photographs and other complex imagery. PNG, stands for Portable Network Graphics. It is the newest of the standards, but still works and just about all browsers. You have to go pretty far back to find a browser that doesn't work in. It doesn't allow animation, but it does allow high-quality transparency. If you ever need transparency behind an image, you want to use a PNG. It is a lossless compression, at least at the PNG-24, the PNG-8 lossy. What's great about that is that you are keeping all of the information there. You just compressing it into a smaller box as opposed to getting rid of some of the information so that it fits in smaller boxes so to speak. [inaudible] algorithms are particularly good on the same thing that GIFs are good on. Things with large swaths of color, logos, line art, those things, but it can be used on anything. SVG is probably the newest of these standards, or at least the ones that want to be standardized. Stands for Scalable Vector Graphics. It works natively in most browsers, but you can also use it within an image tag, in older browsers, so it still works there as well. You can also use it as an unchecked in more modern browsers, but natively sometimes has embedded benefits like access to CSS and things like that. It supports animation and animation via CSS. It also supports transparency, and it scales up and down without any loss in quality. SVG graphics are what's called vector. They're similarly again, more line art and logo things. But you can scale them up and down without any loss of quality because they are based on math rather than on pixels. Generally a very small file size, it uses tags much like HTML, which is when I was talking about it being native. I'm talking about using the tags directly in your HTML as opposed to importing an SVG file through an image tag or something like that. Again, best with line art, logos, icons, those things. Now there is another tag that we sometimes use for images, not directly for images, but usually surrounding images. It's called the figure tag. It's mainly a container element for graphics, tables, charts, all those things. It should be self-contained, but relate to the main content. I mean, this is particularly what you would see with different papers and things where you would have a figure that supports the data or shows the data or supports the conclusions, et cetera. The figure element allows for that. It's best used for descriptive information, supports the text around it. Another element, fig caption, allows you to add a caption to the figure. Here's a live image tag. So we have image, we have our source. This is where we finding it from. We have are all text. If we wanted to put this in a figure, we would just add the figure tag, closing it with the figure. Then if we wanted to say, add a caption, we can do old Zombie in a top hat, and then we have a figure. Let's move on to the next video. 8. Dressing Zombies in Cascading Style Sheets: Now we get to CSS. CSS stands for Cascading Style Sheets. In our Zombie [inaudible] HTML is going to be the skeleton and CSS is the flesh and clothes. HTML is the structure and CSS is the look and feel, its colors, its fonts, it's how things are presented. It styles text, provide for aesthetic changes. It cascades through the documents. Cascading Style Sheets allowing child elements to inherit some of the properties of their parent elements, so you can inherit colors and sizes, and some of those things. CSS comes in a list of rules. A rule consists of a selector and a declaration block. Selectors choose which elements the declarations apply to and the declaration blocks lay out the changes or talk about what should happen. For instance, this is not a real CSS selector, but this is what it will look like. You have first your selector, then you have an opening curly bracket, then you have the declaration, and then a value, and then a closing curly bracket. The colon and the semicolon are important, so make sure you include those. Let's talk more about selecting. Selectors come in three main flavors. You have classes, IDs, elements. You can combine these to create what's called a descendant selectors. These are descendants in the same way that a child is the child or descendant of a parent element. For classes, you're going to use a class attribute, for HTML elements, and in CSS you need to have a period in front of it, e.g period zombie-school. ID's; you're going to use the ID attribute and only appears once per page and in CSS, you need a hashtag in front of them. Hashtag unique-zombie. CSS declarations usually are keyword or value pair separated by colon and use a semicolon to designate the end. You can have multiple declarations per rule and curly brackets wrap the declaration block to show the beginning and end of the block. For instance, with the p tag, we can set the color to yellow-green and then this will change all the paragraph text to an eye-searing sickly yellow-green. Here we have some HTML on the sides, we've just paragraph tags. The next one has a class. It's class is, hoity-toity and then ID, which is unique. For instance, here we have color of light blue for the paragraph. If we change that to say red, it should update down here. The color is red, hoity-toity is selecting the middle one. If we change that to just regular green, goes that. The reason it went red for a little bit before turning green was that a p-tag also applies to the hoity-toity, p-tag, but hoity-toity being a class is going to actually override the p-tag because it's more specific because it's not every p tag. It's only those that have a class of hoity-toity and then if we change, say the unique and add it. Let's change it to blue, then it becomes blue down there. How do we then put CSS and HTML together? There are four ways to do it. Style attribute, style tag, which are the main two that we'll talk about and then there's an external style sheet and importing a style sheet. Again, these are more complex than we really need. We'll talk about the first two. The style attribute goes on any HTML element. It looks similar to a class or other attributes that we've talked about. You only need the declaration, since you're already on the specific element where we're selecting that element so you don't need a selector, just the declaration. The upside is that you can be very specific in how you apply rules. The downside is if you set this on a number of elements, say changing all of the paragraph texts to blue, but then your boss wants to change it to red or you need to change something later on, then you have to edit each and every one of them. To see what the style attribute actually looks like, here we have it, sort of the p-tag, we have a style attribute with a color green and the paragraph will have green text. Elemental style; there's a style element which is part of HTML element, just style and you can put CSS between the opening and closing style tags. In this, you can set all paragraphs to blue and then if you change that, it will change everywhere. With the style tag, the p, since we have a selector, will apply to all paragraph tags within this particular page and we can change the color to purple or red or whatever we want to change it to just by changing this one place rather than going to each style attribute and changing them there. There are a couple of caveats here. Use your new powers wisely. Brand colors and fonts are there for a reason to create consistency across many pages. If you go against them, do so at your peril. It's not my fault. You are making that choice. I'm just telling you how to do it when it makes sense to do it. Use your new powers wisely. If you try to do a new design and look and feel per page, that's really the wise choice that can confuse users. There are times when you want to do this, might be for instance, if you have a figure that you wanted to then style a little bit differently than the rest of the site that might make sense to do that. Consistency is really important. It helps users know that they're on the same site, that they are dealing with the same institution and if you constantly change fonts or constantly changed colors it's not going to make any sense and they're going to leave. They're going to go to a different site. There are times when you can and should go against brand colors and fonts. They are rare and if you do so, you should have a really good reason to do so. It should be reasons like the way that you were showing the content needed to have a different font and color, so you could provide contrast to the brand, fonts and colors or something like that. It should be a really good reason and it should be one that you can articulate. Again, go against brand, colors and fonts at your peril. All that said though, be creative and push the boundaries. The web is a place to play and have fun and if we don't keep pushing the boundaries, we'll never know what we can do. 9. Fonting it up with Zombies: Okay. Let's talk about fonts. You can use any font you want for your web page. It'll look great on your computer, but if other people don't have it, it's going to look like undead puke. Also you need to be careful that changing the font without a good reason will increase the horror, it's not a good idea to do unless you know what you're doing or are changing it from something else to the desired font type that's used elsewhere. Since fonts aren't available on all systems, you should typically choose several fonts that will look similar if one isn't available. For instance, here I have a content class and the rule of font-family is that choosing which font we want to use. The first one that will be available is Helvetica or that we would hope would be available is Helvetica. If that's not available, then I'm going to go with Verdana, and if that's not available then, you can also change the font size. You can use a couple different types of units, pixels, percentages, ems, and even a couple of more. I tend to prefer ems because they're relative unit. One em is equal to the default font size, typically there're 16 pixels. Em's are relative units, which means that the child tags will inherit their parents font size, and the parent's font size becomes the child's new default font size. Their one em is based upon the parent's font-size. For instance, if a parent's font size is set to two em, and the child is also set to two em, if we assume 16 pixels is the base, then the parents font-size will be 32 pixels, but the child's font size will be 64 pixels because it's building two times the default size from its parent. The benefit here is that things get bigger and smaller proportionately. If for instance, a user decides to change their default font size from 16 pixels to 24 pixels, or even if they go down from 16 pixels to 10 pixels or something like that, then all of the font-sizes are going to change accordingly. If we went down to 10 pixels for instance, the parent's font-size would then be 20 pixels, and the child's font-size would then be 40 pixels. They're still going to stay proportionate to what was originally set. If you set them with specific pixel numbers, they wouldn't change, and that's not really good for the user because sometimes designers can make things very small, which can be hard to read. Here is an example of a change of font-size. In this case, we are changing the font-size to 1.25 em, so we're upping a little bit to about 20 pixels, assuming 16 pixels was the default. Here we have the pixel version, font-size of 20 pixels, and you can also use percentages, font-size of a 125 percent. Font weights. You're probably familiar with bold, a heavier weight, than the normal font. But there's quite a few other weights that you can use. Fonts come in many sizes and thicknesses. Font-weight property allows you to change this. You can go from 100-900, increments of a 100, 400 is normal and 700 is bold. Most fonts do not have all nine weights. I would say it's a rare number of fonts that have all nine. Most will have at least 400 and 700, but there may be sometimes you'll have a light and some of those things. You are also able to use the keywords normal and bold to also set them without having to remember the 400 and 700 thing. What's the zombie-weigh? Here we have content font-weight bold, you can also set the font-weight to normal, and the equivalent in numbers. Here we have font weight sent 100, and then finally to 400. Styling. Font-style is how you italicize or unitalicize content from CSS. We just font-style italic sets the font style to italic, and normal sets it back to normal. By default, as I'm sure you've seen, links are underlined in blue. Sometimes you'll want to remove the underline or even add it back. That is used text-decoration. Text-decoration, none were removed. The underline text or creation of underline will add it back. You can also change the color of the font, and like changing the font family, you also want to make sure that you use this wisely and choose colors that are pleasing to the eye, and not the sickly yellow green that you're probably going to see me choose here. There are a lot of ways to set color in CSS. We can use keywords as we saw in the last chapter, like blue and green, peach, puff, etc. There's also a hexadecimal notation which looks something like this. I don't even know what color that is. Don't worry. You don't have to know. But if you know that this is a color, the hashtag before it shows you that it's a color, then you can get whatever color you want and a graphics program then copy that hexadecimal value into your HTML in order to change the color. While the keywords are helpful, they don't have nearly as many colors as the hexadecimal numbers allow for, and again as I said, any graphics program should be able to help you get the hexadecimal value that you can then just plug in. Here's an example of setting the color to yellow green, here's another example using the hexadecimal notation. Notice that the hashtag is there, and is required for doing hexadecimal numbers. Let's take a look at some code. Here I just have a little paragraph that I've added a whole bunch of different things to. Here we have the font family, zombie killer being a font that does not actually exist. It's not going to find it. So since a raleway does exist on my computer, it's going to show me this in raleway. If raleway do not exist as it may not on your computer, it'll choose helvetica, and if helvetica is not available, then it'll choose some san-serif font, probably ariel, but it really depends on your computer and what you're doing. Here we have to make it bold. So I made this little thing bold to just set the font a bit bold, skinny text here, Zombie. If you do not have raleway on your computer, you're not going to see this get in your text, because raleway is a font that happens to have multiple versions or multiple weights. So I was able to then show this as the zombie weight. Next we have normal text. So the font weight is normal, insanely large text is this little guy thing. I'm changing it to six em. You can also change things to very small. So in this case, I changed the word website to just six pixels or actually yes, I'm sorry. This ensures that we have raleway. So you should still see raleway on your computer even if you don't have it because of the way that I set this up. Getting back to font-style, so italic, so I set this whole thing to italic, and then in the middle here I have just this word zombie that I'm making boring. So I'm changing the font style and normal, and it is no longer italicized. All right. That's it for this section. Let's head on to the next. 10. Boxing the Undead: The CSS Box Model: The next thing we're going to talk about is the CSS box model. CSS box model determines how elements are laid out, how they interact with each other. It looks something like this. You have margin all around the edges. You have a border. Inside that you had padding. Then in the very center is content. In general, in the box model, the width is equal to the width of the content, not the width of the border as is more typically thought. There is a way to change this using what's called border-box, a bit beyond this course. But the width of the content is usually the width of it, and then you can add padding and border and margin to push things around and add spacing, etc. Width sets the width of the element defaults to the content width. Height sets the height of the element. Padding is the space between the content in its outer edge. Border is the outer edge of the element. Margin is the space between elements. You can also use ems for these values too. You don't have to just use pixels or percentages or whatever; you can use ems as well. Boxing out the zombies. Margin and padding can each have values set. One value to set all sides, such as we're doing here. Margin of 2em is going to put, assuming 16 pixels is the base, 32 pixels around every side of content, and then another 16 pixels of padding will be available there as well. But you also set the sides individually using something called trouble notation, so that T, R, B, L is important. It's the order that you set the sides in. So top, right, bottom, left. It's the word trouble is how I remember. Top, right, bottom, left because they are in the same order in the word trouble. Margin, we're setting 1em on the top, 16 pixels on the right, zero pixels on the bottom, and five percent on the left. The padding, we're setting 20 pixels on the top, zero on the right, 10 percent on the bottom, and 2em on the left. Borders require three values to be set. First is the border width. How wide the border is, usually in pixels, ems, any of those units. Border style, this is usually solid, dashed, dotted, all those types of things, and there's more styles available as well. Nine times out of 10 I use solid and not dashed or dotted. But it's available to you if you need to use it. Then also the border color. The color you want the border to be. You can use keywords, hexadecimal, etc. Here's an example. We have border with a colon, and then the width is one pixel, solid is the style, and #47D2F3 is the color. A lot of times if you want to add an image to a set of texts it often sticks out like a human in a zombie horde. It was called floating it. See, you can float it left or right to send it to the left or right edge of the element. As you can see here, the top image is floated left, and the bottom image is floated right. When you're doing this, you can use the margin or padding to add spacing around it so that the text doesn't run up directly against the image. Here we have float, right. It's just float colon right. Then margin, we're setting five pixels on the top, zero on the right, five pixels on the bottom, and five pixels on the left. We're doing this zero pixels on the right so that it can be flush to the right edge of the content rather than sticking in five pixels. We don't want the text to be right up against the image, so we are pushing it out to five pixels. Similarly, with the float, left, a margin of five pixels on the top, five on the right, five on the bottom, zero on the left, again, so that we can put it flush left as we float it left, and five pixels everywhere else to prevent the text from directly going against it. We also do backgrounds or change the background color of an element with background-color property. So something background color of red. If you do this on an element that contains text, make sure you add some padding so that the color is not directly on the edge of the text. One important thing to note, one of the big differences between padding and margin is that the background color of an element will show through padding but not margin. Here we have a wide variety of different ways to do padding. We have a pillow padding, personal space, personal space on the subway, individually, group, right wall. We'll look at these directly. First, we have like-a-pillow is this element right here. We have a padding of 2em all around. I might color the background red just so it was easy to see. Next, we have human padding, which I gave padding on the top was zero, padding on the right was 1em, padding on the bottom was 12.375 em. Maybe your padding is different, but padding on the left was also 1em. Here we have padding with basically none on the top and a whole bunch on the bottom. Then we have personal space where we want to make as much personal space as possible. We have 5em margin, but as you can see here, there's no paddings, so the text runs right up to the edge of the elements, which doesn't look very good and is hard to read. Then if you're at the subway or the metro or whatever, you have almost no personal space. You have a little bit above your head, maybe a little bit to your right. You're sitting on a seat, so there's no margin there, and maybe a little bit to your left. That's where this margin is. Then here we have human padding. It's the same as above. It's just using one declaration to set all the rules. Personal space on the subway. Same thing here. Same numbers as above, but being used in one declaration. With borders, you can have individually set. So you have border of one pixel, solid, border color of green, and there it is, border color of green. One note, just this line here is from this hr element, which means horizontal rule as an HTML element that you can use to separate things if need be. Next, we have grouped. The border is grouped here with one pixel, solid, and blue. Then the right wall, we have a border just on the right, 50 pixels, solid, and black. That is another way to do borders, etc. On to the next. 11. Punching Code from Word in its Zombie Face: Sometimes when you're working and you've built your content in Word, a perfectly normal way to build code, Word tries to be helpful and include the exact font you're using, exact spacing you're using, and all those cruft that you really don't care about. You just want it to just have your content, maybe with the bolding and italics and those things intact, there's a couple of ways that you can go about fixing this. At one point I got this crazy text. I don't even know where to start with a lot of this. It's just weird. One of the best things you can do is put it in a code editor. In this case, I've put it in here into CodePen. But you can use any color coding editor you want. That actually gives you a lot of information or helps really clarify what's going on. Now you can see that all of this is just from a span tag and there's a bold italics underlined section here, for no reason, it seems. There's a lot of weird stuff going on here. Now that you can see the color coding, of course, you can just delete the span tag. Don't forget to delete the other span or the opposing span. A lot of this content, actually, we don't even need because it is just for this guy here is what's called a non-breaking space. It's equivalent to just a space, but has the benefit of not breaking line. Sometimes it's used as a place holder for things. But there we have space and we can actually just delete this whole section here. There we go. Now we have just the code that we wanted and not of all the craziness. That's one great way to do it. There are some content management systems that are better at removing this than others. Sometimes in Drupal they would have a paste from Word that will remove a lot of that cruft that you don't want while leaving the content that you do and the styling that you do. Another way to get rid of it is to paste it as plain text, so copy the content into a plain text editor. That should generally remove all formatting, which is not always ideal. That's another way to do it. Also, if you have a copy of WordPress handy, WordPress tends to do a pretty good job of removing a lot of that cruft and excess code while leaving the stuff that you want to keep if you paste it into the visual editor. That is another great way to get around it. Maybe if you are using WordPress on one side and Drupal another something you can always paste it into WordPress, then copy from there and paste into the other application or the other thing that you're doing. There's a lot of different ways to get around it, but putting it in a code editor that color codes is probably the best way to keep the content that you want and get rid of the stuff that you don't. 12. Pulling Out the “Brains”: Pull Quotes: So something you might want to do is create some pull quotes, and I think you have enough tools now to be able to do that. So what we're going to do is I'm going to take a quote from this particular piece which is an old story by Lloyd Arthur Eshbach about zombies, and I'm just going to pull a few words out and create a pull quote. So I found the content that I want to pull out. It's this little section here, "Out of the winding-sheet of fog into the moonlight crept a strange, strange craft." All right, so I'm going to copy it, and then I'm going to paste it again. Actually, what I want to do is I want to move a little bit further down, I'm going to add blockquote, class equals good class with pull quote, and I'm going to go ahead and close that blockquote just so I don't forget to do it. I can see that I mistyped something there. Then I'm going to add that again here. So if we scroll down, we should see here is that section again as a separate quote. So now I'm going to go to my CSS, and I'm going to do first of all, put the class in, and add some content here. So a couple of things I want to do here. I want to set a width of say 200 pixels, and maybe that's a little bit small. Let's try 300 pixels, and I want to up the size, that it stands out. So I'm going to font size of two em so it's a bit bigger. That's maybe too much. Let's go down to say 1.5. Still a little big. Let's do 1.25. All right, so it's still a little bit bigger, but not quite crazy large. I'm going to float it right. As you can see there, scroll down a little bit so we can continue seeing it. I'm going to add a border just on the left-hand side. Let's say five pixels. How about about red and solid. That is way too close to the text itself, so we want to do some padding, rather. Let me just do padding on the left, and I don't know, maybe one em. Let's see what that looks like. That's probably good. It turns out this red is a little bit lighter than I want, so I'm going to color I picked out a little bit earlier. I'm just going to change to that color. It's more of a deep red which I think fits in better with what we're looking at here. Now, I only added padding to the left, but I think it might be nice if we add a padding to all sides, and what is going to help with that, it's going to make the border pop out a little bit higher as well. So I just change the padding to one em and the border is out a little bit more. You know what? I think I want to do one em, so on the top and bottom, I think I want to do.5 em, and then on the left and right, I'll do a single em, and that will then put it like that. We can also change maybe the color here, maybe we'll gray it a little bit. So let's do As to make it pull out a little bit, and there we have a pull quote. We can also maybe move this up a little bit which I think might be a good idea. So I'm just going to cut it and paste it up, and be up in this previous. So another thing we have to think about is that with blockquote comes some default styles. So if we're having too much space around it, which I feel we are, we can remove some margin and make sure that we're not having too much on the top and bottom. But what that did do was that it brought this information right here too close, in my opinion, to the border. So let's give it a little bit more margin. Instead of zero, let's do 0.5 em. It's not quite enough. Let's do one em. There we go. There's a little bit more spacing. I think also as we make this smaller, it'll look a little bit better because we have text that's not continuing here. Yeah, I think I moved that up a little too far. Let's see what it looks like if I put it in right in there. All right, yeah. That looks pretty good, and there you have your pull quote. You're going to certainly do variations on it. We could add a background color to say very dark red, say like this. Maybe that's a little too dark. Let's up it to say like that. It's too bright. There's about right. So we can do some place with some things like that, we can make the border quite a bit larger if we wanted. Think about just how we wanted the thing to look and how we wanted it to interact with the other content. If we're using that background color, I think I'm going to change the color of the text back to white. Maybe too much. Let's try something a little bit off-white so I think a little bit less pronounced. But yeah, there you have it. You can play with your blockquotes and just add them on your own without needing to hire a designer or do anything more than just add a little bit of text and a little bit of CSS. 13. Thanks for the Memories: Well, we've had some good times together. You learned some HTML, some CSS. You've learned what a tag is, an element. Rules and declarations. [inaudible] But now I must say goodbye. Thank you for watching my course. I hope you learned a lot and can apply it throughout your life. Don't forget to include your directory projects, and put them up so that I can see them, so that other students can see them and just show what you've learned. Thank you again for taking this course. I hope you were able to kill some zombies and have some fun along the way. See you next time. 14. Bonus Lesson 1: Building a Page Bunker: In this video, we're going to be talking about how to build an HTML page from scratch. We'll talk about Doctypes, the HTML head and body elements, and the elements inside the head. First of all, there are four main parts to an HTML page. First is the DOCTYPE. This is going to tell the browser what type of document it's working with. There's the HTML element, which is going just to wrap all the other elements. There's the head element which is going to give information about the page and how to render the page, how to display the page rather, and then the body element, which is going to hold all of the information that you actually see on the page. The doctype, again, tells the browser what kind of document it is. When we were working with XHTML, we had something like this, which is super lovely. I'm sure you all have it memorized now. Unfortunately, with HTML5, they went the other way. No, it's actually fortunate because this I can remember. DOCTYPE HTML tells the browser this is an HTML5 document. The HTML element. It's going to wrap all the other tags or all the other elements. It has an opening HTML tag that looks like an HTML tag and a closing HTML tag. For better accessibility and search engine optimization, one of the best things you can do is add of language to the HTML element, the opening tag. This helps ensure that not only does the browser know what computer language we're using, which is what the doctype tells it, but also what human language it's using. It looks something like this. You just have the HTML opening tag, you add a lang attribute and en, in this case it's English, but you can use es, for Espanol and there are lots of other country codes and language codes that you can use. The head element is going to hold everything about the page. None of it actually renders in the page or displays in the page. It's all information about how to create the page, how to put it together, so you have things like the CSS files that are in use, any JavaScript files that might be in use, meta info about the page, the title that appears in the window or tab name, and all other information about the page. It is not information that renders on the page, but information that is about the page. Now also I'm emphasizing that partially, because head is similar to a couple of other tags, header and headings. We'll talk about the differences later, but header and headings go in the body while head is a separate thing, is a direct child of the HTML element. Again, nothing in the head will show directly on the web page and it looks just like this, opening head tag, closing head tag. The body. This is going to hold all the information that's visible on the page. Everything that's actually displayed, everything that you see in the browser window will be in the body. All the texts, colors, images, whatever else appears, it goes directly and strictly in the body. We have our opening body element, or rather opening body tag and our closing body tag. Now let's put together everything we've learned. First we have the DOCTYPE. Thankfully it's HTML5 DOCTYPE, so my fingers don't get a cramp writing out the whole DOCTYPE. Following that is the opening HTML tag, with a lang attribute for English since the page that we're building here is in English. Then we have the opening head tag, closing head tag, opening body tag, closing body tag, closing HTML tag. It's important to note that head and body are the only two elements that are directly within the HTML element. Everything else in the HTML document should go in the head element or in the body element. Nothing else is directly a child, so to speak, of the HTML element. Now I just want to make clear again that head, header and headings are different things. The head is not a heading or a header, but it is the head, it is the information about the page. Header and h1 through h6, or the headings are different. These go in the body, not in the head. Head is for info about the page. Header and heading or h1 through h6 all appear or are displayed within the page, whereas head is info about the page and it does not directly display. Within the head, we have a number of different elements. First of all is the title. This is again, the title of the page, also does not directly display in the document window or in the browser window. It does however, display on the tab name or on the top of the window. The texts that you would see in the tab name or at the top of the window, that's the title element. It isn't however important to search engine optimization because it gives information about the page and it's also information that you would see on a tab name, etc, so with a billion tabs open, it can be important to have good texts there. Maybe you have fewer tabs open than I do, but I have probably more than a billion. You want to use descriptive keywords when writing your title is just to help your search engine optimization and help make it clear what the page is about. Here's an example of a title element. Meta is information about the page. As being information about the page, you would think that it goes in the head and it does. It is a void tag, meaning it has no closing tag, so it's just an opening tag. Most of the time it consists of a name attribute and a content attribute. We'll talk about what those are in a moment. But there's also a character set attribute. This is the set of characters used by the website. This is important for internationalization and for ensuring that whatever browser is looking at this page is properly encoding or properly understanding the characters that were in use. It's a good thing to have otherwise the browser is guessing, it often will guess right, but it might not, so having it is helpful. In most cases the value for charset should be UTF-8 and will look like this. Meta charset UTF-8. Next we have the viewport Meta tag. This is important, particularly for responsive design. We'll get into that a little bit more later. But it tells the browser not to zoom out, but to show the site at its natural size. What happens a lot of times with mobile devices if you don't have this viewport Meta tag in place, it will zoom out and try to show you the whole page at once. For a long time, this was really good because otherwise you were stuck zoomed into a page that you could barely read and probably didn't work on your mobile device, but with responsive design, which we will get into in a little bit, having this Viewport Meta tag allows you to have a greater control as a web developer and allows you to create a website that will be more easily viewable by users on their mobile devices. Don't worry if it doesn't make sense right now, we'll discuss this again. The Viewport Meta element name is set to Viewport and the content is set to a width equals device-width and at initial scale equals 1.0. Generally, what I had in there for content is all you will need. There are times when you can make some slight changes to this but in general, this is the value of content that you want to use. The description meta tag is also there for search engine optimization. It's going to be a few sentences that some of your site. Many search engines will display this as the description that you see in the search results, so make sure that it's clear, concise, keyword rich, and represents your site well. The name attribute here is going to be description, and the content is going to be whatever sentence or two about your site that you want to put in. This content is probably too short, it probably should be about 30-50 words. Not too long, but not too short either. The link element is a way for you to link other types of files with your HTML. Sometimes it's the CSS files and sometimes other related documents. It's going to look something like this. You have the link element here. Each ref attribute is going to be the path to the particular type of file. In this case it's a CSS file and rel is going to be the relationship for what it is that you are connecting to the link element. In this case, it's the style sheet. Now let's look at some live coding. In here we have all the elements that we just talked about all put together in one spot. On the left-hand here I have the code, on the right hand here is a direct rendering of it. Most of what we talked about were things in the head, which again does not directly display on the page, but I have included a header and an H1 here to help you see the difference between head header and heading. This is the head, this is a header, this is a heading. Let's take it from the top here. We have our DOCTYPE. This again tells the browser that is an HTML page, in this case, HTML5 per later page. We have our HTML opening tag with a lang attribute and English set as our language. We have our opening head tag, and here we have a title tag which will show in the browser window. Next here we have the character set, again, UTF-8. Make sure that we're all on the same page here. Next we have the meta viewport tag. This will be all you need to do. You can pretty much copy and paste that into your pages. You don't necessarily need to know any more than that. There are a few other options, but they are rarely used. We have our description meta tag, we have content set, we have our link to a zombie CSS file, and relation is the stylesheet, we have our closing head. Again, all information about the page, information that is not going to render on the right-hand side here, but will inform how this page renders, particularly with zombie.css, but also information about the page like the viewport keywords and description. We have our opening body tag, then we have our header, which is a structural element that we'll talk about in more detail a little later. We have our H1 heading, which is information that will be displayed on the right here as you can see it right there. Then we have our closing H1, closing header. We have a nav tag that should not be there. We'll get to that in a little bit. We have our closing body and we have our closing HTML. That is the end of this lesson about creating your very first HTML page. 15. Bonus Lesson 2: Braaains, Bodies, & Structural Elements: In this video, we're going to be talking about building the body of the HTML document. The header, again different than the head and the headings, header is a structural element that can contain your headings. Can be a header for a page or a section or article, and we'll talk about those two in a second. It looks something like this. We have our opening header tag and we have our opening h1. Then we have our closing h1 and closing header. This is the most basic header. You can also include other tags, other elements, as needed. But this would be the most basic version of a header. Nav, main, and aside are three more structural elements. The nav is going, of course, going to wrap your navigation. It can be used on its own or it can appear in a header or in aside, depends on whether you want the navigation to be across the top as it would be if it's in the header or along the side as it would be if it's an aside. It can also be on its own. You could have a header and then have a nav underneath it and aside on one side and a nav on the other. But they tend to work a lot with header and aside. This is the main content of the page, and that's pretty much it. The aside is for related, but tangential content, most often sidebar, but could be used for comments or similar content. Yes, typically a sidebar and that's why sometimes the nav goes in it. Footer, comes at the end of the page or the end of a section or article. It often contains copyright information and links to other related pages or articles or sections. Article, is content that can stand on its own. It'll typically wrap blog posts or news articles, stuff that can be pulled out and would still be able to make sense and be able to stand on its own. Section on the other hand, is just a part of a page. It does not stand on its own. It is a portion of a larger item. Let's look at some code. Here I have it all laid out for us. We have the head and body from last section. Here again, we have the header and the h1, below that we have a nav. Within the nav, we have an unordered list of three links. In this case, I am linking to three places within the page itself. Next, we have our main element. Again, the nav is standing on its own, in this case, separate from the header and separate from the aside, which is down here. In our main, we have three articles. Within the article, we have two sections of each article. We have an h2 that is the heading of the article, and h3 for the heading of the section and then some content there. Similarly, in the next article, we have an h2 for the heading of that article, we have a section with an h3 for the heading there and again for the final article. Here's our closing main tag, then we have our side. In the aside, we have just some more content. I used an h3 there to make it more consistent with this section. Finally, we have our footer, which has our copyright information. Closing footer, closing body, closing HTML. Closing of this video. 16. Bonus Lesson 3: Responding to the Zombie Fight: In this video, we'll be talking about responsive design, what it is and why. We'll discuss the Viewport meta tag a little bit more, and we'll talk about media queries. First of all, responsive design. It allows the site to adapt itself or respond to the context in which it is placed. Whether that's on a mobile device such as a phone or a tablet or a giant screen to desktop computer. The site is able to adapt to all of those devices. Media queries allow you to change what CSS is used based upon a wide variety of conditions, often screen size or screen width, i.e., mobile versus desktop, or sometimes media-related like print versus screen, etc., but there are many media query types. Why do we need responsive design or what's going on? A long time ago, phones and small devices did terrible with websites. They would show you basically just some portion of the desktop size site, and they were very difficult to navigate, very hard to find information on, very hard to even look at anything. One innovation Apple brought when they created the iPhone, was that Safari would automatically shrink a website down, fit inside the screen. While this did make it often hard to read at small sizes, you could then much more easily pinch and zoom to find the part of the website you're interested in. This made websites a lot more usable because you could see the whole thing at once and then could zoom in on the part that you wanted to or scroll down to find the part you're interested in. But when responsive design came around, we needed to have a flag or some way for the browser to know whether they should zoom out or whether they should leave it as is. In comes the Viewport meta tag. Apple also came up with this. Tag gives a heads up to the browser to not zoom out as we discussed before. It has a name value of Viewport and the content is width equals device-width, initial scale of one. Media queries. What do they do? They test for a characteristic, if that characteristic is true, it executes the CSS inside the brackets. For instance, we have, this is our media query, so at media, if we're on a screen versus on print, and the max-width of that screen is 900 pixels, meaning the current screen size of the screen or size of the browser is below 900 pixels, then we would execute whatever CSS was here. This of course is the CSS comments, so it's not going to be executed but you could then change layout, do all kinds of different things when this media query is true. There are lots of different types of media queries. We just saw one that was max-width, the default was the desktop case and then as you went smaller, it made changes. The rest of that is to start mobile-first, meaning you start with the smallest version of the screen and then add or change elements and CSS as the site gets larger or as the screen size gets bigger. One of the benefits of mobile-first is that there's a lot less craft, you don't have to remove it from the desktop site. You can edit as you go along. Not having all that extra stuff is really helpful when you have a slow connection or with mobile it maybe slow, it maybe intermittent. There are lots of different ways that could be problematic. So having a mobile-first design is a good idea. You can also do media queries for print i.e., this page is meant to be printed, so do these different things. For instance, you can remove the background images, background colors, remove the navigation because you can't click on navigation on paper, or at least not yet. But yeah, there are lots of things that media queries can do. Breakpoints are whenever the media query applies. For instance, in the last example we had a min-width of 900 pixels, the breakpoint would be at that 900 pixels. How many breakpoints should you have? How many times should you make updates to the site based upon the size of the device that you're looking at it on. It really boils down to as many as you need. You want to make sure the content is clear and looking at its best. However many media queries it takes to do that is how many you need, but no more than that. More breakpoints means more complicated maintenance and can be harder to add new things and new features. Use as many as you need and not one more than that. When should you set a breakpoint? It's best to do it when the design calls for it. If you do it based upon the size of common screens, then you'll always be chasing screen sizes and never succeed. There is a new screen size being created pretty much every day. As new devices are created in new ways of looking at them, there's no point in chasing that. If you based your breakpoints upon the design that you're implementing, you're much more likely to have smooth and appropriate breakpoints. Let's look at some code. Here's my media query. When I am above 600 pixels, that's when these will apply, so once I'm above 600 pixels, the main will float left and have a width of 70 percent, and the aside will float right at a width of 28 percent. Let's look at that one side, come up a little higher, there it is. Now I have floated and 70 percent, floated right and 28 percent.