Learning to code is fun. It's exciting, isn't it? It gives you powers to create anything you want. But learning how to code is not enough, building real stuff is the real deal. The biggest mistake I did as a beginner was getting stuck in the tutorial hell. I was buying courses after courses, watching endless tutorials, and spending a lot of time collecting and consuming information. But what I did wrong was not to apply what I learned.

🛠 Don't just learn to code, learn to create

I learned that no amount of tutorials and books are gonna help me if I don't build something by myself. The amount of things I learned by creating my own projects, getting stuck, fixing bugs, finding solutions is nowhere compared to those tutorials. It's priceless.

So in this post, I am going to talk about what I learned by making a few simple projects while learning JavaScript and how you can start creating too.

1. RandomQuote

RandomQuote is a simple random programming quotes generator. This was the first thing I built while learning javascript. I learned some basics of Js and I wanted to implement everything I learned. So this simple project helped me understand concepts like strings, arrays, functions, event listeners, and template literals in JavaScript.

What I did was really simple. I stored a few quotes in an array, generated a random number, and then displayed a random quote every time the user clicks a button. But for me, being able to do something like that was ✨ magic. I wrote a blog explaining how you can make yours too. See here.

User Stories :

• The user gets a random programming quote on every click.

Demo : randomquot.now.sh

2. NotesWall

NotesWall is a simple sticky note app. Rather than making another todo app, I thought of making this notetaking app. Building this project was super fun and exciting. I made the design minimal and appealing.

The element of type color provides a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.

This way I made it possible for users to choose different colors for their notes. One small concept and it made a big difference.

User stories:

• The user can add a short note.
• For every note, the user can choose a different color.
• Users can delete a note.

Demo : noteswall.now.sh

3. Finman

Finman is a finance manager to manage all your income and expenses. I learned about design patterns while implementing this and how they are used to structure our code in an optimized way.

The important thing I learned was to always try to cover all the cases for the app. For ex. The input should always take some value or The amount input should take only numbers as input.

User stories:

• The user can add income or expenses.
• For every income/expense, the user has to add amount and description.
• The user gets the total income, expense, and balance amount.
• The user can delete income/expense.

Demo : finman.now.sh

4. Skymate

Skymate is a weather app that fetches real-time weather data of any location. I learned about APIs and how they work. For this project, I have used the ⛅ OpenWeather API. Reading the API docs and implementing it in the project was a great exercise. Also adding a loader until the data is fetched improves the user experience.

User stories:

• The user gets the data like temperature, humidity, wind speed, and pressure of the entered city.

Demo : skymate.now.sh

5. Apihouse

Apihouse is an interface for the public-apis repository where you can get a collective list of free APIs for use in software and web development.

This 📦 repository was so big and full of APIs and it was really difficult to find APIs in the whole readme file. But surprisingly it had its own API too. So to make my life a little easy and better I made this app for myself. If you are curious to know what happens when the frontend devs meet free APIs, read my blog here.

User stories:

• The user gets a list of public APIs based on the category chosen.

Improving user experience:

If you are displaying more than 10-15 cards or lists, having a top button ( to go on the top) will surely improve the user experience. Thanks to those who gave me some awesome feedback.

Demo : apihouse.now.sh

Note: All of these apps I created are mobile responsive.

⚡ Here are a few suggestions that worked for me :

• Don't stop because someone has already done it. You'll (probably) never come up with anything unique, but you can always create something better.
• Create something which is already there. Just clone it.
• Find something that someone has already built, Now think how you can make it better.
• Learn by building smaller projects.
• Share what you built, get feedback.
• While watching tutorials, don't just write code line by line after the instructor. Watch it carefully, Don't memorize, understand it, and then try writing code on your own.
• Build for yourself. Solve your own problems.

Final thoughts:

See the sole purpose of 🛠 building stuff is to learn. Learn better. You might not write the perfect code for the first time. Your first app might not be the best one. It will be challenging and frustrating for a while. But eventually, you will get better. Every master was once a beginner.

---

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!