Advanced Layout Exercise

[00:00:00]
>> Well, at this point we have styled all of the individual components that make up our difficult design. And now it's time for you to give this a try. You're gonna put this all together into a single code pen and assemble everything in place, and so we have links here to the code pens that you're going to need.

[00:00:20]
We started with out small elements, remember all of our little boxes, and lightning bolts and that kind of thing we have our double border corners our navigation tweaks that we needed to make. Our cover icons, the track list that flies out for tablet, and the tablet version, of course contains also the mobile version, and the diamond images, with all of those kinds of things that are available to you.

[00:00:46]
And there's links to all of those code pens containing those bits of code. Here's my recommended approach for you as you do this. So first of all, I would recommend that you fork the double borders corners Code pen. Because in that code pen I've given you some commenting in the HTML as to where you should insert things like the track list and the diamonds and so on and so forth.

[00:01:09]
Then from the diamonds code pen, which is the last one that we developed, copy the CSS and the JavaScript from there and paste that into the double borders code pen. You can get rid of whatever was there before. Then go through and copy the appropriate HTML from the remaining code pens into that double border code pen that we started with, and then test.

[00:01:32]
You're going to find that the design should work for mobile and tablet, And there's probably going to be a few minor tweaks that you're gonna need to make in order to make it work perfectly. And to remind you what the final version is going to look like. We are looking for a mobile site that looks like this.

[00:01:54]
Remember we have our cover and our audio here. Remember we have our track list that's going to open. And then we're going to have our reviews, our shows announced box, and then our diamond layout there, followed by a couple of buttons and lightning bolts and so forth all the way down to the bottom.

[00:02:15]
When you look at this, at tablet dimensions, your site should look like this, you're gonna have your nav bar. Remember, you're going to have the ability to have your track list fly out. And then everything else is the same as you scroll on down here on the page, you'll have your reviews.

[00:02:33]
You'll have your shows the downspouts, your diamonds, and the other little elements there at the bottom of the page. Don't worry about the desktop layout that just yet we'll do that momentarily. So go ahead and give this a try and see if you can get this all assembled.

[00:02:53]
All right, well, I hope that all worked out for you. You should have a basically a working page here for the tablet now that we've assembled all of the parts, so make sure you're with here in code pen is no more. Then say 800 pixels, 900 pixels. That is where we want to test and make sure that this is working correctly.

[00:03:16]
When you get to desktop dimensions, you'll find that the page looks ridiculous. Don't worry about that right now, we are about to add our desktop breakpoint and fix that particular problem. Right now, we're only concerned with what's going on on tablet and mobile. So what I would recommend that you do as you've put together this entire page, make sure that all of your widgets are working here.

[00:03:39]
We have a functional navigation bar. We have functional audio is still working. Our track list still opens and closes the way it should. That's always our first check, make sure we haven't broken any of the JavaScript or that we remembered to copy it all over, that is an important thing to do.

[00:04:00]
Make sure that as we scroll down here, things look reasonable. So our diamonds have a little bit of a gap here. One of the things you may have to go back and do is in your diamond layout, you may need to add a little bit of margin on the top.

[00:04:14]
We set the diamond pane here to center on the page via margin zero auto, but you may need to change that to say like two REM auto in order to give you a little bit of space on the top, and the bottom. So there's that, everything else should be all in line here on mobile.

[00:04:33]
When you make it a little bit bigger, your track list should still fly out, should still be smooth, should still have your close button working, the audio should continue to work.

[00:04:44]
[MUSIC]

[00:04:45]
Your reviews should be working correctly. And remember we did some work on those, lightning bolts, so the correct lightning bolts should be on and the correct ones should be off. And again, we still have the new tour and the diamonds and so forth. They're all approximately the same width.

[00:05:00]
So, if you manage to get a page that looks pretty similar to that, you're doing great. And of course, the answer to that particular challenge is available in CodePen as well. You can always compare that with your code.