I Don't Fear Code (or Zombies): More HTML and CSS for Writers, Editors and Beginners | John Rhea | Skillshare

I Don't Fear Code (or Zombies): More HTML and CSS for Writers, Editors and Beginners

John Rhea, Web Designer/Developer/Storyteller

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (43m)
    • 1. Introduction

      0:45
    • 2. Zombie Tools (skip if you took "Code isn't as Scary as Zombies")

      3:50
    • 3. Undead Markup

      7:14
    • 4. Editing Zombie Moans

      5:11
    • 5. Symbolic Apocalypse

      5:04
    • 6. Zombie Fragments & Other Links

      2:38
    • 7. Multimedia Hordes

      6:42
    • 8. Smacking Zombies with an (HTML) Table

      3:31
    • 9. Zombie Selection

      6:31
    • 10. Zombie Polka

      1:31
    • 11. Conclusion

      0:19

About This Class

Whether you write for a living or blog here and there, knowing HTML and CSS can help you stand out in the post-apocalyptic landscape of the Internet. This course will expand your HTML and CSS knowledge and help you kill zombies wherever they may appear.

We’ll cover more HTML tags you can use to mark up content, display edits on a web page, add SEO richness, and embed audio and video. We'll also discuss creating your own tables and accordion menus. On the CSS side we’ll further explore CSS selectors including some more complex selectors and pseudo classes.

You should have at least a beginner understanding of code such as how HTML and CSS code is written and where to put it for greatest affect. If you don’t have that, check out the first class in this series: Code Isn’t as Scary as Zombies: HTML and CSS for Writers, Editors, and Beginners

Get your content looking exactly the way you like (plus you get to kill zombies.) What more could you want?

*****

If you enjoyed the course sign up for my newsletter and get a free HTML cheatsheet

Transcripts

1. Introduction: whether you write for a living or just bog here and they're known, some HTML and CSS will help you stand out in the post apocalyptic landscape we call the Internet. This course is going to expand your knowledge of HTML and CSS and should help you really kill zombies wherever they may appear. If you've never had any HTML CSS before, I recommend you go back and take a look at my course code is in the scary zombies html unsee assessed for writers, editors and beginners That's gonna really start you off on how to write tags. How to write C. S s those sorts of things. If you already know that or have some idea than please go forward on this course and, um, line away. Uh, my name is John Ray, and I'm a working Web developer and college professor has been building websites since the last millennium. Let's learn you some skills and be down some zombies 2. Zombie Tools (skip if you took "Code isn't as Scary as Zombies"): Hello. In this episode, we're gonna talk about what kind of tools you'll need in order to work with this course. And the truth is, you don't need a whole lot. There are lots of different things you can use, but here's some recommendations. So, first of all, Plain Text Editor, you can get this either from if you're on Windows, you can use note pad. Or if you happen to be on a Mac, you can also use a text edit, though you should use it in its plain text mode. All that said, while you can use a plain text editor, it's probably not the most ideal just does. It doesn't give you as much help as it could. So for that, I sort of recommend a color coding editor. So what it does, it's gonna 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 getting a different color than, say, content and some of those sort of things. So 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 air. So for those the happy spot errors, no pet plus plus, I believe, is available Cross platform. But it's definitely available on Windows. Adam is definitely available. Cross platform, another one brackets and then sublime Texas. Probably a little bit beyond the skill level. It is a great text editor, but in a very powerful text editor, probably more than you need, so I wouldn't buy it if you don't need to know. Pet Plus Plus Adam and brackets are all free to download and really anything. Anything else you use any other quoting tool for Asian LDCs that should work fine. Just about anything. Really think I'm gonna recommend those code pen die? Oh, this is a website that's available free to use. It's easy used. It automatically updates as you type, which is super helpful. As you're learning. It takes care of a lot of the fiddly stuff with just how to build a page and what to do for those sorts of things. It, ah will allow you just sort of 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 begin could bend down. So let's take a look at that. We're going to get getting set up how to create a free account. It's important to save your work mostly so you could go back to it and fix it, but also play with it. And, um, when you start working on your project, it's good to have it a 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. And let's go ahead and parts of zombies in the throat. All right, so this is the coat Penhall website down here in the bottom left, you're gonna have sign up. You click on that sign up with email. That process is pretty typical. I'm gonna log in just because I already have an account locking in. And all right now, once you're logged in, you can I already have where these air some pens that they think you might be interested in . But what we're gonna do is we're gonna go to explore. We're going to create, create and a pen and code pen. A pen is just this. It's a HTML CSS and JavaScript portion of the page that you can play with it. The jobs proportion is not something we need. So we're going. What I'm gonna do is to minimize that on were actually not gonna deal with CSS right now. We'll get to that a little later in the course, so I'm gonna minimize that as well. And so we just have some hte email. I'm just gonna right quick little thing here. Hello world, that is. It's a default way to start of start learning A programming language is the type Hello world and out put it to the screen. As you can tell, as I type, it came out so coping that I was just a really great tool to use really easy and hopefully will make your life a lot simpler as you try to follow along. So those are the tools. Thanks. Let's head to the next section 3. Undead Markup: In this video, we'll talk about ways markup content for display communication, sub scripts and superscripts definitions and abbreviations. Time the time element or time tag, pre formatted content and code. And the mighty small tag. The first thing we won't talk about his sub tag your subscript on, and it just does what you would expect to subscript to do just the baseline. Down 25%. He's a smaller text in the text around it. It's best used for footnotes, as I'm sure you're well used to. Also, for chemical formulas like H 20 etcetera or for numbering math variables such as Z one. Dizzy hoard, etcetera superscript creates superscript text much like you would expect with exponents. Just baseline up 50%. He's a smaller text size and its best used for exponents Z cube, for instance, and also something called superior lettering, which is a common abbreviation style in French and possibility languages. It is technically a different thing than superscript, but if you're implementing it in HTML, typically it is done with the S U P tagger. The subject also orginal numbers. So the 106th or third or fifth or whatever sometimes you'll need to mark up the definition ord abbreviation something you'll see. I'm sure. Commonly the D F N tag is the markup for a definition tag with the offend. You can also use the title attribute that sets the exact thing to find. He knows that a link from the DFM tag directly to a definition that might be further down on the page. I'm using something called Page fragments or anchor tags. We'll talk about that in a little bit. With the A B B R attack, you can set up abbreviations. Yes, A B B ar is an abbreviation for abbreviations. You could also do acronyms on a wide variety of those as well. Similar to the definition. You can also use the title attribute. But the thing about title attributes for both A B, B, R and D fn is that they're only useful the mouse users because no one else can see the tool tip. And they're only useful also to the subset of them that no to hover over the abbreviation with the mouse or know that abbreviation is used so they could even hover over with the mouse. Well, I recommend adding the title attribute to both your defense and a BB ers unless used them in conjunction, and then you only need it in a BB are that's within a d f n. I would be careful not to only use this, but to make sure that you, as is particularly good practice, to find the abbreviation or acronym when you first use it, just to make sure that everybody's on the same page and everybody knows what's going on the time element. It's used to mark up specific dates and times or durations of time. So, for instance, time of August 23rd duration of 12 hours, 37 minutes to make it a little bit easier for S E O and a little bit easier if the sun stand for screen readers, there's something called the daytime attributes. Formatting of This is very important because it has to be machine readable. So it has to comment a format that the machine is expecting or the computer is expecting. So, for instance, we have This is August 23rd 2025 at 17 152 minutes and 42 seconds. General, if you drop any piece of this, you can create a valid string such as 205 23 or 24 25 08 or 17 52 etcetera. Those are all valid date time values, the pre tag to use for code or for other pre formatted text. It's formatted in a mono spaced font. Usually carrier career new in white space is kept intact and it's not collapsed into a single base like it normally isn't. HTML. So if you have two spaces in place, it will show two spaces instead of just showing one space. The small tag, originally used to just makes text smaller, is now in HTML five used for things like legal disclaimers, copyright notices inside comments. Using this code is much more semantic, meaning that it provides more information to the browser on discrete years, etcetera. Then just having sort of a generic diverge in Eric Span that makes the text smaller. All right, so let's look at some life code. Okay, so here we're starting out with subscript, you can see zombie contagion could be obliterated subscript of one right here using sub tag or hear water. H t o also carry zombie blake or the some of the one is the horde Superscripts. We've got the Z three years he cubed. He was under fright. The superior lettering for madamoiselle. So members also I mean means, man, was those army or the orginal numbers for the 163? Also, we have definition an abbreviation. Here we have the death, then with the title of Zombie. So here, if I hover over it, it shows me what is in the title attribute. And then I just have the information beyond it. Whatever you want to put in, we have an abbreviation under Zombie, which is right up here. It's this information here. Um, and then in the human Resistance one, I put an abbreviation inside of D f n, um, and then only did a title on the abbreviation, not just the definition. And then again, put that right after it to make sure that everyone was on the same page. All right, so the time value so time. Uh, tag is right here. So just wraps around here. Doesn't make any actual changes to the underlying text. Doesn't make any formatting changes or anything like that. It just makes it more machine readable. So you're the daytime here of August 23rd 2025 at 17. 50 to 42 you can include more specific or could I could have also just left it at just the first part here. Okay, then we also have a duration. So if I'm just doing a duration, I don't need a date. I just have the amount times a 12 hour, 37 minutes date time, etcetera. Next, we have pre formatted text, and for this I played around a little bit with formatting it. So I grabbed the deviation. Just toe, have some text in there. And then I played around with spacing so that you know, I have all of this extra stuff and the white space stays intact. And that's a direct mirror of what is shown in the code. I still hear we have small tag you have. This is the regular sized text than actually did it. I did a small tag, which is this one here which is just a little bit smaller than it did A second small tag within the small bag just for fun. And yeah, I know that's weird, kind of fun, but it is a small town within a small tag. And so that made it even smaller. One level further down. Right? And then, of course, at the bottom. Here we have our footnote. Okay, that's it for our undead markup. Now we're talking about editing. 4. Editing Zombie Moans: this video. We're talking about editing, so we're talking about ways from mark up content to show, edit, immaterial. Talk about a delete tag for removing content, the site and daytime attributes to help explain when things happened and how they happened . Um, in the insert tag, which is gonna be when you add content again, Site in daytime attributes also gonna work for them and a marked tag, which highlights things and show you how you can add a Notre or question section. Just one way to do it. All right says I'll be editing sometimes need to show editing marks. I recommend you do this only if the edits need to be public, you know, with like a law or with by laws or something, something where it's really important that you can see the the edited history of it So legal. Document differences between two documents and to make sure you're transparent, the Dell tag puts a line through text just like straight through onside attributes allows it a reference of your L for why changes have been made for meeting minutes or possibly a legal document, etcetera, daytime attributes takes it probably formatted eight string and just gives the time or date when that particular change was made. And then there's also something called the S tag which is for strike through. Visually, these do the same thing. The difference, really is that Dell is used more signify editing, whereas S is a little bit more force content is no longer valid. The i n s er ends shows the text has been inserted again. You have the site after the same as the dough. So you are well referencing the reason for the change. Daytime attributes again. Same as Dell Samos. The time sharing doesn't eat the date and time of the change. Then there's the mark tag, which is a highlight. Mark highlights text puts a yellow background behind it should be used for content of relevance, not contented importance. Strong should be used for content of importance. But I think Mark could be used with editing just to make sure that you are or to point out things that maybe someone wants to look at. Make sure that they're correct again. For important. You want stronger be tag, preferably the strong tag market strong should not be used in the same content at the same time in the editing context, could be content that needs a second look or some special attention. Maybe the editor didn't know how to reword that sentence, etcetera. And I also wanted to come up with a way to write notes in because sometimes it's not enough to market. You also want to write a note of some sort, so there's not a standard way to do this. But I'll give you sort of an example with the CSS to make it look pretty. Then we will have an option of doing that that way, or if you find a better way, you're welcome to do that, too. The notice large enough, you can put it in the side element, but that's a block level elements. It doesn't work super well for in line notes. So the method I'm using is a SPAN tag and some CSS to make it look a little different than the rest of the content. So I'm just using a class of note and just wrapping the note in that particular class with this Pantech. All right, so let's look at some coat. So here I have the presence letter to New Yorkers after the zombie invasion. Some editing, hopefully before it goes out. So these are some Dell tags you'll see here. I also added a site operation and a date time to this particular Dell. I did not do sites throughout just this content just because it would get really overwhelming. I did hear ended for the insert here, and you probably should do it for every place that you're making changes. But in this case, I just didn't do it toe make things a little cleaner. But I did add date time to just about everything because in theory of the daytime would change a little bit every time it's changed. Assuming you're using seconds etcetera. How granular you wanna be is up to you and the requirements of your situation. We have delete here. We haven't insert. We have a mark some more, inserting some or deleting. Now, one thing that's going on here, and I did actually add some notes here. You're not seeing those yet because I just didn't display them, cause it's kind of confusing if you don't know what they are, they just sort of show up his regular text. And one thing that I don't like about the insert tag is that it underlines things. The reason I don't like that is because that is much more often used for links than for inserted text. It could confuse some people, so I did some CSS to help make things look clear. All right, so if we add these, I set it up. So that deletes our background of red inserts. Have a background of green. The marks are still yellow. And then I added a background of blue to the notes so you can see that there are notes added. Here, there's a lot of stuff deleted, probably to help save president defaces face. These are just some things that you might do to help make sure that communication is proper and that you're doing what you need to do to explain. It's too all right, that's it for editing. Now let's move on to HTML symbols 5. Symbolic Apocalypse: in this video, we're gonna talk about HTML symbols, angle, Brexit ampersand or both used to designate code. So when you actually need to show those you have to do is slightly different thing that's worrying about here. We'll talk about non breaking spaces, intellectual property marks, currency quotation marks and dashes and hyphens. So what's assemble? A lot of times you'll need to show an angle, bracket or other character that designates code, so you need to have some way of showing that it's not code. And the way that you do this through an HTML symbol still will start with an ampersand and with a semi colon. Many of the common ones have been given a more memorable name called external Entities. There are many more symbols that you can use than the ones that have memorable names, and they have a number code with them. For instance, here we have less than and greater than so it's gonna ampersand lt semicolon so lt for less than in great events going to be a member saying GT for greater than semi calling ampersand . Since thean percent not signifies the start of a national symbol, we need to do something different with it. So ampersand is actually winning ampersand a MP semi colon. Now some you'll see sometimes that an ampersand just by itself will also be picked up as an ampersand rather than as code for best compatibility. I'd recommend having the full ampersand MP semicolon, but there are context where it might be OK or might work to just have the ampersand non breaking space. This is used a lot for just if you're one of those people that has to have two spaces after a line. The only way to do that in HTML is to have a one regular space from one non breaking space . So two words that are joined by a non breaking space will not break across the line break so you can keep those two words together, no matter where the text falls. Elsa Prince white space from being collapsed into a single character, so typically you would add like six spaces to space. To things out, though, best spacing should be done with with CSS instead of with HD Male. But if you, for some reason need a few extra spaces, you can do the non breaking space. A couple times and that will come out as that number of space is, rather than collapsing the moment to a single space. And it looks like ampersand nbsp is for non breaking space. All right, so the in the realm of intellectual property, we have copyright. So we have a copyright symbol, which is ampersand copy. There's also a registered sign. Much is that percent Reg and the trademark symbol, which is percent trade suppressed, suppressed the euro is gonna be ampersand euro cent percent sent pound and pound yen ampersand again pretty self explanatory in those cases, so that when you're working with content management systems, there will be some field that don't handle quotation marks very well. The main reason that that happens is that the quotation mark can confuse the code and cause it to end before it's supposed to. So the way to get around that is, if you can still access the back end of the page, you can add quotation marks through external symbols, So ampersand Quat qu ot will work for dumb double quotes. You can also use these number codes to add smart quotes or for left and right and smart single one smart double. So this is smart. Single quote left. This is the smart single quote, right? This marked double quote left on the smart double quote. Right? There are three types of dashes in HTML. The first is the hyphen. That's the one on your keyboard. It's the shortest of the three, and it's used. Connect to related words were pretty familiar with this. And to put it in the HTML, you just use the keyboard key for n dashes and dashes slightly longer than a hyphen with the letter n. It's used for a range of numbers or connection between two words. Here will be some examples. Um, in html, you're gonna use ampersand and dash, or the number is 8 to 11 em dashes similar to an en dash. It's the width of a letter M, and it's the longest of the three. It's used to separate two related but separate clauses or set up a clause within a sentence . So being a zombie said, no one ever putting in HTML, you use the ampersand em dash or 82 12. All right, let's take a look at some code, so I just have examples here to show you how these all work. So we have less than showing up here properly. With greater than 10% GT ampersand showing up here we have the non breaking space is showing as a space. You can see there's actually two spaces there, the 2nd 1 being the non breaking space. We have the copyright symbol. We have the registered trademark registered mark. Then we have the trademark. We have euro cent pound yen. Dumb double quote smart single quote left. Smart single quote, right. Smart. Double quote left. Smart. Double quote. Right. So then we have our three dashes. We have the hyphen, the end ash and the em dash. Okay, that's operational symbols. Now we'll move onto fragments and other types of links. 6. Zombie Fragments & Other Links: this video we're gonna talk about linking to page fragments, email links, telephone links and SMS links. Fragments allow you to link to a portion of a page or a fragment of a page. Possible uses includes sub navigation connected terms to their definitions, connecting questions to their answers. Link at the very bottom of page, back up to the top of the page, and there are two parts to this. One is the fragment you're linking two, and the other is the link to that fragment fragment is defined by an idea expert on the HTML element. So whatever html element you want to use and then the link you use should have a hashtag and then the name of the I. D. So it's like within the page, the ideas are dead. You can just to hash tag undead back to them. You can also add it to the end of any euro. Assuming the idea exists in the page, the browser will scroll down to where you are. So, for instance, if we link here, that's probably not actually work, because I don't think I have a I d like that on the Undead Institute page. But if there were, that would be so. That's how you would do linking to a fragment if we need to link to an email address. We used the anchor tag just like we did before. But instead of Earl, we use mail to Colon and then the email address that we're trying to email. We'd also like to telephone numbers, which is particularly useful on mobile, where you can tap in number and call it. So, for instance, in this case, he would have TL colon and then the phone number. I believe it does need to be in that particular format of three numbers. Dash three numbers Dash four numbers for an American call. Of course, if you are doing internationally, probably want to do a plus one and then the rest the number just like a telephone link. You can also do an SMS link, and it basically works exactly the same except for SMS colon. Was it a todo? And it will send a text rather than I'm call Let's look at this and code. So here we have the mail to and then kill attended institute. You also have a telephone link of 805 5 Not a real phone number. Just FYI, here we have the SMS link. I mean, then, to demonstrate the fragment. What I have is a question here, and in theory, this would be more questions. And so if I want to click on this, it will take me further down on the page where the answer is. So it takes me all the way down and there's a little extra space there. Um, but then I can school all the way back up and see the page again. If I click it, I will again, of course, go all the way back down and scrolling back up. Okay, that's it for fragments. Next, we're gonna talk about multimedia. 7. Multimedia Hordes: First of all, we need to talk about the source element, which is the basis for some of these other elements. The picture element, which is sort of a fancier image tag about that. A second there's audio and video codex, or how audio video can be stored and who'd algorithms air used to compress them. And then we have the audio element and the video element. And finally, the iPhone Asian of five. Broad support for a variety of media on the backbones of these media supports is the source tag tells the browser where to look for the file on offer. Several options based on what? A codex, the particular college sports. All right, so the picture element laws just different images for different sizes of the screen. It also gives you a fallback of the browser doesn't happen to support the picture element, and this is the source element uses a source set attributes, but within audio and video, using just the source attributes. There's also another way to do this, using a source that attributes on the image tag itself. But I find this a little hard to wrap your mind around, and the benefits are comparatively small. At this stage, it can be a little bit more efficient. Give the browser a little bit more leeway and choosing the right image. But picture element also allows you to do different images of different sizes and to do what's called art directing, which allows you to put in different parts of an image that you might be interested in showing that the different sizes. So the picture element look, something like this. We have the source set here with the actual file that we're gonna be using. And so your media query here with men with the 40 M, as you may remember from the last class or from other classes you've taken, maybe one em is equal to the default font size for the website. Reason I'm associating The media query with the size of the font is that some people will make their font larger, and if we hook it into sort of the the font size, then our media queries will still work and also work fine when we get to the right pixel size. So it's just sort of a little bit more robust way to set our media query. Now our default is going to be this other image Now in the first image, the zombie has no top hat and the second image this fall back image. His army does have a top hat, so that's how we'll see the difference between the two images that finally, we have the slash picture. Now. If the browser didn't understand the picture element or the source element, it would just skip those two, and it would just show the image element there. So could it is a way of saving audio or video file a compression algorithm. There's also container files, which is the extension of the file, and hold a variety of different Codex. Not every browser supports every could IQ or even every container file, so some codex air open source, but not well supported. Some are widely supported burners as good a compressing the file while keeping the video quality high, etcetera. So they're different Codex that are used for different purposes at different times. All right, so let's talk about audio. The tag allows you to play audio directly on the page. You need to include the controls attribute to show the audio controls for the user. Otherwise nothing will actually be shown on the page itself. Eso the controls attribute is also a bully and attributes meaning that you don't have to say controls equals true or controls equals controls. You just have the word controls there, and it will work to add controls. So then we also have some source elements. So, for instance, here we have three different source elements, so so dot August obv orbis file. It usually is pretty small, but not always well supported. And for a is probably something you're a little bit more familiar with. It's It's the next the MP MPEG four specifications, which is fairly high quality. And we also have the MP three, which is probably a little bit lower quality but has very wide support. Lastly, we had that link to the MP three file. Just provide that fallback in case somebody's using a browser that does not support the audio or source of them. There's also the video tag, which works very similarly to the audio tag. It also needs the controls, attributes, video controls, and then we have some sources. Where then is a file format that gets the video very small. But as of this, according it really only works in chrome. Avi is the OG the aura, which is the video component of all gorgeous or the AWG specifications that empress or specifications. Then we have the MP four, and finally, we have a link for those browsers that don't support video or source. Lastly, we're gonna talk about the I frame element, which is used most often to embed videos. Technically, and I frame is displaying one webpage within another. When you are embedding a video in your page, you're basically saying, Take the YouTube page and stick it in this other page here. Here's an example of an eye frame quibble with height set, we have a source set the YouTube video. We have framed border and allow allows a bunch different options allowfullscreen and then the closing of the I pray. All right, let's take a look at these in code. First we have a picture element, same picture element I showed you earlier, and then if we change the size here, eventually she get talk about. So as we came down to be within 40 m, the page size being within 40 a. M, the top had appeared and if I go above that again, it drops out. So it's just a way of showing different images. Now this HR here is just a horizontal rule, and I'm just using it as a separator. So this is to the horizontal rule here. Here we have audio reigns, brains, brains were lovely audio because what's showing controls that showing here and showing these whatever of these files is most easily understood by the browser or the 1st 1 that's understood with browser it. We use that so within chrome, I think, and for A and M P three or both supported don't believe Ogg is, but it is supported in Firefox and maybe another browser. Next, we have video. So this is the video straight video tag on there is the video playing. It's just a quick video of these guys dancing, and as you can see here there controls are included. So we have our source with controls, different sources and then fall back if we need it, which in this case we don't. And then here is an eye frame. The same my friend we showed in the slides. So here it just is playing it through YouTube, which takes a little bit longer to thing. And then it shows some other videos. All right, that's it for multimedia hordes. Next up is HTML tables. 8. Smacking Zombies with an (HTML) Table: alright in this video we're talking about HTML tables. Talk about the table element, the caption element, the table row element and the table data element. Or for table cells. You have to be careful with tables. You do a great job of laying up data, the 10 to be horizontally oriented and in a world of responsive design, where your website works both on the giant desktop and on a tiny watch your phone being horizontally oriented can make it really hard for table to show properly on in both contexts. So just be careful with them. And be sure to only put really things that you need in there. Not really used tables for layout of actual page elements, but really only for actual data tables. Use many tags. You probably saw the top of this video first all way to have the table element. Then there's also it's table description, which is the caption table, row and then table data or sell. There's also table heading. So uh, which is th? Here's a table opening table tag. Then we have a caption table. Oh, zombies that we have starting a table row. Then we have a table data. First row zombie, one table data to our first rose. Don't be too. Then we're closing the table row. So that is the first row of our table. All right. And then we have our second row, second row for some B three second rose on before closing table row and then we closed table in a little bit. We'll get into the code and I'll show you what this actually looks like. All right? With headings. Similar sort of thing. We have opening table. We were caption started the table row and then we're gonna make the first row, the table headers. So we have left column zombies and right column zombies closing of the table row then and then we have our second row, which is the first row of actual data table data. First rose. I'll be one first rose on me, too. Close the table row. Close the tape. All right, let's look at that code and see what There's actually look like I did a little bit of CSS. Just make sure that things look right. I just collapsed the borders so that they didn't have spaces between them. And then I put a solid border around both the TDs and th is all right. So we have our table to just isn't anywhere. The table is we have our opening table tag and we have our caption, which is what appears right here. We have our first table rows. So we have our first element here. First rose on the one. Then we have our second table data zombie to right here. And then we have our second row. Here's second row and then we have second rose on the three right here. Second rose only three second rows on before. Second rose on before closed table row closed Now with headings. So look just about the same except thes th is or table headings are gonna by default show as bold. So we have opening table are caption We have started the table Row table header Left column Zombies calm zombies. We have table right Column Zombies Right Column zombies, Hoops too far. Right Column zombies And then we have our second row was your first raw data. So first rose on the one and our second table data right here. So first rose off to close the tr closed the table. That's it for tables. Next we're moving on to selections. Ends of CSS goodness 9. Zombie Selection: in this video, we're gonna be looking at descendant selectors pseudo classes and of those pseudo classes with first child last child and the child. And then we'll talk about zebra striping table. All right, So, descendant selectors, um, sometimes they're also called contextual selectors and they're basically a combination of an idea class and or own selectors separated by a space. So, for example, you could have this idea of hoard or with a class of zombie with an element of B. I mean, they doesn't have to be one i d one class one element. It could be two elements. It can be two classes on D Could be one i d and an element. It can be whatever combination you want, however many you want. And in this context, this one means only be tags that are within an element with the class of zombie and which is also in an element with an i d of hoard. All right, so given hoard zombie be we have an idea of hoard here we have a class izombie and be so this is selected. Since there's no B, this is not selected. Since this is not in a class of zombie. This is not selected. And although this is a class izombie with a B, it's not selected because it's not within the idea of court pseudo classes airways to select elements based upon aspects about them. So first child is going to select the first child of an out of their element, and pseudo classes were written with a colon between the selector and the student class. So you l l I colon First dash child being example. So given you o l I first child, we have a horde u l l I first child. So we have a u l Here we've been ally, so this is the first child of the UL. So this one selected. This is an ally within a UL, but it's not the first child, so it's not selected. Here we have another UL. The first child, however, is a B tag, so it's not selected. It's not an ally, and this, as an ally, is not the first child, so it's not selected. We'll take another look at this in the code to make sure it's clear. All right, last child is gonna work of Samos first child just go from the opposite direction. So given you l I last child, we have rul. We haven't Ally. This is the first child. It's not the last child, so it's not selected. But this ally is selected because it's the last child. Now, if you only had one ally element in here, then it would be both the first and the last child. So it will be selected as the only child it would be selected for both first shot and last travel. And here we have another UL. The B is the first child allies, the last child. So it is selected. Um, and the B tag, of course, is not. Then there's an child, and this is a function that could take number a keyword or formula. So, for instance, if we just put a seven it so it's like the seventh Child ul, but only if it's an ally. You can put it even which isn't select all even Children. E g 2468 Who do we appreciate? Zombies. Zombies. Here we have a function three in minus two so and has won three times. What is three minus two was one. When, and it's too. We have six minus two, which is four and then seven and 10 etcetera. So that would be a function that would select those particular elements. Now, zebra striping is when you make table rose alternate colors in order to make it easier for people to follow the row across ciggies and child. For this, with Princeton's TR Tra and the Child, Odd said in the background color to light Grey. That would be a great way to do this. All right, let's look at some code has the same examples from before. So we have here, given the hashtag hoard dot Zombie, What I've done here is just set colors on those that are selected help make it clear that they're selected or not. All right, so it should be color blue of be tag within a zombie within. Afford All right, so here we have a B tag says it's selected, but it's a B tag within a zombie within a horde. So it is blue, and none of these others are selected. Justus we talked about before. This one's not stuff because there's no be tag. This was not selected cause there's no zombie tag and this one's not selected because there's no court to tag. All right, First Child isn't the same code as we saw before on and here I'm just changing the color green for those that are selected first toward We Had It at an I D. Just make Make It clear. So first toward u l L I First Child. So we're in first toward ul Ally first child, this one selected and this one's the green one. This is the second child, so it's not selected. This is a U. L. Still within First Ward. But the first child is not an ally tag, so it's not selected. It's just bold. All right. Next we have last child. So last child here, last child selector. We have hash tag. Last word, ul ally, Last child. Everything's within the did last toward So we have a You owe an ally. It's the first child. It's not the last child, so it's not selected. And then we have an ally class of zombie. It's selected because it's the last child, so it's turned red. We have another UL. The first child's of be tag. The last child is no. I tax so it is also selected. So it is red. And then lastly, here we have a table that we're zebra striping. So we just said the table row with an end trout of odd. So choose 1st 3rd 5th 7th etcetera Background color of ah, just a slight gray. And here we have the opening table. We have the caption. The first row Zombie one Zombie to second rose on the threes on before Third rose only five , maybe six. Four throws on the Sevens on the 8/5 rose on the dines on 10 6 rows on the 11th of 12 etcetera, all the way down to Zombie 16. So, as you can see, the odd rows have a background. That's great. So we have this first, 3rd 5th and seventh once. All right, that's it for zombie selection. More next. Gonna talk about the zombie polka or rather, accordion menus 10. Zombie Polka: right in this video. We're talking about the details on it and the summary element and how you can create your own accordion menus. First of all, we have the details tag, which is a block level elements, and you'll put most of the content in that element. When were the summary tag which goes within the details? Tag should be a short as makes sense when rendered the summary elemental display with a triangle to its left when you click on it and the trying will open up and show the content within. All right, let's see what this looks like. So again, here we have details. Then we have the summary is the first child of details is the best practice. You should also only have one summary tag if you have multiple confused the browser, Um, and then we close the details tag here after this whole dear diary. So if we come down here, we see that the summary tag right here is what shown here. And if I click on this and then it shows me all of the content here, if I click on it again, it closes. I can click directly on the triangle or I can click on the text itself. And there you have your accordion menus. Let's see what happens if we put a 2nd 1 in here tree, too. All right. If we put a 2nd 1 in, it's just going to assume it's part of the content. All right, that's it for according menus. 11. Conclusion: thanks for coming along. The zombie killing adventure was great to have you along. I'd love to see any of the projects that you've done. So please feel free to share them with yourself with strength and share them with me and with classmates. And I love to see what you've done and what you've learned. So thanks. And I'll see you next class.