YouTube Video Transcript

If you're trying to learn to code, do you ever feel like all the information that you're taking in just goes in one ear and out the other? Building a website doesn't seem so hard when you're following along with a tutorial, but when you sit yourself down to build your own project, you can't seem to remember how to do anything. What happened to all that knowledge that you had learned? Well, the thing is, learning coding skills is one thing, but knowing how to apply those skills to real world projects is a whole different beast. To get good at building projects, you need to get good at problem solving. Because every website can be divided up into lots of different problems that you need to solve in order to build everything. And the only way to get good at problem solving is to solve lots of problems by building a lot of projects. Now, if this sounds confusing and a little overwhelming, don't worry because in this video, I'm going to show you a system that you can follow step by step to practice building websites, get better at problem solving, and remember what you're learning along the way. Sound good? Let's get into it. Now, before jumping right into building projects, you do want to make sure that you have first learned the basics of web development because you need to learn those skills before you can actually use them. Now, if you're not sure where to start, check out my other video, which has a list of completely free resources to learn coding. I have it linked down in the description. All right, once you feel like you've gotten the basics down, it's time to start building. I would start with front-endmentor.io. They have a ton of front-end challenges that you can build yourself. I would start out with the newbie level ones because they're smaller and easier than the harder challenges, which tend to be full page website builds, but over time you can work your way up to the more difficult challenges. Now, when you're building a website, you will inevitably get stuck and not know how to do something, and that's totally okay. Don't beat yourself up about it, because this is the whole reason why building projects is so important. It's essentially testing your knowledge in a realworld setting. Getting stuck simply means that you've identified a gap in your knowledge, which is completely fixable. So, let me show you how to do just that with my list of what to do when you get stuck coding so that you'll actually remember the new stuff you're learning. Step one is figuring out how to research a solution. No matter what language or framework your problem deals with, try to start your search with official documentation whenever possible because that's going to be your most accurate source. Other resources that I use are Stack Overflow because odds are the problem you're facing has been experienced by somebody else and they may have found a fix or a YouTube video on the specific area that you're struggling with might show you the right way to implement something. Now, one word of warning about nonofficial resources. They can be lifesavers, but they also run the risk of not being completely accurate. This applies to code from Stack Overflow blogs as well as ChatGpt and other AI tools. It's totally fine to use these other sources, but if you do, I highly recommend cross referencing by looking at multiple other sources or the official docs when you can. And the more agreement you can find, the more likely that the solution that you found can be considered best practice. Now, once you've found some code that you think will fix your problem, I know that it can be incredibly tempting to just paste it in and move on if it works. But try not to do that, especially at these beginning stages. Instead of copying and pasting, I suggest that you manually type out the code and study the syntax to try to understand what it's doing. I know this may feel really slow and annoying to do, but the long-term goal here is for you to eventually be able to write this code from your own memory without any help. The next steps that I'm going to share with you are ones that I don't think too many people follow because they do take a little more work in the short term, but in the long term, they can cut literal hours off the time that you spend debugging. And I'm not exaggerating here. I've used both of these next two strategies myself, and they really helped me a lot. So, after you fix that bug, you're going to want to keep receipts. Now, let's say that it takes you two hours to finally fix the bug. Unfortunately, by the next time you encounter that same bug, the memory of how you fix it the first time is probably going to have faded by then, meaning that you'll need to spend another 2 hours doing the exact same research as before in order to fix it again. Doesn't sound very efficient, does it? And even worse, you're gonna have to fix that same bug many more times before that memory really sticks. That's a lot of hours spent doing the same thing. So to use your time more efficiently, you need a memory proxy where you can record the bug and the solution somewhere that you can easily retrieve the information in the future. This can be anything. It could be a paper notebook, which is what I actually used when I was first starting out, or it could be digital notes like Notion, Obsidian, or whatever tool you like to use. One thing I will add is that I think digital notes might be better because you can more quickly search through them to find what you're looking for. When you're making your notes, describe the bug that you initially encountered, then write down the solution that fixed it and why the solution is working. Then the next time you encounter that bug, you can simply refer to your notes to quickly get the solution. So while it may have taken you 10 minutes to initially write everything down, even just the second time around, you're already saving a lot of time. All right, so aside from taking notes, there's one more key that I think will really expedite your learning process even more. Practicing in a sandbox. While you're building and coding, you may notice that there are certain bugs that keep coming up that you can't quite remember how to fix and you keep having to look them up. These are your weak areas. So, in order to strengthen these areas, you need to take a deeper, more focused look at them. And the best way that you can do this is to take that one problem out of the bigger codebase and put it into a test website where you can focus on just that one thing. This is what's called a code sandbox. You can make a test website locally on your computer or you can use codepen.io, which is super handy because you can share public links to your code. Now, while you're taking a little time to do this focused practice, you can also read up on the docs or do other related reading to learn it better. And another thing I suggest is to make a note of this area that you're practicing and try to come back to it in a day or two to review the information and see if you remember it better. All right. Now that you know how to efficiently problem solve, you might be asking where to find projects to build. Like I mentioned earlier, Frontmentor is a great place to start because they have the designs already made for you. They do have a lot of free challenges, but you do need their paid pro membership in order to get access to the Figma design files as well as all of their premium challenges. If you want to check them out, you can get 10% off from a mentor pro with my coupon code just chant 10. I have it all linked down below. And if you want to see how a real web developer thinks and problem solves, you might like my second channel, Coder Coder Builds, where I build front-end mentor challenges and other projects step by step, and I explain my thought process along the way. I've been told by viewers that those videos are really helpful for beginners because it's almost like pair programming with a real senior developer. So, if you want to code along with me, you can check that out as well. All right, so I hope you found this video helpful. Thanks for watching. Good luck with your problem solving and we'll see you in the next one.