From 05fc6e96ec1f65343bdbe7f5a86514ddf5e18744 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:37:34 +0200
Subject: [PATCH 1/3] docs: reorg sections
---
README.md | 38 ++++++++++++++++++++------------------
1 file changed, 20 insertions(+), 18 deletions(-)
diff --git a/README.md b/README.md
index dcf6e2b..94c4c16 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,24 @@ Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaSc
[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
Explore each project individually and view live demos to see them in action:
@@ -113,28 +131,12 @@ Explore each project individually and view live demos to see them in action:
| 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) |
+> **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
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.
-## 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)
-
## Setup Instructions
To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or follow these simple steps:
From f35a0d0d9552575080ce346a13b6eeca659a0bc5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:41:54 +0200
Subject: [PATCH 2/3] docs: move collection link
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 94c4c16..53756b9 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,6 @@
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.
@@ -24,6 +22,8 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
## 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 |
From 4c3d76fe280d202e58b9db7b546a4079221f73dc Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 9 Jul 2025 13:36:15 +0200
Subject: [PATCH 3/3] docs: update youtube setup link
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 53756b9..a0c99fc 100644
--- a/README.md
+++ b/README.md
@@ -139,7 +139,7 @@ Check out our [**collection of articles**](https://www.onbusinessplan.com/) for
## Setup Instructions
-To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or 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.