diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index a6816b21933..444e5e30224 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -3539,9 +3539,11 @@
"In these lecture videos, you will learn about working with forms in React."
]
},
- "sgau": {
- "title": "276",
- "intro": []
+ "workshop-superhero-application-form": {
+ "title": "Build a Superhero Application Form",
+ "intro": [
+ "In this workshop, you will build a superhero application form."
+ ]
},
"lab-event-rsvp": {
"title": "Build an Event RSVP",
diff --git a/client/src/pages/learn/full-stack-developer/workshop-superhero-application-form/index.md b/client/src/pages/learn/full-stack-developer/workshop-superhero-application-form/index.md
new file mode 100644
index 00000000000..73193bbd234
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/workshop-superhero-application-form/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Superhero Application Form
+block: workshop-superhero-application-form
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build a Superhero Application Form
+
+This is workshop will cover how to work with forms in React.
diff --git a/curriculum/challenges/_meta/workshop-superhero-application-form/meta.json b/curriculum/challenges/_meta/workshop-superhero-application-form/meta.json
new file mode 100644
index 00000000000..900d3de4f51
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-superhero-application-form/meta.json
@@ -0,0 +1,97 @@
+{
+ "name": "Build a Superhero Application Form",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "blockType": "workshop",
+ "blockLayout": "challenge-grid",
+ "dashedName": "workshop-superhero-application-form",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "6808fe91a5cb0c3355f23027",
+ "title": "Step 1"
+ },
+ {
+ "id": "680900675ae3d54ee19590c3",
+ "title": "Step 2"
+ },
+ {
+ "id": "680fc849a6f2be0a8597c593",
+ "title": "Step 3"
+ },
+ {
+ "id": "680900675ae3d54ee19590c4",
+ "title": "Step 4"
+ },
+ {
+ "id": "680900675ae3d54ee19590c5",
+ "title": "Step 5"
+ },
+ {
+ "id": "680900675ae3d54ee19590c6",
+ "title": "Step 6"
+ },
+ {
+ "id": "680900675ae3d54ee19590c7",
+ "title": "Step 7"
+ },
+ {
+ "id": "680900675ae3d54ee19590c8",
+ "title": "Step 8"
+ },
+ {
+ "id": "680900675ae3d54ee19590c9",
+ "title": "Step 9"
+ },
+ {
+ "id": "680900675ae3d54ee19590ca",
+ "title": "Step 10"
+ },
+ {
+ "id": "680900675ae3d54ee19590cb",
+ "title": "Step 11"
+ },
+ {
+ "id": "680900675ae3d54ee19590cc",
+ "title": "Step 12"
+ },
+ {
+ "id": "680900675ae3d54ee19590cd",
+ "title": "Step 13"
+ },
+ {
+ "id": "680900675ae3d54ee19590ce",
+ "title": "Step 14"
+ },
+ {
+ "id": "68148d280ee30e5a567a0e2d",
+ "title": "Step 15"
+ },
+ {
+ "id": "680900675ae3d54ee19590cf",
+ "title": "Step 16"
+ },
+ {
+ "id": "680900675ae3d54ee19590d0",
+ "title": "Step 17"
+ },
+ {
+ "id": "68149b101d905a6fc2fcd6d8",
+ "title": "Step 18"
+ },
+ {
+ "id": "680900675ae3d54ee19590d1",
+ "title": "Step 19"
+ },
+ {
+ "id": "680900675ae3d54ee19590d2",
+ "title": "Step 20"
+ },
+ {
+ "id": "680900675ae3d54ee19590d3",
+ "title": "Step 21"
+ }
+ ],
+ "helpCategory": "JavaScript"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/6808fe91a5cb0c3355f23027.md b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/6808fe91a5cb0c3355f23027.md
new file mode 100644
index 00000000000..799c364c40e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/6808fe91a5cb0c3355f23027.md
@@ -0,0 +1,157 @@
+---
+id: 6808fe91a5cb0c3355f23027
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you'll learn how to work with forms in React by building a superhero application form.
+
+Some boilerplate has been provided, you just need to create the rest of the React component.
+
+Begin by returning a `div` element with a `className` of `form-wrap`. Inside the `div`, create an `h2` element with the text `Superhero Application Form`. Below that, create a `p` element with the text `Please complete all fields`.
+
+# --hints--
+
+You should return a `div` element with the `className` of `form-wrap`.
+
+```js
+assert.exists(document?.querySelector("div.form-wrap"));
+```
+
+You should create an `h2` element inside your `div` element.
+
+```js
+assert.exists(document?.querySelector(".form-wrap > h2"));
+```
+
+Your `h2` element should have the text `Superhero Application Form`.
+
+```js
+const h2El = document?.querySelector("h2")
+assert.equal(h2El?.textContent, "Superhero Application Form");
+```
+
+You should create a `p` element inside your `div` element. Make sure it comes after the `h2`.
+
+```js
+assert.exists(document?.querySelector(".form-wrap > h2 + p"));
+```
+
+Your `p` element should have the text `Please complete all fields`.
+
+```js
+const pEl = document?.querySelector("p")
+assert.equal(pEl?.textContent, "Please complete all fields");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Superhero Application Form
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(30deg, #ff9999 50%, #6699ff 50%)
+}
+
+.form-wrap {
+ background-color: white;
+ width: 400px;
+ padding: 20px;
+ border: 1px solid black;
+ box-shadow: 5px 5px 10px black;
+}
+
+.form-wrap h2,
+.form-wrap p {
+ text-align: center;
+}
+
+.form-wrap p {
+ position: relative;
+ top: -18px;
+}
+
+.section {
+ display: flex;
+ margin-bottom: 30px;
+}
+
+.column {
+ flex-direction: column;
+}
+
+.submit-wrap {
+ text-align: center;
+}
+
+.submit-btn {
+ display: block;
+ margin: 0 auto;
+ padding: 0.4rem 0.5rem;
+ border: 1px solid black
+}
+
+.submit-btn:hover {
+ cursor: pointer;
+ background-color: #f3f3f3;
+}
+
+.submit-btn:disabled {
+ cursor: not-allowed;
+}
+```
+
+```jsx
+const { useState } = React;
+
+export const SuperheroForm = () => {
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+};
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c3.md b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c3.md
new file mode 100644
index 00000000000..5040c0b456d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c3.md
@@ -0,0 +1,196 @@
+---
+id: 680900675ae3d54ee19590c3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Before building out the form itself, you will create the state variables you need. They are `heroName`, `realName`, `powerSource`, and `powers`.
+
+For now, create the variables and setters for `heroName` and `realName`. Both should have an intitial value of empty strings.
+
+# --hints--
+
+You should use the array destructuring syntax to set a `heroName` state variable and a `setHeroName` setter.
+
+```js
+assert.match(code, /(const|let)\s+\[\s*heroName\s*,\s*setHeroName\s*\]/);
+```
+
+Your `heroName` and `setHeroName` should use the `useState` hook.
+
+```js
+async () => {
+ const abuseState = __helpers.spyOn(React, "useState");
+ const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+ const exports = {};
+ const _a = eval(script);
+ const _b = await __helpers.prepTestComponent(exports.SuperheroForm);
+
+ assert.isAtLeast(abuseState.calls.length, 1);
+}
+```
+
+Your `useState` hook for `heroName` should have an initial value of empty string.
+
+```js
+async () => {
+ const abuseState = __helpers.spyOn(React, "useState");
+ const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+ const exports = {};
+ const _a = eval(script);
+ const _b = await __helpers.prepTestComponent(exports.SuperheroForm);
+
+ assert.equal(abuseState.calls[0]?.[0], "");
+}
+```
+
+You should use the array destructuring syntax to set a `realName` state variable and a `setRealName` setter.
+
+```js
+assert.match(code, /(const|let)\s+\[\s*realName\s*,\s*setRealName\s*\]/);
+```
+
+Your `realName` and `setRealName` should use the `useState` hook.
+
+```js
+async () => {
+ const abuseState = __helpers.spyOn(React, "useState");
+ const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+ const exports = {};
+ const _a = eval(script);
+ const _b = await __helpers.prepTestComponent(exports.SuperheroForm);
+
+ assert.isAtLeast(abuseState.calls.length, 2);
+}
+```
+
+Your `useState` hook for `realName` should have an initial value of empty string.
+
+```js
+async () => {
+ const abuseState = __helpers.spyOn(React, "useState");
+ const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+ const exports = {};
+ const _a = eval(script);
+ const _b = await __helpers.prepTestComponent(exports.SuperheroForm);
+
+ assert.equal(abuseState.calls[1]?.[0], "");
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Superhero Application Form
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(30deg, #ff9999 50%, #6699ff 50%)
+}
+
+.form-wrap {
+ background-color: white;
+ width: 400px;
+ padding: 20px;
+ border: 1px solid black;
+ box-shadow: 5px 5px 10px black;
+}
+
+.form-wrap h2,
+.form-wrap p {
+ text-align: center;
+}
+
+.form-wrap p {
+ position: relative;
+ top: -18px;
+}
+
+.section {
+ display: flex;
+ margin-bottom: 30px;
+}
+
+.column {
+ flex-direction: column;
+}
+
+.submit-wrap {
+ text-align: center;
+}
+
+.submit-btn {
+ display: block;
+ margin: 0 auto;
+ padding: 0.4rem 0.5rem;
+ border: 1px solid black
+}
+
+.submit-btn:hover {
+ cursor: pointer;
+ background-color: #f3f3f3;
+}
+
+.submit-btn:disabled {
+ cursor: not-allowed;
+}
+```
+
+```jsx
+const { useState } = React;
+
+export const SuperheroForm = () => {
+
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+ return (
+
+
Superhero Application Form
+
Please complete all fields
+
+
Superhero Application Form
+
Please complete all fields
+ --fcc-editable-region--
+
+ --fcc-editable-region--
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+ {fruits.map((fruit, index) => (
+ - {fruit}
+ ))}
+
+ );
+}
+```
+
+Remember that the `key` must always be unique. It helps React identify which items have changed, and been added or removed.
+
+After the first `option`, use an arrow function to map through the `powerSourceOptions` array using `source` as the parameter.
+
+Then inside the `map()` method, create an `option` element with a `key` of `source` and a `value` of `source`. Lastly, use `{source}` to display the name of each power source in the dropdown.
+
+# --hints--
+
+You should map through `powerSourceOptions`.
+
+```js
+assert.match(code, /\{\s*powerSourceOptions\s*\.\s*map\s*\(/)
+```
+
+You should pass in `source` as the parameter of the map.
+
+```js
+assert.match(code, /\{\s*powerSourceOptions\s*\.\s*map\s*\(\s*(source|\(\s*source\s*\))\s*=>/)
+```
+
+You should create an `option` element with a `key` of `source` and `value` of `source`.
+
+```js
+assert.match(code, /<\s*option\s+(key\s*=\s*{\s*source\s*}\s*value\s*=\s*{\s*source\s*}|value\s*=\s*{\s*source\s*}\s*key\s*=\s*{\s*source\s*})\s*>\s*{\s*source\s*}\s*<\/\s*option\s*>/)
+```
+
+You should have a total of seven `option` elements.
+
+```js
+const optionElements = document?.querySelectorAll("option");
+assert.lengthOf(optionElements, 7);
+```
+
+For the last six `option` elements, each text content should correspond to one of the power source options from the `powerSourceOptions` array.
+
+```js
+const optionElements = document?.querySelectorAll("option");
+
+const powerSourceOptions = [
+ "Bitten by a strange creature",
+ "Radioactive exposure",
+ "Science experiment",
+ "Alien heritage",
+ "Ancient artifact discovery",
+ "Other"
+];
+
+for (let i = 0; i < powerSourceOptions.length; i++) {
+ const option = optionElements[i+1];
+ const expected = powerSourceOptions[i];
+
+ assert.strictEqual(option?.textContent, expected);
+ assert.strictEqual(option.value, expected);
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Superhero Application Form
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(30deg, #ff9999 50%, #6699ff 50%)
+}
+
+.form-wrap {
+ background-color: white;
+ width: 400px;
+ padding: 20px;
+ border: 1px solid black;
+ box-shadow: 5px 5px 10px black;
+}
+
+.form-wrap h2,
+.form-wrap p {
+ text-align: center;
+}
+
+.form-wrap p {
+ position: relative;
+ top: -18px;
+}
+
+.section {
+ display: flex;
+ margin-bottom: 30px;
+}
+
+.column {
+ flex-direction: column;
+}
+
+.submit-wrap {
+ text-align: center;
+}
+
+.submit-btn {
+ display: block;
+ margin: 0 auto;
+ padding: 0.4rem 0.5rem;
+ border: 1px solid black
+}
+
+.submit-btn:hover {
+ cursor: pointer;
+ background-color: #f3f3f3;
+}
+
+.submit-btn:disabled {
+ cursor: not-allowed;
+}
+```
+
+```jsx
+const { useState } = React;
+
+export const SuperheroForm = () => {
+
+ const powerSourceOptions = [
+ 'Bitten by a strange creature',
+ 'Radioactive exposure',
+ 'Science experiment',
+ 'Alien heritage',
+ 'Ancient artifact discovery',
+ 'Other'
+ ];
+
+ const [heroName, setHeroName] = useState('');
+ const [realName, setRealName] = useState('');
+ const [powerSource, setPowerSource] = useState('');
+ const [powers, setPowers] = useState([]);
+
+ return (
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+ --fcc-editable-region--
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+
Superhero Application Form
+
Please complete all fields
+
+
+
Superhero Application Form
+
Please complete all fields
+
+