Where Can I Practise Front End Skills Like React?

You've been through tutorial hell, and now you are looking to practise your skills without spending more of your hard-earned cash. So how do you take these skills to the next level?

Tutorials create a safe environment, in which everything works. The unpredictability of self-directed projects will seem daunting, but this transition will transform your coding skills.

The following steps will help you break down the seemingly insurmountable task of building your own project.

Picking the project

The key to this stage is not to get hung up on which project you are going to complete. If you already have an idea for a project, don't spend too long here. Make sure to pick something you have the skills to start, even if you haven't planned it the whole way. Nothing will kill your motivation faster than having to look up every single step of your project.

Struggling for ideas? The classic tic-tac-toe, to-do list or movie search apps can all offer rich learning experiences. If these are too mainstream for you, Florin Pop's app-ideas has over 70,000 stars on GitHub. More specific to React, Colby Fayock has created 50 React Projects with this specific library in mind.

If all of this seems too overwhelming, Frontend Mentor has an excellent range of projects. Skill levels range from 'Easy' to 'Guru', and you will find many real-world examples to practise React.

Do not spend too long on this stage, as the value comes from stage two.

Start Building

Easier said than done. Even though you are working on this project by yourself, you do not have to feel alone. The purpose of building this project is not for you to do it in complete isolation.

Go as far as you can, then turn to the web for help. Do you need to set the project up? Go to the React Documentation and follow their basic set up guide. Do you need to implement a certain feature? Post on StackOverflow or see if someone has already solved your problem on there.

Make sure to set your expectations low at this stage. The potential for overwhelm is quite high, so you may want to start with static sites first, making them more dynamic over time. An example of this would be choosing a Frontend Mentor design, building out the static site and then adding some interactivity. Once you are comfortable with the basics, you could even add CRUD functionality and turn it into a full stack project.

When you reach your end goal for the project, move on.

Repeat

You've done it! It doesn't matter where 'it' is, but give yourself a pat on the back.

Move back to stage one and select a project that can help push your skills even further. As you continue this cycle, you can try to integrate new patterns over time, with your code quality improving each time.