Cover Photo by Carolina Garcia Tavizon on Unsplash

"One becomes a beginner after 1,000 days of training. One becomes a master after 10,000 days of practice."

This is a quote by Mas Oyama that pretty much covers things up. Putting in the effort and hard work is the key to being a successful developer. If you want to become a web developer, JavaScript is one of the greatest programming languages to master - but learning JavaScript basics involves applying those abilities to build working applications. Need a little help to kick off your inspiration? Here's a list of five simple-yet-fun projects to get you started.

Project 1: A Portfolio Website

A portfolio website is one of the simplest tasks you can complete that is both helpful and enjoyable.

It's a great way, even for experienced programmers, to try out new frameworks and libraries. Here's my portfolio website, built with Angular and Firebase. In the end, you'll have something that could come in handy one day.

Together with the JavaScript ecosystem, you might also learn some other web-dev trends and concepts along the way. Static websites (generator), (headless) CMS, and Jamstack are probably the most notable ones. As a bonus, you'll also improve your HTML and CSS skills. You can either follow a basic tutorial or spice things up your own way. You can even try implementing a GraphQL API instead of a Restful one.

You can get started here.

You'll learn:

Basic HTML, CSS, and JS
Theming
Dynamic/static websites

Photo by Daniel Korpai on Unsplash

Project 2: A Website Change Detector With Node JS and Visualping

Although this sounds hard, it's quite simple to do. With the help of Visualping and webhooks, you can create a cool project.

You can create a Node.js back end and receive the webhook from Visualping, and send a message to your telegram chatbot. Read more about the movie-website change detector I created.

You'll learn:

Webhooks
Telegram chatbots
Platforms like Heroku (as you need to actually host the Node server)

Project 3: A News Aggregator

Perfect examples of such news aggregator websites are Echo JS and Hacker News (HN). You may even use HN's public API to create your own version of the HN reader. It's a little easier than building a news aggregator from scratch, and it's become so popular that it may be regarded as a replacement for an old-school to-do app.

You can get started with React and Pusher in this tutorial.

You'll learn:

Data fetching
List handling
Array and object manipulation
React and Pusher (if you opt for the above tutorial)

Project 4: Web Scraping/Automation With Puppeteer

Although this sounds complex, this is very fun and easy to work with. Once you know your way around, you can come up with endless fun and useful applications.

One of the applications I created was an automated bot to post stories on my newsfeed on Facebook. I wasn't interested in those paid schedulers. Hence, I decided to try my own version of a scheduler, and it worked really well.

You can start up with Puppeteer by following this tutorial.

You'll learn:

Web automation
Web scraping
How browsers work and store cookies

Photo by Austin Distel on Unsplash

Project 5: A Chat App

We're increasing the difficulty now. Making a chat app needs both front-end and back-end knowledge. Unless you wish to use peer-to-peer (P2P) networking, which takes even more expertise (WebRTC), you'll need to use Node.js, which introduces you to an entirely new universe.

Node.js, of course, comes with its own ecosystem, libraries, and frameworks. Express, the most popular framework, acts as a wrapper around the Node.js APIs. Furthermore, working with Node.js is impossible without first discovering npm, the world's largest package repository hosting millions of open-source Javascript libraries and tools.

To summarize, you will increase not just your front-end and Node.js abilities, but you will also learn about WebSockets. It's a protocol enabling real-time communication, which is essential in many applications. You'll also learn about Socket.IO, a well-known library that's closely related to anything real-time.

You can get started over here.

You'll learn: