A curated collection of 50 modern, responsive, and beautiful mini projects built using only HTML, CSS, and vanilla JavaScript — no frameworks, no bundlers, no build tools. Just open index.html in any browser and it works.
This repository is a hands-on showcase of frontend development skills. Each project is self-contained in its own folder with index.html, style.css, script.js, and a README.md. Projects range from simple UI components to interactive games and full mini-applications.
Open index.html in the root folder to browse all 50 projects in a beautiful, interactive showcase page with:
- Dark/light mode toggle
- Search bar to filter projects
- Difficulty filter buttons (All, Beginner, Intermediate, Advanced)
- Responsive grid of project cards with gradient thumbnails
- Direct links to open each project in a new tab
- HTML5 — semantic markup
- CSS3 — modern styling, animations, responsive design
- Vanilla JavaScript (ES6+) — no frameworks, no TypeScript
- Tailwind CSS (via CDN) — utility-first styling where used
- Font Awesome (via CDN) — icons where used
No React. No Vue. No Next.js. No Vite. No build step. 100% vanilla.
| # | Project | Description |
|---|---|---|
| 1 | Profile Card | A sleek user profile card with social links and hover effects |
| 2 | Calculator | A functional calculator with keyboard support |
| 3 | Portfolio | A modern personal portfolio website |
| 4 | Todo App | A task manager with local storage persistence |
| 5 | Image Carousel | A responsive image slider with auto-play |
| 6 | Digital Clock | A live digital clock with date display |
| 7 | Password Generator | Generate secure passwords with custom options |
| 8 | Color Flipper | Background color changer with hex and simple modes |
| 9 | BMI Calculator | Calculate Body Mass Index with health categories |
| 10 | Countdown Timer | A countdown timer to a target date |
| 11 | Quiz App | An interactive quiz with score tracking |
| 12 | Notes App | A note-taking app with local storage |
| 13 | Weather App | A weather display UI with search |
| 14 | Expense Tracker | Track income and expenses with a balance summary |
| 15 | Tic-Tac-Toe | Classic two-player game with win detection |
| 16 | Memory Game | A card-matching memory game |
| 17 | Music Player | A music player UI with play/pause controls |
| 18 | E-Commerce Product Page | A product page with image gallery and cart |
| 19 | Drawing App | A canvas-based drawing pad with color picker |
| 20 | Kanban Board | A drag-and-drop task board with columns |
| 21 | Movie Search App | Search and browse movie cards |
| 22 | Recipe Finder | Search recipes and view details |
| 23 | Chat UI | A modern chat interface mockup |
| 24 | Multi-Step Form | A multi-step form with validation and progress |
| 25 | Infinite Scroll Gallery | A gallery that loads images on scroll |
| 26 | Snake Game | Classic snake game with score tracking |
| 27 | Rock Paper Scissors | Play against the computer |
| 28 | Age Calculator | Calculate exact age in years, months, days |
| 29 | Tip Calculator | Calculate tip and split bills |
| 30 | Animated Navigation | A smooth animated navigation menu |
| 31 | Form Validator | Real-time form validation with error messages |
| 32 | Currency Converter | Convert currencies with live exchange rates |
| 33 | Pomodoro Timer | Focus timer with work/break cycles & SVG progress |
| 34 | Weather Dashboard | Multi-city weather dashboard with detailed metrics |
| 35 | GitHub Profile Card | Search GitHub users & view profile stats |
| 36 | URL Shortener UI | Shorten URLs with copy & history tracking |
| 37 | Flashcard App | Study flashcards with 3D flip & deck management |
| 38 | Poll Voting App | Create polls & vote with live results |
| 39 | File Uploader UI | Drag-and-drop file upload with preview |
| 40 | Testimonial Slider | Auto-playing testimonial carousel |
| 41 | Calendar App | Monthly calendar with event management |
| 42 | Markdown Preview | Live markdown editor with custom parser |
| 43 | Code Editor UI | Write & run JavaScript with console capture |
| 44 | Virtual Keyboard | On-screen keyboard with sound & themes |
| 45 | Maze Game | Procedurally generated maze with timer |
| 46 | Flappy Bird Clone | Canvas game with pipes & score tracking |
| 47 | Sorting Visualizer | Visualize 5 sorting algorithms in real-time |
| 48 | Sudoku Solver | Solve any puzzle with backtracking algorithm |
| 49 | Text to Speech | Convert text to speech with voice options |
| 50 | Voice Recorder | Record audio with MediaRecorder API |
- Clone the repository:
git clone https://github.com/ashutoshpalhare/WebDev-Projects.git cd WebDev-Projects - Navigate to any project folder:
cd calculator - Open
index.htmlin your browser:# macOS open index.html # Windows start index.html # Linux xdg-open index.html
Or simply drag and drop the index.html file into your browser. No installation, no dependencies, no build step required.
To browse all projects at once, open the root index.html showcase page.
- All projects use vanilla JavaScript only — no frameworks or libraries.
- Some projects use Tailwind CSS and Font Awesome via CDN for styling and icons.
- Data persistence (where applicable) uses the browser's localStorage.
- Projects are designed to be responsive and work on mobile, tablet, and desktop.
This project is open source and available under the MIT License.