 Hi there, my friend and friends, one of the hardest things to do when you're learning HTML CSS and JavaScript is to find projects to actually do them, because when you're just trying to work on stuff from scratch, it can be really hard to come up with ideas or know what to do. And it's really easy to get stuck on that side of things when you just want to get to coding, you want to be building stuff and practicing all these things that you're learning. So today, we're going to be doing that by taking a look at a whole bunch of really useful resources. I'm saying five, but there's actually more than five, sort of five categories, I guess, of resources to help you be able to practice everything you're learning. Before we get to that though, just in case you are new here, my name is Kevin and here on my channel, I help you fall madly deeply in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And definitely if you are feeling frustrated and you're not building up enough skills, practicing is where you need to do it. So let's jump on over to these resources and see what we can get, what we can practice on. And this is the first one, which is a relatively new project by a Florin pop called I code this and it's daily UI little challenges. And the current one is a little bit more complex, but some of them are simpler things that are a little bit smaller. And there's all sorts of different things that are in between as well. And as I said, they're daily challenges, there's a new one every single day, you can build it for free. And let's say you wanted to start the most recent challenge, it's all a built in code editor that's fully functional right here. It's a lot like VS code basically built into the browser, and you just try and build what what the image was. So they show you what you're trying to build. And then you try and do it here, you can set a timer so you know how long it takes you to accomplish different things. And you can also take a look, let's go back, you can view all the different submissions that people have done. And you'll notice they look often a little bit different. The idea isn't pixel perfection, but just trying to get things that work. Some of them will have JavaScript involved, some of them will just be the layout. And people do all sorts of unique twists on it, which can be a lot of fun. And as you can see, you can see the different submissions that are in there. Now, if I click on one of these, I can just see what the finished result is. But if I finish it and I submit my own code, I can then also see the code of these other people too. So I can, if I see one of them that's really cool or when I compare how they did something to how I did something, you can do that once you've submitted your own challenge. Now, you might have noticed while I was going through there, there were some pro tags on people. So it is completely free to do the daily challenges. But if you do want to be able to go back in through previous challenges, like I was looking at before, you do need to have a paid account. It is a one-time fee. And not only then do you get access to the previous challenges, but you also get access to some pro challenges or some bigger projects that you can work on as well. And I've been talking with Lauren. He has a lot more incoming on what he's doing here. They've added streaks. And I think there's more stuff on the way as well. But I just think it's a really fun one for these quick little UI things. You can sort of practice what you're learning, whether you want to do JavaScript or not. I think there's even a way to sort now by difficulty level as well. So depending on how far in your journey you are, you can do that too. Now, the next one up is very similar, but a little bit different, which is front-end mentor. You've been following me for a while. You've probably seen me build out a couple of these where just like that they offer challenges. This is a bit more like the pro challenges we saw on iCode this where it's more fully fledged things. Some of them, there's full pages, but there are also UI elements that are in here as well. Again, you see some of these are free and some of them are premium. In general, the premium ones are larger projects and the free ones are smaller projects. And also if you have the premium, then you also get access to the original design files in Figma or Sketch. Whereas if you're on a free account, you only get a JPEG. I've built out a few of these just based on the JPEG. You don't need the Figma file, though it definitely on the bigger projects can be handy to have. There's lots and lots of challenges here. It's been around for a while and they're always adding new ones. So I would definitely recommend checking them out if you haven't already. Next up is one, if you want something, it's a little bit more real world, I guess. And I've also mentioned front-end practice before. So it's frontendpractice.com and it's just curated list of real websites to try and build. So if I come to here, you can see they have level one, level two, level three for different difficulty levels. And it's just, as I said, a curated list of sites. And if you click on one of them, they give you sort of the color palette, some different resource links that could help you out and you get what you're going to try to build. They always link to the real one as well. Now, sometimes the actual website has updated a little bit. So it might look a little bit differently, but then you can see the responsiveness of it and everything and get an idea of how it should work. And of course, these are real actual projects. So it's a bit, you know, you're building something that is perhaps a little bit more real world than a smaller UI component. But it definitely would probably take a little bit longer to put together as well. But they do offer the live site and, you know, you can go from there and try to build stuff out. And it's a fun thing to actually build real world projects as well. And then you can also look at their site and do like an inspect and see how they did something. If you're stuck, which can occasionally come in handy, though these days with all the frameworks and everything, sometimes it can be a bit of a mess when you're looking in there, but it might give you some insight into how they did some things. Another one that you've definitely seen me do, which is going in the opposite direction from real world, which is cssbattle.dev. And cssbattle.dev is fun because you're trying to build these very unrealistic things that would probably be better suited for SPGs. But if we come into the battles here, there's a whole ton of different battles you can go through. You're trying to build out these different things and actually just really fast. You might notice if you haven't been here in a while, they've recently redone their site and it's looking pretty sharp and they've added a few new features to it. But basically you're trying to build whatever you see here. And so if I wanted to do it, I click on that one. You have a starting thing on one side, the finished one on the other, and you just try and match it as close as you can. It's not real-world realistic, but the nice thing with it is you have to sort of flex your creativity skills on how can I build something like that with CSS. And in this case, this one looks really easy, a little bit harder, a little bit harder. And then some of them can actually get quite complex in what you're trying to build. And you can learn a lot about gradients and box shadows and sort of the power of them. And if you really want, you can go for high scores. I never do that because I know I can never get to the really high scores because it's about the fewest characters possible and it sort of gets hacky and how you're going to be writing things. But that option is there. And the new thing they have added is also daily target. And so it's a new challenge that comes out every single day. And then you can just follow along. I haven't been doing these ones because you can see I'm at a zero-day streak. But if you're looking for just like a quick little CSS challenge every day, it could be a fun way to start your day. Now, maybe you're not there and you're not fully into trying to build stuff yet. You're still just trying to familiarize yourself a little bit more with CSS. But you're looking to get that repetition in. Then this last, I'm going to call it resource, but it's actually going to be five separate resources is CSS games. And so this first one is CSS diner, where I don't know what level I'm on, but I'm pretty sure I'm past the original. But you have to try and select things. So they teach you about pseudo classes. There we go. I'm on level 15, which is just behind my head. But this is level 15. But can I go to level one? Let's go to level one. Restart with your element selectors. And then after the element selectors, you move on to ID selectors and different combinators. And there's your sort of work your way down through end of child and only child, but you're doing it all through a game. And here I'll move over to here so we can see it a little cleaner. So the different types of challenge are the different types of combinators and selectors that you're learning. And it's through game form. So it's kind of fun. You can see what you're selecting along the way as you do all of these. And so it can be a nice way just to learn through repetition before you're working on actual real world projects as you're learning all of these things. And then the next one here is flex box froggy, which is a lot of fun. It's about moving things around with flex box and using the different flex things. So for example, I've already done this one, but I think it starts with nothing here. Right. So if I hit my frog is here and I have to find out how to get them onto the tadpole. So I want to do a that was a justify justify content flex and and it moves my frog over to the other side and then I can go to the next level. And now I'm doing it with the two of them. Once again, with justify content, I want to try and get them in there. Once again, this isn't real world, but it's just about getting the repetition on how these different flex box properties work. And you're going to be writing them over and over and over again. And it sort of just helps everything sink in into how these flex box properties are working. And if you don't like frogs, you can also do it with flex box zombies instead, where it's a really cool game. It's done by mastery games. And we can begin here. And it sort of like has the storyline going on with it and everything else. It's really fun just to go through. So it's a little bit more in depth instead of just like these little frogs. But then eventually, once you get through the story parts of it, you get attacked by zombies. And so you're using flex box to be able to. So he wants me to do a display flex now. So I get that. And then you can see my my thing is up. Anyway, right now there's no zombies coming yet. But once you get through this beginning stage, the zombies are coming and you have to position yourself correctly to be able to shoot them. And it's sort of again, a fun way to go through the repetition instead of it just being, I'm typing this boring stuff over and over again. And of course, I'm talking about flex box now, but there's a couple of grid games as well. There's grid garden, which is about building stuff through grid. And so you can see I've already done some of these levels. Same type of idea as flex box froggy by the same creator. But in this case, it's with grid and growing garden and getting the water into the right places and doing various things like that. And then by the same people who made flex box zombies, we have grid critters. The one thing with grid critters is it is a paid product. You might be able to get access to some of the levels for free. I'm not entirely sure, but maybe start with the flex box zombies. And if you really like it, it might be worth checking this one out because honestly, flex box zombies is absolutely incredible. So it might be something that you would be interested in, but there's free options that are out there as well. And if you are looking at leveling up, but you're looking at leveling up your skills more than just simply practicing what you've been learning, just in case you didn't know, I do have a course called CSS demystified. And really its aim is to help people who have already learned the foundations of CSS. You've been doing it for a while, but you feel a little bit stuck or like you're not making the most of it, or you just keep running into problems with what you're doing. So what we do is reinforce all of those beginner concepts that we've learned and really understand what the implications of them are instead of just covering them really quickly. And then I go into some of the foundational stuff that isn't often talked about, things like containing blocks and formatting contexts that are really foundational to how CSS actually works, but that don't really get a lot of attention. And of course we're doing all of this by doing challenges and full project builds and stuff and talking about things like naming our classes and just getting organized with our CSS and getting you from that, like I've been doing it for a while, but I feel a little bit stuck and trying to unlock CSS as much as possible. So by the end of it, you're feeling really confident when you are writing it. So that is at CSSDemystified.com, the link for it is just down below, as well as links to all of these other resources as well. So I hope some of these do help you out. If you'd like to see a little bit of CSS battle in action or some front and mentor projects being built out, there are some playlists that are right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome who are TD, LLD, Bailey, Andrew James, and Rico, Michael, Simon, Tim, and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.