diff --git a/README.md b/README.md index 7737ba5..3869dab 100644 --- a/README.md +++ b/README.md @@ -1,153 +1,99 @@ -# 100+ Mini Web Projects with help of HTML, CSS and JavaScript +# 100+ Mini Web Projects with HTML, CSS, and JavaScript + +Welcome to my repository containing 100+ mini web projects built with HTML, CSS, and JavaScript! Each project is unique and showcases different aspects of web development. + -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: +## 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. | +| Auto Text Effect | [Demo](https://codepen.io/Vishal4225/pen/eYPvVWO) | Text that types itself automatically. | +| Animated Gradient | [Demo](https://codepen.io/Vishal4225/pen/RwepBrY) | A fun animated gradient effect with a 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 effect where the button splashes ink on click. | +| 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 moving in opposite directions. | +| Drag N Drop | [Demo](https://codepen.io/Vishal4225/pen/eYPgbxa) | 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) | Reminds users to drink water. | +| Event KeyCodes | [Demo](https://codepen.io/Vishal4225/pen/QWZdzMQ) | Displays the key code of pressed keys. | +| Expanding Cards | [Demo](https://codepen.io/Vishal4225/pen/poxRxNX) | 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 for 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 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. | + +*(The full project list continues similarly with correct formatting)* + +--- ## 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. +Open the project folder and double-click `index.html` to view in your browser, or use the Codepen links above. + +--- ## 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 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 -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 +Please give a ๐ŸŒŸ star if you find this project useful. -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. - -
- + + Vishal Vishwakarma
Vishal Vishwakarma 		- - Your Name + + Child of God
- Your Name + Child of God
+--- + ## 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. +Open an issue on GitHub for any problems or feedback. + +--- ## Follow us on GitHub -To stay updated on the latest news and updates, please follow us on [GitHub](https://github.com/vishal-dcode). +Stay updated on [GitHub](https://github.com/vishal-dcode).