If you want to become a front-end developer, you’ve probably heard that one of the best ways to learn is to build things. And indeed, it’s the best single thing to do. But many people wonder what exactly to build that isn’t too complicated.
That’s why I created a little list of five projects to start building and truly learn. But first, I have some advice to give you:
Many beginners fall into the trap of finding ✨The Best Way™✨ to do something. It’s a trap because you get stuck trying to find that mythical best way and you never actually do anything. So, just start! If you make a mistake, in many cases fixing it is not a big deal.
In fact, mistakes are normal when you’re learning. After all, almost nobody does anything right the first time they try. Mistakes are also good in your learning journey! Here is where you truly learn.
Do these projects in small pieces if you find them too hard. Also, not completing a project is OK. You can finish it later or just move on to a different exercise. This is not school, there is no way to “fail” an exercise.
The projects
1. Pokédex
This is the simplest project of all four, perfect for Pokémon fans! You can practise the fetch function to make an HTTP request and handle async tasks.
Create an HTML form with a text input where the user can write either the name of a Pokémon or its number.
When the user submits the form (create a button to do it), use the fetch function to call the PokéAPI and get information about that Pokémon.
Once you get the data from the API, display in the screen some information about the selected Pokémon: its name, its abilities, its moves, etc.
2. Clone (parts of) a webpage you like
Find any website you like and try to replicate it (or parts of it). This project is good for having some practice with HTML and CSS.
I recommend to start from top to bottom: build the header first, then the main content, and then the footer.
If you want to clone some animations or actions that may require JavaScript, my recommendation is to do it only after you created the HTML and CSS.
3. Create a to-do app
This project is especially recommended for those learning frameworks such as React, Vue, or Svelte.
I like this project in particular because many libraries and frameworks use this as their first project. That means that you can see how other people do it.
It’s a great idea to check out how they tackle this exercise, but don’t just copy them blindly!
For this project, you should create an app that lets you create tasks, list them, and mark them as done. You could also add the option to edit and delete a task.
4. Tic-Tac-Toe
This project lets you practice vanilla JavaScript (which you should learn even if you plan to focus on React or other frameworks.)
Create an HTML grid with three rows and three columns. Each cell in the grid should have a number that acts as a “name” for that cell. The first row will have cells #1, #2, and #3. The second row contains the cells #4, #5, and #6. The third and last row has the cells #7, #8, and #9.
The first time you click on an empty cell, fill it with a nO on it. The second time, with an X. The third time, an O again, and so on.
Each time someone clicks on an empty cell and writes either an O or an X, you should check if there’s a winner. I recommend that you create a JavaScript array with all the 8 winning combinations, something like this:
const winningCombinations = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[1, 4, 7],
[2, 5, 8],
[3, 6, 9],
[1, 5, 9],
[3, 5, 7]
];After someone clicks on a cell, iterate over each combination and check if the all the cells have the same letter. If you can find it, the player with that letter won.