Lists Solution

[00:00:00]
>> All right, so let's take a look at the HTML markup for our recipe. Mark, did anyone share a CodePen in the chat? So here we got John's markup here, and he has got the h1 on the title of the page, which is fine. I said that you could start with h2 if you wanted, he started with h1, that's totally cool.

[00:00:26]
We've got our description lists going on here. He's put a div to start that and a /u here. That looks like maybe a little bit of an error. All right, moving on, and then we've got our image, we've got our ingredients, he's done that with an unordered list, okay?

[00:00:46]
So in other words, we're saying that those have to go in a certain order on the page. The preparation also has an ordered list. And then it looks like you probably just ran out of time there. Yeah, okay, so what was your reason that you marked up ingredients with an ordered list?

[00:01:14]
>> Just looking now, it could it be unordered.
>> It could be unordered, right? Yeah, it's probably unordered, because that's a list of ingredients. We may include them in that order. Often recipes write them in that order, but they don't have to go necessarily in that order. But the preparation is an ordered list, totally agree with that.

[00:01:33]
And by the way, I love the fact that you did your description list up here at the top, where we've got serve, 6 people, and the category is Philadelphia ice cream, and so forth. I think that that's fantastic, okay? So nicely done. Here we've got Bogdan. Okay, so Bogdan, he started with the h2 for the ice cream there.

[00:02:01]
And then he's got his description list also, he's marked that up with the div, probably with an eye to a little bit styling later. And then there are ingredients are in h3, we have our unordered list of ingredients. We have our preparation as an h3, exactly how we're gonna go about preparing that is in an ordered list.

[00:02:30]
And then we get down to our instructions for freezing. So he marked that as an h3 and then the needed equipment as an h4 with an unordered list after that. That would be one way of doing this for sure. Then we have, okay, figure with a blockquote, which is, by the way, I love figure with blockquote, I think that's awesome.

[00:02:57]
But I'm not quite sure why you put that there, possibly because you're quoting the instructions from the book maybe. I would probably think of this as an ordered list as well, because this is going to be a series of steps of how we go about to freeze this particular thing.

[00:03:18]
And then, I see what you were doing, you were thinking of the citation down here at the bottom. So we've got our citation for the name of the book, the cite element goes around that. And then we've got a photo down here on the bottom with its caption as well.

[00:03:40]
Okay, so that's a really fantastic job, nice job there, Bogdan. And we've got Carolina. This is the last one here, let's just take a quick peek at what she did. So Carolina here also started with a description list. Once you start looking for those description lists, man, they show up everywhere, it's just great.

[00:04:05]
So she's got her h2, she's got her description list. You missed the dl on the outside of that, not a big deal, but you need a dl to start that particular list, so that is missing there. Then we have our unordered list of ingredients, our ordered list of preparation.

[00:04:23]
And she also did an h4 plus the unordered list for the equipment that you're gonna need and then an ordered list for the way to do this. Okay, and, Yeah, this isn't quite what I had in mind for the citation, but we'll go through that in just a moment.

[00:04:45]
So there's never really always one right answer for how you mark things up, but this is how I went about doing it. So first of all, I put this all in an article element, because this is standalone content and this is a preview into the next section that we're going into.

[00:05:02]
This is a standalone content, we could pull this out, put it on an index card, and hand it around, and people won't know what it is. So it's syndicateable, so you could consider this to be an article. Then we have our ice cream, I have a div around this, that's for styling a little bit later, and we have our description list.

[00:05:20]
And then we have our h3, I have an unordered list of ingredients, an h3 for preparation with an ordered list of ingredients. So most people got those. And then for the instructions for freezing, I actually took a different approach here, I think the h4 with the unordered list is one possibility.

[00:05:42]
I did it this way with the description list again, where the needed equipment is the term, and the equipment is the definition. So they kinda go together, right, cuz here's the equipment that you need and here is the list of equipment. So they kinda go together that way.

[00:05:58]
And then an ordered list of instructions, and then the citation markup can be a little bit tricky. So again, we're previewing a little bit into what we're going into next, which are the big parts of the webpage. You can put a footer at the bottom of the article, so that's what I did here for the citation.

[00:06:17]
And then put a paragraph around the whole thing, and the cite element will go around the name of the book where this comes from, which is the ice creams, water ices, frozen puddings, blah, blah, blah. That is where that goes, but not including the name of the author.

[00:06:35]
And then we've also credited Ahmed for his picture down here on the bottom. So that is how I marked it up, and that's my justification for that. But again, I have a benefit of knowing where we're headed in this course. So I've thrown in a few elements here you might not be familiar with, we will be getting to those momentarily.

[00:06:54]
All right, so we're ready for the next part, which is, now that you've got your markup, if you don't have your markup, I will put this CodePen in the collection, which is on your website. If you go to the website and you go up here at the top where it says CodePen Collection, I am gonna put this in right now, I'm gonna say list-markup only.

[00:07:22]
Save that and I will add that to the collection here. And you can take a quick peek at that. And so now, I wanna give you, let's say, what, another 15 minutes or so to give you a crack at some of the CSS, sounds good? Okay, so I'll show you mine while people are thinking about whether they wanna share their CodePen or not.

[00:07:46]
So we'll flip out over here to my finished CodePen. So a few things, basically the way that I approach this type of process is exactly what we just walked through here. So we start with our content and we mark it up as semantically as possible. And then now, as we go into CSS, now is when we might add additional div elements or span elements if they're needed.

[00:08:12]
Because those are really designed to hold classes or JavaScript or whatever, they're not really there to convey any meaning about the webpage. So if you've to through one passes to mark it up, then the next passes to go through and think about the styling, then you wind up with something like this.

[00:08:29]
So what I've got going on here is I've added a div just to sort of show you where they are around the description list and the image. And the idea here is, I wanna put them side by side. So I'm gonna do that with Flexbox or Grid or something like that.

[00:08:44]
And to be able to wrangle those things in place, we need to have a div around the whole thing. So we have a div with the description list, we have a div with the image, and then that gives me the parent, the div, and the children, which would be the description list and the image.

[00:09:01]
And now, I can put them side by side. For the ingredients, as you see here, I put in a lovely little ice cream cone, because, that is just so cute, right, for the unordered list. For the ordered list, I used some of those emojis that have the numbers on them and I swapped those in for the various ordered list.

[00:09:23]
And then I put a color down there in the footer at the bottom. So you can, of course, see my CodePen in the course website if you take a look at that. And you can see exactly how I went about styling this. I don't think there's anything in here that's a curveball based on what I've gone through with you here before.

[00:09:43]
This is all pretty standard stuff, we went through the trek, like the marker for the little ice cream cone. We went through the tricks about the individual emoji, although it is worth showing you how I set that up. There's the freezing instructions. So we did the first child and child two and child three and child four, right, because each of those need to have a specific emoji associated with each one.

[00:10:07]
So that's the way I've set that up, and I think those are pretty much the high points of my CSS. But feel free to take a look at it, and if you have questions, let us know. Anybody else have a CodePen that they'd like to share for a look of the page?

[00:10:25]
How to get the emoji? If you're talking about how to pull them up, I've got on my Mac, it's Cmd, Ctrl +pace. It brings up my emoji window here. And if I clicked here in my CodePen, and then I click on the emoji, it'll show up there in my code.

[00:10:45]
But Windows people told me it was something else, what was that again, John, for-
>> The Wiindows button and then period.
>> The Windows button, plus the period in order to open up the same emoji window in Windows.