2.2 A Quick Look at the Theme We’ll Build

All right now, that our theme file is ready to go, let's have a look at the theme design, and I took the liberty of designing this in sketch just so we'd have an easier time building it. Let's take a look at what we have, and we'll take it from there. So we start with an intro slide, this presentation is for maybe a course or a webinar, but it can be applied to a variety of topics and presentations. Here we just have the title, a short description, and the host. And here at the bottom we have a footer, and then we move on to the Curriculum or the thing that will be covered in the presentation, we have a list of topics here. And then for each topic or lesson we have an intro, that looks like this. It shows the topics or the points that will be covered in that lesson, and then we move onto the actual lesson content where we have a couple of slide types. This is one of the types with a simple title and description, this is title description and a little bit of code. This is with an image, and then some additional content for that image, and this is with a list of points and some code. Once a lesson finishes, we have a lesson Outro, where it says, in the next lesson you will learn this and that. And also we have an updated curriculum list here, the check mark symbolizes the lesson that we just finished, this one is for the upcoming lesson. And then once everything is done, we have the presentation outro with just a thank you message and illustration here, and a few links to social media. And now this is a presentation, right, so it's not meant to be interacted with by the viewers, so just keep that in mind. This is basically it, all the assets that I used to design this are linked in this lesson, and the upcoming lessons like all the fonts that I used. This color scheme I got from Adobe colors, the imagery that I used here I got from Umbado elements. So everything is linked, just check out the lesson notes in you'll find them all there. Now based on this sketch design, I went ahead and wrote the mark up, and the mark up looks something like this. I won't go into the syntax overview of JS because that's not what this course is about. If you wanna learn about that, then check out the introduction course, but I basically created a slide for every art board you saw in sketch. And looking at these back in the browser, it looks like this, all right, I'm using fragments here to display these elements incrementally. All right so, it looks very simple now, in fact, because we are using a very simple theme, we are using one of the default themes. So, we have a little bit of work to get it from this point to this point, but we're gonna take it slowly, step by step. Doing one thing at a time and we'll start in the next lesson with typography, see you there.