chore(curriculum): add responsive piano workshop (freeCodeCamp#56734)

Co-authored-by: Sem Bauke <[email protected]>

Author: Dario-DC

client/i18n/locales/english/intro.json

@@ -2004,7 +2004,13 @@
           "Test what you've learned in this quiz of how positioning works in CSS."
         ]
       },
-      "xebj": { "title": "103", "intro": [] },
+      "workshop-piano": {
+        "title": "Design a Piano",
+        "intro": [
+          "Responsive Design tells your webpage how it should look on different-sized screens.",
+          "In this workshop, you'll use CSS and Responsive Design to code a piano. You'll also practice media queries and pseudo selectors."
+        ]
+      },
       "jkdt": { "title": "104", "intro": [] },
       "lab-technical-documentation-page": {
         "title": "Build a Technical Documentation Page",

client/src/pages/learn/front-end-development/workshop-piano/index.md

@@ -0,0 +1,11 @@
+---
+title: Introduction to the Design a Piano
+block: workshop-piano
+superBlock: front-end-development
+---
+
+## Introduction to the Design a Piano
+
+Responsive Design tells your webpage how it should look on different-sized screens.
+
+In this workshop, you'll use CSS and Responsive Design to code a piano. You'll also practice media queries and pseudo selectors.

curriculum/challenges/_meta/workshop-piano/meta.json

@@ -0,0 +1,137 @@
+{
+  "name": "Design a Piano",
+  "blockType": "workshop",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
+  "dashedName": "workshop-piano",
+  "order": 103,
+  "superBlock": "front-end-development",
+  "challengeOrder": [
+    {
+      "id": "612e78af05201622d4bab8aa",
+      "title": "Step 1"
+    },
+    {
+      "id": "612e7d1c29fb872d6384379c",
+      "title": "Step 2"
+    },
+    {
+      "id": "612e804c54d5e7308d7ebe56",
+      "title": "Step 3"
+    },
+    {
+      "id": "612e813b3ba67633222cbe54",
+      "title": "Step 4"
+    },
+    {
+      "id": "612e8279827a28352ce83a72",
+      "title": "Step 5"
+    },
+    {
+      "id": "612e83ec2eca1e370f830511",
+      "title": "Step 6"
+    },
+    {
+      "id": "612e89562043183c86df287c",
+      "title": "Step 7"
+    },
+    {
+      "id": "612e89d254fe5d3df7d6693d",
+      "title": "Step 8"
+    },
+    {
+      "id": "612e8eebe3a6dc3fcc33a66f",
+      "title": "Step 9"
+    },
+    {
+      "id": "612e95ef2e4bdf41f69067f9",
+      "title": "Step 10"
+    },
+    {
+      "id": "612e96fc87fe8e44f69f7ec5",
+      "title": "Step 11"
+    },
+    {
+      "id": "612e98f3245c98475e49cfc6",
+      "title": "Step 12"
+    },
+    {
+      "id": "612e9a21381a1949327512e6",
+      "title": "Step 13"
+    },
+    {
+      "id": "612e9d142affc44a453655db",
+      "title": "Step 14"
+    },
+    {
+      "id": "612e9f1e7e5ccd4fa9ada0be",
+      "title": "Step 15"
+    },
+    {
+      "id": "612ea4c4993aba52ab4aa32e",
+      "title": "Step 16"
+    },
+    {
+      "id": "612ea97df5742154772f312e",
+      "title": "Step 17"
+    },
+    {
+      "id": "612ead8788d28655ef8db056",
+      "title": "Step 18"
+    },
+    {
+      "id": "612eaf56b7ba3257fdbfb0db",
+      "title": "Step 19"
+    },
+    {
+      "id": "612eb4893b63c75bb9251ddf",
+      "title": "Step 20"
+    },
+    {
+      "id": "612eb75153591b5e3b1ab65e",
+      "title": "Step 21"
+    },
+    {
+      "id": "612eb7ca8c275d5f89c73333",
+      "title": "Step 22"
+    },
+    {
+      "id": "612eb8e984cd73677a92b7e9",
+      "title": "Step 23"
+    },
+    {
+      "id": "612eb934f64a4d6890a45518",
+      "title": "Step 24"
+    },
+    {
+      "id": "612ebcba99bfa46a15370b11",
+      "title": "Step 25"
+    },
+    {
+      "id": "612ebe7fe6d07e6b76d1cae2",
+      "title": "Step 26"
+    },
+    {
+      "id": "612ebedec97e096c8bf64999",
+      "title": "Step 27"
+    },
+    {
+      "id": "612ebf9a210f2b6d77001e68",
+      "title": "Step 28"
+    },
+    {
+      "id": "612ec0490ae8626e9adf82e4",
+      "title": "Step 29"
+    },
+    {
+      "id": "612ec19d5268da7074941f84",
+      "title": "Step 30"
+    },
+    {
+      "id": "612ec29c84b9a6718b1f5cec",
+      "title": "Step 31"
+    }
+  ],
+  "helpCategory": "HTML-CSS"
+}

curriculum/challenges/english/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md

@@ -0,0 +1,58 @@
+---
+id: 612e78af05201622d4bab8aa
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Create a `div` element within your `body` element with the `id` set to `piano`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` should be within your `body` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+Your `div` should have the `id` set to `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```

curriculum/challenges/english/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md

@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Nest a second `div` within your existing `div`, and set the `class` to be `keys`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+Your new `div` element should be within your existing `div` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have the `class` set to `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```

curriculum/challenges/english/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md

@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `.keys` element, add seven `div` elements, each with the class `key`.
+
+# --hints--
+
+You should create seven new `div` elements.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Your seven new `div` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Your seven new `div` elements should all have the `class` set to `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```