Project Overview

[00:00:00]
>> Kevin Powell: So for this course, this is what we're gonna be building. It is a fictional website for a group called the Fungi Finders. So, there, it's a mushroom foraging group. You can see a screenshot of it right there, and we can explore a finished version of it. The link is in the course website.

[00:00:13]
And so if we dive into there, we can see the finished version that's coming up right here. We have the home page where we have some columns set up. A few images and things along the way there. We can jump over to the second page with a nice little transition through our pages.

[00:00:27]
Two columns, then we get this filtering thing here, so we can filter through the different types of mushrooms that we have with a nice little animation on there. And then lower down on this page, we have this bento-style layout for an FAQ. And, of course, all of this is responsive.

[00:00:43]
So if we turn on our responsive mode, we get different layouts and different sizes, all of it work fine. And we have a nice little transition that comes in for our mobile navigation there, as well. So we'll be looking at how we can do all of these different things as we go through this course.

[00:01:01]
And one thing that I'm focusing on a lot through doing and creating this course is not only showing you how to do the steps to make this one specific project cuz it's cool to make that, but I wanna make it as highly adaptable as possible. So that what you're taking, first of all, is easy to customize if you wanna make changes to this project.

[00:01:19]
But also so you can be taking pieces and the different things you're learning from this project and apply it to your future work as well.
>> Kevin Powell: One option you could have, if you don't like the idea of mushroom foraging, is to make this into a different topic as you're going through the course.

[00:01:34]
But I would actually recommend following along, because a big part of this course is to match the Figma design that we have. Cuz that's something we have to do in real life, matching our websites to designs that are provided to us. And then once you're finished with that, if you do wanna customize it or change it into something else, that's a really nice learning experience on how you can turn it into something new from what you already have in the first place.

[00:01:53]
In the course website right here, there is a link directly to the Figma file if you wanna go in through Figma. So if I dive into there, I am in Figma, and I'm logged into it because I have an account with them. And that means I can move around in here.

[00:02:06]
I can get everything I want. I can zoom in. I can grab the text directly from here. I can see the font sizes and everything else. If you're logged into Figma, you can get a lot of the information from here as well. If you don't have an account with them, you'll be able to see the designs, but you won't actually be able to get any of the information out of them.

[00:02:24]
It is free to create a Figma account, and you'll be able to use it that way to get all of this information. So you could set up an account if you want to. But if you'd prefer not to set up an account, all of the design assets, images of all of the different things, have all been exported, and you can download them all here.

[00:02:39]
So download assets, copy, and designs will give you a zip file. And if you open up the zip file, you'll find markdown files for page one and two, all the text, so you can just copy and paste from those instead. We have all the assets, so the images are provided to you.

[00:02:53]
And then there's all the colors in markdown, and the typography guides are there. And then the designs here are all as JPEGs as well. So if you prefer not using Figma, there's no issues there. You can get them all just by coming in, looking at the different JPEGs, and analyzing them that way, whatever you prefer along the way there.

[00:03:16]
So you just download the zip, unzip everything, and you're ready to go. Lastly, following along. I'd encourage you to follow along. Don't just copy and paste the code. There's quite a bit of code that we're gonna be doing that's directly in this course website. So if you get stuck along the way, or you want references, you can reference the site as you're going.

[00:03:33]
And if you get completely stuck along the way, there's also this repo that's right here. So if I open up that repo, there's a part-1 and a part-2. And if you go into the part-1, you'll see 04-start, 05-start, 06-start. That will give you the starting code for any of the sections that are in the course website.

[00:03:48]
So when we get to 04-start, Plan of Attack, you could use the 04 one, 05 would be the starting of this section right here. So if ever you're really stuck and you need some code to compare to, you can always compare it to the code that you find in there.

[00:04:00]
There might be small discrepancies between what's in the videos versus what's in that repo that's right there. But there'll be very small tweaks, just on some small differences I might be making as I code my way through the site compared to that version that I created that time around.