Intermediate HTML & CSS

Lists Exercise

Jen Kramer

Jen Kramer

AnnieCannons
Intermediate HTML & CSS

Check out a free preview of the full Intermediate HTML & CSS course

The "Lists Exercise" Lesson is part of the full, Intermediate HTML & CSS course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to add semantic markup to an ice cream recipe. Once the markup is added, CSS styling should be applied.

Preview
Close

Transcript from the "Lists Exercise" Lesson

[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?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now