diff --git a/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json b/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json
index a1e2493018..e24f0651e0 100644
--- a/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json
+++ b/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json
@@ -11,212 +11,264 @@
   "superBlock": "2022/responsive-web-design",
   "challengeOrder": [
     [
-      "6193d8081ec2531581ea7b98",
+      "61fd5a93fd62bb35968adeab",
       "Step 1"
     ],
     [
-      "6193da99ca92051a07fb8a13",
+      "61fd6343fb42013d99bcd7f3",
       "Step 2"
     ],
     [
-      "6193dbfec896f21aed7d8114",
+      "61fd66c687e610436494c6f1",
       "Step 3"
     ],
     [
-      "6193dc549cb4031bc3a9c4e1",
+      "61fd67a656743144844941cb",
       "Step 4"
     ],
     [
-      "6193de38b3294e1e378f5bc3",
+      "61fd6ab779390f49148773bb",
       "Step 5"
     ],
     [
-      "6193de63d0fcab1f0b4112a0",
+      "61fd6b7c83dbf54a08cf0498",
       "Step 6"
     ],
     [
-      "6193ded40c51662155758987",
+      "61fd6cc9475a784b7776233e",
       "Step 7"
     ],
     [
-      "6193df854916a52292a23aa9",
+      "61fd70336ebb3e4f62ee81ba",
       "Step 8"
     ],
     [
-      "6193dfd113955a238da1cc05",
+      "61fd719788899952e67692b9",
       "Step 9"
     ],
     [
-      "6193e2baa04690265435e25f",
+      "61fd71d596e8f253b9408b39",
       "Step 10"
     ],
     [
-      "6193e2f62a56dc26fd594b77",
+      "61fd75ea7f663457612dba02",
       "Step 11"
     ],
     [
-      "6193e3a4916fdb281b791892",
+      "61fd7648a7ba2e5882436831",
       "Step 12"
     ],
     [
-      "6193e40e67d94029468e6b2d",
+      "61fd778081276b59d59abad6",
       "Step 13"
     ],
     [
-      "6193e5280857e72be1efc99d",
+      "61fd77f7ad2aeb5ae34d07d6",
       "Step 14"
     ],
     [
-      "6193e55d97150c2ca7c9458a",
+      "61fd78621573aa5e8b512f5e",
       "Step 15"
     ],
     [
-      "6193e5946b7ea12d8ce7b1c2",
+      "61fd7a160ed17960e971f28b",
       "Step 16"
     ],
     [
-      "6193e5d66b67e32e5f0f930e",
+      "61fd7b3fcaa5406257abc5d1",
       "Step 17"
     ],
     [
-      "6193e7150dc89231b01a3515",
+      "61fd8e491324ce717da97ffe",
       "Step 18"
     ],
     [
-      "6193e8957e614d3b8eeb770f",
+      "61fd8fd08af43372f02952d0",
       "Step 19"
     ],
     [
-      "6193e8eba043903cf68598cd",
+      "61fd9126aa72a474301fc49f",
       "Step 20"
     ],
     [
-      "6193e9f7a92e7e3e1810b2f4",
+      "61fd933ba685de776a94997e",
       "Step 21"
     ],
     [
-      "6193ea793e49253eee1452d1",
+      "61fd94056e0355785fbba4d3",
       "Step 22"
     ],
     [
-      "6193ece0b46e03423cd66e78",
+      "61fd986ddbcbd47ba8fbc5ec",
       "Step 23"
     ],
     [
-      "6193ed97ae313e4331c9078a",
+      "61fd990577d8227dd93fbeeb",
       "Step 24"
     ],
     [
-      "6193ededc017a2443f10429b",
+      "61fd9a4ff2fc4481b9157bd7",
       "Step 25"
     ],
     [
-      "6193ee19d10be144d6bc9c46",
+      "61fd9ad665a4a282c8106be3",
       "Step 26"
     ],
     [
-      "6193f5169cdc684f60317783",
+      "61fd9b7285bde783ad5b8aac",
       "Step 27"
     ],
     [
-      "6193f6615b1bd85076fc5ef2",
+      "61fd9d9fbdfe078800317055",
       "Step 28"
     ],
     [
-      "6193f7074ca69153347fbc3a",
+      "61fda307bde0b091cf7d884a",
       "Step 29"
     ],
     [
-      "6193f74b982e4c5449f51a47",
+      "61fda339eadcfd92a6812bed",
       "Step 30"
     ],
     [
-      "6193f7904dc7ee554d12571f",
+      "61fdac1e31692f9a9ad97295",
       "Step 31"
     ],
     [
-      "6193f85ab1de4356da678090",
+      "61fdaea3999cb19d76ce717b",
       "Step 32"
     ],
     [
-      "6193fa3224d7465850407d3d",
+      "61fdaf9ff894b6a084ecdc1b",
       "Step 33"
     ],
     [
-      "6193fb8bef24145b57fbed00",
+      "61fdafe6f07fd7a1c6785bc2",
       "Step 34"
     ],
     [
-      "6193fd22d907385efadb59c9",
+      "61fdb04d9939f0a26ca51c2b",
       "Step 35"
     ],
     [
-      "6193fe24beedd361f34f8e96",
+      "620159cd5431aa34bc6a4c9c",
       "Step 36"
     ],
     [
-      "6193febd52ffb76345956072",
+      "62015a5da1c95c358f079ebb",
       "Step 37"
     ],
     [
-      "6193ff2b1198596496b81450",
+      "62015cd2654a1139321a89d2",
       "Step 38"
     ],
     [
-      "6193ff6c2a6138658b4ce2af",
+      "62015d8942384c3aed48329e",
       "Step 39"
     ],
     [
-      "6194034278b71f6940a50d91",
+      "620167374bb8b4455cd11125",
       "Step 40"
     ],
     [
-      "619403dacf51db6a79b47b52",
+      "620174ed519dd7506c1a4b61",
       "Step 41"
     ],
     [
-      "6194079d7cbf586eba9539ff",
+      "620175b3710a0951cfa86edf",
       "Step 42"
     ],
     [
-      "619409a3b1ec0b727ac2ab30",
+      "6201782cc420715562f36271",
       "Step 43"
     ],
     [
-      "61940bfdc4e2a874af766567",
+      "620179bc0a6a2358c72b90ad",
       "Step 44"
     ],
     [
-      "61940e95c95cff77d0b2a310",
+      "62017b6f47454059bf2d3bd1",
       "Step 45"
     ],
     [
-      "61940f551fa4db7967451be9",
+      "62017f47c87be96457c49f46",
       "Step 46"
     ],
     [
-      "6194108c6951ca7cae9596bd",
+      "62017fa5bbef406580ceb44f",
       "Step 47"
     ],
     [
-      "619410f7040d427d9c782db7",
+      "62018243f046a368fab8ffb6",
       "Step 48"
     ],
     [
-      "6194114534b4547e5177cb2a",
+      "6201830cb0c74b69f1b41635",
       "Step 49"
     ],
     [
-      "619412990eaf9c80415b280d",
+      "620186f4b6b8356d2def576b",
       "Step 50"
     ],
     [
-      "6194135942d5e08174b8bab1",
+      "62018ba1aa263770c953be66",
       "Step 51"
     ],
     [
-      "619413f5c1218b82b7b56a60",
+      "62018c3e94434a71af1d5eaa",
       "Step 52"
+    ],
+    [
+      "62018ec29b3ae674f40bef31",
+      "Step 53"
+    ],
+    [
+      "62019093fe30e278e797d2f6",
+      "Step 54"
+    ],
+    [
+      "620191707bc65579ddd3ce15",
+      "Step 55"
+    ],
+    [
+      "620192a767533a7ad19d96d7",
+      "Step 56"
+    ],
+    [
+      "6201995d9ab88e80f1989dce",
+      "Step 57"
+    ],
+    [
+      "620199c7a7a32c81d4db3410",
+      "Step 58"
+    ],
+    [
+      "6201a1a7af32c287bd6b8183",
+      "Step 59"
+    ],
+    [
+      "6201a1cc668a34888f5b2f52",
+      "Step 60"
+    ],
+    [
+      "6201a20d742f5c89736c8cfb",
+      "Step 61"
+    ],
+    [
+      "6201a42e39bf3b95b6a33bf3",
+      "Step 62"
+    ],
+    [
+      "6201a4adcc6414968b391592",
+      "Step 63"
+    ],
+    [
+      "6201a5258af7b398b030bfaf",
+      "Step 64"
+    ],
+    [
+      "6201a59be346d399c21d10b1",
+      "Step 65"
     ]
   ]
-}
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-001.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-001.md
index 82350bf963..2bac65664c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-001.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-001.md
@@ -1,5 +1,5 @@
 ---
-id: 6193d8081ec2531581ea7b98
+id: 61fd5a93fd62bb35968adeab
 title: Step 1
 challengeType: 0
 dashedName: step-1
@@ -7,9 +7,7 @@ dashedName: step-1
 
 # --description--
 
-A balance sheet is used to track the state of an organization's finances. You'll be building a mock balance sheet for AcmeWidgetCorp to explore the use of various CSS selectors.
-
-Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, an `html` element, the appropriate `meta` tags, a `head`, `body`, and `title` element, and `link` your stylesheet. Give the `title` element the text `AcmeWidgetCorp Balance Sheet`.
+Set up your HTML with the `DOCTYPE`, `html`, `head`, and `body` elements. Give your `head` element the appropriate `meta` elements for the `charset` and `viewport`, a `title` element with an appropriate title, and a `link` element for your stylesheet.
 
 # --hints--
 
@@ -22,32 +20,32 @@ assert(code.match(/<!DOCTYPE html>/i));
 Your code should have an `html` element.
 
 ```js
-assert(document.querySelectorAll('html')?.length === 1);
+assert.equal(document.querySelectorAll('html')?.length, 1);
 ```
 
 Your code should have a `head` element within the `html` element.
 
 ```js
-assert(document.querySelectorAll('head')?.length === 1);
+assert.equal(document.querySelectorAll('head')?.length, 1);
 ```
 
 Your code should have a `body` element within the `html` element.
 
 ```js
-assert(document.querySelectorAll('body')?.length === 1);
+assert.equal(document.querySelectorAll('body')?.length, 1);
 ```
 
 Your `head` element should come before your `body` element.
 
 ```js
-assert(document.querySelector('body')?.previousElementSibling?.tagName === 'HEAD');
+assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD');
 ```
 
 You should have two `meta` elements.
 
 ```js
 const meta = document.querySelectorAll('meta');
-assert(meta?.length === 2);
+assert.equal(meta?.length, 2);
 ```
 
 One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
@@ -73,18 +71,11 @@ const title = document.querySelector('title');
 assert.exists(title);
 ```
 
-Your project should have a title of `AcmeWidgetCorp Balance Sheet`.
+Your `title` should have some text.
 
 ```js
 const title = document.querySelector('title');
-assert.equal(title?.text?.trim()?.toLowerCase(), 'acmewidgetcorp balance sheet')
-```
-
-Remember, the casing and spelling matter for the title.
-
-```js
-const title = document.querySelector('title');
-assert.equal(title?.text?.trim(), 'AcmeWidgetCorp Balance Sheet');
+assert.isAtLeast(title?.textContent?.length, 1);
 ```
 
 Your code should have a `link` element.
@@ -93,28 +84,28 @@ Your code should have a `link` element.
 assert(/<link/.test(code))
 ```
 
-Your `href` attribute should have the value `./styles.css`.
+Your `link` element should be within your `head` element.
 
 ```js
-assert(/href\s*=\s*('|")(\.\/)?styles\.css\1/.test(code));
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
 ```
 
-Your `rel` attribute should have the value `stylesheet`.
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
 
 ```js
-assert(/rel\s*=\s*('|")\s*stylesheet\s*\1/.test(code));
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
 ```
 
-Your `type` attribute should have the value `text/css`.
+Your `link` element should have a `type` attribute with the value `text/css`.
 
 ```js
-assert(/type\s*=\s*('|")\s*text\/css\s*\1/.test(code));
+assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
 ```
 
-Your `link` element should have `href="./styles.css"`, `rel="stylesheet"`, and `type="text/css"` attributes
+Your `link` element should have an `href` attribute with the value `styles.css`.
 
 ```js
-assert(/<link\s+(href\s*=\s*("|')(\.\/)?styles\.css\2\s*(rel\s*=\s*('|")\s*stylesheet\s*\5\s*type\s*=\s*("|')text\/css\6|type\s*=\s*("|')text\/css\7\s*rel\s*=\s*('|")\s*stylesheet\s*\8)|rel\s*=\s*('|")\s*stylesheet\s*\9\s*(href\s*=\s*("|')(\.\/)?styles\.css\11\s*type\s*=\s*("|')text\/css\13|type\s*=\s*("|')text\/css\14\s*href\s*=\s*("|')(\.\/)?styles\.css\15)|type\s*=\s*("|')text\/css\17\s*(href\s*=\s*("|')(\.\/)?styles\.css\19\s*rel\s*=\s*('|")\s*stylesheet\s*\21|rel\s*=\s*('|")\s*stylesheet\s*\22\s*href\s*=\s*("|')(\.\/)?styles\.css\23))\s*\/?>/.test(code));
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-002.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-002.md
index a0b98f22a5..27c6d1107b 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-002.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-002.md
@@ -1,5 +1,5 @@
 ---
-id: 6193da99ca92051a07fb8a13
+id: 61fd6343fb42013d99bcd7f3
 title: Step 2
 challengeType: 0
 dashedName: step-2
@@ -7,50 +7,20 @@ dashedName: step-2
 
 # --description--
 
-Within your `body` element, create a `div` element with the `id` set to `sheet`. Below that, create a `footer` element with the text set to `Last Updated: December 2021`.
+Within your `body` element, nest a `section` element within a `main` element.
 
 # --hints--
 
-You should create a new `div` element.
+The first element inside the `body` element should be your `main` element. 
 
 ```js
-assert(document.querySelectorAll('div')?.length === 1);
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
 ```
 
-Your new `div` element should be within your `body` element.
+You should have a `section` element within your `main` element.
 
 ```js
-assert(document.querySelector('div')?.parentElement?.localName === 'body');
-```
-
-Your new `div` element should have an `id` attribute set to `sheet`.
-
-```js
-assert(document.querySelector('div')?.getAttribute('id') === 'sheet');
-```
-
-You should create a new `footer` element.
-
-```js
-assert(document.querySelectorAll('footer')?.length === 1);
-```
-
-Your new `footer` element should be within your `body` element.
-
-```js
-assert(document?.querySelector('footer')?.parentElement?.localName === 'body');
-```
-
-Your `footer` element should come after your `div` element.
-
-```js
-assert(document.querySelector('footer')?.previousElementSibling?.localName === 'div');
-```
-
-Your `footer` element should have the text `Last Updated: December 2021`.
-
-```js
-assert(document.querySelector('footer')?.textContent === 'Last Updated: December 2021');
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
 ```
 
 # --seed--
@@ -61,10 +31,10 @@ assert(document.querySelector('footer')?.textContent === 'Last Updated: December
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
 --fcc-editable-region--
   <body>
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-003.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-003.md
index e33823bcf7..2c49a6ed63 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-003.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-003.md
@@ -1,5 +1,5 @@
 ---
-id: 6193dbfec896f21aed7d8114
+id: 61fd66c687e610436494c6f1
 title: Step 3
 challengeType: 0
 dashedName: step-3
@@ -7,20 +7,20 @@ dashedName: step-3
 
 # --description--
 
-Within your `#sheet` element, create a new `div` and give it an `id` set to `header`.
+Within your `section` element, add an `h1` element with a nested `span` element.
 
 # --hints--
 
-You should create a new `div` element within your `#sheet` element.
+Your `section` element should have an `h1` element.
 
 ```js
-assert(document.querySelectorAll('#sheet > div')?.length === 1);
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
 ```
 
-Your new `div` element should have an `id` attribute set to `header`.
+Your `h1` element should have a `span` element.
 
 ```js
-assert(document.querySelector('#sheet > div')?.getAttribute('id') === 'header');
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
 ```
 
 # --seed--
@@ -31,17 +31,18 @@ assert(document.querySelector('#sheet > div')?.getAttribute('id') === 'header');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
+    <main>
 --fcc-editable-region--
-    <div id="sheet">
-    </div>
+      <section>
+      </section>
 --fcc-editable-region--
-    <footer>Last Updated: December 2021</footer>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-004.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-004.md
index e7f4aad529..1928125e75 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-004.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-004.md
@@ -1,5 +1,5 @@
 ---
-id: 6193dc549cb4031bc3a9c4e1
+id: 61fd67a656743144844941cb
 title: Step 4
 challengeType: 0
 dashedName: step-4
@@ -7,38 +7,42 @@ dashedName: step-4
 
 # --description--
 
-In your `#header` element, create an `h1` element with the text `Balance Sheet` and an `h2` element with the text `AcmeWidgetCorp`.
+Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
+
+Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
 
 # --hints--
 
-You should create a new `h1` element within your `#header` element.
+Your existing span element should have the `class` attribute set to `flex`.
 
 ```js
-assert(document.querySelectorAll('#header > h1')?.length === 1);
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
 ```
 
-Your new `h1` element should have the text `Balance Sheet`.
+Your existing `span` element should have two new `span` elements within it.
 
 ```js
-assert(document.querySelector('#header > h1')?.textContent === 'Balance Sheet');
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
 ```
 
-You should create a new `h2` element within your `#header` element.
+Your new `span` elements should not have a `class` attribute.
 
 ```js
-assert(document.querySelectorAll('#header > h2')?.length === 1);
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
 ```
 
-Your new `h2` element should have the text `AcmeWidgetCorp`.
+Your first new `span` element should have the text `AcmeWidgetCorp`.
 
 ```js
-assert(document.querySelector('#header > h2')?.textContent === 'AcmeWidgetCorp');
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
 ```
 
-Your `h1` element should come before your `h2` element.
+Your second new `span` element should have the text `Balance Sheet`.
 
 ```js
-assert(document.querySelector('#header > h1')?.nextElementSibling?.localName === 'h2');
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
 ```
 
 # --seed--
@@ -49,19 +53,22 @@ assert(document.querySelector('#header > h1')?.nextElementSibling?.localName ===
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
+    <main>
+      <section>
+        <h1>
 --fcc-editable-region--
-    <div id="sheet">
-      <div id="header">
-      </div>
-    </div>
+          <span>
+          </span>
 --fcc-editable-region--
-    <footer>Last Updated: December 2021</footer>
+        </h1>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-005.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-005.md
index 076f36934c..b678d369c6 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-005.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-005.md
@@ -1,5 +1,5 @@
 ---
-id: 6193de38b3294e1e378f5bc3
+id: 61fd6ab779390f49148773bb
 title: Step 5
 challengeType: 0
 dashedName: step-5
@@ -7,32 +7,26 @@ dashedName: step-5
 
 # --description--
 
-Below your `h2` element, create a `p` element with the `class` set to `row`. In that new element, create three `span` elements.
+Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
 
 # --hints--
 
-You should create a new `p` element within your `#header` element.
+You should create a new `div` element after your `h1` element.
 
 ```js
-assert(document.querySelectorAll('#header > p')?.length === 1);
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
 ```
 
-Your `p` element should come after your `h2` element.
+Your new `div` element should have an `id` attribute set to `years`.
 
 ```js
-assert(document.querySelector('#header > h2')?.nextElementSibling?.localName === 'p');
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
 ```
 
-Your new `p` element should have a `class` attribute set to `row`.
+Your new `div` element should have the `aria-hidden` attribute set to `true`.
 
 ```js
-assert(document.querySelector('#header > p')?.classList?.contains('row'));
-```
-
-Your `.row` element should have 3 `span` elements.
-
-```js
-assert(document.querySelectorAll('#header > .row > span')?.length === 3);
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
 ```
 
 # --seed--
@@ -43,21 +37,25 @@ assert(document.querySelectorAll('#header > .row > span')?.length === 3);
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
 --fcc-editable-region--
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-      </div>
+
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-006.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-006.md
index 2ac41d7e50..f44b92b7ef 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-006.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-006.md
@@ -1,5 +1,5 @@
 ---
-id: 6193de63d0fcab1f0b4112a0
+id: 61fd6b7c83dbf54a08cf0498
 title: Step 6
 challengeType: 0
 dashedName: step-6
@@ -7,26 +7,39 @@ dashedName: step-6
 
 # --description--
 
-Give the first `span` element the text `2019`, the second the text `2020`, and the third the text `2021`. Also give the third `span` a `class` set to `current`.
+Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
 
 # --hints--
 
-Your first `span` element should have the text `2019`.
+Your `div` element should have three `span` elements.
 
 ```js
-assert(document.querySelectorAll('#header > .row > span')?.[0]?.textContent === '2019');
+assert(document.querySelector('div')?.children?.length === 3);
 ```
 
-Your second `span` element should have the text `2020`.
+Each `span` element should have a `class` attribute set to `year`.
 
 ```js
-assert(document.querySelectorAll('#header > .row > span')?.[1]?.textContent === '2020');
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
 ```
 
-Your third `span` element should have the text `2021`.
+Your first `span` should have the text `2019`.
 
 ```js
-assert(document.querySelectorAll('#header > .row > span')?.[2]?.textContent === '2021');
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` should have the text `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+Your third `span` should have the text `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
 ```
 
 # --seed--
@@ -37,26 +50,26 @@ assert(document.querySelectorAll('#header > .row > span')?.[2]?.textContent ===
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
 --fcc-editable-region--
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span></span>
-          <span></span>
-          <span></span>
-        </p>
+        <div id="years" aria-hidden="true">
+        </div>
 --fcc-editable-region--
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-007.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-007.md
index ad0761bfa0..1c2c676ca0 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-007.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-007.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ded40c51662155758987
+id: 61fd6cc9475a784b7776233e
 title: Step 7
 challengeType: 0
 dashedName: step-7
@@ -7,44 +7,36 @@ dashedName: step-7
 
 # --description--
 
-Below your `#header` element, create an `h2` element with the text `Assets`, followed by a `div` element with the `class` set to `section`.
+Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
+
+Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
 
 # --hints--
 
-You should create a new `h2` element within your `#sheet` element.
+You should create a new `div` element.
 
 ```js
-assert(document.querySelectorAll('#sheet > h2')?.length === 1);
+assert(document.querySelectorAll('div')?.length === 2);
 ```
 
-Your new `h2` element should come after your `#header` element.
+Your new `div` element should have the `class` set to `table-wrap`.
 
 ```js
-assert(document.querySelector('#sheet > h2')?.previousElementSibling?.localName === 'div');
+assert(document.querySelector('.table-wrap')?.localName === 'div');
 ```
 
-Your new `h2` element should have the text `Assets`.
+Your `.table-wrap` element should come after your existing `div`.
 
 ```js
-assert(document.querySelector('#sheet > h2')?.textContent === 'Assets');
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
 ```
 
-You should create a new `div` element within your `#sheet` element.
+Your `.table-wrap` element should have three `table` elements.
 
 ```js
-assert(document.querySelectorAll('#sheet > div')?.length === 2);
-```
-
-Your new `div` element should have a `class` attribute set to `section`.
-
-```js
-assert(document.querySelectorAll('#sheet > div')?.[1]?.classList?.contains('section'));
-```
-
-Your new `div` element should come after your new `h2` element.
-
-```js
-assert(document.querySelector('#sheet > .section')?.previousElementSibling?.localName === 'h2');
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
 ```
 
 # --seed--
@@ -55,27 +47,30 @@ assert(document.querySelector('#sheet > .section')?.previousElementSibling?.loca
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
 --fcc-editable-region--
 
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-008.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-008.md
index d47efae40a..1feb1d333c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-008.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-008.md
@@ -1,5 +1,5 @@
 ---
-id: 6193df854916a52292a23aa9
+id: 61fd70336ebb3e4f62ee81ba
 title: Step 8
 challengeType: 0
 dashedName: step-8
@@ -7,38 +7,22 @@ dashedName: step-8
 
 # --description--
 
-Within the `.section` element, create a `p` element with the `class` set to `row`, followed by a `span` element with the `class` set to `notes`.
+HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
+
+Add a `caption` element to your first `table`, and give it the text `Assets`.
 
 # --hints--
 
-You should create a new `p` element within your `.section` element.
+Your first `table` element should have a `caption` element.
 
 ```js
-assert(document.querySelectorAll('.section > p')?.length === 1);
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
 ```
 
-Your new `p` element should have a `class` attribute set to `row`.
+Your `caption` element should have the text `Assets`.
 
 ```js
-assert(document.querySelector('.section > p')?.classList?.contains('row'));
-```
-
-You should create a new `span` element within your `.section` element.
-
-```js
-assert(document.querySelectorAll('.section > span')?.length === 1);
-```
-
-Your new `span` element should have a `class` attribute set to `notes`.
-
-```js
-assert(document.querySelector('.section > span')?.classList?.contains('notes'));
-```
-
-Your `p` element should come before your `span` element.
-
-```js
-assert(document.querySelector('.section > p')?.nextElementSibling?.localName === 'span');
+assert(document.querySelector('caption')?.textContent === 'Assets');
 ```
 
 # --seed--
@@ -49,30 +33,37 @@ assert(document.querySelector('.section > p')?.nextElementSibling?.localName ===
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
 --fcc-editable-region--
-      <div class="section">
-
-      </div>
+          <table>
+          </table>
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-009.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-009.md
index e6cfced0f1..466a51fd8a 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-009.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-009.md
@@ -1,5 +1,5 @@
 ---
-id: 6193dfd113955a238da1cc05
+id: 61fd719788899952e67692b9
 title: Step 9
 challengeType: 0
 dashedName: step-9
@@ -7,45 +7,34 @@ dashedName: step-9
 
 # --description--
 
-Copy the `.row` and `.notes` elements and paste two more sets, so that your `.section` has three of each.
+The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
+
+Add a `thead` and `tbody` to your first `table`, below the `caption` element.
 
 # --hints--
 
-You should have three `.row` elements.
+Your first `table` element should have a `thead` element.
 
 ```js
-assert(document.querySelectorAll('.row').length === 4);
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
 ```
 
-You should have three `.notes` elements.
+Your first `table` element should have a `tbody` element.
 
 ```js
-assert(document.querySelectorAll('.notes').length === 3);
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
 ```
 
-Your `.row` elements should all be within your `.section` element.
+Your `thead` element should be immediately below your `caption` element.
 
 ```js
-assert(document.querySelectorAll('.section > .row').length === 3);
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
 ```
 
-Your `.notes` elements should all be within your `.section` element.
+Your `tbody` element should be immediately below your `thead` element.
 
 ```js
-assert(document.querySelectorAll('.section > .notes').length === 3);
-```
-
-Your `.row` and `.notes` elements should be in the correct order.
-
-```js
-const children = document.querySelector('.section')?.children;
-assert(children?.length === 6);
-assert(children?.[0]?.classList?.contains('row'));
-assert(children?.[1]?.classList?.contains('notes'));
-assert(children?.[2]?.classList?.contains('row'));
-assert(children?.[3]?.classList?.contains('notes'));
-assert(children?.[4]?.classList?.contains('row'));
-assert(children?.[5]?.classList?.contains('notes'));
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
 ```
 
 # --seed--
@@ -56,31 +45,38 @@ assert(children?.[5]?.classList?.contains('notes'));
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
 --fcc-editable-region--
-      <div class="section">
-        <p class="row"></p>
-        <span class="notes"></span>
-      </div>
+          <table>
+            <caption>Assets</caption>
+          </table>
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-010.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-010.md
index a3ac6cbf3e..e0e1da7957 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-010.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-010.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e2baa04690265435e25f
+id: 61fd71d596e8f253b9408b39
 title: Step 10
 challengeType: 0
 dashedName: step-10
@@ -7,27 +7,30 @@ dashedName: step-10
 
 # --description--
 
-Below the final `.notes` element, create a `p` element with a `class` of `row` and `total`.
+The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
+
+The `td` element indicates a data cell, while the `th` element indicates a header cell.
 
 # --hints--
 
-You should create a new `p` element within your `.section` element.
+Your `thead` element should have a `tr` element.
 
 ```js
-assert(document.querySelectorAll('.section > p')?.length === 4);
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
 ```
 
-Your new `p` element should have a `class` attribute set to `row total`.
+Your `tr` element should have a `td` element as the first child.
 
 ```js
-assert(document.querySelectorAll('.section > p')?.[3]?.classList?.contains('row'));
-assert(document.querySelectorAll('.section > p')?.[3]?.classList?.contains('total'));
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
 ```
 
-Your new `p` element should be the last element in the `.section` element.
+Your `tr` element should have three `th` elements, after the `td` element.
 
 ```js
-assert(document.querySelectorAll('.section > p')?.[3]?.nextElementSibling === null);
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
 ```
 
 # --seed--
@@ -38,35 +41,42 @@ assert(document.querySelectorAll('.section > p')?.[3]?.nextElementSibling === nu
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
 --fcc-editable-region--
-      <div class="section">
-        <p class="row"></p>
-        <span class="notes"></span>
-        <p class="row"></p>
-        <span class="notes"></span>
-        <p class="row"></p>
-        <span class="notes"></span>
-      </div>
+            <thead>
+            </thead>
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-011.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-011.md
index 1be670f9d3..f02fde8ffc 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-011.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-011.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e2f62a56dc26fd594b77
+id: 61fd75ea7f663457612dba02
 title: Step 11
 challengeType: 0
 dashedName: step-11
@@ -7,26 +7,63 @@ dashedName: step-11
 
 # --description--
 
-Within your first `.row` element, create four `span` elements. Give the first `span` a `class` set to `name`, and the last `span` a `class` set to `current`.
+Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
+
+Give your third `th` element the `class` attribute set to `current`.
+
+Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
 
 # --hints--
 
-Your first `.row` element (in your `.section` element) should have four `span` elements.
+Each of your `th` elements should have a `span` element.
 
 ```js
-assert(document.querySelectorAll('.section > .row > span')?.length === 4);
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
 ```
 
-Your first new `span` element should have a `class` attribute set to `name`.
+Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
 
 ```js
-assert(document.querySelectorAll('.section > .row > span')?.[0]?.classList?.contains('name'));
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
 ```
 
-Your last new `span` element should have a `class` attribute set to `current`.
+Your first `span` element should have the text `2019`.
 
 ```js
-assert(document.querySelectorAll('.section > .row > span')?.[3]?.classList?.contains('current'));
+assert(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');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(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'));
+```
+
+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);
 ```
 
 # --seed--
@@ -37,38 +74,48 @@ assert(document.querySelectorAll('.section > .row > span')?.[3]?.classList?.cont
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
 --fcc-editable-region--
-        <p class="row">
-
-        </p>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
 --fcc-editable-region--
-        <span class="notes"></span>
-        <p class="row"></p>
-        <span class="notes"></span>
-        <p class="row"></p>
-        <span class="notes"></span>
-        <p class="row total"></p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-012.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-012.md
index 5034fa8b52..1763cb75c3 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-012.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-012.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e3a4916fdb281b791892
+id: 61fd7648a7ba2e5882436831
 title: Step 12
 challengeType: 0
 dashedName: step-12
@@ -7,35 +7,34 @@ dashedName: step-12
 
 # --description--
 
-Copy the four `span` elements within your `.row` element, and paste them into your other three `.row` elements within your `.section` element. 
+Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
 
 # --hints--
 
-Your second `.row` element should have the four `span` elements.
+Your `tbody` element should have four `tr` elements.
 
 ```js
-const target = document.querySelectorAll('.section > .row')[1];
-assert(target?.querySelectorAll('span')?.length === 4);
-assert(target?.querySelectorAll('span')?.[0]?.classList?.contains('name'));
-assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
 ```
 
-Your third `.row` element should have the four `span` elements.
+Your first three `tr` elements should have the `class` attribute set to `data`.
 
 ```js
-const target = document.querySelectorAll('.section > .row')[2];
-assert(target?.querySelectorAll('span')?.length === 4);
-assert(target?.querySelectorAll('span')?.[0]?.classList?.contains('name'));
-assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
 ```
 
-Your fourth `.row` element (your `.row total` element) should have the four `span` elements.
+Your fourth `tr` element should have the `class` attribute set to `total`.
 
 ```js
-const target = document.querySelectorAll('.section > .row')[3];
-assert(target?.querySelectorAll('span')?.length === 4);
-assert(target?.querySelectorAll('span')?.[0]?.classList?.contains('name'));
-assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
 ```
 
 # --seed--
@@ -46,41 +45,48 @@ assert(target?.querySelectorAll('span')?.[3]?.classList?.contains('current'));
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row"></p>
-        <span class="notes"></span>
-        <p class="row"></p>
-        <span class="notes"></span>
-        <p class="row total"></p>
+            <tbody>
+            </tbody>
 --fcc-editable-region--
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-013.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-013.md
index 2d8a6036fa..d24f4171bd 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-013.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-013.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e40e67d94029468e6b2d
+id: 61fd778081276b59d59abad6
 title: Step 13
 challengeType: 0
 dashedName: step-13
@@ -7,32 +7,64 @@ dashedName: step-13
 
 # --description--
 
-Below your `.section` element, create another `h2` element with the text `Liabilities`. Following that, create another `div` with the `class` set to `section`.
+In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash ` in a `span` element with the `class` set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
 
 # --hints--
 
-You should create a new `h2` element below your existing `.section` element.
+Your first `tr` should have a `th` element.
 
 ```js
-assert(document.querySelector('.section')?.nextElementSibling?.localName === 'h2');
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
 ```
 
-Your new `h2` element should have the text `Liabilities`.
+Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
 
 ```js
-assert(document.querySelector('.section')?.nextElementSibling?.textContent === 'Liabilities');
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
 ```
 
-You should create a new `div` element within your `#sheet` element.
+You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
 
 ```js
-assert(document.querySelector('#sheet')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
 ```
 
-Your new `div` element should have a `class` attribute set to `section`.
+Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('section'));
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.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');
+```
+
+Your third `td` element should have the text `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.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'));
 ```
 
 # --seed--
@@ -43,57 +75,56 @@ assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
 --fcc-editable-region--
-
+              <tr class="data">
+              </tr>
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-014.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-014.md
index 1785e231ee..6f90884909 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-014.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-014.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e5280857e72be1efc99d
+id: 61fd77f7ad2aeb5ae34d07d6
 title: Step 14
 challengeType: 0
 dashedName: step-14
@@ -7,48 +7,64 @@ dashedName: step-14
 
 # --description--
 
-Copy the entire contents of your first `.section` element and paste them into your second `.section` element.
+In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking `, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
 
 # --hints--
 
-Your second `.section` element should have four `p` elements.
+Your second `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p')?.length === 4);
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
 ```
 
-Your second `.section` element should have three `p` elements with the class set to `row`.
+Your `th` element should have the text `Checking Our primary transactional account.`.
 
 ```js
-const ps = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p'));
-assert(ps?.filter?.(p => p?.classList?.contains('row') && !p?.classList?.contains('total'))?.length === 3);
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
 ```
 
-Your second `.section` element should have a `p` element with the class `row` and `total`.
+You should wrap the text `Our primary transactional account.` in a `span` element.
 
 ```js
-assert(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row.total')?.length === 1);
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
 ```
 
-Your `.row` elements should each have four `span` elements.
+Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
-assert(rows?.every?.(row => row?.querySelectorAll('span')?.length === 4));
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
 ```
 
-Within each `.row` element, your first `span` element should have the class set to `name`.
+You should have three `td` elements.
 
 ```js
-const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
-assert(rows?.every?.(row => row?.querySelectorAll('span')?.[0]?.classList?.contains('name')));
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
 ```
 
-Within each `.row` element, your last `span` element should have the class set to `current`.
+Your first `td` element should have the text `$54`.
 
 ```js
-const rows = Array.from(document.querySelectorAll('.section')?.[1]?.querySelectorAll('p.row'));
-assert(rows?.every?.(row => row?.querySelectorAll('span')?.[3]?.classList?.contains('current')));
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.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');
+```
+
+Your third `td` element should have the text `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.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'));
 ```
 
 # --seed--
@@ -59,60 +75,60 @@ assert(rows?.every?.(row => row?.querySelectorAll('span')?.[3]?.classList?.conta
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
 --fcc-editable-region--
-      <div class="section">
-
-      </div>
+              <tr class="data">
+              </tr>
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-015.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-015.md
index fd5bb45be1..e219857674 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-015.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-015.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e55d97150c2ca7c9458a
+id: 61fd78621573aa5e8b512f5e
 title: Step 15
 challengeType: 0
 dashedName: step-15
@@ -7,32 +7,64 @@ dashedName: step-15
 
 # --description--
 
-Below your second `.section` element, create another `h2` element with the text `Net Worth`. Follow that with a `div` element with the `class` set to `section`.
+In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings `, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
 
 # --hints--
 
-You should create a new `h2` element below your second `.section` element.
+Your third `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('.section')?.[1]?.nextElementSibling?.localName === 'h2');
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
 ```
 
-Your new `h2` element should have the text `Net Worth`.
+Your `th` element should have the text `Savings Funds set aside for emergencies.`.
 
 ```js
-assert(document.querySelectorAll('.section')?.[1]?.nextElementSibling?.textContent === 'Net Worth');
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
 ```
 
-You should create a new `div` element within your `#sheet` element.
+You should wrap the text `Funds set aside for emergencies.` in a `span` element.
 
 ```js
-assert(document.querySelector('#sheet')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
 ```
 
-Your new `div` element should have a `class` attribute set to `section`.
+Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('section'));
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.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');
+```
+
+Your third `td` element should have the text `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.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'));
 ```
 
 # --seed--
@@ -43,87 +75,64 @@ assert(document.querySelector('#sheet')?.lastElementChild?.classList?.contains('
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
 --fcc-editable-region--
-
+              <tr class="data">
+              </tr>
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-016.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-016.md
index c1b06aeec8..b51731238f 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-016.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-016.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e5946b7ea12d8ce7b1c2
+id: 61fd7a160ed17960e971f28b
 title: Step 16
 challengeType: 0
 dashedName: step-16
@@ -7,27 +7,58 @@ dashedName: step-16
 
 # --description--
 
-Copy one of your `.row total` elements, with its contents, and paste that into your third `.section` element. Do not copy the other elements.
+In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
 
 # --hints--
 
-Your third `.section` element should have a `.row total` element.
+Your fourth `tr` should have a `th` element.
 
 ```js
-assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total'));
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
 ```
 
-Your new `.row total` element should match the other `.row total` elements.
+Your `th` element should have the text `Total Assets`.
 
 ```js
-assert.deepEqual(document.querySelectorAll('.row.total')?.[0]?.innerHTML, document.querySelectorAll('.row.total')?.[2]?.innerHTML);
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
 ```
 
-Your third `.section` element should not have any other elements within it.
+You should wrap the text `Assets` in a `span` element.
 
 ```js
-assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.previousElementSibling === null);
-assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.nextElementSibling === null);
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > 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'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+Your second `td` element should have the text `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+Your third `td` element should have the text `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
 ```
 
 # --seed--
@@ -38,90 +69,68 @@ assert(document.querySelectorAll('.section')?.[2]?.querySelector('.row.total')?.
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
 --fcc-editable-region--
-      <div class="section">
-
-      </div>
+              <tr class="total">
+              </tr>
 --fcc-editable-region--
-    </div>
-    <footer>Last Updated: December 2021</footer>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-017.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-017.md
index 4c791bb547..c8cb793e86 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-017.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-017.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e5d66b67e32e5f0f930e
+id: 61fd7b3fcaa5406257abc5d1
 title: Step 17
 challengeType: 0
 dashedName: step-17
@@ -7,43 +7,44 @@ dashedName: step-17
 
 # --description--
 
-Now you can start filling in the data. In your first `.row` element, give the `span` elements the following text values in order: `Cash`, `$25`, `$30`, and `$28`. Give the following `.notes` element the text `This is the cash we currently have on hand.`.
+Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
 
 # --hints--
 
-The first `span` element should have the text `Cash`.
+Your second `table` element should have a `caption` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[0];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Cash');
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
 ```
 
-The second `span` element should have the text `$25`.
+Your `caption` element should have the text `Liabilities`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[0];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$25');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
 ```
 
-The third `span` element should have the text `$30`.
+Your second `table` element should have a `thead` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[0];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$30');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
 ```
 
-The fourth `span` element should have the text `$28`.
+Your second `table` element should have a `tbody` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[0];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$28');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
 ```
 
-Your first `.notes` element should have the text `This is the cash we currently have on hand.`.
+Your `thead` element should be immediately below your `caption` element.
 
 ```js
-const notes = document.querySelectorAll('.section > .notes')?.[0];
-assert(notes?.textContent === 'This is the cash we currently have on hand.');
+assert(document.querySelectorAll('table')?.[1]?.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');
 ```
 
 # --seed--
@@ -54,95 +55,72 @@ assert(notes?.textContent === 'This is the cash we currently have on hand.');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
+          <table>
+          </table>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-018.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-018.md
index 2b7bb39b9b..ade22ee375 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-018.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-018.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e7150dc89231b01a3515
+id: 61fd8e491324ce717da97ffe
 title: Step 18
 challengeType: 0
 dashedName: step-18
@@ -7,43 +7,28 @@ dashedName: step-18
 
 # --description--
 
-In your second `.row` element, give the `span` elements the following text values in order: `Checking`, `$54`, `$56`, and `$53`. Give the following `.notes` element the text `Our primary transactional account.`.
+Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
 
 # --hints--
 
-The first `span` element should have the text `Checking`.
+Your `thead` element should have a `tr` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[1];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Checking');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
 ```
 
-The second `span` element should have the text `$54`.
+Your `tr` element should have a `td` element as the first child.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[1];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$54');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
 ```
 
-The third `span` element should have the text `$56`.
+Your `tr` element should have three `th` elements, after the `td` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[1];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$56');
-```
-
-The fourth `span` element should have the text `$53`.
-
-```js
-const row = document.querySelectorAll('.section > .row')?.[1];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$53');
-```
-
-Your second `.notes` element should have the text `Our primary transactional account.`.
-
-```js
-const notes = document.querySelectorAll('.section > .notes')?.[1];
-assert(notes?.textContent === 'Our primary transactional account.');
+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');
 ```
 
 # --seed--
@@ -54,95 +39,77 @@ assert(notes?.textContent === 'Our primary transactional account.');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-019.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-019.md
index a2ee4dabfd..bac3602563 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-019.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-019.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e8957e614d3b8eeb770f
+id: 61fd8fd08af43372f02952d0
 title: Step 19
 challengeType: 0
 dashedName: step-19
@@ -7,43 +7,52 @@ dashedName: step-19
 
 # --description--
 
-In your third `.row` element, give the `span` elements the following text values in order: `Savings`, `$500`, `$650`, and `$728`. Give the following `.notes` element the text `Funds set aside for emergencies.`.
+Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
 
 # --hints--
 
-The first `span` element should have the text `Savings`.
+Each of your `th` elements should have a `span` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[2];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Savings');
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
 ```
 
-The second `span` element should have the text `$500`.
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[2];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$500');
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
 ```
 
-The third `span` element should have the text `$650`.
+Your first `span` element should have the text `2019`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[2];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$650');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
 ```
 
-The fourth `span` element should have the text `$728`.
+Your second `span` element should have the text `2020`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[2];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$728');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
 ```
 
-Your third `.notes` element should have the text `Funds set aside for emergencies.`.
+Your third `span` element should have the text `2021`.
 
 ```js
-const notes = document.querySelectorAll('.section > .notes')?.[2];
-assert(notes?.textContent === 'Funds set aside for emergencies.');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.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);
 ```
 
 # --seed--
@@ -54,95 +63,83 @@ assert(notes?.textContent === 'Funds set aside for emergencies.');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
 --fcc-editable-region--
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-020.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-020.md
index f2debd0383..131dea452b 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-020.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-020.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e8eba043903cf68598cd
+id: 61fd9126aa72a474301fc49f
 title: Step 20
 challengeType: 0
 dashedName: step-20
@@ -7,36 +7,34 @@ dashedName: step-20
 
 # --description--
 
-In your first `.row total` element, give the `span` elements within the following text, in order: `Total`, `$579`, `$736`, and `$809`.
+Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
 
 # --hints--
 
-The first `span` element should have the text `Total`.
+Your `tbody` element should have four `tr` elements.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[3];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
 ```
 
-The second `span` element should have the text `$579`.
+Your first three `tr` elements should have the `class` attribute set to `data`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[3];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$579');
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
 ```
 
-The third `span` element should have the text `$736`.
+Your fourth `tr` element should have the `class` attribute set to `total`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[3];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$736');
-```
-
-The fourth `span` element should have the text `$809`.
-
-```js
-const row = document.querySelectorAll('.section > .row')?.[3];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$809');
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
 ```
 
 # --seed--
@@ -47,95 +45,83 @@ assert(row?.querySelectorAll('span')?.[3]?.textContent === '$809');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
 --fcc-editable-region--
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
 --fcc-editable-region--
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-021.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-021.md
index 66b56a7114..20fd2ad151 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-021.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-021.md
@@ -1,5 +1,5 @@
 ---
-id: 6193e9f7a92e7e3e1810b2f4
+id: 61fd933ba685de776a94997e
 title: Step 21
 challengeType: 0
 dashedName: step-21
@@ -7,43 +7,64 @@ dashedName: step-21
 
 # --description--
 
-Now move on to your second `.section` element. In the first `.row` there, give the `span` elements the following text in order: `Loans`, `$500`, `$250`, `$0`. Give the `.notes` element below it the text `The outstanding balance on our startup loan.`.
+Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans `, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
 
 # --hints--
 
-The first `span` element should have the text `Loans`.
+Your first `tr` should have a `th` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[4];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Loans');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
 ```
 
-The second `span` element should have the text `$500`.
+Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[4];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$500');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
 ```
 
-The third `span` element should have the text `$250`.
+You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[4];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$250');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
 ```
 
-The fourth `span` element should have the text `$0`.
+Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[4];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$0');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
 ```
 
-Your fourth `.notes` element should have the text `The outstanding balance on our startup loan.`.
+You should have three `td` elements.
 
 ```js
-const notes = document.querySelectorAll('.section > .notes')?.[3];
-assert(notes?.textContent === 'The outstanding balance on our startup loan.');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 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');
+```
+
+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');
+```
+
+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');
+```
+
+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'));
 ```
 
 # --seed--
@@ -54,95 +75,91 @@ assert(notes?.textContent === 'The outstanding balance on our startup loan.');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-022.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-022.md
index 91bf239e30..af41f3be27 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-022.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-022.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ea793e49253eee1452d1
+id: 61fd94056e0355785fbba4d3
 title: Step 22
 challengeType: 0
 dashedName: step-22
@@ -7,43 +7,64 @@ dashedName: step-22
 
 # --description--
 
-Give the `span` elements within your sixth `.row` element the following text, in order: `Expenses`, `$200`, `$300`, and `$400`. Then give the following `.notes` element the text `Annual anticipated expenses, such as payroll.`.
+Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses `, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
 
 # --hints--
 
-The first `span` element should have the text `Expenses`.
+Your second `tr` should have a `th` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[5];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Expenses');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
 ```
 
-The second `span` element should have the text `$200`.
+Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[5];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$200');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
 ```
 
-The third `span` element should have the text `$300`.
+You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[5];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$300');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
 ```
 
-The fourth `span` element should have the text `$400`.
+Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[5];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$400');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
 ```
 
-Your fifth `.notes` element should have the text `Annual anticipated expenses, such as payroll.`.
+You should have three `td` elements.
 
 ```js
-const notes = document.querySelectorAll('.section > .notes')?.[4];
-assert(notes?.textContent === 'Annual anticipated expenses, such as payroll.');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 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');
+```
+
+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');
+```
+
+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');
+```
+
+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'));
 ```
 
 # --seed--
@@ -54,95 +75,95 @@ assert(notes?.textContent === 'Annual anticipated expenses, such as payroll.');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-023.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-023.md
index 2cf9464e02..3aec85d5d2 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-023.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-023.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ece0b46e03423cd66e78
+id: 61fd986ddbcbd47ba8fbc5ec
 title: Step 23
 challengeType: 0
 dashedName: step-23
@@ -7,43 +7,64 @@ dashedName: step-23
 
 # --description--
 
-For your seventh `.row` element, give the `span` elements the following text, in order: `Credit`, `$50`, `$50`, and `$75`. Give the `.notes` element below it the text `The running balance on our line of credit.`.
+Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit `, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
 
 # --hints--
 
-The first `span` element should have the text `Credit`.
+Your third `tr` should have a `th` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[6];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Credit');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
 ```
 
-The second `span` element should have the text `$50`.
+Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[6];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$50');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
 ```
 
-The third `span` element should have the text `$50`.
+You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[6];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$50');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
 ```
 
-The fourth `span` element should have the text `$75`.
+Your `span` element should have the `class` attribute set to `description`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[6];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$75');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
 ```
 
-Your fifth `.notes` element should have the text `The running balance on our line of credit.`.
+You should have three `td` elements.
 
 ```js
-const notes = document.querySelectorAll('.section > .notes')?.[5];
-assert(notes?.textContent === 'The running balance on our line of credit.');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 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');
+```
+
+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');
+```
+
+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');
+```
+
+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'));
 ```
 
 # --seed--
@@ -54,95 +75,99 @@ assert(notes?.textContent === 'The running balance on our line of credit.');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
 --fcc-editable-region--
-        <p class="row">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-        <span class="notes"></span>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
 --fcc-editable-region--
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-024.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-024.md
index 15547ee3b6..9cf7f90c4c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-024.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-024.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ed97ae313e4331c9078a
+id: 61fd990577d8227dd93fbeeb
 title: Step 24
 challengeType: 0
 dashedName: step-24
@@ -7,36 +7,64 @@ dashedName: step-24
 
 # --description--
 
-Give the `span` elements within your second `.row total` element the following text, in order: `Total`, `$750`, `$600`, and `$475`.
+In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
 
 # --hints--
 
-The first `span` element should have the text `Total`.
+Your fourth `tr` should have a `th` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[7];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
 ```
 
-The second `span` element should have the text `$750`.
+Your `th` element should have the text `Total Liabilities`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[7];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '$750');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
 ```
 
-The third `span` element should have the text `$600`.
+You should wrap the text `Liabilities` in a `span` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[7];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$600');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
 ```
 
-The fourth `span` element should have the text `$475`.
+Your `span` element should have the `class` attribute set to `sr-only`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[7];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$475');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.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);
+```
+
+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');
+```
+
+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');
+```
+
+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');
+```
+
+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'));
 ```
 
 # --seed--
@@ -47,95 +75,103 @@ assert(row?.querySelectorAll('span')?.[3]?.textContent === '$475');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
 --fcc-editable-region--
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
 --fcc-editable-region--
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-025.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-025.md
index c69d8abdfe..81e1dee8db 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-025.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-025.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ededc017a2443f10429b
+id: 61fd9a4ff2fc4481b9157bd7
 title: Step 25
 challengeType: 0
 dashedName: step-25
@@ -7,36 +7,44 @@ dashedName: step-25
 
 # --description--
 
-In your final `.row total` element, give the `span` elements the following text, in order: `Total`, `-$171`, `$136`, and `$334`.
+For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
 
 # --hints--
 
-The first `span` element should have the text `Total`.
+Your third `table` element should have a `caption` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[8];
-assert(row?.querySelectorAll('span')?.[0]?.textContent === 'Total');
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
 ```
 
-The second `span` element should have the text `-$171`.
+Your `caption` element should have the text `Net Worth`.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[8];
-assert(row?.querySelectorAll('span')?.[1]?.textContent === '-$171');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
 ```
 
-The third `span` element should have the text `$136`.
+Your third `table` element should have a `thead` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[8];
-assert(row?.querySelectorAll('span')?.[2]?.textContent === '$136');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
 ```
 
-The fourth `span` element should have the text `$334`.
+Your third `table` element should have a `tbody` element.
 
 ```js
-const row = document.querySelectorAll('.section > .row')?.[8];
-assert(row?.querySelectorAll('span')?.[3]?.textContent === '$334');
+assert(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');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
 ```
 
 # --seed--
@@ -47,95 +55,107 @@ assert(row?.querySelectorAll('span')?.[3]?.textContent === '$334');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
 --fcc-editable-region--
-        <p class="row total">
-          <span class="name"></span>
-          <span></span>
-          <span></span>
-          <span class="current"></span>
-        </p>
+          <table>
+          </table>
 --fcc-editable-region--
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-026.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-026.md
index c71cb5023a..59a1058de0 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-026.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-026.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ee19d10be144d6bc9c46
+id: 61fd9ad665a4a282c8106be3
 title: Step 26
 challengeType: 0
 dashedName: step-26
@@ -7,22 +7,72 @@ dashedName: step-26
 
 # --description--
 
-Now that you have all of the financial data in place, you need to style your balance sheet so it looks visually appealing.
-
-Start by creating a `body` selector, and give it a `text-align` property set to `center`.
+Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
 
 # --hints--
 
-You should create a `body` selector.
+Your `thead` element should have a `tr` element.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body'));
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
 ```
 
-Your `body` selector should have a `text-align` property set to `center`.
+Your `tr` element should have a `td` element as the first child.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.textAlign === 'center');
+assert(document.querySelectorAll('table')?.[2]?.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');
+```
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(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')];
+ths?.forEach(th => {
+  assert(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');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.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');
+```
+
+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);
 ```
 
 # --seed--
@@ -33,99 +83,116 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.textAlign === 'center')
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
---fcc-editable-region--
 
---fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-027.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-027.md
index bb729f4c93..27d9e4757e 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-027.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-027.md
@@ -1,5 +1,5 @@
 ---
-id: 6193f5169cdc684f60317783
+id: 61fd9b7285bde783ad5b8aac
 title: Step 27
 challengeType: 0
 dashedName: step-27
@@ -7,20 +7,76 @@ dashedName: step-27
 
 # --description--
 
-The browser defaults for font and color are not ideal. Give your `body` selector a `font-family` property set to `Tahoma` and a `color` property set to `#0a0a23`.
+Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+
+Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
 
 # --hints--
 
-Your `body` selector should have a `font-family` property set to `Tahoma`.
+Your `tbody` element should have one `tr` element.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Tahoma');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
 ```
 
-Your `body` selector should have a `color` property set to `#0a0a23`.
+Your `tr` element should have the `class` set to `total`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'rgb(10, 10, 35)');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('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'));
+```
+
+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');
+```
+
+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');
+```
+
+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'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 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');
+```
+
+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');
+```
+
+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');
+```
+
+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'));
 ```
 
 # --seed--
@@ -31,101 +87,122 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'rgb(10, 10,
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
---fcc-editable-region--
-body {
-  text-align: center;
-}
---fcc-editable-region--
+
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-028.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-028.md
index c44f892709..910085ed09 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-028.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-028.md
@@ -1,5 +1,5 @@
 ---
-id: 6193f6615b1bd85076fc5ef2
+id: 61fd9d9fbdfe078800317055
 title: Step 28
 challengeType: 0
 dashedName: step-28
@@ -7,26 +7,20 @@ dashedName: step-28
 
 # --description--
 
-The content within your balance sheet should be left-justified, while the sheet itself remains centered on the page. Create a `#sheet` selector and give it a `text-align` property set to `left` and a `max-width` property set to `500px`.
+Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
 
 # --hints--
 
-You should create a new `#sheet` selector.
+You should have an `html` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#sheet'));
+assert(new __helpers.CSSHelp(document).getStyle('html'));
 ```
 
-Your `#sheet` selector should have a `text-align` property set to `left`.
+Your `html` selector should have a `box-sizing` property set to `border-box`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.textAlign === 'left');
-```
-
-Your `#sheet` selector should have a `max-width` property set to `500px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.maxWidth === '500px');
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
 ```
 
 # --seed--
@@ -37,104 +31,127 @@ assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.maxWidth === '500px')
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
-body {
-  text-align: center;
-  font-family: Tahoma;
-  color: #0a0a23;
-}
-
 --fcc-editable-region--
 
 --fcc-editable-region--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-029.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-029.md
index 81e1842a8b..d651542bf3 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-029.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-029.md
@@ -1,5 +1,5 @@
 ---
-id: 6193f7074ca69153347fbc3a
+id: 61fda307bde0b091cf7d884a
 title: Step 29
 challengeType: 0
 dashedName: step-29
@@ -7,14 +7,26 @@ dashedName: step-29
 
 # --description--
 
-Your sheet has shifted back to the left side of the page, because you applied a fixed width. To resolve this, give your `#sheet` selector a `margin` property set to `auto`.
+Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
 
 # --hints--
 
-Your `#sheet` selector should have a `margin` property set to `auto`.
+You should have a `body` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.margin === 'auto');
+assert(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');
+```
+
+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)');
 ```
 
 # --seed--
@@ -25,108 +37,132 @@ assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.margin === 'auto');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
-body {
-  text-align: center;
-  font-family: Tahoma;
-  color: #0a0a23;
+html {
+  box-sizing: border-box;
 }
 
 --fcc-editable-region--
-#sheet {
-  text-align: left;
-  max-width: 500px;
-}
+
 --fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-030.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-030.md
index 4cb51f905f..a0c649854f 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-030.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-030.md
@@ -1,5 +1,5 @@
 ---
-id: 6193f74b982e4c5449f51a47
+id: 61fda339eadcfd92a6812bed
 title: Step 30
 challengeType: 0
 dashedName: step-30
@@ -7,20 +7,24 @@ dashedName: step-30
 
 # --description--
 
-To make your sheet stand out from the page, you'll want to give it a border. Give the `#sheet` selector a `padding` property set to `10px` to create space between the content and the border, then give it a `border` property set to `2px solid #d0d0d5`.
+Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
+
+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`.
 
 # --hints--
 
-Your `#sheet` selector should have a `padding` property set to `10px`.
+You should have an `span[class~="sr-only"]` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.padding === '10px');
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
 ```
 
-Your `#sheet` selector should have a `border` property set to `2px solid #d0d0d5`.
+Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.border === '2px solid rgb(208, 208, 213)');
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
 ```
 
 # --seed--
@@ -31,109 +35,137 @@ assert(new __helpers.CSSHelp(document).getStyle('#sheet')?.border === '2px solid
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
-body {
-  text-align: center;
-  font-family: Tahoma;
-  color: #0a0a23;
-}
+--fcc-editable-region--
 
 --fcc-editable-region--
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
 }
---fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-031.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-031.md
index f7be5f3565..abdf51a574 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-031.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-031.md
@@ -1,5 +1,5 @@
 ---
-id: 6193f7904dc7ee554d12571f
+id: 61fdac1e31692f9a9ad97295
 title: Step 31
 challengeType: 0
 dashedName: step-31
@@ -7,20 +7,28 @@ dashedName: step-31
 
 # --description--
 
-The `AcmeWidgetCorp` text should be a bit smaller. Create a `#header h2` selector to target only the `h2` elements within your `#header` element, and give it a `font-size` property set to `1.3em`.
+The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+
+The `clip-path` property determines the shape the `clip` property should take. Use both the `clip-path` and `-webkit-clip-path` selectors to set the value to `inset(50%)`, forming the clip-path into a rectangle within the element.
 
 # --hints--
 
-You should have a new `header h2` selector.
+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('#header h2'));
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
 ```
 
-Your `header h2` selector should have a `font-size` property set to `1.3em`.
+Your `span[class~="sr-only"] ` selector should have a `clip-path` property set to `inset(50%)`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.fontSize === '1.3em');
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+Your `span[class~="sr-only"]` selector should have a `-webkit-clip-path` property set to `inset(50%)`.
+
+```js
+assert(/-webkit-clip-path\s*:\s*inset\(\s*50%\s*\)\s*(;|})/.test(code));
 ```
 
 # --seed--
@@ -31,113 +39,140 @@ assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.fontSize === '1.3
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
-
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-032.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-032.md
index 7cc48ea81e..4387b19a16 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-032.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-032.md
@@ -1,5 +1,5 @@
 ---
-id: 6193f85ab1de4356da678090
+id: 61fdaea3999cb19d76ce717b
 title: Step 32
 challengeType: 0
 dashedName: step-32
@@ -7,26 +7,20 @@ dashedName: step-32
 
 # --description--
 
-Now you need to align the text content of your sheet so that it appears in columns. Start with a `.row` selector to target all of your elements that have the balance values in them. Give this selector a `display` property set to `flex`, and a `justify-content` property set to `flex-end`.
+Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
 
 # --hints--
 
-You should have a new `.row` selector.
+Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row'));
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
 ```
 
-Your `.row` selector should have a `display` property set to `flex`.
+Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row')?.display === 'flex');
-```
-
-Your `.row` selector should have a `justify-content` property set to `flex-end`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.row')?.justifyContent === 'flex-end');
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
 ```
 
 # --seed--
@@ -37,117 +31,143 @@ assert(new __helpers.CSSHelp(document).getStyle('.row')?.justifyContent === 'fle
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
-
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
-}
-
-#header h2 {
-  font-size: 1.3em;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-033.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-033.md
index 1947c078bf..ef95c7097c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-033.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-033.md
@@ -1,5 +1,5 @@
 ---
-id: 6193fa3224d7465850407d3d
+id: 61fdaf9ff894b6a084ecdc1b
 title: Step 33
 challengeType: 0
 dashedName: step-33
@@ -7,28 +7,20 @@ dashedName: step-33
 
 # --description--
 
-The `flex-end` setting has also brought your row's description text to the right of the element. To fix this, create a `.name` selector and give it a `width` property of `100%`, and a `text-align` property of `left`.
-
-Because you're using `flex`, this tells your `.name` elements to take up 100% of the remaining available width, which allows the text to move to the left.
+To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
 
 # --hints--
 
-You should have a new `.name` selector.
+Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.name'));
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
 ```
 
-Your `.name` selector should have a `width` property set to `100%`.
+Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.name')?.width === '100%');
-```
-
-Your `.name` selector should have a `text-align` property set to `left`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.name')?.textAlign === 'left');
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
 ```
 
 # --seed--
@@ -39,122 +31,145 @@ assert(new __helpers.CSSHelp(document).getStyle('.name')?.textAlign === 'left');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
-
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
-}
-
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row {
-  display: flex;
-  justify-content: flex-end;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-034.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-034.md
index 4cd1cc927c..87775a2f83 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-034.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-034.md
@@ -1,5 +1,5 @@
 ---
-id: 6193fb8bef24145b57fbed00
+id: 61fdafe6f07fd7a1c6785bc2
 title: Step 34
 challengeType: 0
 dashedName: step-34
@@ -7,28 +7,26 @@ dashedName: step-34
 
 # --description--
 
-Now you'll need to adjust the layout of the dollar values. The CSS `:not()` selector allows you to target all elements matching a given selector *except* those which match the selector you provide within `:not()`.
-
-Create a `span:not(.name)` selector to target all of your `span` elements except those with the `class` set to `name`. Give it a `margin-left` property set to `10px` and a `min-width` property set to `15%`.
+Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
 
 # --hints--
 
-You should have a new `span:not(.name)` selector.
+Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)'));
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
 ```
 
-Your `span:not(.name)` selector should have a `margin-left` property set to `10px`.
+Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.marginLeft === '10px');
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
 ```
 
-Your `span:not(.name)` selector should have a `min-width` property set to `15%`.
+Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.minWidth === '15%');
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
 ```
 
 # --seed--
@@ -39,127 +37,147 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.minWidth ===
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
-
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
-}
-
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row {
-  display: flex;
-  justify-content: flex-end;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-.name {
-  width: 100%;
-  text-align: left;
-}
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-035.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-035.md
index c640a084b3..9d0ebd5e23 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-035.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-035.md
@@ -1,5 +1,5 @@
 ---
-id: 6193fd22d907385efadb59c9
+id: 61fdb04d9939f0a26ca51c2b
 title: Step 35
 challengeType: 0
 dashedName: step-35
@@ -7,14 +7,32 @@ dashedName: step-35
 
 # --description--
 
-The text does not look quite right. Typically, in an accounting sheet, the numeric columns are justified to the right. Give your `span:not(.name)` selector a `text-align` property set to `right`.
+Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
 
 # --hints--
 
-Your `span:not(.name)` selector should have a `text-align` property set to `right`.
+You should have an `h1` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.textAlign === 'right');
+assert(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');
+```
+
+Your `h1` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(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');
 ```
 
 # --seed--
@@ -25,130 +43,151 @@ assert(new __helpers.CSSHelp(document).getStyle('span:not(.name)')?.textAlign ==
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
-}
-
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row {
-  display: flex;
-  justify-content: flex-end;
-}
-
---fcc-editable-region--
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%; 
-}
 --fcc-editable-region--
 
-.name {
-  width: 100%;
-  text-align: left;
-}
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-036.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-036.md
index 4935e76d80..ae73d538e5 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-036.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-036.md
@@ -1,5 +1,5 @@
 ---
-id: 6193fe24beedd361f34f8e96
+id: 620159cd5431aa34bc6a4c9c
 title: Step 36
 challengeType: 0
 dashedName: step-36
@@ -7,20 +7,32 @@ dashedName: step-36
 
 # --description--
 
-CSS has an `[attribute=value]` selector which allows you to target any element where an attribute has a specific value. Create a `span[class="current"]` selector to target all of your `span` elements where the `class` is set to `current`. Give it a `font-style` property set to `italic`.
+Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
 
 # --hints--
 
-You should have a new `span[class="current"]` selector.
+You should have an `h1 .flex` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]'));
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
 ```
 
-Your `span[class="current"]` selector should have a `font-style` property set to `italic`.
+Your `h1 .flex` selector should have a `display` property set to `flex`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]')?.fontStyle === 'italic');
+assert(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');
+```
+
+Your `h1 .flex` selector should have a `gap` property set to `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
 ```
 
 # --seed--
@@ -31,133 +43,157 @@ assert(new __helpers.CSSHelp(document).getStyle('span[class="current"]')?.fontSt
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
-}
-
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row {
-  display: flex;
-  justify-content: flex-end;
-}
-
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
 }
 
 --fcc-editable-region--
 
 --fcc-editable-region--
-
-.name {
-  width: 100%;
-  text-align: left;
-}
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-037.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-037.md
index 3ece6358d3..6cab92d350 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-037.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-037.md
@@ -1,5 +1,5 @@
 ---
-id: 6193febd52ffb76345956072
+id: 62015a5da1c95c358f079ebb
 title: Step 37
 challengeType: 0
 dashedName: step-37
@@ -7,16 +7,22 @@ dashedName: step-37
 
 # --description--
 
-The rows on your sheet are difficult to read. You'll need to create some visual distinction to help your readers understand the document flow.
+The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
 
-Start by giving your `.row` selector a `border-bottom` property set to `1px solid #0a0a23`.
+Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
 
 # --hints--
 
-Your `.row` selector should have a `border-bottom` property set to `1px solid #0a0a23`.
+You should have an `h1 .flex span:first-of-type` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row')?.borderBottom === '1px solid rgb(10, 10, 35)');
+assert(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');
 ```
 
 # --seed--
@@ -27,135 +33,163 @@ assert(new __helpers.CSSHelp(document).getStyle('.row')?.borderBottom === '1px s
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
---fcc-editable-region--
-.row {
+h1 .flex {
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column-reverse;
+  gap: 1rem;
 }
+
 --fcc-editable-region--
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
-}
-
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
-}
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-038.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-038.md
index 25407c3b70..cb68bf5ea0 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-038.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-038.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ff2b1198596496b81450
+id: 62015cd2654a1139321a89d2
 title: Step 38
 challengeType: 0
 dashedName: step-38
@@ -7,14 +7,20 @@ dashedName: step-38
 
 # --description--
 
-The new border is very close to the text in your rows. Give your `.row` selector a `padding` property set to `4px` to add extra spacing around your text.
+The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
 
 # --hints--
 
-Your `.row` selector should have a `padding` property set to `4px`.
+You should have an `h1 .flex span:last-of-type` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row')?.padding === '4px');
+assert(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');
 ```
 
 # --seed--
@@ -25,136 +31,167 @@ assert(new __helpers.CSSHelp(document).getStyle('.row')?.padding === '4px');
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
---fcc-editable-region--
-.row {
+h1 .flex {
   display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
+  flex-direction: column-reverse;
+  gap: 1rem;
 }
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
 --fcc-editable-region--
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
-}
-
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
-}
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-039.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-039.md
index 48378c9800..2bc4afdd60 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-039.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-039.md
@@ -1,5 +1,5 @@
 ---
-id: 6193ff6c2a6138658b4ce2af
+id: 62015d8942384c3aed48329e
 title: Step 39
 challengeType: 0
 dashedName: step-39
@@ -7,22 +7,32 @@ dashedName: step-39
 
 # --description--
 
-Your rows need some background color to help differentiate the data.
-
-The `:nth-child()` selector allows you to target elements based on their position in a group of sibling elements. Create a `.row:nth-child(odd)` selector to target all `.row` elements that are an odd child (child 1, child 3, etc). Give this selector a `background-color` property set to `#dfdfe2`.
+You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
 
 # --hints--
 
-You should have a new `.row:nth-child(odd)` selector.
+You should have a `section` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)'));
+assert(new __helpers.CSSHelp(document).getStyle('section'));
 ```
 
-Your `.row:nth-child(odd)` selector should have a `background-color` property set to `#dfdfe2`.
+Your `section` selector should have a `max-width` property set to `40rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)')?.backgroundColor === 'rgb(223, 223, 226)');
+assert(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');
+```
+
+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)');
 ```
 
 # --seed--
@@ -33,140 +43,171 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)')?.backgro
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-
-.row {
+h1 .flex {
   display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  flex-direction: column-reverse;
+  gap: 1rem;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
 }
 
-span[class="current"] {
-  font-style: italic;
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
 }
 
-.name {
-  width: 100%;
-  text-align: left;
-}
+--fcc-editable-region--
+
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-040.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-040.md
index 5c3848f4ed..c89aaf694a 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-040.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-040.md
@@ -1,5 +1,5 @@
 ---
-id: 6194034278b71f6940a50d91
+id: 620167374bb8b4455cd11125
 title: Step 40
 challengeType: 0
 dashedName: step-40
@@ -7,28 +7,38 @@ dashedName: step-40
 
 # --description--
 
-You'll notice that this change has made all of your `.row` elements have the new background color. This is because the `nth-child()` selector looks at the position relative to all element siblings.
-
-The `nth-of-type()` selector, however, looks at an element's position relative only to the elements matching the selector in the sibling group. Change your `.row:nth-child(odd)` selector to be `.row:nth-of-type(odd)`, and you should see the difference.
+The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
 
 # --hints--
 
-You should change your selector to be `.row:nth-of-type(odd)`.
+You should have a `#years` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)'));
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
 ```
 
-You should not have a `.row:nth-child(odd)` selector.
+Your `#years` selector should have a `display` property set to `flex`.
 
 ```js
-assert(!new __helpers.CSSHelp(document).getStyle('.row:nth-child(2n+1)'));
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
 ```
 
-Your `.row:nth-of-type(odd)` selector should have a `background-color` property set to `#dfdfe2`.
+Your `#years` selector should have a `justify-content` property set to `flex-end`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)')?.backgroundColor === 'rgb(223, 223, 226)');
+assert(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');
+```
+
+Your `#years` selector should have a `top` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
 ```
 
 # --seed--
@@ -39,142 +49,177 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n+1)')?.backg
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
---fcc-editable-region--
-.row:nth-child(odd) {
-  background-color: #dfdfe2;
-}
 --fcc-editable-region--
 
-
-.row {
-  display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
-}
-
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
-}
-
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
-}
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-041.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-041.md
index 92d8b000fb..93211788c4 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-041.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-041.md
@@ -1,5 +1,5 @@
 ---
-id: 619403dacf51db6a79b47b52
+id: 620174ed519dd7506c1a4b61
 title: Step 41
 challengeType: 0
 dashedName: step-41
@@ -7,20 +7,20 @@ dashedName: step-41
 
 # --description--
 
-Now target your even `.row` elements using another `:nth-of-type()` selector, and give them a `background-color` property set to `#d0d0d5`.
+Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
 
 # --hints--
 
-You should have a new `.row:nth-of-type(even)` selector.
+Your `#years` should have a `color` property set to `#fff`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)'));
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
 ```
 
-Your `.row:nth-of-type(even)` selector should have a `background-color` property set to `#d0d0d5`.
+Your `#years` should have a `background-color` property set to `#0a0a23`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)')?.backgroundColor === 'rgb(208, 208, 213)');
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
 ```
 
 # --seed--
@@ -31,143 +31,183 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:nth-of-type(2n)')?.backgro
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
 --fcc-editable-region--
-
---fcc-editable-region--
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
-}
+  position: sticky;
+  top: 0;
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
-}
-
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
 }
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-042.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-042.md
index fcfc51a1d9..c5aa6c5913 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-042.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-042.md
@@ -1,5 +1,5 @@
 ---
-id: 6194079d7cbf586eba9539ff
+id: 620175b3710a0951cfa86edf
 title: Step 42
 challengeType: 0
 dashedName: step-42
@@ -7,28 +7,36 @@ dashedName: step-42
 
 # --description--
 
-Your last `.row` element in each section should stand out, as this is your "total" row. The `:last-child` selector allows you to target the matching element that is the final child in a group of siblings.
+The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
 
-Create a `.row:last-child` selector and give it a `background-color` property set to `transparent`. Also set the `margin-bottom` property to `30px` to create some extra space between your sections.
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+Ensure your years do not get hidden by setting a `z-index` of `999`. Then, give it a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
 
 # --hints--
 
-You should have a new `.row:last-child` selector.
+Your `#years` selector should have a `z-index` property set to `999`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:last-child'));
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999');
 ```
 
-Your `.row:last-child` selector should have a `background-color` property set to `transparent`.
+Your `#years` selector should have a `margin` property set to `0 -2px`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.backgroundColor === 'transparent');
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
 ```
 
-Your `.row:last-child` selector should have a `margin-bottom` property set to `30px`.
+Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.marginBottom === '30px');
+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));
 ```
 
 # --seed--
@@ -39,147 +47,184 @@ assert(new __helpers.CSSHelp(document).getStyle('.row:last-child')?.marginBottom
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
 --fcc-editable-region--
-
---fcc-editable-region--
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
-}
-
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
-}
-
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
 }
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-043.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-043.md
index 523baebefc..6f77e9a7f1 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-043.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-043.md
@@ -1,5 +1,5 @@
 ---
-id: 619409a3b1ec0b727ac2ab30
+id: 6201782cc420715562f36271
 title: Step 43
 challengeType: 0
 dashedName: step-43
@@ -7,22 +7,34 @@ dashedName: step-43
 
 # --description--
 
-The `[attribute~=value]` selector allows you to target elements where the attribute *includes* the value. Create a `p[class~="total"]` selector to target all of your `p` elements where the `class` includes `total` (such as your `.row total` elements). Give this selector a `border-bottom` property set to `4px double #0a0a23` to help divide your sections, and set the `font-weight` to `bold` to draw attention to them.
+Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
 
-This may seem the same as using the `.total` class selector. However, CSS is parsed top-down. Your `.row` selector comes after this new selector, and would overwrite the `.total` selector. Because `p[class~="total"]` has a higher <dfn>selector specificity</dfn>, it takes priority even though it comes earlier in the stylesheet.
+Give your new selector a bold font, a width of `4.5rem`, and text aligned to the right.
 
 # --hints--
 
-You should have a new `p[class~="total"]` selector.
+You should have a `#years span[class]` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]'));
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
 ```
 
-Your `p[class~="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
+Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]')?.borderBottom === '4px double rgb(10, 10, 35)');
+assert(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');
+```
+
+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');
 ```
 
 # --seed--
@@ -33,152 +45,189 @@ assert(new __helpers.CSSHelp(document).getStyle('p[class~="total"]')?.borderBott
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
-}
+--fcc-editable-region--
 
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
-}
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-044.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-044.md
index 46b34420d0..d26e1da753 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-044.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-044.md
@@ -1,5 +1,5 @@
 ---
-id: 61940bfdc4e2a874af766567
+id: 620179bc0a6a2358c72b90ad
 title: Step 44
 challengeType: 0
 dashedName: step-44
@@ -7,24 +7,20 @@ dashedName: step-44
 
 # --description--
 
-Arguably the most important part of a balance sheet is the totals. You want to be able to quickly cycle through the total values on your sheet. This can be achieved by using the `tabindex` attribute. Give each of your `.row total` elements a `tabindex` attribute set to `1`.
-
-It is important to note here that adjusting the `tabindex` value in this way can negatively affect the accessibility of your page, as it changes the flow of the document for assistive devices such as screen readers.
+You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
 
 # --hints--
 
-Each of your `.row total` elements should have a `tabindex` attribute set to `1`.
+You should have a `.table-wrap` selector.
 
 ```js
-const rows = [...document.querySelectorAll('.row.total')];
-assert(rows?.every(row => row.getAttribute('tabindex') === '1'));
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
 ```
 
-You should not set the `tabindex` on any other elements.
+Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
 
 ```js
-const elements = [...document.querySelectorAll('*[tabindex]')];
-assert(elements?.every(element => element.classList.contains('row') && element.classList.contains('total')));
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
 ```
 
 # --seed--
@@ -35,155 +31,195 @@ assert(elements?.every(element => element.classList.contains('row') && element.c
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
---fcc-editable-region--
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
---fcc-editable-region--
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
-}
+--fcc-editable-region--
 
-.name {
-  width: 100%;
-  text-align: left;
-}
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-045.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-045.md
index 80aca6adb8..e21417336a 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-045.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-045.md
@@ -1,5 +1,5 @@
 ---
-id: 61940e95c95cff77d0b2a310
+id: 62017b6f47454059bf2d3bd1
 title: Step 45
 challengeType: 0
 dashedName: step-45
@@ -7,20 +7,22 @@ dashedName: step-45
 
 # --description--
 
-The `[attribute]` selector allows you to target elements that have *any* value set for the given attribute. Create a `.row[tabindex]:hover` selector to target your `.row` elements which have a specific `tabindex` value. Give that selector a `background-color` property of `#99c9ff`.
+Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
+
+The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `span[class~="sr-only"]` class. This ensures that your earlier rules for the `sr-only` class are not overwritten.
 
 # --hints--
 
-You should have a new `.row[tabindex]:hover` selector.
+You should have a `span:not(.sr-only)` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover'));
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
 ```
 
-Your `.row[tabindex]:hover` selector should have a `background-color` property set to `#99c9ff`.
+Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover')?.backgroundColor === 'rgb(153, 201, 255)');
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
 ```
 
 # --seed--
@@ -31,154 +33,196 @@ assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:hover')?.backgro
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
 --fcc-editable-region--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-046.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-046.md
index 992d5f4b23..0b9984b108 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-046.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-046.md
@@ -1,5 +1,5 @@
 ---
-id: 61940f551fa4db7967451be9
+id: 62017f47c87be96457c49f46
 title: Step 46
 challengeType: 0
 dashedName: step-46
@@ -7,28 +7,88 @@ dashedName: step-46
 
 # --description--
 
-You can see your changes when you hover over a total row, but it does not apply when you tab to them. An element that has been targeted by the tab key (or a mouse click) can be styled using the `:focus` selector.
+Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
 
-Create a `.row[tabindex]:focus` selector, and give it a `background-color` property set to `#198eee` and a `color` property set to `white`. Then try experimenting with hovering and clicking on your rows.
+Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
 
 # --hints--
 
-You should have a new `.row[tabindex]:focus` selector.
+Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus'));
+// 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'));
 ```
 
-Your `.row[tabindex]:focus` selector should have a `background-color` property set to `#198eee`.
+Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.backgroundColor === 'rgb(25, 142, 238)');
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
 ```
 
-Your `.row[tabindex]:focus` selector should have a `color` property set to `white`.
+Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.color === 'white');
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `-webkit-clip-path` property set to `inset(50%) !important`.
+
+```js
+// this one gets removed apparently
+assert(code.includes('-webkit-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;'));
+```
+
+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;'));
+```
+
+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;'));
+```
+
+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;'));
+```
+
+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;'));
+```
+
+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;'));
+```
+
+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;'));
 ```
 
 # --seed--
@@ -39,161 +99,201 @@ assert(new __helpers.CSSHelp(document).getStyle('.row[tabindex]:focus')?.color =
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
-.name {
-  width: 100%;
-  text-align: left;
+span:not(.sr-only) {
+  font-weight: normal;
 }
-
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-047.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-047.md
index ee00cc61f1..2dd7eb24e0 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-047.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-047.md
@@ -1,5 +1,5 @@
 ---
-id: 6194108c6951ca7cae9596bd
+id: 62017fa5bbef406580ceb44f
 title: Step 47
 challengeType: 0
 dashedName: step-47
@@ -7,22 +7,26 @@ dashedName: step-47
 
 # --description--
 
-The `elem1 > elem2` selector allows you to target all `elem2` elements that are a direct child of an `elem1` element.
-
-Create a `div > h2` rule to target all of your `h2` elements that are a direct child of a `div` element. Give the selector a `background-color` property set to `#99c9ff`. 
+Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
 
 # --hints--
 
-You should have a new `div > h2` selector.
+You should not have a `span:not(.sr-only)` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('div > h2'));
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
 ```
 
-Your `div > h2` selector should have a `background-color` property set to `#99c9ff`.
+You should have a `span` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.backgroundColor === 'rgb(153, 201, 255)');
+assert(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');
 ```
 
 # --seed--
@@ -33,166 +37,201 @@ assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.backgroundColor ===
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
-  width: 100%;
-  text-align: left;
-}
-
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
-
-.row[tabindex]:focus {
-  background-color: #198eee;
-  color: white;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
 --fcc-editable-region--
-
+span:not(.sr-only) {
+  font-weight: normal;
+}
 --fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-048.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-048.md
index 4661f0b209..4e582d6f25 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-048.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-048.md
@@ -1,5 +1,5 @@
 ---
-id: 619410f7040d427d9c782db7
+id: 62018243f046a368fab8ffb6
 title: Step 48
 challengeType: 0
 dashedName: step-48
@@ -7,14 +7,26 @@ dashedName: step-48
 
 # --description--
 
-You may have noticed that this affected your `AcmeWidgetCorp` text as well, because it is a direct child of a `div` element. Give your `#header h2` selector a `background` property set to `transparent` to fix this.
+Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
 
 # --hints--
 
-Your `#header h2` selector should have a `background` property set to `transparent`.
+You should have a `table` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.backgroundColor === 'transparent');
+assert(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');
+```
+
+Your `table` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
 ```
 
 # --seed--
@@ -25,168 +37,203 @@ assert(new __helpers.CSSHelp(document).getStyle('#header h2')?.backgroundColor =
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
---fcc-editable-region--
-#header h2 {
-  font-size: 1.3em;
-}
---fcc-editable-region--
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
-.name {
-  width: 100%;
-  text-align: left;
+span {
+  font-weight: normal;
 }
 
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
+--fcc-editable-region--
 
-.row[tabindex]:focus {
-  background-color: #198eee;
-  color: white;
-}
-
-div > h2 {
-  background-color: #99c9ff;
-}
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-049.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-049.md
index 81f37a366d..f87c67c618 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-049.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-049.md
@@ -1,5 +1,5 @@
 ---
-id: 6194114534b4547e5177cb2a
+id: 6201830cb0c74b69f1b41635
 title: Step 49
 challengeType: 0
 dashedName: step-49
@@ -7,20 +7,26 @@ dashedName: step-49
 
 # --description--
 
-Your row headers still need a bit of adjustment. Give your `div > h2` selector a `font-size` property set to `1.3em` and a `padding` property set to `0 4px`.
+Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
 
 # --hints--
 
-Your `div > h2` selector should have a `font-size` property set to `1.3em`.
+Your `table` selector should have a `width` property set to `100%`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.fontSize === '1.3em');
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
 ```
 
-Your `div > h2` selector should have a `padding` property set to `0 4px`.
+Your `table` selector should have a `position` property set to `relative`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.padding === '0px 4px');
+assert(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');
 ```
 
 # --seed--
@@ -31,169 +37,207 @@ assert(new __helpers.CSSHelp(document).getStyle('div > h2')?.padding === '0px 4p
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-  background: transparent;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
-.name {
-  width: 100%;
-  text-align: left;
-}
-
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
-
-.row[tabindex]:focus {
-  background-color: #198eee;
-  color: white;
+span {
+  font-weight: normal;
 }
 
 --fcc-editable-region--
-div > h2 {
-  background-color: #99c9ff;
+table {
+  border-collapse: collapse;
+  border: 0;
+
 }
 --fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-050.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-050.md
index 9fe9ac7bc5..f1bb0e3352 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-050.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-050.md
@@ -1,5 +1,5 @@
 ---
-id: 619412990eaf9c80415b280d
+id: 620186f4b6b8356d2def576b
 title: Step 50
 challengeType: 0
 dashedName: step-50
@@ -7,22 +7,32 @@ dashedName: step-50
 
 # --description--
 
-The `elem1 ~ elem2` selector will target `elem2` elements where they are preceded by an `elem1` element. This means that any `elem2` element which has a sibling `elem1` somewhere *before* it within the same parent will be targeted.
-
-Create a `div ~ h2` selector to target all of your `h2` elements except the first (as it does not have a `div` element as a sibling). Give this new selector a `font-weight` property set to `normal` to make your section text a bit less obtrusive.
+Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
 
 # --hints--
 
-You should have a new `div ~ h2` selector.
+You should have a `table caption` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('div ~ h2'));
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
 ```
 
-Your `div ~ h2` selector should have a `font-weight` property set to `normal`.
+Your `table caption` selector should have a `color` property set to `#356eaf`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('div ~ h2')?.fontWeight === 'normal');
+assert(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');
+```
+
+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');
 ```
 
 # --seed--
@@ -33,170 +43,208 @@ assert(new __helpers.CSSHelp(document).getStyle('div ~ h2')?.fontWeight === 'nor
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-  background: transparent;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
-.name {
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
   width: 100%;
-  text-align: left;
-}
-
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
-
-.row[tabindex]:focus {
-  background-color: #198eee;
-  color: white;
-}
-
-div > h2 {
-  background-color: #99c9ff;
-  font-size: 1.3em;
-  padding: 0 4px;
+  position: relative;
+  margin-top: 3rem;
 }
 
 --fcc-editable-region--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-051.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-051.md
index d0de607c45..964391d3e3 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-051.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-051.md
@@ -1,5 +1,5 @@
 ---
-id: 6194135942d5e08174b8bab1
+id: 62018ba1aa263770c953be66
 title: Step 51
 challengeType: 0
 dashedName: step-51
@@ -7,20 +7,26 @@ dashedName: step-51
 
 # --description--
 
-Finally, the `elem1 + elem2` selector will target each `elem2` element that comes immediately after an `elem1` element. The notes in the balance sheet stand out too much. Create a `p + span` selector to target them, and set the `font-size` property to `0.8em`.
+Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
 
 # --hints--
 
-You should have a new `p + span` selector.
+Your `table caption` selector should have the `position` property set to `absolute`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('p + span'));
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
 ```
 
-Your `p + span` selector should have a `font-size` property set to `0.8em`.
+Your `table caption` selector should have the `top` property set to `-2.25rem`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontSize === '0.8em');
+assert(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');
 ```
 
 # --seed--
@@ -31,177 +37,216 @@ assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontSize === '0.8em
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-  background: transparent;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
-.name {
-  width: 100%;
-  text-align: left;
-}
-
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
-
-.row[tabindex]:focus {
-  background-color: #198eee;
-  color: white;
-}
-
-div > h2 {
-  background-color: #99c9ff;
-  font-size: 1.3em;
-  padding: 0 4px;
-}
-
-div ~ h2 {
+span {
   font-weight: normal;
 }
 
---fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
 
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
 --fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-052.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-052.md
index 64a5b8b85e..f5f593dd64 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-052.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-052.md
@@ -1,5 +1,5 @@
 ---
-id: 619413f5c1218b82b7b56a60
+id: 62018c3e94434a71af1d5eaa
 title: Step 52
 challengeType: 0
 dashedName: step-52
@@ -7,22 +7,32 @@ dashedName: step-52
 
 # --description--
 
-For the final bit of styling, give the `p + span` selector a `font-style` set to `italic`, and a `color` set to `#3b3b4f`.
-
-With that, you have successfully completed your balance sheet.
+Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container (because we are using flexbox).
 
 # --hints--
 
-Your `p + span` selector should have a `font-style` property set to `italic`.
+You should have a `tbody td` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('p + span')?.fontStyle === 'italic');
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
 ```
 
-Your `p + span` selector should have a `color` property set to `#3b3b4f`.
+Your `tbody td` selector should have a `width` property set to `100vw`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('p + span')?.color === 'rgb(59, 59, 79)');
+assert(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');
+```
+
+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');
 ```
 
 # --seed--
@@ -33,357 +43,220 @@ assert(new __helpers.CSSHelp(document).getStyle('p + span')?.color === 'rgb(59,
 <!DOCTYPE html>
 <html>
   <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>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
   </head>
   <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
 ```
 
 ```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
 body {
-  text-align: center;
-  font-family: Tahoma;
+  font-family: sans-serif;
   color: #0a0a23;
 }
 
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
   border: 2px solid #d0d0d5;
 }
 
-#header h2 {
-  font-size: 1.3em;
-  background: transparent;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
+#years {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
 }
 
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
   text-align: right;
 }
 
-span[class="current"] {
-  font-style: italic;
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
 }
 
-.name {
-  width: 100%;
-  text-align: left;
-}
-
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
-
-div > h2 {
-  background-color: #99c9ff;
-  font-size: 1.3em;
-  padding: 0 4px;
-}
-
-div ~ h2 {
+span {
   font-weight: normal;
 }
 
---fcc-editable-region--
-p + span {
-  font-size: 0.8em;
-}
---fcc-editable-region--
-```
-
-## --solutions--
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AcmeWidgetCorp Balance Sheet</title>
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
-  </head>
-  <body>
-    <div id="sheet">
-      <div id="header">
-        <h1>Balance Sheet</h1>
-        <h2>AcmeWidgetCorp</h2>
-        <p class="row">
-          <span>2019</span>
-          <span>2020</span>
-          <span class="current">2021</span>
-        </p>
-      </div>
-      <h2>Assets</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Cash</span>
-          <span>$25</span>
-          <span>$30</span>
-          <span class="current">$28</span>
-        </p>
-        <span class="notes">This is the cash we currently have on hand.</span>
-        <p class="row">
-          <span class="name">Checking</span>
-          <span>$54</span>
-          <span>$56</span>
-          <span class="current">$53</span>
-        </p>
-        <span class="notes">Our primary transactional account.</span>
-        <p class="row">
-          <span class="name">Savings</span>
-          <span>$500</span>
-          <span>$650</span>
-          <span class="current">$728</span>
-        </p>
-        <span class="notes">Funds set aside for emergencies.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$579</span>
-          <span>$736</span>
-          <span class="current">$809</span>
-        </p>
-      </div>
-      <h2>Liabilities</h2>
-      <div class="section">
-        <p class="row">
-          <span class="name">Loans</span>
-          <span>$500</span>
-          <span>$250</span>
-          <span class="current">$0</span>
-        </p>
-        <span class="notes">The outstanding balance on our startup loan.</span>
-        <p class="row">
-          <span class="name">Expenses</span>
-          <span>$200</span>
-          <span>$300</span>
-          <span class="current">$400</span>
-        </p>
-        <span class="notes">Annual anticipated expenses, such as payroll.</span>
-        <p class="row">
-          <span class="name">Credit</span>
-          <span>$50</span>
-          <span>$50</span>
-          <span class="current">$75</span>
-        </p>
-        <span class="notes">The running balance on our line of credit.</span>
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>$750</span>
-          <span>$600</span>
-          <span class="current">$475</span>
-        </p>
-      </div>
-      <h2>Net Worth</h2>
-      <div class="section">
-        <p class="row total" tabindex="1">
-          <span class="name">Total</span>
-          <span>-$171</span>
-          <span>$136</span>
-          <span class="current">$334</span>
-        </p>
-      </div>
-    </div>
-    <footer>Last Updated: December 2021</footer>
-  </body>
-</html>
-```
-
-```css
-body {
-  text-align: center;
-  font-family: Tahoma;
-  color: #0a0a23;
-}
-
-#sheet {
-  text-align: left;
-  max-width: 500px;
-  margin: auto;
-  padding: 10px;
-  border: 2px solid #d0d0d5;
-}
-
-#header h2 {
-  font-size: 1.3em;
-  background: transparent;
-}
-
-.row:nth-of-type(odd) {
-  background-color: #dfdfe2;
-}
-
-.row:nth-of-type(even) {
-  background-color: #d0d0d5;
-}
-
-.row:last-child {
-  background-color: transparent;
-  margin-bottom: 30px;
-}
-
-p[class~="total"] {
-  border-bottom: 4px double #0a0a23;
-  font-weight: bold;
-}
-
-.row {
-  display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid #0a0a23;
-  padding: 4px;
-}
-
-span:not(.name) {
-  margin-left: 10px;
-  min-width: 15%;
-  text-align: right;
-}
-
-span[class="current"] {
-  font-style: italic;
-}
-
-.name {
+table {
+  border-collapse: collapse;
+  border: 0;
   width: 100%;
-  text-align: left;
+  position: relative;
+  margin-top: 3rem;
 }
 
-.row[tabindex]:hover {
-  background-color: #99c9ff;
-}
-
-.row[tabindex]:focus {
-  background-color: #198eee;
-  color: white;
-}
-
-div > h2 {
-  background-color: #99c9ff;
+table caption {
+  color: #356eaf;
   font-size: 1.3em;
-  padding: 0 4px;
-}
-
-div ~ h2 {
   font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
 }
 
-p + span {
-  font-size: 0.8em;
-  font-style: italic;
-  color: #3b3b4f;
-}
+--fcc-editable-region--
+
+--fcc-editable-region--
 ```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-053.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-053.md
new file mode 100644
index 0000000000..75dd85e574
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-053.md
@@ -0,0 +1,256 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
+
+# --hints--
+
+You should have a `tbody th` selector.
+
+```js
+assert(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)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-054.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-054.md
new file mode 100644
index 0000000000..bc6beb7595
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-054.md
@@ -0,0 +1,266 @@
+---
+id: 62019093fe30e278e797d2f6
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
+
+# --hints--
+
+You should have a `tr[class="total"]` selector.
+
+```js
+assert(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)');
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-055.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-055.md
new file mode 100644
index 0000000000..c4cf7f09f1
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-055.md
@@ -0,0 +1,271 @@
+---
+id: 620191707bc65579ddd3ce15
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+You should have a `tr[class="total"] th` selector.
+
+```js
+assert(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');
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-056.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-056.md
new file mode 100644
index 0000000000..5087553866
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-056.md
@@ -0,0 +1,278 @@
+---
+id: 620192a767533a7ad19d96d7
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --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.
+
+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`.
+
+# --hints--
+
+You should have a `tr.total td` selector.
+
+```js
+assert(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');
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-057.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-057.md
new file mode 100644
index 0000000000..45da25e4ea
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-057.md
@@ -0,0 +1,275 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
+
+# --hints--
+
+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)'));
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-058.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-058.md
new file mode 100644
index 0000000000..ac12e7ecfb
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-058.md
@@ -0,0 +1,279 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
+
+# --hints--
+
+You should have a `tr.total:hover` selector.
+
+```js
+assert(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)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-059.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-059.md
new file mode 100644
index 0000000000..ee866d344b
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-059.md
@@ -0,0 +1,285 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Select your `td` elements with the `class` value of `current`, and make the font italic.
+
+# --hints--
+
+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"]'));
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-060.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-060.md
new file mode 100644
index 0000000000..6b66a53743
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-060.md
@@ -0,0 +1,289 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+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"]'));
+```
+
+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)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-061.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-061.md
new file mode 100644
index 0000000000..48d1f8253f
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-061.md
@@ -0,0 +1,303 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.data th` selector.
+
+```js
+assert(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');
+```
+
+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');
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-062.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-062.md
new file mode 100644
index 0000000000..78197565a2
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-062.md
@@ -0,0 +1,321 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
+
+# --hints--
+
+You should have a `tr.data th .description` selector.
+
+```js
+assert(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');
+```
+
+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');
+```
+
+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');
+```
+
+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');
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-063.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-063.md
new file mode 100644
index 0000000000..dfb1ff984e
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-063.md
@@ -0,0 +1,297 @@
+---
+id: 6201a4adcc6414968b391592
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
+
+# --hints--
+
+You should not have a `span` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-064.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-064.md
new file mode 100644
index 0000000000..c47ef56ccf
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-064.md
@@ -0,0 +1,313 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
+
+# --hints--
+
+You should have a `tr.data td` selector.
+
+```js
+assert(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');
+```
+
+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');
+```
+
+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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-065.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-065.md
new file mode 100644
index 0000000000..80fa55a663
--- /dev/null
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-065.md
@@ -0,0 +1,591 @@
+---
+id: 6201a59be346d399c21d10b1
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
+
+With this, your balance sheet is complete!
+
+# --hints--
+
+You should have a `tr.data td:last-of-type` selector.
+
+```js
+assert(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');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AcmeWidgetCorp Balance Sheet</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+