Lists Exercise

[00:00:00]
>> So I've talked for long enough, it is time now for you to put to use all of the things that we've just talked about. We've talked about our unordered, ordered, and description lists as well as menus. We've also talked about all kinds of different selectors, and so now I'm going to give you a page and invite you to mark it up, and do a little styling with it.

[00:00:20]
So if you take it look at the end of chapter two, and then you try it list challenge. We're gonna start here at the beginning code pen, and here is how you should approach this. So, I have given you here a recipe for ice cream that comes from a book from a hundred years ago.

[00:00:40]
And you'll see here you'll have to read the content and think about what kind of markup would go with this. And we have an image that's here in place, where we have preparation instructions, we have instructions for freezing, and so forth. And then down at the bottom we have a citation for where we got the recipe and where we got the image.

[00:01:02]
So this is two steps, here's how you approach this kinda problems. So the first thing I want you to do, is to run through and then mark it up as semantically as you can, don't worry about how it looks, just doesn't matter. Think about what you wanna convey for that meaning and assume that there's an h1 elsewhere on the page for your site identity.

[00:01:23]
In other words you're gonna start your headings numbering from h2, because usually the h1 is gonna be located somewhere else. Once you've got your markup in place and you're happy with it, okay, so in other words you have to read that content, you have to think hard about the markup, then you're gonna go on to your CSS styling.

[00:01:42]
And what I recommend is, if you take that image and you put it through a site like Adobe Color, and if you go to that URL there in the comment, it'll give you some colors to work with. So if you are color challenged as I am, usually if you start from a great image it'll generate a color palette for you.

[00:02:00]
And then you can choose some Google fonts or use standard fonts, and style up the rest of the page to make it look attractive by whatever your definition is. I'm gonna leave it very open-ended, and not ask you to recreate something. Let's break it into two parts. Let's give you 15 minutes, to work on the markup, okay?

[00:02:20]
So just focus on the markup for this first 15 minutes. And then I'll come back and we'll go through the markup answer. And then I'll give you a little bit more time to work on some styling, sound good?