+
+
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e89562043183c86df287c.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
new file mode 100644
index 00000000000..a5dad2247f9
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, you need to reset the box model.
+
+Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have the `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 00000000000..cd1ca1882c5
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their parent element.
+
+You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
+
+The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
+
+For now, create a CSS selector to target all elements using `*`, and include the pseudo-elements `::before` and `::after`. Set the `box-sizing` property to `inherit`.
+
+# --hints--
+
+You should have a `*, ::before, ::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+html {
+ box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 00000000000..46f69e2b599
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now target your `#piano` element with an `id` selector. Set its `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
+
+# --hints--
+
+You should have a `#piano` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+Your `#piano` selector should have the `background-color` property set to `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+Your `#piano` selector should have a `width` property set to `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+Your `#piano` selector should have the `height` set to `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 00000000000..85c97c29245
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Set the `margin` of the `#piano` to `80px auto`.
+
+# --hints--
+
+Your `#piano` selector should have the `margin` property set to `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 00000000000..26f7c9217a6
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
+
+# --hints--
+
+You should have a `.keys` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+Your `.keys` selector should have a `background-color` property set to `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+Your `.keys` selector should have the `width` property set to `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+Your `.keys` selector should have a `height` property set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 00000000000..d877f447ad2
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.keys` a `padding-left` of `2px`.
+
+# --hints--
+
+Your `.keys` selector should have a `padding-left` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 00000000000..01ea9f27a92
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
+
+# --hints--
+
+Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
new file mode 100644
index 00000000000..0f8ca9d6ba3
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
+
+# --hints--
+
+You should have a `.key` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+Your `.key` selector should have a `background-color` property set to `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+Your `.key` selector should have the `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+Your `.key` selector should have a `width` property set to `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+Your `.key` selector should have a `height` property set to `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 00000000000..28c5419dac6
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
+
+# --hints--
+
+Your `.key` selector should have a `margin` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+Your `.key` selector should have a `float` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 00000000000..f0e8088dd82
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created after these elements in the HTML.
+
+In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
+
+The `content` property is used to set or override the content of an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing empty.
+
+If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
+
+# --hints--
+
+You should have a `.key.black--key::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+Your `.key.black--key::after` selector should have a `content` property set to `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
new file mode 100644
index 00000000000..a7340d458d2
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 00000000000..72dbf9cc19c
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
+
+# --hints--
+
+Your `.key.black--key::after` should have a `width` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+Your `.key.black--key::after` should have a `height` property set to `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 00000000000..37d6779238a
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The piano needs the freeCodeCamp logo to make it official.
+
+Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
+
+# --hints--
+
+You should add a new `img` element.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+Your `img` element should come before your first `.keys` element.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+Your `img` element should have a `class` set to `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Remember that casing and spelling matter.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 00000000000..2e461ef48ab
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
+
+# --hints--
+
+You should have a `.logo` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+Your `.logo` selector should have a `width` property set to `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+Your `.logo` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+Your `.logo` selector should have a `top` property set to `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ --fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 00000000000..dc900814fdf
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
+
+# --hints--
+
+Your `#piano` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 00000000000..62dbbd5686a
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To soften the sharp edges of the piano and its keys, start by giving the `#piano` a `border-radius` of `10px`.
+
+# --hints--
+
+Your `#piano` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 00000000000..777b6e023b0
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
+
+# --hints--
+
+Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 00000000000..80785c1dbfc
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 00000000000..a0c170c27eb
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+ .card {
+ padding: 2rem;
+ }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your `@media` query should have a `max-width` of `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 00000000000..3291a4dac23
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
+
+# --hints--
+
+Your `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 00000000000..5cfe1e3cac5
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
+
+# --hints--
+
+
+Your `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 00000000000..0dbf2d1e3c4
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
+
+# --hints--
+
+Your `@media` rule should have a `.logo` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+Your new `.logo` selector should have a `width` of `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 00000000000..a32cab125e5
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
+
+# --hints--
+
+Your original `.keys` selector should have the `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 00000000000..097b595db26
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
+
+For example, a media query that targets a display width between 500px and 1000px would be:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 00000000000..de83d05ac45
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
+
+With that, your piano is complete!
+
+# --hints--
+
+Your second `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+Your second `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+#piano {
+ background-color: #00471b;
+ width: 992px;
+ height: 290px;
+ margin: 80px auto;
+ padding: 90px 20px 0 20px;
+ position: relative;
+ border-radius: 10px;
+}
+
+.keys {
+ background-color: #040404;
+ width: 949px;
+ height: 180px;
+ padding-left: 2px;
+ overflow: hidden;
+}
+
+.key {
+ background-color: #ffffff;
+ position: relative;
+ width: 41px;
+ height: 175px;
+ margin: 2px;
+ float: left;
+ border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+ background-color: #1d1e22;
+ content: "";
+ position: absolute;
+ left: -18px;
+ width: 32px;
+ height: 100px;
+ border-radius: 0 0 3px 3px;
+}
+
+.logo {
+ width: 200px;
+ position: absolute;
+ top: 23px;
+}
+
+@media (max-width: 768px) {
+ #piano {
+ width: 358px;
+ }
+
+ .keys {
+ width: 318px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+ #piano {
+ width: 675px;
+ }
+
+ .keys {
+ width: 633px;
+ }
+}
+```
diff --git a/curriculum/test/utils/mongo-ids.js b/curriculum/test/utils/mongo-ids.js
index 2cc6a55aac7..9b258d3bc7b 100644
--- a/curriculum/test/utils/mongo-ids.js
+++ b/curriculum/test/utils/mongo-ids.js
@@ -127,7 +127,37 @@ const duplicatedProjectIds = [
// Cat Painting
// Responsive Piano
-
+ '612e78af05201622d4bab8aa',
+ '612e7d1c29fb872d6384379c',
+ '612e804c54d5e7308d7ebe56',
+ '612e813b3ba67633222cbe54',
+ '612e8279827a28352ce83a72',
+ '612e83ec2eca1e370f830511',
+ '612e89562043183c86df287c',
+ '612e89d254fe5d3df7d6693d',
+ '612e8eebe3a6dc3fcc33a66f',
+ '612e95ef2e4bdf41f69067f9',
+ '612e96fc87fe8e44f69f7ec5',
+ '612e98f3245c98475e49cfc6',
+ '612e9a21381a1949327512e6',
+ '612e9d142affc44a453655db',
+ '612e9f1e7e5ccd4fa9ada0be',
+ '612ea4c4993aba52ab4aa32e',
+ '612ea97df5742154772f312e',
+ '612ead8788d28655ef8db056',
+ '612eaf56b7ba3257fdbfb0db',
+ '612eb4893b63c75bb9251ddf',
+ '612eb75153591b5e3b1ab65e',
+ '612eb7ca8c275d5f89c73333',
+ '612eb8e984cd73677a92b7e9',
+ '612eb934f64a4d6890a45518',
+ '612ebcba99bfa46a15370b11',
+ '612ebe7fe6d07e6b76d1cae2',
+ '612ebedec97e096c8bf64999',
+ '612ebf9a210f2b6d77001e68',
+ '612ec0490ae8626e9adf82e4',
+ '612ec19d5268da7074941f84',
+ '612ec29c84b9a6718b1f5cec',
// Technical Documentation Page
'587d78b0367417b2b2512b05',
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+