Don't just learn to code, learn to create

Subscribe to my newsletter and never miss my upcoming articles

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

1randomquote.png

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

ReadMe Card

2. NotesWall

2noteswall.png 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 <input> 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

ReadMe Card

3. Finman

3finman.png

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.

Screenshot (335).png

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

ReadMe Card

4. Skymate

4skymate.png 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

ReadMe Card

5. Apihouse

5api.png

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.

5api2.png 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.

apiux.gif

Demo : apihouse.now.sh

ReadMe Card

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!

Hrithwik Bharadwaj's photo

Amazing and motivating article Rutik

Rutik Wankhade's photo

Thank You 😊

Efereyan Karen Simisola's photo

Thanks for this. I have always wanted to build an expense tracking app. My dad has been complaining of his expenses. This just gave me an idea. Thank you Rutik

Rutik Wankhade's photo

You're welcome. Glad I could help.

Jatin Rao's photo

This article is so awesome 🤩 Thanks for sharing Rutik!

Luiz Filipe da Silva's photo

This article is inspiring. Thanks for sharing!

Rutik Wankhade's photo

Thanks for reading ! 😊

vxhLOGS's photo

Find something someone has already built, now think how you can make it better.

This article feels reassuring with some great tips. Thanks for sharing!

Rutik Wankhade's photo

Thanks. I am glad you found it helpful. 😊

Bolaji Ayodeji's photo

This is really insightful as always Rutik. Thanks for sharing!

Tapas Adhikary's photo

Good one Rutik.. Creating something along side learning is like bookmarking your own learning. Totally agree!

Looking forward to see you continue to create awesome projects!