20 Projects in 20 Days – Level Up Your Frontend Skills
Kickstart your web development journey with 20 Projects in 20 Days using HTML, CSS, and JavaScript. Build simple yet practical projects to master layouts, styling, and interactivity. Stay consistent, boost your confidence, and create 20 portfolio-worthy projects.
By the end, you’ll sharpen your skills and build the habit of coding every day.
Day 1 : Weather App
Fetch and display real-time weather data for any city using an API.
Concepts: API fetch, async/await, JSON handling.
Day 2 : Password Generator
Generates random secure passwords with adjustable length and character types.
Concepts: Arrays, string manipulation, clipboard API.
Day 3 : Form Validation
Validates a signup/login form for email, password, etc., before submission.
Concepts: Regular expressions, DOM events.
Day 4 : Stop-Watch App
A simple stopwatch with start, stop, and reset buttons.
Concepts: setInterval(), clearInterval(), time logic.
Day 5 : Digital Piano
Play sound notes when user clicks keys or presses keyboard buttons.
Concepts: Audio API, keyboard events.
Day 6 : Tip Calculator
Calculates tip amount and total per person based on bill and tip %.
Concepts: Form inputs, math logic.
Day 7 : Expense Tracker
Track income and expenses, and calculate the total balance.
Concepts: LocalStorage, array methods (map, reduce).
Day 8 : Movie Search App
Search movies and display results with posters using an API.
Concepts: API integration, async/await.
Day 9 : Flashcard Learning App
Create and flip flashcards to study and test your knowledge.
Concepts: DOM manipulation, CSS 3D effects, LocalStorage.
Day 10 : Typing Speed Test
Measures typing speed and accuracy.
Concepts: Timers, string comparison, event listeners.
Day 11 : Drum Kit
Play drum sounds when clicking buttons or pressing keys.
Concepts: Keyboard events, Audio API.
Day 12 : QR Code Generator
Generates a QR code from text input.
Concepts: Third-party API (QRServer API), fetch().
Day 13 : Currency Converter
Converts one currency to another using real-time exchange rates.
Concepts: API fetch, DOM updates.
Day 14 : Image Gallery with Modal
Displays images in a grid with a pop-up modal view.
Concepts: DOM traversal, event bubbling.
Day 15 : Light/Dark Mode Toggle
Switch between light and dark themes with one click (and remember the choice).
Concepts: CSS variables, LocalStorage.
Day 16 : Scroll Progress Bar
Shows a progress bar at the top as the user scrolls down the page.
Concepts: scroll event, math calculations.
Day 17 : Clipboard Copy Tool
Click a button to copy text to the clipboard.
Concepts: Clipboard API, DOM events.
Day 18 : Text-to-Speech Converter
Converts entered text into speech.
Concepts: Web Speech API.
Day 19 : Product Filter List
Filter products or items by search or category in real-time.
Concepts: Array filter(), DOM rendering.
Day 20 : Music Player App
A mini music player with play, pause, next, and progress bar.
Concepts: Audio API, event listeners, state management.