Do you want to learn web development, but just don't know what to create? This list was designed for you then!
These ideas are great for:
- Displaying in your portfolio!
- Learn a new JS Framework!
- Practicing your Webdev Skills!
Each idea has the following features:
- Screenshots of the idea.
- Details that explain what should be implemented.
- Inspiration resources that can help guide you.
- Hints that you can use if you're stuck.
- Tutorials as a last-resort in case you're stuck.
The ideas are split into 3 groups:
Level | Requirements |
---|---|
Beginner | Know the basics of HTML, CSS, and JS. |
Intermediate | Proficient in web fundamentals |
What better way to start off this list than the classic example: a calculator!
user can enter decimals.
user can enter operators.
user can see result.
app saves history of math expressions.
Samsung Calculator
Google Calculator
Xiaomi Calculator
use eval()
to calculate.
Tyler Potts | 21K views | 7 months ago
Web Dev Simplified | 73K views | 3 months ago
Digital Solutions Master | 30K views | 10 months ago
We all know Tic Tac Toe...
user can play offline by switching between 2 players.
user can choose a difficulty level.
user can choose a board size.
user can unlock achievements.
Google's Tic Tac Toe
Classic Tic Tac Toe
efficient algorithm for detecting the winner
codeSTACKr | 31K views | 1 year ago
Learn Code By Doing | 4.7K views | 10 months ago
Coding with Basir | 35K views | 2 years ago
Create an app that counts down the hours, minutes, and seconds.
user can enter an amount of time in hours, minutes, and seconds.
user can visually see how much time is left.
user can pause and reset the timer.
Simple Timer (codepen)
Stopwatch Timer App
Use setInterval
and clearInterval
to create and reset the timer.
Code Boost | 9.8K views | 1 year ago
Coding with Elias | 19K views | 2 years ago
Uzoanya Dominic | 24K views | 1 year ago
Write down what's on your mind!
user can create Markdown notes.
user can star notes.
user can reorder, edit and delete notes.
Markdown Notes with React
Notes App Android
Use Marked to transform Markdown to HTML.
Use localStorage
to save notes.
Chris Blakely | 22K views | 9 months ago
James Grimshaw | 12K views | 1 year ago
Dennis Ivy | 43K views | 5 months ago
Efficiently manage your time using the Pomodoro!
user can start, pause, and stop work periods (25 minutes)
user can start, pause, and stop short breaks (5-10 minutes)
user can start, pause, and stop long breaks (20-30 minutes)
app keeps history of work, short breaks, and long breaks.
Online Pomodoro Timer
Pomodoro Android App
Learn more about the pomodoro technique
Use localStorage
to save notes.
Use setInterval
and clearInterval
to create and reset the timer.
Coding With Dawid | 4.6K views | 6 months ago
Siphiwo Julayi | 7.7K views | 1 year ago
Siphiwo Julayi | 7.7K views | 1 year ago
Airbnb has very beatiful UI... Let's recreate it!
create an app whose UI is similar to that of Airbnb.
The Airbnb Design Blog
Airbnb Android App
Airbnb iOS App
Use Material UI to build the UI.
Clever Programmer | 169K views | 1 year ago
notJust.dev | 28K views | 1 year ago
Shloka Tech | 4.4K views | 1 year ago