diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 60a85b4b6d..54c8daee06 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -101,7 +101,8 @@
       "css-nutrition-label": {
         "title": "CSS Nutrition Label",
         "intro": ["", ""]
-      }
+      },
+      "css-ferris-wheel": { "title": "CSS Ferris Wheel", "intro": ["", ""] }
     }
   },
   "javascript-algorithms-and-data-structures": {
diff --git a/client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md b/client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md
new file mode 100644
index 0000000000..a53aa27d97
--- /dev/null
+++ b/client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md
@@ -0,0 +1,10 @@
+---
+title: Introduction to the CSS Ferris Wheel
+block: css-ferris-wheel
+superBlock: Responsive Web Design
+isBeta: true
+---
+
+## Introduction to the CSS Ferris Wheel
+
+This is a test for the new project-based curriculum.
diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json
index 1b64b7fece..c4affee5cf 100644
--- a/client/utils/help-category-map.json
+++ b/client/utils/help-category-map.json
@@ -81,5 +81,6 @@
   "registration-form": "HTML-CSS",
   "css-photo-gallery": "HTML-CSS",
   "css-grid-magazine": "HTML-CSS",
-  "css-nutrition-label": "HTML-CSS"
+  "css-nutrition-label": "HTML-CSS",
+  "css-ferris-wheel": "HTML-CSS"
 }
diff --git a/curriculum/challenges/_meta/css-ferris-wheel/meta.json b/curriculum/challenges/_meta/css-ferris-wheel/meta.json
new file mode 100644
index 0000000000..b62a47afc5
--- /dev/null
+++ b/curriculum/challenges/_meta/css-ferris-wheel/meta.json
@@ -0,0 +1,130 @@
+{
+  "name": "CSS Ferris Wheel",
+  "isUpcomingChange": true,
+  "dashedName": "css-ferris-wheel",
+  "order": 15,
+  "time": "5 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "responsive-web-design",
+  "superOrder": 1,
+  "isBeta": true,
+  "challengeOrder": [
+    [
+      "6140c7e645d8e905819f1dd4",
+      "Step 1"
+    ],
+    [
+      "6140c9d35015ae0ba0c250e8",
+      "Step 2"
+    ],
+    [
+      "6140cbeec34e970dfe75e710",
+      "Step 3"
+    ],
+    [
+      "6140cd32d018ed0f600eefce",
+      "Step 4"
+    ],
+    [
+      "617ace7d831f9c16a569b38a",
+      "Step 5"
+    ],
+    [
+      "6140cdebd39d6a101e747529",
+      "Step 6"
+    ],
+    [
+      "6140cfc08ca9c5128c3e6478",
+      "Step 7"
+    ],
+    [
+      "6140d0069049f5139d78da40",
+      "Step 8"
+    ],
+    [
+      "6140d10d50636e14695013b2",
+      "Step 9"
+    ],
+    [
+      "6140d1a351e88f159ed54fca",
+      "Step 10"
+    ],
+    [
+      "6140d263016325162fd076fe",
+      "Step 11"
+    ],
+    [
+      "6140d2b687a2cd17bac5730c",
+      "Step 12"
+    ],
+    [
+      "6140d36b8b747718b50d4b7a",
+      "Step 13"
+    ],
+    [
+      "6140d3dc359b371b1a21d783",
+      "Step 14"
+    ],
+    [
+      "6140d4bc9db3c81c51a09ab7",
+      "Step 15"
+    ],
+    [
+      "6140d94b5fab7f1d73c9bedb",
+      "Step 16"
+    ],
+    [
+      "6140dc5e13d0c81e7496f182",
+      "Step 17"
+    ],
+    [
+      "6140dd77e0bc5a1f70bd7466",
+      "Step 18"
+    ],
+    [
+      "6140de31b1f5b420410728ff",
+      "Step 19"
+    ],
+    [
+      "6140df547f09402144e40b92",
+      "Step 20"
+    ],
+    [
+      "6140e0d875ec16262f26432b",
+      "Step 21"
+    ],
+    [
+      "6140f4b5c1555a2960de1e5f",
+      "Step 22"
+    ],
+    [
+      "614100d7d335bb2a5ff74f1f",
+      "Step 23"
+    ],
+    [
+      "61410126fa3a6d2b3cda502e",
+      "Step 24"
+    ],
+    [
+      "6141019eadec6d2c6c6f007b",
+      "Step 25"
+    ],
+    [
+      "6141026ec9882f2d39dcf2b8",
+      "Step 26"
+    ],
+    [
+      "6169ab1aaeb4cd1174def700",
+      "Step 27"
+    ],
+    [
+      "6169b1357fcb701bb5efc619",
+      "Step 28"
+    ],
+    [
+      "6169b284950e171d8d0bb16a",
+      "Step 29"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md
new file mode 100644
index 0000000000..f5b2c74a36
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md
@@ -0,0 +1,178 @@
+---
+id: 6140c7e645d8e905819f1dd4
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+Begin with the standard boilerplate. Add your `DOCTYPE` declaration, your `html` element, your `head` and `body` elements.
+
+Add your `meta` element for the correct `charset`, your `title` element, and a `link` element for the `./styles.css` file.
+
+Set the `title` to `CSS Ferris Wheel`.
+
+# --hints--
+
+Your code should contain the `DOCTYPE` reference.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+You should include a space after the `DOCTYPE` reference.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+You should define the document type to be `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+You should close the `DOCTYPE` declaration with a `>` after the type.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+Your `html` element should have an opening tag.
+
+```js
+assert(code.match(/<html\s*>/gi));
+```
+
+Your `html` element should have a closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+Your `html` element should be below the `DOCTYPE` declaration.
+
+```js
+assert(code.match(/^\s*<!DOCTYPE\s+html\s*>[\s\S]*<\s*html\s*>/gi));
+```
+
+You should have an opening `head` tag.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+You should have a closing `head` tag.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+You should have an opening `body` tag.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+You should have a closing `body` tag.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+The `head` and `body` elements should be siblings.
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+The `head` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+The `body` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+Your code should have a `meta` element.
+
+```js
+const meta = document.querySelector('meta');
+assert.exists(meta);
+```
+
+Your `meta` element should have a `charset` attribute with the value `UTF-8`.
+
+```js
+assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/)
+```
+
+Your code should have a `title` element.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+Your project should have a title of `CSS Ferris Wheel`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'css ferris wheel')
+```
+
+Remember, the casing and spelling matter for the title.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'CSS Ferris Wheel');
+```
+
+Your code should have a `link` element.
+
+```js
+assert.match(code, /<link/)
+```
+
+Your `link` element should be a self-closing element.
+
+```js
+assert(code.match(/<link[\w\W\s]+\/>/i));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-002.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-002.md
new file mode 100644
index 0000000000..3e65aa4f6e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-002.md
@@ -0,0 +1,79 @@
+---
+id: 6140c9d35015ae0ba0c250e8
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Add a `div` within your `body` element and give it a `class` of `wheel`.
+
+Inside your new `div`, add six `span` elements with a `class` set to `line`, and six `div` elements with a `class` set to `cabin`.
+
+# --hints--
+
+You should create a new `div` within your `body` element.
+
+```js
+const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
+assert(divs?.length === 1);
+```
+
+Your `div` within your `body` element should have a `class` of `wheel`.
+
+```js
+assert(document.querySelector('body div')?.classList?.contains('wheel'));
+```
+
+Your `.wheel` element should have six `span` elements within.
+
+```js
+assert(document.querySelectorAll('.wheel span')?.length === 6);
+```
+
+Your six `span` elements within the `.wheel` element should have a `class` of `line`.
+
+```js
+const spans = [...document.querySelectorAll('.wheel span')];
+assert(spans?.every(span => span?.classList?.contains('line')));
+assert(document.querySelectorAll('.line')?.length === 6);
+```
+
+Your `.wheel` element should have six `div` elements within.
+
+```js
+assert(document.querySelectorAll('.wheel div')?.length === 6);
+```
+
+Your six `div` elements within the `.wheel` element should have a `class` of `cabin`.
+
+```js
+const divs = [...document.querySelectorAll('.wheel div')];
+assert(divs?.every(div => div?.classList?.contains('cabin')));
+assert(document.querySelectorAll('.cabin')?.length === 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>CSS Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md
new file mode 100644
index 0000000000..d34c9b8b02
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md
@@ -0,0 +1,74 @@
+---
+id: 6140cbeec34e970dfe75e710
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Create a selector for your `.wheel` element. Start by setting the `border` to `2px solid black`, the `border-radius` to `50%`, and the `margin-left` to `50px`.
+
+# --hints--
+
+You should have a `.wheel` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel'));
+```
+
+Your `.wheel` selector should have a `border` property set to `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
+```
+
+Your `.wheel` selector should have a `border-radius` property set to `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
+```
+
+Your `.wheel` selector should have a `margin-left` property set to `50px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md
new file mode 100644
index 0000000000..c4f6e78781
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md
@@ -0,0 +1,72 @@
+---
+id: 6140cd32d018ed0f600eefce
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Set the `position` property of the `.wheel` selector to `absolute`. Set the `height` and `width` both to `55vw`.
+
+# --hints--
+
+Your `.wheel` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute');
+```
+
+Your `.wheel` selector should have a `height` property set to `55vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw');
+```
+
+Your `.wheel` selector should have a `width` property set to `55vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md
new file mode 100644
index 0000000000..d706fde28c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md
@@ -0,0 +1,68 @@
+---
+id: 617ace7d831f9c16a569b38a
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Give your `.wheel` selector a `max-height` and `max-width` property both set to `500px`.
+
+# --hints--
+
+Your `.wheel` selector should have a `max-height` property set to `500px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px');
+```
+
+Your `.wheel` selector should have a `max-width` property set to `500px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  height: 55vw;
+  width: 55vw;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md
new file mode 100644
index 0000000000..cdb1da75ef
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md
@@ -0,0 +1,85 @@
+---
+id: 6140cdebd39d6a101e747529
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Create a selector for your `.line` elements. Start by setting the `background-color` to `black`, the `width` to `50%`, and the `height` to `2px`.
+
+# --hints--
+
+You should have a `.line` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line'));
+```
+
+Your `.line` selector should have a `background-color` property set to `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black");
+```
+
+Your `.line` selector should have a `width` property set to `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%");
+```
+
+Your `.line` selector should have a `height` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md
new file mode 100644
index 0000000000..7dbd5c5e7a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md
@@ -0,0 +1,83 @@
+---
+id: 6140cfc08ca9c5128c3e6478
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Set the `.line` selector's `position` property to `absolute`, the `left` property to `50%`, and the `top` property to `50%`.
+
+# --hints--
+
+Your `.line` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute');
+```
+
+Your `.line` selector should have a `left` property set to `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%');
+```
+
+Your `.line` selector should have a `top` property set to `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+--fcc-editable-region--
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md
new file mode 100644
index 0000000000..d389fa62c7
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md
@@ -0,0 +1,77 @@
+---
+id: 6140d0069049f5139d78da40
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `transform-origin` property is used to set the point around which a CSS transformation is applied. For example, when performing a `rotate` (which you will do later in this project), the `transform-origin` determines around which point the element is rotated.
+
+Give the `.line` selector a `transform-origin` property of `0% 0%`. This will offset the origin point by `0%` from the left and `0%` from the top, setting it to the top left corner of the element.
+
+# --hints--
+
+Your `.line` selector should have a `transform-origin` property set to `0% 0%`.
+
+```js
+const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin;
+assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+--fcc-editable-region--
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md
new file mode 100644
index 0000000000..c84f05fcdc
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md
@@ -0,0 +1,85 @@
+---
+id: 6140d10d50636e14695013b2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Create a selector to target your second `.line` element. Set the `transform` property to `rotate(60deg)`.
+
+Remember that the `transform` property allows you to manipulate the shape of an element. In this case, using the `rotate(60deg)` value will rotate the element around its `transform-origin` point by 60 degrees clockwise.
+
+# --hints--
+
+You should create a `.line:nth-of-type(2)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
+```
+
+Your `.line:nth-of-type(2)` selector should have a `transform` property set to `rotate(60deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md
new file mode 100644
index 0000000000..2a37438fea
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md
@@ -0,0 +1,126 @@
+---
+id: 6140d1a351e88f159ed54fca
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Using the same pattern, create a separate selector for the third `.line`, the fourth `.line`, the fifth `.line`, and the sixth `.line`.
+
+Set the `transform` property for the third `.line` to `rotate(120deg)`, the fourth to `rotate(180deg)`, the fifth to `rotate(240deg)`, and the sixth to `rotate(300deg)`.
+
+# --hints--
+
+You should create a `.line:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
+```
+
+Your `.line:nth-of-type(3)` selector should have a `transform` property set to `rotate(120deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)');
+```
+
+You should create a `.line:nth-of-type(4)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
+```
+
+Your `.line:nth-of-type(4)` selector should have a `transform` property set to `rotate(180deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)');
+```
+
+You should create a `.line:nth-of-type(5)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
+```
+
+Your `.line:nth-of-type(5)` selector should have a `transform` property set to `rotate(240deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)');
+```
+
+You should create a `.line:nth-of-type(6)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
+```
+
+Your `.line:nth-of-type(6)` selector should have a `transform` property set to `rotate(300deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md
new file mode 100644
index 0000000000..8cad6e9670
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md
@@ -0,0 +1,111 @@
+---
+id: 6140d263016325162fd076fe
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Create a `.cabin` selector. Set the `background-color` to `red`, the `width` to `20%`, and the `height` to `20%`.
+
+# --hints--
+
+You should have a `.cabin` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin'));
+```
+
+Your `.cabin` selector should have a `background-color` property set to `red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red');
+```
+
+Your `.cabin` selector should have a `width` property set to `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%');
+```
+
+Your `.cabin` selector should have a `height` property set to `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md
new file mode 100644
index 0000000000..8d5432fff7
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md
@@ -0,0 +1,103 @@
+---
+id: 6140d2b687a2cd17bac5730c
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.cabin` a `position` of `absolute`, and a `border` of `2px solid`.
+
+# --hints--
+
+Your `.cabin` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute');
+```
+
+Your `.cabin` selector should have a `border` property set to `2px solid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md
new file mode 100644
index 0000000000..77029595c0
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md
@@ -0,0 +1,100 @@
+---
+id: 6140d36b8b747718b50d4b7a
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Set the `.cabin` to have a `transform-origin` property of `50% 0%`. This will set the origin point to be offset `50%` from the left and `0%` from the top, placing it in the middle of the top edge of the element.
+
+# --hints--
+
+Your `.cabin` selector should have a `transform-origin` property set to `50% 0%`.
+
+```js
+const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin;
+assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md
new file mode 100644
index 0000000000..84c37cc07a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md
@@ -0,0 +1,114 @@
+---
+id: 6140d3dc359b371b1a21d783
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to position the cabins around the wheel. Select the first `.cabin` element. Set the `right` property to `-8.5%` and the `top` property to `50%`.
+
+# --hints--
+
+You should have a `.cabin:nth-of-type(1)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)'));
+```
+
+Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.right === '-8.5%');
+```
+
+Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.top === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md
new file mode 100644
index 0000000000..1b323fa79a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md
@@ -0,0 +1,196 @@
+---
+id: 6140d4bc9db3c81c51a09ab7
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Continuing the pattern, select the following `.cabin` elements and apply the specific rules to them:
+
+- The second `.cabin` should have the `right` property set to `17%` and the `top` property set to `93.5%`.
+- The third `.cabin` should have the `right` property set to `67%` and the `top` property set to `93.5%`.
+- The fourth `.cabin` should have the `left` property set to `-8.5%` and the `top` property set to `50%`.
+- The fifth `.cabin` should have the `left` property set to `17%` and the `top` property set to `7%`.
+- The sixth `.cabin` should have the `right` property set to `17%` and the `top` property set to `7%`.
+
+# --hints--
+
+You should have a `.cabin:nth-of-type(2)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)'));
+```
+
+Your `.cabin:nth-of-type(2)` selector should have a `right` property set to `17%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%');
+```
+
+Your `.cabin:nth-of-type(2)` selector should have a `top` property set to `93.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%');
+```
+
+You should have a `.cabin:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)'));
+```
+
+Your `.cabin:nth-of-type(3)` selector should have a `right` property set to `67%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%');
+```
+
+Your `.cabin:nth-of-type(3)` selector should have a `top` property set to `93.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%');
+```
+
+You should have a `.cabin:nth-of-type(4)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)'));
+```
+
+Your `.cabin:nth-of-type(4)` selector should have a `left` property set to `-8.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%');
+```
+
+Your `.cabin:nth-of-type(4)` selector should have a `top` property set to `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%');
+```
+
+You should have a `.cabin:nth-of-type(5)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)'));
+```
+
+Your `.cabin:nth-of-type(5)` selector should have a `left` property set to `17%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%');
+```
+
+Your `.cabin:nth-of-type(5)` selector should have a `top` property set to `7%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%');
+```
+
+You should have a `.cabin:nth-of-type(6)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)'));
+```
+
+Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.right === '17%');
+```
+
+Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.top === '7%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md
new file mode 100644
index 0000000000..0146daa3c5
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md
@@ -0,0 +1,137 @@
+---
+id: 6140d94b5fab7f1d73c9bedb
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The `@keyframes` at-rule is used to define the flow of a CSS animation. Within the `@keyframes` rule, you can create selectors for specific points in the animation sequence, such as `0%` or `25%`, or use `from` and `to` to define the start and end of the sequence.
+
+`@keyframes` rules require a name to be assigned to them, which you use in other rules to reference. For example, the `@keyframes freeCodeCamp { }` rule would be named `freeCodeCamp`.
+
+Time to start animating. Create a `@keyframes` rule named `wheel`.
+
+# --hints--
+
+You should have a `@keyframes` rule.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);
+```
+
+Your new `@keyframes` rule should be named `wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md
new file mode 100644
index 0000000000..777aa7a95d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md
@@ -0,0 +1,139 @@
+---
+id: 6140dc5e13d0c81e7496f182
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+You now need to define how your animation should start. To do this, create a `0%` rule within your `@keyframes wheel` rule. The properties you set in this nested selector will apply at the beginning of your animation.
+
+As an example, this would be a `12%` rule:
+
+```css
+@keyframes freecodecamp {
+  12% {
+    color: green;
+  }
+}
+```
+
+# --hints--
+
+Your `@keyframes wheel` rule should have a `0%` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md
new file mode 100644
index 0000000000..517e11c407
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md
@@ -0,0 +1,131 @@
+---
+id: 6140dd77e0bc5a1f70bd7466
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Give the `0%` rule a `transform` property set to `rotate(0deg)`. This will start the animation with no rotation.
+
+# --hints--
+
+Your `0%` selector should have a `transform` property set to `rotate(0deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+   0% {
+
+   }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md
new file mode 100644
index 0000000000..27baf32c8b
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md
@@ -0,0 +1,146 @@
+---
+id: 6140de31b1f5b420410728ff
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Now give the `@keyframes wheel` rule a `100%` selector. Within that, set the `transform` to `rotate(360deg)`. By doing this, your animation will now complete a full rotation.
+
+# --hints--
+
+Your `@keyframes wheel` rule should have a `100%` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules
+assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+```
+
+Your `100%` selector should come after your `0%` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%')
+```
+
+Your `100%` selector should have a `transform` property set to `rotate(360deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)')
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md
new file mode 100644
index 0000000000..e415eca8c4
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md
@@ -0,0 +1,142 @@
+---
+id: 6140df547f09402144e40b92
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+The `animation-name` property is used to link a `@keyframes` rule to a CSS selector. The value of this property should match the name of the `@keyframes` rule. Give your `.wheel` selector an `animation-name` property set to `wheel`.
+
+The `animation-duration` property is used to set how long the animation should sequence to complete. The time should be specified in either seconds (`s`) or milliseconds (`ms`). Set your `.wheel` selector to have an `animation-duration` property of `10s`.
+
+# --hints--
+
+Your `.wheel` selector should have an `animation-name` property set to `wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel');
+```
+
+Your `.wheel` selector should have an `animation-duration` property set to `10s`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+--fcc-editable-region--
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md
new file mode 100644
index 0000000000..6cc3705a6a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md
@@ -0,0 +1,144 @@
+---
+id: 6140e0d875ec16262f26432b
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `animation-iteration-count` property sets how many times your animation should repeat. This can be set to a number, or to `infinite` to indefinitely repeat the animation. Your Ferris wheel should never stop, so set the `.wheel` selector to have an `animation-iteration-count` of `infinite`.
+
+The `animation-timing-function` property sets how the animation should progress over time. There are a few different values for this property, but you want the Ferris wheel animation to run at the same rate from start to finish. Set the `animation-timing-function` to `linear` in your `.wheel` selector.
+
+# --hints--
+
+Your `.wheel` selector should have an `animation-iteration-count` property set to `infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite');
+```
+
+Your `.wheel` selector should have an `animation-timing-function` property set to `linear`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+}
+--fcc-editable-region--
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md
new file mode 100644
index 0000000000..a9c198c5e0
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md
@@ -0,0 +1,191 @@
+---
+id: 6140f4b5c1555a2960de1e5f
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Create another `@keyframes` rule with the name `cabins`. Use the same properties as your `@keyframes wheel`, copying both the `0%` and `100%` rules, but set the `transform` property of the `100%` selector to `rotate(-360deg)`.
+
+# --hints--
+
+You should have a `@keyframes` rule.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2);
+```
+
+Your new `@keyframes` rule should be named `cabins`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes');
+assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins');
+```
+
+Your new `@keyframes` rule should come after your `@keyframes wheel` rule.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins');
+```
+
+You should not change the name of your `@keyframes wheel` rule.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+```
+
+Your `@keyframes cabins` rule should have a `0%` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%');
+```
+
+Your `0%` selector should have a `transform` property set to `rotate(0deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+```
+
+Your `@keyframes cabins` rule should have a `100%` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules
+assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+```
+
+Your `100%` selector should come after your `0%` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%')
+```
+
+Your `100%` selector should have a `transform` property set to `rotate(-360deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)')
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md
new file mode 100644
index 0000000000..f1f6c9cebf
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md
@@ -0,0 +1,149 @@
+---
+id: 614100d7d335bb2a5ff74f1f
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+With your `.wheel` selector, you created four different properties to control the animation. For your `.cabin` selector, you can use the `animation` property to set these all at once.
+
+Set the `animation` property of the `.cabin` rule to `cabins 10s linear infinite`. This will set the `animation-name`, `animation-duration`, `animation-timing-function`, and `animation-iteration-count` properties in that order.
+
+# --hints--
+
+Your `.cabin` selector should have an `animation` property set to `cabins 10s linear infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+--fcc-editable-region--
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md
new file mode 100644
index 0000000000..7d03c3c947
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md
@@ -0,0 +1,151 @@
+---
+id: 61410126fa3a6d2b3cda502e
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. This setting will tell the animation to start and end at a slower pace, but move more quickly in the middle of the cycle.
+
+Replace `linear` to `ease-in-out` in the `.cabin` selector.
+
+# --hints--
+
+Your `.cabin` selector should have an `animation` property set to `cabins 10s ease-in-out infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s linear infinite;
+}
+--fcc-editable-region--
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md
new file mode 100644
index 0000000000..10c0ef0710
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md
@@ -0,0 +1,148 @@
+---
+id: 6141019eadec6d2c6c6f007b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+You can use `@keyframes` rules to control more than just the transformation of an element. In the `0%` selector of your `@keyframes cabins`, set the `background-color` to `yellow`.
+
+# --hints--
+
+Your `0%` selector should have a `background-color` property set to `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md
new file mode 100644
index 0000000000..5487ae229a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md
@@ -0,0 +1,291 @@
+---
+id: 6141026ec9882f2d39dcf2b8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Between the `0%` and `100%` selectors, add a `50%` selector. This will apply in the middle of the animation cycle. Set the `background-color` to `purple`.
+
+# --hints--
+
+You should create a new `50%` selector in your `@keyframes cabins` rule.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%'); 
+```
+
+Your `50%` selector should be between your `0%` and `100%` selectors.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%');
+```
+
+Your `50%` selector should have a `background-color` property set to `purple`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+    background-color: yellow;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+    background-color: yellow;
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+```
+
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md
new file mode 100644
index 0000000000..cd388e2de6
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md
@@ -0,0 +1,154 @@
+---
+id: 6169ab1aaeb4cd1174def700
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Because the animation is on an infinite loop and the start and end colors are not the same, the transition appears jerky when it switches back to yellow from red. 
+
+To start fixing this, remove the `background-color` from your `0%` selector.
+
+# --hints--
+
+Your `0%` selector should not have a `background-color` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+    background-color: yellow;
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md
new file mode 100644
index 0000000000..8e014b6822
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md
@@ -0,0 +1,164 @@
+---
+id: 6169b1357fcb701bb5efc619
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Create a new `25%` selector between your `0%` and `50%` selectors. Give this new selector the `background-color` property set to `yellow`.
+
+# --hints--
+
+You should create a new `25%` selector in your `@keyframes cabins` rule.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%');
+```
+
+Your `25%` selector should be between your `0%` and `50%` selectors.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%');
+```
+
+Your `25%` selector should have a `background-color` property set to `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md
new file mode 100644
index 0000000000..c92ad27e87
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md
@@ -0,0 +1,169 @@
+---
+id: 6169b284950e171d8d0bb16a
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Finally, create a new `75%` selector between your `50%` and `100%` selectors. Give this new selector a `background-color` property set to `yellow.`
+
+With that, your animation is much smoother and your Ferris wheel is complete.
+
+# --hints--
+
+You should create a new `75%` selector in your `@keyframes cabins` rule.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%');
+```
+
+Your `75%` selector should be between your `50%` and `100%` selectors.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%');
+```
+
+Your `75%` selector should have a `background-color` property set to `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title> Learn CSS Animations by Building a Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json
index ab1014d7aa..eb7d9ded55 100644
--- a/utils/preformatted-block-names.json
+++ b/utils/preformatted-block-names.json
@@ -30,5 +30,6 @@
   "registration-form": "Registration Form",
   "css-photo-gallery": "CSS Photo Gallery",
   "css-grid-magazine": "CSS Grid Magazine",
-  "css-nutrition-label": "CSS Nutrition Label"
+  "css-nutrition-label": "CSS Nutrition Label",
+  "css-ferris-wheel": "CSS Ferris Wheel"
 }