Top 10 Apps to Build When Learning Web Development

Learning Web Development is a process that requires writing code and building applications to solidify. Tutorials are an excellent way to get exposed to new concepts, but actually creating things is where the learning comes in.

The following are some ideas for fun and interesting apps to build while developing your skills.

1. Todo List

A todo list is one of the best apps to start with, because every application is in some sense a todo list. Learning how to input data, display it to the screen, and allow the user options like edit or delete will help your development tremendously. Make sure you know the ins and outs of how to build one of these from scratch, or at least have the code handy to reference later. This application is useful to learn about how vanilla JavaScript works, as well as UI libraries and frameworks like React, Vue, Angular, etc.

2. Movies, Games, Music, or Books Viewer

Building some sort of media viewer app is a fun and interesting project to add depth to your development skills. Find something you are passionate about, and start building. Each of these options allows you to include images, titles, descriptions, and other information. This is a great app to practice your CSS as well as your JavaScript skills. Bonus points if you can add page routing or animations to your app.

3. Restaurant Website

All restaurants nowadays need a website to promote their business. You can visit plenty of restaurant websites for inspiration on this one. Not only that, this is a great skill to have if you are interested in freelance. Try building this out in either HTML or with a library like React, Vue, Angular, etc. You can even find features from other websites to implement in your application. Pick a type of food you enjoy and source inspiration from restaurants on Google or Yelp.

4. Build a Game

Building a game is a great way to learn how user interfaces work. There are plenty of options here, and as long as you know the rules for the game you’re building, you should know what to do to get the job done. Some ideas for games include: quizzes, dice, tic tac toe, sudoku, snake, rock paper scissors, cards, and more! This one is especially fun if you enjoy games or having a nice finished product.

For an example, check out How to build a Memory Game from scratch using React!

5. Calculator

Building a calculator seems pretty straightforward, though there is a surprising amount of engineering that goes in to making a useful one. Check out google’s calculator for ideas and inspiration on how to build this. You can even style your calculator to look really cool with CSS!

6. Portfolio Website

If you’re trying to get a job as a developer, this one is a must have. It’s also a win-win because you can improve your development skills along the way. Find other developer/designer portfolios for inspiration on what to include. Bonus points here if you can setup a multi-page website or even add SEO/social media meta tags. This is a great way to show off any projects, blog posts, or videos you’ve made!

7. Use a Public API

There are plenty of freely available APIs to use on the web. Find one that interests you and start pulling in data to display to the screen. This is an excellent way to improve your web development skills, especially if you can find an API that you can send multiple types of requests too. There are APIs that fetch quotes, jokes, media info, images, large amounts of data, and more! Many APIs are available without authentication, although there are also a ton which will give you keys to connect to by signing up for free!

Check out Different Methods to Fetch Data with React to learn how to fetch API data using React.

8. Online Store

Building an online store is another great idea for practice because there are thousands of online stores you can draw inspiration from. You can even include all the product data in a JSON file for easy development. Try creating multiple pages and a sample checkout form for extra practice! If you’re interested in building an actual store, you can signup for Stripe and create a test checkout using their UI. This is another great option if you hope to do freelancing one day, because there is lot’s of demand for E-commerce websites. Bonus points if you can make your store SEO and social media friendly by server-side rendering meta tags!

9. Full-stack Application

If you have an idea for a website that requires storing data or authentication, definitely look into building a full-stack app. If you’re using JavaScript, NodeJS with Express is a great option here. Even just building a simple todo list that saves to a database is a big start and can help you learn a ton. Once you’ve got a simple full-stack application live, you can reference your code for any ideas you want to build out in the future. Highly recommend this one if you have the time or interest!

Learn more about how to build one with this How to Build a Full Stack MERN App (Node/React) tutorial!

10. Reddit Clone

While it might take forever to entirely clone reddit.com, each page on the site is available in a JSON format if you append /.json to the end of the URL. This is a great way to learn how to fetch data, parse through JSON, and display complex information to the screen. Try building out a subreddit and/or post, or even building an explorer of your own. You can either imitate the reddit site styles or customize your own reddit browser!