Everybody knows that the best way to build your JavaScript skills is to build projects.
In this post, we'll explore 7 project ideas that you can start, today ๐
1. Virtual Keyboard
This project involves building a pop-up keyboard in the browser. Topics covered:
- event handling
- building HTML elements
- conditional logic
2. Reaction Game
Test your reaction skills with this reaction game. When the background colour of the <div>
changes, you must click as quickly as you can! Topics covered:
- usage of
setTimeout()
- array management
- DOM interaction
3. Single Page App
There's something satisfying about building a single page application. Maybe it's the absence of a browser's navigation bar, or maybe it's the support for desktop shortcuts.
Either way, it's a great project to build a wide variety of JavaScript skills. Topics covered:
- classes
- regular expressions
- building HTML elements
4. Meme Generator
Apologies for the thumbnail on this video, but if you're keen to learn the HTML5 canvas, this project is one to consider. Topics covered:
- drawing on HTML5 canvas
- base 64 data URLs
- event handling
5. Kanban Board
This is one of my all time favourite JavaScript projects. The best part about it is that you can use it for your own personal task management. Topics covered:
- drag and drop API
- local storage
- building HTML elements
6. REST API with Express.js
Once you build an API yourself, you gain a deeper understanding of how they work. This gives you confidence when using a third-party API in your own projects. Topics covered:
- node
- JSON
- error handling
7. Notes App
Similar to the Kanban Board project, this one is great because you can use it yourself. It also covers a wide range of areas to learn. Topics covered:
- building HTML elements
- local storage
- managing state
And that's it! I hope you can try at least one of these projects over the next few days. If I were to recommend one, it would certainly be the [Kanban Board] (youtu.be/ijQ6dCughW8) ๐
JavaScript DOM Crash Course
You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below ๐
udemy.com/course/the-ultimate-javascript-do..
Happy coding! ๐