# 100+ Mini Web Projects with help of HTML, CSS and JavaScript
Welcome to my repository containing 100+ mini web projects built with HTML, CSS, and JavaScript! Each project is unique and has its own set of features that showcase different aspects of web development.
---
## Project List:
Below is a list of all the projects included in this repository:
| Project Name | Live Demo | Description |
|--------------|-----------|-------------|
| Animated Countdown | [Demo](https://codepen.io/Vishal4225/pen/OJBpQpv) | A countdown timer with animated numbers. |
| Auto Text Effect | [Demo](https://codepen.io/Vishal4225/pen/eYPvVWO) | A text that types itself out automatically.|
| Animated Gradient| [Demo](https://codepen.io/Vishal4225/pen/RwepBrY) | A fun animated gradient effect with grainy background |
| Background 3D Boxes | [Demo](https://codepen.io/Vishal4225/pen/OJBpQgZ) | A grid of colorful 3D boxes that move on hover.|
| Button 3D Effect| [Demo](https://codepen.io/Vishal4225/pen/OJBpwpY) | A dynamic 3d button with vintage UI |
| Background Slider | [Demo](https://codepen.io/Vishal4225/pen/zYmZRdG) | A full-screen slider with background images and text.|
| Button Ripple Effect | [Demo](https://codepen.io/Vishal4225/pen/MWPpQvM) | A button that ripples on click.|
| Button Ink Effect| [Demo](https://codepen.io/Vishal4225/pen/bGjKYVd) | A fun and interactive effect where the button appears to splash ink on the screen when clicked. |
| Content Placeholder | [Demo](https://codepen.io/Vishal4225/pen/RweKEOV) | Placeholder text that animates as it loads.|
| Custom Cursor on Hover | [Demo](https://codepen.io/Vishal4225/pen/xxaZNqL) | A cursor that changes on hover.|
| Custom Cursor | [Demo](https://codepen.io/Vishal4225/pen/RwBBpEp) | A cursor that can be customized with images.|
| Custom Range Slider | [Demo](https://codepen.io/Vishal4225/pen/rNqyJYa) | A range slider with customized styles.|
| Dad Jokes | [Demo](https://codepen.io/Vishal4225/pen/zYmNyzb) | A program that displays dad jokes.|
| Double Heart click | [Demo](https://codepen.io/Vishal4225/pen/xxygMKw) | A heart animation that appears on double-click.|
| Double Vertical Slider | [Demo](https://codepen.io/Vishal4225/pen/bGmgOPK) | A slider with two vertical images that move in opposite directions.|
| Drag N Drop | [Demo](https://codepen.io/Vishal4225/pen/eYPgbxa) | A program that allows users to drag and drop images.|
| Drawing App | [Demo](https://codepen.io/Vishal4225/pen/QWZdzoV) | A simple drawing application.|
| Drink Water | [Demo](https://codepen.io/Vishal4225/pen/MWPJZXz) | A program that reminds users to drink water.|
| Event KeyCodes | [Demo](https://codepen.io/Vishal4225/pen/QWZdzMQ) | A program that displays the key code of the pressed key.|
| Expanding Cards | [Demo](https://codepen.io/Vishal4225/pen/poxRxNX) | A set of cards that expand on click.|
| FAQ with Accordion | [Demo](https://codepen.io/Vishal4225/pen/GRYrPyr) | An accordion-style FAQ page.|
| Feedback UI Design | [Demo](https://codepen.io/Vishal4225/pen/yLRMvPd) | A feedback form with animations and styles.|
| Github Profile | [Demo](https://codepen.io/Vishal4225/pen/mdzWXpp) | A recreation of a Github profile page.|
| Good, Cheap, Fast Checkboxes | [Demo](https://codepen.io/Vishal4225/pen/vYVxddW) | Checkboxes that allow users to choose between good, cheap, and fast options.|
| Hidden Search | [Demo](https://codepen.io/Vishal4225/pen/jOeBZZR) | A search box that expands on click.|
| Hoverboard | [Demo](https://codepen.io/Vishal4225/pen/xxyqYWE) | A hoverboard-style animation that follows the cursor.|
| Image Carousel | [Demo](https://codepen.io/Vishal4225/pen/WNapMzP) | A carousel of images that scrolls on click.|
| Incrementing Counter | [Demo](https://codepen.io/Vishal4225/pen/gOBgZKW) | A counter that increments from 0 to a given number.|
| Kinetic CSS Loader | [Demo](https://codepen.io/Vishal4225/pen/poxeaLX) | A loader animation made with CSS.|
| Live User Filter | [Demo](https://codepen.io/Vishal4225/pen/oNaZEdW) | A program that filters user data in real-time.|
| Loading Image | [Demo](https://codepen.io/Vishal4225/pen/RweKeqB) | An image that fades in as it loads.|
| Mobile Tab Navigation | [Demo](https://codepen.io/Vishal4225/pen/ZEqerRY) | A navigation bar that collapses into a tab bar on mobile devices.
| Movie App | [Demo](https://codepen.io/Vishal4225/pen/poxRqQQ) | An app that displays information about movies.|
| Navbar Animation | [Demo](https://codepen.io/Vishal4225/pen/GRYWQGd) | A navigation bar with animated links.|
| Netflix Navigation | [Demo](https://codepen.io/Vishal4225/pen/rNqyJrO) | A navigation bar similar to Netflix's.|
| Notes App | [Demo](https://codepen.io/Vishal4225/pen/VwEpQGM) | A simple notes application.|
| Password Generator | [Demo](https://codepen.io/Vishal4225/pen/JjmWpmW) | A program that generates passwords.|
| Password Strength Background | [Demo](https://codepen.io/Vishal4225/pen/oNaZEae) | A password input that changes color based on password strength.|
| Pokedex | [Demo](https://codepen.io/Vishal4225/pen/GRYWQYG) | An app that displays information about Pokemon.|
| Progress Steps | [Demo](https://codepen.io/Vishal4225/pen/yLRgRMm) | A set of progress steps that fill in as the user progresses.|
| Quiz App | [Demo](https://codepen.io/Vishal4225/pen/MWPpQzY) | An app that allows users to take quizzes.|
| Random Choice Picker | [Demo](https://codepen.io/Vishal4225/pen/NWOdeYy) | A program that randomly chooses an item from a list.|
| Random Image Feed | [Demo](https://codepen.io/Vishal4225/pen/ExdWQOg) | An app that displays a random image from a feed.|
| Responsive Accordion | [Demo](https://codepen.io/Vishal4225/pen/WNKLjdE) | An accordion-style FAQ page that adjusts to different screen sizes.
| Rotating Navigation | [Demo](https://codepen.io/Vishal4225/pen/oNaBaPo) | A navigation bar with a rotating effect.|
| Scroll Animation | [Demo](https://codepen.io/Vishal4225/pen/XWxpoRO) | An animation that triggers as the user scrolls.|
| Sticky Navbar | [Demo](https://codepen.io/Vishal4225/pen/ZEqLVNN) | A navigation bar that sticks to the top of the page on scroll.|
| Testimonial Box Switcher | [Demo](https://codepen.io/Vishal4225/pen/vYVxdQd) | A set of testimonials that switch on click.|
| Theme Clock | [Demo](https://codepen.io/Vishal4225/pen/YzJNdBp) | A clock with customizable themes.|
| Verify Account UI | [Demo](https://codepen.io/Vishal4225/pen/QWZpQJR) | A form that verifies account information.|
| Input Form UI| [Demo](https://codepen.io/Vishal4225/pen/poZOgPp) | An interactive user interface for inputting information with modern design elements. |
| Grid Style | [Demo](https://codepen.io/Vishal4225/pen/NWBzdNN) | A responsive layout with a grid system, perfect for displaying images or content in a structured way. |
| Loading Button Animation | [Demo](https://codepen.io/Vishal4225/pen/rNrrGMN) | A dynamic button animation that showcases loading progress or action completion. |
| 404 Error Page | [Demo](https://codepen.io/Vishal4225/pen/yLRvzNL) | A creative and visually appealing 404 error page design. |
| Animated Hamburger | [Demo](https://codepen.io/Vishal4225/pen/jOezoZj) | A visually engaging animated hamburger menu icon. |
| Article Template | [Demo](https://codepen.io/Vishal4225/pen/JjmprdN) | A stylish and well-structured template for displaying articles or blog posts. |
| Button Stack Effect | [Demo](https://codepen.io/Vishal4225/pen/PoyRvjB) | An interactive button stack effect that adds depth and interactivity to UI elements. |
| Stroke Animation | [Demo](https://codepen.io/Vishal4225/pen/ExdQJpa) | A captivating stroke animation that adds visual interest and dynamism to an element. |
| Calculator | [Demo](https://codepen.io/Vishal4225/pen/jOezxyz) | A functional and visually appealing calculator interface. |
| Carousel Portfolio | [Demo](https://codepen.io/Vishal4225/pen/YzJaoMm) | A carousel-style portfolio website with a visually appealing design. |
| Chameleonic Navbar | [Demo](https://codepen.io/Vishal4225/pen/QWZQqbX) | A navbar with a chameleon-like color-changing effect that adapts to the background. |
| Character Limit | [Demo](https://codepen.io/Vishal4225/pen/ExdERWy) | A character limit counter that provides real-time feedback on the remaining characters. |
| Checkout Form | [Demo](https://codepen.io/Vishal4225/pen/vYVeBxY) | A well-designed and user-friendly checkout form for e-commerce websites. |
| Coming Soon Timer | [Demo](https://codepen.io/Vishal4225/pen/yLRKKZP) | A countdown timer for a coming soon page or product launch. |
| CSS Loader | [Demo](https://codepen.io/Vishal4225/pen/poxeaLX) | An animated CSS loader that indicates the progress of a process or action. |
| Floating Parallax Effect | [Demo](https://codepen.io/Vishal4225/pen/PoyQvzd) | A mesmerizing parallax effect applied to floating elements on a webpage. |
| Cursor Movement Effect | [Demo](https://codepen.io/Vishal4225/pen/yLRvzey) | An interactive cursor movement effect that responds to user interaction. |
| Custom Radio Toggle | [Demo](https://codepen.io/Vishal4225/pen/BaqYwaG) | A customized radio toggle switch for selecting options or preferences. |
| Dialog Button | [Demo](https://codepen.io/Vishal4225/pen/OJBQxPB) | A visually appealing and interactive button with dialog-like behavior. |
| E-commerce Website | [Demo](https://codepen.io/Vishal4225/pen/JjmpWjP) | A demo of an eCommerce website with a modern and responsive design. |
| Floating Social Media Icons | [Demo](https://codepen.io/Vishal4225/pen/VwEyzKp) | Floating social media icons that hover and animate on a webpage. |
| Full Screen Toggle Button | [Demo](https://codepen.io/Vishal4225/pen/MWPQMmE) | A toggle button that expands and collapses to switch between full-screen and normal modes. |
| Full Page Cards Navigation | [Demo](https://codepen.io/Vishal4225/pen/vYVdJem) | A navigation system using full-page cards for intuitive and visually appealing browsing. |
| Gradient Color Generator | [Demo](https://codepen.io/Vishal4225/pen/XWxEqZw) | A tool for generating custom gradient color combinations using sliders. |
| Gradient Loader | [Demo](https://codepen.io/Vishal4225/pen/PoyRvdx) | An animated loader with a gradient background that adds visual interest during loading processes. |
| GSAP Hover Animation | [Demo](https://codepen.io/Vishal4225/pen/WNaMZYQ) | A hover animation created using the GSAP animation library to add interactive effects to elements. |
| GSAP Toggle View Animation | [Demo](https://codepen.io/Vishal4225/pen/JjmpRVE) | An animation that toggles between different views or sections using GSAP animations. |
| Hidden Icon Animation | [Demo](https://codepen.io/Vishal4225/pen/MWPOeaB) | An interactive animation that reveals hidden icons upon user interaction. |
| Hover Effect | [Demo](https://codepen.io/Vishal4225/pen/OJBQxVa) | An assortment of creative and visually appealing hover effects for various elements. |
| Image Hover Animation | [Demo](https://codepen.io/Vishal4225/pen/XWxzKqv) | An image hover effect that adds subtle animations or transformations to images on mouseover. |
| Image Hover Effect | [Demo](https://codepen.io/Vishal4225/pen/LYgdgxW) | A collection of captivating and visually appealing hover effects for images. |
| Matrix Rain Effect | [Demo](https://codepen.io/Vishal4225/pen/vYVZYja) | An animated matrix rain effect inspired by the iconic "Matrix" movie series. |
| Points Of Interest | [Demo](https://codepen.io/Vishal4225/pen/rNqJGxe) | An interactive map with markers indicating points of interest and providing additional information. |
| Reading Progress Bar | [Demo](https://codepen.io/Vishal4225/pen/OJBQjKo) | A progress bar that indicates the scroll progress of a webpage to enhance the reading experience. |
| Realistic Loader | [Demo](https://codepen.io/Vishal4225/pen/rNqvBwV) | A realistic loader animation that imitates the appearance of filling up a container or completing a task. |
| Realistic Toggle Button | [Demo](https://codepen.io/Vishal4225/pen/PoyRgVJ) | A toggle button with a realistic sliding animation that mimics a physical switch. |
| Responsive Card | [Demo](https://codepen.io/Vishal4225/pen/BaqYwov) | A responsive card component that adjusts its layout and design based on different screen sizes. |
| Scroll Snap | [Demo](https://codepen.io/Vishal4225/pen/ZEqrXBW) | An implementation of scroll snapping, which creates a smooth and engaging scrolling experience. |
| Share Button Animation | [Demo](https://codepen.io/Vishal4225/pen/ZEqaOYM) | An animated share button with interactive and eye-catching effects to encourage social media sharing. |
| Slider Tabs | [Demo](https://codepen.io/Vishal4225/pen/oNaqdVz) | Tabs with a slider functionality that allows users to navigate through content sections. |
| Toggle Dark-Light More | [Demo](https://codepen.io/Vishal4225/pen/eYPMrmj) | A toggle switch that enables users to switch between dark and light modes for the website's theme. |
| Typing Practice Game | [Demo](https://codepen.io/Vishal4225/pen/jOezKeO) | A fun and interactive typing practice game that helps users improve their typing speed and accuracy. |
| Word Scramble Game | [Demo](https://codepen.io/Vishal4225/pen/YzJavzQ) | An engaging word scramble game where players unscramble jumbled words within a time limit. |
## How to Run the Projects
To run any of the projects, simply open the project folder and double-click the index.html file to view it in your web browser. Alternatively, you can also click on the links provided above to view them on Codepen.
## Contribution 🤝
If you would like to contribute to this repository, please feel free to submit a pull request. Contributions are always welcome, whether it's adding new projects or improving existing ones.
1. Fork the repository
2. Create a new branch (`git checkout -b feature/your-feature`)
3. Commit your changes (`git commit -m 'Add some feature'`)
4. Push to the branch (`git push origin feature/your-feature`)
5. Open a pull request
If you find this project useful, please consider giving it a 🌟 star.
## Contributors
After contributing, add your profile photo and URL to the Contributors section below.
## Issues and Feedback
If you encounter any issues or have feedback, please open an issue on GitHub. We appreciate your feedback and will do our best to address any issues in a timely manner.
## Follow us on GitHub
To stay updated on the latest news and updates, please follow us on [GitHub](https://github.com/vishal-dcode).
