From 25b015aaf7784c166f2a8811c58644b25af8bb83 Mon Sep 17 00:00:00 2001
From: Anna <a.rcottrill521@gmail.com>
Date: Thu, 9 Jan 2025 05:21:23 -0500
Subject: [PATCH] chore(curriculum): use specific asserts workshop balance
 (#57608)

---
 .../61fd5a93fd62bb35968adeab.md               | 12 +--
 .../61fd6343fb42013d99bcd7f3.md               | 18 ++--
 .../61fd66c687e610436494c6f1.md               | 16 ++-
 .../61fd67a656743144844941cb.md               | 34 +++++--
 .../61fd6ab779390f49148773bb.md               | 18 ++--
 .../61fd6b7c83dbf54a08cf0498.md               | 25 +++--
 .../61fd6cc9475a784b7776233e.md               | 18 ++--
 .../61fd70336ebb3e4f62ee81ba.md               | 19 ++--
 .../61fd719788899952e67692b9.md               | 29 +++---
 .../61fd71d596e8f253b9408b39.md               | 40 +++++---
 .../61fd75ea7f663457612dba02.md               | 51 ++++++----
 .../61fd7648a7ba2e5882436831.md               | 24 ++---
 .../61fd778081276b59d59abad6.md               | 71 +++++++++-----
 .../61fd77f7ad2aeb5ae34d07d6.md               | 68 +++++++++----
 .../61fd78621573aa5e8b512f5e.md               | 65 +++++++++----
 .../61fd7a160ed17960e971f28b.md               | 55 +++++++----
 .../61fd7b3fcaa5406257abc5d1.md               | 41 ++++++--
 .../61fd8e491324ce717da97ffe.md               | 23 +++--
 .../61fd8fd08af43372f02952d0.md               | 46 ++++++---
 .../61fd9126aa72a474301fc49f.md               | 45 +++++----
 .../61fd933ba685de776a94997e.md               | 82 ++++++++++++----
 .../61fd94056e0355785fbba4d3.md               | 80 +++++++++++----
 .../61fd986ddbcbd47ba8fbc5ec.md               | 80 +++++++++++----
 .../61fd990577d8227dd93fbeeb.md               | 80 +++++++++++----
 .../61fd9a4ff2fc4481b9157bd7.md               | 48 ++++++---
 .../61fd9ad665a4a282c8106be3.md               | 71 +++++++++-----
 .../61fd9b7285bde783ad5b8aac.md               | 94 +++++++++++++-----
 .../61fd9d9fbdfe078800317055.md               | 43 +++++---
 .../61fda307bde0b091cf7d884a.md               | 48 +++++----
 .../61fda339eadcfd92a6812bed.md               | 47 +++++----
 .../61fdac1e31692f9a9ad97295.md               | 48 ++++++---
 .../61fdaea3999cb19d76ce717b.md               | 48 ++++++---
 .../61fdaf9ff894b6a084ecdc1b.md               | 48 ++++++---
 .../61fdafe6f07fd7a1c6785bc2.md               | 55 +++++++----
 .../61fdb04d9939f0a26ca51c2b.md               | 51 ++++++----
 .../620159cd5431aa34bc6a4c9c.md               | 55 +++++++----
 .../62015a5da1c95c358f079ebb.md               | 45 ++++++---
 .../62015cd2654a1139321a89d2.md               | 45 ++++++---
 .../62015d8942384c3aed48329e.md               | 57 +++++++----
 .../620167374bb8b4455cd11125.md               | 62 ++++++++----
 .../620174ed519dd7506c1a4b61.md               | 46 ++++++---
 .../620175b3710a0951cfa86edf.md               | 53 ++++++----
 .../6201782cc420715562f36271.md               | 59 +++++++----
 .../620179bc0a6a2358c72b90ad.md               | 43 +++++---
 .../62017b6f47454059bf2d3bd1.md               | 45 ++++++---
 .../62017f47c87be96457c49f46.md               | 97 ++++++++++++-------
 .../62017fa5bbef406580ceb44f.md               | 45 +++++----
 .../62018243f046a368fab8ffb6.md               | 50 ++++++----
 .../6201830cb0c74b69f1b41635.md               | 53 ++++++----
 .../620186f4b6b8356d2def576b.md               | 57 +++++++----
 .../62018ba1aa263770c953be66.md               | 55 +++++++----
 .../62018c3e94434a71af1d5eaa.md               | 57 +++++++----
 .../62018ec29b3ae674f40bef31.md               | 43 +++++---
 .../62019093fe30e278e797d2f6.md               | 50 ++++++----
 .../620191707bc65579ddd3ce15.md               | 52 ++++++----
 .../620192a767533a7ad19d96d7.md               | 52 ++++++----
 .../6201995d9ab88e80f1989dce.md               | 45 ++++++---
 .../620199c7a7a32c81d4db3410.md               | 43 +++++---
 .../6201a1a7af32c287bd6b8183.md               | 43 ++++----
 .../6201a1cc668a34888f5b2f52.md               | 48 +++++----
 .../6201a20d742f5c89736c8cfb.md               | 57 +++++++----
 .../6201a42e39bf3b95b6a33bf3.md               | 73 ++++++++++----
 .../6201a4adcc6414968b391592.md               | 48 +++++----
 .../6201a5258af7b398b030bfaf.md               | 57 +++++++----
 .../6201a59be346d399c21d10b1.md               | 92 +++++++++++-------
 .../64076bbeba941114b0027b6a.md               | 41 +++++---
 66 files changed, 2216 insertions(+), 1093 deletions(-)

diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
index 29bc96e2c88..687ad8d2f1f 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -15,25 +15,25 @@ Begin your project by giving your `head` element a `link` element for your style
 Your code should have a `link` element.
 
 ```js
-assert(/<link/.test(code))
+assert.match(code, /<link/);
 ```
 
 Your `link` element should be within your `head` element.
 
 ```js
-assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+assert.match(code, /<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i);
 ```
 
 Your `link` element should have a `rel` attribute with the value `stylesheet`.
 
 ```js
-assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/);
 ```
 
 Your `link` element should have an `href` attribute with the value `styles.css`.
 
 ```js
-assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/);
 ```
 
 # --seed--
@@ -45,8 +45,8 @@ assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
 <html lang="en">
 --fcc-editable-region--
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
     
   </head>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
index 6b933db49dd..f4e4001af5b 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -11,16 +11,22 @@ Within your `body` element, nest a `section` element within a `main` element.
 
 # --hints--
 
-The first element inside the `body` element should be your `main` element. 
+The first element inside the `body` element should be your `main` element.
 
 ```js
-assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+assert.strictEqual(
+  document.querySelector('body')?.children?.[0]?.localName,
+  'main'
+);
 ```
 
 You should have a `section` element within your `main` element.
 
 ```js
-assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+assert.strictEqual(
+  document.querySelector('main')?.children?.[0]?.localName,
+  'section'
+);
 ```
 
 # --seed--
@@ -31,10 +37,10 @@ assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
 --fcc-editable-region--
   <body>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
index 345621fb1db..8dc7a90510f 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
@@ -14,13 +14,19 @@ Within your `section` element, add an `h1` element with a nested `span` element.
 Your `section` element should have an `h1` element.
 
 ```js
-assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+assert.strictEqual(
+  document.querySelector('section')?.children?.[0]?.localName,
+  'h1'
+);
 ```
 
 Your `h1` element should have a `span` element.
 
 ```js
-assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+assert.strictEqual(
+  document.querySelector('h1')?.children?.[0]?.localName,
+  'span'
+);
 ```
 
 # --seed--
@@ -31,10 +37,10 @@ assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
index 0be766dccc7..027048c2587 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
@@ -16,33 +16,47 @@ Give your existing `span` the `class` attribute set to `flex`, and add two `span
 Your existing `span` element should have the `class` attribute set to `flex`.
 
 ```js
-assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+assert.isTrue(
+  document.querySelector('h1')?.children?.[0]?.classList?.contains('flex')
+);
 ```
 
 Your existing `span` element should have two new `span` elements within it.
 
 ```js
-assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
-assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+assert.strictEqual(
+  document.querySelector('.flex')?.children?.[0]?.localName,
+  'span'
+);
+assert.strictEqual(
+  document.querySelector('.flex')?.children?.[1]?.localName,
+  'span'
+);
 ```
 
 Your new `span` elements should not have a `class` attribute.
 
 ```js
-assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
-assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+assert.isEmpty(document.querySelector('.flex')?.children?.[0]?.classList);
+assert.isEmpty(document.querySelector('.flex')?.children?.[1]?.classList);
 ```
 
 Your first new `span` element should have the text `AcmeWidgetCorp`.
 
 ```js
-assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+assert.strictEqual(
+  document.querySelector('.flex')?.children?.[0]?.textContent,
+  'AcmeWidgetCorp'
+);
 ```
 
 Your second new `span` element should have the text `Balance Sheet`.
 
 ```js
-assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+assert.strictEqual(
+  document.querySelector('.flex')?.children?.[1]?.textContent,
+  'Balance Sheet'
+);
 ```
 
 # --seed--
@@ -53,10 +67,10 @@ assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
index 2d5052298f7..69cabaee694 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
@@ -14,19 +14,25 @@ Below your `h1` element, create a `div` element. Give it an `id` attribute set t
 You should create a new `div` element after your `h1` element.
 
 ```js
-assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+assert.strictEqual(
+  document.querySelector('h1')?.nextElementSibling?.localName,
+  'div'
+);
 ```
 
 Your new `div` element should have an `id` attribute set to `years`.
 
 ```js
-assert(document.querySelector('div')?.getAttribute('id') === 'years');
+assert.strictEqual(document.querySelector('div')?.getAttribute('id'), 'years');
 ```
 
 Your new `div` element should have the `aria-hidden` attribute set to `true`.
 
 ```js
-assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+assert.strictEqual(
+  document.querySelector('div')?.getAttribute('aria-hidden'),
+  'true'
+);
 ```
 
 # --seed--
@@ -37,10 +43,10 @@ assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
index f01ff5c2b64..f49e38e94b2 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -14,32 +14,41 @@ Within your `div` element, add three `span` elements. Give each of them a `class
 Your `div` element should have three `span` elements.
 
 ```js
-assert(document.querySelector('div')?.children?.length === 3);
+assert.lengthOf(document.querySelector('div')?.children, 3);
 ```
 
 Each `span` element should have a `class` attribute set to `year`.
 
 ```js
 const spans = [...document.querySelector('div')?.children];
-spans.forEach(span => assert(span?.classList?.contains('year')));
+spans.forEach(span => assert.isTrue(span?.classList?.contains('year')));
 ```
 
 Your first `span` should have the text `2019`.
 
 ```js
-assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+assert.strictEqual(
+  document.querySelector('div')?.children?.[0]?.textContent,
+  '2019'
+);
 ```
 
 Your second `span` should have the text `2020`.
 
 ```js
-assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+assert.strictEqual(
+  document.querySelector('div')?.children?.[1]?.textContent,
+  '2020'
+);
 ```
 
 Your third `span` should have the text `2021`.
 
 ```js
-assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+assert.strictEqual(
+  document.querySelector('div')?.children?.[2]?.textContent,
+  '2021'
+);
 ```
 
 # --seed--
@@ -50,10 +59,10 @@ assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
index b8ccec8b812..976cf2fc69b 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -16,27 +16,29 @@ Within that, add three `table` elements. You will be using CSS to style these in
 You should create a new `div` element.
 
 ```js
-assert(document.querySelectorAll('div')?.length === 2);
+assert.lengthOf(document.querySelectorAll('div'), 2);
 ```
 
 Your new `div` element should have the `class` set to `table-wrap`.
 
 ```js
-assert(document.querySelector('.table-wrap')?.localName === 'div');
+assert.strictEqual(document.querySelector('.table-wrap')?.localName, 'div');
 ```
 
 Your `.table-wrap` element should come after your existing `div`.
 
 ```js
-assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+assert.isTrue(
+  document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap')
+);
 ```
 
 Your `.table-wrap` element should have three `table` elements.
 
 ```js
 const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
-assert(children?.length === 3);
-children.forEach(child => assert(child?.localName === 'table'));
+assert.lengthOf(children, 3);
+children.forEach(child => assert.strictEqual(child?.localName, 'table'));
 ```
 
 # --seed--
@@ -47,10 +49,10 @@ children.forEach(child => assert(child?.localName === 'table'));
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
index 630d13d656d..889a4056a4e 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -16,13 +16,16 @@ Add a `caption` element to your first `table`, and give it the text `Assets`.
 Your first `table` element should have a `caption` element.
 
 ```js
-assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+assert.strictEqual(
+  document.querySelector('table')?.children?.[0]?.localName,
+  'caption'
+);
 ```
 
 Your `caption` element should have the text `Assets`.
 
 ```js
-assert(document.querySelector('caption')?.textContent === 'Assets');
+assert.strictEqual(document.querySelector('caption')?.textContent, 'Assets');
 ```
 
 # --seed--
@@ -33,10 +36,10 @@ assert(document.querySelector('caption')?.textContent === 'Assets');
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -57,10 +60,8 @@ assert(document.querySelector('caption')?.textContent === 'Assets');
           <table>
           </table>
 --fcc-editable-region--
-          <table>
-          </table>
-          <table>
-          </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
index 2e0c363fd16..2664216437b 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
@@ -16,25 +16,34 @@ Add a `thead` and `tbody` to your first `table`, below the `caption` element.
 Your first `table` element should have a `thead` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+const table = document.querySelectorAll('table')?.[0];
+assert.isNotNull(table?.querySelector('thead'));
 ```
 
 Your first `table` element should have a `tbody` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+const table = document.querySelectorAll('table')?.[0];
+const tbody = table?.querySelector('tbody');
+assert.isNotNull(tbody);
 ```
 
 Your `thead` element should be immediately below your `caption` element.
 
 ```js
-assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+assert.strictEqual(
+  document.querySelector('caption')?.nextElementSibling?.localName,
+  'thead'
+);
 ```
 
 Your `tbody` element should be immediately below your `thead` element.
 
 ```js
-assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+assert.strictEqual(
+  document.querySelector('thead')?.nextElementSibling?.localName,
+  'tbody'
+);
 ```
 
 # --seed--
@@ -45,10 +54,10 @@ assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -70,10 +79,8 @@ assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody
             <caption>Assets</caption>
           </table>
 --fcc-editable-region--
-          <table>
-          </table>
-          <table>
-          </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
index 083e60b9e97..b09950ba7ae 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -16,21 +16,36 @@ The `td` element indicates a data cell, while the `th` element indicates a heade
 Your `thead` element should have a `tr` element.
 
 ```js
-assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+assert.strictEqual(
+  document.querySelector('thead')?.children?.[0]?.localName,
+  'tr'
+);
 ```
 
 Your `tr` element should have a `td` element as the first child.
 
 ```js
-assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+assert.strictEqual(
+  document.querySelector('tr')?.children?.[0]?.localName,
+  'td'
+);
 ```
 
 Your `tr` element should have three `th` elements, after the `td` element.
 
 ```js
-assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
-assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
-assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+assert.strictEqual(
+  document.querySelector('tr')?.children?.[1]?.localName,
+  'th'
+);
+assert.strictEqual(
+  document.querySelector('tr')?.children?.[2]?.localName,
+  'th'
+);
+assert.strictEqual(
+  document.querySelector('tr')?.children?.[3]?.localName,
+  'th'
+);
 ```
 
 # --seed--
@@ -41,10 +56,10 @@ assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -67,13 +82,10 @@ assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
             <thead>
             </thead>
 --fcc-editable-region--
-            <tbody>
-            </tbody>
-          </table>
-          <table>
-          </table>
-          <table>
+            <tbody></tbody>
           </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
index 2bb77338777..55be22c57c2 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
@@ -20,8 +20,8 @@ Each of your `th` elements should have a `span` element.
 ```js
 const ths = [...document.querySelectorAll('th')];
 ths?.forEach(th => {
-  assert(th?.children?.length === 1);
-  assert(th?.children?.[0]?.localName === 'span');
+  assert.lengthOf(th?.children, 1);
+  assert.strictEqual(th?.children?.[0]?.localName, 'span');
 });
 ```
 
@@ -30,40 +30,56 @@ Each of your new `span` elements should have the `class` attribute set to `sr-on
 ```js
 const ths = [...document.querySelectorAll('th')];
 ths?.forEach(th => {
-  assert(th?.children?.[0]?.classList?.contains('sr-only'));
-  assert(th?.children?.[0]?.classList?.contains('year'));
+  assert.isTrue(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert.isTrue(th?.children?.[0]?.classList?.contains('year'));
 });
 ```
 
 Your first `span` element should have the text `2019`.
 
 ```js
-assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+assert.strictEqual(
+  document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent,
+  '2019'
+);
 ```
 
 Your second `span` element should have the text `2020`.
 
 ```js
-assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+assert.strictEqual(
+  document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent,
+  '2020'
+);
 ```
 
 Your third `span` element should have the text `2021`.
 
 ```js
-assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+assert.strictEqual(
+  document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent,
+  '2021'
+);
 ```
 
 Your third `th` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+assert.isTrue(
+  document
+    .querySelector('table')
+    ?.querySelectorAll('th')?.[2]
+    ?.classList?.contains('current')
+);
 ```
 
 Your `td` element should be empty.
 
 ```js
-assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
-assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+const table = document.querySelector('table');
+const tableData = table.querySelectorAll('td')?.[0];
+assert.strictEqual(tableData?.textContent, '');
+assert.isEmpty(tableData?.children);
 ```
 
 # --seed--
@@ -74,10 +90,10 @@ assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.l
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -106,13 +122,10 @@ assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.l
               </tr>
             </thead>
 --fcc-editable-region--
-            <tbody>
-            </tbody>
-          </table>
-          <table>
-          </table>
-          <table>
+            <tbody></tbody>
           </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
index e45bc92ba64..67ff1e8dd86 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -15,8 +15,8 @@ Your `tbody` element should have four `tr` elements.
 
 ```js
 const children = [...document.querySelector('tbody')?.children];
-assert(children?.length === 4);
-children.forEach(child => assert(child?.localName === 'tr'));
+assert.lengthOf(children, 4);
+children.forEach(child => assert.strictEqual(child?.localName, 'tr'));
 ```
 
 Your first three `tr` elements should have the `class` attribute set to `data`.
@@ -25,7 +25,7 @@ Your first three `tr` elements should have the `class` attribute set to `data`.
 const children = [...document.querySelector('tbody')?.children];
 children.forEach((child, index) => {
   if (index < 3) {
-    assert(child?.classList?.contains('data'));
+    assert.isTrue(child?.classList?.contains('data'));
   }
 });
 ```
@@ -34,7 +34,7 @@ Your fourth `tr` element should have the `class` attribute set to `total`.
 
 ```js
 const children = [...document.querySelector('tbody')?.children];
-assert(children?.[3]?.classList?.contains('total'));
+assert.isTrue(children?.[3]?.classList?.contains('total'));
 ```
 
 # --seed--
@@ -45,10 +45,10 @@ assert(children?.[3]?.classList?.contains('total'));
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -66,7 +66,9 @@ assert(children?.[3]?.classList?.contains('total'));
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -80,10 +82,8 @@ assert(children?.[3]?.classList?.contains('total'));
             </tbody>
 --fcc-editable-region--
           </table>
-          <table>
-          </table>
-          <table>
-          </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
index c2f94c4d531..c02615cbb39 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
@@ -16,55 +16,83 @@ Following that, add three `td` elements with the following text (in order): `$25
 Your first `tr` should have a `th` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(
+  tableRow?.querySelector('th')?.innerText,
+  'Cash This is the cash we currently have on hand.'
+);
 ```
 
 You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'This is the cash we currently have on hand.'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('description')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$25`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$25');
 ```
 
 Your second `td` element should have the text `$30`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$30');
 ```
 
 Your third `td` element should have the text `$28`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$28');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[0];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -75,10 +103,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelect
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +124,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelect
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -110,18 +140,13 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelect
               <tr class="data">
               </tr>
 --fcc-editable-region--
-              <tr class="data">
-              </tr>
-              <tr class="data">
-              </tr>
-              <tr class="total">
-              </tr>
+              <tr class="data"></tr>
+              <tr class="data"></tr>
+              <tr class="total"></tr>
             </tbody>
           </table>
-          <table>
-          </table>
-          <table>
-          </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
index 6c5d1804d52..2bf07f09806 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -16,55 +16,83 @@ Following that, add three `td` elements with the following text (in order): `$54
 Your second `tr` should have a `th` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Checking Our primary transactional account.`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(
+  tableRow?.querySelector('th')?.innerText,
+  'Checking Our primary transactional account.'
+);
 ```
 
 You should wrap the text `Our primary transactional account.` in a `span` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'Our primary transactional account.'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('description')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$54`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$54');
 ```
 
 Your second `td` element should have the text `$56`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$56');
 ```
 
 Your third `td` element should have the text `$53`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$53');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[1];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -75,10 +103,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelect
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +124,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelect
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -116,16 +146,12 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelect
               <tr class="data">
               </tr>
 --fcc-editable-region--
-              <tr class="data">
-              </tr>
-              <tr class="total">
-              </tr>
+              <tr class="data"></tr>
+              <tr class="total"></tr>
             </tbody>
           </table>
-          <table>
-          </table>
-          <table>
-          </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
index f36d0c0c001..cd58cd5af74 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -16,55 +16,83 @@ Following that, add three `td` elements with the following text (in order): `$50
 Your third `tr` should have a `th` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Savings Funds set aside for emergencies.`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(
+  tableRow?.querySelector('th')?.innerText,
+  'Savings Funds set aside for emergencies.'
+);
 ```
 
 You should wrap the text `Funds set aside for emergencies.` in a `span` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'Funds set aside for emergencies.'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('description')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$500`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$500');
 ```
 
 Your second `td` element should have the text `$650`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$650');
 ```
 
 Your third `td` element should have the text `$728`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$728');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const tableBody = document.querySelector('tbody');
+const tableRow = tableBody?.querySelectorAll('tr')?.[2];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -75,10 +103,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelect
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +124,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelect
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -122,14 +152,11 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelect
               <tr class="data">
               </tr>
 --fcc-editable-region--
-              <tr class="total">
-              </tr>
+              <tr class="total"></tr>
             </tbody>
           </table>
-          <table>
-          </table>
-          <table>
-          </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
index 2f7c60f29fd..837e2b4d009 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -16,55 +16,76 @@ Following that, add three `td` elements with the following text (in order): `$57
 Your fourth `tr` should have a `th` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+assert.exists(
+  document
+    .querySelector('tbody')
+    ?.querySelectorAll('tr')?.[3]
+    ?.querySelector('th')
+);
 ```
 
 Your `th` element should have the text `Total Assets`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const tableHeader = tableRow.querySelector('th');
+assert.strictEqual(tableHeader.innerText, 'Total Assets');
 ```
 
 You should wrap the text `Assets` in a `span` element.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const span = tableRow.querySelector('th > span');
+assert.strictEqual(span.textContent, 'Assets');
 ```
 
 Your `span` element should have the `class` attribute set to `sr-only`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const span = tableRow.querySelector('th > span');
+assert.isTrue(span?.classList?.contains('sr-only'));
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const tableDatas = tableRow.querySelectorAll('td');
+assert.lengthOf(tableDatas, 3);
 ```
 
 Your first `td` element should have the text `$579`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const tableData = tableRow.querySelectorAll('td')?.[0];
+assert.strictEqual(tableData?.textContent, '$579');
 ```
 
 Your second `td` element should have the text `$736`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const tableData = tableRow.querySelectorAll('td')?.[1];
+assert.strictEqual(tableData?.textContent, '$736');
 ```
 
 Your third `td` element should have the text `$809`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const tableData = tableRow.querySelectorAll('td')?.[2];
+assert.strictEqual(tableData.textContent, '$809');
 ```
 
 Your third `td` element should have the `class` attribute set to `current`.
 
 ```js
-assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
+const tableData = tableRow.querySelectorAll('td')?.[2];
+assert.isTrue(tableData?.classList?.contains('current'));
 ```
 
 # --seed--
@@ -75,10 +96,10 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +117,9 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -130,10 +153,8 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
 --fcc-editable-region--
             </tbody>
           </table>
-          <table>
-          </table>
-          <table>
-          </table>
+          <table></table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
index 184f5dee82a..3715965f2b1 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -14,37 +14,56 @@ Time to move on to your second table. Start by giving it a `caption` element set
 Your second `table` element should have a `caption` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+assert.strictEqual(
+  document.querySelectorAll('table')?.[1]?.children?.[0]?.localName,
+  'caption'
+);
 ```
 
 Your `caption` element should have the text `Liabilities`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+assert.strictEqual(
+  document.querySelectorAll('table')?.[1]?.querySelector('caption')
+    ?.textContent,
+  'Liabilities'
+);
 ```
 
 Your second `table` element should have a `thead` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+assert.isNotNull(
+  document.querySelectorAll('table')?.[1]?.querySelector('thead')
+);
 ```
 
 Your second `table` element should have a `tbody` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+assert.isNotNull(
+  document.querySelectorAll('table')?.[1]?.querySelector('tbody')
+);
 ```
 
 Your `thead` element should be immediately below your `caption` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+const table = document.querySelectorAll('table')?.[1];
+assert.strictEqual(
+  table?.querySelector('caption')?.nextElementSibling?.localName,
+  'thead'
+);
 ```
 
 Your `tbody` element should be immediately below your `thead` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+const table = document.querySelectorAll('table')?.[1];
+assert.strictEqual(
+  table?.querySelector('thead')?.nextElementSibling?.localName,
+  'tbody'
+);
 ```
 
 # --seed--
@@ -55,10 +74,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElem
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -76,7 +95,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElem
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
index 40f7da84cdb..0e6b5eeb5b8 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -14,21 +14,24 @@ Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements
 Your `thead` element should have a `tr` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+const thead = document.querySelectorAll('table')?.[1]?.querySelector('thead');
+assert.strictEqual(thead?.children?.[0]?.localName, 'tr');
 ```
 
 Your `tr` element should have a `td` element as the first child.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+const trElement = document.querySelectorAll('table')?.[1]?.querySelector('tr');
+assert.strictEqual(trElement?.children?.[0]?.localName, 'td');
 ```
 
 Your `tr` element should have three `th` elements, after the `td` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+const trElement = document.querySelectorAll('table')?.[1]?.querySelector('tr');
+assert.strictEqual(trElement?.children?.[1]?.localName, 'th');
+assert.strictEqual(trElement?.children?.[2]?.localName, 'th');
+assert.strictEqual(trElement?.children?.[3]?.localName, 'th');
 ```
 
 # --seed--
@@ -39,10 +42,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -60,7 +63,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
index 55c85fb1338..368f04e5e16 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -14,45 +14,57 @@ Give each `th` element a `span` element with the class set to `sr-only` and the
 Each of your `th` elements should have a `span` element.
 
 ```js
-const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+const ths = [
+  ...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')
+];
 ths?.forEach(th => {
-  assert(th?.children?.length === 1);
-  assert(th?.children?.[0]?.localName === 'span');
+  assert.lengthOf(th?.children, 1);
+  assert.strictEqual(th?.children?.[0]?.localName, 'span');
 });
 ```
 
 Each of your new `span` elements should have the `class` attribute set to `sr-only`.
 
 ```js
-const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+const ths = [
+  ...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')
+];
 ths?.forEach(th => {
-  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert.isTrue(th?.children?.[0]?.classList?.contains('sr-only'));
 });
 ```
 
 Your first `span` element should have the text `2019`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+const table = document.querySelectorAll('table')?.[1];
+const th = table.querySelectorAll('th')?.[0];
+assert.strictEqual(th.children?.[0]?.textContent, '2019');
 ```
 
 Your second `span` element should have the text `2020`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+const table = document.querySelectorAll('table')?.[1];
+const th = table.querySelectorAll('th')?.[1];
+assert.strictEqual(th?.children?.[0]?.textContent, '2020');
 ```
 
 Your third `span` element should have the text `2021`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+const table = document.querySelectorAll('table')?.[1];
+const th = table.querySelectorAll('th')?.[2];
+assert.strictEqual(th?.children?.[0]?.textContent, '2021');
 ```
 
 Your `td` element should be empty.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
-assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+const table = document.querySelectorAll('table')?.[1];
+const td = table.querySelectorAll('td')?.[0];
+assert.strictEqual(td?.textContent, '');
+assert.lengthOf(td?.children, 0);
 ```
 
 # --seed--
@@ -63,10 +75,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.chi
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -84,7 +96,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.chi
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -122,7 +136,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.chi
           </table>
 --fcc-editable-region--
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
                 <td></td>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
index abec451e896..8988341360b 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -14,18 +14,22 @@ Within the `tbody` element, add four `tr` elements. Give the first three the `cl
 Your `tbody` element should have four `tr` elements.
 
 ```js
-const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
-assert(children?.length === 4);
-children.forEach(child => assert(child?.localName === 'tr'));
+const children = [
+  ...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
+];
+assert.lengthOf(children, 4);
+children.forEach(child => assert.strictEqual(child?.localName, 'tr'));
 ```
 
 Your first three `tr` elements should have the `class` attribute set to `data`.
 
 ```js
-const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+const children = [
+  ...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
+];
 children.forEach((child, index) => {
   if (index < 3) {
-    assert(child?.classList?.contains('data'));
+    assert.isTrue(child?.classList?.contains('data'));
   }
 });
 ```
@@ -33,8 +37,10 @@ children.forEach((child, index) => {
 Your fourth `tr` element should have the `class` attribute set to `total`.
 
 ```js
-const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
-assert(children?.[3]?.classList?.contains('total'));
+const children = [
+  ...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children
+];
+assert.isTrue(children?.[3]?.classList?.contains('total'));
 ```
 
 # --seed--
@@ -45,10 +51,10 @@ assert(children?.[3]?.classList?.contains('total'));
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -66,7 +72,9 @@ assert(children?.[3]?.classList?.contains('total'));
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -104,21 +112,22 @@ assert(children?.[3]?.classList?.contains('total'));
           </table>
 --fcc-editable-region--
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
             </tbody>
           </table>
 --fcc-editable-region--
-          <table>
-          </table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
index 59d25200fff..933017853f5 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
@@ -16,55 +16,92 @@ Add three `td` elements below that, and give them the following text, in order:
 Your first `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(
+  tableRow?.querySelector('th')?.innerText,
+  'Loans The outstanding balance on our startup loan.'
+);
 ```
 
 You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'The outstanding balance on our startup loan.'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('description')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$500`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$500');
 ```
 
 Your second `td` element should have the text `$250`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$250');
 ```
 
 Your third `td` element should have the text `$0`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$0');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -133,17 +172,19 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
---fcc-editable-region--
+            --fcc-editable-region--
               <tr class="data">
               </tr>
               <tr class="data">
@@ -155,8 +196,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 --fcc-editable-region--
             </tbody>
           </table>
-          <table>
-          </table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
index 735106d54f9..df993b05d9c 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -16,55 +16,92 @@ Add three `td` elements below that, and give them the following text, in order:
 Your second `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(
+  tableRow?.querySelector('th')?.innerText,
+  'Expenses Annual anticipated expenses, such as payroll.'
+);
 ```
 
 You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'Annual anticipated expenses, such as payroll.'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('description')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$200`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$200');
 ```
 
 Your second `td` element should have the text `$300`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$300');
 ```
 
 Your third `td` element should have the text `$400`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$400');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[1];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -133,13 +172,15 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -159,8 +200,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 --fcc-editable-region--
             </tbody>
           </table>
-          <table>
-          </table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
index 4598e8a76f9..9615e0b00d5 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -16,55 +16,92 @@ Add three `td` elements below that, and give them the following text, in order:
 Your third `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(
+  tableRow?.querySelector('th')?.innerText,
+  'Credit The outstanding balance on our credit card.'
+);
 ```
 
 You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'The outstanding balance on our credit card.'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('description')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$50`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$50');
 ```
 
 Your second `td` element should have the text `$50`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$50');
 ```
 
 Your third `td` element should have the text `$75`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$75');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[2];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -133,13 +172,15 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -163,8 +204,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 --fcc-editable-region--
             </tbody>
           </table>
-          <table>
-          </table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
index 630afca73e9..a1634c2c06a 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -16,55 +16,92 @@ Following that, add three `td` elements with the following text (in order): `$75
 Your fourth `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Total Liabilities`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.strictEqual(
+  tableRow?.querySelector('th')?.innerText,
+  'Total Liabilities'
+);
 ```
 
 You should wrap the text `Liabilities` in a `span` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'Liabilities'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `sr-only`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('sr-only')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$750`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$750');
 ```
 
 Your second `td` element should have the text `$600`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$600');
 ```
 
 Your third `td` element should have the text `$475`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$475');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const table = document.querySelectorAll('table')?.[1];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[3];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -75,10 +112,10 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -96,7 +133,9 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -133,13 +172,15 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -167,8 +208,7 @@ assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySel
 --fcc-editable-region--
             </tbody>
           </table>
-          <table>
-          </table>
+          <table></table>
         </div>
       </section>
     </main>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
index e2d2e4f80ea..292e376b9e9 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -14,37 +14,51 @@ For your third table, add a `caption` with the text `Net Worth`, and set up a ta
 Your third `table` element should have a `caption` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+const table = document.querySelectorAll('table')?.[2];
+assert.strictEqual(table?.children?.[0]?.localName, 'caption');
 ```
 
 Your `caption` element should have the text `Net Worth`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+const table = document.querySelectorAll('table')?.[2];
+assert.strictEqual(table?.querySelector('caption')?.textContent, 'Net Worth');
 ```
 
 Your third `table` element should have a `thead` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+assert.isNotNull(
+  document.querySelectorAll('table')?.[2]?.querySelector('thead')
+);
 ```
 
 Your third `table` element should have a `tbody` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+assert.isNotNull(
+  document.querySelectorAll('table')?.[2]?.querySelector('tbody')
+);
 ```
 
 Your `thead` element should be immediately below your `caption` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+const table = document.querySelectorAll('table')?.[2];
+assert.strictEqual(
+  table?.querySelector('caption')?.nextElementSibling?.localName,
+  'thead'
+);
 ```
 
 Your `tbody` element should be immediately below your `thead` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+const table = document.querySelectorAll('table')?.[2];
+assert.strictEqual(
+  table?.querySelector('thead')?.nextElementSibling?.localName,
+  'tbody'
+);
 ```
 
 # --seed--
@@ -55,10 +69,10 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElem
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -76,7 +90,9 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElem
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -113,13 +129,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElem
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
index a6d495c9075..c28be7b4eb5 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -14,65 +14,84 @@ Within your `thead`, create a `tr` element. In that, add a `td` and three `th` e
 Your `thead` element should have a `tr` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+const table = document.querySelectorAll('table')?.[2];
+assert.strictEqual(
+  table?.querySelector('thead')?.children?.[0]?.localName,
+  'tr'
+);
 ```
 
 Your `tr` element should have a `td` element as the first child.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+const table = document.querySelectorAll('table')?.[2];
+assert.strictEqual(table?.querySelector('tr')?.children?.[0]?.localName, 'td');
 ```
 
 Your `tr` element should have three `th` elements, after the `td` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+const table = document.querySelectorAll('table')?.[2];
+const trElement = table?.querySelector('tr');
+assert.strictEqual(trElement?.children?.[1]?.localName, 'th');
+assert.strictEqual(trElement?.children?.[2]?.localName, 'th');
+assert.strictEqual(trElement?.children?.[3]?.localName, 'th');
 ```
 
 Each of your `th` elements should have a `span` element.
 
 ```js
-const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+const ths = [
+  ...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')
+];
 ths?.forEach(th => {
-  assert(th?.children?.length === 1);
-  assert(th?.children?.[0]?.localName === 'span');
+  assert.lengthOf(th?.children, 1);
+  assert.strictEqual(th?.children?.[0]?.localName, 'span');
 });
 ```
 
 Each of your new `span` elements should have the `class` attribute set to `sr-only`.
 
 ```js
-const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+const ths = [
+  ...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')
+];
 ths?.forEach(th => {
-  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert.isTrue(th?.children?.[0]?.classList?.contains('sr-only'));
 });
 ```
 
 Your first `span` element should have the text `2019`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+const table = document.querySelectorAll('table')?.[2];
+const thead = table.querySelectorAll('th')?.[0];
+assert.strictEqual(thead?.children?.[0]?.textContent, '2019');
 ```
 
 Your second `span` element should have the text `2020`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+const table = document.querySelectorAll('table')?.[2];
+const thead = table.querySelectorAll('th')?.[1];
+assert.strictEqual(thead?.children?.[0]?.textContent, '2020');
 ```
 
 Your third `span` element should have the text `2021`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+const table = document.querySelectorAll('table')?.[2];
+const thead = table.querySelectorAll('th')?.[2];
+assert.strictEqual(thead?.children?.[0]?.textContent, '2021');
 ```
 
 Your `td` element should be empty.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
-assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+const table = document.querySelectorAll('table')?.[2];
+const tableData = table?.querySelectorAll('td')?.[0];
+assert.strictEqual(tableData?.textContent, '');
+assert.isTrue(tableData?.children?.length === 0);
 ```
 
 # --seed--
@@ -83,10 +102,10 @@ assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.chi
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -104,7 +123,9 @@ assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.chi
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -141,13 +162,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.chi
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
index d0c54524887..aebc90b4e1e 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -16,67 +16,105 @@ Then add three `td` elements, giving the third a `class` set to `current`, and g
 Your `tbody` element should have one `tr` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+assert.lengthOf(tbody?.querySelectorAll('tr'), 1);
 ```
 
 Your `tr` element should have the `class` set to `total`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+assert.isTrue(tbody?.querySelector('tr')?.classList?.contains('total'));
 ```
 
 Your `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.isNotNull(tableRow?.querySelector('th'));
 ```
 
 Your `th` element should have the text `Total Net Worth`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelector('th')?.innerText, 'Total Net Worth');
 ```
 
 You should wrap the text `Net Worth` in a `span` element.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(
+  tableRow?.querySelector('th > span')?.textContent,
+  'Net Worth'
+);
 ```
 
 Your `span` element should have the `class` attribute set to `sr-only`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.isTrue(
+  tableRow?.querySelector('th > span')?.classList?.contains('sr-only')
+);
 ```
 
 You should have three `td` elements.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.lengthOf(tableRow?.querySelectorAll('td'), 3);
 ```
 
 Your first `td` element should have the text `$-171`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[0]?.textContent, '$-171');
 ```
 
 Your second `td` element should have the text `$136`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[1]?.textContent, '$136');
 ```
 
 Your third `td` element should have the text `$334`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.strictEqual(tableRow?.querySelectorAll('td')?.[2]?.textContent, '$334');
 ```
 
 Your third `td` element should have the `class` set to `current`.
 
 ```js
-assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+const table = document.querySelectorAll('table')?.[2];
+const tbody = table?.querySelector('tbody');
+const tableRow = tbody?.querySelectorAll('tr')?.[0];
+assert.isTrue(
+  tableRow?.querySelectorAll('td')?.[2]?.classList?.contains('current')
+);
 ```
 
 # --seed--
@@ -87,10 +125,10 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -108,7 +146,9 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -145,13 +185,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -183,13 +225,15 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySel
           </table>
 --fcc-editable-region--
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
index a48fc24190f..788ab7efac5 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -14,13 +14,18 @@ Time to style your table. Start by resetting the box model. Create an `html` sel
 You should have an `html` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('html'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('html'));
 ```
 
 Your `html` selector should have a `box-sizing` property set to `border-box`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('html')
+    ?.getPropertyValue('box-sizing'),
+  'border-box'
+);
 ```
 
 # --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-s
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
index 2830b424adc..68475fec254 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -14,19 +14,27 @@ Create a `body` selector and give it a `font-family` property set to `sans-serif
 You should have a `body` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('body'));
 ```
 
 Your `body` selector should have a `font-family` property set to `sans-serif`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('body')
+    ?.getPropertyValue('font-family'),
+  'sans-serif'
+);
 ```
 
 Your `body` selector should have a `color` property set to `#0a0a23`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color'),
+  'rgb(10, 10, 35)'
+);
 ```
 
 # --seed--
@@ -37,10 +45,10 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +66,9 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +105,15 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +144,15 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
index fb2d7e6f93b..2d94392a3c8 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -11,20 +11,27 @@ Before you get too far into your styling, you should make use of the `sr-only` c
 
 The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
 
-The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
+The `span[class~="sr-only"]` selector will select any `span` element whose `class` _includes_ `sr-only`. Create that selector, and give it a `border` property set to `0`.
 
 # --hints--
 
 You should have an `span[class~="sr-only"]` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')
+);
 ```
 
 Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('border-width'),
+  '0px'
+);
 ```
 
 # --seed--
@@ -35,10 +42,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -56,7 +63,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -93,13 +102,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -130,13 +141,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
index fbb21a27953..380494f283c 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -16,13 +16,23 @@ The `clip-path` property determines the shape the `clip` property should take. S
 Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('clip'),
+  'rect(1px, 1px, 1px, 1px)'
+);
 ```
 
 Your `span[class~="sr-only"] ` selector should have a `clip-path` property set to `inset(50%)`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('clip-path'),
+  'inset(50%)'
+);
 ```
 
 # --seed--
@@ -33,10 +43,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -54,7 +64,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -91,13 +103,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -128,13 +142,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
index e964962f3fd..ad6ad4210ac 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -14,13 +14,23 @@ Now you need to size these elements down. Give your `span[class~="sr-only"]` sel
 Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('width'),
+  '1px'
+);
 ```
 
 Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('height'),
+  '1px'
+);
 ```
 
 # --seed--
@@ -31,10 +41,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +62,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +101,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +140,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
index 0a5c32accf8..d5c562981d5 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -14,13 +14,23 @@ To prevent the text content from overflowing, give your `span[class~="sr-only"]`
 Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('overflow'),
+  'hidden'
+);
 ```
 
 Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('white-space'),
+  'nowrap'
+);
 ```
 
 # --seed--
@@ -31,10 +41,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +62,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +101,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +140,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
index dba20e18298..73548009d3c 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -14,19 +14,34 @@ Finally, you need to take these hidden elements out of the document flow. Give t
 Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('position'),
+  'absolute'
+);
 ```
 
 Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('padding'),
+  '0px'
+);
 ```
 
 Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span[class~="sr-only"]')
+    ?.getPropertyValue('margin'),
+  '-1px'
+);
 ```
 
 # --seed--
@@ -37,10 +52,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +73,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +112,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +151,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPr
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
index f23a9e5e352..898c266a84b 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -14,25 +14,34 @@ Time to style your table heading. Create an `h1` selector. Give it a `max-width`
 You should have an `h1` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('h1'));
 ```
 
 Your `h1` selector should have a `max-width` property set to `37.25rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width'),
+  '37.25rem'
+);
 ```
 
 Your `h1` selector should have a `margin` property set to `0 auto`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin'),
+  '0px auto'
+);
 ```
 
 Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding'),
+  '1.5rem 1.25rem'
+);
 ```
 
 # --seed--
@@ -43,10 +52,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -64,7 +73,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -101,13 +112,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -138,13 +151,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
index 04dd430379e..a8c03118c13 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -14,25 +14,38 @@ Target your flex container with an `h1 .flex` selector. Give it a `display` prop
 You should have an `h1 .flex` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
 ```
 
 Your `h1 .flex` selector should have a `display` property set to `flex`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('h1 .flex')
+    ?.getPropertyValue('display'),
+  'flex'
+);
 ```
 
 Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('h1 .flex')
+    ?.getPropertyValue('flex-direction'),
+  'column-reverse'
+);
 ```
 
 Your `h1 .flex` selector should have a `gap` property set to `1rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap'),
+  '1rem'
+);
 ```
 
 # --seed--
@@ -43,10 +56,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -64,7 +77,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -101,13 +116,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -138,13 +155,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('g
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
index c376c6a27ac..9486c5b6901 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -16,13 +16,20 @@ Give your new selector a `font-size` property of `0.7em` to make it look like a
 You should have an `h1 .flex span:first-of-type` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')
+);
 ```
 
 Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('h1 .flex span:first-of-type')
+    ?.getPropertyValue('font-size'),
+  '0.7em'
+);
 ```
 
 # --seed--
@@ -33,10 +40,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -54,7 +61,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -91,13 +100,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -128,13 +139,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
index 988875664fe..5a9477cd7f3 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
@@ -14,13 +14,20 @@ The `:last-of-type` pseudo-selector does the exact opposite - it targets the las
 You should have an `h1 .flex span:last-of-type` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')
+);
 ```
 
 Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('h1 .flex span:last-of-type')
+    ?.getPropertyValue('font-size'),
+  '1.2em'
+);
 ```
 
 # --seed--
@@ -31,10 +38,10 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +59,9 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +98,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +137,15 @@ assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.g
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
index bea49bb7f91..0d1dfe87fc9 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
@@ -14,25 +14,40 @@ You wrapped your table in a section element - now you can style that to give you
 You should have a `section` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('section'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('section'));
 ```
 
 Your `section` selector should have a `max-width` property set to `40rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('section')
+    ?.getPropertyValue('max-width'),
+  '40rem'
+);
 ```
 
 Your `section` selector should have a `margin` property set to `0 auto`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('section')
+    ?.getPropertyValue('margin'),
+  '0px auto'
+);
 ```
 
 Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('section')
+    ?.getPropertyValue('border'),
+  '2px solid rgb(208, 208, 213)'
+);
 ```
 
 # --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('bo
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
index ec970947325..bc11733863c 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
@@ -14,31 +14,49 @@ The last part of your table heading is your years. Create a `#years` selector, a
 You should have a `#years` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('#years'));
 ```
 
 Your `#years` selector should have a `display` property set to `flex`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years')
+    ?.getPropertyValue('display'),
+  'flex'
+);
 ```
 
 Your `#years` selector should have a `justify-content` property set to `flex-end`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years')
+    ?.getPropertyValue('justify-content'),
+  'flex-end'
+);
 ```
 
 Your `#years` selector should have a `position` property set to `sticky`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years')
+    ?.getPropertyValue('position'),
+  'sticky'
+);
 ```
 
 Your `#years` selector should have a `top` property set to `0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top'),
+  '0px'
+);
 ```
 
 # --seed--
@@ -49,10 +67,10 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -70,7 +88,9 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -107,13 +127,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -144,13 +166,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
index be6eec61b26..bf83441cb30 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -14,13 +14,21 @@ Now apply some color to your `#years`. Make the text `#fff` and the background `
 Your `#years` should have a `color` property set to `#fff`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color'),
+  'rgb(255, 255, 255)'
+);
 ```
 
 Your `#years` should have a `background-color` property set to `#0a0a23`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years')
+    ?.getPropertyValue('background-color'),
+  'rgb(10, 10, 35)'
+);
 ```
 
 # --seed--
@@ -31,10 +39,10 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +60,9 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +99,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +138,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('bac
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
index 9067889bef9..e88ce10c63f 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
@@ -23,14 +23,27 @@ Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25re
 Your `#years` selector should have a `margin` property set to `0 -2px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years')
+    ?.getPropertyValue('margin'),
+  '0px -2px'
+);
 ```
 
 Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
 
 ```js
-const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
-assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+const padding = new __helpers.CSSHelp(document)
+  .getStyle('#years')
+  ?.getPropertyValue('padding');
+assert.include(
+  [
+    '0.5rem calc(1.25rem + 2px) 0.5rem 0px',
+    '0.5rem calc(2px + 1.25rem) 0.5rem 0px'
+  ],
+  padding
+);
 ```
 
 # --seed--
@@ -41,10 +54,10 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -62,7 +75,9 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -99,13 +114,15 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -136,13 +153,15 @@ assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
index bf3e0d8e190..e1de94c4556 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
@@ -16,25 +16,42 @@ Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to t
 You should have a `#years span[class]` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('#years span[class]')
+);
 ```
 
 Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years span[class]')
+    ?.getPropertyValue('font-weight'),
+  'bold'
+);
 ```
 
 Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years span[class]')
+    ?.getPropertyValue('width'),
+  '4.5rem'
+);
 ```
 
 Your `#years span[class]` selector should have a `text-align` property set to `right`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years span[class]')
+    ?.getPropertyValue('text-align'),
+  'right'
+);
 ```
 
 # --seed--
@@ -45,10 +62,10 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -66,7 +83,9 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -103,13 +122,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -140,13 +161,15 @@ assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getProper
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
index 4c0ab4ab20a..88fe94cc637 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -14,13 +14,18 @@ You wrapped your tables in a container with the `table-wrap` class. Create a sel
 You should have a `.table-wrap` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
 ```
 
 Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('.table-wrap')
+    ?.getPropertyValue('padding'),
+  '0px 0.75rem 1.5rem'
+);
 ```
 
 # --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
index df7a3d561d2..af6bf903f99 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -16,13 +16,20 @@ The `:not()` pseudo-selector is used to target all elements that do not match th
 You should have a `span:not(.sr-only)` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')
+);
 ```
 
 Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span:not(.sr-only)')
+    ?.getPropertyValue('font-weight'),
+  'normal'
+);
 ```
 
 # --seed--
@@ -33,10 +40,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -54,7 +61,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -91,13 +100,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -128,13 +139,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getProper
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
index 6563d6a1d2c..d186bc9b71d 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
@@ -17,71 +17,94 @@ Your `span[class~="sr-only"]` selector should have the `border` property set to
 
 ```js
 // log it
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.isTrue(
+  text.includes('border: 0px !important;') ||
+    text.includes('border: 0px none !important')
+);
 ```
 
 Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'clip: rect(1px, 1px, 1px, 1px) !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('clip-path: inset(50%) !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'clip-path: inset(50%) !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('height: 1px !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'height: 1px !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('width: 1px !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'width: 1px !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('position: absolute !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'position: absolute !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('overflow: hidden !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'overflow: hidden !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('white-space: nowrap !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'white-space: nowrap !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('padding: 0px !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'padding: 0px !important;');
 ```
 
 Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
 
 ```js
-const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
-assert(text.includes('margin: -1px !important;'));
+const text = new __helpers.CSSHelp(document).getStyle(
+  'span[class~="sr-only"]'
+)?.cssText;
+assert.include(text, 'margin: -1px !important;');
 ```
 
 # --seed--
@@ -92,10 +115,10 @@ assert(text.includes('margin: -1px !important;'));
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -113,7 +136,9 @@ assert(text.includes('margin: -1px !important;'));
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -150,13 +175,15 @@ assert(text.includes('margin: -1px !important;'));
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -187,13 +214,15 @@ assert(text.includes('margin: -1px !important;'));
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
index 131df23ce99..9a6031ebe4e 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -14,19 +14,24 @@ Now that you have added the `!important` keyword, you can remove the `:not(.sr-o
 You should not have a `span:not(.sr-only)` selector.
 
 ```js
-assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+assert.isNull(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
 ```
 
 You should have a `span` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('span'));
 ```
 
 You should not change the `font-weight`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('span')
+    ?.getPropertyValue('font-weight'),
+  'normal'
+);
 ```
 
 # --seed--
@@ -37,10 +42,10 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +63,9 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +102,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +141,15 @@ assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
index 68b9ddf74a8..a03d905f693 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
@@ -14,19 +14,29 @@ Create a `table` selector to target your tables. Set the `border-collapse` prope
 You should have a `table` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('table'));
 ```
 
 Your `table` selector should have a `border-collapse` property set to `collapse`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table')
+    ?.getPropertyValue('border-collapse'),
+  'collapse'
+);
 ```
 
 Your `table` selector should have a `border` property set to `0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table')
+    ?.getPropertyValue('border-width'),
+  '0px'
+);
 ```
 
 # --seed--
@@ -37,10 +47,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +68,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +107,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +146,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('bord
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
index 37746c9d7e5..bfd9cfc85f5 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -14,19 +14,32 @@ Ensure your table fills its container with a `width` property set to `100%`, the
 Your `table` selector should have a `width` property set to `100%`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+assert.strictEqual(
+  new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width'),
+  '100%'
+);
 ```
 
 Your `table` selector should have a `position` property set to `relative`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table')
+    ?.getPropertyValue('position'),
+  'relative'
+);
 ```
 
 Your `table` selector should have a `margin-top` property set to `3rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table')
+    ?.getPropertyValue('margin-top'),
+  '3rem'
+);
 ```
 
 # --seed--
@@ -37,10 +50,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +71,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +110,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +149,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('marg
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
index a59b2617abd..5cc0c3edf12 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
@@ -14,25 +14,40 @@ Next you need to style your `caption` elements to look more like headers. Create
 You should have a `table caption` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('table caption'));
 ```
 
 Your `table caption` selector should have a `color` property set to `#356eaf`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table caption')
+    ?.getPropertyValue('color'),
+  'rgb(53, 110, 175)'
+);
 ```
 
 Your `table caption` selector should have a `font-size` property set to `1.3em`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table caption')
+    ?.getPropertyValue('font-size'),
+  '1.3em'
+);
 ```
 
 Your `table caption` selector should have a `font-weight` property set to `normal`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table caption')
+    ?.getPropertyValue('font-weight'),
+  'normal'
+);
 ```
 
 # --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
index c3938b04ac6..909ba054c67 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
@@ -14,19 +14,34 @@ Now give the captions an absolute position, and shift them `-2.25rem` from the t
 Your `table caption` selector should have the `position` property set to `absolute`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table caption')
+    ?.getPropertyValue('position'),
+  'absolute'
+);
 ```
 
 Your `table caption` selector should have the `top` property set to `-2.25rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table caption')
+    ?.getPropertyValue('top'),
+  '-2.25rem'
+);
 ```
 
 Your `table caption` selector should have the `left` property set to `0.5rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('table caption')
+    ?.getPropertyValue('left'),
+  '0.5rem'
+);
 ```
 
 # --seed--
@@ -37,10 +52,10 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +73,9 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +112,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +151,15 @@ assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyVal
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
index 5d92ebdef98..d389e253974 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -14,25 +14,40 @@ Create a selector to target your `td` elements within your table body. Give them
 You should have a `tbody td` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tbody td'));
 ```
 
 Your `tbody td` selector should have a `width` property set to `100vw`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tbody td')
+    ?.getPropertyValue('width'),
+  '100vw'
+);
 ```
 
 Your `tbody td` selector should have a `min-width` property set to `4rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tbody td')
+    ?.getPropertyValue('min-width'),
+  '4rem'
+);
 ```
 
 Your `tbody td` selector should have a `max-width` property set to `4rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tbody td')
+    ?.getPropertyValue('max-width'),
+  '4rem'
+);
 ```
 
 # --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('m
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
index 842e7f51b67..6c8376ee17d 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -14,13 +14,18 @@ Now target the `th` elements within your table body, and give them a width of th
 You should have a `tbody th` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tbody th'));
 ```
 
 Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tbody th')
+    ?.getPropertyValue('width'),
+  'calc(100% - 12rem)'
+);
 ```
 
 # --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('w
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
index f20111ca926..4f8500836b3 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
@@ -14,19 +14,29 @@ The `[attribute="value"]` selector targets any element that has an attribute wit
 You should have a `tr[class="total"]` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
 ```
 
 Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr[class="total"]')
+    ?.getPropertyValue('border-bottom'),
+  '4px double rgb(10, 10, 35)'
+);
 ```
 
 Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr[class="total"]')
+    ?.getPropertyValue('font-weight'),
+  'bold'
+);
 ```
 
 # --seed--
@@ -37,10 +47,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +68,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +107,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +146,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropert
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
index da1b2b6db3b..b67941d5a15 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
@@ -14,19 +14,31 @@ Using the same selector syntax, target the `th` elements within your table rows
 You should have a `tr[class="total"] th` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')
+);
 ```
 
 Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr[class="total"] th')
+    ?.getPropertyValue('text-align'),
+  'left'
+);
 ```
 
 Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr[class="total"] th')
+    ?.getPropertyValue('padding'),
+  '0.5rem 0px 0.25rem 0.5rem'
+);
 ```
 
 # --seed--
@@ -37,10 +49,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -58,7 +70,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -95,13 +109,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -132,13 +148,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getProp
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
index 7b947bb3eef..fe0b8d36b07 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
@@ -7,7 +7,7 @@ dashedName: step-57
 
 # --description--
 
-The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
+The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the _only_ class is `total`. The second will select `tr` elements where the class _includes_ `total`.
 
 In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
 
@@ -16,19 +16,29 @@ In your case, `tr.total` will work. You can use this selector to target all `td`
 You should have a `tr.total td` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.total td'));
 ```
 
 Your `tr.total td` selector should have a `text-align` property set to `right`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.total td')
+    ?.getPropertyValue('text-align'),
+  'right'
+);
 ```
 
 Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.total td')
+    ?.getPropertyValue('padding'),
+  '0px 0.25rem'
+);
 ```
 
 # --seed--
@@ -39,10 +49,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -60,7 +70,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -97,13 +109,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -134,13 +148,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
index 40864c93121..62a9aaf49c3 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -14,13 +14,20 @@ The `:nth-of-type()` pseudo-selector is used to target specific elements based o
 You should have a `tr.total td:nth-of-type(3)` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')
+);
 ```
 
 Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.total td:nth-of-type(3)')
+    ?.getPropertyValue('padding-right'),
+  '0.5rem'
+);
 ```
 
 # --seed--
@@ -31,10 +38,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +59,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +98,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +137,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.g
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
index d0ec48a16ce..abc732671cd 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -14,13 +14,18 @@ Give your `tr.total` elements a hover effect that changes the background to `#99
 You should have a `tr.total:hover` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
 ```
 
 Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.total:hover')
+    ?.getPropertyValue('background-color'),
+  'rgb(153, 201, 255)'
+);
 ```
 
 # --seed--
@@ -31,10 +36,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -52,7 +57,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -89,13 +96,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -126,13 +135,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyVa
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
index 8446e4d5286..5a6587c1e25 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -14,15 +14,16 @@ Select your `td` elements with the `class` value of `current`, and make the font
 You should have a `td.current` selector.
 
 ```js
-const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
-assert(def('td.current') || def('td[class="current"]'));
+const def = s => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(def('td.current') || def('td[class="current"]'));
 ```
 
 Your `td.current` selector should have the `font-style` property set to `italic`.
 
 ```js
-const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
-assert((font('td.current') || font('td[class="current"]')) === 'italic');
+const font = s =>
+  new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert.isTrue((font('td.current') || font('td[class="current"]')) === 'italic');
 ```
 
 # --seed--
@@ -33,10 +34,10 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -54,7 +55,9 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -91,13 +94,15 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -128,13 +133,15 @@ assert((font('td.current') || font('td[class="current"]')) === 'italic');
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
index a1ea3f0dcd6..9c108f46500 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -14,15 +14,21 @@ Select the `tr` elements with the `class` set to `data`. Give them a background
 You should have a `tr.data` selector.
 
 ```js
-const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
-assert(def('tr.data') || def('tr[class="data"]'));
+const def = s => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(def('tr.data') || def('tr[class="data"]'));
 ```
 
 Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
 
 ```js
-const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
-assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+const bg = s =>
+  new __helpers.CSSHelp(document)
+    .getStyle(s)
+    ?.getPropertyValue('background-image');
+assert.isTrue(
+  (bg('tr.data') || bg('tr[class="data"]')) ===
+    'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)'
+);
 ```
 
 # --seed--
@@ -33,10 +39,10 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -54,7 +60,9 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -91,13 +99,15 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -128,13 +138,15 @@ assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 2
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
index 0853021d6c1..1f0a98f6c62 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -14,25 +14,40 @@ Select the `th` elements within your `tr.data` elements. Align the text to the l
 You should have a `tr.data th` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.data th'));
 ```
 
 Your `tr.data th` selector should have a `text-align` property set to `left`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th')
+    ?.getPropertyValue('text-align'),
+  'left'
+);
 ```
 
 Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th')
+    ?.getPropertyValue('padding-top'),
+  '0.3rem'
+);
 ```
 
 Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th')
+    ?.getPropertyValue('padding-left'),
+  '0.5rem'
+);
 ```
 
 # --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue(
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
index 66cc4c45f63..7d960c8d8a3 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -14,37 +14,64 @@ Create a `tr.data th .description` selector to target the elements with the `cla
 You should have a `tr.data th .description` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('tr.data th .description')
+);
 ```
 
 Your `tr.data th .description` selector should have a `display` property set to `block`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th .description')
+    ?.getPropertyValue('display'),
+  'block'
+);
 ```
 
 Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th .description')
+    ?.getPropertyValue('font-style'),
+  'italic'
+);
 ```
 
 Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th .description')
+    ?.getPropertyValue('font-weight'),
+  'normal'
+);
 ```
 
 Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th .description')
+    ?.getPropertyValue('padding'),
+  '1rem 0px 0.75rem'
+);
 ```
 
 Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data th .description')
+    ?.getPropertyValue('margin-right'),
+  '-13.5rem'
+);
 ```
 
 # --seed--
@@ -55,10 +82,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -76,7 +103,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -113,13 +142,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -150,13 +181,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getP
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
index 55d65268a3f..5420a0da5e4 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
@@ -14,7 +14,7 @@ Your `span` elements now all have more specific styling, which means you can rem
 You should not have a `span` selector.
 
 ```js
-assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+assert.isNull(new __helpers.CSSHelp(document).getStyle('span'));
 ```
 
 # --seed--
@@ -25,10 +25,10 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -46,7 +46,9 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -83,13 +85,15 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -120,13 +124,15 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -146,7 +152,7 @@ assert(!(new __helpers.CSSHelp(document).getStyle('span')));
 ```
 
 ```css
-span[class~="sr-only"] {
+span[class~='sr-only'] {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   clip-path: inset(50%) !important;
@@ -249,12 +255,12 @@ tbody th {
   width: calc(100% - 12rem);
 }
 
-tr[class="total"] {
+tr[class='total'] {
   border-bottom: 4px double #0a0a23;
   font-weight: bold;
 }
 
-tr[class="total"] th {
+tr[class='total'] th {
   text-align: left;
   padding: 0.5rem 0 0.25rem 0.5rem;
 }
@@ -277,7 +283,11 @@ td.current {
 }
 
 tr.data {
-  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+  background-image: linear-gradient(
+    to bottom,
+    #dfdfe2 1.845rem,
+    white 1.845rem
+  );
 }
 
 tr.data th {
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
index 74ca4c192bb..c2a4a631cd3 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -14,25 +14,40 @@ Your dollar amounts are currently misaligned. Create a selector to target the `t
 You should have a `tr.data td` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tr.data td'));
 ```
 
 Your `tr.data td` selector should have a `vertical-align` property set to `top`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data td')
+    ?.getPropertyValue('vertical-align'),
+  'top'
+);
 ```
 
 Your `tr.data td` selector should have a `text-align` property set to `right`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data td')
+    ?.getPropertyValue('text-align'),
+  'right'
+);
 ```
 
 Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data td')
+    ?.getPropertyValue('padding'),
+  '0.3rem 0.25rem 0px'
+);
 ```
 
 # --seed--
@@ -43,10 +58,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -64,7 +79,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -101,13 +118,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -138,13 +157,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue(
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
index 672e43ac9cb..7f5b2886640 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
@@ -16,13 +16,20 @@ With this, your balance sheet is complete!
 You should have a `tr.data td:last-of-type` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+assert.isNotNull(
+  new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')
+);
 ```
 
 Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+assert.strictEqual(
+  new __helpers.CSSHelp(document)
+    .getStyle('tr.data td:last-of-type')
+    ?.getPropertyValue('padding-right'),
+  '0.5rem'
+);
 ```
 
 # --seed--
@@ -33,10 +40,10 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -54,7 +61,9 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -91,13 +100,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -128,13 +139,15 @@ assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getP
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -313,10 +326,10 @@ tr.data td {
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -334,7 +347,9 @@ tr.data td {
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -371,13 +386,15 @@ tr.data td {
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -408,13 +425,15 @@ tr.data td {
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -434,7 +453,7 @@ tr.data td {
 ```
 
 ```css
-span[class~="sr-only"] {
+span[class~='sr-only'] {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   clip-path: inset(50%) !important;
@@ -531,12 +550,12 @@ tbody th {
   width: calc(100% - 12rem);
 }
 
-tr[class="total"] {
+tr[class='total'] {
   border-bottom: 4px double #0a0a23;
   font-weight: bold;
 }
 
-tr[class="total"] th {
+tr[class='total'] th {
   text-align: left;
   padding: 0.5rem 0 0.25rem 0.5rem;
 }
@@ -559,7 +578,11 @@ td.current {
 }
 
 tr.data {
-  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+  background-image: linear-gradient(
+    to bottom,
+    #dfdfe2 1.845rem,
+    white 1.845rem
+  );
 }
 
 tr.data th {
@@ -586,4 +609,3 @@ tr.data td:last-of-type {
   padding-right: 0.5rem;
 }
 ```
-
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
index 71388718e00..a33747aeb3f 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
@@ -14,7 +14,12 @@ Adding position `sticky` moved the element into its own stack. To ensure your `#
 Your `#years` selector should have a `z-index` property set to `999`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
+assert.equal(
+  new __helpers.CSSHelp(document)
+    .getStyle('#years')
+    ?.getPropertyValue('z-index'),
+  '999'
+);
 ```
 
 # --seed--
@@ -25,10 +30,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Balance Sheet</title>
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
@@ -46,7 +51,9 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
         </div>
         <div class="table-wrap">
           <table>
-            <caption>Assets</caption>
+            <caption>
+              Assets
+            </caption>
             <thead>
               <tr>
                 <td></td>
@@ -83,13 +90,15 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
             </tbody>
           </table>
           <table>
-            <caption>Liabilities</caption>
+            <caption>
+              Liabilities
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>
@@ -120,13 +129,15 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValu
             </tbody>
           </table>
           <table>
-            <caption>Net Worth</caption>
+            <caption>
+              Net Worth
+            </caption>
             <thead>
               <tr>
-              <td></td>
-              <th><span class="sr-only">2019</span></th>
-              <th><span class="sr-only">2020</span></th>
-              <th><span class="sr-only">2021</span></th>
+                <td></td>
+                <th><span class="sr-only">2019</span></th>
+                <th><span class="sr-only">2020</span></th>
+                <th><span class="sr-only">2021</span></th>
               </tr>
             </thead>
             <tbody>