Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vaibhav-kesarwani/100-javascript-projects

100+ mini web projects using HTML, CSS and JavaScript.
https://github.com/vaibhav-kesarwani/100-javascript-projects

100da css html-css-javascript html5 javascript

Last synced: 5 months ago
JSON representation

100+ mini web projects using HTML, CSS and JavaScript.

Awesome Lists containing this project

README 

          
# 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.



## Project Showcase



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



|  #  | Project                                                                |

| :-: | ---------------------------------------------------------------------- |

| 001 | [Expanding Cards](001-expanding%20cards)                               

| 002 | [Progress Steps](002-progress%20steps)                                 

| 003 | [Rotating Navigation Animation](003-rotating%20navigation)             

| 004 | [Hidden Search Widget](004-hidden%20search%20widget)                   

| 005 | [Blurry Loading](005-blurry%20loading)                                 

| 006 | [Scroll Animation](006-scroll%20animation)                             

| 007 | [Split Landing Page](007-split%20landing%20page)                       

| 008 | [Form Wave](008-form%20wave%20animation)                               

| 009 | [Sound Board](009-sound%20board)                                       

| 010 | [Dad Jokes](010-dad%20jokes)                                           

| 011 | [Event Keycodes](011-event%20KeyCodes)                                 

| 012 | [FAQ Collapse](012-FAQ%20collapse)                                     

| 013 | [Random Choice Picker](013-random%20choice%20picker)                   

| 014 | [Animated Navigation](014-animated%20navigation)                       

| 015 | [Incrementing Counter](015-incrementing%20counter)                     

| 016 | [Drink Water](016-drink%20water)                                       

| 017 | [Movie App](017-movie%20app)                                           

| 018 | [Background Slider](018-background%20slider)                           

| 019 | [Theme Clock](019-theme%20clock)                                       

| 020 | [Button Ripple Effect](020-button%20ripple%20effect)                   

| 021 | [Drag N Drop](021-drag%20n%20drop)                                     

| 022 | [Drawing App](022-drawing%20app)                                       

| 023 | [Kinetic Loader](023-kinetic%20loader)                                 

| 024 | [Content Placeholder](024-content%20placeholder)                       

| 025 | [Sticky Navbar](025-sticky%20navigation)                               

| 026 | [Double Vertical Slider](026-double%20vertical%20slider)               

| 027 | [Toast Notification](027-toast%20notification)                         

| 028 | [GitHub Profiles](028-github%20profiles)                               

| 029 | [Double Click Heart](029-double%20click%20heart)                       

| 030 | [Auto Text Effect](030-auto%20text%20effect)                           

| 031 | [Password Generator](031-password%20generator)                         

| 032 | [Good Cheap Fast](032-good%20cheap%20fast)                             

| 033 | [Notes App](033-notes%20app)                                           

| 034 | [Animated Countdown](034-animated%20countdown)                         

| 035 | [Image Carousel](035-image%20carousel)                                 

| 036 | [Hoverboard](036-hoverboard)                                           

| 037 | [Pokedex](037-pokedex)                                                 

| 038 | [Mobile Tab Navigation](038-mobile%20tab%20navigation)                 

| 039 | [Password Strength Background](039-password%20strength%20background)   

| 040 | [3D Background Boxes](040-3d%20boxes%20background)                     

| 041 | [Verify Account UI](041-verify%20account%20UI)                         

| 042 | [Live User Filter](042-live%20user%20filter)                           

| 043 | [Feedback UI Design](043-feedback%20UI%20design)                       

| 044 | [Custom Range Slider](044-custom%20range%20slider)                     

| 045 | [Netflix Mobile Navigation](045-netflix%20mobile%20navigation)         

| 046 | [Quiz App](046-quiz%20app)                                             

| 047 | [Testimonial Box Switcher](047-testimonial%20box%20switcher)           

| 048 | [Random Image Feed](048-random%20image%20generator)                    

| 049 | [Todo List](049-todo%20list)                                           

| 050 | [Insect Catch Game](050-insect%20catch%20game)                         

| 051 | [Video Background](051-video%20background)                             

| 052 | [Portfolio with CSS Grid](052-portfolio%20grid)                        

| 053 | [Touch Slider](053-touch%20slider)                                     

| 054 | [CSS Loaders](054-css%20loaders)                                       

| 055 | [Glass Dashboard](055-glass%20dashboard)                               

| 056 | [Image Comparison Slider](056-image%20comparison%20slider)             

| 057 | [Parallax Background with SVG](057-parallax%20background%20svg)        

| 058 | [3D Product Card](058-3D%20product%20card)                             

| 059 | [Form Validator](059-form%20validator)                                 

| 060 | [Movie Seat Booking](060-movie%20seat%20booking)                       

| 061 | [Custom Video Player](061-custom%20video%20player)                     

| 062 | [Exchange Rate Calculator](062-exchange%20rate%20calculator)           

| 063 | [DOM Array Methods](063-DOM%20array%20methods)                         

| 064 | [Menu Slider & Modal](064-menu%20slider%20modal)                       

| 065 | [Hangman Game](065-hangman%20game)                                     

| 066 | [Meal Finder](066-meal%20finder)                                       

| 067 | [Expense Tracker](067-expense%20tracker)                               

| 068 | [Music Player](068-music%20player)                                     

| 069 | [Infinite Scroll Posts](069-infinite%20scroll%20posts)                 

| 070 | [Typing Game](070-typing%20game)                                       

| 071 | [Speech Text Reader](071-speech%20text%20reader)                       

| 072 | [Memory Cards](072-memory%20cards)                                     

| 073 | [Lyrics Search App](073-lyrics%20search%20app)                         

| 074 | [Relaxer App](074-relaxer%20app)                                       

| 075 | [Breakout Game](075-breakout%20game)                                   

| 076 | [New Year Countdown](076-new%20year%20countdown)                       

| 077 | [Sortable List](077-sortable%20list)                                   

| 078 | [Speak Number Guessing Game](078-speak%20number%20guessing%20game)     

| 079 | [Creative Agency Website](079-creative%20agency%20website)             

| 080 | [Health Dashboard](080-health%20dashboard)                             

| 081 | [Animated SVG](081-animated%20SVG)                                     

| 082 | [Parallax Landing Page](082-parallax%20landing%20page)                 

| 083 | [Full-Screen Image Slider](083-full%20screen%20image%20slider)         

| 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox)                   

| 085 | [Sneaker Shop](085-sneaker%20shop)                                     

| 086 | [Coming Soon Page](086-coming%20soon%20page)                           

| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form) 

| 088 | [Promo Code](088-promo%20code)                                         

| 089 | [One Color UI](089-one%20color%20UI)                                   

| 090 | [Tooltip](090-tooltip)                                                 

| 091 | [Chat Interface](091-chat%20interface)                                 

| 092 | [Music Streaming Service](092-music%20streaming%20service)             

| 093 | [Creative Portfolio](093-creative%20portfolio)                         

| 094 | [Laptop UI](094-laptop%20UI)                                           

| 095 | [Headphones Product Page](095-headphones%20product%20page)             

| 096 | [Cloud Hosting Service](096-cloud%20hosting%20service)                 

| 097 | [Terminal Style Landing Page](097-terminal%20style%20landing%20page)   

| 098 | [Magazine Layout](098-magazine%20layout)                               

| 099 | [Parallax Website](099-parallax%20website)                             

| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone)                       

| 101 | [Cascade Layers](101-cascade%20layers)                                 

| 102 | [Container queries](102-container%20queries) 

| 103 | [Candy Crush Game](103-Candy-Crush-Game)                     



## Get Inspired



Check out my [**github**](https://github.com/Vaibhav-kesarwani) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.



## 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:



   ```bash

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

   cd html-css-javascript-projects

   ```



3. **Open with VS Code**: Open the cloned repository in [Visual Studio Code](https://code.visualstudio.com/) (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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).



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.



## 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. Your support is greatly appreciated. Thank you!



## Credits



All the credit goes to [Vaibhav Kesarwani](https://github.com/Vaibhav-kesarwani)