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