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
2. Movies, Games, Music, or Books Viewer
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!
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
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!