Album & Tracklist Exercise

[00:00:00]
>> Now we're going on the album and the tracklist. Yah, album is in tracklists. Okay, so let's go. We'll get started here on that. So open up your starting code pen, make sure you fork it to your account. And let's talk about this. So here in the HTML, here is what we're going to need to have up here.

[00:00:30]
Let's open up a new tab. This is what we're building now. We are going to build this sort of box that's up here on the top, new album. It was all a dream with the button. And then the line around it. And then after that, we have sort of this playlist kinda thing.

[00:00:50]
So what is our track number? What's our song name? And how long does it take to play? Okay, so this is the next part of the page that we're going to build. We will continue to add elements to this, make sense? All right, so here and starting in our HTML, that's always where we start, we never start with the CSS.

[00:01:11]
We have all of this lovely text. So let's talk about how to mark it up. And I wanna start with the tracklist down here at the bottom. What should we do to mark this tracklist up? What would be appropriate HTML for that?
>> List.
>> It could be a list.

[00:01:37]
If we were going to take this and put it in another piece of software, any software. Let's say a commonly used piece of software that you might use in an office environment, what might you put this in?
>> Table.
>> Yeah, table.
>> You might put it in an Excel, right?

[00:01:57]
In some kind of table or Google Sheets, yeah? So anything that you wind up putting in Excel or in Google Sheets, what should that be in the HTML?
>> A table.
>> An HTML table. How many of you are set to write an HTML table? Yeah? Okay, so I am gonna let you write that here in just a moment.

[00:02:19]
Let's also talk about while we're here, we have these words, new album, it was all a dream, order now. And let's look at this. So clearly there's a styling piece here. Anybody wanna make comments on how we might mark up this, new album, it was all a dream, order now?

[00:02:43]
What is the most important part of that box?
>> It was all a dream.
>> It was all a dream, right? The name of the album, what is sort of supporting information for that?
>> New album?
>> New album, right? And then order now is what?
>> A link that looks like a button.

[00:03:01]
>> That's our link. That looks like a button. So we've already got that styled. We know what that is, right? That's button primary. So if it's the most important thing here, How should we markup it was all a dream. It could be an H1, right? Some kind of heading depending on what else was there on the page.

[00:03:20]
Let's say for argument's sake because it is the only H1 on the page, we're going to call it h1. What should we use for markup for the new album then?
>> H2.
>> H2, whoa, yes. H2 is correct. Even though it goes 2 to 1, that is totally cool.

[00:03:45]
Your accessibility people will not get mad at you. You've identified the most important thing, it was all a dream. You've identified the second most important thing, new album. Order now, you've coded semantically as well because that's a link, even though it looks like a button, all right? And now how are we gonna get that border around all that?

[00:04:05]
>> Wrap it in a section or something.
>> Wrap it in a section, or a div, or something, right? Now I'd like you to mark up all of this stuff here. So we just talked about how to do it. Set up your section up here at the top for the new album, mark up your table.

[00:04:22]
So go on ahead and get that done now.