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