diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..ffc7522
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: solygambas
diff --git a/001-expanding cards/style.css b/001-expanding cards/style.css
index d3741bc..03f7979 100644
--- a/001-expanding cards/style.css	
+++ b/001-expanding cards/style.css	
@@ -20,7 +20,7 @@ body {
 }
 
 .panel {
-  background-size: auto 100%;
+  background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 80vh;
diff --git a/021-drag n drop/style.css b/021-drag n drop/style.css
index c0a43c1..7ba918c 100644
--- a/021-drag n drop/style.css	
+++ b/021-drag n drop/style.css	
@@ -21,7 +21,7 @@ body {
 }
 
 .fill {
-  background-image: url("https://source.unsplash.com/random/150x150");
+  background-image: url("https://picsum.photos/150/150");
   height: 145px;
   width: 145px;
   cursor: pointer;
diff --git a/037-pokedex/script.js b/037-pokedex/script.js
index b73f52d..eebc611 100644
--- a/037-pokedex/script.js
+++ b/037-pokedex/script.js
@@ -30,7 +30,7 @@ const createPokemonCard = (pokemon) => {
   const pokemonInnerHTML = `
     <div class="img-container">
         <img
-            src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png"
+            src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png"
             alt=""
         />
     </div>
diff --git a/045-netflix mobile navigation/index.html b/045-netflix mobile navigation/index.html
index 121fb11..11f47e4 100644
--- a/045-netflix mobile navigation/index.html	
+++ b/045-netflix mobile navigation/index.html	
@@ -18,7 +18,7 @@
     </button>
 
     <img
-      src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png"
+      src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
       alt="Logo"
       class="logo"
     />
@@ -33,7 +33,7 @@
           </button>
 
           <img
-            src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png"
+            src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
             alt="Logo"
             class="logo"
           />
diff --git a/048-random image generator/script.js b/048-random image generator/script.js
index fd687fa..3062c32 100644
--- a/048-random image generator/script.js	
+++ b/048-random image generator/script.js	
@@ -1,12 +1,11 @@
 const container = document.querySelector(".container");
-const unsplashURL = "https://source.unsplash.com/random/";
+const randomfoxURL = "https://randomfox.ca/images/";
 const rows = 5;
 
-const getRandomNumber = () => Math.floor(Math.random() * 10) + 300;
-const getRandomSize = () => `${getRandomNumber()}x${getRandomNumber()}`;
+const getRandomNumber = () => Math.floor(Math.random() * 123);
 
 for (let i = 0; i < rows * 3; i++) {
   const image = document.createElement("img");
-  image.src = `${unsplashURL}${getRandomSize()}`;
+  image.src = `${randomfoxURL}${getRandomNumber()}.jpg`;
   container.appendChild(image);
 }
diff --git a/051-video background/index.html b/051-video background/index.html
index 561e5da..da4e500 100644
--- a/051-video background/index.html	
+++ b/051-video background/index.html	
@@ -16,7 +16,7 @@ <h2 class="logo">Travel</h2>
         <div class="toggle"></div>
       </header>
       <video
-        src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4"
+        src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"
         muted
         loop
         autoplay
@@ -35,13 +35,46 @@ <h3>Exploring The World</h3>
       </div>
       <ul class="social">
         <li>
-          <a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png" /></a>
+          <a href="#">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12.001 2.002c-5.522 0-9.999 4.477-9.999 9.999 0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.24.195 2.24.195v2.459h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-9.999-9.999-9.999z"
+              />
+            </svg>
+          </a>
         </li>
         <li>
-          <a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png" /></a>
+          <a href="#">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </a>
         </li>
         <li>
-          <a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png" /></a>
+          <a href="#">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
+              />
+            </svg>
+          </a>
         </li>
       </ul>
     </section>
diff --git a/051-video background/style.css b/051-video background/style.css
index 4f02f03..a9b54bd 100644
--- a/051-video background/style.css	
+++ b/051-video background/style.css	
@@ -2,6 +2,8 @@
 
 :root {
   --overlay-color: #31385c;
+  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
 }
 
 * {
@@ -51,7 +53,7 @@
   position: relative;
   width: 60px;
   height: 60px;
-  background: url(https://i.ibb.co/HrfVRcx/menu.png);
+  background: var(--menu-icon);
   background-repeat: no-repeat;
   background-size: 30px;
   background-position: center;
@@ -59,7 +61,7 @@
 }
 
 .toggle.active {
-  background: url(https://i.ibb.co/rt3HybH/close.png);
+  background: var(--close-icon);
   background-repeat: no-repeat;
   background-size: 25px;
   background-position: center;
diff --git a/053-touch slider/index.html b/053-touch slider/index.html
index 06d6a9b..dd11c1f 100644
--- a/053-touch slider/index.html	
+++ b/053-touch slider/index.html	
@@ -15,19 +15,19 @@
       <div class="slide">
         <h2>AirPods</h2>
         <h4>$199</h4>
-        <img src="https://i.ibb.co/y08W0Jx/image1.png" alt="" />
+        <img src="https://i.ibb.co/ydLkyqw/airpods.png" alt="" />
         <a href="#" class="btn">Buy Now</a>
       </div>
       <div class="slide">
         <h2>iPhone 12</h2>
         <h4>$799</h4>
-        <img src="https://i.ibb.co/NYdGg2q/image2.png" alt="" />
+        <img src="https://i.ibb.co/C7VYPFh/iphone12.png" alt="" />
         <a href="#" class="btn">Buy Now</a>
       </div>
       <div class="slide">
         <h2>iPad</h2>
         <h4>$599</h4>
-        <img src="https://i.ibb.co/Jd3t4hQ/image3.png" alt="" />
+        <img src="https://i.ibb.co/NmgpvVX/ipad.png" alt="" />
         <a href="#" class="btn">Buy Now</a>
       </div>
     </div>
diff --git a/061-custom video player/index.html b/061-custom video player/index.html
index 3a480f0..6132e1d 100644
--- a/061-custom video player/index.html	
+++ b/061-custom video player/index.html	
@@ -15,12 +15,12 @@
   <body>
     <h1>Custom Video Player</h1>
     <video
-      src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4"
+      src="https://www.w3schools.com/html/mov_bbb.mp4"
       id="video"
       class="screen"
-      poster="https://images.unsplash.com/photo-1472148439583-1f4cf81b80e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80"
+      poster="https://plus.unsplash.com/premium_photo-1683140811960-956e5bbf858e?q=80&w=1489&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     ></video>
-    <!-- Sample Video provided by DesignSupply https://codepen.io/designsupply/pen/zmEWBm -->
+    <!-- Sample Video provided by w3schools -->
     <div class="controls">
       <button class="btn" id="play">
         <i class="fa fa-play-circle fa-2x"></i>
diff --git a/078-speak number guessing game/script.js b/078-speak number guessing game/script.js
index f80a749..8c0f07c 100644
--- a/078-speak number guessing game/script.js	
+++ b/078-speak number guessing game/script.js	
@@ -5,6 +5,7 @@ const randomNumber = getRandomNumber();
 window.SpeechRecognition =
   window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition = new window.SpeechRecognition();
+recognition.lang = "en-US";
 recognition.start();
 
 function getRandomNumber() {
diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 1084073..7817c55 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Nixie+One&display=swap");
 
 :root {
-  --primary-color: #2d2254;
+  --primary-color: #0c030f;
   --secondary--color: #f5c42f;
   --text-color: #c5bbec;
 }
@@ -69,8 +69,8 @@ ul {
 .section-top {
   min-height: 200px;
   padding-top: 20px;
-  background: url("https://i.ibb.co/PhVR2Vh/bg1.png") no-repeat center
-    center/cover;
+  background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center
+    bottom/cover;
 }
 
 .section-top .content {
@@ -79,6 +79,8 @@ ul {
 
 .section-top .content h1 {
   font-size: 45px;
+  text-shadow: -1px -1px 0 var(--primary-color), 1px -1px 0 var(--primary-color),
+    -1px 1px 0 var(--primary-color), 1px 1px 0 var(--primary-color);
 }
 
 .section-top .content,
@@ -90,8 +92,7 @@ ul {
 
 .section-stream {
   min-height: 400px;
-  background: url("https://i.ibb.co/bsX6RV0/bg2.png") no-repeat center
-    center/cover;
+  background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top/cover;
 }
 
 .section-stream h2 {
@@ -107,7 +108,7 @@ ul {
 
 .section-stream .content > div,
 .section-grid > div {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(18, 13, 33, 0.9);
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 10px;
diff --git a/083-full screen image slider/style.css b/083-full screen image slider/style.css
index 1a92356..e89faac 100644
--- a/083-full screen image slider/style.css	
+++ b/083-full screen image slider/style.css	
@@ -58,33 +58,33 @@ body {
 }
 
 .slide:first-child {
-  background: url("https://source.unsplash.com/vTL_qy03D1I/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(2) {
-  background: url("https://source.unsplash.com/n19qtMX3nNY/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1471565661762-b9dfae862dbe?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(3) {
-  background: url("https://source.unsplash.com/_7LbC5J-jw4/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?q=80&w=2071")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(4) {
-  background: url("https://source.unsplash.com/_KaMTEmJnxY/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1469334031218-e382a71b716b?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(5) {
-  background: url("https://source.unsplash.com/3mGnYRUNIck/1600x900") no-repeat
-    center top/cover;
+  background: url("https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?q=80&w=2070")
+    no-repeat center top/cover;
 }
 
 .slide:nth-child(6) {
-  background: url("https://source.unsplash.com/cxnkcRnwS7M/1600x900") no-repeat
-    center center/cover;
+  background: url("https://images.unsplash.com/photo-1463453091185-61582044d556?q=80&w=2070")
+    no-repeat center center/cover;
 }
 
 .buttons button#prev {
diff --git a/084-fluid image lightbox/index.html b/084-fluid image lightbox/index.html
index 2bd9978..1714a6c 100644
--- a/084-fluid image lightbox/index.html	
+++ b/084-fluid image lightbox/index.html	
@@ -13,30 +13,30 @@
     <div class="gallery">
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/tzSLATuyZzM/640x853"
+          src="https://images.unsplash.com/photo-1690790427878-ecf29d8b686b?q=80&w=640"
           alt="No elegance is possible without perfume"
-          data-original="tzSLATuyZzM/1920x2560"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/GWQ2KmCXrQA/640x1137"
+          src="https://images.unsplash.com/photo-1696218614256-b74c0bcde0d5?q=80&w=640"
           alt="It is the unseen, unforgettable, ultimate accessory"
-          data-original="GWQ2KmCXrQA/1920x3413"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/nkWnc-W_GP8/640x853"
+          src="https://images.unsplash.com/photo-1696218359361-b088f32f86b8?q=80&w=640"
           alt="A perfume is like a piece of clothing, a message"
-          data-original="nkWnc-W_GP8/1920x2560"
+          data-original="1887"
         />
       </div>
       <div class="img-container">
         <img
-          src="https://source.unsplash.com/Ou00pmFFPKA/640x853"
+          src="https://images.unsplash.com/photo-1690790591188-3503c1a4dcb6?q=80&w=640"
           alt="Perfume is like a parenthesis, a moment of freedom"
-          data-original="Ou00pmFFPKA/1920x2560"
+          data-original="1887"
         />
       </div>
     </div>
diff --git a/084-fluid image lightbox/script.js b/084-fluid image lightbox/script.js
index 3cef7a8..ebb5a0a 100644
--- a/084-fluid image lightbox/script.js	
+++ b/084-fluid image lightbox/script.js	
@@ -7,8 +7,10 @@ previews.forEach((preview) => {
   preview.addEventListener("click", () => {
     modal.classList.add("open");
     original.classList.add("open");
+    const originalUrl = new URL(preview.src);
     const originalSize = preview.getAttribute("data-original");
-    original.src = `https://source.unsplash.com/${originalSize}`;
+    originalUrl.searchParams.set("w", originalSize);
+    original.src = originalUrl.toString();
     caption.textContent = preview.alt;
     // Reference: https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext
   });
diff --git a/095-headphones product page/index.html b/095-headphones product page/index.html
index 0b7b609..f0dabc6 100644
--- a/095-headphones product page/index.html	
+++ b/095-headphones product page/index.html	
@@ -39,7 +39,7 @@ <h1>The headphones of the future.</h1>
           </p>
           <a href="#about" class="btn">Read More</a>
         </div>
-        <img src="https://i.ibb.co/37Y74kv/showcase.jpg" alt="" />
+        <img src="https://i.ibb.co/ydpFGg6/showcase.png" alt="" />
       </div>
     </section>
 
@@ -61,12 +61,36 @@ <h2>People Aren't Hearing All the Music</h2>
     <!-- Gallery -->
     <section class="section-gallery">
       <div class="gallery">
-        <img src="https://i.ibb.co/CHLBZnp/gal2323.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/4pBbhfY/gal39834.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/xSnHP7g/gal43884.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/QN6Bnrb/gal4958.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/dGZvj75/gal4545.jpg" alt="" class="big" />
-        <img src="https://i.ibb.co/S6FVFNt/gal74744.jpg" alt="" class="big" />
+        <img
+          src="https://images.unsplash.com/photo-1619113026857-7aa017691b1f?q=80&w=1887"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1509098681029-b45e9c845022?q=80&w=2070"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1620578077783-33e254311182?w=500"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1545127398-14699f92334b?q=80&w=1935"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1545127398-5aae47194b22?q=80&w=1935"
+          alt=""
+          class="big"
+        />
+        <img
+          src="https://images.unsplash.com/photo-1491927570842-0261e477d937?q=80&w=1887"
+          alt=""
+          class="big"
+        />
       </div>
     </section>
 
diff --git a/095-headphones product page/style.css b/095-headphones product page/style.css
index d67467f..219f436 100644
--- a/095-headphones product page/style.css	
+++ b/095-headphones product page/style.css	
@@ -120,8 +120,8 @@ img {
 
 .section-large-text {
   position: relative;
-  background: url("https://i.ibb.co/1RS1dqC/section-b.jpg") bottom center/cover
-    no-repeat;
+  background: url("https://images.unsplash.com/photo-1593121925328-369cc8459c08?q=80&w=2070")
+    bottom center/cover no-repeat;
   height: 600px;
 }
 
diff --git a/101-cascade layers/index.html b/101-cascade layers/index.html
new file mode 100644
index 0000000..bd4b61f
--- /dev/null
+++ b/101-cascade layers/index.html	
@@ -0,0 +1,88 @@
+<!-- Based on CSS Cascade Layers Tutorial by Shaun Pelling - Net Ninja (2023)
+see: https://www.youtube.com/playlist?list=PL4cUxeGkcC9jS4SctqK83Ag58a0_UEcE_ -->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cascade Layers</title>
+    <link rel="stylesheet" href="styles/main.css" />
+  </head>
+  <body>
+    <nav class="main-nav container">
+      <h1>Cascade Layers 101</h1>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/login" class="btn">Login</a>
+    </nav>
+
+    <main>
+      <section class="main-content container">
+        <article>
+          <h2>Selector Specificity</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis <a href="/">distinctio</a> enim esse
+            voluptatibus debitis omnis blanditiis totam laudantium, hic a optio
+            consequatur repudiandae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis distinctio enim esse voluptatibus
+            debitis omnis blanditiis totam laudantium, hic a optio consequatur
+            repudiandae? Hic, at? Lorem ipsum dolor sit amet consectetur,
+            adipisicing elit. Dicta dolorum architecto quaerat ut ex temporibus
+            reiciendis laboriosam ea exercitationem praesentium fugit, accusamus
+            aliquam deleniti sit porro, aliquid laborum culpa officia! Lorem
+            ipsum dolor sit amet consectetur, adipisicing elit. Inventore animi
+            itaque nam cumque molestiae temporibus rerum enim autem repudiandae
+            accusamus, harum, aut dolores iste voluptate id aperiam. Voluptatum,
+            maiores cumque!
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis distinctio
+            <a href="/about">enim</a> esse voluptatibus debitis omnis blanditiis
+            totam laudantium, hic a optio consequatur repudiandae? Hic, at?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
+            amet fugit similique reiciendis distinctio enim esse voluptatibus
+            debitis omnis blanditiis totam laudantium, hic a optio consequatur
+            repudiandae? Hic, at?
+          </p>
+          <footer>
+            <p>Written by Mario 2 hours ago.</p>
+            <a href="/articles" class="btn">Read More</a>
+          </footer>
+        </article>
+
+        <div class="grid m-top">
+          <div class="card">
+            <h3>CSS Rules!</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
+              necessitatibus...
+            </p>
+            <a href="/" class="btn">More...</a>
+          </div>
+          <div class="card">
+            <h3>Specificty Headaches</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
+              necessitatibus...
+            </p>
+            <a href="/" class="btn">More...</a>
+          </div>
+          <div class="card">
+            <h3>Layers to the Rescue!</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
+              necessitatibus...
+            </p>
+            <a href="/" class="btn">More...</a>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/101-cascade layers/styles/components.css b/101-cascade layers/styles/components.css
new file mode 100644
index 0000000..9de1f85
--- /dev/null
+++ b/101-cascade layers/styles/components.css	
@@ -0,0 +1,14 @@
+.card {
+    background: white;
+    border-radius: 8px;
+    padding: 15px;
+  }
+
+  .btn {
+    background: #1c9f6d;
+    color: #fff;
+    padding: 8px 12px;
+    border-radius: 8px;
+    text-decoration: none;
+    display: inline-block;
+  }
\ No newline at end of file
diff --git a/101-cascade layers/styles/content.css b/101-cascade layers/styles/content.css
new file mode 100644
index 0000000..74171c8
--- /dev/null
+++ b/101-cascade layers/styles/content.css	
@@ -0,0 +1,26 @@
+h1,
+h2,
+h3,
+p {
+  color: var(--default);
+}
+.main-content article a {
+  color: var(--primary);
+  background: transparent;
+  text-decoration: underline;
+}
+.main-content article p {
+  line-height: 1.5em;
+  color: #777;
+  margin-top: 20px;
+}
+.main-content article h2 {
+  margin-bottom: 20px;
+}
+article footer {
+  border-top: 1px dashed var(--secondary);
+  margin: 30px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/101-cascade layers/styles/layout.css b/101-cascade layers/styles/layout.css
new file mode 100644
index 0000000..9f5a6d7
--- /dev/null
+++ b/101-cascade layers/styles/layout.css	
@@ -0,0 +1,24 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.main-nav {
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  border-bottom: 1px solid var(--secondary);
+}
+.main-nav a:last-child {
+  margin-left: auto;
+}
+article {
+  margin-top: 40px;
+  padding: 20px;
+  background: #fff;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
diff --git a/101-cascade layers/styles/main.css b/101-cascade layers/styles/main.css
new file mode 100644
index 0000000..6407a16
--- /dev/null
+++ b/101-cascade layers/styles/main.css	
@@ -0,0 +1,10 @@
+@layer reset, theme, bulma, layout, content, components, utility;
+
+@import "reset.css" layer(reset);
+@import "theme.css" layer(theme);
+@import "layout.css" layer(layout);
+@import "content.css" layer(content);
+@import "components.css" layer(components);
+@import "utility.css" layer(utility);
+/* @import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
+  layer(bulma); */
diff --git a/101-cascade layers/styles/reset.css b/101-cascade layers/styles/reset.css
new file mode 100644
index 0000000..dddb4cf
--- /dev/null
+++ b/101-cascade layers/styles/reset.css	
@@ -0,0 +1,15 @@
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap");
+
+body {
+  font-family: "Rubik";
+  margin: 20px;
+  background: var(--secondary);
+}
+p,
+h1,
+h2,
+h3,
+section {
+  margin: 0 0 10px 0;
+  padding: 0;
+}
diff --git a/101-cascade layers/styles/theme.css b/101-cascade layers/styles/theme.css
new file mode 100644
index 0000000..ff079de
--- /dev/null
+++ b/101-cascade layers/styles/theme.css	
@@ -0,0 +1,5 @@
+:root {
+  --primary: #1c9f6d;
+  --secondary: #f4f4f4;
+  --default: #333;
+}
diff --git a/101-cascade layers/styles/utility.css b/101-cascade layers/styles/utility.css
new file mode 100644
index 0000000..7cb2add
--- /dev/null
+++ b/101-cascade layers/styles/utility.css	
@@ -0,0 +1,12 @@
+.rounded {
+  border-radius: 8px;
+}
+.underlined {
+  text-decoration: underline;
+}
+.m-top {
+  margin-top: 40px;
+}
+.center {
+  text-align: center;
+}
diff --git a/102-container queries/index.html b/102-container queries/index.html
new file mode 100644
index 0000000..8bedbe1
--- /dev/null
+++ b/102-container queries/index.html	
@@ -0,0 +1,79 @@
+<!-- Based on Learn how to use Media queries & Container queries by Kevin Powell (2024)
+see: https://www.youtube.com/watch?v=2rlWBZ17Wes -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Container Queries</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <main>
+        <section class="primary-content" style="--theme: dark">
+          <h1>Desert Oasis: Exploring Nature's Tranquility</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Exercitationem neque tenetur numquam officiis officia, eos eligendi
+            animi architecto aliquam dignissimos, at minus, aperiam expedita.
+            Officia ad nostrum harum deleniti quasi!
+          </p>
+          <p>
+            Consectetur sunt, in sit iure dolor ratione odit necessitatibus
+            velit animi tempore, tenetur alias accusantium impedit ad vitae,
+            quis totam! Minus provident exercitationem sapiente ut ex repellat
+            vel odio doloremque?
+          </p>
+          <article class="card">
+            <h2>Tranquil Desert Haven</h2>
+            <img
+              src="https://images.unsplash.com/photo-1702927706292-c57d75cf2143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDMyMzR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
+              reiciendis non eaque consectetur. Unde, delectus!
+            </p>
+          </article>
+        </section>
+
+        <section class="cards">
+          <article class="card">
+            <h2>Serenity Oasis Retreat</h2>
+            <img
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
+              reiciendis non eaque consectetur. Unde, delectus!
+            </p>
+          </article>
+          <article class="card">
+            <h2>Mirage Haven Cottage</h2>
+            <img
+              src="https://images.unsplash.com/photo-1703783010857-9bd7a7b97c50?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Molestias similique quasi expedita doloribus odit consectetur
+              harum placeat qui! Alias commodi soluta possimus veritatis.
+            </p>
+          </article>
+          <article class="card">
+            <h2>Sand Dune Hideaway</h2>
+            <img
+              src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
+              alt=""
+            />
+            <p>
+              Cupiditate voluptate, provident cum aut tempore, voluptatem,
+              repellendus nisi ratione ex laudantium nulla! Repellat, nemo?
+            </p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/102-container queries/style.css b/102-container queries/style.css
new file mode 100644
index 0000000..bf3267e
--- /dev/null
+++ b/102-container queries/style.css	
@@ -0,0 +1,124 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-color: rebeccapurple;
+}
+
+/* https://caniuse.com/css-media-range-syntax */
+@media screen and (width >= 600px) {
+  :root {
+    --bg-color: orangered;
+  }
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  margin: 0;
+  padding-block: 2rem;
+  /* background-color: rebeccapurple; */
+  background-color: var(--bg-color);
+}
+
+/* @media screen and (min-width: 600px) {
+  body {
+    background-color: orangered;
+  }
+} */
+
+/* https://caniuse.com/css-container-queries-style */
+@container style(--theme: dark) {
+  .card {
+    background: black;
+    color: white;
+  }
+
+  .card > * {
+    color: white;
+  }
+}
+
+.primary-content,
+.cards {
+  container-type: inline-size;
+}
+
+main {
+  display: grid;
+  gap: 1rem;
+}
+
+@media (min-width: 760px) {
+  main {
+    grid-template-columns: 1fr 300px;
+  }
+}
+
+.cards {
+  /* container-type: inline-size;
+  container-name: card-grid; */
+  container: card-grid / inline-size;
+}
+
+.card {
+  display: grid;
+  gap: 1rem;
+}
+
+.card h2 {
+  font-size: clamp(1.5rem, 10cqi, 3rem);
+  /* cqi = 10% of a query container's inline size */
+  /* cqb is based on the block size */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries */
+  /* https://caniuse.com/css-container-queries */
+}
+
+@container card-grid (min-width: 45ch) {
+  .card {
+    /*     background: yellow; */
+    grid-template-columns: auto minmax(25ch, 1fr);
+  }
+
+  .card h2 {
+    grid-column: 1 / -1;
+  }
+}
+
+@layer demo {
+  h1,
+  p {
+    color: white;
+  }
+
+  img {
+    max-width: 100%;
+    border-radius: 0.25rem;
+  }
+
+  .wrapper {
+    width: min(100% - 3rem, 1200px);
+    margin-inline: auto;
+  }
+
+  .cards {
+    display: grid;
+    gap: 1.5rem;
+    min-height: 100vh;
+    align-content: start;
+  }
+
+  .card {
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 15px 15px rgb(0 0 0 / 0.25);
+    padding: 0.75rem;
+  }
+
+  .card > * {
+    margin: 0;
+    color: #000;
+  }
+}
diff --git a/README.md b/README.md
index 4704ded..967b360 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,12 @@
 # 100 Projects In 100 Days - HTML, CSS & JavaScript
 
-100+ mini web projects using HTML, CSS and 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.
 
-[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
+[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                                                |
 | :-: | ---------------------------------------------------------------------- | -------------------------------------------------------- |
@@ -106,13 +110,54 @@
 | 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.
+
+## 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
 
-This repository is mostly based on 2 courses by Brad Traversy (2020):
+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/)
 
-The other projects are adapted from various YouTube channels:
+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)
@@ -121,3 +166,7 @@ The other projects are adapted from various YouTube channels:
 - 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!