jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2025-12-19 18:18:27 -05:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): add parent teacher workshop to FSD cert (#62618)

Browse Source 
Co-authored-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com>
Co-authored-by: Ilenia M <nethleen@gmail.com>
Co-authored-by: Kolade <chrisjay967@gmail.com>
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Alifa Ara
2025-12-11 16:55:33 -05:00
committed by GitHub
parent e84f896d51
commit 10834d6f86
41 changed files with 5882 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/i18n/locales/english/intro.json
View File

@@ -8291,6 +8291,13 @@
"In this workshop, you will have a chance to practice what you have learned by designing a greeting card."
]
},
"workshop-parent-teacher-conference-form": {
"title": "Design a Parent Teacher Conference Form",
"intro": [
"In this workshop, you will practice how to style radio buttons with different types of pseudo-selectors by building a parent-teacher conference form.",
"You'll practice concepts including the <code>::before</code> pseudo-element selector, the <code>transform</code> property, and more."
]
},
"lab-job-application-form": {
"title": "Build a Job Application Form",
"intro": [

9
client/src/pages/learn/full-stack-developer/workshop-parent-teacher-conference-form/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to the Design a Parent Teacher Conference Form
block: workshop-parent-teacher-conference-form
superBlock: full-stack-developer
---
## Introduction to the Design a Parent Teacher Conference Form
This page is for the Design a Parent Teacher Conference Form

51
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68e707257ea91c2e12d489fb.md Normal file
View File

@@ -0,0 +1,51 @@
---
id: 68e707257ea91c2e12d489fb
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---
# --description--
In this workshop, you will practice how to add custom styles to radio buttons by building a parent teacher conference form. The HTML boilerplate has been provided for you.
Start by adding a `main` element with a class called `container`.
# --hints--
You should have a `main` element.
```js
assert.exists(document.querySelector("main"));
```
Your `main` element should have a class called `container`.
```js
assert.exists(document.querySelector("main.container"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```

62
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68e7e729f6d14f69a23786ef.md Normal file
View File

@@ -0,0 +1,62 @@
---
id: 68e7e729f6d14f69a23786ef
title: Step 2
challengeType: 0
dashedName: step-2
---
# --description--
Next, inside your `main` element, add an `h1` element with the text `Parent Teacher Conference Form` and the classes `title` and `center`.
# --hints--
You should have an `h1` element.
```js
assert.exists(document.querySelector("h1"));
```
Your `h1` element should have the text `Parent Teacher Conference Form`.
```js
assert.strictEqual(document.querySelector("h1")?.innerText, "Parent Teacher Conference Form");
```
Your `h1` element should have the classes `title` and `center`.
```js
assert.exists(document.querySelector("h1.title.center"));
```
Your `h1` element should be inside the `main` element.
```js
assert.exists(document.querySelector("main h1.title.center"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
--fcc-editable-region--
<main class="container">
</main>
--fcc-editable-region--
</body>
</html>
```

57
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea7c41f2555e16174e7cfa.md Normal file
View File

@@ -0,0 +1,57 @@
---
id: 68ea7c41f2555e16174e7cfa
title: Step 3
challengeType: 0
dashedName: step-3
---
# --description--
Next, add a paragraph element with the text `Please fill out the form below to help schedule your parent-teacher conference.`. Your paragraph element should also have the classes `description` and `center`.
# --hints--
You should have a `p` element.
```js
assert.exists(document.querySelector("p"));
```
Your `p` element should have the text `Please fill out the form below to help schedule your parent-teacher conference.`.
```js
assert.strictEqual(document.querySelector("p")?.innerText, "Please fill out the form below to help schedule your parent-teacher conference.");
```
Your `p` element should have the classes `description` and `center`.
```js
assert.exists(document.querySelector("p.description.center"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
--fcc-editable-region--
--fcc-editable-region--
</main>
</body>
</html>
```

55
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea81da9f687732368a5322.md Normal file
View File

@@ -0,0 +1,55 @@
---
id: 68ea81da9f687732368a5322
title: Step 4
challengeType: 0
dashedName: step-4
---
# --description--
Now it is time to add the `form` and `input` elements, which will represent the parent and student information.
Start by adding a `form` element below the `p` element.
# --hints--
You should have a `form` element.
```js
assert.exists(document.querySelector(".container form"));
```
The form element should be below the `p` element.
```js
assert.exists(document.querySelector(".container > p+form"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
--fcc-editable-region--
--fcc-editable-region--
</main>
</body>
</html>
```

113
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea8666b8b473455f5b33ef.md Normal file
View File

@@ -0,0 +1,113 @@
---
id: 68ea8666b8b473455f5b33ef
title: Step 5
challengeType: 0
dashedName: step-5
---
# --description--
The first section of the form will focus on the student's information, like their name and grade.
Inside the `form` element, add a `fieldset` element. Inside that `fieldset` element, add a `legend` element with the text `Student Information`.
Below the `legend` element, add a `label` element with the text `Full Name: ` and a `for` attribute with the value of `student-name`.
# --hints--
You should have a `fieldset` element.
```js
assert.exists(document.querySelector("fieldset"));
```
Your `fieldset` element should be inside the `form` element.
```js
assert.exists(document.querySelector("form fieldset"));
```
You should have a `legend` element.
```js
assert.exists(document.querySelector("legend"));
```
Your `legend` element should be inside the `fieldset` element.
```js
assert.exists(document.querySelector("fieldset legend"));
```
Your `legend` element should have the text `Student Information`.
```js
assert.strictEqual(document.querySelector("fieldset legend")?.innerText, "Student Information");
```
You should have a `label` element.
```js
assert.exists(document.querySelector("label"));
```
Your `label` element should have the text `Full Name: `. Don't forget the space after the colon.
```js
assert.match(code, /Full\s+Name:\s+<\/label>/);
```
Your `label` element should have a `for` attribute.
```js
assert.isTrue(document.querySelector("label")?.hasAttribute("for"));
```
Your `label` element's `for` attribute should have the value `student-name`.
```js
assert.strictEqual(document.querySelector("label")?.getAttribute("for"), "student-name");
```
Your `label` element should be below the `legend` element.
```js
const fieldsetChildren = [...document.querySelector("fieldset")?.children];
const legendEl = document.querySelector("fieldset legend");
const labelEl = document.querySelector("label");
assert.isBelow(fieldsetChildren.indexOf(legendEl), fieldsetChildren.indexOf(labelEl));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
--fcc-editable-region--
<form>
</form>
--fcc-editable-region--
</main>
</body>
</html>
```

95
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea8a5db73b155708992687.md Normal file
View File

@@ -0,0 +1,95 @@
---
id: 68ea8a5db73b155708992687
title: Step 6
challengeType: 0
dashedName: step-6
---
# --description--
The next step is to add the associated `input` element for the student's information.
Start by adding an `input` element with a `type` attribute set to `"text"`. Then add a `name` and `id` attribute, both set to `student-name`.
Next, add a `placeholder` attribute set to `E.g., Jane Doe`. And finally, add a `required` attribute.
# --hints--
You should have an `input` element.
```js
assert.exists(document.querySelector("fieldset input"));
```
Your `input` element should have a `type` attribute set to `"text"`.
```js
const inputEl = document.querySelector("fieldset input");
assert.strictEqual(inputEl?.getAttribute("type"), "text");
```
Your `input` element should have a `name` attribute set to `"student-name"`.
```js
const inputEl = document.querySelector("fieldset input");
assert.strictEqual(inputEl?.getAttribute("name"), "student-name");
```
Your `input` element should have an `id` attribute set to `"student-name"`.
```js
const inputEl = document.querySelector("fieldset input");
assert.strictEqual(inputEl?.getAttribute("id"), "student-name");
```
Your `input` element should have a `placeholder` attribute set to `E.g., Jane Doe`.
```js
const inputEl = document.querySelector("fieldset input");
assert.strictEqual(inputEl?.getAttribute("placeholder"), "E.g., Jane Doe");
```
Your `input` element should have a `required` attribute.
```js
const inputEl = document.querySelector("fieldset input");
assert.isTrue(inputEl?.hasAttribute("required"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
--fcc-editable-region--
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
</fieldset>
--fcc-editable-region--
</form>
</main>
</body>
</html>
```

134
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea8c330ed07b60879f3d38.md Normal file
View File

@@ -0,0 +1,134 @@
---
id: 68ea8c330ed07b60879f3d38
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
Now it is time to add the form elements to collect the student's grade information.
Start by adding another `label` element with the text `Student Grade: ` and `for` attribute set to `"grade"`.
Then, below your `label` element, add an `input` element with the `type` attribute set to `"number"`. The `name` and `id` attributes should be set to `"grade"`. The `placeholder` attribute should be set to `"E.g., 4"`. Lastly, your number `input` should be required.
# --hints--
You should have a total of two `label` elements on the page.
```js
assert.lengthOf(document.querySelectorAll("label"), 2);
```
Your second `label` element should have the text `Student Grade: `. Don't forget the space after the colon.
```js
assert.match(code, /Student\s+Grade:\s+<\/label>/);
```
Your second `label` element should have a `for` attribute.
```js
assert.isTrue(document.querySelector("label:last-of-type")?.hasAttribute("for"));
```
Your second `label` element's `for` attribute should have the value `"grade"`.
```js
assert.strictEqual(document.querySelector("label:last-of-type")?.getAttribute("for"), "grade");
```
You should have two `input` elements on the page.
```js
assert.lengthOf(document.querySelectorAll("input"), 2);
```
Your second `input` element should be below your second `label` element.
```js
const fieldsetChildren = [...document.querySelector("fieldset")?.children];
const inputEl = document.querySelector("fieldset input:last-of-type");
const labelEl = document.querySelector("label:last-of-type");
assert.isBelow(fieldsetChildren.indexOf(labelEl), fieldsetChildren.indexOf(inputEl));
```
Your second `input` element should have a `type` attribute set to `"number"`.
```js
const inputEl = document.querySelector("fieldset input:last-of-type");
assert.strictEqual(inputEl?.getAttribute("type"), "number");
```
Your second `input` element should have a `name` attribute set to `"grade"`.
```js
const inputEl = document.querySelector("fieldset input:last-of-type");
assert.strictEqual(inputEl?.getAttribute("name"), "grade");
```
Your second `input` element should have an `id` attribute set to `"grade"`.
```js
const inputEl = document.querySelector("fieldset input:last-of-type");
assert.strictEqual(inputEl?.getAttribute("id"), "grade");
```
Your second `input` element should have a `placeholder` attribute set to `"E.g., 4"`.
```js
const inputEl = document.querySelector("fieldset input:last-of-type");
assert.strictEqual(inputEl?.getAttribute("placeholder"), "E.g., 4");
```
Your second `input` element should have a `required` attribute.
```js
const inputEl = document.querySelector("fieldset input:last-of-type");
assert.isTrue(inputEl?.hasAttribute("required"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
--fcc-editable-region--
--fcc-editable-region--
</fieldset>
</form>
</main>
</body>
</html>
```

85
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea8e6a87a2816b0bb2eb7d.md Normal file
View File

@@ -0,0 +1,85 @@
---
id: 68ea8e6a87a2816b0bb2eb7d
title: Step 8
challengeType: 0
dashedName: step-8
---
# --description--
The next step is to section in the form for the parent information.
Start by adding another `fieldset` element. Inside that `fieldset` element, add a `legend` element with the text `Parent/Guardian Information`.
# --hints--
You have a total of two `fieldset` elements on the page.
```js
assert.lengthOf(document.querySelectorAll("fieldset"), 2);
```
You should have a `legend` element inside your second `fieldset` element.
```js
assert.exists(document.querySelector("fieldset:last-of-type legend"));
```
Your `legend` element should have the text `Parent/Guardian Information`.
```js
assert.strictEqual(document.querySelector("fieldset:last-of-type legend")?.innerText, "Parent/Guardian Information");
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
--fcc-editable-region--
--fcc-editable-region--
</form>
</main>
</body>
</html>
```

147
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea8fdf2c9b167307e7f671.md Normal file
View File

@@ -0,0 +1,147 @@
---
id: 68ea8fdf2c9b167307e7f671
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
Now it is time to add the form elements to collect the parent's information.
Start by adding a `label` element with the text `Parent/Guardian Information: ` and `for` attribute set to `"parent-name"`.
Then, below your `label` element, add an `input` element with the `type` attribute set to `"text"`. The `name` and `id` attributes should be set to `"parent-name"`. The `placeholder` attribute should be set to `"E.g., Nancy Doe"`. Lastly, your `input` should be required.
# --hints--
You should have a total of three `label` elements on the page.
```js
assert.lengthOf(document.querySelectorAll("label"), 3);
```
Your third `label` element should have the text `Parent/Guardian Information: `. Don't forget the space after the colon.
```js
assert.match(code, /Parent\/Guardian\s+Information:\s+<\/label>/);
```
Your third `label` element should have a `for` attribute.
```js
assert.isTrue(document.querySelector("label:last-of-type")?.hasAttribute("for"));
```
Your third `label` element's `for` attribute should have the value `"parent-name"`.
```js
assert.strictEqual(document.querySelector("fieldset:last-of-type label")?.getAttribute("for"), "parent-name");
```
You should have three `input` elements on the page.
```js
assert.lengthOf(document.querySelectorAll("input"), 3);
```
Your third `input` element should be below your third `label` element.
```js
const fieldsetChildren = [...document.querySelector("fieldset:last-of-type")?.children];
const inputEl = document.querySelector("fieldset:last-of-type input");
const labelEl = document.querySelector("fieldset:last-of-type label");
assert.isBelow(fieldsetChildren.indexOf(labelEl), fieldsetChildren.indexOf(inputEl));
```
Your third `input` element should have a `type` attribute set to `"text"`.
```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("type"), "text");
```
Your third `input` element should have a `name` attribute set to `"parent-name"`.
```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("name"), "parent-name");
```
Your third `input` element should have an `id` attribute set to `"parent-name"`.
```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("id"), "parent-name");
```
Your third `input` element should have a `placeholder` attribute set to `"E.g., Nancy Doe"`.
```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(inputEl?.getAttribute("placeholder"), "E.g., Nancy Doe");
```
Your third `input` element should have a `required` attribute.
```js
const inputEl = document.querySelector("fieldset:last-of-type input");
assert.isTrue(inputEl?.hasAttribute("required"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
--fcc-editable-region--
<fieldset>
<legend>Parent/Guardian Information</legend>
</fieldset>
--fcc-editable-region--
</form>
</main>
</body>
</html>
```

97
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea95c833f0518ae6e366cd.md Normal file
View File

@@ -0,0 +1,97 @@
---
id: 68ea95c833f0518ae6e366cd
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
In the next few steps, you will add the form elements responsible for collecting the user's preferred contact method.
Start by adding another `fieldset` element with a `legend` element nested inside. Your `legend` element should have the text `Preferred Contact Method`.
# --hints--
You have a total of three `fieldset` elements on the page.
```js
assert.lengthOf(document.querySelectorAll("fieldset"), 3);
```
You should have a `legend` element inside your third `fieldset` element.
```js
assert.exists(document.querySelector("fieldset:last-of-type legend"));
```
Your `legend` element should have the text `Preferred Contact Method`.
```js
assert.strictEqual(document.querySelector("fieldset:last-of-type legend")?.innerText, "Preferred Contact Method");
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
--fcc-editable-region--
--fcc-editable-region--
</form>
</main>
</body>
</html>
```

160
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea975c7cbbb894a386e402.md Normal file
View File

@@ -0,0 +1,160 @@
---
id: 68ea975c7cbbb894a386e402
title: Step 11
challengeType: 0
dashedName: step-11
---
# --description--
The next step is to add the `label` and `input` elements for the email contact method.
Start by adding a label with a class of `"contact-method"` and a `for` attribute set to `"email"`. The label text should be `Email: `.
Below your `label` element, add a radio button with `id` and `value` attributes set to `"email"`. The `name` attribute should be set to `"contact-method"` and the class should be set to `"contact-method-radio-btn"`.
Lastly, make sure this radio button is checked by default.
# --hints--
Your last fieldset should contain a `label` element.
```js
assert.exists(document.querySelector("fieldset:last-of-type label"));
```
This new `label` element (for email) should have a class of `"contact-method"`.
```js
assert.exists(document.querySelector("fieldset:last-of-type label.contact-method"));
```
The new `label` element's `for` attribute should be set to `"email"`.
```js
const label = document.querySelector("fieldset:last-of-type label");
assert.strictEqual(label?.getAttribute("for"), "email");
```
The `label` element should have the text `Email: `. Make sure the space after the colon.
```js
const label = document.querySelector("fieldset:last-of-type label");
assert.match(label?.innerText, /Email:\s?/);
```
You should have an `input` element inside the last `fieldset`.
```js
assert.exists(document.querySelector("fieldset:last-of-type input"));
```
Your `input` element should have a `type` attribute set to `radio`.
```js
const input = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(input?.getAttribute("type"), "radio");
```
The `input` element should have an `id` attribute set to `"email"`.
```js
const input = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(input?.getAttribute("id"), "email");
```
The `input` element should have a `value` attribute set to `"email"`.
```js
const input = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(input?.getAttribute("value"), "email");
```
The `input` element should have a `name` attribute set to `"contact-method"`.
```js
const input = document.querySelector("fieldset:last-of-type input");
assert.strictEqual(input?.getAttribute("name"), "contact-method");
```
The `input` element should have a class of `"contact-method-radio-btn"`.
```js
assert.exists(document.querySelector("fieldset:last-of-type input.contact-method-radio-btn"));
```
Your `radio` button should be `checked` by default.
```js
const input = document.querySelector("fieldset:last-of-type input");
assert.isTrue(input?.hasAttribute("checked"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
--fcc-editable-region--
<fieldset>
<legend>Preferred Contact Method</legend>
</fieldset>
--fcc-editable-region--
</form>
</main>
</body>
</html>
```

158
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68ea9f01c51b66b937793611.md Normal file
View File

@@ -0,0 +1,158 @@
---
id: 68ea9f01c51b66b937793611
title: Step 12
challengeType: 0
dashedName: step-12
---
# --description--
Next, add another label with a class of `"contact-method"` and a `for` attribute set to `"phone"`. The label should text should be `Phone: `.
Below your `label` element, add a radio button with `id` and `value` attributes set to `"phone"`. The `name` attribute should be set to `"contact-method"` and the class should be set to `"contact-method-radio-btn"`.
# --hints--
You should have two `label` elements in the last `fieldset`.
```js
assert.lengthOf(document.querySelectorAll("fieldset:last-of-type label"), 2);
```
The `label` element should have a class of `"contact-method"`.
```js
assert.exists(document.querySelector("fieldset:last-of-type label.contact-method"));
```
The `label` element's `for` attribute should be set to `"phone"`.
```js
assert.exists(document.querySelector("fieldset:last-of-type label[for='phone']"));
```
The `label` element should have the text `Phone: `.
```js
const label = document.querySelector("fieldset:last-of-type label[for='phone']");
assert.match(label?.innerText, /Phone:\s?/);
```
You should have two `input` elements inside the last `fieldset`.
```js
assert.lengthOf(document.querySelectorAll("fieldset:last-of-type input"), 2);
```
Your `input` element should have a `type` attribute set to `radio`.
```js
const input = document.querySelector("fieldset:last-of-type input:last-of-type");
assert.strictEqual(input?.getAttribute("type"), "radio");
```
The `input` element should have an `id` attribute set to `"phone"`.
```js
const input = document.querySelector("fieldset:last-of-type input:last-of-type");
assert.strictEqual(input?.getAttribute("id"), "phone");
```
The `input` element should have a `value` attribute set to `"phone"`.
```js
const input = document.querySelector("fieldset:last-of-type input:last-of-type");
assert.strictEqual(input?.getAttribute("value"), "phone");
```
The `input` element should have a `name` attribute set to `"contact-method"`.
```js
const input = document.querySelector("fieldset:last-of-type input:last-of-type");
assert.strictEqual(input?.getAttribute("name"), "contact-method");
```
The `input` element should have a class of `"contact-method-radio-btn"`.
```js
assert.exists(document.querySelector("fieldset:last-of-type input[id='phone'].contact-method-radio-btn"));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
--fcc-editable-region--
--fcc-editable-region--
</fieldset>
</form>
</main>
</body>
</html>
```

131
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eaa310c153c0d0c5c9b78e.md Normal file
View File

@@ -0,0 +1,131 @@
---
id: 68eaa310c153c0d0c5c9b78e
title: Step 13
challengeType: 0
dashedName: step-13
---
# --description--
It's a good practice to allow users to add additional notes or concerns.
Below your third `fieldset` element, add a new `fieldset` element. Inside, add a `legend` element with the text `Additional Notes`.
# --hints--
You should have a total of 4 `fieldset` elements in this page.
```js
const fieldsets = document.querySelectorAll('fieldset');
assert.lengthOf(fieldsets, 4);
```
You should add a `fieldset` element below the third `fieldset` element.
```js
const fieldsets = document.querySelectorAll('fieldset');
assert.exists(fieldsets[2]?.nextElementSibling?.matches('fieldset'));
```
The new `fieldset` element should contain a `legend` element.
```js
const newFieldset = document.querySelectorAll('fieldset')[3];
assert.exists(newFieldset?.querySelector('legend'));
```
The `legend` element should have the text `Additional Notes`.
```js
const newFieldset = document.querySelectorAll('fieldset')[3];
const legend = newFieldset?.querySelector('legend');
assert.equal(legend?.innerText?.trim(), 'Additional Notes');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
--fcc-editable-region--
--fcc-editable-region--
</form>
</main>
</body>
</html>
```

167
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eaa668d4d9fbe529a0e16b.md Normal file
View File

@@ -0,0 +1,167 @@
---
id: 68eaa668d4d9fbe529a0e16b
title: Step 14
challengeType: 0
dashedName: step-14
---
# --description--
Now, add a `label` element with the text `Any specific concerns or topics you'd like to discuss?` and a `for` attribute set to `notes`.
Below this `label`, add a `textarea` element. Set its `id` to `notes`, `name` to `notes`, `rows` to `4`, and `cols` to `50`.
# --hints--
Your last `fieldset` should contain a `label` element.
```js
assert.exists(document.querySelector("fieldset:last-of-type label"));
```
The `label` element should have the text `Any specific concerns or topics you'd like to discuss?`.
```js
const label = document.querySelector("fieldset:last-of-type label");
assert.strictEqual(label?.innerText, "Any specific concerns or topics you'd like to discuss?");
```
The `label` element's `for` attribute should be set to `"notes"`.
```js
const label = document.querySelector("fieldset:last-of-type label");
assert.strictEqual(label?.getAttribute("for"), "notes");
```
Your last `fieldset` should contain a `textarea` element.
```js
assert.exists(document.querySelector("fieldset:last-of-type textarea"));
```
Your `textarea` element should be below the `label` element.
```js
const label = document.querySelector("fieldset:last-of-type label");
const textarea = document.querySelector("fieldset:last-of-type textarea");
assert.strictEqual(label?.nextElementSibling, textarea);
```
The `textarea` element should have an `id` attribute set to `"notes"`.
```js
const textarea = document.querySelector("fieldset:last-of-type textarea");
assert.strictEqual(textarea?.getAttribute("id"), "notes");
```
The `textarea` element should have a `name` attribute set to `"notes"`.
```js
const textarea = document.querySelector("fieldset:last-of-type textarea");
assert.strictEqual(textarea?.getAttribute("name"), "notes");
```
The `textarea` element should have a `rows` attribute set to `4`.
```js
const textarea = document.querySelector("fieldset:last-of-type textarea");
assert.strictEqual(textarea?.getAttribute("rows"), "4");
```
The `textarea` element should have a `cols` attribute set to `50`.
```js
const textarea = document.querySelector("fieldset:last-of-type textarea");
assert.strictEqual(textarea?.getAttribute("cols"), "50");
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
--fcc-editable-region--
--fcc-editable-region--
</fieldset>
</form>
</main>
</body>
</html>
```

136
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eafe1bae175f3b2a87a90d.md Normal file
View File

@@ -0,0 +1,136 @@
---
id: 68eafe1bae175f3b2a87a90d
title: Step 15
challengeType: 0
dashedName: step-15
---
# --description--
Finally, you should add the submit button for the form.
Below the last `fieldset` element, add a `button` element with the class `submit-btn` and `type` attribute set to `"submit"`. The text content of the button should be `Submit Form`.
With this, your HTML structure is complete!
# --hints--
You should add a `button` element below the last `fieldset` element.
```js
assert.exists(document.querySelector("fieldset:last-of-type + button"));
```
The `button` element should have a class of `"submit-btn"`.
```js
assert.exists(document.querySelector("fieldset:last-of-type + button.submit-btn"));
```
The `button` element should have a `type` attribute set to `"submit"`.
```js
const button = document.querySelector("fieldset:last-of-type + button");
assert.strictEqual(button?.getAttribute("type"), "submit");
```
The `button` element should have the text `Submit Form`.
```js
const button = document.querySelector("fieldset:last-of-type + button");
assert.strictEqual(button?.innerText, "Submit Form");
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
--fcc-editable-region--
--fcc-editable-region--
</form>
</main>
</body>
</html>
```

133
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb01876d31f24efecb0475.md Normal file
View File

@@ -0,0 +1,133 @@
---
id: 68eb01876d31f24efecb0475
title: Step 16
challengeType: 0
dashedName: step-16
---
# --description--
Now that the HTML structure is complete, you should move on to the CSS styling.
Open your `styles.css` file. First, set a dark background color for the `body` and a light color for the text.
Select the `body` element and set its `background-color` to `midnightblue` and `color` to `whitesmoke`.
# --hints--
You should target the `body` element.
```js
assert(new __helpers.CSSHelp(document).getStyle('body'));
```
Set the `background-color` property to `midnightblue`.
```js
const style = new __helpers.CSSHelp(document).getStyle('body');
assert.equal(style?.backgroundColor, 'midnightblue');
```
Set the `color` property to `whitesmoke`.
```js
const style = new __helpers.CSSHelp(document).getStyle('body');
assert.equal(style?.color, 'whitesmoke');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
```

139
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb058081504963447bfa60.md Normal file
View File

@@ -0,0 +1,139 @@
---
id: 68eb058081504963447bfa60
title: Step 17
challengeType: 0
dashedName: step-17
---
# --description--
Next, you should style the main container. Select the element with the class `container` and set its `background-color` to the hex-code `#ffffff1a`.
A hex code is a six-digit combination of numbers and letters used in HTML and CSS to represent colors. It starts with a `#` followed by three pairs:
- The first two digits represent red
- The next two represent green
- The last two represent blue
For example, `#ffffff` is pure white because it has the maximum value for red, green, and blue.
You can also add two extra digits at the end to control opacity (called the alpha channel). In `#ffffff1a`, the `1a` makes the white color semi-transparent. The lower the alpha value, the more transparent the color appears. You'll learn more about hex codes later!
# --hints--
You should target the element with the class `container`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container'));
```
Set the `background-color` property to `#ffffff1a`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.container')
assert.strictEqual(style?.backgroundColor, 'rgba(255, 255, 255, 0.1)')
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
--fcc-editable-region--
--fcc-editable-region--
```

153
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb07a965e83b6ef95f488a.md Normal file
View File

@@ -0,0 +1,153 @@
---
id: 68eb07a965e83b6ef95f488a
title: Step 18
challengeType: 0
dashedName: step-18
---
# --description--
Continuing with the main container, give the `container` class a `width` of `80%` and a `max-width` of `600px`. Also, add a `border-radius` of `10px` and set `margin` to `20px auto` to center it horizontally.
# --hints--
You should target the `container` class.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container'));
```
Set the `width` property to `80%`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.container');
assert.strictEqual(style?.width, '80%');
```
Set the `max-width` property to `600px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.container');
assert.strictEqual(style?.maxWidth, '600px');
```
Set the `border-radius` property to `10px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.container');
assert.strictEqual(style?.borderRadius, '10px');
```
Set the `margin` property to `20px auto`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.container')
assert.strictEqual(style?.margin, '20px auto')
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
--fcc-editable-region--
.container {
background-color: #ffffff1a;
}
--fcc-editable-region--
```

136
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb0d455ea45b89bbddd375.md Normal file
View File

@@ -0,0 +1,136 @@
---
id: 68eb0d455ea45b89bbddd375
title: Step 19
challengeType: 0
dashedName: step-19
---
# --description--
Now, you should add some padding to the container. Set `padding` to `10px 20px`. This way, you set a padding of `10px` on the top and bottom, and `20px` on the left and right.
# --hints--
You should target the `.container` class.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.container'));
```
Set the `padding` property to `10px 20px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.container')
assert.strictEqual(style?.padding, '10px 20px')
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
--fcc-editable-region--
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
margin: 20px auto;
border-radius: 10px;
}
--fcc-editable-region--
```

140
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb0f604d821894a88d07d8.md Normal file
View File

@@ -0,0 +1,140 @@
---
id: 68eb0f604d821894a88d07d8
title: Step 20
challengeType: 0
dashedName: step-20
---
# --description--
To make the container stand out, you should add a `box-shadow` set to `0 5px 15px black`.
This adds a shadow effect around the container. The values control the horizontal offset, vertical offset, blur radius, and color respectively.
# --hints--
You should target the `.container` class.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.container'));
```
You should set the `box-shadow` property to `0 5px 15px black`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.container');
assert.strictEqual(style?.getPropVal('box-shadow'), 'black 0px 5px 15px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
--fcc-editable-region--
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
margin: 20px auto;
border-radius: 10px;
padding: 10px 20px;
}
--fcc-editable-region--
```

140
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb1089f079099d400162eb.md Normal file
View File

@@ -0,0 +1,140 @@
---
id: 68eb1089f079099d400162eb
title: Step 21
challengeType: 0
dashedName: step-21
---
# --description--
You added a `center` class to some elements in the HTML. Now, you should define that class to center those elements.
Target the `center` class and center the elements having it with a `text-align` property set to `center`.
# --hints--
You should target the elements with the class `center`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.center'));
```
You should set the `text-align` property to `center`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.center')
assert.strictEqual(style?.textAlign, 'center')
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
--fcc-editable-region--
--fcc-editable-region--
```

143
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb1f4e8ccb1cb263b81efe.md Normal file
View File

@@ -0,0 +1,143 @@
---
id: 68eb1f4e8ccb1cb263b81efe
title: Step 22
challengeType: 0
dashedName: step-22
---
# --description--
The description text needs to be a bit larger. Select the element with the class `description` and set its `font-size` to `1.2rem`.
# --hints--
You should target the element with the class `description`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.description'));
```
Set the `font-size` property to `1.2rem`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.description')
assert.strictEqual(style?.fontSize, '1.2rem')
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
--fcc-editable-region--
--fcc-editable-region--
```

169
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb206a76e5d0b9c0b40eb7.md Normal file
View File

@@ -0,0 +1,169 @@
---
id: 68eb206a76e5d0b9c0b40eb7
title: Step 23
challengeType: 0
dashedName: step-23
---
# --description--
Time to style the `fieldset` elements to give them a distinct border.
Select the `fieldset` element. Set its `border` to `1px solid gray`, `border-radius` to `5px`, `margin` to `20px 0`, and `padding` to `20px`.
# --hints--
You should target the `fieldset` element.
```js
assert(new __helpers.CSSHelp(document).getStyle('fieldset'));
```
Set the `border` property to `1px solid gray`.
```js
const style = new __helpers.CSSHelp(document).getStyle('fieldset');
assert.oneOf(style?.border, ['1px solid gray', '1px solid grey']);
```
Set the `border-radius` property to `5px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('fieldset');
assert.strictEqual(style?.borderRadius, '5px');
```
Set the `margin` property to `20px 0`.
```js
const style = new __helpers.CSSHelp(document).getStyle('fieldset');
assert.strictEqual(style?.margin, '20px 0px');
```
Set the `padding` property to `20px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('fieldset');
assert.strictEqual(style?.padding, '20px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
--fcc-editable-region--
--fcc-editable-region--
```

176
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb2161d02d00c013fc44f9.md Normal file
View File

@@ -0,0 +1,176 @@
---
id: 68eb2161d02d00c013fc44f9
title: Step 24
challengeType: 0
dashedName: step-24
---
# --description--
To make the `legend` text more prominent, you need to style it.
Select the `fieldset legend` element. Set its `font-size` to `1.3rem` and its `font-weight` to `600`.
`font-weight` controls the boldness of text.
Common values of `font-weight` are:
- `normal` → Regular weight (default)
- `bold` → Bold text
- `lighter` → Lighter than the parent element
- `bolder` → Bolder than the parent element
- Numeric values like:
- `100` (thin)
- `400` (normal)
- `700` (bold)
- `900` (extra bold)
# --hints--
You should have a `fieldset legend` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('fieldset legend'));
```
Set the `font-size` property to `1.3rem`.
```js
const style = new __helpers.CSSHelp(document).getStyle('fieldset legend');
assert.strictEqual(style?.fontSize, '1.3rem');
```
Set the `font-weight` property to `600`.
```js
const style = new __helpers.CSSHelp(document).getStyle('fieldset legend');
assert.strictEqual(style?.fontWeight, '600');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
--fcc-editable-region--
--fcc-editable-region--
```

160
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb2430ac339ace4d2cd0e5.md Normal file
View File

@@ -0,0 +1,160 @@
---
id: 68eb2430ac339ace4d2cd0e5
title: Step 25
challengeType: 0
dashedName: step-25
---
# --description--
Now, you should increase the font size for all `label` elements.
Select the `label` element and set its `font-size` to `1.2rem`.
# --hints--
You should target the `label` element.
```js
assert(new __helpers.CSSHelp(document).getStyle('label'));
```
Set the `font-size` property to `1.2rem`.
```js
const style = new __helpers.CSSHelp(document).getStyle('label');
assert.strictEqual(style?.fontSize, '1.2rem');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
--fcc-editable-region--
--fcc-editable-region--
```

174
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb25b53c450ed6fc47e37a.md Normal file
View File

@@ -0,0 +1,174 @@
---
id: 68eb25b53c450ed6fc47e37a
title: Step 26
challengeType: 0
dashedName: step-26
---
# --description--
By default, `label` elements are inline. To make them stack vertically (except for your radio button labels), use the `:not()` pseudo-class.
The `:not()` pseudo-class negates a selection. Here, it selects all `label` elements that do not have the class `contact-method`.
Select `label:not(.contact-method)`, then set `display` to `block` and `margin` to `10px 0`.
# --hints--
You should have a `label:not(.contact-method)` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('label:not(.contact-method)'));
```
Set the `display` property to `block`.
```js
const style = new __helpers.CSSHelp(document).getStyle('label:not(.contact-method)');
assert.strictEqual(style?.display, 'block');
```
Set the `margin` property to `10px 0`.
```js
const style = new __helpers.CSSHelp(document).getStyle('label:not(.contact-method)');
assert.strictEqual(style?.margin, '10px 0px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
--fcc-editable-region--
--fcc-editable-region--
```

202
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb288f63d818e6e2ff246b.md Normal file
View File

@@ -0,0 +1,202 @@
---
id: 68eb288f63d818e6e2ff246b
title: Step 27
challengeType: 0
dashedName: step-27
---
# --description--
Now, you should style the `input` and `textarea` elements. It's often a good idea to start with general styles for `input` and `textarea`, then refine specific types.
Select `input:not(.contact-method-radio-btn), textarea`. Set `background-color` to `#ffffff1a`, `width` to `95%`, `border` to `1px solid gray`, `border-radius` to `5px`, and `padding` to `10px`.
The `:not(.contact-method-radio-btn)` part excludes radio buttons with that class from being styled by this rule. This way, we can apply general styles to most inputs while keeping radio buttons separate.
These styles will make your form fields wider and more readable. Try previewing the form to see how the layout changes.
# --hints--
You should target `input:not(.contact-method-radio-btn), textarea`.
```js
assert(new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea'));
```
Set the `background-color` property to `#ffffff1a`.
```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.backgroundColor, 'rgba(255, 255, 255, 0.1)');
```
Set the `width` property to `95%`.
```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.width, '95%');
```
Set the `border` property to `1px solid gray`.
```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.border, '1px solid gray');
```
Set the `border-radius` property to `5px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.borderRadius, '5px');
```
Set the `padding` property to `10px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.padding, '10px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
--fcc-editable-region--
--fcc-editable-region--
```

179
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb29fa879c7deef9806a04.md Normal file
View File

@@ -0,0 +1,179 @@
---
id: 68eb29fa879c7deef9806a04
title: Step 28
challengeType: 0
dashedName: step-28
---
# --description--
To ensure the text entered into inputs and textareas, as well as their placeholders, is visible, set their color.
Select `input, input::placeholder, textarea` and set `color` to `whitesmoke`.
# --hints--
You should target `input`, `input::placeholder`, `textarea`.
```js
assert(new __helpers.CSSHelp(document).getStyle('input, input::placeholder, textarea'));
```
Set the `color` property to `whitesmoke`.
```js
const style = new __helpers.CSSHelp(document).getStyle('input, input::placeholder, textarea');
assert.strictEqual(style?.color, 'whitesmoke');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
--fcc-editable-region--
--fcc-editable-region--
```

184
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb2d6986a77e004f583091.md Normal file
View File

@@ -0,0 +1,184 @@
---
id: 68eb2d6986a77e004f583091
title: Step 29
challengeType: 0
dashedName: step-29
---
# --description--
Now, it's time to customize the radio buttons. By default, radio buttons have a native browser appearance. You want to remove this so you can create a custom look.
Select the element with the class `contact-method-radio-btn`. Set `appearance` to `none`.
# --hints--
You should target the element with the class `contact-method-radio-btn`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn'));
```
Set the `appearance` property to `none`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn');
assert.strictEqual(style?.appearance, 'none');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
--fcc-editable-region--
--fcc-editable-region--
```

209
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb2ec44a4c4108988f2d7c.md Normal file
View File

@@ -0,0 +1,209 @@
---
id: 68eb2ec44a4c4108988f2d7c
title: Step 30
challengeType: 0
dashedName: step-30
---
# --description--
You should give your custom radio buttons a size and shape.
Still targeting `.contact-method-radio-btn`, set `width` to `20px`, `height` to `20px`, `border-radius` to `50%`, and `border` to `2px solid gray`.
# --hints--
You should continue to target the `.contact-method-radio-btn` class.
```js
assert(new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn'));
```
Set the `width` property to `20px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn');
assert.strictEqual(style?.width, '20px');
```
Set the `height` property to `20px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn');
assert.strictEqual(style?.height, '20px');
```
Set the `border-radius` property to `50%`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn');
assert.strictEqual(style?.borderRadius, '50%');
```
Set the `border` property to `2px solid gray`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn');
assert.oneOf(style?.border, ['2px solid gray', '2px solid grey']);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
--fcc-editable-region--
.contact-method-radio-btn {
appearance: none;
}
--fcc-editable-region--
```

194
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb30a907dc8813531084df.md Normal file
View File

@@ -0,0 +1,194 @@
---
id: 68eb30a907dc8813531084df
title: Step 31
challengeType: 0
dashedName: step-31
---
# --description--
By default, form elements like radio buttons might not sit perfectly aligned with their labels, especially if the label text is taller or has different font settings.
To align the radio buttons vertically with their labels, you can use the `vertical-align` property. This property controls how inline or inline-block elements line up vertically with the surrounding text.
Now, set `vertical-align` to `bottom` for the radio buttons. You can experiment with other values like `middle` or `top` to see how they affect alignment, but `bottom` usually works well for radio buttons next to labels.
# --hints--
You should continue to target the `.contact-method-radio-btn` class.
```js
assert(new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn'));
```
Set the `vertical-align` property to `bottom`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn');
assert.strictEqual(style?.verticalAlign, 'bottom');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
--fcc-editable-region--
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
}
--fcc-editable-region--
```

225
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb323ff5a6dc1cc19fa300.md Normal file
View File

@@ -0,0 +1,225 @@
---
id: 68eb323ff5a6dc1cc19fa300
title: Step 32
challengeType: 0
dashedName: step-32
---
# --description--
Now, you should create the inner circle that will appear when the radio button is checked. You will use the `::before` pseudo-element for this.
A pseudo-element like `:before` lets you insert extra content before the actual element. This is often used for decorative purposes.
Targeting `.contact-method-radio-btn::before` pseudo-element, set a `display` of `block`, `content` of `" "`, `width` of `10px`, `height` of `10px`, and `border-radius` of `50%`.
# --hints--
You should have a `.contact-method-radio-btn::before` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before'));
```
Set the `display` property to `block`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before');
assert.strictEqual(style?.display, 'block');
```
Set the `content` property to `" "`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before');
assert.strictEqual(style?.content, '" "');
```
Set the `width` property to `10px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before');
assert.strictEqual(style?.width, '10px');
```
Set the `height` property to `10px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before');
assert.strictEqual(style?.height, '10px');
```
Set the `border-radius` property to `50%`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before');
assert.strictEqual(style?.borderRadius, '50%');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
--fcc-editable-region--
--fcc-editable-region--
```

211
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb33a0e109d026cf545b43.md Normal file
View File

@@ -0,0 +1,211 @@
---
id: 68eb33a0e109d026cf545b43
title: Step 33
challengeType: 0
dashedName: step-33
---
# --description--
You need to position the inner circle and make it initially invisible.
Still targeting `.contact-method-radio-btn::before`, set `transform` to `translate(3px, 3px) scale(0)`. The `translate` function moves the circle slightly, and `scale(0)` shrinks it to zero size so it’s hidden by default.
Also, add a `transition` of `all 0.3s ease-in` to create a smooth animation when it appears. This means any style change will animate over 0.3 seconds, starting slowly and speeding up.
# --hints--
You should continue to target the `.contact-method-radio-btn::before` pseudo-element.
```js
assert(new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before'));
```
Set the `transform` property to `translate(3px, 3px) scale(0)`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before');
assert.strictEqual(style?.transform, 'translate(3px, 3px) scale(0)');
```
Set the `transition` property to `all 0.3s ease-in`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn::before');
assert.oneOf(style?.transition, ['0.3s ease-in', 'all 0.3s ease-in 0s'])
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
--fcc-editable-region--
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
}
--fcc-editable-region--
```

215
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb372f9b470238bf60577d.md Normal file
View File

@@ -0,0 +1,215 @@
---
id: 68eb372f9b470238bf60577d
title: Step 34
challengeType: 0
dashedName: step-34
---
# --description--
Now, it's time to define what happens when the radio button is checked.
You are styling the inner circle only when the radio button is selected, so your selector should be `.contact-method-radio-btn:checked::before`.
In the rule, set `transform` to `translate(3px, 3px) scale(1)` and `background-color` to `lightgreen`.
The `transform` moves the inner circle slightly and scales it up to full size with `scale(1)`, and a background of lightgreen fills the circle with color to show that the option is selected, making it visible.
# --hints--
You should target the `.contact-method-radio-btn:checked::before` pseudo-element.
```js
assert(new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn:checked::before'));
```
Set the `transform` property to `translate(3px, 3px) scale(1)`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn:checked::before');
assert.strictEqual(style?.transform, 'translate(3px, 3px) scale(1)');
```
Set the `background-color` property to `lightgreen`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.contact-method-radio-btn:checked::before');
assert.strictEqual(style?.backgroundColor, 'lightgreen');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(3px, 3px) scale(0);
transition: all 0.3s ease-in;
}
--fcc-editable-region--
--fcc-editable-region--
```

244
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb3a06c6adde47584e2721.md Normal file
View File

@@ -0,0 +1,244 @@
---
id: 68eb3a06c6adde47584e2721
title: Step 35
challengeType: 0
dashedName: step-35
---
# --description--
Time to style the submit button.
Select the element with the class `submit-btn`. Set `cursor` to `pointer` (to indicate it's clickable), `background-color` to `royalblue`, `color` to `whitesmoke`, `border` to `none`, `border-radius` to `6px`, and `padding` to `12px 20px`.
# --hints--
You should target the element with the class `submit-btn`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.submit-btn'));
```
Set the `cursor` property to `pointer`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.cursor, 'pointer');
```
Set the `background-color` property to `royalblue`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.backgroundColor, 'royalblue');
```
Set the `color` property to `whitesmoke`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.color, 'whitesmoke');
```
Set the `border` property to `none`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.oneOf(style?.getPropVal('border'), ['none', 'medium', 'medium none']);
```
Set the `border-radius` property to `6px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.borderRadius, '6px');
```
Set the `padding` property to `12px 20px`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.padding, '12px 20px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(3px, 3px) scale(0);
transition: all 0.3s ease-in;
}
.contact-method-radio-btn:checked::before {
transform: translate(3px, 3px) scale(1);
background-color: lightgreen;
}
--fcc-editable-region--
--fcc-editable-region--
```

231
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb3acbc5d86e4d53b58d91.md Normal file
View File

@@ -0,0 +1,231 @@
---
id: 68eb3acbc5d86e4d53b58d91
title: Step 36
challengeType: 0
dashedName: step-36
---
# --description--
Set `font-size` to `1.1rem`, `display` to `block`, and `margin` to `auto` to center the button.
# --hints--
You should continue to target the `.submit-btn` class.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.submit-btn'));
```
Set the `font-size` property to `1.1rem`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.fontSize, '1.1rem');
```
Set the `display` property to `block`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.display, 'block');
```
Set the `margin` property to `auto`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn');
assert.strictEqual(style?.margin, 'auto');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(3px, 3px) scale(0);
transition: all 0.3s ease-in;
}
.contact-method-radio-btn:checked::before {
transform: translate(3px, 3px) scale(1);
background-color: lightgreen;
}
--fcc-editable-region--
.submit-btn {
cursor: pointer;
background-color: royalblue;
color: whitesmoke;
border: none;
border-radius: 6px;
padding: 12px 20px;
}
--fcc-editable-region--
```

411
curriculum/challenges/english/blocks/workshop-parent-teacher-conference-form/68eb3bdd830d4e552f0bb24a.md Normal file
View File

@@ -0,0 +1,411 @@
---
id: 68eb3bdd830d4e552f0bb24a
title: Step 37
challengeType: 0
dashedName: step-37
---
# --description--
Finally, add a hover effect to the submit button for better user feedback.
Select `.submit-btn:hover` and set its `background-color` to `midnightblue`.
Congratulations on finishing this workshop!
# --hints--
You should target the `.submit-btn:hover` pseudo-class.
```js
assert(new __helpers.CSSHelp(document).getStyle('.submit-btn:hover'));
```
Set the `background-color` property to `midnightblue`.
```js
const style = new __helpers.CSSHelp(document).getStyle('.submit-btn:hover');
assert.strictEqual(style?.backgroundColor, 'midnightblue');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label
>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(3px, 3px) scale(0);
transition: all 0.3s ease-in;
}
.contact-method-radio-btn:checked::before {
transform: translate(3px, 3px) scale(1);
background-color: lightgreen;
}
.submit-btn {
cursor: pointer;
background-color: royalblue;
color: whitesmoke;
border: none;
border-radius: 6px;
padding: 12px 20px;
font-size: 1.1rem;
display: block;
margin: auto;
}
--fcc-editable-region--
--fcc-editable-region--
```
# --solutions--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Information: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label
>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
```
```css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(3px, 3px) scale(0);
transition: all 0.3s ease-in;
}
.contact-method-radio-btn:checked::before {
transform: translate(3px, 3px) scale(1);
background-color: lightgreen;
}
.submit-btn {
cursor: pointer;
background-color: royalblue;
color: whitesmoke;
border: none;
border-radius: 6px;
padding: 12px 20px;
font-size: 1.1rem;
display: block;
margin: auto;
}
.submit-btn:hover {
background-color: midnightblue;
}
```

49
curriculum/structure/blocks/workshop-parent-teacher-conference-form.json Normal file
View File

@@ -0,0 +1,49 @@
{
"name": "Design a Parent Teacher Conference Form",
"isUpcomingChange": false,
"dashedName": "workshop-parent-teacher-conference-form",
"helpCategory": "HTML-CSS",
"blockLayout": "challenge-grid",
"challengeOrder": [
{ "id": "68e707257ea91c2e12d489fb", "title": "Step 1" },
{ "id": "68e7e729f6d14f69a23786ef", "title": "Step 2" },
{ "id": "68ea7c41f2555e16174e7cfa", "title": "Step 3" },
{ "id": "68ea81da9f687732368a5322", "title": "Step 4" },
{ "id": "68ea8666b8b473455f5b33ef", "title": "Step 5" },
{ "id": "68ea8a5db73b155708992687", "title": "Step 6" },
{ "id": "68ea8c330ed07b60879f3d38", "title": "Step 7" },
{ "id": "68ea8e6a87a2816b0bb2eb7d", "title": "Step 8" },
{ "id": "68ea8fdf2c9b167307e7f671", "title": "Step 9" },
{ "id": "68ea95c833f0518ae6e366cd", "title": "Step 10" },
{ "id": "68ea975c7cbbb894a386e402", "title": "Step 11" },
{ "id": "68ea9f01c51b66b937793611", "title": "Step 12" },
{ "id": "68eaa310c153c0d0c5c9b78e", "title": "Step 13" },
{ "id": "68eaa668d4d9fbe529a0e16b", "title": "Step 14" },
{ "id": "68eafe1bae175f3b2a87a90d", "title": "Step 15" },
{ "id": "68eb01876d31f24efecb0475", "title": "Step 16" },
{ "id": "68eb058081504963447bfa60", "title": "Step 17" },
{ "id": "68eb07a965e83b6ef95f488a", "title": "Step 18" },
{ "id": "68eb0d455ea45b89bbddd375", "title": "Step 19" },
{ "id": "68eb0f604d821894a88d07d8", "title": "Step 20" },
{ "id": "68eb1089f079099d400162eb", "title": "Step 21" },
{ "id": "68eb1f4e8ccb1cb263b81efe", "title": "Step 22" },
{ "id": "68eb206a76e5d0b9c0b40eb7", "title": "Step 23" },
{ "id": "68eb2161d02d00c013fc44f9", "title": "Step 24" },
{ "id": "68eb2430ac339ace4d2cd0e5", "title": "Step 25" },
{ "id": "68eb25b53c450ed6fc47e37a", "title": "Step 26" },
{ "id": "68eb288f63d818e6e2ff246b", "title": "Step 27" },
{ "id": "68eb29fa879c7deef9806a04", "title": "Step 28" },
{ "id": "68eb2d6986a77e004f583091", "title": "Step 29" },
{ "id": "68eb2ec44a4c4108988f2d7c", "title": "Step 30" },
{ "id": "68eb30a907dc8813531084df", "title": "Step 31" },
{ "id": "68eb323ff5a6dc1cc19fa300", "title": "Step 32" },
{ "id": "68eb33a0e109d026cf545b43", "title": "Step 33" },
{ "id": "68eb372f9b470238bf60577d", "title": "Step 34" },
{ "id": "68eb3a06c6adde47584e2721", "title": "Step 35" },
{ "id": "68eb3acbc5d86e4d53b58d91", "title": "Step 36" },
{ "id": "68eb3bdd830d4e552f0bb24a", "title": "Step 37" }
],
"blockLabel": "workshop",
"usesMultifileEditor": true,
"hasEditableBoundaries": true
}

1
curriculum/structure/superblocks/responsive-web-design-v9.json
View File

@@ -145,6 +145,7 @@
"blocks": [
"lecture-working-with-pseudo-classes-and-pseudo-elements-in-css",
"workshop-greeting-card",
"workshop-parent-teacher-conference-form",
"lab-job-application-form",
"review-css-pseudo-classes",
"quiz-css-pseudo-classes"