Solygambas/html-css-javascript-projects: 100+ Mini Web ... - GitHub

100 Projects In 100 Days - HTML, CSS & JavaScript

Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaScript. This collection serves as a comprehensive resource for developers of all levels to practice their skills, explore new techniques, and get inspired by a wide range of web projects. Consider this as the ideal companion if you want to embark on the 100 Days of Code journey and challenge yourself.

View the full collection on CodePen

Project Showcase

Explore each project individually and view live demos to see them in action:

#	Project	Live Demo
001	Expanding Cards	Live Demo
002	Progress Steps	Live Demo
003	Rotating Navigation Animation	Live Demo
004	Hidden Search Widget	Live Demo
005	Blurry Loading	Live Demo
006	Scroll Animation	Live Demo
007	Split Landing Page	Live Demo
008	Form Wave	Live Demo
009	Sound Board	Live Demo
010	Dad Jokes	Live Demo
011	Event Keycodes	Live Demo
012	FAQ Collapse	Live Demo
013	Random Choice Picker	Live Demo
014	Animated Navigation	Live Demo
015	Incrementing Counter	Live Demo
016	Drink Water	Live Demo
017	Movie App	Live Demo
018	Background Slider	Live Demo
019	Theme Clock	Live Demo
020	Button Ripple Effect	Live Demo
021	Drag N Drop	Live Demo
022	Drawing App	Live Demo
023	Kinetic Loader	Live Demo
024	Content Placeholder	Live Demo
025	Sticky Navbar	Live Demo
026	Double Vertical Slider	Live Demo
027	Toast Notification	Live Demo
028	GitHub Profiles	Live Demo
029	Double Click Heart	Live Demo
030	Auto Text Effect	Live Demo
031	Password Generator	Live Demo
032	Good Cheap Fast	Live Demo
033	Notes App	Live Demo
034	Animated Countdown	Live Demo
035	Image Carousel	Live Demo
036	Hoverboard	Live Demo
037	Pokedex	Live Demo
038	Mobile Tab Navigation	Live Demo
039	Password Strength Background	Live Demo
040	3D Background Boxes	Live Demo
041	Verify Account UI	Live Demo
042	Live User Filter	Live Demo
043	Feedback UI Design	Live Demo
044	Custom Range Slider	Live Demo
045	Netflix Mobile Navigation	Live Demo
046	Quiz App	Live Demo
047	Testimonial Box Switcher	Live Demo
048	Random Image Feed	Live Demo
049	Todo List	Live Demo
050	Insect Catch Game	Live Demo
051	Video Background	Live Demo
052	Portfolio with CSS Grid	Live Demo
053	Touch Slider	Live Demo
054	CSS Loaders	Live Demo
055	Glass Dashboard	Live Demo
056	Image Comparison Slider	Live Demo
057	Parallax Background with SVG	Live Demo
058	3D Product Card	Live Demo
059	Form Validator	Live Demo
060	Movie Seat Booking	Live Demo
061	Custom Video Player	Live Demo
062	Exchange Rate Calculator	Live Demo
063	DOM Array Methods	Live Demo
064	Menu Slider & Modal	Live Demo
065	Hangman Game	Live Demo
066	Meal Finder	Live Demo
067	Expense Tracker	Live Demo
068	Music Player	Live Demo
069	Infinite Scroll Posts	Live Demo
070	Typing Game	Live Demo
071	Speech Text Reader	Live Demo
072	Memory Cards	Live Demo
073	Lyrics Search App	Live Demo
074	Relaxer App	Live Demo
075	Breakout Game	Live Demo
076	New Year Countdown	Live Demo
077	Sortable List	Live Demo
078	Speak Number Guessing Game	Live Demo
079	Creative Agency Website	Live Demo
080	Health Dashboard	Live Demo
081	Animated SVG	Live Demo
082	Parallax Landing Page	Live Demo
083	Full-Screen Image Slider	Live Demo
084	Fluid Image Lightbox	Live Demo
085	Sneaker Shop	Live Demo
086	Coming Soon Page	Live Demo
087	Sliding Sign In & Sign Up Form	Live Demo
088	Promo Code	Live Demo
089	One Color UI	Live Demo
090	Tooltip	Live Demo
091	Chat Interface	Live Demo
092	Music Streaming Service	Live Demo
093	Creative Portfolio	Live Demo
094	Laptop UI	Live Demo
095	Headphones Product Page	Live Demo
096	Cloud Hosting Service	Live Demo
097	Terminal Style Landing Page	Live Demo
098	Magazine Layout	Live Demo
099	Parallax Website	Live Demo
100	Hulu Webpage Clone	Live Demo
101	Cascade Layers	Live Demo
102	Container queries	Live Demo

Get Inspired

Check out our collection of articles for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.

Share Your Insights

We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. Take the survey here.

Setup Instructions

To get started with these projects, follow these simple steps:

1. Fork the Repository: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account.

2. Clone the Repository: Clone the forked repository to your local machine using the following command in your terminal:

   git clone https://github.com/Your-Username/html-css-javascript-projects.git

3. Open with VS Code: Open the cloned repository in Visual Studio Code (VS Code) or your preferred code editor.

4. Install Live Server Extension: If you haven't already, install the Live Server extension for VS Code. This extension allows you to launch a local development server and automatically refresh your browser whenever you make changes to your HTML, CSS, or JavaScript files. You can install it from the VS Code Marketplace.

5. Start Coding: Start exploring the projects, make changes, experiment with different ideas, and unleash your creativity! Use Live Server to preview your changes in real-time and see how they affect the project.

Acknowledgments

This repository is mostly based on two courses by Brad Traversy (2020):

• 50 Projects In 50 Days - HTML, CSS & JavaScript
• 20 Web Projects With Vanilla JavaScript

In addition, other projects are adapted from various YouTube channels:

• Brad Traversy - Traversy Media
• Shaun Pelling - The Net Ninja
• Simo Edwin - Dev Ed
• Gary Simon - DesignCourse
• Kyle Cook - Web Dev Simplified
• Kevin Powell
• Florin Pop

Show Your Support

If you find these projects helpful or interesting, please consider starring the repository. It's a simple gesture that helps to boost the visibility of the project and show appreciation for the effort put into creating it. Additionally, if you'd like to support my work further, you can become a sponsor. Your support is greatly appreciated. Thank you!