Web Development Projects

Build a beautiful Login Page using only HTML and CSS — no JavaScript required. Features a fully working popup modal triggered by clicking the Login button, built using the pure CSS checkbox trick. A perfect first project to learn how HTML structure, CSS styling, and creative CSS selectors work together.

Build a clean, modern personal blog using only HTML, CSS, and vanilla JavaScript. Features a multi-page SPA with localStorage persistence, full CRUD operations, live search, and a responsive card-based layout — no frameworks, no backend required.

Build a fully functional, dark-themed calculator using only HTML, CSS, and vanilla JavaScript. Features arithmetic operations, percentage, decimal support, a calculation history panel, and full keyboard input — no frameworks, no backend required.

Build a fully interactive quiz application using only HTML, CSS, and vanilla JavaScript. Features a countdown timer, instant answer feedback, progress tracking, a circular score display, and Web Audio API sound effects — no frameworks, no backend required.

Build a beautiful Random Quote Generator using only HTML, CSS, and vanilla JavaScript. Features a curated quote library, smooth fade animations, dynamic background gradients, a copy-to-clipboard button, and a one-click Tweet button — no frameworks, no backend required.

Build a stunning personal portfolio website from scratch using HTML, CSS, and JavaScript. Features a typing animation hero, dark/light mode toggle, animated skill bars, project showcase cards, a working contact form, and a fully responsive mobile layout — all with clean, beginner-friendly commented code.

Build a modern, feature-rich Todo App with drag-and-drop reordering, task filtering, and persistent storage using localStorage. Styled with Tailwind CSS and animated with Framer Motion, this project is perfect for mastering React state management, component architecture, and local data persistence in a Next.js App Router setup.

Build a fully functional Stopwatch Timer from scratch using pure HTML, CSS, and JavaScript. This project introduces core web fundamentals like DOM manipulation, intervals, and dynamic styling — wrapped in a premium glassmorphism UI with animated backgrounds, gradient text, and smooth micro-animations.

Build a fully functional BMI Calculator from scratch using pure HTML, CSS, and JavaScript. This project covers core web fundamentals like DOM manipulation, unit conversion, and dynamic styling — wrapped in a sleek dark UI with gradient text, animated inputs, a color-coded scale bar, and smooth category-based background transitions.

Build a sleek, cryptographically secure Password Generator using only HTML, CSS, and vanilla JavaScript. Customize password length (6–30), toggle uppercase, lowercase, numbers, and symbols, and instantly copy the result to your clipboard — all wrapped in a clean dark SaaS UI with a live password strength indicator and smooth micro-animations.

Build a modern, fully responsive Image Slider (Carousel) using only HTML, CSS, and vanilla JavaScript. Features smooth slide transitions, auto-play with a live progress bar, dot indicators, touch/swipe support, and stylish caption overlays — all wrapped in a clean light-theme UI with micro-animations and zero dependencies.

Build a real-time Currency Converter using only HTML, CSS, and vanilla JavaScript. Select from 45+ world currencies, enter any amount, and instantly see live converted results — powered by a free public exchange rate API, with a clean dark SaaS UI, swap functionality, debounced live updates, and graceful error handling.