diff --git a/README.md b/README.md index a522c56..a0c99fc 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,28 @@ 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) +## Companion Guide + +Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection. + +Inside the PDF, you'll find: + +- **Day 0: Before Starting Up**
+ Quick-start setup instructions and a boilerplate walkthrough. +- **Days 1–102: Challenges & Enhancements** + - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding. + - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions. + - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand. + - **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository. + +This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. + +[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf) ## Project Showcase +[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id) + Explore each project individually and view live demos to see them in action: | # | Project | Live Demo | @@ -111,7 +129,9 @@ Explore each project individually and view live demos to see them in action: | 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) | +| 102 | [Container Queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) | + +> **Ready to master all 102 projects?** Don't just build them—transform them into portfolio showpieces with our [**Ultimate Companion Guide**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)! ## Get Inspired @@ -119,7 +139,7 @@ Check out our [**collection of articles**](https://www.onbusinessplan.com/) for ## Setup Instructions -To get started with these projects, follow these simple steps: +To get started with these projects, [**watch the setup tutorial on YouTube**](https://www.youtube.com/watch?v=GlKnIym2xnk) or 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.