Skip to content

Commit ddfe978

Browse files
jdwilkin4Sembauke
andauthored
feat(curriculum): add registration form workshop to cert (freeCodeCamp#56724)
Co-authored-by: Sem Bauke <[email protected]>
1 parent 5180249 commit ddfe978

File tree

64 files changed

+6940
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+6940
-1
lines changed

client/i18n/locales/english/intro.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1911,7 +1911,13 @@
19111911
"Test what you've learned in this quiz of using colors in CSS."
19121912
]
19131913
},
1914-
"jnqt": { "title": "68", "intro": [] },
1914+
"workshop-registration-form": {
1915+
"title": "Design a Registration Form",
1916+
"intro": [
1917+
"You can use HTML forms to collect information from people who visit your webpage.",
1918+
"In this workshop, you'll learn how to design HTML forms by designing a signup page. You'll learn how to control what types of data people can type into your form, and some new CSS tools for styling your page."
1919+
]
1920+
},
19151921
"vkei": { "title": "69", "intro": [] },
19161922
"lab-contact-form": {
19171923
"title": "Design a Contact Form",
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Introduction to the Design a Registration Form
3+
block: workshop-registration-form
4+
superBlock: front-end-development
5+
---
6+
7+
## Introduction to the Design a Registration Form
8+
9+
This is a test for the new project-based curriculum.
Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
{
2+
"name": "Design a Registration Form",
3+
"blockType": "workshop",
4+
"isUpcomingChange": true,
5+
"usesMultifileEditor": true,
6+
"hasEditableBoundaries": true,
7+
"dashedName": "workshop-registration-form",
8+
"order": 68,
9+
"superBlock": "front-end-development",
10+
"challengeOrder": [
11+
{
12+
"id": "60f02e7361b68405e27b62a5",
13+
"title": "Step 1"
14+
},
15+
{
16+
"id": "60f030d388cb74067cf291c3",
17+
"title": "Step 2"
18+
},
19+
{
20+
"id": "60f1922fcbd2410527b3bd89",
21+
"title": "Step 3"
22+
},
23+
{
24+
"id": "60f1a5e2d2c23707a4f9a660",
25+
"title": "Step 4"
26+
},
27+
{
28+
"id": "60f1a9cbd23023082e149fee",
29+
"title": "Step 5"
30+
},
31+
{
32+
"id": "60f5c3e399ff1a05629964e4",
33+
"title": "Step 6"
34+
},
35+
{
36+
"id": "63541ef4f96cd82e8e6c788a",
37+
"title": "Step 7"
38+
},
39+
{
40+
"id": "60f5cb8875ab6a0610f05071",
41+
"title": "Step 8"
42+
},
43+
{
44+
"id": "60f5d2776c854e069560fbe6",
45+
"title": "Step 9"
46+
},
47+
{
48+
"id": "60f5dc35c07ac1078f140916",
49+
"title": "Step 10"
50+
},
51+
{
52+
"id": "60f803d5241e6a0433a523a1",
53+
"title": "Step 11"
54+
},
55+
{
56+
"id": "60f805f813eaf2049bc2ceea",
57+
"title": "Step 12"
58+
},
59+
{
60+
"id": "62ff8b9dab5ac88e4d3d43a3",
61+
"title": "Step 13"
62+
},
63+
{
64+
"id": "60f80e0081e0f2052ae5b505",
65+
"title": "Step 14"
66+
},
67+
{
68+
"id": "60f81167d0d4910809f88945",
69+
"title": "Step 15"
70+
},
71+
{
72+
"id": "60f81616cff80508badf9ad5",
73+
"title": "Step 16"
74+
},
75+
{
76+
"id": "60f83e7bfc09900959f41e20",
77+
"title": "Step 17"
78+
},
79+
{
80+
"id": "60f84ec41116b209c280ba91",
81+
"title": "Step 18"
82+
},
83+
{
84+
"id": "60f852f645b5310a8264f555",
85+
"title": "Step 19"
86+
},
87+
{
88+
"id": "60f85a62fb30c80bcea0cedb",
89+
"title": "Step 20"
90+
},
91+
{
92+
"id": "60f8604682407e0d017bbf7f",
93+
"title": "Step 21"
94+
},
95+
{
96+
"id": "60f8618d191b940d62038513",
97+
"title": "Step 22"
98+
},
99+
{
100+
"id": "60fab4a123ce4b04526b082b",
101+
"title": "Step 23"
102+
},
103+
{
104+
"id": "65045fa2267ce52da6a73676",
105+
"title": "Step 24"
106+
},
107+
{
108+
"id": "62ff8e998d3e7eae14d6ae3b",
109+
"title": "Step 25"
110+
},
111+
{
112+
"id": "60fab8367d35de04e5cb7929",
113+
"title": "Step 26"
114+
},
115+
{
116+
"id": "60fab9f17fa294054b74228c",
117+
"title": "Step 27"
118+
},
119+
{
120+
"id": "60fabf0dd4959805dbae09e6",
121+
"title": "Step 28"
122+
},
123+
{
124+
"id": "60fac4095512d3066053d73c",
125+
"title": "Step 29"
126+
},
127+
{
128+
"id": "60fac56271087806def55b33",
129+
"title": "Step 30"
130+
},
131+
{
132+
"id": "60fac8d7fdfaee0796934f20",
133+
"title": "Step 31"
134+
},
135+
{
136+
"id": "60faca286cb48b07f6482970",
137+
"title": "Step 32"
138+
},
139+
{
140+
"id": "60facde2d0dc61085b41063f",
141+
"title": "Step 33"
142+
},
143+
{
144+
"id": "62ff919a7b5612c0670923a5",
145+
"title": "Step 34"
146+
},
147+
{
148+
"id": "60facf914c7b9b08d7510c2c",
149+
"title": "Step 35"
150+
},
151+
{
152+
"id": "60fad0a812d9890938524f50",
153+
"title": "Step 36"
154+
},
155+
{
156+
"id": "60fad1cafcde010995e15306",
157+
"title": "Step 37"
158+
},
159+
{
160+
"id": "60fad6dfcc0d930a59becf12",
161+
"title": "Step 38"
162+
},
163+
{
164+
"id": "60fad8e6148f310bba7890b1",
165+
"title": "Step 39"
166+
},
167+
{
168+
"id": "60fad99e09f9d30c1657e790",
169+
"title": "Step 40"
170+
},
171+
{
172+
"id": "60fadb18058e950c73925279",
173+
"title": "Step 41"
174+
},
175+
{
176+
"id": "60fadce90f85c50d0bb0dd4f",
177+
"title": "Step 42"
178+
},
179+
{
180+
"id": "62b30924c5e4ef0daba23b5e",
181+
"title": "Step 43"
182+
},
183+
{
184+
"id": "60fadd972e6ffe0d6858fa2d",
185+
"title": "Step 44"
186+
},
187+
{
188+
"id": "60fadfa2b540b70dcfa8b771",
189+
"title": "Step 45"
190+
},
191+
{
192+
"id": "60fc219d333e37046f474a6e",
193+
"title": "Step 46"
194+
},
195+
{
196+
"id": "60fc22d1e64d1b04cdd4e602",
197+
"title": "Step 47"
198+
},
199+
{
200+
"id": "60fc236dc04532052926fdac",
201+
"title": "Step 48"
202+
},
203+
{
204+
"id": "60ffe1bc30415f042faea936",
205+
"title": "Step 49"
206+
},
207+
{
208+
"id": "60ffe3936796ac04959285a9",
209+
"title": "Step 50"
210+
},
211+
{
212+
"id": "60ffe4f4ec18cd04dc470c56",
213+
"title": "Step 51"
214+
},
215+
{
216+
"id": "60ffe69ee377c6055e192a46",
217+
"title": "Step 52"
218+
},
219+
{
220+
"id": "60ffe7d8aae62c05bcc9e7eb",
221+
"title": "Step 53"
222+
},
223+
{
224+
"id": "60ffe8a5ceb0e90618db06d9",
225+
"title": "Step 54"
226+
},
227+
{
228+
"id": "60ffe947a868ec068f7850f6",
229+
"title": "Step 55"
230+
},
231+
{
232+
"id": "60ffe9cb47809106eda2f2c9",
233+
"title": "Step 56"
234+
},
235+
{
236+
"id": "60ffec2825da1007509ddd06",
237+
"title": "Step 57"
238+
},
239+
{
240+
"id": "60ffecefac971607ae73c60f",
241+
"title": "Step 58"
242+
},
243+
{
244+
"id": "60ffefd6479a3d084fb77cbc",
245+
"title": "Step 59"
246+
},
247+
{
248+
"id": "6537e0be715fcb57d31ba8c3",
249+
"title": "Step 60"
250+
}
251+
],
252+
"helpCategory": "HTML-CSS"
253+
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
id: 60f02e7361b68405e27b62a5
3+
title: Step 1
4+
challengeType: 0
5+
dashedName: step-1
6+
demoType: onLoad
7+
---
8+
9+
# --description--
10+
11+
In this workshop, you will learn how to style forms by designing a registration form.
12+
13+
All of the HTML boilerplate (`DOCTYPE`, `html`, `head`, and `body`) has been provided for you.
14+
15+
Within the `body`, add a heading to give context to the form by using an `h1` element with the text `Registration Form`.
16+
17+
# --hints--
18+
19+
You should add the `h1` within the `body`.
20+
21+
```js
22+
assert.exists(document.querySelector('body > h1'));
23+
```
24+
25+
You should give the `h1` the text `Registration Form`.
26+
27+
```js
28+
assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form');
29+
```
30+
31+
# --seed--
32+
33+
## --seed-contents--
34+
35+
```html
36+
<!DOCTYPE html>
37+
<html lang="en">
38+
<head>
39+
<meta charset="UTF-8">
40+
<title>Registration Form</title>
41+
<link rel="stylesheet" href="styles.css" />
42+
</head>
43+
--fcc-editable-region--
44+
<body>
45+
46+
</body>
47+
--fcc-editable-region--
48+
</html>
49+
```
50+
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
id: 60f030d388cb74067cf291c3
3+
title: Step 2
4+
challengeType: 0
5+
dashedName: step-2
6+
---
7+
8+
# --description--
9+
10+
Below the heading, use the following text within a paragraph element to encourage users to register:
11+
12+
```md
13+
Please fill out this form with the required information
14+
```
15+
16+
# --hints--
17+
18+
You should add a `p` element within the `body`.
19+
20+
```js
21+
assert.exists(document.querySelector('body > p'));
22+
```
23+
24+
You should add the `p` element below the `h1`.
25+
26+
```js
27+
assert.exists(document.querySelector('h1 + p'));
28+
```
29+
30+
You should give the `p` element a text of `Please fill out this form with the required information`.
31+
32+
```js
33+
assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information');
34+
```
35+
36+
# --seed--
37+
38+
## --seed-contents--
39+
40+
```html
41+
<!DOCTYPE html>
42+
<html lang="en">
43+
<head>
44+
<meta charset="UTF-8">
45+
<title>Registration Form</title>
46+
<link rel="stylesheet" href="styles.css" />
47+
</head>
48+
--fcc-editable-region--
49+
<body>
50+
<h1>Registration Form</h1>
51+
52+
</body>
53+
--fcc-editable-region--
54+
</html>
55+
```
56+

0 commit comments

Comments
 (0)