diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 83c39122c31..0f18436d98c 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -2136,7 +2136,13 @@
]
},
"rxzq": { "title": "97", "intro": [] },
- "xobq": { "title": "98", "intro": [] },
+ "workshop-cat-painting": {
+ "title": "Build a Cat Painting",
+ "intro": [
+ "Mastering CSS positioning is essential for creating visually appealing and responsive web layouts.",
+ "In this workshop, you will build a cat painting. You'll learn about how to work with absolute positioning, the z-index property, and the transform property."
+ ]
+ },
"lab-house-painting": {
"title": "Build a House Painting",
"intro": ["For this lab, you will build a house painting using CSS."]
diff --git a/client/src/pages/learn/front-end-development/workshop-cat-painting/index.md b/client/src/pages/learn/front-end-development/workshop-cat-painting/index.md
new file mode 100644
index 00000000000..e3b0ce54942
--- /dev/null
+++ b/client/src/pages/learn/front-end-development/workshop-cat-painting/index.md
@@ -0,0 +1,11 @@
+---
+title: Introduction to the Build a Cat Painting
+block: workshop-cat-painting
+superBlock: front-end-development
+---
+
+## Introduction to the Build a Cat Painting
+
+Mastering CSS positioning is essential for creating visually appealing and responsive web layouts.
+
+In this workshop, you will build a cat painting. You'll learn about how to work with absolute positioning, the z-index property, and the transform property.
diff --git a/curriculum/challenges/_meta/workshop-cat-painting/meta.json b/curriculum/challenges/_meta/workshop-cat-painting/meta.json
new file mode 100644
index 00000000000..181ae62d52b
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-cat-painting/meta.json
@@ -0,0 +1,334 @@
+{
+ "name": "Build a Cat Painting",
+ "blockType": "workshop",
+ "blockLayout": "challenge-grid",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "workshop-cat-painting",
+ "order": 98,
+ "superBlock": "front-end-development",
+ "challengeOrder": [
+ {
+ "id": "646c48df8674cf2b91020ecc",
+ "title": "Step 1"
+ },
+ {
+ "id": "647d855ac12cd436059acd39",
+ "title": "Step 2"
+ },
+ {
+ "id": "646c586be7180e40ddf74ff6",
+ "title": "Step 3"
+ },
+ {
+ "id": "646c59e942f35541923104bf",
+ "title": "Step 4"
+ },
+ {
+ "id": "646c5d7057c45f432fcdd46c",
+ "title": "Step 5"
+ },
+ {
+ "id": "646c5ace05e4be4211407935",
+ "title": "Step 6"
+ },
+ {
+ "id": "646c5e727e56e743c9aed4a1",
+ "title": "Step 7"
+ },
+ {
+ "id": "6476f5c17f99146071ee884c",
+ "title": "Step 8"
+ },
+ {
+ "id": "6476f7a4827bcc61682f2347",
+ "title": "Step 9"
+ },
+ {
+ "id": "6476fb7cbaafa36d65e9cf35",
+ "title": "Step 10"
+ },
+ {
+ "id": "6476fc5cf14b276e6d04e82a",
+ "title": "Step 11"
+ },
+ {
+ "id": "6476fd4213318f6ee211028a",
+ "title": "Step 12"
+ },
+ {
+ "id": "64770351e8586671ec0911f0",
+ "title": "Step 13"
+ },
+ {
+ "id": "6477062778c85972eb648030",
+ "title": "Step 14"
+ },
+ {
+ "id": "649353647c44ef4867ab4935",
+ "title": "Step 15"
+ },
+ {
+ "id": "647d821de0d97b3283c72b36",
+ "title": "Step 16"
+ },
+ {
+ "id": "646c5ffef5598d449b52ec12",
+ "title": "Step 17"
+ },
+ {
+ "id": "646ce8bb4b35544d501c7184",
+ "title": "Step 18"
+ },
+ {
+ "id": "646ce9d790d2a44de5f99e04",
+ "title": "Step 19"
+ },
+ {
+ "id": "646ceb843412c74edee27a79",
+ "title": "Step 20"
+ },
+ {
+ "id": "6676a8b01e56ec1a1e07c202",
+ "title": "Step 21"
+ },
+ {
+ "id": "6676a8a8d9861319ee901a90",
+ "title": "Step 22"
+ },
+ {
+ "id": "646cecc9eb5c4f4f73dafd07",
+ "title": "Step 23"
+ },
+ {
+ "id": "646cef0c2b98915094df7099",
+ "title": "Step 24"
+ },
+ {
+ "id": "646cf1206cac5f51804f49cf",
+ "title": "Step 25"
+ },
+ {
+ "id": "646cf2249f02ca5233d9af7c",
+ "title": "Step 26"
+ },
+ {
+ "id": "646cf48d8f8e1f535a1821d3",
+ "title": "Step 27"
+ },
+ {
+ "id": "646cf6cbca98e258da65c979",
+ "title": "Step 28"
+ },
+ {
+ "id": "646cf88aa884405a11ea5bcc",
+ "title": "Step 29"
+ },
+ {
+ "id": "646cfc2b8e6fe95c20a819d5",
+ "title": "Step 30"
+ },
+ {
+ "id": "646cfd853634255d02b64cc1",
+ "title": "Step 31"
+ },
+ {
+ "id": "646cfde6ac612e5d60391f50",
+ "title": "Step 32"
+ },
+ {
+ "id": "646dd556d524bc61c0139bd6",
+ "title": "Step 33"
+ },
+ {
+ "id": "646dd6f9caa862627dd87772",
+ "title": "Step 34"
+ },
+ {
+ "id": "646dd7cfd0cfac630c1dd520",
+ "title": "Step 35"
+ },
+ {
+ "id": "646dd8c79ec23463a3d0e356",
+ "title": "Step 36"
+ },
+ {
+ "id": "646dd9d9a729916460724f16",
+ "title": "Step 37"
+ },
+ {
+ "id": "646ddab8afd73764f5241bbf",
+ "title": "Step 38"
+ },
+ {
+ "id": "646ddb61ff08366570cc5902",
+ "title": "Step 39"
+ },
+ {
+ "id": "646ddd3f9f97a0667b964bdb",
+ "title": "Step 40"
+ },
+ {
+ "id": "646dde7dc20dc167489faa69",
+ "title": "Step 41"
+ },
+ {
+ "id": "646ddf888632fa67f1180940",
+ "title": "Step 42"
+ },
+ {
+ "id": "646de5dc8988076a1d992afd",
+ "title": "Step 43"
+ },
+ {
+ "id": "646de6a97b50a86ac487de86",
+ "title": "Step 44"
+ },
+ {
+ "id": "646de7b64467e96b7d35b5cd",
+ "title": "Step 45"
+ },
+ {
+ "id": "646de8478d6f796bfbdccfb2",
+ "title": "Step 46"
+ },
+ {
+ "id": "646de8d204a3426c7d184372",
+ "title": "Step 47"
+ },
+ {
+ "id": "646dea1c98c2426d43a705c3",
+ "title": "Step 48"
+ },
+ {
+ "id": "646deb169847f86df0f95bfc",
+ "title": "Step 49"
+ },
+ {
+ "id": "646dec359bef3b7811fba5a6",
+ "title": "Step 50"
+ },
+ {
+ "id": "646dedbcba062079128b2ecc",
+ "title": "Step 51"
+ },
+ {
+ "id": "646def5e863abf7a14501421",
+ "title": "Step 52"
+ },
+ {
+ "id": "646df03c8f79337ab46f148b",
+ "title": "Step 53"
+ },
+ {
+ "id": "646df0cf26413a7b35e4b8b3",
+ "title": "Step 54"
+ },
+ {
+ "id": "646df1d1aa4ae57bdf1869c4",
+ "title": "Step 55"
+ },
+ {
+ "id": "646dffd8ce9ac77ec1906f2e",
+ "title": "Step 56"
+ },
+ {
+ "id": "64a2687ef267e5934a2f93e3",
+ "title": "Step 57"
+ },
+ {
+ "id": "64a26ac5540c5493f4641f10",
+ "title": "Step 58"
+ },
+ {
+ "id": "646f0417322c0e04983a5149",
+ "title": "Step 59"
+ },
+ {
+ "id": "646f08293804a30685533c6f",
+ "title": "Step 60"
+ },
+ {
+ "id": "646f09293eb3230723a62f77",
+ "title": "Step 61"
+ },
+ {
+ "id": "646f0c9a1e3360092d1bbd33",
+ "title": "Step 62"
+ },
+ {
+ "id": "646f0ce5737243098ad6e494",
+ "title": "Step 63"
+ },
+ {
+ "id": "646f0ef13604420a8744f7d4",
+ "title": "Step 64"
+ },
+ {
+ "id": "646f0f7c5933560af8e7e380",
+ "title": "Step 65"
+ },
+ {
+ "id": "646f102bf87b350b593baa72",
+ "title": "Step 66"
+ },
+ {
+ "id": "646f107abb89d00bb99f387a",
+ "title": "Step 67"
+ },
+ {
+ "id": "64a3bcbc83e574b58c8ed048",
+ "title": "Step 68"
+ },
+ {
+ "id": "646f12da0b4c5d0ca162834a",
+ "title": "Step 69"
+ },
+ {
+ "id": "646f135eab69d90d0c6d4e9b",
+ "title": "Step 70"
+ },
+ {
+ "id": "646f159b2cffb21150b927cb",
+ "title": "Step 71"
+ },
+ {
+ "id": "646f164bf100dd11d226161f",
+ "title": "Step 72"
+ },
+ {
+ "id": "646f1764e2f1d212ba9785a7",
+ "title": "Step 73"
+ },
+ {
+ "id": "646f1802a09a171332e14630",
+ "title": "Step 74"
+ },
+ {
+ "id": "646f4d6c42dc5f214f4e7444",
+ "title": "Step 75"
+ },
+ {
+ "id": "646f4e46e81f7021d5fd9c1d",
+ "title": "Step 76"
+ },
+ {
+ "id": "646f4f6a14e3c522d130a0d2",
+ "title": "Step 77"
+ },
+ {
+ "id": "646f4fe12b7985232bf475a5",
+ "title": "Step 78"
+ },
+ {
+ "id": "646f507e4d1cd323f17db4fc",
+ "title": "Step 79"
+ },
+ {
+ "id": "646f516dbfc1342495515625",
+ "title": "Step 80"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
new file mode 100644
index 00000000000..a0ab3e1edc8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
@@ -0,0 +1,50 @@
+---
+id: 646c48df8674cf2b91020ecc
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You have been provided with a basic boilerplate. Begin by adding a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`.
+
+# --hints--
+
+Your should have a `link` element.
+
+```js
+assert.exists(document.querySelector("head>link"));
+```
+
+Your `link` element should have a `rel` and `href` attribute set to `stylesheet` and `./styles.css`.
+
+```js
+const link = document.querySelector("head>link");
+assert.equal(link?.getAttribute("rel"), "stylesheet");
+const href = link?.getAttribute("data-href");
+console.log(href)
+assert(href === "./styles.css" || href === "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+--fcc-editable-region--
+
+
+ fCC Cat Painting
+
+--fcc-editable-region--
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c586be7180e40ddf74ff6.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c586be7180e40ddf74ff6.md
new file mode 100644
index 00000000000..4fa9348ffa8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c586be7180e40ddf74ff6.md
@@ -0,0 +1,51 @@
+---
+id: 646c586be7180e40ddf74ff6
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Give your `body` element a `background-color` of `#c9d2fc`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `background-color` property set to `#c9d2fc`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c59e942f35541923104bf.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c59e942f35541923104bf.md
new file mode 100644
index 00000000000..d483fe5c8f8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c59e942f35541923104bf.md
@@ -0,0 +1,66 @@
+---
+id: 646c59e942f35541923104bf
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`.
+
+# --hints--
+
+You should have a `main` element.
+
+```js
+assert(document.querySelectorAll('main').length === 1);
+```
+
+You should have a `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 1);
+```
+
+Your `div` element should have the class `cat-head`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('class') === 'cat-head');
+```
+
+Your `div` element should be inside your `main` tag.
+
+```js
+assert(document.querySelectorAll('main div').length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5ace05e4be4211407935.md
new file mode 100644
index 00000000000..56cb33349e6
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5ace05e4be4211407935.md
@@ -0,0 +1,83 @@
+---
+id: 646c5ace05e4be4211407935
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+To see the `.cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`.
+
+You might not notice the difference between these two colors, but they are there.
+
+# --hints--
+
+Your `.cat-head` selector should have a `background` property.
+
+```js
+assert.match(code, /background:/)
+```
+
+Your `background` property should use the `linear-gradient` function.
+
+```js
+assert.match(code, /background:\s*linear-gradient\(/)
+```
+
+Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`.
+
+```js
+const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
+const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1];
+assert.equal(firstGradient,'(94,94,94)85%,');
+```
+
+Your `linear-gradient` function should set the second color to be `#45454f` at `100%`.
+
+```js
+const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
+const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2];
+assert.equal(secondGradient,'(69,69,79)100%)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+--fcc-editable-region--
+.cat-head {
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5d7057c45f432fcdd46c.md
new file mode 100644
index 00000000000..84bc5744a33
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5d7057c45f432fcdd46c.md
@@ -0,0 +1,77 @@
+---
+id: 646c5d7057c45f432fcdd46c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`.
+
+# --hints--
+
+You should have a `.cat-head` selector.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
+```
+
+Your `.cat-head` selector should have a `width` set to `205px`.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px');
+```
+
+Your `.cat-head` selector should have a `height` set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px')
+```
+
+Your `.cat-head` selector should have a `border` set to `1px solid #000`.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)')
+```
+
+Your `.cat-head` selector should have a `border-radius` set to `46%`.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%')
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5e727e56e743c9aed4a1.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5e727e56e743c9aed4a1.md
new file mode 100644
index 00000000000..fc1a8dd3529
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5e727e56e743c9aed4a1.md
@@ -0,0 +1,80 @@
+---
+id: 646c5e727e56e743c9aed4a1
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`.
+
+Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties.
+
+`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`.
+
+Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each.
+
+
+# --hints--
+
+Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static')
+```
+
+Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px')
+```
+
+Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+--fcc-editable-region--
+.cat-head {
+
+
+
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5ffef5598d449b52ec12.md
new file mode 100644
index 00000000000..f8b6396c8a1
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646c5ffef5598d449b52ec12.md
@@ -0,0 +1,80 @@
+---
+id: 646c5ffef5598d449b52ec12
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear.
+
+Inside your `.cat-head` element, create a `div` element with the class `cat-ears`.
+
+# --hints--
+
+You should not change the existing `div` element with the class `cat-head`.
+
+```js
+assert(document.querySelectorAll('div.cat-head').length === 1);
+```
+
+You should create one `div` element inside your `.cat-head` element.
+
+```js
+assert(document.querySelectorAll('.cat-head div').length === 1);
+```
+
+Your `div` element should have the class `cat-ears`.
+
+```js
+assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+ --fcc-editable-region--
+
+
+
+ --fcc-editable-region--
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ce8bb4b35544d501c7184.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ce8bb4b35544d501c7184.md
new file mode 100644
index 00000000000..6a298c09251
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ce8bb4b35544d501c7184.md
@@ -0,0 +1,86 @@
+---
+id: 646ce8bb4b35544d501c7184
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively.
+
+# --hints--
+
+You should not change the existing `div` element with the class `cat-ears`.
+
+```js
+assert(document.querySelectorAll('div.cat-ears').length === 1);
+```
+
+You should create two `div` elements inside your `.cat-ears` element.
+
+```js
+assert(document.querySelectorAll('.cat-ears div').length === 2);
+```
+
+Your first `div` element should have the class `cat-left-ear`.
+
+```js
+assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear'));
+```
+
+Your second `div` element should have the class `cat-right-ear`.
+
+```js
+assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+ --fcc-editable-region--
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ce9d790d2a44de5f99e04.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ce9d790d2a44de5f99e04.md
new file mode 100644
index 00000000000..9876c6dd360
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ce9d790d2a44de5f99e04.md
@@ -0,0 +1,103 @@
+---
+id: 646ce9d790d2a44de5f99e04
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create two `div` elements, the first inside the `.cat-left-ear` element with a class of `cat-left-inner-ear`, and the second inside the `.cat-right-ear` element with a class of `cat-right-inner-ear`.
+
+# --hints--
+
+You should not change the existing `div` element with the class `cat-left-ear`.
+
+```js
+assert(document.querySelectorAll('div.cat-left-ear').length === 1);
+```
+
+You should not change the existing `div` element with the class `cat-right-ear`.
+
+```js
+assert(document.querySelectorAll('div.cat-right-ear').length === 1);
+```
+
+You should have one `div` element inside your `.cat-left-ear` element.
+
+```js
+assert(document.querySelectorAll('.cat-left-ear div').length === 1);
+```
+
+You should have one `div` element inside your `.cat-right-ear` element.
+
+```js
+assert(document.querySelectorAll('.cat-right-ear div').length === 1);
+```
+
+The new `div` element inside `.cat-left-ear` should have the class `cat-left-inner-ear`.
+
+```js
+assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear'));
+```
+
+The new `div` element inside `.cat-right-ear` should have the class `cat-right-inner-ear`.
+
+```js
+assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
new file mode 100644
index 00000000000..28446c85781
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
@@ -0,0 +1,117 @@
+---
+id: 646ceb843412c74edee27a79
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
+
+# --hints--
+
+You should have a `.cat-right-ear` selector.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
+```
+
+Your `.cat-right-ear` selector should have a `height` property set to `100px`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
+```
+
+Your `.cat-right-ear` selector should have a `width` property set to `100px`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
+```
+
+Your `.cat-right-ear` selector should have a `background-color` property set to `white`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
+```
+
+Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid blue`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
+```
+
+Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid blue`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
+```
+
+Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid red`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
+```
+
+Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cecc9eb5c4f4f73dafd07.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cecc9eb5c4f4f73dafd07.md
new file mode 100644
index 00000000000..6ccd6c4313d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cecc9eb5c4f4f73dafd07.md
@@ -0,0 +1,92 @@
+---
+id: 646cecc9eb5c4f4f73dafd07
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`.
+
+# --hints--
+
+Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute')
+```
+
+Your `.cat-left-ear` selector should have a `top` property set to `-26px`
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px')
+```
+
+Your `.cat-left-ear` selector should have a `left` property set to `-31px`
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+--fcc-editable-region--
+.cat-left-ear {
+
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cef0c2b98915094df7099.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cef0c2b98915094df7099.md
new file mode 100644
index 00000000000..c285919d249
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cef0c2b98915094df7099.md
@@ -0,0 +1,89 @@
+---
+id: 646cef0c2b98915094df7099
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`.
+
+# --hints--
+
+Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px')
+```
+
+Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf1206cac5f51804f49cf.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf1206cac5f51804f49cf.md
new file mode 100644
index 00000000000..7512ce8f661
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf1206cac5f51804f49cf.md
@@ -0,0 +1,89 @@
+---
+id: 646cf1206cac5f51804f49cf
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+To position the left ear properly, you can use CSS transform to rotate it in a certain degree.
+
+The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`.
+
+Set the `transform` property to `rotate(-45deg)` and see what happens.
+
+# --hints--
+
+You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
new file mode 100644
index 00000000000..b37aa9386b2
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
@@ -0,0 +1,107 @@
+---
+id: 646cf2249f02ca5233d9af7c
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Now you can work on the right ear of the cat. You have the HTML for it already.
+
+Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`.
+
+# --hints--
+
+You should have a `.cat-right-ear` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear'))
+```
+
+Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
+```
+
+Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
+```
+
+Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ transform: rotate(-45deg);
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf48d8f8e1f535a1821d3.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf48d8f8e1f535a1821d3.md
new file mode 100644
index 00000000000..71e41924fd7
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf48d8f8e1f535a1821d3.md
@@ -0,0 +1,104 @@
+---
+id: 646cf48d8f8e1f535a1821d3
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`.
+
+# --hints--
+
+Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute')
+```
+
+Your `.cat-right-ear` selector should have a `top` property set to `-26px`
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px')
+```
+
+Your `.cat-right-ear` selector should have a `left` property set to `163px`
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ transform: rotate(-45deg);
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+
+.cat-right-ear {
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf6cbca98e258da65c979.md
new file mode 100644
index 00000000000..f91a47e0514
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf6cbca98e258da65c979.md
@@ -0,0 +1,95 @@
+---
+id: 646cf6cbca98e258da65c979
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+As you did for the left ear, rotate the right ear at 45 degrees.
+
+# --hints--
+
+You should set the `transform` property of your `.cat-right-ear` element to `rotate(45deg)`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ transform: rotate(-45deg);
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+
+.cat-right-ear {
+ position: absolute;
+ top: -26px;
+ left: 163px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf88aa884405a11ea5bcc.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf88aa884405a11ea5bcc.md
new file mode 100644
index 00000000000..fd2f5e2edc2
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cf88aa884405a11ea5bcc.md
@@ -0,0 +1,102 @@
+---
+id: 646cf88aa884405a11ea5bcc
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`.
+
+# --hints--
+
+Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px')
+```
+
+Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ transform: rotate(-45deg);
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+
+.cat-right-ear {
+ position: absolute;
+ top: -26px;
+ left: 163px;
+ transform: rotate(45deg);
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cfc2b8e6fe95c20a819d5.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cfc2b8e6fe95c20a819d5.md
new file mode 100644
index 00000000000..81a27f982c8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cfc2b8e6fe95c20a819d5.md
@@ -0,0 +1,102 @@
+---
+id: 646cfc2b8e6fe95c20a819d5
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property.
+
+`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`.
+
+To see `z-index` in action, set the `z-index` property of the left ear to `-1`.
+
+# --hints--
+
+Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ transform: rotate(-45deg);
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+
+.cat-right-ear {
+ position: absolute;
+ top: -26px;
+ left: 163px;
+ transform: rotate(45deg);
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cfd853634255d02b64cc1.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cfd853634255d02b64cc1.md
new file mode 100644
index 00000000000..be5facc8ba1
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/646cfd853634255d02b64cc1.md
@@ -0,0 +1,100 @@
+---
+id: 646cfd853634255d02b64cc1
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show.
+
+Instead of `-1`, set the `z-index` property of the left ear to `1`.
+
+# --hints--
+
+Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semicolon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+.cat-left-ear {
+ position: absolute;
+ top: -26px;
+ left: -31px;
+ z-index: 1;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ transform: rotate(-45deg);
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+
+.cat-right-ear {
+ position: absolute;
+ top: -26px;
+ left: 163px;
+ z-index: 1;
+ transform: rotate(45deg);
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-bottom: 70px solid #5e5e5e;
+}
+
+.cat-left-inner-ear {
+ position: absolute;
+ top: 22px;
+ left: -20px;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 40%;
+ border-bottom-left-radius: 40%;
+ border-left: 20px solid transparent;
+ border-right: 20px solid transparent;
+ border-bottom: 40px solid #3b3b4f;
+}
+
+.cat-right-inner-ear {
+ position: absolute;
+ top: 22px;
+ left: -20px;
+ border-top-left-radius: 90px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 40%;
+ border-bottom-left-radius: 40%;
+ border-left: 20px solid transparent;
+ border-right: 20px solid transparent;
+ border-bottom: 40px solid #3b3b4f;
+}
+
+.cat-left-eye {
+ position: absolute;
+ top: 54px;
+ left: 39px;
+ border-radius: 60%;
+ transform: rotate(25deg);
+ width: 30px;
+ height: 40px;
+ background-color: #000;
+}
+
+.cat-right-eye {
+ position: absolute;
+ top: 54px;
+ left: 134px;
+ border-radius: 60%;
+ transform: rotate(-25deg);
+ width: 30px;
+ height: 40px;
+ background-color: #000;
+}
+
+.cat-left-inner-eye {
+ position: absolute;
+ top: 8px;
+ left: 2px;
+ width: 10px;
+ height: 20px;
+ transform: rotate(10deg);
+ background-color: #fff;
+ border-radius: 60%;
+}
+
+.cat-right-inner-eye {
+ position: absolute;
+ top: 8px;
+ left: 18px;
+ transform: rotate(-5deg);
+ width: 10px;
+ height: 20px;
+ background-color: #fff;
+ border-radius: 60%;
+}
+
+.cat-nose {
+ position: absolute;
+ top: 108px;
+ left: 85px;
+ border-top-left-radius: 50%;
+ border-bottom-right-radius: 50%;
+ border-bottom-left-radius: 50%;
+ transform: rotate(180deg);
+ border-left: 15px solid transparent;
+ border-right: 15px solid transparent;
+ border-bottom: 20px solid #442c2c;
+}
+
+.cat-mouth div {
+ width: 30px;
+ height: 50px;
+ border: 2px solid #000;
+ border-radius: 190%/190px 150px 0 0;
+ border-color: black transparent transparent transparent;
+}
+
+.cat-mouth-line-left {
+ position: absolute;
+ top: 88px;
+ left: 74px;
+ transform: rotate(170deg);
+}
+
+.cat-mouth-line-right {
+ position: absolute;
+ top: 88px;
+ left: 91px;
+ transform: rotate(165deg);
+}
+
+.cat-whiskers-left div {
+ width: 40px;
+ height: 1px;
+ background-color: #000;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/6676a8a8d9861319ee901a90.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/6676a8a8d9861319ee901a90.md
new file mode 100644
index 00000000000..16826bef5b2
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/6676a8a8d9861319ee901a90.md
@@ -0,0 +1,148 @@
+---
+id: 6676a8a8d9861319ee901a90
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Now you can begin working on your cat's ears.
+
+Clean up your review code by removing the `.cat-right-ear` selector and all of its properties.
+
+Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`.
+
+# --hints--
+
+
+Your `.cat-right-ear` selector should not have a `height` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
+```
+
+Your `.cat-right-ear` selector should not have a `width` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width)
+```
+
+
+Your `.cat-right-ear` selector should not have a `border-left` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft)
+```
+
+Your `.cat-right-ear` selector should not have a `border-right` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight)
+```
+
+Your `.cat-right-ear` selector should not have a `border-top` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop)
+```
+
+Your `.cat-right-ear` selector should not have a `border-bottom` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom)
+```
+
+You should not have a `.cat-right-ear` selector.
+
+```js
+assert(!new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
+```
+
+You should have a `.cat-left-ear` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear'))
+```
+
+Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent`
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent')
+```
+
+Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent`
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent')
+```
+
+Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #c9d2fc;
+}
+
+.cat-head {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: linear-gradient(#5e5e5e 85%, #45454f 100%);
+ width: 205px;
+ height: 180px;
+ border: 1px solid #000;
+ border-radius: 46%;
+}
+
+--fcc-editable-region--
+.cat-right-ear {
+ height: 0;
+ width: 0;
+ border-left: 35px solid transparent;
+ border-right: 35px solid transparent;
+ border-top: 35px solid transparent;
+ border-bottom: 35px solid red;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
new file mode 100644
index 00000000000..26922a2a3c0
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
@@ -0,0 +1,131 @@
+---
+id: 6676a8b01e56ec1a1e07c202
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Notice that you now have a white square with thick borders. The borders have diagonal edges which can be used to create triangles. You will need them to create your cat's ears.
+
+Within the same class selector adjust `height` and `width` to `0`. Set the left, right and top border to `transparent`.
+
+Remove the `background-color` property, and you should see a triangle.
+
+# --hints--
+
+
+You should have a `.cat-right-ear` selector.
+
+```js
+assert(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
+```
+
+Your `.cat-right-ear` selector should have a `height` property set to `0`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height == '0px')
+```
+
+Your `.cat-right-ear` selector should have a `width` property set to `0`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '0px')
+```
+
+Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
+```
+
+Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
+```
+
+Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid transparent`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid transparent')
+```
+
+
+Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+```
+
+Your `.cat-right-ear` selector should not have a `background-color` property.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ fCC Cat Painting
+
+
+
+
+