Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/solygambas/html-css-javascript-projects
100+ mini web projects using HTML, CSS and JavaScript.
https://github.com/solygambas/html-css-javascript-projects
100daysofcode css css3 html html5 javascript
Last synced: 29 days ago
JSON representation
100+ mini web projects using HTML, CSS and JavaScript.
- Host: GitHub
- URL: https://github.com/solygambas/html-css-javascript-projects
- Owner: solygambas
- License: mit
- Created: 2021-01-09T20:36:59.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-02T09:54:11.000Z (4 months ago)
- Last Synced: 2024-10-01T22:42:38.366Z (about 1 month ago)
- Topics: 100daysofcode, css, css3, html, html5, javascript
- Language: HTML
- Homepage: https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id
- Size: 1.64 MB
- Stars: 1,414
- Watchers: 24
- Forks: 487
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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.
[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
## Project Showcase
Explore each project individually and view live demos to see them in action:
| # | 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) |
| 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) |
| 102 | [Container queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) |
## Get Inspired
Check out our [**collection of articles**](https://www.onbusinessplan.com/) 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**](https://forms.gle/sSWJ4uAcTdFJu6W76).
## 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
```
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.
## Acknowledgments
This repository is mostly based on two 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/)
In addition, 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)
## 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**](https://github.com/sponsors/solygambas). Your support is greatly appreciated. Thank you!