Are you tired of blogs telling you to make a to-do app, weather app or personal blog? They're great beginner Web Dev projects, but they've been made a million times.
In this article, I will compile 15 creative, Web Dev project ideas that you can finish in 1 or 2 weekends, and that haven't been made and talked about on literally every Web Dev blog already. Now of course, some of these projects will require a bit of backend 'cause you can't go very far in terms of Web Dev without using a bit of backend.

1. An r/place Inspired Platform

This is one that I want to make in the near future myself. Basically, for those of you unfamiliar with r/place, it was basically a sort of game on reddit where users would have a shared canvas and they would try to draw things on the canvas. What made the game challenging is that, since it was played by 10,000s of players at any given time, it was hard to take a chunk of the canvas and draw something significant without it getting destroyed like some people's vain attempt at drawing and maintaining the Canadien flag.

You can make a Web App that works similar to r/place that will give users the ability to place tiles on a large canvas, as well as limiting their power over the canvas by allowing them to place a tile once every, say, 5 or 10 mins. r/place is very general and has no particular theme. I mean, users could draw flags but most users chose to draw random shit lmao😂.
Unlike r/place, you can make your game themed around programming, music, movies, video games and just about anything else!

Skillset demonstrated:

1. UI/UX
2. Handling user generated content

2. A Smart Music Player

What if you tried making a music player that doesn't just let you play tracks, but also makes personalized mixes like Spotify? In addition to this you can make it have unique features like for example, making a "bangers" mix that compiles the tracks that you've cranked up your volume for.

Skillset demonstrated:

1. UI/UX
2. User data analysis
3. Audio event handling(pause, rewind, skip, e.t.c)

3. A Tweet Agregator

This is one that I've made as a weekend project myself. The idea is that you make a Web App that curates tweets and displays them on a daily basis using the twitter API. You can make one that, say, curates the latest programming tweets from big accounts in the niche.

Skillset demonstrated:

1. Working with APIs
2. Organizing and displaying data fetched from the API

4. A Live Data Visualization Web App

This is one of the easier projects on this list, yet one that is very versatile. You can make a Web App that visualizes live data fetched from an API. This can be, for example, a financial data API where you would visualize the most traded stocks by volume.

Skillset demonstrated:

1. Working with APIs
2. Organizing and displaying data fetched from API
3. Visualizing data on a web page

5. A Multi-Functional Unit Converter

There's a lot of units out there. Temperature, Energy, Distance... you name it. A simple yet useful Web Dev project would be a multi-functional unit converter that would be able to convert units from any category like temperature or energy.

Skillset demonstrated:

1. Processing user input
2. Converting user input through functions and mathematical operations
3. Conditional element rendering

6. A Platformer Game

While the ability to make games is not something most recruiters look for in a Web Dev. It's fun, and it's nevertheless a good demonstration of what you can do with some HTML and Javascript. here is a good example of a web based platformer game. And here's another.

Skillset demonstrated:

1. Detecting user interactions
2. Manipulating web elements
3. Game development

7. A User Generated Blog

Blogs are much appreciated across the internet. Blogs can be very valuable for businesses. Personal blogs have been made like a million times by Web Devs already, but user-generated blogs like dev.to that have a built-in markdown editor, review algorithm and everything else needed to have a self-sustaining blog is something not many have made, yet is something that is a lot more valuable to businesses that want their blog to grow organically and bring in traffic. This project can be a fine addition to your Web Dev portfolio.

Skillset demonstrated:

1. Handling user generated content
2. Creating blog recommendation and review algorithms

8. A Web Store Landing Page

Upload some designs to redbubble, it takes like 10 mins to setup and like an hour to upload some designs(they don't have to be great). Then, a great Web Dev project idea would be to make your own landing page for your products. Web Devs that can make great product landing pages are more valuable than ever. If you can show that you can make a unique, good looking product/online store landing page, your portfolio won't need much more.

Skillset demonstrated:

1. UI/UX
2. Creating landing pages

9. A Newsletter Landing Page

Just like with product landing pages, knowing how to make great newsletter landing pages is a valuable Web Dev skill. So if you're trying to grow your newsletter, taking the time to make a great landing page for it will be worthwhile for your portfolio.

Skillset demonstrated:

1. UI/UX
2. Creating landing pages

10. An Image Editing Web App

I often use online image editing Web Apps such as vectr to make things like cover images. You can make a similar Web App that has a simple UI yet versatile functionality.

Skillset demonstrated:

1. Processing user file uploads
2. Editing image properties
3. Adding/Removing effects and elements

11. A Documentation for Your Library or API

If you've ever made something like a library or API, take the time to make a comprehensive, good looking documentation for it. When working with companies that make their own APIs or libraries, knowing how to make a great documentation will make you stand out.

Skillset demonstrated:

1. UI/UX
2. Building a well-put together documentation

12. A Browser Extension SaaS

Browser extensions are pretty cool and can be used for a variety of things to make your browsing experience better. Many SaaS businesses are implementing their services in a browser extension. You can make your own browser-extension-as-a-Service. Maybe one that solves a problem you've faced while browsing or just a fun add-on for procrastinators ;)

Skillset demonstrated:

1. Browser Extension development
2. Knowing your way around the DOM
3. SaaS development

13. Your Own NFT Web Store

I'm not a big fan of NFTs, but the truth is, hate it or love it, businesses from a variety of different industries are expanding into the NFT space. You can make your own NFT web store where you will implement web3 and crypto transaction frameworks. This project is a sure-fire way to get recognized for your web3 development skills and can be a great addition to your portfolio.

Skillset demonstrated:

1. Web3 development
2. Web3 authentication
3. Crypto transaction management
4. Encryption/Decryption

14. A CSS or JS Library

You don't always have to make your own Web App or website to put on your portfolio. You can just make some useful CSS or JS libraries meant to be integrated with others code.

Skillset demonstrated:

1. Writing integratabtle CSS or JS code
2. Web Design and/or Javascript Development

15. An Image Gallery

This is a project that won't involve much functionality, but is one that can be fun and will show case your web design skills. You can make an image gallery about your favorite cars, plants, west-coast rappers... you name it. Here's a great example, but be sure to be original with your design.

Skillset demonstrated:

1. UI/UX
2. Web Design

Conclusion

I hope that you found some of these ideas innovative and worthwhile! If this article does well, I'll post a part 2.