diff --git a/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json
index 2950df77db6d6e..ec6643b1983887 100644
--- a/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json
+++ b/curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json
@@ -17,365 +17,5 @@
[
"5f3313e74582ad9d063e3a38",
"Step 2"
- ],
- [
- "5f331e55dfab7a896e53c3a1",
- "Step 3"
- ],
- [
- "5f3326b143638ee1a09ff1e3",
- "Step 4"
- ],
- [
- "5f33294a6af5e9188dbdb8f3",
- "Step 5"
- ],
- [
- "5f332a88dc25a0fd25c7687a",
- "Step 6"
- ],
- [
- "5f332b23c2045fb843337579",
- "Step 7"
- ],
- [
- "5f33310c1851c6c4da013250",
- "Step 8"
- ],
- [
- "5f344fc1520b6719f2e35605",
- "Step 9"
- ],
- [
- "5f344fbc22624a2976425065",
- "Step 10"
- ],
- [
- "5f344fad8bf01691e71a30eb",
- "Step 11"
- ],
- [
- "5f344f9c805cd193c33d829c",
- "Step 12"
- ],
- [
- "5f3477ae9675db8bb7655b30",
- "Step 13"
- ],
- [
- "5f3477ae34c1239cafe128be",
- "Step 14"
- ],
- [
- "5f3477aefa51bfc29327200b",
- "Step 15"
- ],
- [
- "5f3477ae8466a9a3d2cc953c",
- "Step 16"
- ],
- [
- "5f3477cb2e27333b1ab2b955",
- "Step 17"
- ],
- [
- "5f3477cbcb6ba47918c1da92",
- "Step 18"
- ],
- [
- "5f3477cb303c5cb61b43aa9b",
- "Step 19"
- ],
- [
- "5f34a1fd611d003edeafd681",
- "Step 20"
- ],
- [
- "5f356ed6cf6eab5f15f5cfe6",
- "Step 21"
- ],
- [
- "5f356ed63c7807a4f1e6d054",
- "Step 22"
- ],
- [
- "5f356ed60a5decd94ab66986",
- "Step 23"
- ],
- [
- "5f356ed63e0fa262326eef05",
- "Step 24"
- ],
- [
- "5f356ed60785e1f3e9850b6e",
- "Step 25"
- ],
- [
- "5f356ed656a336993abd9f7c",
- "Step 26"
- ],
- [
- "5f356ed6199b0cdef1d2be8f",
- "Step 27"
- ],
- [
- "5f356ed69db0a491745e2bb6",
- "Step 28"
- ],
- [
- "5f35e5c44359872a137bd98f",
- "Step 29"
- ],
- [
- "5f35e5c4321f818cdc4bed30",
- "Step 30"
- ],
- [
- "5f3c866daec9a49519871816",
- "Step 31"
- ],
- [
- "5f3c866d5414453fc2d7b480",
- "Step 32"
- ],
- [
- "5f3c866d28d7ad0de6470505",
- "Step 33"
- ],
- [
- "5f769541be494f25449b292f",
- "Step 34"
- ],
- [
- "5f76967fad478126d6552b0d",
- "Step 35"
- ],
- [
- "5f769702e6e33127d14aa120",
- "Step 36"
- ],
- [
- "5f3c866de7a5b784048f94b1",
- "Step 37"
- ],
- [
- "5f3c866dbf362f99b9a0c6d0",
- "Step 38"
- ],
- [
- "5f3c866d0fc037f7311b4ac8",
- "Step 39"
- ],
- [
- "5f3c866dd0d0275f01d4d847",
- "Step 40"
- ],
- [
- "5f3cade9fa77275d9f4efe62",
- "Step 41"
- ],
- [
- "5f3cade94c6576e7f7b7953f",
- "Step 42"
- ],
- [
- "5f3cade9993019e26313fa8e",
- "Step 43"
- ],
- [
- "5f7691dafd882520797cd2f0",
- "Step 44"
- ],
- [
- "5f7692f7c5b3ce22a57788b6",
- "Step 45"
- ],
- [
- "5f47633757ae3469f2d33d2e",
- "Step 46"
- ],
- [
- "5f3cade99dda4e6071a85dfd",
- "Step 47"
- ],
- [
- "5f3ef6e0e0c3feaebcf647ad",
- "Step 48"
- ],
- [
- "5f3ef6e0819d4f23ca7285e6",
- "Step 49"
- ],
- [
- "5f716ad029ee4053c7027a7a",
- "Step 50"
- ],
- [
- "5f7b87422a560036fd03ccff",
- "Step 51"
- ],
- [
- "5f7b88d37b1f98386f04edc0",
- "Step 52"
- ],
- [
- "5f716bee5838c354c728a7c5",
- "Step 53"
- ],
- [
- "5f3ef6e0eaa7da26e3d34d78",
- "Step 54"
- ],
- [
- "5f3ef6e050279c7a4a7101d3",
- "Step 55"
- ],
- [
- "5f3ef6e04559b939080db057",
- "Step 56"
- ],
- [
- "5f3ef6e03d719d5ac4738993",
- "Step 57"
- ],
- [
- "5f3ef6e05473f91f948724ab",
- "Step 58"
- ],
- [
- "5f3ef6e056bdde6ae6892ba2",
- "Step 59"
- ],
- [
- "5f3ef6e0e9629bad967cd71e",
- "Step 60"
- ],
- [
- "5f3ef6e06d34faac0447fc44",
- "Step 61"
- ],
- [
- "5f3ef6e087d56ed3ffdc36be",
- "Step 62"
- ],
- [
- "5f3ef6e0f8c230bdd2349716",
- "Step 63"
- ],
- [
- "5f3ef6e07276f782bb46b93d",
- "Step 64"
- ],
- [
- "5f3ef6e0a81099d9a697b550",
- "Step 65"
- ],
- [
- "5f3ef6e0b431cc215bb16f55",
- "Step 66"
- ],
- [
- "5f3ef6e01f288a026d709587",
- "Step 67"
- ],
- [
- "5f3f26fa39591db45e5cd7a0",
- "Step 68"
- ],
- [
- "5f459225127805351a6ad057",
- "Step 69"
- ],
- [
- "5f459a7ceb8b5c446656d88b",
- "Step 70"
- ],
- [
- "5f459cf202c2a3472fae6a9f",
- "Step 71"
- ],
- [
- "5f459fd48bdc98491ca6d1a3",
- "Step 72"
- ],
- [
- "5f45a05977e2fa49d9119437",
- "Step 73"
- ],
- [
- "5f45a276c093334f0f6e9df4",
- "Step 74"
- ],
- [
- "5f45a5a7c49a8251f0bdb527",
- "Step 75"
- ],
- [
- "5f46fc57528aa1c4b5ea7c2e",
- "Step 76"
- ],
- [
- "5f4701b942c824109626c3d8",
- "Step 77"
- ],
- [
- "5f46ede1ff8fec5ba656b44c",
- "Step 78"
- ],
- [
- "5f45a66d4a2b0453301e5a26",
- "Step 79"
- ],
- [
- "5f45b0731d39e15d54df4dfc",
- "Step 80"
- ],
- [
- "5f45b25e7ec2405f166b9de1",
- "Step 81"
- ],
- [
- "5f45b3c93c027860d9298dbd",
- "Step 82"
- ],
- [
- "5f45b45d099f3e621fbbb256",
- "Step 83"
- ],
- [
- "5f45b4c81cea7763550e40df",
- "Step 84"
- ],
- [
- "5f45b715301bbf667badc04a",
- "Step 85"
- ],
- [
- "5f46e270702a8456a664f0df",
- "Step 86"
- ],
- [
- "5f46e36e745ead58487aabf2",
- "Step 87"
- ],
- [
- "5f46e7a4750dd05b5a673920",
- "Step 88"
- ],
- [
- "5f46e8284aae155c83015dee",
- "Step 89"
- ],
- [
- "5f475bb508746c16c9431d42",
- "Step 90"
- ],
- [
- "5f475e1c7f71a61d913836c6",
- "Step 91"
- ],
- [
- "5f47fe7e31980053a8d4403b",
- "Step 92"
]
]}
diff --git a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json
index 73932dfe0b19d6..d1313627499ee5 100644
--- a/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json
+++ b/curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json
@@ -17,265 +17,5 @@
[
"5dc1798ff86c76b9248c6eb3",
"Step 2"
- ],
- [
- "5dc17d3bf86c76b9248c6eb4",
- "Step 3"
- ],
- [
- "5dc17dc8f86c76b9248c6eb5",
- "Step 4"
- ],
- [
- "5dc2385ff86c76b9248c6eb7",
- "Step 5"
- ],
- [
- "5dc23991f86c76b9248c6eb8",
- "Step 6"
- ],
- [
- "5dc23f9bf86c76b9248c6eba",
- "Step 7"
- ],
- [
- "5dc24073f86c76b9248c6ebb",
- "Step 8"
- ],
- [
- "5dc24165f86c76b9248c6ebc",
- "Step 9"
- ],
- [
- "5dc24614f86c76b9248c6ebd",
- "Step 10"
- ],
- [
- "5ddbd81294d8ddc1510a8e56",
- "Step 11"
- ],
- [
- "5dfa22d1b521be39a3de7be0",
- "Step 12"
- ],
- [
- "5dfa2407b521be39a3de7be1",
- "Step 13"
- ],
- [
- "5dfa30b9eacea3f48c6300ad",
- "Step 14"
- ],
- [
- "5f07be6ef7412fbad0c5626b",
- "Step 15"
- ],
- [
- "5f07c98cdb9413cbd4b16750",
- "Step 16"
- ],
- [
- "5dfa3589eacea3f48c6300ae",
- "Step 17"
- ],
- [
- "5dfa371beacea3f48c6300af",
- "Step 18"
- ],
- [
- "5dfa37b9eacea3f48c6300b0",
- "Step 19"
- ],
- [
- "5dfb5ecbeacea3f48c6300b1",
- "Step 20"
- ],
- [
- "5dfb6250eacea3f48c6300b2",
- "Step 21"
- ],
- [
- "5dfb655eeacea3f48c6300b3",
- "Step 22"
- ],
- [
- "5dfb6a35eacea3f48c6300b4",
- "Step 23"
- ],
- [
- "5ef9b03c81a63668521804d0",
- "Step 24"
- ],
- [
- "5ef9b03c81a63668521804d1",
- "Step 25"
- ],
- [
- "5ef9b03c81a63668521804d2",
- "Step 26"
- ],
- [
- "5ef9b03c81a63668521804d3",
- "Step 27"
- ],
- [
- "5efada803cbd2bbdab94e332",
- "Step 28"
- ],
- [
- "5efae0543cbd2bbdab94e333",
- "Step 29"
- ],
- [
- "5efae16e3cbd2bbdab94e334",
- "Step 30"
- ],
- [
- "5ef9b03c81a63668521804d4",
- "Step 31"
- ],
- [
- "5f07fb1579dc934717801375",
- "Step 32"
- ],
- [
- "5ef9b03c81a63668521804d5",
- "Step 33"
- ],
- [
- "5ef9b03c81a63668521804d6",
- "Step 34"
- ],
- [
- "5ef9b03c81a63668521804d7",
- "Step 35"
- ],
- [
- "5ef9b03c81a63668521804d8",
- "Step 36"
- ],
- [
- "5efb23e70dc218d6c85f89b1",
- "Step 37"
- ],
- [
- "7cf9b03d81a65668421804c3",
- "Step 38"
- ],
- [
- "5ef9b03c81a63668521804d9",
- "Step 39"
- ],
- [
- "5ef9b03c81a63668521804db",
- "Step 40"
- ],
- [
- "5ef9b03c81a63668521804da",
- "Step 41"
- ],
- [
- "5efb2c990dc218d6c85f89b2",
- "Step 42"
- ],
- [
- "5ef9b03c81a63668521804dc",
- "Step 43"
- ],
- [
- "5ef9b03c81a63668521804dd",
- "Step 44"
- ],
- [
- "5ef9b03c81a63668521804df",
- "Step 45"
- ],
- [
- "5f05a1d8e233dff4a68508d8",
- "Step 46"
- ],
- [
- "5ef9b03c81a63668521804de",
- "Step 47"
- ],
- [
- "5f1a80975fc4bcae0edb3497",
- "Step 48"
- ],
- [
- "5ef9b03c81a63668521804e1",
- "Step 49"
- ],
- [
- "5f0d48e7b435f13ab6550051",
- "Step 50"
- ],
- [
- "5f0d4ab1b435f13ab6550052",
- "Step 51"
- ],
- [
- "5f0d4d04b435f13ab6550053",
- "Step 52"
- ],
- [
- "5ef9b03c81a63668521804e2",
- "Step 53"
- ],
- [
- "5efc54138d6a74d05e68af76",
- "Step 54"
- ],
- [
- "5efc4f528d6a74d05e68af74",
- "Step 55"
- ],
- [
- "5efc518e8d6a74d05e68af75",
- "Step 56"
- ],
- [
- "5ef9b03c81a63668521804e3",
- "Step 57"
- ],
- [
- "5efc575c8d6a74d05e68af77",
- "Step 58"
- ],
- [
- "5f1a89f1190aff21ae42105a",
- "Step 59"
- ],
- [
- "5ef9b03c81a63668521804e5",
- "Step 60"
- ],
- [
- "5ef9b03c81a63668521804e7",
- "Step 61"
- ],
- [
- "5ef9b03c81a63668521804e8",
- "Step 62"
- ],
- [
- "5ef9b03c81a63668521804e9",
- "Step 63"
- ],
- [
- "5ef9b03c81a63668521804ea",
- "Step 64"
- ],
- [
- "5ef9b03c81a63668521804eb",
- "Step 65"
- ],
- [
- "5ef9b03c81a63668521804ec",
- "Step 66"
- ],
- [
- "5ef9b03c81a63668521804ee",
- "Step 67"
]
]}
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
deleted file mode 100644
index 381b65bbc3e28c..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
+++ /dev/null
@@ -1,436 +0,0 @@
----
-id: 587d78af367417b2b2512b04
-title: Build a Product Landing Page
-challengeType: 14
-forumTopicId: 301144
-dashedName: build-a-product-landing-page
----
-
-# --description--
-
-**Objective:** Build an app that is functionally similar to https://product-landing-page.freecodecamp.rocks
-
-**User Stories:**
-
-1. Your product landing page should have a `header` element with a corresponding `id="header"`
-1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here)
-1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"`
-1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link`
-1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page
-1. You can watch an embedded product video with `id="video"`
-1. Your landing page has a `form` element with a corresponding `id="form"`
-1. Within the form, there is an `input` field with `id="email"` where you can enter an email address
-1. The `#email` input field should have placeholder text to let users know what the field is for
-1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address
-1. Within the form, there is a submit `input` with a corresponding `id="submit"`
-1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`)
-1. The navbar should always be at the top of the viewport
-1. Your product landing page should have at least one media query
-1. Your product landing page should utilize CSS flexbox at least once
-
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
-
-**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS
-
-# --hints--
-
-You should have a `header` element with an `id` of `header`.
-
-```js
-const el = document.getElementById('header')
-assert(!!el && el.tagName === 'HEADER')
-```
-
-You should have an `img` element with an `id` of `header-img`.
-
-```js
-const el = document.getElementById('header-img')
-assert(!!el && el.tagName === 'IMG')
-```
-
-Your `#header-img` should be a descendant of the `#header`.
-
-```js
-const els = document.querySelectorAll('#header #header-img')
-assert(els.length > 0)
-```
-
-Your `#header-img` should have a `src` attribute.
-
-```js
-const el = document.getElementById('header-img')
-assert(!!el && !!el.src)
-```
-
-Your `#header-img`’s `src` value should be a valid URL (starts with `http`).
-
-```js
-const el = document.getElementById('header-img')
-assert(!!el && /^http/.test(el.src))
-```
-
-You should have a `nav` element with an `id` of `nav-bar`.
-
-```js
-const el = document.getElementById('nav-bar')
-assert(!!el && el.tagName === 'NAV')
-```
-
-Your `#nav-bar` should be a descendant of the `#header`.
-
-```js
-const els = document.querySelectorAll('#header #nav-bar')
-assert(els.length > 0)
-```
-
-You should have at least 3 `.nav-link` elements within the `#nav-bar`.
-
-```js
-const els = document.querySelectorAll('#nav-bar .nav-link')
-assert(els.length >= 3)
-```
-
-Each `.nav-link` element should have an `href` attribute.
-
-```js
-const els = document.querySelectorAll('.nav-link')
-els.forEach(el => {
- if (!el.href) assert(false)
-})
-assert(els.length > 0)
-```
-
-Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`).
-
-```js
-const els = document.querySelectorAll('.nav-link')
-els.forEach(el => {
- const linkDestination = el.getAttribute('href').slice(1)
- if (!document.getElementById(linkDestination)) assert(false)
-})
-assert(els.length > 0)
-```
-
-You should have a `video` or `iframe` element with an `id` of `video`.
-
-```js
-const el = document.getElementById('video')
-assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME'))
-```
-
-Your `#video` should have a `src` attribute.
-
-```js
-let el = document.getElementById('video')
-const sourceNode = el.children;
-let sourceElement = null;
-if (sourceNode.length) {
- sourceElement = [...video.children].filter(el => el.localName === 'source')[0];
-}
-if (sourceElement) {
- el = sourceElement;
-}
-assert(el.hasAttribute('src'));
-```
-
-You should have a `form` element with an `id` of `form`.
-
-```js
-const el = document.getElementById('form')
-assert(!!el && el.tagName === 'FORM')
-```
-
-You should have an `input` element with an `id` of `email`.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && el.tagName === 'INPUT')
-```
-
-Your `#email` should be a descendant of the `#form`.
-
-```js
-const els = document.querySelectorAll('#form #email')
-assert(els.length > 0)
-```
-
-Your `#email` should have the `placeholder` attribute with placeholder text.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
-```
-
-Your `#email` should use HTML5 validation by setting its `type` to `email`.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && el.type === 'email')
-```
-
-You should have an `input` element with an `id` of `submit`.
-
-```js
-const el = document.getElementById('submit')
-assert(!!el && el.tagName === 'INPUT')
-```
-
-Your `#submit` should be a descendant of the `#form`.
-
-```js
-const els = document.querySelectorAll('#form #submit')
-assert(els.length > 0)
-```
-
-Your `#submit` should have a `type` of `submit`.
-
-```js
-const el = document.getElementById('submit')
-assert(!!el && el.type === 'submit')
-```
-
-Your `#form` should have an `action` attribute of `https://www.freecodecamp.com/email-submit`.
-
-```js
-const el = document.getElementById('form')
-assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit')
-```
-
-Your `#email` should have a `name` attribute of `email`.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && el.name === 'email')
-```
-
-Your `#nav-bar` should always be at the top of the viewport.
-
-```js
-const el = document.getElementById('nav-bar')
-const top1 = el?.offsetTop
-const top2 = el?.offsetTop
-assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
-```
-
-Your Product Landing Page should use at least one media query.
-
-```js
-const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
-const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
-```
-
-Your Product Landing Page should use CSS Flexbox at least once.
-
-```js
-const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
-const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
- return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
-})
-assert(usesFlex)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-```
-
-```css
-
-```
-
-## --solutions--
-
-```html
-
-
-
-
-
- Product Landing Page
-
-
-
-
-
-
-
- Pokemon Daycare Service
-
-
-
What we offer
-
-
-
-
-
Guaranteed friendly and loving staff!
-
-
-
-
-
-
- Comfortable environment for Pokemon to explore and play!
-
-
-
-
-
-
-
- Multiple membership plans to fit your lifestyle!
-
-
-
-
-
Check us out!
- A sneak peek into our facility:
-
-
-
-
-
Membership Plans
-
-
- Basic Membership
-
-
One Pokemon
-
Food and berries provided
-
- $9.99/month
-
-
- Silver Membership
-
-
Up to Three Pokemon
-
Food and berries provided
-
Grooming and accessories included
-
- $19.99/month
-
-
- Gold Membership
-
-
Up to six Pokemon!
-
Food and berries provided
-
Grooming and accessories included
-
Personal training for each Pokemon
-
Breeding and egg hatching
-
- $29.99/month
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: #3a3240;
- color: white;
-}
-main {
- max-width: 750px;
- margin: 50px auto;
-}
-input {
- background-color: #92869c;
-}
-a:not(.nav-link) {
- color: white;
-}
-#header-img {
- max-height: 25px;
-}
-#nav-bar {
- position: fixed;
- width: 100%;
- text-align: center;
- top: 0%;
- background-color: #92869c;
-}
-h1 {
- text-align: center;
-}
-body {
- text-align: center;
-}
-footer {
- text-align: center;
-}
-#bullet {
- max-height: 25px;
-}
-.flex-here {
- display: flex;
- justify-content: center;
-}
-.flex-left {
- height: 25px;
-}
-.flex-mem {
- display: flex;
- justify-content: center;
-}
-.flex-mem-box {
- background-color: #92869c;
- border-color: black;
- border-width: 5px;
- border-style: solid;
- margin: 10px;
- padding: 10px;
- color: black;
-}
-@media (max-width: 350px) {
- #video {
- width: 300;
- height: 200;
- }
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
deleted file mode 100644
index b079753f111634..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ /dev/null
@@ -1,518 +0,0 @@
----
-id: 587d78af367417b2b2512b03
-title: Build a Survey Form
-challengeType: 14
-forumTopicId: 301145
-dashedName: build-a-survey-form
----
-
-# --description--
-
-**Objective:** Build an app that is functionally similar to https://survey-form.freecodecamp.rocks
-
-**User Stories:**
-
-1. You should have a page title in an `h1` element with an `id` of `title`
-1. You should have a short explanation in a `p` element with an `id` of `description`
-1. You should have a `form` element with an `id` of `survey-form`
-1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text`
-1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email`
-1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error
-1. Inside the form, you can enter a number in an `input` field that has an `id` of `number`
-1. If you enter non-numbers in the number input, you will see an HTML5 validation error
-1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error
-1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`
-1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
-1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from
-1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute
-1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute
-1. Inside the form element, you are presented with a `textarea` for additional comments
-1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs
-
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
-
-**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS
-
-# --hints--
-
-You should have an `h1` element with an `id` of `title`.
-
-```js
-const el = document.getElementById('title')
-assert(!!el && el.tagName === 'H1')
-```
-
-Your `#title` should not be empty.
-
-```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
-```
-
-You should have a `p` element with an `id` of `description`.
-
-```js
-const el = document.getElementById('description')
-assert(!!el && el.tagName === 'P')
-```
-
-Your `#description` should not be empty.
-
-```js
-const el = document.getElementById('description')
-assert(!!el && el.innerText.length > 0)
-```
-
-You should have a `form` element with an `id` of `survey-form`.
-
-```js
-const el = document.getElementById('survey-form')
-assert(!!el && el.tagName === 'FORM')
-```
-
-You should have an `input` element with an `id` of `name`.
-
-```js
-const el = document.getElementById('name')
-assert(!!el && el.tagName === 'INPUT')
-```
-
-Your `#name` should have a `type` of `text`.
-
-```js
-const el = document.getElementById('name')
-assert(!!el && el.type === 'text')
-```
-
-Your `#name` should require input.
-
-```js
-const el = document.getElementById('name')
-assert(!!el && el.required)
-```
-
-Your `#name` should be a descedant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form #name')
-assert(!!el)
-```
-
-You should have an `input` element with an `id` of `email`.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && el.tagName === 'INPUT')
-```
-
-Your `#email` should have a `type` of `email`.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && el.type === 'email')
-```
-
-Your `#email` should require input.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && el.required)
-```
-
-Your `#email` should be a descedant of `#survey-form`
-
-```js
-const el = document.querySelector('#survey-form #email')
-assert(!!el)
-```
-
-You should have an `input` element with an `id` of `number`.
-
-```js
-const el = document.getElementById('number')
-assert(!!el && el.tagName === 'INPUT')
-```
-
-Your `#number` should be a descedant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form #number')
-assert(!!el)
-```
-
-Your `#number` should have a `type` of `number`.
-
-```js
-const el = document.getElementById('number')
-assert(!!el && el.type === 'number')
-```
-
-Your `#number` should have a `min` attribute with a numeric value.
-
-```js
-const el = document.getElementById('number')
-assert(!!el && el.min && isFinite(el.min))
-```
-
-Your `#number` should have a `max` attribute with a numeric value.
-
-```js
-const el = document.getElementById('number')
-assert(!!el && el.max && isFinite(el.max))
-```
-
-You should have a `label` element with an `id` of `name-label`.
-
-```js
-const el = document.getElementById('name-label')
-assert(!!el && el.tagName === 'LABEL')
-```
-
-You should have a `label` element with an `id` of `email-label`.
-
-```js
-const el = document.getElementById('email-label')
-assert(!!el && el.tagName === 'LABEL')
-```
-
-You should have a `label` element with an `id` of `number-label`.
-
-```js
-const el = document.getElementById('number-label')
-assert(!!el && el.tagName === 'LABEL')
-```
-
-Your `#name-label` should not be empty.
-
-```js
-const el = document.getElementById('name-label')
-assert(!!el && el.innerText.length > 0)
-```
-
-Your `#email-label` should not be empty.
-
-```js
-const el = document.getElementById('email-label')
-assert(!!el && el.innerText.length > 0)
-```
-
-Your `#number-label` should not be empty.
-
-```js
-const el = document.getElementById('number-label')
-assert(!!el && el.innerText.length > 0)
-```
-
-Your `#name-label` should be a descedant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form #name-label')
-assert(!!el)
-```
-
-Your `#email-label` should be a descedant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form #email-label')
-assert(!!el)
-```
-
-Your `#number-label` should be a descedant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form #number-label')
-assert(!!el)
-```
-
-Your `#name` should have a `placeholder` attribute and value.
-
-```js
-const el = document.getElementById('name')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
-```
-
-Your `#email` should have a `placeholder` attribute and value.
-
-```js
-const el = document.getElementById('email')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
-```
-
-Your `#number` should have a `placeholder` attribute and value.
-
-```js
-const el = document.getElementById('number')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
-```
-
-You should have a `select` field with an `id` of `dropdown`.
-
-```js
-const el = document.getElementById('dropdown')
-assert(!!el && el.tagName === 'SELECT')
-```
-
-Your `#dropdown` should have at least two selectable (not disabled) `option` elements.
-
-```js
-const els = document.querySelectorAll('#dropdown option:not([disabled])')
-assert(els.length >= 2)
-```
-
-Your `#dropdown` should be a descendant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form #dropdown')
-assert(!!el)
-```
-
-You should have at least two `input` elements with a `type` of `radio` (radio buttons).
-
-```js
-const els = document.querySelectorAll('input[type="radio"]')
-assert(els.length >= 2)
-```
-
-You should have at least two radio buttons that are descendants of `#survey-form`.
-
-```js
-const els = document.querySelectorAll('#survey-form input[type="radio"]')
-assert(els.length >= 2)
-```
-
-All your radio buttons should have a `value` attribute and value.
-
-```js
-const els1 = document.querySelectorAll('input[type="radio"]')
-const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
-assert(els1.length > 0 && els2.length === 0)
-```
-
-All your radio buttons should have a `name` attribute and value.
-
-```js
-const els1 = document.querySelectorAll('input[type="radio"]')
-const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
-assert(els1.length > 0 && els2.length === 0)
-```
-
-Every radio button group should have at least 2 radio buttons.
-
-```js
-const radioButtons = document.querySelectorAll('input[type="radio"]');
-const groups = {}
-
-if (radioButtons) {
- radioButtons.forEach(el => {
- if (!groups[el.name]) groups[el.name] = []
- groups[el.name].push(el)
- })
-}
-
-const groupKeys = Object.keys(groups)
-
-groupKeys.forEach(key => {
- if (groups[key].length < 2) assert(false)
-})
-
-assert(groupKeys.length > 0)
-```
-
-You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`.
-
-```js
-const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
-assert(els.length >= 2)
-```
-
-All your checkboxes inside `#survey-form` should have a `value` attribute and value.
-
-```js
-const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
-const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
-assert(els1.length > 0 && els2.length === 0)
-```
-
-You should have at least one `textarea` element that is a descendant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form textarea')
-assert(!!el)
-```
-
-You should have an `input` or `button` element with an `id` of `submit`.
-
-```js
-const el = document.getElementById('submit')
-assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
-```
-
-Your `#submit` should have a `type` of `submit`.
-
-```js
-const el = document.getElementById('submit')
-assert(!!el && el.type === 'submit')
-```
-
-Your `#submit` should be a descendant of `#survey-form`.
-
-```js
-const el = document.querySelector('#survey-form #submit')
-assert(!!el)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-```
-
-```css
-
-```
-
-## --solutions--
-
-```html
-
-
-
-
-
- Survey Form
-
-
-
Survey Form
-
The card below was built as a sample survey form for freeCodeCamp.
-
-
Join the Togepi Fan Club!
-
- Enter your information here to receive updates about club activities,
- our monthly newsletter, and other email communications.
-
-
-
-
-
-
-```
-
-```css
-main {
- text-align: center;
- background-color: #92869c;
- background-blend-mode: lighten;
- max-width: 500px;
- margin: 20px auto;
- border-radius: 50px;
- box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
- color: black;
-}
-body {
- text-align: center;
- background: #3a3240;
- color: white;
-}
-input, textarea, select, button {
- background: #3a3240;
- color: white;
-}
-a {
- color: white;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
deleted file mode 100644
index def1dfbf48bf84..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
+++ /dev/null
@@ -1,529 +0,0 @@
----
-id: 587d78b0367417b2b2512b05
-title: Build a Technical Documentation Page
-challengeType: 14
-forumTopicId: 301146
-dashedName: build-a-technical-documentation-page
----
-
-# --description--
-
-**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks
-
-**User Stories:**
-
-1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation)
-1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five
-1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
-1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
-1. The `.main-section` elements should contain at least ten `p` elements total (not each)
-1. The `.main-section` elements should contain at least five `code` elements total (not each)
-1. The `.main-section` elements should contain at least five `li` items total (not each)
-1. You can see a `nav` element with a corresponding `id="navbar"`
-1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation
-1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
-1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
-1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
-1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
-1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
-1. Your technical documentation should use at least one media query
-
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
-
-**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS
-
-# --hints--
-
-You should have a `main` element with an `id` of `main-doc`.
-
-```js
-const el = document.getElementById('main-doc')
-assert(!!el)
-```
-
-You should have at least five `section` elements with a class of `main-section`.
-
-```js
-const els = document.querySelectorAll('#main-doc section')
-assert(els.length >= 5)
-```
-
-All of your `.main-section` elements should be `section` elements.
-
-```js
-const els = document.querySelectorAll('.main-section')
-els.forEach(el => {
- if (el.tagName !== 'SECTION') assert(false)
-})
-assert(els.length > 0)
-```
-
-You should have at least five `.main-section` elements that are descendants of `#main-doc`.
-
-```js
-const els = document.querySelectorAll('#main-doc .main-section')
-assert(els.length >= 5)
-```
-
-The first child of each `.main-section` should be a `header` element.
-
-```js
-const els = document.querySelectorAll('.main-section')
-els.forEach(el => {
- if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
-})
-assert(els.length > 0)
-```
-
-None of your `header` elements should be empty.
-
-```js
-const els = document.querySelectorAll('header')
-els.forEach(el => {
- if (el.innerText?.length <= 0) assert(false)
-})
-assert(els.length > 0)
-```
-
-All of your `.main-section` elements should have an `id`.
-
-```js
-const els = document.querySelectorAll('.main-section')
-els.forEach(el => {
- if (!el.id || el.id === '') assert(false)
-})
-assert(els.length > 0)
-```
-
-Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's.
-
-```js
-const els = document.querySelectorAll('.main-section')
-els.forEach(el => {
- const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
- if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
-})
-assert(els.length > 0)
-```
-
-You should have at least 10 `p` elements (total) within your `.main-section` elements.
-
-```js
-const els = document.querySelectorAll('.main-section p')
-assert(els.length >= 10)
-```
-
-You should have at least five `code` elements that are descendants of `.main-section` elements.
-
-```js
-const els = document.querySelectorAll('.main-section code')
-assert(els.length >= 5)
-```
-
-You should have at least five `li` elements that are descendants of `.main-section` elements.
-
-```js
-const els = document.querySelectorAll('.main-section li')
-assert(els.length >= 5)
-```
-
-You should have a `nav` element with an `id` of `navbar`.
-
-```js
-const el = document.getElementById('navbar')
-assert(!!el && el.tagName === 'NAV')
-```
-
-Your `#navbar` should have exactly one `header` element within it.
-
-```js
-const els = document.querySelectorAll('#navbar header')
-assert(els.length === 1)
-```
-
-You should have at least one `a` element with a class of `nav-link`.
-
-```js
-const els = document.querySelectorAll('a.nav-link')
-assert(els.length >= 1)
-```
-
-All of your `.nav-link` elements should be anchor (`a`) elements.
-
-```js
-const els = document.querySelectorAll('.nav-link')
-els.forEach(el => {
- if (el.tagName !== 'A') assert(false)
-})
-assert(els.length > 0)
-```
-
-All of your `.nav-link` elements should be in the `#navbar`.
-
-```js
-const els1 = document.querySelectorAll('.nav-link')
-const els2 = document.querySelectorAll('#navbar .nav-link')
-assert(els2.length > 0 && els1.length === els2.length)
-```
-
-You should have the same number of `.nav-link` and `.main-section` elements.
-
-```js
-const els1 = document.querySelectorAll('.main-section')
-const els2 = document.querySelectorAll('.nav-link')
-assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
-```
-
-The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`.
-
-```js
-const navLinks = document.querySelectorAll('#navbar a.nav-link');
-const header = document.querySelector('#navbar header');
-navLinks.forEach((navLink) => {
- if (
- (
- header.compareDocumentPosition(navLink) &
- Node.DOCUMENT_POSITION_PRECEDING
- )
- ) assert(false)
-});
-assert(!!header)
-```
-
-Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world").
-
-```js
-const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
- el.firstElementChild?.innerText?.trim().toUpperCase()
-)
-const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
- el.innerText?.trim().toUpperCase()
-)
-const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
-assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
-```
-
-Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id).
-
-```js
-const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
-const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
-const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
-assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
-```
-
-Your `#navbar` should always be on the left edge of the window.
-
-```js
-const el = document.getElementById('navbar')
-const left1 = el?.offsetLeft
-const left2 = el?.offsetLeft
-assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
-```
-
-Your Technical Documentation project should use at least one media query.
-
-```js
-const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
-const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-```
-
-```css
-
-```
-
-## --solutions--
-
-```html
-
-
-
-
-
- Technical Documentation Page
-
-
-
-
-
- Introduction
-
- Welcome to a basic introduction of algebra. In this tutorial, we will
- review some of the more common algebraic concepts.
-
-
-
- Definitions
-
- To start with, let's define some of the more common terms used in
- algebra:
-
-
-
- Variable: A variable is an unknown value, usually represented
- by a letter.
-
-
- Expression: Essentially a mathematical object. For the
- purpose of this tutorial, an expression is one part of an equation.
-
-
- Equation: An equation is a mathematical argument in which two
- expressions result in the same value.
-
-
-
-
- Examples
-
- Sometimes it is easier to understand the definitions when you have a
- physical example to look at. Here is an example of the above terms.
- x + 5 = 12
- In this above example, we have:
-
-
-
Variable: The variable in the example is "x".
-
- Expression: There are two expressions in this example. They
- are "x+5" and "12".
-
-
- Equation: The entire example, "x+5=12", is an equation.
-
-
-
-
- Solving Equations
-
- The primary use for algebra is to determine an unknown value, the
- "variable", with the information provided. Continuing to use our
- example from above, we can find the value of the variable "x".
- x + 5 = 12
- In an equation, both sides result in the same value. So you can
- manipulate the two expressions however you need, as long as you
- perform the same operation (or change) to each side. You do this
- because the goal when solving an equation is to
- get the variable into its own expression, or by itself on one side
- of the = sign. For this example, we want to remove the "+5" so the "x" is
- alone. To do this, we can subtract 5, because subtraction is
- the opposite operation to addition. But remember, we have to perform
- the same operation to both sides of the equation. Now our equation
- looks like this.
- x + 5 - 5 = 12 - 5
- The equation looks like a mess right now, because we haven't completed
- the operations. We can simplify this equation to make it easier
- to read by performing the operations "5-5" and "12-5". The result
- is:
- x = 7
- We now have our solution to this equation!
-
-
-
- Solving Equations II
-
- Let us look at a slightly more challenging equation.
- 3x + 4 = 13
- Again we can start with subtraction. In this case, we want to subtract
- 4 from each side of the equation. We will also go ahead and simplify
- with each step. So now we have:
- 3x = 9
- "3x" translates to "3*x", where the "*" symbol indicates
- multiplication. We use the "*" to avoid confusion, as the "x" is now a
- variable instead of a multiplication symbol. The opposite operation
- for multiplication is division, so we need to
- divide each expression by 3.
- x = 3
- And now we have our solution!
-
-
-
- Solving Equations III
-
- Now we are getting in to more complex operations. Here is another
- equation for us to look at:
- x^2 - 8 = 8
- Our very first step will be to add 8 to each side. This is
- different from our previous examples, where we had to subtract. But
- remember, our goal is to get the variable alone by performing opposite
- operations.
- x^2 = 16
- But what does the "^2" mean? The "^" symbol is used to denote
- exponents in situations where superscript is not available. When
- superscript is available, you would see it as x2.
- For the sake of this project, however, we will use the "^" symbol.
- An exponent tells you how many times the base (in our case, "x") is
- multiplied by itself. So, "x^2" would be the same as "x*x". Now the
- opposite function of multiplication is division, but we would have to
- divide both sides by "x". We do not want to do this, as that
- would put an "x" on the other side of the equation. So instead, we
- need to use the root operation! For an exponent of "2", we call this
- the "square root" and denote it with "√". Our equation is now:
-
- x = √9
- Performing a root operation by hand can be a tedious process, so we
- recommend using a calculator when necessary. However, we are lucky in
- that "9" is a
- perfect square, so we do not need to calculate anything. Instead, we find our
- answer to be:
- x = 3
-
-
-
- System of Equations
-
- As you explore your algebra studies further, you may start to run
- across equations with more than one variable. The first such equations
- will likely look like:
- y = 3x
- An equation like this does not have one single solution.
- Rather, there are a series of values for which the equation is true.
- For example, if "x=3" and "y=9", the equation is true. These equations
- are usually used to plot a graph.
- Getting more complicated, though, you may be given a pair of
- equations. This is called a "system of equations", and CAN be solved.
- Let's look at how we do this! Consider the following system of
- equations:
- y = 3x | y - 6 = x
- A system of equations IS solvable, but it is a multi-step process. To
- get started, we need to chose a variable we are solving for. Let's
- solve for "x" first. From the second equation, we know that "x" equals
- "y - 6", but we cannot simplify that further because we do not have a
- value for "y". Except, thanks to the system of equations, we DO have a
- value for "y". We know that "y" equals "3x". So, looking at our second
- equation, we can replace "y" with "3x" because they have the same
- value. We then get:
- 3x - 6 = x
- Now we can solve for "x"! We start by adding 6 to each side.
- 3x = x + 6
- We still need to get "x" by itself, so we subtract "x" from both sides
- and get:
- 2x = 6
- If this confuses you, remember that "3x" is the same as "x+x+x".
- Subtract an "x" from that and you get "x+x", or "2x". Now we divide
- both sides by 2 and have our value for x!
- x = 3
- However, our work is not done yet. We still need to find the value for
- "y". Let's go back to our first equation:
- y = 3x
- We have a value for "x" now, so let's see what happens if we put that
- value in.
- y = 3*3
- We perform the multiplication and discover that "y=9"! Our solution to
- this system of equations then is:
- x = 3 and y = 9
-
-
-
- Try it Yourself!
-
Coming Soon!
-
Keep an eye out for new additions!
-
-
- More Information
-
Check out the following links for more information!
-
-
- Wolfram Alpha
- is a great source for multiple mathematic fields.
-
-
-
-
-
-
-```
-
-```css
-* {
- background-color: #3a3240;
-}
-a {
- color: #92869c;
-}
-a:hover {
- background-color: #92869c;
- color: #3a3240;
-}
-#navbar {
- border-style: solid;
- border-width: 5px;
- border-color: #92869c;
- height: 100%;
- top: -5px;
- left: -5px;
- padding: 5px;
- text-align: center;
- color: #92869c
-}
-@media (min-width: 480px) {
- #navbar {
- position: fixed;
- }
-}
-main {
- margin-left: 220px;
- color: #92869c
-}
-header {
- font-size: 20pt;
-}
-code {
- background-color: #92869c;
- border-style: dashed;
- border-width: 2px;
- border-color: #92869c;
- padding: 5px;
- color: black;
-}
-footer {
- text-align: center;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
deleted file mode 100644
index e6ba533c7d1d6f..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
+++ /dev/null
@@ -1,325 +0,0 @@
----
-id: bd7158d8c442eddfaeb5bd18
-title: Build a Tribute Page
-challengeType: 14
-forumTopicId: 301147
-dashedName: build-a-tribute-page
----
-
-# --description--
-
-**Objective:** Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks
-
-**User Stories:**
-
-1. Your tribute page should have an element with a corresponding `id="main"`, which contains all other elements
-1. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug")
-1. You should see either a `figure` or a `div` element with an `id` of `img-div`
-1. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"`
-1. Within the `#img-div` element, you should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `#img-div`
-1. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page
-1. You should see an a element with a corresponding `id="tribute-link"`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab
-1. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size
-1. Your `img` element should be centered within its parent element
-
-Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
-
-**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS
-
-# --hints--
-
-You should have a `main` element with an `id` of `main`.
-
-```js
-const el = document.getElementById('main')
-assert(!!el && el.tagName === 'MAIN')
-```
-
-Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main`.
-
-```js
-const el1 = document.querySelector('#main #img-div')
-const el2 = document.querySelector('#main #image')
-const el3 = document.querySelector('#main #img-caption')
-const el4 = document.querySelector('#main #tribute-info')
-const el5 = document.querySelector('#main #tribute-link')
-assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
-```
-
-You should have an element with an `id` of `title`.
-
-```js
-const el = document.getElementById('title')
-assert(!!el)
-```
-
-Your `#title` should not be empty.
-
-```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
-
-```
-
-You should have a `figure` or `div` element with an `id` of `img-div`.
-
-```js
-const el = document.getElementById('img-div')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
-```
-
-You should have an `img` element with an `id` of `image`.
-
-```js
-const el = document.getElementById('image')
-assert(!!el && el.tagName === 'IMG')
-```
-
-Your `#image` should be a descendant of `#img-div`.
-
-```js
-const el = document.querySelector('#img-div #image')
-assert(!!el)
-```
-
-You should have a `figcaption` or `div` element with an `id` of `img-caption`.
-
-```js
-const el = document.getElementById('img-caption')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
-```
-
-Your `#img-caption` should be a descendant of `#img-div`.
-
-```js
-const el = document.querySelector('#img-div #img-caption')
-assert(!!el)
-```
-
-Your `#img-caption` should not be empty.
-
-```js
-const el = document.getElementById('img-caption')
-assert(!!el && el.innerText.length > 0)
-```
-
-You should have an element with an `id` of `tribute-info`.
-
-```js
-const el = document.getElementById('tribute-info')
-assert(!!el)
-```
-
-Your `#tribute-info` should not be empty.
-
-```js
-const el = document.getElementById('tribute-info')
-assert(!!el && el.innerText.length > 0)
-```
-
-You should have an `a` element with an `id` of `tribute-link`.
-
-```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.tagName === 'A')
-```
-
-Your `#tribute-link` should have an `href` attribute and value.
-
-```js
-const el = document.getElementById('tribute-link')
-assert(!!el && !!el.href && el.href.length > 0)
-```
-
-Your `#tribute-link` should have a `target` attribute set to `_blank`.
-
-```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.target === '_blank')
-```
-
-Your `img` element should have a `display` of `block`.
-
-```js
-const img = document.getElementById('image');
-const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('display')
-assert(style === 'block')
-```
-
-Your `#image` should have a `max-width` of `100%`.
-
-```js
-const img = document.getElementById('image');
-const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('max-width')
-assert(style === '100%')
-```
-
-Your `#image` should have a `height` of `auto`.
-
-```js
-// taken from the testable-projects repo
-const img = document.getElementById('image');
-const imgStyle = window.getComputedStyle(img);
-const oldDisplayValue = imgStyle.getPropertyValue('display');
-const oldDisplayPriority = imgStyle.getPropertyPriority('display');
-img?.style.setProperty('display', 'none', 'important');
-const heightValue = imgStyle?.getPropertyValue('height')
-img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
-assert(heightValue === 'auto')
-```
-
-Your `#image` should be centered within its parent.
-
-```js
-// taken from the testable-projects repo
-const img = document.getElementById('image'),
- imgParent = img?.parentElement,
- imgLeft = img?.getBoundingClientRect().left,
- imgRight = img?.getBoundingClientRect().right,
- parentLeft = imgParent?.getBoundingClientRect().left,
- parentRight = imgParent?.getBoundingClientRect().right,
- leftMargin = imgLeft - parentLeft,
- rightMargin = parentRight - imgRight;
-assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-```
-
-```css
-
-```
-
-## --solutions--
-
-```html
-
-
-
-
-
-
-
- Tribute Page
-
-
-
Tribute Page
-
The below card was designed as a tribute page for freeCodeCamp.
-
-
-
- Togepi, happy as always.
-
-
Togepi
-
-
-
- Togepi was first discovered in the Johto region, when Ash Ketchum
- discovered a mysterious egg. However, when the egg hatched, Togepi saw
- Ash's friend Misty first and imprinted on her. Like many other
- creatures, this imprinting process created a bond and Togepi views
- Misty as his mother.
-
-
- Togepi is a very childlike Pokemon, and is very emotionally
- expressive. He demonstrates extreme levels of joy and sadness.
-
-
-
-
-
-```
-
-```css
-body {
- background-color: #3a3240;
- color: white;
-}
-main {
- background-color: #92869c;
- font-family: Lobster;
- max-width: 500px;
- margin: 20px auto;
- color: black;
- border-radius: 50px;
- box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
-}
-h2 {
- text-align: center;
- font-size: 20pt;
- font-family: Pacifico;
-}
-body {
- text-align: center;
- font-size: 12pt;
-}
-footer {
- text-align: center;
- font-size: 10pt;
-}
-.border {
- border-color: black;
- border-width: 5px;
- border-style: solid;
-}
-#image {
- height: auto;
- display: block;
- margin: auto;
- max-width: 100%;
- border-radius: 50%;
-}
-#img-caption {
- font-size: 10pt;
-}
-a:not(#tribute-link) {
- color: white;
-}
-hr {
- border-color: black;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
deleted file mode 100644
index f4cc9650102c14..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-id: 613297a923965e0703b64796
-title: Step 2
-challengeType: 0
-dashedName: step-2
----
-
-# --description--
-
-You may be familiar with the `meta` element already; it is used to specify information about the page, such as the title, description, keywords, and author.
-
-Give your page a `meta` element with an appropriate `charset` value.
-
-The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers.
-
-# --hints--
-
-You should create a `meta` element within the `head` element.
-
-```js
-assert.exists(document.querySelector('head > meta'));
-```
-
-You should give the `meta` tag a `charset` of `UTF-8`.
-
-```js
-assert.equal(document.querySelector('head > meta')?.getAttribute('charset'), 'UTF-8');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
-
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
deleted file mode 100644
index 07519ab2fc413a..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-id: 61329b210dac0b08047fd6ab
-title: Step 3
-challengeType: 0
-dashedName: step-3
----
-
-# --description--
-
-Continuing with the `meta` elements, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimization).
-
-Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page.
-
-# --hints--
-
-You should create another `meta` element in the `head`.
-
-```js
-assert.equal(document.querySelectorAll('head > meta')?.length, 2);
-```
-
-You should give the `meta` a `name` attribute of `viewport`.
-
-```js
-assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1);
-```
-
-You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.
-
-```js
-assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
-
-
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
deleted file mode 100644
index 4daa0898cb0498..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: 61329d52e5010e08d9b9d66b
-title: Step 4
-challengeType: 0
-dashedName: step-4
----
-
-# --description--
-
-Another important `meta` element for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page.
-
-Add a `meta` element with the `name` attribute set to `description`, and give it a useful `content` attribute.
-
-# --hints--
-
-You should add a new `meta` element to the `head`.
-
-```js
-assert.equal(document.querySelectorAll('meta').length, 3);
-```
-
-You should give the `meta` a `name` attribute of `description`.
-
-```js
-assert.exists(document.querySelector('meta[name="description"]'));
-```
-
-You should give the `meta` a `content` attribute.
-
-```js
-assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
-```
-
-The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._
-
-```js
-assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
-
-
-
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
deleted file mode 100644
index eeff5f8dc54da7..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-id: 6133acc353338c0bba9cb553
-title: Step 5
-challengeType: 0
-dashedName: step-5
----
-
-# --description--
-
-Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_.
-
-Give your page a `title` that is descriptive and concise.
-
-# --hints--
-
-You should add a `title` element to the `head`.
-
-```js
-assert.exists(document.querySelector('head > title'));
-```
-
-You should not make the `title` longer than 60 characters.
-
-```js
-assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60);
-```
-
-Try being more descriptive with your `title` element. _Hint: At least 15 characters_
-
-```js
-assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
-
-
-
-
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
deleted file mode 100644
index 8a3e150218f14e..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: 6133d11ef548f51f876149e3
-title: Step 6
-challengeType: 0
-dashedName: step-6
----
-
-# --description--
-
-Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements.
-
-Add a `header` and a `main` element to your page.
-
-The `header` element will be used to introduce the page, as well as provide a navigation menu.
-
-The `main` element will contain the core content of your page.
-
-# --hints--
-
-You should add a `header` element to the `body`.
-
-```js
-assert.exists(document.querySelector('body > header'));
-```
-
-You should add a `main` element to the `body`.
-
-```js
-assert.exists(document.querySelector('body > main'));
-```
-
-The `header` element should come before the `main` element.
-
-```js
-assert.exists(document.querySelector('header + main'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
---fcc-editable-region--
-
-
-
---fcc-editable-region--
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
deleted file mode 100644
index 3b746df024fb53..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-id: 613e2546d0594208229ada50
-title: Step 7
-challengeType: 0
-dashedName: step-7
----
-
-# --description--
-
-Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element.
-
-The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`.
-
-The `h1` should contain the text `HTML/CSS Quiz`.
-
-# --hints--
-
-You should add an `img` element to the `header` element.
-
-```js
-assert.exists(document.querySelector('header > img'));
-```
-
-You should add an `h1` element to the `header` element.
-
-```js
-assert.exists(document.querySelector('header > h1'));
-```
-
-You should add a `nav` element to the `header` element.
-
-```js
-assert.exists(document.querySelector('header > nav'));
-```
-
-You should place the `img`, `h1`, and `nav` elements in that order.
-
-```js
-assert.exists(document.querySelector('img + h1 + nav'));
-```
-
-You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
-
-```js
-assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
-```
-
-You should give the `img` element an `id` attribute of `logo`.
-
-```js
-assert.equal(document.querySelector('img')?.id, 'logo');
-```
-
-You should give the `h1` element the text `HTML/CSS Quiz`.
-
-```js
-assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
---fcc-editable-region--
-
-
-
---fcc-editable-region--
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
deleted file mode 100644
index 8ed0221db82abf..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-id: 613e275749ebd008e74bb62e
-title: Step 8
-challengeType: 0
-dashedName: step-8
----
-
-# --description--
-
-A useful property of an _SVG_ (scalable vector graphics) is that it contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image.
-
-Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`.
-
-# --hints--
-
-You should use the `#logo` selector to target the `img` element.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
-```
-
-You should give the `img` a `width` of `max(100px, 18vw)`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
deleted file mode 100644
index e686ed21df1bd8..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-id: 6140827cff96e906bd38fc2b
-title: Step 9
-challengeType: 0
-dashedName: step-9
----
-
-# --description--
-
-As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text.
-
-First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around.
-
-# --hints--
-
-You should give `#logo` a `background-color` of `#0a0a23`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
-```
-
-You should use the `aspect-ratio` property.
-
-```js
-assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
-```
-
-You should not use the `height` property.
-
-```js
-assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
-```
-
-You should not change the `width` property.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
-```
-
-You should give the `img` an `aspect-ratio` of `35 / 4`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
-```
-
-You should give the `img` a `padding` of `0.4rem`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
---fcc-editable-region--
-#logo {
- width: max(100px, 18vw);
-
-}
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
deleted file mode 100644
index 20e02d934128fb..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-id: 6140883f74224508174794c0
-title: Step 10
-challengeType: 0
-dashedName: step-10
----
-
-# --description--
-
-Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_.
-
-# --hints--
-
-You should use the `header` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
-```
-
-You should give the `header` a `width` of `100%`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
-```
-
-You should give the `header` a `height` of `50px`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
-```
-
-You should give the `header` a `background-color` of `#1b1b32`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
-```
-
-You should give the `header` a `display` of `flex`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
deleted file mode 100644
index e86102a346de30..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-id: 61408e4ae3e35d08feb260eb
-title: Step 11
-challengeType: 0
-dashedName: step-11
----
-
-# --description--
-
-Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`.
-
-# --hints--
-
-You should use the `h1` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
-```
-
-You should give the `h1` a `color` of `#f1be32`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
-```
-
-You should give the `h1` a `font-size` of `min(5vw, 1.2em)`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
deleted file mode 100644
index bcb0886e660ebc..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: 61408f155e798909b6908712
-title: Step 12
-challengeType: 0
-dashedName: step-12
----
-
-# --description--
-
-To enable navigation on the page, add an unordered list with the following three list items:
-
-- `INFO`
-- `HTML`
-- `CSS`
-
-The list items text should be wrapped in anchor tags.
-
-# --hints--
-
-You should nest one `ul` element inside the `nav`.
-
-```js
-assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
-```
-
-You should nest three `li` elements inside the `ul` element.
-
-```js
-assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
-```
-
-You should nest one `a` element inside each `li` element.
-
-```js
-assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
-```
-
-You should give the first `a` element the text `INFO`.
-
-```js
-assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
-```
-
-You should give the second `a` element the text `HTML`.
-
-```js
-assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
-```
-
-You should give the third `a` element the text `CSS`.
-
-```js
-assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
---fcc-editable-region--
-
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
deleted file mode 100644
index 6eea8da86db118..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-id: 614090d5a22b6f0a5a6b464c
-title: Step 13
-challengeType: 0
-dashedName: step-13
----
-
-
-
-# --description--
-
-Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children.
-
-# --hints--
-
-You should use the `nav > ul` selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
-```
-
-You should give the `nav > ul` elements a `display` of `flex`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
-```
-
-You should give the `nav > ul` elements a `justify-content` of `space-evenly`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
deleted file mode 100644
index 826b553df92bae..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-id: 6141fabd6f75610664e908fd
-title: Step 14
-challengeType: 0
-dashedName: step-14
----
-
-# --description--
-
-As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements.
-
-Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method.
-
-# --hints--
-
-You should nest a `form` element within your `main` element.
-
-```js
-assert.exists(document.querySelector('main > form'));
-```
-
-You should nest three `section` elements within your `form` element.
-
-```js
-assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
-```
-
-You should give the `form` element an `action` attribute.
-
-```js
-assert.notEmpty(document.querySelector('main > form')?.action);
-```
-
-You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`.
-
-```js
-assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
-```
-
-You should give the `form` element a `method` attribute.
-
-```js
-assert.notEmpty(document.querySelector('main > form')?.method);
-```
-
-You should give the `form` element a `method` attribute with a value of `post`.
-
-```js
-assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
---fcc-editable-region--
-
-
-
---fcc-editable-region--
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
deleted file mode 100644
index 78a09ebf68a2f2..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-id: 6141fed65b61320743da5894
-title: Step 15
-challengeType: 0
-dashedName: step-15
----
-
-# --description--
-
-To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values.
-
-Give each of the `section` elements the `region` role.
-
-# --hints--
-
-You should give the first `section` element the `region` role.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
-```
-
-You should give the second `section` element the `region` role.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
-```
-
-You should give the third `section` element the `region` role.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
deleted file mode 100644
index 2987ac353a5ded..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
+++ /dev/null
@@ -1,171 +0,0 @@
----
-id: 614202874ca576084fca625f
-title: Step 16
-challengeType: 0
-dashedName: step-16
----
-
-# --description--
-
-Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute.
-
-To the `section` elements, give the following `aria-labelledby` attributes:
-
-- `student-info`
-- `html-questions`
-- `css-questions`
-
-Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content.
-
-# --hints--
-
-You should give the first `section` element an `aria-labelledby` attribute of `student-info`.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
-```
-
-You should give the second `section` element an `aria-labelledby` attribute of `html-questions`.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
-```
-
-You should give the third `section` element an `aria-labelledby` attribute of `css-questions`.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
-```
-
-You should nest one `h2` element within the first `section` element.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
-```
-
-You should nest one `h2` element within the second `section` element.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
-```
-
-You should nest one `h2` element within the third `section` element.
-
-```js
-assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
-```
-
-You should give the first `h2` element an `id` attribute of `student-info`.
-
-```js
-assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
-```
-
-You should give the second `h2` element an `id` attribute of `html-questions`.
-
-```js
-assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
-```
-
-You should give the third `h2` element an `id` attribute of `css-questions`.
-
-```js
-assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
-```
-
-You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_
-
-```js
-assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
-```
-
-You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_
-
-```js
-assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
-```
-
-You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_
-
-```js
-assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
deleted file mode 100644
index 7e05eb381033c8..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
+++ /dev/null
@@ -1,140 +0,0 @@
----
-id: 614206033d366c090ca7dd42
-title: Step 17
-challengeType: 0
-dashedName: step-17
----
-
-# --description--
-
-Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens.
-
-Change the font for both the `h1` and `h2` elements to `Verdana`, and use another web-safe font in the sans-serif family as a fallback.
-
-Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements to make the sections distinct.
-
-# --hints--
-
-You should use a multiple element selector to target the `h1` and `h2` elements.
-
-```js
-const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
-assert.exists(gs('h1, h2') || gs('h2, h1'));
-```
-
-You should set the first value of the `font-family` property to `Verdana`.
-
-```js
-const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
-const style = gs('h1, h2') || gs('h2, h1');
-assert.include(style?.fontFamily, 'Verdana');
-```
-
-You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_.
-
-```js
-// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
-const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
-const style = gs('h1, h2') || gs('h2, h1');
-assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
-```
-
-You should use an `h2` element selector to target the `h2` elements.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
-```
-
-You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
deleted file mode 100644
index 64d85203b55806..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-id: 61435e3c0679a306c20f1acc
-title: Step 18
-challengeType: 0
-dashedName: step-18
----
-
-# --description--
-
-To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements.
-
-# --hints--
-
-You should give the first `a` element an `href` of `#student-info`.
-
-```js
-assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info');
-```
-
-You should give the second `a` element an `href` of `#html-questions`.
-
-```js
-assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions');
-```
-
-You should give the third `a` element an `href` of `#css-questions`.
-
-```js
-assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
deleted file mode 100644
index f5b439aaeb63e6..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-id: 6143610161323a081b249c19
-title: Step 19
-challengeType: 0
-dashedName: step-19
----
-
-# --description--
-
-Filling out the content of the quiz, below `#student-info`, add three `div` elements with a `class` of `info`.
-
-Then, within each `div` nest one `label` element, and one `input` element.
-
-# --hints--
-
-You should nest three `div` elements below the `h2#student-info` element.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3);
-```
-
-You should give the first `div` a `class` of `info`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info');
-```
-
-You should give the second `div` a `class` of `info`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info');
-```
-
-You should give the third `div` a `class` of `info`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info');
-```
-
-You should nest one `label` element within the first `div`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1);
-```
-
-You should nest one `input` element within the first `div`, after the `label`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1);
-assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input'));
-```
-
-You should nest one `label` element within the second `div`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1);
-```
-
-You should nest one `input` element within the second `div`, after the `label`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1);
-assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input'));
-```
-
-You should nest one `label` element within the third `div`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1);
-```
-
-You should nest one `input` element within the third `div`, after the `label`.
-
-```js
-assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1);
-assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
deleted file mode 100644
index 7f97400894af86..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-id: 6143639d5eddc7094161648c
-title: Step 20
-challengeType: 0
-dashedName: step-20
----
-
-# --description--
-
-It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input.
-
-This is done by giving the `label` a `for` attribute, which contains the `id` of the `input`.
-
-This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements.
-
-# --hints--
-
-You should give the first `label` element an appropriate `for` attribute.
-
-```js
-assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
-```
-
-You should give the second `label` element an appropriate `for` attribute.
-
-```js
-assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
-```
-
-You should give the third `label` element an appropriate `for` attribute.
-
-```js
-assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
-```
-
-You should give the first `label` element an appropriate text content.
-
-```js
-assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
-```
-
-You should give the second `label` element an appropriate text content.
-
-```js
-assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
-```
-
-You should give the third `label` element an appropriate text content.
-
-```js
-assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
-```
-
-You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`.
-
-```js
-assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
-```
-
-You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`.
-
-```js
-assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
-```
-
-You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`.
-
-```js
-assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
-```
-
-You should not use the same `id` attribute for more than one `input` element.
-
-```js
-const id = (n) => document.querySelectorAll('input')?.[n]?.id;
-assert.notEqual(id(0), id(1));
-assert.notEqual(id(0), id(2));
-assert.notEqual(id(1), id(2));
-```
-
-You should not use the same `for` attribute for more than one `label` element.
-
-```js
-const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
-assert.notEqual(htmlFor(0), htmlFor(1));
-assert.notEqual(htmlFor(0), htmlFor(2));
-assert.notEqual(htmlFor(1), htmlFor(2));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
deleted file mode 100644
index d5fc4ab0520719..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
+++ /dev/null
@@ -1,161 +0,0 @@
----
-id: 6143908b6aafb00a659ca189
-title: Step 21
-challengeType: 0
-dashedName: step-21
----
-
-# --description--
-
-Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute.
-
-# --hints--
-
-You should give the first `input` a `type` of `text`.
-
-```js
-assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
-```
-
-You should give the second `input` a `type` of `email`.
-
-```js
-assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
-```
-
-You should give the third `input` a `type` of `date`.
-
-```js
-assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
-```
-
-You should give the first `input` an appropriate `name` attribute.
-
-```js
-assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
-```
-
-You should give the second `input` an appropriate `name` attribute.
-
-```js
-assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
-```
-
-You should give the third `input` an appropriate `name` attribute.
-
-```js
-assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
-```
-
-You should give the first `input` a `placeholder` attribute.
-
-```js
-assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
deleted file mode 100644
index 2058c74e267c38..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-id: 6143920c8eafb00b735746ce
-title: Step 22
-challengeType: 0
-dashedName: step-22
----
-
-# --description--
-
-Even though you added a `placeholder` to the first `input` element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input.
-
-Remove the placeholder text from the first `input` element, relying on the `label` being the best-practice.
-
-# --hints--
-
-You should remove the `placeholder` attribute from the first `input` element.
-
-```js
-assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
deleted file mode 100644
index fa6f9fb65d0ed1..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-id: 6143931a113bb80c45546287
-title: Step 23
-challengeType: 0
-dashedName: step-23
----
-
-# --description--
-
-Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read.
-
-Append a `span` element with a class of `sr-only` to the current text content of the third `label` element.
-
-# --hints--
-
-You should add a `span` element within the third `label` element.
-
-```js
-assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
-```
-
-You should give the `span` element a class of `sr-only`.
-
-```js
-assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
-```
-
-You should place the `span` after the text content `D.O.B.`.
-
-```js
-assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\.
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
deleted file mode 100644
index 7afb8f8491afba..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
+++ /dev/null
@@ -1,197 +0,0 @@
----
-id: 6143956ed76ed60e012faa51
-title: Step 25
-challengeType: 0
-dashedName: step-25
----
-
-# --description--
-
-The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read.
-
-This pattern is to set the following CSS properties:
-
-```css
-position: absolute;
-width: 1px;
-height: 1px;
-padding: 0;
-margin: -1px;
-overflow: hidden;
-clip: rect(0, 0, 0, 0);
-white-space: nowrap;
-border: 0;
-```
-
-Use the above to define the `sr-only` class.
-
-# --hints--
-
-You should use the `.sr-only` selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
-```
-
-You should give the `.sr-only` a `position` of `absolute`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
-```
-
-You should give the `.sr-only` a `width` of `1px`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
-```
-
-You should give the `.sr-only` a `height` of `1px`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
-```
-
-You should give the `.sr-only` a `padding` of `0`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
-```
-
-You should give the `.sr-only` a `margin` of `-1px`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
-```
-
-You should give the `.sr-only` an `overflow` of `hidden`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
-```
-
-You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
-```
-
-You should give the `.sr-only` a `white-space` of `nowrap`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
-```
-
-You should give the `.sr-only` a `border` of `0`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
deleted file mode 100644
index 39af52dfa782fd..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-id: 614396f7ae83f20ea6f9f4b3
-title: Step 26
-challengeType: 0
-dashedName: step-26
----
-
-# --description--
-
-Within the second `section` element, add two `div` elements with a class of `question-block`.
-
-Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
-
-# --hints--
-
-You should nest two `div` elements within the second `section` element.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
-```
-
-You should give the first new `div` element a class of `question-block`.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
-```
-
-You should give the second new `div` element a class of `question-block`.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
-```
-
-You should nest one `p` element within each `div.question-block` element.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
-```
-
-You should give the first `p` element text of `1`.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
-```
-
-You should give the second `p` element text of `2`.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
-```
-
-You should nest one `fieldset` element within each `div.question-block` element.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
-```
-
-You should place the first `fieldset` element after the first `p` element.
-
-```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
-```
-
-You should place the second `fieldset` element after the second `p` element.
-
-```js
-assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
-```
-
-You should give the first `fieldset` element a class of `question`.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
-```
-
-You should give the second `fieldset` element a class of `question`.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
deleted file mode 100644
index 7fb76d94962e4d..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+++ /dev/null
@@ -1,177 +0,0 @@
----
-id: 6143cb26f7edff2dc28f7da5
-title: Step 27
-challengeType: 0
-dashedName: step-27
----
-
-# --description--
-
-Each `fieldset` will contain a true/false question.
-
-Within each `fieldset`, nest one `legend` element, and one `ul` element with two options.
-
-# --hints--
-
-You should nest one `legend` element within the first `fieldset` element.
-
-```js
-assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1);
-```
-
-You should nest one `ul` element within the first `fieldset` element.
-
-```js
-assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1);
-```
-
-You should nest two `li` elements within the first `ul` element.
-
-```js
-assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2);
-```
-
-You should nest one `legend` element within the second `fieldset` element.
-
-```js
-assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1);
-```
-
-You should nest one `ul` element within the second `fieldset` element.
-
-```js
-assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1);
-```
-
-You should nest two `li` elements within the second `ul` element.
-
-```js
-assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
deleted file mode 100644
index 5566a60c1e453e..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-id: 6144e818fd5ea704fe56081d
-title: Step 28
-challengeType: 0
-dashedName: step-28
----
-
-# --description--
-
-Give each `fieldset` an adequate `name` attribute. Then, give both unordered lists a `class` of `answers-list`.
-
-Finally, use the `legend` to caption the content of the `fieldset` by placing a true/false question as the text content.
-
-# --hints--
-
-You should give the first `fieldset` an adequate `name` attribute. _Hint: I would use `html-question-one`_
-
-```js
-assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
-```
-
-You should give the second `fieldset` an adequate `name` attribute. _Hint: I would use `html-question-two`_
-
-```js
-assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name);
-```
-
-You should give the first `ul` element a `class` of `answers-list`.
-
-```js
-assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list');
-```
-
-You should give the second `ul` element a `class` of `answers-list`.
-
-```js
-assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list');
-```
-
-You should give the first `legend` element text content.
-
-```js
-assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent);
-```
-
-You should give the second `legend` element text content.
-
-```js
-assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent);
-```
-
-You should not use the same text content for both `legend` elements.
-
-```js
-assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
deleted file mode 100644
index 7cd450063c4c55..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+++ /dev/null
@@ -1,231 +0,0 @@
----
-id: 6144f8dc6849e405dd8bb829
-title: Step 29
-challengeType: 0
-dashedName: step-29
----
-
-# --description--
-
-To provide the functionality of the true/false questions, we need a set of inputs which do not allow both to be selected at the same time.
-
-Within each list element, nest one `label` element, and within each `label` element, nest one `input` element with the appropriate `type`.
-
-# --hints--
-
-You should nest one `label` element within the first `li` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label'));
-```
-
-You should nest one `label` element within the second `li` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label'));
-```
-
-You should nest one `label` element within the third `li` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label'));
-```
-
-You should nest one `label` element within the fourth `li` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label'));
-```
-
-You should nest one `input` element within the first `label` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input'));
-```
-
-You should nest one `input` element within the second `label` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input'));
-```
-
-You should nest one `input` element within the third `label` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input'));
-```
-
-You should nest one `input` element within the fourth `label` element.
-
-```js
-assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input'));
-```
-
-You should give the first `input` a `type` of `radio`.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio');
-```
-
-You should give the second `input` a `type` of `radio`.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio');
-```
-
-You should give the third `input` a `type` of `radio`.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio');
-```
-
-You should give the fourth `input` a `type` of `radio`.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
deleted file mode 100644
index 3fbdcb854e3943..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+++ /dev/null
@@ -1,207 +0,0 @@
----
-id: 6145e6eeaa66c605eb087fe9
-title: Step 30
-challengeType: 0
-dashedName: step-30
----
-
-# --description--
-
-Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element.
-
-Link the `label` elements with their corresponding `input` elements.
-
-# --hints--
-
-You should give the first `label` a `for` attribute matching the `id` of its `input` element.
-
-```js
-const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor;
-assert.notEmpty(htmlFor);
-assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id);
-```
-
-You should give the second `label` a `for` attribute matching the `id` of its `input` element.
-
-```js
-const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor;
-assert.notEmpty(htmlFor);
-assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id);
-```
-
-You should give the third `label` a `for` attribute matching the `id` of its `input` element.
-
-```js
-const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor;
-assert.notEmpty(htmlFor);
-assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id);
-```
-
-You should give the fourth `label` a `for` attribute matching the `id` of its `input` element.
-
-```js
-const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
-assert.notEmpty(htmlFor);
-assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
deleted file mode 100644
index a5d554a893fba3..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ /dev/null
@@ -1,287 +0,0 @@
----
-id: 6145e8b5080a5f06bb0223d0
-title: Step 31
-challengeType: 0
-dashedName: step-31
----
-
-# --description--
-
-Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text.
-
-The text should either be `True` or `False`.
-
-# --hints--
-
-You should give the first `label` element text content.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
-```
-
-You should give the second `label` element text content.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
-```
-
-You should give the third `label` element text content.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
-```
-
-You should give the fourth `label` element text content.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
-```
-
-You should place the first `label` text content after the `input` element.
-
-```js
-assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
-```
-
-You should place the second `label` text content after the `input` element.
-
-```js
-assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
-```
-
-You should place the third `label` text content after the `input` element.
-
-```js
-assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
-```
-
-You should place the fourth `label` text content after the `input` element.
-
-```js
-assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
-```
-
-You should give the first `label` the text `True` or `False`.
-
-```js
-assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
-```
-
-You should give the second `label` the text `True`.
-
-```js
-const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
-assert(l(0) === 'False' ? l(1) === 'True' : true);
-```
-
-You should give the second `label` the text `False`.
-
-```js
-const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
-assert(l(0) === 'True' ? l(1) === 'False' : true);
-```
-
-You should give the third `label` the text `True` or `False`.
-
-```js
-assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
-```
-
-You should give the fourth `label` the text `True`.
-
-```js
-const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
-assert(l(2) === 'False' ? l(3) === 'True' : true);
-```
-
-You should give the fourth `label` the text `False`.
-
-```js
-const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
-assert(l(2) === 'True' ? l(3) === 'False' : true);
-```
-
-You should give the first `input` a `value` matching the `label` text content.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
-```
-
-You should give the second `input` a `value` matching the `label` text content.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase());
-```
-
-You should give the third `input` a `value` matching the `label` text content.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase());
-```
-
-You should give the fourth `input` a `value` matching the `label` text content.
-
-```js
-assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase());
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
deleted file mode 100644
index 59c29e00db97f2..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+++ /dev/null
@@ -1,224 +0,0 @@
----
-id: 6145eb5f08a38a0786c7a80c
-title: Step 32
-challengeType: 0
-dashedName: step-32
----
-
-# --description--
-
-If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time.
-
-Group the relevant inputs together such that only one input from a pair can be selected at a time.
-
-# --hints--
-
-You should give the first `input` a `name` attribute.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name);
-```
-
-You should give the second `input` a `name` attribute.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name);
-```
-
-You should give the third `input` a `name` attribute.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name);
-```
-
-You should give the fourth `input` a `name` attribute.
-
-```js
-assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name);
-```
-
-You should give the second `input` a `name` attribute matching the `name` attribute of the first `input`.
-
-```js
-const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
-assert.equal(i(1), i(0));
-```
-
-You should give the fourth `input` a `name` attribute matching the `name` attribute of the third `input`.
-
-```js
-const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
-assert.equal(i(3), i(2));
-```
-
-You should give different `name` attributes to the first `input` and the third `input`.
-
-```js
-const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
-assert.notEqual(i(0), i(2));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
deleted file mode 100644
index f60d6fccdd4fb6..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+++ /dev/null
@@ -1,232 +0,0 @@
----
-id: 6145ee65e2e1530938cb594d
-title: Step 34
-challengeType: 0
-dashedName: step-34
----
-
-# --description--
-
-The final section of this quiz will contain a dropdown, and a text box.
-
-Begin by nesting a `div` with a `class` of `formrow`, and nest four `div` elements inside of it, alternating their `class` attributes with `question-block` and `answer`.
-
-# --hints--
-
-You should add one `div` element within the final `section`.
-
-```js
-assert.exists(document.querySelector('section:nth-of-type(3) > div'));
-```
-
-You should give the first `div` a `class` of `formrow`.
-
-```js
-assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow');
-```
-
-You should place `div.formrow` after the `h2` element.
-
-```js
-assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow'));
-```
-
-You should nest four `div` elements inside `div.formrow`.
-
-```js
-assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4);
-```
-
-You should give the first nested `div` a `class` of `question-block`.
-
-```js
-assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block');
-```
-
-You should give the second nested `div` a `class` of `answer`.
-
-```js
-assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer');
-```
-
-You should give the third nested `div` a `class` of `question-block`.
-
-```js
-assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block');
-```
-
-You should give the fourth nested `div` a `class` of `answer`.
-
-```js
-assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-p::before {
- content: "Question #";
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
deleted file mode 100644
index fb91ee4674db61..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+++ /dev/null
@@ -1,215 +0,0 @@
----
-id: 6145f02240ff8f09f7ec913c
-title: Step 35
-challengeType: 0
-dashedName: step-35
----
-
-# --description--
-
-Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content
-
-# --hints--
-
-You should nest one `label` element within the first `div.question-block` element.
-
-```js
-assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label'));
-```
-
-You should nest one `label` element within the second `div.question-block` element.
-
-```js
-assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label'));
-```
-
-You should give the first `label` element text content.
-
-```js
-assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
-```
-
-You should give the second `label` element text content.
-
-```js
-assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-p::before {
- content: "Question #";
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
deleted file mode 100644
index 287ef625aad881..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+++ /dev/null
@@ -1,250 +0,0 @@
----
-id: 6145f14f019a4b0adb94b051
-title: Step 36
-challengeType: 0
-dashedName: step-36
----
-
-# --description--
-
-Within the first `div.answer` element, nest one required `select` element with three `option` elements.
-
-Give the first `option` element a `value` of `""`, and the text `Select an option`. Give the second `option` element a `value` of `yes`, and the text `Yes`. Give the third `option` element a `value` of `no`, and the text `No`.
-
-# --hints--
-
-You should nest one `select` element within the first `div.answer` element.
-
-```js
-assert.exists(document.querySelector('div.answer > select'));
-```
-
-You should nest three `option` elements within the `select` element.
-
-```js
-assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
-```
-
-You should give the first `option` element a `value` of `""`.
-
-```js
-assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
-```
-
-You should give the first `option` element a text content of `Select an option`.
-
-```js
-assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
-```
-
-You should give the second `option` element a `value` of `yes`.
-
-```js
-assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
-```
-
-You should give the second `option` element a text content of `Yes`.
-
-```js
-assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
-```
-
-You should give the third `option` element a `value` of `no`.
-
-```js
-assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
-```
-
-You should give the third `option` element a text content of `No`.
-
-```js
-assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
-```
-
-You should give the `select` an attribute of `required`.
-
-```js
-assert.isTrue(document.querySelector('div.answer > select')?.required);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-p::before {
- content: "Question #";
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
deleted file mode 100644
index 032715a9ce7939..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+++ /dev/null
@@ -1,222 +0,0 @@
----
-id: 6145f3a5cd9be60b9459cdd6
-title: Step 37
-challengeType: 0
-dashedName: step-37
----
-
-# --description--
-
-Link the first `label` element to the `select` element, and give the `select` element a `name` attribute.
-
-# --hints--
-
-You should give the `label` element a `for` attribute.
-
-```js
-assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor);
-```
-
-You should give the `select` element an `id` attribute.
-
-```js
-assert.notEmpty(document.querySelector('.answer > select')?.id);
-```
-
-You should give the `select` element an `id` matching the `for` attribute of the `label` element.
-
-```js
-assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor);
-```
-
-You should give the `select` element a `name` attribute.
-
-```js
-assert.notEmpty(document.querySelector('.answer > select')?.name);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-p::before {
- content: "Question #";
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
deleted file mode 100644
index 7589d13e75b529..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+++ /dev/null
@@ -1,229 +0,0 @@
----
-id: 6145f47393fbe70c4d885f9c
-title: Step 38
-challengeType: 0
-dashedName: step-38
----
-
-# --description--
-
-Nest one `textarea` element within the second `div.answer` element, and set the number of rows and columns it has.
-
-Then, give the `textarea` placeholder text describing an example answer.
-
-# --hints--
-
-You should nest one `textarea` element within the second `div.answer` element.
-
-```js
-assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea'));
-```
-
-You should give the `textarea` a `rows` attribute with a number.
-
-```js
-const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows');
-assert.notEmpty(rows);
-assert.isNotNaN(Number(rows));
-```
-
-You should give the `textarea` a `cols` attribute with a number.
-
-```js
-const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols');
-assert.notEmpty(cols);
-assert.isNotNaN(Number(cols));
-```
-
-You should give the `textarea` a `placeholder` attribute with text describing an example answer.
-
-```js
-assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('placeholder'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
HTML/CSS Quiz
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- background-color: #1b1b32;
- display: flex;
-}
-
-#logo {
- width: max(100px, 18vw);
- background-color: #0a0a23;
- aspect-ratio: 35 / 4;
- padding: 0.4rem;
-}
-
-h1 {
- color: #f1be32;
- font-size: min(5vw, 1.2em);
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- justify-content: space-evenly;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
-}
-
-p::before {
- content: "Question #";
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
deleted file mode 100644
index e03dfc5613165f..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-id: 6145f59029474c0d3dc1c8b8
-title: Step 39
-challengeType: 0
-dashedName: step-39
----
-
-# --description--
-
-As with the other `input` and `label` elements, link the `textarea` to its corresponding `label` element, and give it a `name` attribute.
-
-# --hints--
-
-You should give the `label` element a `for` attribute.
-
-```js
-assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor);
-```
-
-You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element.
-
-```js
-assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id);
-```
-
-You should give the `textarea` element a `name` attribute.
-
-```js
-assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Accessibility Quiz
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-@media (prefers-reduced-motion: no-preference) {
- * {
- scroll-behavior: smooth;
- }
-}
-
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-
-header {
- width: 100%;
- height: 50px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- position: fixed;
- background-color: #1b1b32;
- top: 0;
-}
-
-#logo {
- width: max(100px, 18vw);
- aspect-ratio: 35 / 4;
- max-height: 100%;
- background-color: #0a0a23;
- padding: 0.4rem;
-}
-
-h1 {
- text-align: center;
- font-size: min(5vw, 1.2em);
- color: #f1be32;
-}
-
-nav {
- width: 50%;
- max-width: 300px;
- height: 50px;
-}
-
-nav > ul {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-evenly;
- align-items: center;
- padding-inline-start: 0;
- margin-block: 0;
- height: 100%;
-}
-
-nav > ul > li {
- display: block;
- margin: 0 0.2rem;
- color: #dfdfe2;
- padding: 0.2rem;
-}
-
-nav > ul > li:hover {
- background-color: #dfdfe2;
- color: #1b1b32;
- cursor: pointer;
-}
-
-li > a {
- color: inherit;
- text-decoration: none;
-}
-
-main {
- padding-top: 50px;
-}
-
-section {
- width: 80%;
- margin: 0px auto 10px auto;
- max-width: 600px;
-}
-
-h1,
-h2 {
- font-family: Verdana, Tahoma;
-}
-
-h2 {
- border-bottom: 4px solid #dfdfe2;
- margin-top: 0px;
- padding-top: 60px;
-}
-
-
-.info {
- margin: 0 auto;
- padding: 10px 0 0 5px;
-}
-.formrow {
- margin-top: 30px;
- padding: 0px 15px;
-}
-
-input {
- font-size: 16px;
-}
-
-.info label,
-.info input {
- display: inline-block;
- text-align: right;
-}
-
-.info label {
- width: 10%;
- min-width: 55px;
-}
-
-.info input {
- width: 50%;
- text-align: left;
-}
-
-.question-block {
- text-align: left;
- display: block;
- width: 100%;
- margin-top: 20px;
- padding-top: 5px;
-}
-
-p {
- margin-top: 5px;
- padding-left: 15px;
- font-size: 20px;
-}
-
-p::before {
- content: "Question #";
-}
-
-.question {
- border: none;
- padding-bottom: 0;
-}
-
-.answers-list {
- list-style: none;
- padding: 0;
-}
-
-button {
- display: block;
- margin: 40px auto;
- width: 40%;
- padding: 15px;
- font-size: 23px;
- background: #d0d0d5;
- border: 3px solid #3b3b4f;
-}
-
-footer {
- background-color: #2a2a40;
- display: flex;
- justify-content: center;
-}
-
-footer,
-footer a {
- color: #dfdfe2;
-}
-
-address {
- text-align: center;
- padding: 0.3em;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md
deleted file mode 100644
index 1e2c64c4084e96..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-id: 614ccc21ea91ef1736b9b578
-title: Step 1
-challengeType: 0
-dashedName: step-1
----
-
-# --description--
-
-Welcome to the first part of the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate.
-
-Start this accessibility journey by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page.
-
-# --hints--
-
-You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._
-
-```js
-assert.match(code, //i);
-// TODO: This should/could be fixed in the builder.js
-// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
---fcc-editable-region--
-
-
-
-
-
-
-
-
---fcc-editable-region--
-
-```
-
-```css
-body {
- background: #f5f6f7;
- color: #1b1b32;
- font-family: Helvetica;
- margin: 0;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
deleted file mode 100644
index 513e9a316772f1..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-id: 5f331e55dfab7a896e53c3a1
-title: Step 3
-challengeType: 0
-dashedName: step-3
----
-
-# --description--
-
-The `title` is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed.
-
-Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing.
-
-# --hints--
-
-You should have a `meta` tag.
-
-```js
-assert(code.match(//is));
-```
-
-Your `meta` tag should have a `charset` attribute.
-
-```js
-assert(code.match(/
-
---fcc-editable-region--
-
- Cafe Menu
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md
deleted file mode 100644
index a948eaa99f1726..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-id: 5f3326b143638ee1a09ff1e3
-title: Step 4
-challengeType: 0
-dashedName: step-4
----
-
-# --description--
-
-To prepare to create some actual content, add a `body` element below the `head` element.
-
-# --hints--
-
-You should have an opening `` tag.
-
-```js
-assert(code.match(//i));
-```
-
-You should have a closing `` tag.
-
-```js
-assert(code.match(/<\/body>/i));
-```
-
-You should not change your `head` element. Make sure you did not delete your closing tag.
-
-```js
-assert(code.match(//i));
-assert(code.match(/<\/head>/i));
-```
-
-Your `body` element should come after your `head` element.
-
-```js
-assert(code.match(/<\/head>[.\n\s]*/im));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
- Cafe Menu
-
---fcc-editable-region--
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
deleted file mode 100644
index b674d026c4c411..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-id: 5f33294a6af5e9188dbdb8f3
-title: Step 5
-challengeType: 0
-dashedName: step-5
----
-
-# --description--
-
-The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `body` element. Give it the name of the cafe in capitalized letters to make it stand out.
-
-# --hints--
-
-You should have an opening `
` tag.
-
-```js
-assert(code.match(/
/i));
-```
-
-You should have a closing `
` tag.
-
-```js
-assert(code.match(/<\/h1>/i));
-```
-
-You should not change your existing `body` element.
-
-```js
-assert($('body').length === 1);
-```
-
-Your `h1` element should be nested in your `body` element.
-
-```js
-assert($('h1')[0].parentElement.tagName === "BODY");
-```
-
-Your `h1` element should have the text `CAMPER CAFE`.
-
-```js
-assert(code.match(/
CAMPER CAFE<\/h1>/));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
-
---fcc-editable-region--
-
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
deleted file mode 100644
index 4c0e60cd610c78..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: 5f332a88dc25a0fd25c7687a
-title: Step 6
-challengeType: 0
-dashedName: step-6
----
-
-# --description--
-
-To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`.
-
-# --hints--
-
-You should have an opening `
` tag.
-
-```js
-assert(code.match(/
/i));
-```
-
-You should have a closing `
` tag.
-
-```js
-assert(code.match(/<\/p>/i));
-```
-
-You should not change your existing `h1` element. Make sure you did not delete the closing tag.
-
-```js
-assert($('h1').length === 1);
-```
-
-Your `p` element should be below your `h1` element.
-
-```js
-assert($('p')[0].previousElementSibling.tagName === 'H1');
-```
-
-Your `p` element should have the text `Est. 2020`.
-
-```js
-assert(code.match(/
---fcc-editable-region--
-
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
deleted file mode 100644
index 3c8c226c1e7996..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-id: 5f332b23c2045fb843337579
-title: Step 7
-challengeType: 0
-dashedName: step-7
----
-
-# --description--
-
-Since the `p` element added in the previous step provides supplemental information about the cafe, nest both the `h1` and `p` elements in a `header` element.
-
-# --hints--
-
-You should have an opening `` tag.
-
-```js
-assert(code.match(//i));
-```
-
-You should have a closing `` tag.
-
-```js
-assert(code.match(/<\/header>/i));
-```
-
-Your `h1` element should be nested in your `header` element.
-
-```js
-const header = document.querySelectorAll('header')[0];
-assert(header.children[0].tagName === 'H1');
-```
-
-Your `p` element should be nested in your `header` element.
-
-```js
-const header = document.querySelectorAll('header')[0];
-assert(header.children[1].tagName === "P");
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
-
-
---fcc-editable-region--
-
CAMPER CAFE
-
Est. 2020
---fcc-editable-region--
-
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md
deleted file mode 100644
index 7e35bbf41699d6..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-id: 5f33310c1851c6c4da013250
-title: Step 8
-challengeType: 0
-dashedName: step-8
----
-
-# --description--
-
-It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
-
-# --hints--
-
-Your code should have an opening `` tag.
-
-```js
-assert(code.match(//i));
-```
-
-Your code should have a closing `` tag.
-
-```js
-assert(code.match(/<\/main>/i));
-```
-
-You should not change your `header` element. Make sure you don't accidentally delete your closing tag.
-
-```js
-assert($('header').length === 1);
-```
-
-Your `main` tag should come after your `header` tag.
-
-```js
-const main = document.querySelectorAll('main')[0];
-assert(main.previousElementSibling.tagName === 'HEADER');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
-
-
---fcc-editable-region--
-
-
CAMPER CAFE
-
Est. 2020
-
---fcc-editable-region--
-
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
deleted file mode 100644
index 127042fa73f708..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-id: 5f344f9c805cd193c33d829c
-title: Step 12
-challengeType: 0
-dashedName: step-12
----
-
-# --description--
-
-You can add style to an element by specifying it in the `style` element and setting a property for it like this:
-
-```css
-element {
- property: value;
-}
-```
-
-Center your `h1` element by setting its `text-align` property to the value `center`.
-
-# --hints--
-
-You should have an `h1` selector in your `style` element.
-
-```js
-const hasSelector = new __helpers.CSSHelp(document).getStyle('h1');
-assert(hasSelector);
-```
-
-Your `text-align` property should have a value of `center`.
-
-```js
-const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center');
-assert(hasTextAlign);
-```
-
-Your `h1` selector should set the `text-align` property to `center`.
-
-```js
-const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
-assert(h1TextAlign === 'center');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
---fcc-editable-region--
-
---fcc-editable-region--
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
deleted file mode 100644
index dbfd19f30d9e6a..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-id: 5f344fad8bf01691e71a30eb
-title: Step 11
-challengeType: 0
-dashedName: step-11
----
-
-# --description--
-
-Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element.
-
-# --hints--
-
-Your code should have an opening `` tag.
-
-```js
-assert(code.match(/<\/style\s*>/));
-```
-
-Your `style` element should be nested in your `head` element.
-
-```js
-assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
- Cafe Menu
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
deleted file mode 100644
index c6e75ade616085..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-id: 5f344fbc22624a2976425065
-title: Step 10
-challengeType: 0
-dashedName: step-10
----
-
-# --description--
-
-Create an `h2` element in the `section` element and give it the text `Coffee`.
-
-# --hints--
-
-You should have an opening `
` tag.
-
-```js
-assert(code.match(//i));
-```
-
-You should have a closing `
` tag.
-
-```js
-assert(code.match(/<\/h2\s*>/i));
-```
-
-You should not change your existing `section` element. Make sure you did not delete the closing tag.
-
-```js
-assert($('section').length === 1);
-```
-
-Your `h2` element should be within your `section` element.
-
-```js
-const h2 = document.querySelector('h2');
-assert(h2.parentElement.tagName === 'SECTION');
-```
-
-Your `h2` element should have the text `Coffee`.
-
-```js
-const h2 = document.querySelector('h2');
-assert(h2.innerText === 'Coffee');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
---fcc-editable-region--
-
-
---fcc-editable-region--
-
-
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
deleted file mode 100644
index d8e30eb293500e..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-id: 5f344fc1520b6719f2e35605
-title: Step 9
-challengeType: 0
-dashedName: step-9
----
-
-# --description--
-
-There will be two sections on the menu, one for coffees and one for desserts. Add a `section` element within the `main` element so you have a place to put all the coffees available.
-
-# --hints--
-
-You should have an opening `` tag.
-
-```js
-assert(code.match(//i));
-```
-
-You should have a closing `` tag.
-
-```js
-assert(code.match(/<\/section\s*>/i));
-```
-
-You should not change your existing `main` element. Make sure you didn't delete the closing tag.
-
-```js
-assert($('main').length === 1);
-```
-
-Your `section` element should be within your `main` element.
-
-```js
-const main = document.querySelectorAll('main')?.[0];
-assert(main.children[0].tagName === 'SECTION');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
---fcc-editable-region--
-
-
---fcc-editable-region--
-
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
deleted file mode 100644
index 86db9ec58001fa..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-id: 5f3477ae34c1239cafe128be
-title: Step 14
-challengeType: 0
-dashedName: step-14
----
-
-# --description--
-
-You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this:
-
-```css
-selector1, selector2 {
- property: value;
-}
-```
-
-Use a single type selector to center the `h1`, `h2` and `p` elements at the same time.
-
-# --hints--
-
-You should use a single type selector for all three elements, `h1, h2, p`. Be sure to use that order.
-
-```js
-const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
-assert(hasSelector);
-```
-
-You should only have one selector in your `style` element.
-
-```js
-const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText)
-assert(selectors.length === 1);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
---fcc-editable-region--
-
---fcc-editable-region--
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
deleted file mode 100644
index eeb15e2e618e55..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-id: 5f3477ae8466a9a3d2cc953c
-title: Step 16
-challengeType: 0
-dashedName: step-16
----
-
-# --description--
-
-Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left.
-
-# --hints--
-
-You should not have any `style` tags in your code.
-
-```js
-assert(!code.match(/style/i));
-```
-
-You should not have any CSS selectors in your HTML file.
-
-```js
-(getUserInput) => {
- const html = getUserInput('editableContents');
- assert(!html.includes('style'));
- assert(!html.includes('text-align'));
-}
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
- Cafe Menu
-
-
---fcc-editable-region--
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
-```css
-h1, h2, p {
- text-align: center;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
deleted file mode 100644
index d769760c199fae..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-id: 5f3477ae9675db8bb7655b30
-title: Step 13
-challengeType: 0
-dashedName: step-13
----
-
-# --description--
-
-In the previous step, you used a type selector to style the `h1` element. Go ahead and center the `h2` and `p` elements with a new type selector for each one.
-
-# --hints--
-
-You should not change the existing `h1` selector.
-
-```js
-const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
-assert(hasH1);
-```
-
-You should add a new `h2` selector.
-
-```js
-const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
-assert(hasH2);
-```
-
-You should add a new `p` selector.
-
-```js
-const hasP = new __helpers.CSSHelp(document).getStyle('p');
-assert(hasP);
-```
-
-Your `h1` element should have a `text-align` of `center`.
-
-```js
-const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
-assert(h1TextAlign === 'center');
-```
-
-Your `h2` element should have a `text-align` of `center`.
-
-```js
-const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
-assert(h2TextAlign === 'center');
-```
-
-Your `p` element should have a `text-align` of `center`.
-
-```js
-const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
-assert(pTextAlign === 'center');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
---fcc-editable-region--
-
---fcc-editable-region--
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
deleted file mode 100644
index c91fab2553fb92..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-id: 5f3477aefa51bfc29327200b
-title: Step 15
-challengeType: 0
-dashedName: step-15
----
-
-# --description--
-
-You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it.
-
-We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor.
-
-Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags.
-
-# --hints--
-
-Your `styles.css` file should have the `h1, h2, p` type selector.
-
-```js
-(getUserInput) => {
- assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
-}
-```
-
-Your selector should set the `text-align` property to `center`.
-
-```js
-(getUserInput) => {
- assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
-}
-```
-
-You should only have one selector.
-
-```js
-(getUserInput) => {
- assert(getUserInput('editableContents').match(/text-align:\s*center;?/)?.length === 1);
-}
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Cafe Menu
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
-```css
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
deleted file mode 100644
index f2af63ca109be9..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-id: 5f3477cb2e27333b1ab2b955
-title: Step 17
-challengeType: 0
-dashedName: step-17
----
-
-# --description--
-
-Now you need to link the `styles.css` file so the styles will be applied again. Nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`.
-
-# --hints--
-
-Your code should have a `link` element.
-
-```js
-// link is removed -> if exists, replaced with style
-const link = document.querySelector('head > style');
-assert(link);
-```
-
-You should not change your existing `head` element. Make sure you did not delete the closing tag.
-
-```js
-assert($('head').length === 1);
-```
-
-Your `link` element should be a self-closing element.
-
-```js
-assert(code.match(//i));
-```
-
-Your `link` element should be within your `head` element.
-
-```js
-assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i))
-```
-
-Your `link` element should have a `rel` attribute with the value `stylesheet`.
-
-```js
-assert(code.match(/rel=('|")stylesheet\1/i));
-```
-
-Your `link` element should have a `type` attribute with the value `text/css`.
-
-```js
-assert(code.match(/type=('|")text\/css\1/i));
-```
-
-Your `link` element should have an `href` attribute with the value `styles.css`.
-
-```js
-assert(code.match(/href=('|")styles.css\1/i));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
- Cafe Menu
-
---fcc-editable-region--
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
-```css
-h1, h2, p {
- text-align: center;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
deleted file mode 100644
index d160b6a7ec8b86..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-id: 5f3477cb303c5cb61b43aa9b
-title: Step 19
-challengeType: 0
-dashedName: step-19
----
-
-# --description--
-
-The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element.
-
-# --hints--
-
-You should use a `body` selector.
-
-```js
-const hasBody = new __helpers.CSSHelp(document).getStyle('body');
-assert(hasBody);
-```
-
-You should set the `background-color` property to `brown`.
-
-```js
-const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
-assert(hasBackground);
-```
-
-Your `body` element should have a `brown` background.
-
-```js
-const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
-assert(bodyBackground === 'brown');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
-```css
---fcc-editable-region--
-h1, h2, p {
- text-align: center;
-}
---fcc-editable-region--
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
deleted file mode 100644
index fad3c0ca42c26f..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-id: 5f3477cbcb6ba47918c1da92
-title: Step 18
-challengeType: 0
-dashedName: step-18
----
-
-# --description--
-
-For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute.
-
-Add the following within the `head` element:
-
-```html
-
-```
-
-# --hints--
-
-Your code should have two `meta` elements.
-
-```js
-assert(code.match(//g).length === 2);
-```
-
-Your `meta` element should have a `name` attribute with a value of `viewport`.
-
-```js
-const meta = $('meta');
-assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
-```
-
-Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`.
-
-```js
-const meta = $('meta');
-assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
---fcc-editable-region--
-
-
- Cafe Menu
-
-
---fcc-editable-region--
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
-```css
-h1, h2, p {
- text-align: center;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
deleted file mode 100644
index 0f5b925b09eac0..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: 5f34a1fd611d003edeafd681
-title: Step 20
-challengeType: 0
-dashedName: step-20
----
-
-# --description--
-
-That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text.
-
-# --hints--
-
-You should set the `background-color` property to `burlywood`.
-
-```js
-const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
-assert(hasBackground);
-```
-
-Your `body` element should have a `burlywood` background.
-
-```js
-const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
-assert(bodyBackground === 'burlywood');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-```
-
-```css
---fcc-editable-region--
-body {
- background-color: brown;
-}
---fcc-editable-region--
-h1, h2, p {
- text-align: center;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
deleted file mode 100644
index 1856677d582df6..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: 5f356ed60785e1f3e9850b6e
-title: Step 25
-challengeType: 0
-dashedName: step-25
----
-
-# --description--
-
-Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
-
-# --hints--
-
-You should set the `width` property to `80%`.
-
-```js
-const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
-assert(hasWidth);
-```
-
-You should not have a `width` property of `300px`.
-
-```js
-const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
-assert(!hasWidth);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
-body {
- /*
- background-color: burlywood;
- */
-}
-
-h1, h2, p {
- text-align: center;
-}
---fcc-editable-region--
-div {
- width: 300px;
- background-color: burlywood;
-}
---fcc-editable-region--
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
deleted file mode 100644
index 100245544daded..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-id: 5f356ed60a5decd94ab66986
-title: Step 23
-challengeType: 0
-removeComments: false
-dashedName: step-23
----
-
-# --description--
-
-Comments in CSS look like this:
-
-```css
-/* comment here */
-```
-
-In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again.
-
-# --hints--
-
-You should comment out the `background-color: burlywood;` line in your CSS.
-
-```js
-assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
-```
-
-
-Your `body` should have a white background.
-
-```js
-const bodyCSS = $('body').css('background-color');
-assert(bodyCSS === "rgba(0, 0, 0, 0)")
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
-body {
---fcc-editable-region--
- background-color: burlywood;
---fcc-editable-region--
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-div {
- width: 300px;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
deleted file mode 100644
index 3fd01dfbbbfa81..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-id: 5f356ed6199b0cdef1d2be8f
-title: Step 27
-challengeType: 0
-dashedName: step-27
----
-
-# --description--
-
-So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this:
-
-```css
-.class-name {
- styles
-}
-```
-
-Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`.
-
-# --hints--
-
-You should have a `.menu` class selector.
-
-```js
-const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
-assert(hasMenu);
-```
-
-You should not have a `div` selector.
-
-```js
-const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
-assert(!hasDiv);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
-body {
- /*
- background-color: burlywood;
- */
-}
-
-h1, h2, p {
- text-align: center;
-}
-
---fcc-editable-region--
-div {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
---fcc-editable-region--
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
deleted file mode 100644
index 8a66f3a4416388..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-id: 5f356ed63c7807a4f1e6d054
-title: Step 22
-challengeType: 0
-dashedName: step-22
----
-
-# --description--
-
-The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`.
-
-# --hints--
-
-You should have a `div` type selector.
-
-```js
-const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
-assert(hasDiv);
-```
-
-You should set the `width` property to `300px`.
-
-```js
-const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
-assert(hasWidth);
-```
-
-Your `div` should have a width of 300px.
-
-```js
-const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
-assert(divWidth === '300px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
---fcc-editable-region--
-body {
- background-color: burlywood;
-}
-
-h1, h2, p {
- text-align: center;
-}
---fcc-editable-region--
-
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
deleted file mode 100644
index a7a1d36b1ecb59..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: 5f356ed63e0fa262326eef05
-title: Step 24
-challengeType: 0
-dashedName: step-24
----
-
-# --description--
-
-Now make the background color of the `div` element to be `burlywood`.
-
-# --hints--
-
-You should set the `background-color` property to `burlywood`.
-
-```js
-const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
-assert(hasBackgroundColor);
-```
-
-Your `div` should have a burlywood background.
-
-```js
-const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
-assert(divBackground === 'burlywood');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
-body {
- /*
- background-color: burlywood;
- */
-}
-
-h1, h2, p {
- text-align: center;
-}
-
---fcc-editable-region--
-div {
- width: 300px;
-}
---fcc-editable-region--
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
deleted file mode 100644
index d77a93570d057c..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-id: 5f356ed656a336993abd9f7c
-title: Step 26
-challengeType: 0
-dashedName: step-26
----
-
-# --description--
-
-Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element.
-
-# --hints--
-
-You should set the `margin-left` property to `auto`.
-
-```js
-const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
-assert(hasMargin);
-```
-
-You should set the `margin-right` property to `auto`.
-
-```js
-const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
-assert(hasMargin);
-```
-
-You should set the `margin-left` and `margin-right` properties of your `div` to `auto`.
-
-```js
-const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
-const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
-assert(divMarginRight === 'auto');
-assert(divMarginLeft === 'auto');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
-body {
- /*
- background-color: burlywood;
- */
-}
-
-h1, h2, p {
- text-align: center;
-}
-
---fcc-editable-region--
-div {
- width: 80%;
- background-color: burlywood;
-}
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
deleted file mode 100644
index 609f19c13ff732..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-id: 5f356ed69db0a491745e2bb6
-title: Step 28
-challengeType: 0
-dashedName: step-28
----
-
-# --description--
-
-To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`.
-
-# --hints--
-
-Your `div` should still render. Make sure you haven't malformed the `
` tag.
-
-```js
-assert($('div').length === 1);
-```
-
-Your `div` element should have the `menu` class.
-
-```js
-assert($('div').attr('class').includes('menu'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
-body {
- /*
- background-color: burlywood;
- */
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
deleted file mode 100644
index 9332a9aa232289..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-id: 5f356ed6cf6eab5f15f5cfe6
-title: Step 21
-challengeType: 0
-dashedName: step-21
----
-
-# --description--
-
-The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`.
-
-# --hints--
-
-You should have an opening `
` tag.
-
-```js
-assert(code.match(/
/i));
-```
-
-You should have a closing `
` tag.
-
-```js
-assert(code.match(/<\/div>/i));
-```
-
-You should not change your existing `body` element. Make sure you did not delete the closing tag.
-
-```js
-assert($('body').length === 1);
-```
-
-Your `div` tag should be nested in the `body`.
-
-```js
-const div = $('div')[0];
-assert(div.parentElement.tagName === 'BODY');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
---fcc-editable-region--
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
---fcc-editable-region--
-
-```
-
-```css
-body {
- background-color: burlywood;
-}
-
-h1, h2, p {
- text-align: center;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
deleted file mode 100644
index 17627541adfe49..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-id: 5f35e5c4321f818cdc4bed30
-title: Step 30
-challengeType: 0
-dashedName: step-30
----
-
-# --description--
-
-It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer.
-
-# --hints--
-
-You should have an opening `` tag.
-
-```js
-assert(code.match(//i));
-```
-
-You should have a closing `` tag.
-
-```js
-assert(code.match(/<\/article>/i));
-```
-
-You should not change the existing `h2` element.
-
-```js
-assert($('h2').length === 1);
-```
-
-Your `article` element should come after your `h2` element.
-
-```js
-const article = $('article')[0];
-assert(article.previousElementSibling.tagName === 'H2');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
---fcc-editable-region--
-
Coffee
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
deleted file mode 100644
index 18e62d8d138877..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-id: 5f35e5c44359872a137bd98f
-title: Step 29
-challengeType: 0
-dashedName: step-29
----
-
-# --description--
-
-Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page.
-
-Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
-
-# --hints--
-
-You should remove the commented out `background-color` property.
-
-```js
-assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
-```
-
-Your `body` selector should not have any comments.
-
-```js
-assert(!code.match(/body\s*{\s*\/\*/i));
-```
-
-You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
-
-```js
-const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
-assert(hasBackground)
-```
-
-Your `body` element should have the coffee beans background image.
-
-```js
-const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
-console.log(bodyBackground);
-assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
-
-
-
-```
-
-```css
-body {
---fcc-editable-region--
- /*
- background-color: burlywood;
- */
---fcc-editable-region--
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
deleted file mode 100644
index b67c34ea357a49..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-id: 5f3c866d0fc037f7311b4ac8
-title: Step 39
-challengeType: 0
-dashedName: step-39
----
-
-# --description--
-
-That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each.
-
-# --hints--
-
-You should set the `width` property to `50%` in your `.flavor` selector.
-
-```js
-const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
-assert(flavorWidth === '50%');
-```
-
-You should set the `width` property to `50%` in your `.price` selector.
-
-```js
-const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
-assert(priceWidth === '50%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
-
3.00
-
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
-.item p {
- display: inline-block;
-}
-
---fcc-editable-region--
-.flavor {
- text-align: left;
-}
-
-.price {
- text-align: right;
-}
---fcc-editable-region--
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
deleted file mode 100644
index 21fb53f2de5504..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-id: 5f3c866d28d7ad0de6470505
-title: Step 33
-challengeType: 0
-dashedName: step-33
----
-
-# --description--
-
-The flavors and prices are currently stacked on top of each other and centered with their respective `p` elements. It would be nice if the flavor was on the left and the price was on the right.
-
-Add the class name `flavor` to the `French Vanilla` `p` element.
-
-# --hints--
-
-You should add the `flavor` class to your `p` element.
-
-```js
-assert(code.match(//i));
-```
-
-You should only have one element with the `flavor` class.
-
-```js
-assert($('.flavor').length === 1);
-```
-
-Your `flavor` class should be on the `p` element with the text `French Vanilla`.
-
-```js
-assert($('.flavor')[0].innerText.match(/French Vanilla/i));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
---fcc-editable-region--
-
French Vanilla
-
3.00
---fcc-editable-region--
-
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
deleted file mode 100644
index e3d3a54656c273..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-id: 5f3c866d5414453fc2d7b480
-title: Step 32
-challengeType: 0
-dashedName: step-32
----
-
-# --description--
-
-Starting below the existing coffee/price pair, add the following coffee and prices using `article` elements with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price.
-
-```bash
-Caramel Macchiato 3.75
-Pumpkin Spice 3.50
-Hazelnut 4.00
-Mocha 4.50
-```
-
-# --hints--
-
-You should have five `article` elements.
-
-```js
-assert($('article').length === 5);
-```
-
-Each `article` element should have two `p` elements.
-
-```js
-const articles = $('article');
-assert(articles[0].children.length === 2);
-assert(articles[1].children.length === 2);
-assert(articles[2].children.length === 2);
-assert(articles[3].children.length === 2);
-assert(articles[4].children.length === 2);
-```
-
-Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`.
-
-```js
-const children = $('article')[0].children;
-assert(children[0].innerText.match(/French Vanilla/i));
-assert(children[1].innerText.match(/3\.00/i));
-```
-
-Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`.
-
-```js
-const children = $('article')[1].children;
-assert(children[0].innerText.match(/Caramel Macchiato/i));
-assert(children[1].innerText.match(/3\.75/i));
-```
-
-Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`.
-
-```js
-const children = $('article')[2].children;
-assert(children[0].innerText.match(/Pumpkin Spice/i));
-assert(children[1].innerText.match(/3\.50/i));
-```
-
-Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`.
-
-```js
-const children = $('article')[3].children;
-assert(children[0].innerText.match(/Hazelnut/i));
-assert(children[1].innerText.match(/4\.00/i));
-```
-
-Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`.
-
-```js
-const children = $('article')[4].children;
-assert(children[0].innerText.match(/Mocha/i));
-assert(children[1].innerText.match(/4\.50/i));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
---fcc-editable-region--
-
-
French Vanilla
-
3.00
-
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
deleted file mode 100644
index 0c996c720a714a..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-id: 5f3c866daec9a49519871816
-title: Step 31
-challengeType: 0
-dashedName: step-31
----
-
-# --description--
-
-`article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`.
-
-# --hints--
-
-You should not change the existing `article` element.
-
-```js
-assert($('article').length === 1);
-```
-
-Your `article` element should have two `p` elements.
-
-```js
-assert($('article').children('p').length === 2);
-```
-
-Your first `p` element should have the text `French Vanilla`.
-
-```js
-const firstP = $('article').children('p')[0];
-assert(firstP.innerText.match(/French Vanilla/i));
-```
-
-Your second `p` element should have the text `3.00`.
-
-```js
-const secondP = $('article').children('p')[1];
-assert(secondP.innerText.match(/3\.00/i));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
deleted file mode 100644
index 0f0667fcf82a29..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-id: 5f3c866dbf362f99b9a0c6d0
-title: Step 38
-challengeType: 0
-dashedName: step-38
----
-
-# --description--
-
-The `p` elements are nested in an `article` element with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this:
-
-```css
-.item p { }
-```
-
-Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements.
-
-# --hints--
-
-You should use the `.item p` selector.
-
-```js
-const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
-assert(hasItemP);
-```
-
-You should set the `display` property to `inline-block`.
-
-```js
-const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
-assert(hasDisplay);
-```
-
-Your `.item p` selector should set the `display` property to `inline-block`.
-
-```js
-const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
-assert(itemPDisplay === 'inline-block');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
-
3.00
-
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-.flavor {
- text-align: left;
-}
-
-.price {
- text-align: right;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
deleted file mode 100644
index 7c60b65d7f728a..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-id: 5f3c866dd0d0275f01d4d847
-title: Step 40
-challengeType: 0
-dashedName: step-40
----
-
-# --description--
-
-Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`.
-
-Change the `width` value to `49%` for each class to see what happens.
-
-# --hints--
-
-You should set the `width` property to `49%` in your `.flavor` selector.
-
-```js
-const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
-assert(flavorWidth === '49%');
-```
-
-You should set the `width` property to `49%` in your `.price` selector.
-
-```js
-const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
-assert(priceWidth === '49%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
-
3.00
-
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
-.item p {
- display: inline-block;
-}
-
---fcc-editable-region--
-.flavor {
- text-align: left;
- width: 50%;
-}
-
-.price {
- text-align: right;
- width: 50%;
-}
---fcc-editable-region--
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
deleted file mode 100644
index ba075075c17109..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-id: 5f3c866de7a5b784048f94b1
-title: Step 37
-challengeType: 0
-dashedName: step-37
----
-
-# --description--
-
-That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element.
-
-To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading.
-
-# --hints--
-
-You should apply the `item` class to your `article` element.
-
-```js
-assert(code.match(//i))
-```
-
-You should only have one `item` class element.
-
-```js
-assert($('.item').length === 1);
-```
-
-Your first `article` element should have the `item` class.
-
-```js
-assert($('article')[0].className === 'item');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
---fcc-editable-region--
-
Coffee
-
-
French Vanilla
-
3.00
-
---fcc-editable-region--
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
-.flavor {
- text-align: left;
-}
-
-.price {
- text-align: right;
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
deleted file mode 100644
index 64649e6bbefe2f..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-id: 5f3cade94c6576e7f7b7953f
-title: Step 42
-challengeType: 0
-dashedName: step-42
----
-
-# --description--
-
-Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again.
-
-# --hints--
-
-You should set the `width` property to `50%` in your `.flavor` selector.
-
-```js
-const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
-assert(flavorWidth === '50%');
-```
-
-You should set the `width` property to `50%` in your `.price` selector.
-
-```js
-const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
-assert(priceWidth === '50%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
-.item p {
- display: inline-block;
-}
-
---fcc-editable-region--
-.flavor {
- text-align: left;
- width: 49%;
-}
-
-.price {
- text-align: right;
- width: 49%;
-}
---fcc-editable-region--
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
deleted file mode 100644
index 0b0c90b7d3fcbf..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-id: 5f3cade9993019e26313fa8e
-title: Step 43
-challengeType: 0
-dashedName: step-43
----
-
-# --description--
-
-Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements.
-
-# --hints--
-
-You should only have five `article` elements.
-
-```js
-assert($('article').length === 5);
-```
-
-You should only have five `.item` elements.
-
-```js
-assert($('.item').length === 5);
-```
-
-Your `.item` elements should be your `article` elements.
-
-
-```js
-const articles = $('article');
-const items = $('.item');
-assert(articles[0] === items[0]);
-assert(articles[1] === items[1]);
-assert(articles[2] === items[2]);
-assert(articles[3] === items[3]);
-assert(articles[4] === items[4]);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
---fcc-editable-region--
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
---fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
-.item p {
- display: inline-block;
-}
-
-.flavor {
- text-align: left;
- width: 50%;
-}
-
-.price {
- text-align: right;
- width: 50%;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
deleted file mode 100644
index eaebcbe1ca83e4..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-id: 5f3cade99dda4e6071a85dfd
-title: Step 47
-challengeType: 0
-dashedName: step-47
----
-
-# --description--
-
-You will come back to styling the menu in a few steps, but for now, go ahead and add a second `section` element below the first for displaying the desserts offered by the cafe.
-
-# --hints--
-
-You should have an opening `section` tag.
-
-```js
-assert(code.match(//ig).length === 2);
-```
-
-You should have a closing `section` tag.
-
-```js
-assert(code.match(/<\/section>/ig).length === 2);
-```
-
-You should not change the existing `main` element.
-
-```js
-assert($('main').length === 1);
-```
-
-Your new `section` element should be nested in the `main` element.
-
-```js
-assert($('main').children('section').length === 2);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
---fcc-editable-region--
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
3.75
-
-
-
Pumpkin Spice
3.50
-
-
-
Hazelnut
4.00
-
-
-
Mocha
4.50
-
-
---fcc-editable-region--
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
-.item p {
- display: inline-block;
-}
-
-.flavor {
- text-align: left;
- width: 75%;
-}
-
-.price {
- text-align: right;
- width: 25%
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
deleted file mode 100644
index 7e136fd4e661b4..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-id: 5f3cade9fa77275d9f4efe62
-title: Step 41
-challengeType: 0
-dashedName: step-41
----
-
-# --description--
-
-That worked, but there is still a little space on the right of the price.
-
-You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them.
-
-# --hints--
-
-Your `p` elements should not have any space between them.
-
-```js
-assert(code.match(/Vanilla<\/p>
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
---fcc-editable-region--
-
French Vanilla
-
3.00
---fcc-editable-region--
-
-
-
Caramel Macchiato
-
3.75
-
-
-
Pumpkin Spice
-
3.50
-
-
-
Hazelnut
-
4.00
-
-
-
Mocha
-
4.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
-}
-
-.item p {
- display: inline-block;
-}
-
-.flavor {
- text-align: left;
- width: 49%;
-}
-
-.price {
- text-align: right;
- width: 49%;
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
deleted file mode 100644
index dd2cdc2e911485..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-id: 5f3ef6e01f288a026d709587
-title: Step 67
-challengeType: 0
-dashedName: step-67
----
-
-# --description--
-
-You can use an `hr` element to display a divider between sections of different content.
-
-First, add an `hr` element between the first `header` element and the `main` element. Note that `hr` elements are self closing.
-
-# --hints--
-
-You should add an `hr` element. `hr` elements are self-closing.
-
-```js
-assert(code.match(//i));
-assert(!code.match(/<\/hr>/i));
-```
-
-You should not change your existing `header` element.
-
-```js
-assert($('header').length === 1);
-```
-
-You should not change your existing `main` element.
-
-```js
-assert($('main').length === 1);
-```
-
-Your `hr` element should be between your `header` element and your `main` element.
-
-```js
-assert($('hr')[0].previousElementSibling.tagName === 'HEADER');
-assert($('hr')[0].nextElementSibling.tagName === 'MAIN');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
---fcc-editable-region--
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
3.75
-
-
-
Pumpkin Spice
3.50
-
-
-
Hazelnut
4.00
-
-
-
Mocha
4.50
-
-
-
-
Desserts
-
-
Donut
1.50
-
-
-
Cherry Pie
2.75
-
-
-
Cheesecake
3.00
-
-
-
Cinnamon Roll
2.50
-
-
-
---fcc-editable-region--
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
- font-family: sans-serif;
-}
-
-h1 {
- font-size: 40px;
-}
-
-h2 {
- font-size: 30px;
-}
-
-.established {
- font-style: italic;
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
- padding: 20px;
- max-width: 500px;
-}
-
-h1, h2 {
- font-family: Impact, serif;
-}
-
-.item p {
- display: inline-block;
-}
-
-.flavor, .dessert {
- text-align: left;
- width: 75%;
-}
-
-.price {
- text-align: right;
- width: 25%
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
deleted file mode 100644
index e392a64534507b..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-id: 5f3ef6e03d719d5ac4738993
-title: Step 57
-challengeType: 0
-dashedName: step-57
----
-
-# --description--
-
-The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.
-
-Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide.
-
-# --hints--
-
-You should set the `max-width` property to `500px`.
-
-```js
-const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px');
-assert(hasMaxWidth);
-```
-
-Your `.menu` element should have a `max-width` of `500px`.
-
-```js
-const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width');
-assert(menuMaxWidth === '500px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
3.75
-
-
-
Pumpkin Spice
3.50
-
-
-
Hazelnut
4.00
-
-
-
Mocha
4.50
-
-
-
-
Desserts
-
-
Donut
1.50
-
-
-
Cherry Pie
2.75
-
-
-
Cheesecake
3.00
-
-
-
Cinnamon Roll
2.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
---fcc-editable-region--
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
- padding: 20px;
-}
---fcc-editable-region--
-
-.item p {
- display: inline-block;
-}
-
-.flavor, .dessert {
- text-align: left;
- width: 75%;
-}
-
-.price {
- text-align: right;
- width: 25%
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
deleted file mode 100644
index 53677de55b31d0..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-id: 5f3ef6e04559b939080db057
-title: Step 56
-challengeType: 0
-dashedName: step-56
----
-
-# --description--
-
-Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`.
-
-# --hints--
-
-You should remove the `padding-left` property.
-
-```js
-assert(!code.match(/padding-left/i));
-```
-
-You should remove the `padding-right` property.
-
-```js
-assert(!code.match(/padding-right/i));
-```
-
-You should remove the `padding-top` property.
-
-```js
-assert(!code.match(/padding-top/i));
-```
-
-You should remove the `padding-bottom` property.
-
-```js
-assert(!code.match(/padding-bottom/i));
-```
-
-You should set the `padding` property to `20px`.
-
-```js
-const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px');
-assert(hasPadding);
-```
-
-Your `.menu` element should have a `padding` value of `20px`.
-
-```js
-const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding');
-assert(menuPadding === '20px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
3.75
-
-
-
Pumpkin Spice
3.50
-
-
-
Hazelnut
4.00
-
-
-
Mocha
4.50
-
-
-
-
Desserts
-
-
Donut
1.50
-
-
-
Cherry Pie
2.75
-
-
-
Cheesecake
3.00
-
-
-
Cinnamon Roll
2.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
---fcc-editable-region--
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
- padding-left: 20px;
- padding-right: 20px;
- padding-top: 20px;
- padding-bottom: 20px;
-}
---fcc-editable-region--
-
-.item p {
- display: inline-block;
-}
-
-.flavor, .dessert {
- text-align: left;
- width: 75%;
-}
-
-.price {
- text-align: right;
- width: 25%
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
deleted file mode 100644
index f4065ad6fbc3b3..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
+++ /dev/null
@@ -1,144 +0,0 @@
----
-id: 5f3ef6e050279c7a4a7101d3
-title: Step 55
-challengeType: 0
-dashedName: step-55
----
-
-# --description--
-
-That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
-
-# --hints--
-
-You should not remove the `padding-left` or `padding-right` properties.
-
-```js
-const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
-assert(paddingLeft === '20px');
-const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
-assert(paddingRight === '20px');
-```
-
-You should set the `padding-top` property to `20px`.
-
-```js
-const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
-assert(hasPaddingTop);
-```
-
-You should set the `padding-bottom` property to `20px`.
-
-```js
-const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
-assert(hasPaddingBottom);
-```
-
-Your `.menu` element should have a `padding-top` of `20px`.
-
-```js
-const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top');
-assert(menuPaddingTop === '20px');
-```
-
-Your `.menu` element should have a `padding-bottom` of `20px`.
-
-```js
-const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom');
-assert(menuPaddingBottom === '20px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
3.75
-
-
-
Pumpkin Spice
3.50
-
-
-
Hazelnut
4.00
-
-
-
Mocha
4.50
-
-
-
-
Desserts
-
-
Donut
1.50
-
-
-
Cherry Pie
2.75
-
-
-
Cheesecake
3.00
-
-
-
Cinnamon Roll
2.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
-
-h1, h2, p {
- text-align: center;
-}
-
---fcc-editable-region--
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
- padding-left: 20px;
- padding-right: 20px;
-}
---fcc-editable-region--
-
-.item p {
- display: inline-block;
-}
-
-.flavor, .dessert {
- text-align: left;
- width: 75%;
-}
-
-.price {
- text-align: right;
- width: 25%
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
deleted file mode 100644
index 43f04fdee5620c..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-id: 5f3ef6e05473f91f948724ab
-title: Step 58
-challengeType: 0
-dashedName: step-58
----
-
-# --description--
-
-You can change the `font-family` of text, to make it look different from the default font of your browser. Each browser has some common fonts available to it.
-
-Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable.
-
-# --hints--
-
-You should set the `font-family` property to `sans-serif`.
-
-```js
-const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif');
-```
-
-Your `body` should have a `font-family` of `sans-serif`.
-
-```js
-const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family');
-assert(bodyFontFamily === 'sans-serif');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
3.75
-
-
-
Pumpkin Spice
3.50
-
-
-
Hazelnut
4.00
-
-
-
Mocha
4.50
-
-
-
-
Desserts
-
-
Donut
1.50
-
-
-
Cherry Pie
2.75
-
-
-
Cheesecake
3.00
-
-
-
Cinnamon Roll
2.50
-
-
-
-
-
-
-```
-
-```css
---fcc-editable-region--
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
---fcc-editable-region--
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
- padding: 20px;
- max-width: 500px;
-}
-
-.item p {
- display: inline-block;
-}
-
-.flavor, .dessert {
- text-align: left;
- width: 75%;
-}
-
-.price {
- text-align: right;
- width: 25%
-}
-```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
deleted file mode 100644
index 73e18cac5cb559..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-id: 5f3ef6e056bdde6ae6892ba2
-title: Step 59
-challengeType: 0
-dashedName: step-59
----
-
-# --description--
-
-It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector.
-
-Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
-
-# --hints--
-
-You should use an `h1, h2` selector.
-
-```js
-const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
-assert(h1h2Selector);
-```
-
-You should set the `font-family` to `Impact`.
-
-```js
-const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact');
-assert(hasFontFamily);
-```
-
-Your `h1` element should have a `font-family` of `Impact`.
-
-```js
-assert($('h1').css('font-family').match(/impact/i));
-```
-
-Your `h2` element should have a `font-family` of `Impact`.
-
-```js
-assert($('h2').css('font-family').match(/impact/i));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
-
-
CAMPER CAFE
-
Est. 2020
-
-
-
-
Coffee
-
-
French Vanilla
3.00
-
-
-
Caramel Macchiato
3.75
-
-
-
Pumpkin Spice
3.50
-
-
-
Hazelnut
4.00
-
-
-
Mocha
4.50
-
-
-
-
Desserts
-
-
Donut
1.50
-
-
-
Cherry Pie
2.75
-
-
-
Cheesecake
3.00
-
-
-
Cinnamon Roll
2.50
-
-
-
-
-
-
-```
-
-```css
-body {
- background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
- font-family: sans-serif;
-}
-
-h1, h2, p {
- text-align: center;
-}
-
-.menu {
- width: 80%;
- background-color: burlywood;
- margin-left: auto;
- margin-right: auto;
- padding: 20px;
- max-width: 500px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-.item p {
- display: inline-block;
-}
-
-.flavor, .dessert {
- text-align: left;
- width: 75%;
-}
-
-.price {
- text-align: right;
- width: 25%
-}
-```
-
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
deleted file mode 100644
index 3d1c00d719474b..00000000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
+++ /dev/null
@@ -1,135 +0,0 @@
----
-id: 5f3ef6e06d34faac0447fc44
-title: Step 61
-challengeType: 0
-dashedName: step-61
----
-
-# --description--
-
-Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
-
-# --hints--
-
-You should have an `.established` selector.
-
-```js
-const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established');
-assert(hasEstablished);
-```
-
-You should set the `font-style` property to `italic`.
-
-```js
-const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic');
-assert(hasFontStyle);
-```
-
-Your `.established` selector should set the `font-style` property to `italic`.
-
-```js
-const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style');
-assert(establishedFontStyle === 'italic');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- Cafe Menu
-
-
-
-
- 
- 
-