This repository is for building 50+ projects to master HTML, CSS, and modern JavaScript. Each project is a small, hands-on exercise designed to solidify my front-end development skills.
Below is a list of the projects I've completed so far.
| # | Project | Description | Preview | Live Demo |
|---|---|---|---|---|
| 1 | Expanding Cards | A set of cards that expand on click, created with CSS Flexbox and JavaScript event listeners. |  |
View Live |
| 2 | Progress Steps | A simple stepper component with "Next" and "Previous" buttons to show progress through stages. |  |
View Live |
| 3 | Rotating Navigation | A page layout that rotates to reveal a hidden navigation menu, triggered by a button. |  |
View Live |
| 4 | Hidden Search | A search widget that is hidden by default and expands with an animation on click. |  |
View Live |
| 5 | Blurry Loading | A loading screen where a blurry background sharpens as the percentage text fades out. |  |
View Live |
| 6 | Scroll Animation | Content boxes that slide in from the sides of the screen as the user scrolls down. |  |
View Live |
| 7 | Split Landing Page | A dual-section landing page where hovering over one side expands it to fill more of the screen. |  |
View Live |
| 8 | Form Input Wave | A login form where input labels animate with a "wave" effect when focused. |  |
View Live |
| 9 | Sound Board | A set of buttons that play different sound effects when clicked. |  |
View Live |
| 10 | Dad Jokes | A simple app that fetches and displays a random dad joke from an API. |  |
View Live |
| 11 | Event KeyCodes | Displays the JavaScript event key, keyCode, and code properties for any pressed key. |
 |
View Live |
| 12 | FAQ | An accordion-style FAQ component where answers toggle open and closed on click. |  |
View Live |
| 13 | Random Choice Picker | A tool that randomly selects a choice from a user-provided, comma-separated list. |  |
View Live |
| 14 | Animated Navigation | A navigation bar that expands and collapses with an animated hamburger button. |  |
View Live |
| 15 | Incrementing Counter | Displays social media stats that animate from 0 to a target number on page load. |  |
View Live |
| 16 | Drink Water | A water intake tracker where clicking small glasses fills up a large cup, updating the percentage and remaining goal. |  |
View Live |
| 17 | Movie App | Fetches and displays popular movies from The Movie Database (TMDB) API, with a search function. |  |
View Live |
| 18 | Background Slider | A full-page background image slider with next and previous arrow controls. |  |
View Live |
| 19 | Theme Clock | An analog and digital clock that displays the current time and date, with a button to toggle between light and dark themes. |  |
View Live |
| 20 | Button Ripple Effect | Creates a circular ripple effect on a button starting from the click position using CSS animations and JavaScript. |  |
View Live |
| 21 | Drag N Drop | A simple drag-and-drop interface where an image can be moved between several empty containers. |  |
View Live |
| 22 | Accordion | A dynamic FAQ-style accordion that expands and collapses answers on click, featuring smooth arrow rotation and single-section focus. |  |
View Live |
| 23 | Random Color Generator | A dual-mode color tool that generates random Hex colors and allows manual RGB adjustment via sliders, featuring one-click clipboard copying for both formats. |  |
View Live |
| 24 | Star Rating | An interactive star rating component featuring hover-based previews, click-to-select logic, and real-time score updates using Font Awesome icons. |  |
View Live |
| 25 | API Fetching Methods | A demonstration of JavaScript asynchronous data fetching techniques, comparing legacy XMLHttpRequest (XHR), Promises, the modern Fetch API, and Async/Await to retrieve and render JSON data. |  |
View Live |
| (Next Project Here) |