Don't just learn to code, learn to create
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.
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
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.
- 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
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.
- 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
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.
- The user gets the data like temperature, humidity, wind speed, and pressure of the entered city.
Demo : skymate.now.sh
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.
- 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.
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.
⚡ Happy learning!
This article is great. Someone indicated it to me a few weeks ago and now I am subscribed in this site just because I wanted to comment here. Thanks for your tips, wish you could do more tutorials like the random quote one.