5 Resources to Cure Coding Block | The Best Resources to Practice Frontend and Full Stack Development
Tags: codenewbie, webdev, programming, javascript
Published: 2023-04-03 15:32:39

Building projects is one of the best ways to learn to code. Building projects helps convert the concepts we learn in tutorials into practical knowledge. But what do you do when you've reached *coder's block* and can't figure out what to create? If you find yourself unable to think of a project to work on, the resources below will have you coding in no time! <br><br>

### [1\. Frontend Mentor](https://www.frontendmentor.io/)

![Frontend Mentor home page. Improve your front-end coding skills by building real projects](https://cdn.hashnode.com/res/hashnode/image/upload/v1676337753428/dc6aa379-2910-4efd-b147-d3d68c506eb1.jpeg)

Frontend Mentor allows you to strengthen your frontend development skills by creating real-world projects. They provide a project brief and assets for each challenge so you can focus on the code - not the design. There are also tips for how you can challenge yourself with each project. Once you’re complete with your project, submit it for peer review and learn from other developers on the platform. There’s a Slack community where you can connect and learn from other developers. <br><br>

### [2\. DevChallenges](https://devchallenges.io/)

![Dev Challenges home page - Responsive web developer, front-end developer, and full-stack developer challenge paths](https://cdn.hashnode.com/res/hashnode/image/upload/v1676337841358/7adabe95-4e3e-422b-9420-85c9b5c444c1.jpeg)

Dev Challenges is a great resource for both frontend and full-stack developers. It includes three tracks: responsive web developer, frontend developer, and full stack developer. Each contains a variety of projects specific to that skill set.

For each project, you’re given different user stories to help guide your development. From there, it’s your choice to select your tools and where to start! Once you’re done with the project, submit your solution for peer review or join the Dev Challenges discord to discuss your projects. <br><br>

### [3\. Project Learn](https://projectlearn.io/)

![Project learn website homepage image](https://cdn.hashnode.com/res/hashnode/image/upload/v1676338023629/3f757a80-c3c9-4c20-ad32-b45324ba1797.jpeg)

Project Learn is a library full of web dev, mobile dev, game dev, and machine learning projects! Select projects by the type of development or by the programming language you would like to use. This library contains both videos and articles to guide you through creating over 100 different projects! <br><br>

### [4\. Frontend Practice](https://www.frontendpractice.com/)

![Frontend practice website homepage image](https://cdn.hashnode.com/res/hashnode/image/upload/v1676337996169/75b71d25-2fe4-4125-aabc-6b1b110b5e3b.jpeg)

Frontend Practice challenges developers to replicate websites from real companies. Replicating all (or parts) of these websites is a great way to practice the skill of bringing a web design to life. Use basic HTML, CSS, and JavaScript or your favorite frameworks to get build these sites and see how close you get to the original design.<br><br>

### [5\. JavaScript30](https://javascript30.com/)

![JavaScript 30 website homepage image](https://cdn.hashnode.com/res/hashnode/image/upload/v1676338074080/2d5d293e-1de4-46a2-a0e4-8b5f9c4ca903.jpeg)

JavaScript 30 helps developers learn JavaScript by completing 30 projects within 30 days. These projects will help you solidify your fundamental JavaScript knowledge and help you practice with CSS, integrating audio and video, and more! These projects don’t require frameworks or libraries, so they are truly beginner friendly! <br><br>

### 6\. ✨ A Bonus Tip

Just because you've completed the requirements for a project, don't stop! These are great projects to practice your creativity and add to your developer portfolio. Many of the frontend projects are shells. Remove the stub or dummy data and find a free, open-source API to integrate into your project to push it to the next level. Look for different ways to make these projects your own! <br><br>

{% embed https://youtu.be/m4W2lH6sbIg %}

---

Thank you for reading! I hope this article was informative or entertaining (or both)! If you liked this post, feel free to like and follow me on my socials around the web.

[![Bree's social media links](https://cdn.hashnode.com/res/hashnode/image/upload/v1676338992549/92bf0fa5-1b37-4d7a-a138-e5a7e6565188.png)](https://www.bytesofbree.com/hello)