15 Creative Web Dev Project Ideas for Your Portfolio (That You Can Finish in a Weekend)
Tags: javascript, webdev, react, beginners
Published: 2022-04-06 14:15:16


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
![r/place](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7nortrg0m46gk7z33u0.png)
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.
![Canadien flag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tip9plaub9ut6hxv7f4p.jpeg)

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](https://codepen.io/takaneichinose/pen/jOYPjgz) is a good example of a web based platformer game. And [here](https://codepen.io/dissimulate/pen/AGYEby)'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](https://www.redbubble.com/), 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](https://vectr.com/) 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](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
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](https://codepen.io/ramenhog/pen/MpORPa)'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.