|
1 | 1 | #100 Projects In 100 Days - HTML, CSS & JavaScript |
2 | 2 |
|
3 | | -100+ mini web projects using HTML, CSS and JavaScript. |
| 3 | +Welcome to the repository for100+ 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. |
4 | 4 |
|
5 | | -[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id) |
| 5 | +[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id) |
| 6 | + |
| 7 | +##Project Showcase |
| 8 | + |
| 9 | +Explore each project individually and view live demos to see them in action: |
6 | 10 |
|
7 | 11 | | #| Project| Live Demo| |
8 | 12 | | :-:| ----------------------------------------------------------------------| --------------------------------------------------------| |
|
109 | 113 | | 101|[Cascade Layers](101-cascade%20layers)|[Live Demo](https://codepen.io/solygambas/full/poYaZmv)| |
110 | 114 | | 102|[Container queries](102-container%20queries)|[Live Demo](https://codepen.io/solygambas/full/abMqPNy)| |
111 | 115 |
|
112 | | ---- |
| 116 | +##Get Inspired |
| 117 | + |
| 118 | +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. |
| 119 | + |
| 120 | +##Setup Instructions |
| 121 | + |
| 122 | +To get started with these projects, follow these simple steps: |
| 123 | + |
| 124 | +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. |
| 125 | + |
| 126 | +2.**Clone the Repository**: Clone the forked repository to your local machine using the following command in your terminal: |
| 127 | + |
| 128 | +```bash |
| 129 | + git clone https://github.com/Your-Username/html-css-javascript-projects.git |
| 130 | +``` |
| 131 | + |
| 132 | +3.**Open with VS Code**: Open the cloned repository in[Visual Studio Code](https://code.visualstudio.com/) (VS Code) or your preferred code editor. |
| 133 | + |
| 134 | +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). |
113 | 135 |
|
114 | | -Get inspired and motivated with our[collection of articles](https://www.onbusinessplan.com/) for those beginning their web development journey! |
| 136 | +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. |
115 | 137 |
|
116 | | ---- |
| 138 | +##Acknowledgments |
117 | 139 |
|
118 | | -This repository is mostly based on2 courses by Brad Traversy (2020): |
| 140 | +This repository is mostly based ontwo courses by Brad Traversy (2020): |
119 | 141 |
|
120 | 142 | -[50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/) |
121 | 143 | -[20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/) |
122 | 144 |
|
123 | | -The other projects are adapted from various YouTube channels: |
| 145 | +In addition, other projects are adapted from various YouTube channels: |
124 | 146 |
|
125 | 147 | - Brad Traversy -[Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) |
126 | 148 | - Shaun Pelling -[The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) |
|