gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(curriculum): add piano project (#43364)

Browse Source 
* feat: i broke it horribly

* fix: background colour first

* chore: apply shaun's review suggestions

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: missing asserts

* chore: apply shaun's review suggestions

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* chore: apply shaun's review suggestions

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: remove extra background

* fix: meta order

* feat: clarify descriptions

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
2021-09-13 09:51:42 -07:00
committed by GitHub
parent 6996d54fe7
commit 2cf4a7d787
37 changed files with 3685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,6 +89,10 @@
"Pablo Picasso was known for his Cubism style of painting, a style recognized by representations of objects broken down and reassembled from multiple perspectives. Picasso's paintings are often highly abstract and thought provoking.", "Pablo Picasso was known for his Cubism style of painting, a style recognized by representations of objects broken down and reassembled from multiple perspectives. Picasso's paintings are often highly abstract and thought provoking.",
"In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning." "In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
] ]
},
"css-piano": {
"title": "CSS Piano",
"intro": ["", ""]
} }
} }
}, },

1
client/utils/help-category-map.json
View File

@ -8,6 +8,7 @@
"css-grid": "HTML-CSS", "css-grid": "HTML-CSS",
"css-box-model": "HTML-CSS", "css-box-model": "HTML-CSS",
"css-picasso-painting": "HTML-CSS", "css-picasso-painting": "HTML-CSS",
"css-piano": "HTML-CSS",
"responsive-web-design-projects": "HTML-CSS", "responsive-web-design-projects": "HTML-CSS",
"basic-javascript": "JavaScript", "basic-javascript": "JavaScript",
"es6": "JavaScript", "es6": "JavaScript",

146
curriculum/challenges/_meta/css-piano/meta.json Normal file
View File

@ -0,0 +1,146 @@
{
"name": "CSS Piano",
"isUpcomingChange": true,
"dashedName": "css-piano",
"order": 13,
"time": "5 hours",
"template": "",
"required": [],
"superBlock": "responsive-web-design",
"superOrder": 1,
"isBeta": true,
"challengeOrder": [
[
"612e6afc009b450a437940a1",
"Part 1"
],
[
"612e77aba7ca691f598feb02",
"Part 2"
],
[
"612e78af05201622d4bab8aa",
"Part 3"
],
[
"612e7d1c29fb872d6384379c",
"Part 4"
],
[
"612e804c54d5e7308d7ebe56",
"Part 5"
],
[
"612e813b3ba67633222cbe54",
"Part 6"
],
[
"612e8279827a28352ce83a72",
"Part 7"
],
[
"612e83ec2eca1e370f830511",
"Part 8"
],
[
"612e89562043183c86df287c",
"Part 9"
],
[
"612e89d254fe5d3df7d6693d",
"Part 10"
],
[
"612e8eebe3a6dc3fcc33a66f",
"Part 11"
],
[
"612e95ef2e4bdf41f69067f9",
"Part 12"
],
[
"612e96fc87fe8e44f69f7ec5",
"Part 13"
],
[
"612e98f3245c98475e49cfc6",
"Part 14"
],
[
"612e9a21381a1949327512e6",
"Part 15"
],
[
"612e9d142affc44a453655db",
"Part 16"
],
[
"612e9f1e7e5ccd4fa9ada0be",
"Part 17"
],
[
"612ea4c4993aba52ab4aa32e",
"Part 18"
],
[
"612ea97df5742154772f312e",
"Part 19"
],
[
"612ead8788d28655ef8db056",
"Part 20"
],
[
"612eaf56b7ba3257fdbfb0db",
"Part 21"
],
[
"612eb4893b63c75bb9251ddf",
"Part 22"
],
[
"612eb75153591b5e3b1ab65e",
"Part 23"
],
[
"612eb7ca8c275d5f89c73333",
"Part 24"
],
[
"612eb8e984cd73677a92b7e9",
"Part 25"
],
[
"612eb934f64a4d6890a45518",
"Part 26"
],
[
"612ebcba99bfa46a15370b11",
"Part 27"
],
[
"612ebe7fe6d07e6b76d1cae2",
"Part 28"
],
[
"612ebedec97e096c8bf64999",
"Part 29"
],
[
"612ebf9a210f2b6d77001e68",
"Part 30"
],
[
"612ec0490ae8626e9adf82e4",
"Part 31"
],
[
"612ec19d5268da7074941f84",
"Part 32"
],
[
"612ec29c84b9a6718b1f5cec",
"Part 33"
]
]
}

131
curriculum/challenges/english/01-responsive-web-design/css-piano/part-001.md Normal file
View File

@ -0,0 +1,131 @@
---
id: 612e6afc009b450a437940a1
title: Part 1
challengeType: 0
dashedName: part-1
---
# --description--
Begin with the basic HTML structure. Add a `DOCTYPE` declaration and `html`, `head`, `body`, and `title` elements. Set the `title` to `Responsive Web Design Piano`.
# --hints--
Your code should contain the `DOCTYPE` reference.
```js
assert(code.match(/<!DOCTYPE/gi));
```
You should include a space after the `DOCTYPE` reference.
```js
assert(code.match(/<!DOCTYPE\s+/gi));
```
You should define the document type to be `html`.
```js
assert(code.match(/<!DOCTYPE\s+html/gi));
```
You should close the `DOCTYPE` declaration with a `>` after the type.
```js
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
```
Your `html` element should have an opening tag.
```js
assert(code.match(/<html\s*>/gi));
```
Your `html` element should have a closing tag.
```js
assert(code.match(/<\/html\s*>/));
```
Your `html` element should be below the `DOCTYPE` declaration.
```js
assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
```
You should have an opening `head` tag.
```js
assert(code.match(/<head\s*>/i));
```
You should have a closing `head` tag.
```js
assert(code.match(/<\/head\s*>/i));
```
You should have an opening `body` tag.
```js
assert(code.match(/<body\s*>/i));
```
You should have a closing `body` tag.
```js
assert(code.match(/<\/body\s*>/i));
```
The `head` and `body` elements should be siblings.
```js
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
```
The `head` element should be within the `html` element.
```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
```
The `body` element should be within the `html` element.
```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
```
Your code should have a `title` element.
```js
const title = document.querySelector('title');
assert.exists(title);
```
Your project should have a title of `Responsive Web Design Piano`.
```js
const title = document.querySelector('title');
assert.equal(title?.text?.trim()?.toLowerCase(), 'responsive web design piano')
```
Remember, the casing and spelling matter for the title.
```js
const title = document.querySelector('title');
assert.equal(title?.text?.trim(), 'Responsive Web Design Piano');
```
# --seed--
## --seed-contents--
```html
--fcc-editable-region--
--fcc-editable-region--
```
```css
```

64
curriculum/challenges/english/01-responsive-web-design/css-piano/part-002.md Normal file
View File

@ -0,0 +1,64 @@
---
id: 612e77aba7ca691f598feb02
title: Part 2
challengeType: 0
dashedName: part-2
---
# --description--
Add two `meta` tags, one to optimize your page for mobile devices, and one to specify an accepted `charset` for the page.
# --hints--
You should add two `meta` elements to your page.
```js
const meta = document.querySelector('meta');
assert.exists(meta);
```
You should have two `meta` elements.
```js
const meta = document.querySelectorAll('meta');
assert(meta?.length === 2);
```
One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
assert.exists(target);
```
The other `meta` element should have the `charset` attribute set to `UTF-8`.
```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset') === 'UTF-8');
assert.exists(target);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Web Design Piano</title>
--fcc-editable-region--
--fcc-editable-region--
</head>
<body></body>
</html>
```
```css
```

57
curriculum/challenges/english/01-responsive-web-design/css-piano/part-003.md Normal file
View File

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

60
curriculum/challenges/english/01-responsive-web-design/css-piano/part-004.md Normal file
View File

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

60
curriculum/challenges/english/01-responsive-web-design/css-piano/part-005.md Normal file
View File

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

95
curriculum/challenges/english/01-responsive-web-design/css-piano/part-006.md Normal file
View File

@ -0,0 +1,95 @@
---
id: 612e813b3ba67633222cbe54
title: Part 6
challengeType: 0
dashedName: part-6
---
# --description--
Remember that a `class` attribute can have multiple values. To separate your white keys from your black keys, you'll add a second `class` value of `black--key`. Add this to your second, third, fifth, sixth, and seventh `.key` elements.
# --hints--
Your second `.key` element should also have a `class` of `black--key`.
```js
const key = document.querySelectorAll('.key')?.[1];
assert(key?.className?.includes('black--key'));
```
Your third `.key` should have `black--key` in the `class`.
```js
const third = document.querySelectorAll('.key')?.[2];
assert(third?.classList?.contains('black--key'));
```
Your fifth `.key` should have `black--key` in the `class`.
```js
const fifth = document.querySelectorAll('.key')?.[4];
assert(fifth?.classList?.contains('black--key'));
```
Your sixth `.key` should have `black--key` in the `class`.
```js
const sixth = document.querySelectorAll('.key')?.[5];
assert(sixth?.classList?.contains('black--key'));
```
Your seventh `.key` should have `black--key` in the `class`.
```js
const seventh = document.querySelectorAll('.key')?.[6];
assert(seventh?.classList?.contains('black--key'));
```
You should have five `.black--key` elements.
```js
const blackKeys = document.querySelectorAll('.black--key');
assert(blackKeys?.length === 5);
```
You should have seven `.key` elements.
```js
const keys = document.querySelectorAll('.key');
assert(keys?.length === 7);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
--fcc-editable-region--
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
</div>
</div>
--fcc-editable-region--
</body>
</html>
```
```css
```

74
curriculum/challenges/english/01-responsive-web-design/css-piano/part-007.md Normal file
View File

@ -0,0 +1,74 @@
---
id: 612e8279827a28352ce83a72
title: Part 7
challengeType: 0
dashedName: part-7
---
# --description--
Now copy the set of seven `.key` elements, and paste two more sets into the `.keys` div.
# --hints--
You should have 21 `.key` elements.
```js
const keys = document.querySelectorAll('.key');
assert(keys?.length === 21);
```
You should have 15 `.black--key` elements.
```js
const blackKeys = document.querySelectorAll('.black--key');
assert(blackKeys?.length === 15);
```
All `.key` elements should be within your `.keys` element.
```js
const keys = document.querySelector('.keys');
assert(keys?.querySelectorAll('.key')?.length === 21);
```
All `.black--key` elements should be within your `.keys` element.
```js
const keys = document.querySelector('.keys');
assert(keys?.querySelectorAll('.black--key')?.length === 15);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
--fcc-editable-region--
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
--fcc-editable-region--
</body>
</html>
```
```css
```

99
curriculum/challenges/english/01-responsive-web-design/css-piano/part-008.md Normal file
View File

@ -0,0 +1,99 @@
---
id: 612e83ec2eca1e370f830511
title: Part 8
challengeType: 0
dashedName: part-8
---
# --description--
Add a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`.
# --hints--
Your code should have a `link` element.
```js
assert.match(code, /<link/)
```
You should not change your existing `head` tags. Make sure you did not delete the closing tag.
```js
const heads = document.querySelectorAll('head');
assert.equal(heads?.length, 1);
```
Your `link` element should be a self-closing element.
```js
assert(code.match(/<link[\w\W\s]+\/>/i));
```
Your `link` element should be within your `head` element.
```js
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
--fcc-editable-region--
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
--fcc-editable-region--
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
```

77
curriculum/challenges/english/01-responsive-web-design/css-piano/part-009.md Normal file
View File

@ -0,0 +1,77 @@
---
id: 612e89562043183c86df287c
title: Part 9
challengeType: 0
dashedName: part-9
---
# --description--
Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model.
Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
# --hints--
You should have an `html` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('html'));
```
Your `html` selector should have the `box-sizing` property set to `border-box`.
```js
assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
```

83
curriculum/challenges/english/01-responsive-web-design/css-piano/part-010.md Normal file
View File

@ -0,0 +1,83 @@
---
id: 612e89d254fe5d3df7d6693d
title: Part 10
challengeType: 0
dashedName: part-10
---
# --description--
Now that you have reset the `html` box model, you need to pass that on to the elements within as well. To do this, you can set the `box-sizing` property to `inherit`, which will tell the targeted elements to use the same value as the parent element.
You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
For now, create a CSS selector to target all elements with `*`, and include the pseudo-elements with `::before` and `::after`. Set the `box-sizing` property to `inherit`.
# --hints--
You should have a `*, ::before, ::after` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
```
Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
--fcc-editable-region--
html {
box-sizing: border-box;
}
--fcc-editable-region--
```

95
curriculum/challenges/english/01-responsive-web-design/css-piano/part-011.md Normal file
View File

@ -0,0 +1,95 @@
---
id: 612e8eebe3a6dc3fcc33a66f
title: Part 11
challengeType: 0
dashedName: part-11
---
# --description--
Now target your `#piano` element with an `id` selector. Set `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
# --hints--
You should have a `#piano` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano'));
```
Your `#piano` selector should have the `background-color` property set to `#00471b`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
```
Your `#piano` selector should have a `width` property set to `992px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
```
Your `#piano` selector should have the `height` set to `290px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
--fcc-editable-region--
--fcc-editable-region--
```

81
curriculum/challenges/english/01-responsive-web-design/css-piano/part-012.md Normal file
View File

@ -0,0 +1,81 @@
---
id: 612e95ef2e4bdf41f69067f9
title: Part 12
challengeType: 0
dashedName: part-12
---
# --description--
Set the `margin` of the `#piano` to `80px auto`.
# --hints--
Your `#piano` selector should have the `margin` property set to `80px auto`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
--fcc-editable-region--
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
}
--fcc-editable-region--
```

102
curriculum/challenges/english/01-responsive-web-design/css-piano/part-013.md Normal file
View File

@ -0,0 +1,102 @@
---
id: 612e96fc87fe8e44f69f7ec5
title: Part 13
challengeType: 0
dashedName: part-13
---
# --description--
Time to style the keys. Below the `#piano` rule, target the `.keys` with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
# --hints--
You should have a `.keys` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.keys'));
```
Your `.keys` selector should have a `background-color` property set to `#040404`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
```
Your `.keys` selector should have the `width` property set to `949px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
```
Your `.keys` selector should have a `height` property set to `180px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
}
--fcc-editable-region--
--fcc-editable-region--
```

88
curriculum/challenges/english/01-responsive-web-design/css-piano/part-014.md Normal file
View File

@ -0,0 +1,88 @@
---
id: 612e98f3245c98475e49cfc6
title: Part 14
challengeType: 0
dashedName: part-14
---
# --description--
Give the `.keys` a `padding-left` of `2px`.
# --hints--
Your `.keys` selector should have a `padding-left` property set to `2px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
}
--fcc-editable-region--
.keys {
background-color: #040404;
width: 949px;
height: 180px;
}
--fcc-editable-region--
```

89
curriculum/challenges/english/01-responsive-web-design/css-piano/part-015.md Normal file
View File

@ -0,0 +1,89 @@
---
id: 612e9a21381a1949327512e6
title: Part 15
challengeType: 0
dashedName: part-15
---
# --description--
Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
# --hints--
Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
--fcc-editable-region--
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
}
--fcc-editable-region--
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
```

117
curriculum/challenges/english/01-responsive-web-design/css-piano/part-016.md Normal file
View File

@ -0,0 +1,117 @@
---
id: 612e9d142affc44a453655db
title: Part 16
challengeType: 0
dashedName: part-16
---
# --description--
Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
# --hints--
You should have a `.key` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key'));
```
Your `.key` selector should have a `background-color` property set to `#ffffff`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
```
Your `.key` selector should have the `position` property set to `relative`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
```
Your `.key` selector should have a `width` property set to `41px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
```
Your `.key` selector should have a `height` property set to `175px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
--fcc-editable-region--
--fcc-editable-region--
```

103
curriculum/challenges/english/01-responsive-web-design/css-piano/part-017.md Normal file
View File

@ -0,0 +1,103 @@
---
id: 612e9f1e7e5ccd4fa9ada0be
title: Part 17
challengeType: 0
dashedName: part-17
---
# --description--
Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
# --hints--
Your `.key` selector should have a `margin` property set to `2px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
```
Your `.key` selector should have a `float` property set to `left`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
--fcc-editable-region--
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
}
--fcc-editable-region--
```

119
curriculum/challenges/english/01-responsive-web-design/css-piano/part-018.md Normal file
View File

@ -0,0 +1,119 @@
---
id: 612ea4c4993aba52ab4aa32e
title: Part 18
challengeType: 0
dashedName: part-18
---
# --description--
Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new `.key.black--key::after` selector. This will target the elements with the class `key black--key`, and select the pseudo-element after these elements in the HTML.
In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
The `content` property is used to set or override the content of the element. By default, the psuedo-elements created by the `::before` and `::after` pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the `content` property to an empty string `""` will ensure the element is rendered to the page while still being empty.
If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
# --hints--
You should have a `.key.black--key::after` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
```
Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
```
Your `.key.black--key::after` selector should have a `content` property set to `""`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
--fcc-editable-region--
--fcc-editable-region--
```

110
curriculum/challenges/english/01-responsive-web-design/css-piano/part-019.md Normal file
View File

@ -0,0 +1,110 @@
---
id: 612ea97df5742154772f312e
title: Part 19
challengeType: 0
dashedName: part-19
---
# --description--
Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
# --hints--
Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
```
Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
--fcc-editable-region--
.key.black--key::after {
background-color: #1d1e22;
content: "";
}
--fcc-editable-region--
```

112
curriculum/challenges/english/01-responsive-web-design/css-piano/part-020.md Normal file
View File

@ -0,0 +1,112 @@
---
id: 612ead8788d28655ef8db056
title: Part 20
challengeType: 0
dashedName: part-20
---
# --description--
For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
# --hints--
Your `.key.black--key::after` should have a `width` property set to `32px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
```
Your `.key.black--key::after` should have a `height` property set to `100px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
--fcc-editable-region--
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
}
--fcc-editable-region--
```

144
curriculum/challenges/english/01-responsive-web-design/css-piano/part-021.md Normal file
View File

@ -0,0 +1,144 @@
---
id: 612eaf56b7ba3257fdbfb0db
title: Part 21
challengeType: 0
dashedName: part-21
---
# --description--
The piano needs the freeCodeCamp logo to make it official.
Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
# --hints--
You should add a new `img` element.
```js
assert(document.querySelectorAll('img')?.length === 1);
```
Your `img` element should come before your first `.key` element.
```js
const img = document.querySelector('img');
assert(img?.nextElementSibling?.className === 'keys');
assert(img?.previousElementSibling === null);
```
Your `img` element should have a `class` set to logo.
```js
const img = document.querySelector('img');
assert(img?.className === 'logo');
```
Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
```js
const img = document.querySelector('img');
assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
```
Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
```js
assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
```
Remember that casing and spelling matter.
```js
assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
--fcc-editable-region--
<div id="piano">
<div class="keys">
--fcc-editable-region--
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
}
```

129
curriculum/challenges/english/01-responsive-web-design/css-piano/part-022.md Normal file
View File

@ -0,0 +1,129 @@
---
id: 612eb4893b63c75bb9251ddf
title: Part 22
challengeType: 0
dashedName: part-22
---
# --description--
Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
# --hints--
You should have a `.logo` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.logo'));
```
Your `.logo` selector should have a `width` property set to `200px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
```
Your `.logo` selector should have a `position` property set to `absolute`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
```
Your `.logo` selector should have a `top` property set to `23px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
}
--fcc-editable-region--
--fcc-editable-region--
```

115
curriculum/challenges/english/01-responsive-web-design/css-piano/part-023.md Normal file
View File

@ -0,0 +1,115 @@
---
id: 612eb75153591b5e3b1ab65e
title: Part 23
challengeType: 0
dashedName: part-23
---
# --description--
The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
# --hints--
Your `#piano` selector should have a `position` property set to `relative`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
--fcc-editable-region--
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
}
--fcc-editable-region--
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
```

116
curriculum/challenges/english/01-responsive-web-design/css-piano/part-024.md Normal file
View File

@ -0,0 +1,116 @@
---
id: 612eb7ca8c275d5f89c73333
title: Part 24
challengeType: 0
dashedName: part-24
---
# --description--
To smooth the sharp edges of the piano and keys, start by giving the `#piano` a `border-radius` of `10px`.
# --hints--
Your `#piano` selector should have a `border-radius` property set to `10px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
--fcc-editable-region--
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
}
--fcc-editable-region--
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
```

117
curriculum/challenges/english/01-responsive-web-design/css-piano/part-025.md Normal file
View File

@ -0,0 +1,117 @@
---
id: 612eb8e984cd73677a92b7e9
title: Part 25
challengeType: 0
dashedName: part-25
---
# --description--
Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
# --hints--
Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
--fcc-editable-region--
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
}
--fcc-editable-region--
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
```

118
curriculum/challenges/english/01-responsive-web-design/css-piano/part-026.md Normal file
View File

@ -0,0 +1,118 @@
---
id: 612eb934f64a4d6890a45518
title: Part 26
challengeType: 0
dashedName: part-26
---
# --description--
Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
# --hints--
Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
--fcc-editable-region--
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
}
--fcc-editable-region--
.logo {
width: 200px;
position: absolute;
top: 23px;
}
```

127
curriculum/challenges/english/01-responsive-web-design/css-piano/part-027.md Normal file
View File

@ -0,0 +1,127 @@
---
id: 612ebcba99bfa46a15370b11
title: Part 27
challengeType: 0
dashedName: part-27
---
# --description--
Now you need to make it responsive. Add a `@media` query with a `max-width` of `768px`.
# --hints--
You should add a new `@media` query.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
```
Your `@media` query should have a `max-width` of `768px`.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
--fcc-editable-region--
--fcc-editable-region--
```

133
curriculum/challenges/english/01-responsive-web-design/css-piano/part-028.md Normal file
View File

@ -0,0 +1,133 @@
---
id: 612ebe7fe6d07e6b76d1cae2
title: Part 28
challengeType: 0
dashedName: part-28
---
# --description--
Add a new `#piano` selector within your `@media` query, and set the `width` to `335px`.
# --hints--
Your `@media` rule should have a `#piano` selector.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
const piano = rules?.find(rule => rule.selectorText === '#piano');
assert(piano);
```
Your new `#piano` selector should have a `width` of `335px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
const piano = rules?.find(rule => rule.selectorText === '#piano');
assert(piano?.style.width === '335px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
--fcc-editable-region--
@media (max-width: 768px) {
}
--fcc-editable-region--
```

136
curriculum/challenges/english/01-responsive-web-design/css-piano/part-029.md Normal file
View File

@ -0,0 +1,136 @@
---
id: 612ebedec97e096c8bf64999
title: Part 29
challengeType: 0
dashedName: part-29
---
# --description--
Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
# --hints--
Your `@media` rule should have a `.keys` selector.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
const keys = rules?.find(rule => rule.selectorText === '.keys');
assert(keys);
```
Your new `.keys` selector should have a `width` of `318px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
const keys = rules?.find(rule => rule.selectorText === '.keys');
assert(keys?.style.width === '318px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
--fcc-editable-region--
@media (max-width: 768px) {
#piano {
width: 335px;
}
}
--fcc-editable-region--
```

139
curriculum/challenges/english/01-responsive-web-design/css-piano/part-030.md Normal file
View File

@ -0,0 +1,139 @@
---
id: 612ebf9a210f2b6d77001e68
title: Part 30
challengeType: 0
dashedName: part-30
---
# --description--
Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
# --hints--
Your `@media` rule should have a `.logo` selector.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
const logo = rules?.find(rule => rule.selectorText === '.logo');
assert(logo);
```
Your new `.logo` selector should have a `width` of `150px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
const logo = rules?.find(rule => rule.selectorText === '.logo');
assert(logo?.style.width === '150px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
--fcc-editable-region--
@media (max-width: 768px) {
#piano {
width: 335px;
}
.keys {
width: 318px;
}
}
--fcc-editable-region--
```

133
curriculum/challenges/english/01-responsive-web-design/css-piano/part-031.md Normal file
View File

@ -0,0 +1,133 @@
---
id: 612ec0490ae8626e9adf82e4
title: Part 31
challengeType: 0
dashedName: part-31
---
# --description--
You might have noticed the keys collapse when the browser window is smaller than `768px`. Set `overflow` to `hidden` in the first `.keys` selector, to take care of this issue. This property will hide any element that is pushed outside the set `width` value of `.keys`.
# --hints--
Your original `.keys` selector should have the `overflow` property set to `hidden`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
--fcc-editable-region--
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
--fcc-editable-region--
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
@media (max-width: 768px) {
#piano {
width: 335px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
```

144
curriculum/challenges/english/01-responsive-web-design/css-piano/part-032.md Normal file
View File

@ -0,0 +1,144 @@
---
id: 612ec19d5268da7074941f84
title: Part 32
challengeType: 0
dashedName: part-32
---
# --description--
Add another `@media` rule to apply if the browser window is bigger than `769px` but smaller than `1199px`.
# --hints--
You should add a new `@media` query.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
```
Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
```js
const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
overflow: hidden;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
@media (max-width: 768px) {
#piano {
width: 335px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
--fcc-editable-region--
--fcc-editable-region--
```

166
curriculum/challenges/english/01-responsive-web-design/css-piano/part-033.md Normal file
View File

@ -0,0 +1,166 @@
---
id: 612ec29c84b9a6718b1f5cec
title: Part 33
challengeType: 0
dashedName: part-33
---
# --description--
For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
With that, your piano is complete!
# --hints--
Your second `@media` rule should have a `#piano` selector.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const piano = rules?.find(rule => rule.selectorText === '#piano');
assert(piano);
```
Your new `#piano` selector should have a `width` of `675px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const piano = rules?.find(rule => rule.selectorText === '#piano');
assert(piano?.style.width === '675px');
```
Your second `@media` rule should have a `.keys` selector.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const keys = rules?.find(rule => rule.selectorText === '.keys');
assert(keys);
```
Your new `.keys` selector should have a `width` of `633px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
const keys = rules?.find(rule => rule.selectorText === '.keys');
assert(keys?.style.width === '633px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Web Design Piano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="piano">
<img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<div class="keys">
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
<div class="key black--key"></div>
</div>
</div>
</body>
</html>
```
```css
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}
.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
overflow: hidden;
}
.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}
.key.black--key::after {
background-color: #1d1e22;
content: "";
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}
.logo {
width: 200px;
position: absolute;
top: 23px;
}
@media (max-width: 768px) {
#piano {
width: 335px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
--fcc-editable-region--
@media (max-width: 1199px) and (min-width: 769px) {
}
--fcc-editable-region--
```

1
utils/preformatted-block-names.json
View File

@ -4,6 +4,7 @@
"basic-html-and-html5": "Basic HTML and HTML5", "basic-html-and-html5": "Basic HTML and HTML5",
"css-flexbox": "CSS Flexbox", "css-flexbox": "CSS Flexbox",
"css-grid": "CSS Grid", "css-grid": "CSS Grid",
"css-piano": "CSS Piano",
"devops": "DevOps", "devops": "DevOps",
"es6": "ES6", "es6": "ES6",
"information-security-with-helmetjs": "Information Security with HelmetJS", "information-security-with-helmetjs": "Information Security with HelmetJS",