You can watch the video for this post on YouTube.
In the previous article that you can find here, we talked about 5 tips that you could follow in order to stay motivated while learning a new skill, like coding. The very first key point was "Practice what you have learned" as this is the single best way to be able to retain what you have learned to then easily apply it as you move along to more advanced concepts. We even ended the video with a twist to the old saying: "Practice makes fluent".
Now, you may even agree with all that but you still raise a valid question: "How do I get ideas on what to build with the skills I have just learned?".
Today, we will be introducing 5 different app ideas to challenge you and to hone in your newly gained skills. We will be going from an easy level of difficulty to a higher level, in that order, so feel free to skip some of them if you are already comfortable with some more basic concepts.
These app ideas were adapted from a great online list put together by Florin Pop on GitHub. In there, you can find a long list of app ideas bundled by the level of knowledge or interest of the developer. On each individual app, you will find a description of the project, applicable constraints for development and user stories to guide you through your development). Some of them also have example apps created by the community. This is incredible and I strongly recommend that you complete as many of them as you can.
I selected 5 specific ideas that I feel are the best to improve your skills, as they provide a good balance of being challenging and with common real-life applications. So let's take a look at them!
In #1 we have a simple and good introduction to the manipulation of a reactive state, with a Border radius preview app. You should be able to listen to several inputs change and render their effect on an HTML element's
border-radius CCS property. See the project's specification here.
Next, up, we have a slightly more difficult challenge, but still within the beginner tier, which is a Countdown timer. This challenge will introduce you to some new browser APIs, like setInterval. The goal is to make use of interval functions to manipulate the
DOMelements containing the number and update them accordingly. See the project's specification here.
The last project in our beginner tier will test your skills for external APIs integration. It is a well-known, Weather App. But try to make yours stand out, give it something unique. See the project's specification here.
Now going on to tier 2, Intermediate level. This project is extremely valuable as it will solidify many of the previous project's knowledge but also make you practice a very important aspect of programming, which are regular expressions. See the project's specification here.
The last project, and the only one on the Advanced tier, is a Realtime Chat App. This is a great project because it will involve many new concepts, like sockets and real-time databases, but it is also one of the most well-documented apps that you can find on the web, so if you get stuck, there is plenty of help out there to reach your final destination.See the project's specification here.
And there you have it, these were the 5 projects that I recommend for you to start practicing your skills and improving yourself to eventually land that dream job! There are many more on that GitHub list and I strongly recommend you to practice by doing as many as you can, whenever you have time. Remember, the best method to improve, is by consistently applying the skills you have acquired.