diff --git a/001-expanding cards/style.css b/001-expanding cards/style.css
index 03f7979..d2568ea 100644
--- a/001-expanding cards/style.css	
+++ b/001-expanding cards/style.css	
@@ -57,8 +57,13 @@ body {
     width: 100vw;
   }
 
-  .panel:nth-of-type(4),
-  .panel:nth-of-type(5) {
-    display: none;
+  .panel {
+    flex: 1;
+    margin: 5px;
+    height: 40vh;
+  }
+
+  .panel.active {
+    flex: 3;
   }
 }
diff --git a/002-progress steps/index.html b/002-progress steps/index.html
index 07e7c79..b6c0e27 100644
--- a/002-progress steps/index.html	
+++ b/002-progress steps/index.html	
@@ -10,10 +10,10 @@
     <div class="container">
       <div class="progress-container">
         <div class="progress" id="progress"></div>
-        <div class="circle active">1</div>
-        <div class="circle">2</div>
-        <div class="circle">3</div>
-        <div class="circle">4</div>
+        <div class="step active">1</div>
+        <div class="step">2</div>
+        <div class="step">3</div>
+        <div class="step">4</div>
       </div>
       <button class="btn" id="prev" disabled>Prev</button>
       <button class="btn" id="next">Next</button>
diff --git a/002-progress steps/script.js b/002-progress steps/script.js
index 024a72d..2bd502f 100644
--- a/002-progress steps/script.js	
+++ b/002-progress steps/script.js	
@@ -1,13 +1,13 @@
 const progress = document.getElementById("progress");
 const prev = document.getElementById("prev");
 const next = document.getElementById("next");
-const circles = document.querySelectorAll(".circle");
+const steps = document.querySelectorAll(".step");
 
 let currentActive = 1;
 
 next.addEventListener("click", () => {
   currentActive++;
-  if (currentActive > circles.length) currentActive = circles.length;
+  if (currentActive > steps.length) currentActive = steps.length;
   update();
 });
 
@@ -18,15 +18,15 @@ prev.addEventListener("click", () => {
 });
 
 const update = () => {
-  circles.forEach((circle, index) => {
-    if (index < currentActive) circle.classList.add("active");
-    else circle.classList.remove("active");
+  steps.forEach((step, index) => {
+    if (index < currentActive) step.classList.add("active");
+    else step.classList.remove("active");
   });
   const actives = document.querySelectorAll(".active");
   progress.style.width =
-    ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
+    ((actives.length - 1) / (steps.length - 1)) * 100 + "%";
   if (currentActive === 1) prev.disabled = true;
-  else if (currentActive === circles.length) next.disabled = true;
+  else if (currentActive === steps.length) next.disabled = true;
   else {
     prev.disabled = false;
     next.disabled = false;
diff --git a/002-progress steps/style.css b/002-progress steps/style.css
index b4dfe95..78c4f1c 100644
--- a/002-progress steps/style.css	
+++ b/002-progress steps/style.css	
@@ -57,7 +57,7 @@ body {
   transition: 0.4s ease;
 }
 
-.circle {
+.step {
   background-color: #fff;
   color: #999;
   border-radius: 50%;
@@ -70,7 +70,7 @@ body {
   transition: 0.4s ease;
 }
 
-.circle.active {
+.step.active {
   border-color: var(--line-border-fill);
 }
 
diff --git a/005-blurry loading/style.css b/005-blurry loading/style.css
index 86f6405..99ac86a 100644
--- a/005-blurry loading/style.css	
+++ b/005-blurry loading/style.css	
@@ -23,7 +23,6 @@ body {
   width: calc(100vw + 60px);
   height: calc(100vh + 60px);
   z-index: -1;
-  filter: blur(0px);
 }
 
 .loading-text {
diff --git a/008-form wave animation/script.js b/008-form wave animation/script.js
index f13a433..0b28a83 100644
--- a/008-form wave animation/script.js	
+++ b/008-form wave animation/script.js	
@@ -1,11 +1,15 @@
 const labels = document.querySelectorAll(".form-control label");
 
-labels.forEach((label) => {
-  label.innerHTML = label.innerText
+function createWaveLabel(text) {
+  return text
     .split("")
     .map(
       (letter, idx) =>
         `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
     )
     .join("");
+}
+
+labels.forEach((label) => {
+  label.innerHTML = createWaveLabel(label.innerText);
 });
diff --git a/012-FAQ collapse/script.js b/012-FAQ collapse/script.js
index f2274a5..a630e75 100644
--- a/012-FAQ collapse/script.js	
+++ b/012-FAQ collapse/script.js	
@@ -1,4 +1,5 @@
-const toggles = document.querySelectorAll(".faq-toggle");
+const faqContainer = document.querySelector(".faq-container");
+const toggles = faqContainer.querySelectorAll(".faq-toggle");
 
 toggles.forEach((toggle) => {
   toggle.addEventListener("click", () => {
diff --git a/013-random choice picker/script.js b/013-random choice picker/script.js
index b4bbb2e..a3244e2 100644
--- a/013-random choice picker/script.js	
+++ b/013-random choice picker/script.js	
@@ -15,8 +15,7 @@ const createTags = (input) => {
   });
 };
 
-const pickRandomTag = () => {
-  const tags = document.querySelectorAll(".tag");
+const pickRandomTag = (tags) => {
   return tags[Math.floor(Math.random() * tags.length)];
 };
 
@@ -25,9 +24,10 @@ const highlightTag = (tag) => tag.classList.add("highlight");
 const unHighlightTag = (tag) => tag.classList.remove("highlight");
 
 const randomSelect = () => {
+  const tags = tagsElements.querySelectorAll(".tag");
   const times = 30;
   const interval = setInterval(() => {
-    const randomTag = pickRandomTag();
+    const randomTag = pickRandomTag(tags);
     highlightTag(randomTag);
     setTimeout(() => {
       unHighlightTag(randomTag);
@@ -37,7 +37,7 @@ const randomSelect = () => {
   setTimeout(() => {
     clearInterval(interval);
     setTimeout(() => {
-      const randomTag = pickRandomTag();
+      const randomTag = pickRandomTag(tags);
       highlightTag(randomTag);
     }, 100);
   }, times * 100);
diff --git a/014-animated navigation/style.css b/014-animated navigation/style.css
index 1d0b987..babc091 100644
--- a/014-animated navigation/style.css	
+++ b/014-animated navigation/style.css	
@@ -31,6 +31,7 @@ nav {
   border-radius: 3px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   transition: width 0.6s linear;
+  overflow-x: hidden;
 }
 
 nav.active {
@@ -44,7 +45,7 @@ nav ul {
   margin: 0;
   width: 0;
   transition: width 0.6s linear;
-  overflow-x: hidden;
+  gap: 20px;
 }
 
 nav.active ul {
@@ -66,7 +67,6 @@ nav ul a {
   position: relative;
   color: #000;
   text-decoration: none;
-  margin: 0 10px;
 }
 
 .icon {
@@ -105,3 +105,15 @@ nav.active .icon .line1 {
 nav.active .icon .line2 {
   transform: rotate(765deg) translateY(-5.5px);
 }
+
+@media (max-width: 350px) {
+  nav.active {
+    width: 100%;
+    height: 150px;
+  }
+
+  nav.active ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
diff --git a/015-incrementing counter/index.html b/015-incrementing counter/index.html
index 3e79cf0..8197666 100644
--- a/015-incrementing counter/index.html	
+++ b/015-incrementing counter/index.html	
@@ -13,21 +13,21 @@
     <title>Increment Counter</title>
   </head>
   <body>
-    <div class="counter-container">
+    <article class="counter-container">
       <i class="fab fa-instagram fa-3x"></i>
       <div class="counter" data-target="12000"></div>
       <span>Instagram Followers</span>
-    </div>
-    <div class="counter-container">
+    </article>
+    <article class="counter-container">
       <i class="fab fa-youtube fa-3x"></i>
       <div class="counter" data-target="5000"></div>
       <span>YouTube Subscribers</span>
-    </div>
-    <div class="counter-container">
+    </article>
+    <article class="counter-container">
       <i class="fab fa-facebook fa-3x"></i>
       <div class="counter" data-target="7500"></div>
       <span>Facebook Fans</span>
-    </div>
+    </article>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/015-incrementing counter/style.css b/015-incrementing counter/style.css
index 4b017ef..2651aeb 100644
--- a/015-incrementing counter/style.css	
+++ b/015-incrementing counter/style.css	
@@ -27,6 +27,7 @@ body {
 .counter {
   font-size: 60px;
   margin-top: 10px;
+  min-width: 5ch;
 }
 
 @media (max-width: 580px) {
diff --git a/018-background slider/style.css b/018-background slider/style.css
index 00dd61b..dfd243e 100644
--- a/018-background slider/style.css	
+++ b/018-background slider/style.css	
@@ -26,7 +26,6 @@ body::before {
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.7);
-  z-index: -1;
 }
 
 .slider-container {
diff --git a/019-theme clock/index.html b/019-theme clock/index.html
index e3333dc..285fee1 100644
--- a/019-theme clock/index.html	
+++ b/019-theme clock/index.html	
@@ -8,16 +8,16 @@
   </head>
   <body>
     <button class="toggle">Dark mode</button>
-    <div class="clock-container">
-      <div class="clock">
-        <div class="needle hour"></div>
-        <div class="needle minute"></div>
-        <div class="needle second"></div>
-        <div class="center-point"></div>
-      </div>
-      <div class="time"></div>
+    <section class="clock-container">
+      <figure class="clock" aria-label="Analog clock">
+        <span class="needle hour"></span>
+        <span class="needle minute"></span>
+        <span class="needle second"></span>
+        <span class="center-point"></span>
+      </figure>
+      <time class="time" aria-live="polite"></time>
       <div class="date"></div>
-    </div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/019-theme clock/script.js b/019-theme clock/script.js
index e4b0f84..2af40a4 100644
--- a/019-theme clock/script.js	
+++ b/019-theme clock/script.js	
@@ -4,6 +4,7 @@ const secondElement = document.querySelector(".second");
 const timeElement = document.querySelector(".time");
 const dateElement = document.querySelector(".date");
 const toggle = document.querySelector(".toggle");
+const html = document.querySelector("html");
 
 const days = [
   "Sunday",
@@ -30,7 +31,6 @@ const months = [
 ];
 
 toggle.addEventListener("click", (e) => {
-  const html = document.querySelector("html");
   if (html.classList.contains("dark")) {
     html.classList.remove("dark");
     e.target.innerHTML = "Dark mode";
diff --git a/019-theme clock/style.css b/019-theme clock/style.css
index 3ab6945..9292fc1 100644
--- a/019-theme clock/style.css	
+++ b/019-theme clock/style.css	
@@ -16,9 +16,6 @@ html {
 html.dark {
   --primary-color: #fff;
   --secondary-color: #333;
-}
-
-html.dark {
   background-color: #111;
   color: var(--primary-color);
 }
diff --git a/020-button ripple effect/script.js b/020-button ripple effect/script.js
index eb16e14..b339c64 100644
--- a/020-button ripple effect/script.js	
+++ b/020-button ripple effect/script.js	
@@ -1,13 +1,19 @@
 const buttons = document.querySelectorAll(".ripple");
 
+function getClickPosition(e, element) {
+  const x = e.clientX;
+  const y = e.clientY;
+  const buttonTop = element.offsetTop;
+  const buttonLeft = element.offsetLeft;
+  return {
+    xInside: x - buttonLeft,
+    yInside: y - buttonTop,
+  };
+}
+
 buttons.forEach((button) => {
   button.addEventListener("click", function (e) {
-    const x = e.clientX;
-    const y = e.clientY;
-    const buttonTop = e.target.offsetTop;
-    const buttonLeft = e.target.offsetLeft;
-    const xInside = x - buttonLeft;
-    const yInside = y - buttonTop;
+    const { xInside, yInside } = getClickPosition(e, this);
     const circle = document.createElement("span");
     circle.classList.add("circle");
     circle.style.top = yInside + "px";
