diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 253dcf84566..a2a02f2f9be 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -2417,7 +2417,13 @@
"In these lecture videos, you will learn about animations and accessibility."
]
},
- "dpaq": { "title": "120", "intro": [] },
+ "workshop-ferris-wheel": {
+ "title": "Build an Animated Ferris Wheel",
+ "intro": [
+ "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.",
+ "In this workshop, you'll build a Ferris wheel. You'll practice how to use CSS to animate elements, transform them, and adjust their speed."
+ ]
+ },
"lab-moon-orbit": {
"title": "Build a Moon Orbit",
"intro": [
diff --git a/client/src/pages/learn/full-stack-developer/workshop-ferris-wheel/index.md b/client/src/pages/learn/full-stack-developer/workshop-ferris-wheel/index.md
new file mode 100644
index 00000000000..4bb78dac71f
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/workshop-ferris-wheel/index.md
@@ -0,0 +1,32 @@
+---
+title: Introduction to the Build an Animated Ferris Wheel
+block: workshop-ferris-wheel
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build an Animated Ferris Wheel
+
+Have you ever wanted to bring your web pages to life with fun and interactive animations? CSS animation allows you to add movement and interactivity to your web pages, making them more engaging and dynamic. It’s like adding a sprinkle of magic to your design!
+
+You will practice techniques like using CSS `keyframes` to control how your elements behave.
+
+```css
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+```
+
+And how to apply those animations to an element:
+
+```css
+.wheel {
+ animation: spin 10s linear infinite;
+}
+```
+
+Ready to create some enchanting animations?
diff --git a/curriculum/challenges/_meta/workshop-ferris-wheel/meta.json b/curriculum/challenges/_meta/workshop-ferris-wheel/meta.json
new file mode 100644
index 00000000000..bf9692f453d
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-ferris-wheel/meta.json
@@ -0,0 +1,129 @@
+{
+ "name": "Build an Animated Ferris Wheel",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "workshop-ferris-wheel",
+ "superBlock": "full-stack-developer",
+ "blockType": "workshop",
+ "blockLayout": "challenge-grid",
+ "challengeOrder": [
+ {
+ "id": "6140c7e645d8e905819f1dd4",
+ "title": "Step 1"
+ },
+ {
+ "id": "6140c9d35015ae0ba0c250e8",
+ "title": "Step 2"
+ },
+ {
+ "id": "6140cbeec34e970dfe75e710",
+ "title": "Step 3"
+ },
+ {
+ "id": "6140cd32d018ed0f600eefce",
+ "title": "Step 4"
+ },
+ {
+ "id": "617ace7d831f9c16a569b38a",
+ "title": "Step 5"
+ },
+ {
+ "id": "6140cdebd39d6a101e747529",
+ "title": "Step 6"
+ },
+ {
+ "id": "6140cfc08ca9c5128c3e6478",
+ "title": "Step 7"
+ },
+ {
+ "id": "6140d0069049f5139d78da40",
+ "title": "Step 8"
+ },
+ {
+ "id": "6140d10d50636e14695013b2",
+ "title": "Step 9"
+ },
+ {
+ "id": "6140d1a351e88f159ed54fca",
+ "title": "Step 10"
+ },
+ {
+ "id": "6140d263016325162fd076fe",
+ "title": "Step 11"
+ },
+ {
+ "id": "6140d2b687a2cd17bac5730c",
+ "title": "Step 12"
+ },
+ {
+ "id": "6140d36b8b747718b50d4b7a",
+ "title": "Step 13"
+ },
+ {
+ "id": "6140d3dc359b371b1a21d783",
+ "title": "Step 14"
+ },
+ {
+ "id": "6140d4bc9db3c81c51a09ab7",
+ "title": "Step 15"
+ },
+ {
+ "id": "6140d94b5fab7f1d73c9bedb",
+ "title": "Step 16"
+ },
+ {
+ "id": "6140dc5e13d0c81e7496f182",
+ "title": "Step 17"
+ },
+ {
+ "id": "6140dd77e0bc5a1f70bd7466",
+ "title": "Step 18"
+ },
+ {
+ "id": "6140de31b1f5b420410728ff",
+ "title": "Step 19"
+ },
+ {
+ "id": "6140df547f09402144e40b92",
+ "title": "Step 20"
+ },
+ {
+ "id": "6140e0d875ec16262f26432b",
+ "title": "Step 21"
+ },
+ {
+ "id": "6140f4b5c1555a2960de1e5f",
+ "title": "Step 22"
+ },
+ {
+ "id": "614100d7d335bb2a5ff74f1f",
+ "title": "Step 23"
+ },
+ {
+ "id": "61410126fa3a6d2b3cda502e",
+ "title": "Step 24"
+ },
+ {
+ "id": "6141019eadec6d2c6c6f007b",
+ "title": "Step 25"
+ },
+ {
+ "id": "6141026ec9882f2d39dcf2b8",
+ "title": "Step 26"
+ },
+ {
+ "id": "6169ab1aaeb4cd1174def700",
+ "title": "Step 27"
+ },
+ {
+ "id": "6169b1357fcb701bb5efc619",
+ "title": "Step 28"
+ },
+ {
+ "id": "6169b284950e171d8d0bb16a",
+ "title": "Step 29"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c7e645d8e905819f1dd4.md
new file mode 100644
index 00000000000..3794c902435
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c7e645d8e905819f1dd4.md
@@ -0,0 +1,71 @@
+---
+id: 6140c7e645d8e905819f1dd4
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+To start, add a `link` element for the `./styles.css` file.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.match(code, / link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset?.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ Ferris Wheel
+
+
+--fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.md
new file mode 100644
index 00000000000..05b718b60f2
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.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
+
+
+
+
+ Ferris Wheel
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cbeec34e970dfe75e710.md
new file mode 100644
index 00000000000..06b1753386e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cbeec34e970dfe75e710.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cd32d018ed0f600eefce.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cd32d018ed0f600eefce.md
new file mode 100644
index 00000000000..a75e568eaae
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cd32d018ed0f600eefce.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cdebd39d6a101e747529.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cdebd39d6a101e747529.md
new file mode 100644
index 00000000000..808f24f9992
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cdebd39d6a101e747529.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140cfc08ca9c5128c3e6478.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cfc08ca9c5128c3e6478.md
new file mode 100644
index 00000000000..1305bdbd4bb
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cfc08ca9c5128c3e6478.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d0069049f5139d78da40.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d0069049f5139d78da40.md
new file mode 100644
index 00000000000..308878a667c
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d0069049f5139d78da40.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 you apply a `rotate` transformation (as you'll 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 at `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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d10d50636e14695013b2.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d10d50636e14695013b2.md
new file mode 100644
index 00000000000..efde2c026c8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d10d50636e14695013b2.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d1a351e88f159ed54fca.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d1a351e88f159ed54fca.md
new file mode 100644
index 00000000000..52f330a33ca
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d1a351e88f159ed54fca.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d263016325162fd076fe.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d263016325162fd076fe.md
new file mode 100644
index 00000000000..ddfe9fe01b7
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d263016325162fd076fe.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d36b8b747718b50d4b7a.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d36b8b747718b50d4b7a.md
new file mode 100644
index 00000000000..bf9b40e4793
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d36b8b747718b50d4b7a.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d3dc359b371b1a21d783.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d3dc359b371b1a21d783.md
new file mode 100644
index 00000000000..428aea11eaf
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d3dc359b371b1a21d783.md
@@ -0,0 +1,117 @@
+---
+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
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s)
+assert.exists(def('.cabin:first-of-type') || def('.cabin:nth-of-type(1)'));
+```
+
+Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`.
+
+```js
+const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
+assert.equal(right('.cabin:nth-of-type(1)') || right('.cabin:first-of-type'), '-8.5%');
+```
+
+Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`.
+
+```js
+const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
+assert.equal(top('.cabin:nth-of-type(1)') || top('.cabin:first-of-type'),'50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d4bc9db3c81c51a09ab7.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d4bc9db3c81c51a09ab7.md
new file mode 100644
index 00000000000..e2c5e9636ab
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d4bc9db3c81c51a09ab7.md
@@ -0,0 +1,199 @@
+---
+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
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s)
+assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type'));
+```
+
+Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`.
+
+```js
+const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
+assert.equal(right('.cabin:nth-of-type(6)') || right('.cabin:last-of-type'),'17%');
+```
+
+Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`.
+
+```js
+const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
+assert.equal(top('.cabin:nth-of-type(6)') || top('.cabin:last-of-type'),'7%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140d94b5fab7f1d73c9bedb.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d94b5fab7f1d73c9bedb.md
new file mode 100644
index 00000000000..f9a32b68dbe
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d94b5fab7f1d73c9bedb.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
+
+
+
+
+ Ferris Wheel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/25-front-end-development/workshop-ferris-wheel/6140dc5e13d0c81e7496f182.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dc5e13d0c81e7496f182.md
new file mode 100644
index 00000000000..c1878bd3ab9
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dc5e13d0c81e7496f182.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
+
+
+
+
+ Ferris Wheel
+
+
+
+