From de6b7c9c5770cdc309ddb3fa4b66aae461e8e5db Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 4 Jun 2025 13:26:30 +0200
Subject: [PATCH 01/10] docs: add companion guide
modified: README.md
Changes to be committed:
modified: README.md
---
README.md | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/README.md b/README.md
index a522c56..cb77c6f 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,21 @@ Explore each project individually and view live demos to see them in action:
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.
+## The Ultimate 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:
+
+- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions.
+- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives.
+- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites.
+- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later.
+
+This guide isn't just about completing 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, follow these simple steps:
From f21865232f696190ad9008495370f009944d2faf Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:19:39 +0200
Subject: [PATCH 02/10] docs: container queries title
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index cb77c6f..967b360 100644
--- a/README.md
+++ b/README.md
@@ -111,7 +111,7 @@ 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) |
## Get Inspired
From 9eb410ee6f2662028868b384bcbcaa21132d6822 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 12 Jun 2025 11:45:49 +0200
Subject: [PATCH 03/10] docs: update companion guide presentation
---
README.md | 15 ++++++++-------
1 file changed, 8 insertions(+), 7 deletions(-)
diff --git a/README.md b/README.md
index 967b360..49659cd 100644
--- a/README.md
+++ b/README.md
@@ -117,18 +117,19 @@ Explore each project individually and view live demos to see them in action:
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.
-## The Ultimate Companion Guide
+## 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.
+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:
-- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions.
-- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives.
-- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites.
-- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later.
+- **Day 0: Before Starting Up**: Quick-start setup instructions, and 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.
-This guide isn't just about completing projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.
+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)
From 984638aedbce682a277772542044ee4fe5b4a9a7 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Thu, 12 Jun 2025 11:48:49 +0200
Subject: [PATCH 04/10] docs: fix indentation
---
README.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 49659cd..8e780c1 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,8 @@ Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & J
Inside the PDF, you'll find:
-- **Day 0: Before Starting Up**: Quick-start setup instructions, and boilerplate walkthrough.
+- **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.
From 6158625779816f5c1cc50bad0ff6e39e139c5be5 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Sat, 14 Jun 2025 13:52:23 +0200
Subject: [PATCH 05/10] docs: add youtube setup tutorial
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 8e780c1..06bc346 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ This guide isn't just about tweaking projects; it's about building momentum, mas
## 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://youtu.be/lEY0YchJLEU) 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.
From 49a4807701d27c133377a6114bc069551ea9bb75 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:46:08 +0200
Subject: [PATCH 06/10] docs: add solution branch
---
README.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/README.md b/README.md
index 06bc346..39c8068 100644
--- a/README.md
+++ b/README.md
@@ -129,6 +129,7 @@ Inside the PDF, you'll find:
- **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.
From 9eafd1b0931937bbfd42bef4fc76bf2e90dcfa36 Mon Sep 17 00:00:00 2001
From: solygambas <51904909+solygambas@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:49:02 +0200
Subject: [PATCH 07/10] docs: remove code block
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 39c8068..dcf6e2b 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ Inside the PDF, you'll find:
- **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.
+ - **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.
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 08/10] 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 09/10] 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 10/10] 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.