Wrapping Up

[00:00:00]
>> Congratulations everyone, you managed to build three very different, but related websites for this band project, and you should be very proud of yourself. I'm sure there was a ton of learning that happened for you here along the way, it is amazing what CSS can do. And how we can approach all of these by thinking about centralized styling from the beginning.

[00:00:24]
This is where we started in the course, we started with a page, with no intention of will ever publishing it, but it's set up in introductory kind of style guide. We establish all of our colors, we establish type sizes and type phases, we establish basic styling for some of our HTML elements.

[00:00:43]
And it wound of saving us a ton of time later, because this is carried into all of our future designs. We then went on to design an easier layout here. This may be on par with what you already are designing as you came into the course, but maybe you haven't worked with CSS layers before or maybe you haven't worked with these kinds of style guides before.

[00:01:05]
So we wound up with a page that looks like this on desktop. And as we reduce the size of our browser window, we wound up putting our tour underneath, our main leading picture, and then wound up collapsing things even further on mobile. This was a straightforward project, but it was a great way to get started, and get thinking about how we could make interesting layouts with CSS.

[00:01:36]
We then moved on to a slightly more interesting page here. We have our tour page where we have these interesting sold out buttons with the diagonal line across them, as opposed to our buttons where we can still buy tickets for various shows. So, that is a little pattern that maybe you want to pull into some of your next designs.

[00:01:57]
That concept of that diagonal line when and the button is not clickable if something is no longer available, that of course also led into our other design here. For our medium-difficulty website, we wound up with our hamburger button here at the top of the page, and as we made our page larger, we had some exciting changes happen.

[00:02:21]
We skinned our audio player here, a working audio player. Underneath of that, we have these wacky reviews that went from four simple reviews with stars to an interesting layout with photos. And then when we went to desktop, all of that moved over here to the left hand column.

[00:02:45]
We also wound up with some styling for our boxes and our track list. And there's some patterns here that you may carry into your future work, and I would encourage you, particularly the interesting little bit that we did here with our reviews and their different layouts and that audio skinning.

[00:03:02]
That may be very helpful to you in another project. Finally, we went on to our most difficult website, and this one contained some really interesting elements to it. We wound up with our diamond based image layouts here on the page. We wound up with our very interesting track list presentation, where we can open and close that track list, and of course, our icons move around as well.

[00:03:30]
They go from right on the album cover to the edge of the album cover, all while maintaining our working audio player, our working hamburger button, and so forth. So, these are patterns that you may want to use in some of your next designs, I encourage you to think about the approach that I've presented here.

[00:03:50]
Start with good HTML, semantic HTML, well structured and well formed HTML, move on to generic CSS that carries over very easily into all kinds of other styling. And then and only then, later on just enough JavaScript In order to make your page function. In this case, we have JavaScript associated with our audio player, a tiny bit associated with our hamburger button, and some very simple JavaScript that just switches some classes on click.

[00:04:23]
And using CSS, we managed to lay out all of the rest of everything else that we needed. So our JavaScript wound up being very minimal for this and we didn't even need a framework in order to build it. So, I hope you carry away some of these lessons into your future work.

[00:04:38]
I have several classes at front end masters, if you love this course, you may wanna take a look at my course on Grids and Flexbox, where I go into much more detail about how grids and Flexbox work, if you haven't watched that already. I also have a course on Intermediate CSS, which drills into how selectors work, some of the selectors here have intrigued.

[00:05:01]
I'll talk about all of those in more detail, and I'll also talk about how the cascade and inheritance work as well. Thank you all so much for watching, and I hope to see you in another course soon.