# 100 Projects In 100 Days - HTML, CSS & JavaScript

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

[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)

|  #  | Project                                                                | Live Demo                                                |
| :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |
| 001 | [Expanding Cards](001-expanding%20cards)                               | [Live Demo](https://codepen.io/solygambas/full/qBaMWjE)  |
| 002 | [Progress Steps](002-progress%20steps)                                 | [Live Demo](https://codepen.io/solygambas/full/VwKGzzg)  |
| 003 | [Rotating Navigation Animation](003-rotating%20navigation)             | [Live Demo](https://codepen.io/solygambas/full/jOMvZqY)  |
| 004 | [Hidden Search Widget](004-hidden%20search%20widget)                   | [Live Demo](https://codepen.io/solygambas/full/mdrzdPB)  |
| 005 | [Blurry Loading](005-blurry%20loading)                                 | [Live Demo](https://codepen.io/solygambas/full/WNGaNgB)  |
| 006 | [Scroll Animation](006-scroll%20animation)                             | [Live Demo](https://codepen.io/solygambas/full/JjRmoWL)  |
| 007 | [Split Landing Page](007-split%20landing%20page)                       | [Live Demo](https://codepen.io/solygambas/full/KKgGdmY)  |
| 008 | [Form Wave](008-form%20wave%20animation)                               | [Live Demo](https://codepen.io/solygambas/full/Exgdegm)  |
| 009 | [Sound Board](009-sound%20board)                                       | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa)  |
| 010 | [Dad Jokes](010-dad%20jokes)                                           | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK)  |
| 011 | [Event Keycodes](011-event%20KeyCodes)                                 | [Live Demo](https://codepen.io/solygambas/full/zYKmypd)  |
| 012 | [FAQ Collapse](012-FAQ%20collapse)                                     | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm)  |
| 013 | [Random Choice Picker](013-random%20choice%20picker)                   | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN)  |
| 014 | [Animated Navigation](014-animated%20navigation)                       | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz)  |
| 015 | [Incrementing Counter](015-incrementing%20counter)                     | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW)  |
| 016 | [Drink Water](016-drink%20water)                                       | [Live Demo](https://codepen.io/solygambas/full/yLaQoJy)  |
| 017 | [Movie App](017-movie%20app)                                           | [Live Demo](https://codepen.io/solygambas/full/mdrabXd)  |
| 018 | [Background Slider](018-background%20slider)                           | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ)  |
| 019 | [Theme Clock](019-theme%20clock)                                       | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy)  |
| 020 | [Button Ripple Effect](020-button%20ripple%20effect)                   | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw)  |
| 021 | [Drag N Drop](021-drag%20n%20drop)                                     | [Live Demo](https://codepen.io/solygambas/full/RwGEyme)  |
| 022 | [Drawing App](022-drawing%20app)                                       | [Live Demo](https://codepen.io/solygambas/full/wvzREMx)  |
| 023 | [Kinetic Loader](023-kinetic%20loader)                                 | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW)  |
| 024 | [Content Placeholder](024-content%20placeholder)                       | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX)  |
| 025 | [Sticky Navbar](025-sticky%20navigation)                               | [Live Demo](https://codepen.io/solygambas/full/VwKqJmw/) |
| 026 | [Double Vertical Slider](026-double%20vertical%20slider)               | [Live Demo](https://codepen.io/solygambas/full/wvzNwqB)  |
| 027 | [Toast Notification](027-toast%20notification)                         | [Live Demo](https://codepen.io/solygambas/full/YzGBNgW)  |
| 028 | [GitHub Profiles](028-github%20profiles)                               | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR)  |
| 029 | [Double Click Heart](029-double%20click%20heart)                       | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK)  |
| 030 | [Auto Text Effect](030-auto%20text%20effect)                           | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM)  |
| 031 | [Password Generator](031-password%20generator)                         | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb)  |
| 032 | [Good Cheap Fast](032-good%20cheap%20fast)                             | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP)  |
| 033 | [Notes App](033-notes%20app)                                           | [Live Demo](https://codepen.io/solygambas/full/qBavQog)  |
| 034 | [Animated Countdown](034-animated%20countdown)                         | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW)  |
| 035 | [Image Carousel](035-image%20carousel)                                 | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK)  |
| 036 | [Hoverboard](036-hoverboard)                                           | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK)  |
| 037 | [Pokedex](037-pokedex)                                                 | [Live Demo](https://codepen.io/solygambas/full/gOwygyP)  |
| 038 | [Mobile Tab Navigation](038-mobile%20tab%20navigation)                 | [Live Demo](https://codepen.io/solygambas/full/eYdoexM)  |
| 039 | [Password Strength Background](039-password%20strength%20background)   | [Live Demo](https://codepen.io/solygambas/full/YzGMYzz)  |
| 040 | [3D Background Boxes](040-3d%20boxes%20background)                     | [Live Demo](https://codepen.io/solygambas/full/zYKXpBe)  |
| 041 | [Verify Account UI](041-verify%20account%20UI)                         | [Live Demo](https://codepen.io/solygambas/full/KKgYZWR)  |
| 042 | [Live User Filter](042-live%20user%20filter)                           | [Live Demo](https://codepen.io/solygambas/full/OJRGzjg)  |
| 043 | [Feedback UI Design](043-feedback%20UI%20design)                       | [Live Demo](https://codepen.io/solygambas/full/PoGgEOm)  |
| 044 | [Custom Range Slider](044-custom%20range%20slider)                     | [Live Demo](https://codepen.io/solygambas/full/WNGBrjZ)  |
| 045 | [Netflix Mobile Navigation](045-netflix%20mobile%20navigation)         | [Live Demo](https://codepen.io/solygambas/full/NWRVxgv)  |
| 046 | [Quiz App](046-quiz%20app)                                             | [Live Demo](https://codepen.io/solygambas/full/PoGvZEW)  |
| 047 | [Testimonial Box Switcher](047-testimonial%20box%20switcher)           | [Live Demo](https://codepen.io/solygambas/full/ExgzPRz)  |
| 048 | [Random Image Feed](048-random%20image%20generator)                    | [Live Demo](https://codepen.io/solygambas/full/eYdaJQx)  |
| 049 | [Todo List](049-todo%20list)                                           | [Live Demo](https://codepen.io/solygambas/full/eYdaJoo)  |
| 050 | [Insect Catch Game](050-insect%20catch%20game)                         | [Live Demo](https://codepen.io/solygambas/full/oNzRbKx)  |
| 051 | [Video Background](051-video%20background)                             | [Live Demo](https://codepen.io/solygambas/full/oNYNLwL)  |
| 052 | [Portfolio with CSS Grid](052-portfolio%20grid)                        | [Live Demo](https://codepen.io/solygambas/full/MWbKzzO)  |
| 053 | [Touch Slider](053-touch%20slider)                                     | [Live Demo](https://codepen.io/solygambas/full/QWGEyLK)  |
| 054 | [CSS Loaders](054-css%20loaders)                                       | [Live Demo](https://codepen.io/solygambas/full/QWGdgaZ)  |
| 055 | [Glass Dashboard](055-glass%20dashboard)                               | [Live Demo](https://codepen.io/solygambas/full/oNYpQMo)  |
| 056 | [Image Comparison Slider](056-image%20comparison%20slider)             | [Live Demo](https://codepen.io/solygambas/full/RwoMLYW)  |
| 057 | [Parallax Background with SVG](057-parallax%20background%20svg)        | [Live Demo](https://codepen.io/solygambas/full/vYyjjbz)  |
| 058 | [3D Product Card](058-3D%20product%20card)                             | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq)  |
| 059 | [Form Validator](059-form%20validator)                                 | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb)  |
| 060 | [Movie Seat Booking](060-movie%20seat%20booking)                       | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy)  |
| 061 | [Custom Video Player](061-custom%20video%20player)                     | [Live Demo](https://codepen.io/solygambas/full/mdOQadY)  |
| 062 | [Exchange Rate Calculator](062-exchange%20rate%20calculator)           | [Live Demo](https://codepen.io/solygambas/full/abBPJBG)  |
| 063 | [DOM Array Methods](063-DOM%20array%20methods)                         | [Live Demo](https://codepen.io/solygambas/full/NWbeXYR)  |
| 064 | [Menu Slider & Modal](064-menu%20slider%20modal)                       | [Live Demo](https://codepen.io/solygambas/full/MWbLeKd)  |
| 065 | [Hangman Game](065-hangman%20game)                                     | [Live Demo](https://codepen.io/solygambas/full/MWbLEYr)  |
| 066 | [Meal Finder](066-meal%20finder)                                       | [Live Demo](https://codepen.io/solygambas/full/dyOagYE)  |
| 067 | [Expense Tracker](067-expense%20tracker)                               | [Live Demo](https://codepen.io/solygambas/full/OJbqyro)  |
| 068 | [Music Player](068-music%20player)                                     | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG)  |
| 069 | [Infinite Scroll Posts](069-infinite%20scroll%20posts)                 | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB)  |
| 070 | [Typing Game](070-typing%20game)                                       | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq)  |
| 071 | [Speech Text Reader](071-speech%20text%20reader)                       | [Live Demo](https://codepen.io/solygambas/full/QWGPLVM)  |
| 072 | [Memory Cards](072-memory%20cards)                                     | [Live Demo](https://codepen.io/solygambas/full/oNYOqjv)  |
| 073 | [Lyrics Search App](073-lyrics%20search%20app)                         | [Live Demo](https://codepen.io/solygambas/full/ExNzPKV)  |
| 074 | [Relaxer App](074-relaxer%20app)                                       | [Live Demo](https://codepen.io/solygambas/full/wvobMzE)  |
| 075 | [Breakout Game](075-breakout%20game)                                   | [Live Demo](https://codepen.io/solygambas/full/oNYrNKj)  |
| 076 | [New Year Countdown](076-new%20year%20countdown)                       | [Live Demo](https://codepen.io/solygambas/full/rNWEaBb)  |
| 077 | [Sortable List](077-sortable%20list)                                   | [Live Demo](https://codepen.io/solygambas/full/qBqzEdO)  |
| 078 | [Speak Number Guessing Game](078-speak%20number%20guessing%20game)     | [Live Demo](https://codepen.io/solygambas/full/jOVjEre)  |
| 079 | [Creative Agency Website](079-creative%20agency%20website)             | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj)  |
| 080 | [Health Dashboard](080-health%20dashboard)                             | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz)  |
| 081 | [Animated SVG](081-animated%20SVG)                                     | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR)  |
| 082 | [Parallax Landing Page](082-parallax%20landing%20page)                 | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo)  |
| 083 | [Full-Screen Image Slider](083-full%20screen%20image%20slider)         | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb)  |
| 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox)                   | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg)  |
| 085 | [Sneaker Shop](085-sneaker%20shop)                                     | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ)  |
| 086 | [Coming Soon Page](086-coming%20soon%20page)                           | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM)  |
| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm)  |
| 088 | [Promo Code](088-promo%20code)                                         | [Live Demo](https://codepen.io/solygambas/full/wvggBXe)  |
| 089 | [One Color UI](089-one%20color%20UI)                                   | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx)  |
| 090 | [Tooltip](090-tooltip)                                                 | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb)  |
| 091 | [Chat Interface](091-chat%20interface)                                 | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ)  |
| 092 | [Music Streaming Service](092-music%20streaming%20service)             | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg)  |
| 093 | [Creative Portfolio](093-creative%20portfolio)                         | [Live Demo](https://codepen.io/solygambas/full/zYNbgxR)  |
| 094 | [Laptop UI](094-laptop%20UI)                                           | [Live Demo](https://codepen.io/solygambas/full/eYgoxMo)  |
| 095 | [Headphones Product Page](095-headphones%20product%20page)             | [Live Demo](https://codepen.io/solygambas/full/KKaLmEr)  |
| 096 | [Cloud Hosting Service](096-cloud%20hosting%20service)                 | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr)  |
| 097 | [Terminal Style Landing Page](097-terminal%20style%20landing%20page)   | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG)  |
| 098 | [Magazine Layout](098-magazine%20layout)                               | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj)  |
| 099 | [Parallax Website](099-parallax%20website)                             | [Live Demo](https://codepen.io/solygambas/full/poeBdPr)  |
| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone)                       | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy)  |

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

- [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/)
- [20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/)

The other projects are adapted from various YouTube channels:

- Brad Traversy - [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)
- Shaun Pelling - [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- Simo Edwin - [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)
- Gary Simon - [DesignCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow)
- Kyle Cook - [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw)
- [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw)
- [Florin Pop](https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA)