Skip to content

Commit 36c6b27

Browse files
Dario-DCDario-DC
authored
chore(curriculum): add rothko painting workshop (freeCodeCamp#56704)
1 parent 30475ca commit 36c6b27

File tree

48 files changed

+3783
-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.

48 files changed

+3783
-1
lines changed

‎client/i18n/locales/english/intro.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1920,7 +1920,13 @@
19201920
"Test what you've learned in this quiz of how to style forms using CSS."
19211921
]
19221922
},
1923-
"qzcx": { "title": "73", "intro": [] },
1923+
"workshop-rothko-painting": {
1924+
"title": "Design a Rothko Painting",
1925+
"intro": [
1926+
"Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.",
1927+
"In this workshop, you'll use CSS and the Box Model to create your own Rothko-style rectangular art pieces."
1928+
]
1929+
},
19241930
"wozq": { "title": "74", "intro": [] },
19251931
"lab-confidential-email-page": {
19261932
"title": "Build a Confidential Email Page",

‎client/src/pages/learn/front-end-development/workshop-rothko-painting/index.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Introduction to the Design a Rothko Painting
3+
block: workshop-rothko-painting
4+
superBlock: front-end-development
5+
---
6+
7+
## Introduction to the Design a Rothko Painting
8+
9+
Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.
10+
11+
In this workshop, you'll use CSS and the Box Model to create your own Rothko-style rectangular art pieces.

‎curriculum/challenges/_meta/workshop-rothko-painting/meta.json‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
{
2+
"name": "Design a Rothko Painting",
3+
"blockType": "workshop",
4+
"isUpcomingChange": true,
5+
"usesMultifileEditor": true,
6+
"hasEditableBoundaries": true,
7+
"dashedName": "workshop-rothko-painting",
8+
"order": 73,
9+
"superBlock": "front-end-development",
10+
"helpCategory": "HTML-CSS",
11+
"challengeOrder": [
12+
{
13+
"id": "60a3e3396c7b40068ad6996b",
14+
"title": "Step 1"
15+
},
16+
{
17+
"id": "60a3e3396c7b40068ad6996c",
18+
"title": "Step 2"
19+
},
20+
{
21+
"id": "60a3e3396c7b40068ad6996d",
22+
"title": "Step 3"
23+
},
24+
{
25+
"id": "60a3e3396c7b40068ad6996e",
26+
"title": "Step 4"
27+
},
28+
{
29+
"id": "60a3e3396c7b40068ad6996f",
30+
"title": "Step 5"
31+
},
32+
{
33+
"id": "60a3e3396c7b40068ad69970",
34+
"title": "Step 6"
35+
},
36+
{
37+
"id": "60a3e3396c7b40068ad69971",
38+
"title": "Step 7"
39+
},
40+
{
41+
"id": "60a3e3396c7b40068ad69972",
42+
"title": "Step 8"
43+
},
44+
{
45+
"id": "60a3e3396c7b40068ad69973",
46+
"title": "Step 9"
47+
},
48+
{
49+
"id": "60a3e3396c7b40068ad69974",
50+
"title": "Step 10"
51+
},
52+
{
53+
"id": "60a3e3396c7b40068ad69975",
54+
"title": "Step 11"
55+
},
56+
{
57+
"id": "60a3e3396c7b40068ad69976",
58+
"title": "Step 12"
59+
},
60+
{
61+
"id": "60a3e3396c7b40068ad69977",
62+
"title": "Step 13"
63+
},
64+
{
65+
"id": "60a3e3396c7b40068ad69978",
66+
"title": "Step 14"
67+
},
68+
{
69+
"id": "60a3e3396c7b40068ad69979",
70+
"title": "Step 15"
71+
},
72+
{
73+
"id": "60a3e3396c7b40068ad6997a",
74+
"title": "Step 16"
75+
},
76+
{
77+
"id": "60a3e3396c7b40068ad6997b",
78+
"title": "Step 17"
79+
},
80+
{
81+
"id": "60a3e3396c7b40068ad6997c",
82+
"title": "Step 18"
83+
},
84+
{
85+
"id": "60a3e3396c7b40068ad6997d",
86+
"title": "Step 19"
87+
},
88+
{
89+
"id": "60a3e3396c7b40068ad6997e",
90+
"title": "Step 20"
91+
},
92+
{
93+
"id": "60a3e3396c7b40068ad6997f",
94+
"title": "Step 21"
95+
},
96+
{
97+
"id": "60a3e3396c7b40068ad69980",
98+
"title": "Step 22"
99+
},
100+
{
101+
"id": "60a3e3396c7b40068ad69981",
102+
"title": "Step 23"
103+
},
104+
{
105+
"id": "60a3e3396c7b40068ad69982",
106+
"title": "Step 24"
107+
},
108+
{
109+
"id": "60a3e3396c7b40068ad69983",
110+
"title": "Step 25"
111+
},
112+
{
113+
"id": "60a3e3396c7b40068ad69984",
114+
"title": "Step 26"
115+
},
116+
{
117+
"id": "60a3e3396c7b40068ad69986",
118+
"title": "Step 27"
119+
},
120+
{
121+
"id": "60a3e3396c7b40068ad69987",
122+
"title": "Step 28"
123+
},
124+
{
125+
"id": "60a3e3396c7b40068ad69988",
126+
"title": "Step 29"
127+
},
128+
{
129+
"id": "60a3e3396c7b40068ad69989",
130+
"title": "Step 30"
131+
},
132+
{
133+
"id": "60a3e3396c7b40068ad6998a",
134+
"title": "Step 31"
135+
},
136+
{
137+
"id": "60a3e3396c7b40068ad6998b",
138+
"title": "Step 32"
139+
},
140+
{
141+
"id": "60a3e3396c7b40068ad6998c",
142+
"title": "Step 33"
143+
},
144+
{
145+
"id": "60a3e3396c7b40068ad6998d",
146+
"title": "Step 34"
147+
},
148+
{
149+
"id": "60a3e3396c7b40068ad6998e",
150+
"title": "Step 35"
151+
},
152+
{
153+
"id": "60a3e3396c7b40068ad6998f",
154+
"title": "Step 36"
155+
},
156+
{
157+
"id": "60a3e3396c7b40068ad69990",
158+
"title": "Step 37"
159+
},
160+
{
161+
"id": "60a3e3396c7b40068ad69991",
162+
"title": "Step 38"
163+
},
164+
{
165+
"id": "60a3e3396c7b40068ad69992",
166+
"title": "Step 39"
167+
},
168+
{
169+
"id": "60a3e3396c7b40068ad69993",
170+
"title": "Step 40"
171+
},
172+
{
173+
"id": "60a3e3396c7b40068ad69994",
174+
"title": "Step 41"
175+
},
176+
{
177+
"id": "60a3e3396c7b40068ad69995",
178+
"title": "Step 42"
179+
},
180+
{
181+
"id": "60a3e3396c7b40068ad69996",
182+
"title": "Step 43"
183+
},
184+
{
185+
"id": "60a3e3396c7b40068ad69997",
186+
"title": "Step 44"
187+
}
188+
]
189+
}

‎curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
id: 60a3e3396c7b40068ad6996b
3+
title: Step 1
4+
challengeType: 0
5+
dashedName: step-1
6+
demoType: onLoad
7+
---
8+
9+
# --description--
10+
11+
Begin your project by adding an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` within the `body` element.
12+
13+
# --hints--
14+
15+
Your code should have an `img` element.
16+
17+
```js
18+
assert(document.querySelectorAll('img').length === 1);
19+
```
20+
21+
The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
22+
23+
```js
24+
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
25+
```
26+
27+
# --seed--
28+
29+
## --seed-contents--
30+
31+
```html
32+
<!DOCTYPE html>
33+
<html lang="en">
34+
<head>
35+
<meta charset="UTF-8">
36+
<title>Rothko Painting</title>
37+
</head>
38+
--fcc-editable-region--
39+
<body>
40+
</body>
41+
--fcc-editable-region--
42+
</html>
43+
```

‎curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
id: 60a3e3396c7b40068ad6996c
3+
title: Step 2
4+
challengeType: 0
5+
dashedName: step-2
6+
---
7+
8+
# --description--
9+
10+
In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas.
11+
12+
Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element.
13+
14+
Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
15+
16+
# --hints--
17+
18+
The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
19+
20+
```js
21+
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
22+
```
23+
24+
# --seed--
25+
26+
## --seed-contents--
27+
28+
```html
29+
<!DOCTYPE html>
30+
<html lang="en">
31+
<head>
32+
<meta charset="UTF-8">
33+
<title>Rothko Painting</title>
34+
</head>
35+
<body>
36+
--fcc-editable-region--
37+
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
38+
--fcc-editable-region--
39+
</body>
40+
</html>
41+
```
42+

‎curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
id: 60a3e3396c7b40068ad6996d
3+
title: Step 3
4+
challengeType: 0
5+
dashedName: step-3
6+
---
7+
8+
# --description--
9+
10+
The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
11+
12+
Think of the border like the cardboard box your item was shipped in.
13+
14+
Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
15+
16+
# --hints--
17+
18+
The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
19+
20+
```js
21+
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
22+
```
23+
24+
# --seed--
25+
26+
## --seed-contents--
27+
28+
```html
29+
<!DOCTYPE html>
30+
<html lang="en">
31+
<head>
32+
<meta charset="UTF-8">
33+
<title>Rothko Painting</title>
34+
</head>
35+
<body>
36+
--fcc-editable-region--
37+
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
38+
--fcc-editable-region--
39+
</body>
40+
</html>
41+
```

‎curriculum/challenges/english/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
id: 60a3e3396c7b40068ad6996e
3+
title: Step 4
4+
challengeType: 0
5+
dashedName: step-4
6+
---
7+
8+
# --description--
9+
10+
Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
11+
12+
Here the bottom element has a larger top margin, pushing it further down the page.
13+
14+
Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
15+
16+
Remove the `<img>` element.
17+
18+
# --hints--
19+
20+
You should not have an `img` element in your code.
21+
22+
```js
23+
assert(document.querySelector('img') === null);
24+
```
25+
26+
# --seed--
27+
28+
## --seed-contents--
29+
30+
```html
31+
<!DOCTYPE html>
32+
<html lang="en">
33+
<head>
34+
<meta charset="UTF-8">
35+
<title>Rothko Painting</title>
36+
</head>
37+
<body>
38+
--fcc-editable-region--
39+
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
40+
--fcc-editable-region--
41+
</body>
42+
</html>
43+
```

0 commit comments

Comments
 (0)