Medium Design Site Assembly Exercise

[00:00:00]
>> Well, I am super excited because at this point in time, we have coded all of the elements we need to build our medium design. We have our header with our Hamburger button. We have the album cover and our working audio player. We have all those reviews and images, all that's all coded and we have our footer.

[00:00:21]
All of that is in place. And we also have of course our track list, all of the songs that come on that particular Magenta Lime album. So now it's up to you. It's time for you to go through and assemble that into a single document. So here's what I recommend.

[00:00:40]
There is a beginning code pen I've given you right here. If you open that up in a new tab, This is the Hamburger button work that we just finished, so there it is, all working for you, okay? And you'll see that I've given you links to the finished state of all of the other things we've assembled for the medium site.

[00:01:01]
The album cover with the track list, the reviews, and images, the new album, that little box that said new album thing. The footer and so what I'd like for you to do now copy over the HTML from those, assemble it all together, copy over the layers that contain the right CSS for all those things.

[00:01:20]
Assemble that all together in the code pen. And then I've mentioned a few other things, a few other tweaks you may wanna make along the way here to that particular design. So I'd like you to give that a try. Go through and see if you can assemble this webpage.

[00:01:36]
And then we'll go through the solution at the end. So remember, this is just what you'll need to do the mobile and tablet versions of the web page layout. And we'll do desktop separately. So just a couple of quick things here, a couple of high points to think about.

[00:02:00]
We copied, of course, all of our HTML over a little bit by little bit. Make sure it's inside of your wrapper, right? We have a wrapper that contains everything. So if we flatten up our HTML here, you have your wrapper, then you should have your header. You should have that cover, which is the thing that contains the audio.

[00:02:20]
You'll have your reviews, you'll have that album button that comes later, down here in the document, there it is. Then you'll have a section that has no class on it that has the table with our tracks in it. And then we have our footer down here at the bottom of the page.

[00:02:36]
So hopefully, you got something close to that. One of the things you'll notice is that when you make the screen particularly wide, then our reviews do exactly what we told them to do. Gosh, darn it, here, they are turning into the desktop version. Now, obviously, that's not where that's going to be when we get to the desktop layout version of the site, so you can just sort of ignore that for the moment.

[00:03:00]
If you have gotten it such that it looks like this, and we've got our tablet version here, and we've got our mobile version here with the reviews like this, then you did a fantastic job well done everybody, yay.
>> [APPLAUSE]
>> Awesome.