jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-30 15:04:00 -05:00
Code Issues Projects Releases Wiki Activity

chore(curriculum): add responsive piano workshop (#56734)

Browse Source 
Co-authored-by: Sem Bauke <sem@freecodecamp.org>
This commit is contained in:
Dario-DC
2024-10-19 11:56:56 +02:00
committed by GitHub
parent c803b7b457
commit 0b8cfbf6df
35 changed files with 3677 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2004,7 +2004,13 @@
"Test what you've learned in this quiz of how positioning works in CSS."
]
},
"xebj": { "title": "103", "intro": [] },
"workshop-piano": {
"title": "Design a Piano",
"intro": [
"Responsive Design tells your webpage how it should look on different-sized screens.",
"In this workshop, you'll use CSS and Responsive Design to code a piano. You'll also practice media queries and pseudo selectors."
]
},
"jkdt": { "title": "104", "intro": [] },
"lab-technical-documentation-page": {
"title": "Build a Technical Documentation Page",

11
client/src/pages/learn/front-end-development/workshop-piano/index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Introduction to the Design a Piano
block: workshop-piano
superBlock: front-end-development
---
## Introduction to the Design a Piano
Responsive Design tells your webpage how it should look on different-sized screens.
In this workshop, you'll use CSS and Responsive Design to code a piano. You'll also practice media queries and pseudo selectors.

137
curriculum/challenges/_meta/workshop-piano/meta.json Normal file
View File

@@ -0,0 +1,137 @@
{
"name": "Design a Piano",
"blockType": "workshop",
"isUpcomingChange": true,
"usesMultifileEditor": true,
"hasEditableBoundaries": true,
"dashedName": "workshop-piano",
"order": 103,
"superBlock": "front-end-development",
"challengeOrder": [
{
"id": "612e78af05201622d4bab8aa",
"title": "Step 1"
},
{
"id": "612e7d1c29fb872d6384379c",
"title": "Step 2"
},
{
"id": "612e804c54d5e7308d7ebe56",
"title": "Step 3"
},
{
"id": "612e813b3ba67633222cbe54",
"title": "Step 4"
},
{
"id": "612e8279827a28352ce83a72",
"title": "Step 5"
},
{
"id": "612e83ec2eca1e370f830511",
"title": "Step 6"
},
{
"id": "612e89562043183c86df287c",
"title": "Step 7"
},
{
"id": "612e89d254fe5d3df7d6693d",
"title": "Step 8"
},
{
"id": "612e8eebe3a6dc3fcc33a66f",
"title": "Step 9"
},
{
"id": "612e95ef2e4bdf41f69067f9",
"title": "Step 10"
},
{
"id": "612e96fc87fe8e44f69f7ec5",
"title": "Step 11"
},
{
"id": "612e98f3245c98475e49cfc6",
"title": "Step 12"
},
{
"id": "612e9a21381a1949327512e6",
"title": "Step 13"
},
{
"id": "612e9d142affc44a453655db",
"title": "Step 14"
},
{
"id": "612e9f1e7e5ccd4fa9ada0be",
"title": "Step 15"
},
{
"id": "612ea4c4993aba52ab4aa32e",
"title": "Step 16"
},
{
"id": "612ea97df5742154772f312e",
"title": "Step 17"
},
{
"id": "612ead8788d28655ef8db056",
"title": "Step 18"
},
{
"id": "612eaf56b7ba3257fdbfb0db",
"title": "Step 19"
},
{
"id": "612eb4893b63c75bb9251ddf",
"title": "Step 20"
},
{
"id": "612eb75153591b5e3b1ab65e",
"title": "Step 21"
},
{
"id": "612eb7ca8c275d5f89c73333",
"title": "Step 22"
},
{
"id": "612eb8e984cd73677a92b7e9",
"title": "Step 23"
},
{
"id": "612eb934f64a4d6890a45518",
"title": "Step 24"
},
{
"id": "612ebcba99bfa46a15370b11",
"title": "Step 25"
},
{
"id": "612ebe7fe6d07e6b76d1cae2",
"title": "Step 26"
},
{
"id": "612ebedec97e096c8bf64999",
"title": "Step 27"
},
{
"id": "612ebf9a210f2b6d77001e68",
"title": "Step 28"
},
{
"id": "612ec0490ae8626e9adf82e4",
"title": "Step 29"
},
{
"id": "612ec19d5268da7074941f84",
"title": "Step 30"
},
{
"id": "612ec29c84b9a6718b1f5cec",
"title": "Step 31"
}
],
"helpCategory": "HTML-CSS"
}

58
curriculum/challenges/english/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md Normal file
View File

@@ -0,0 +1,58 @@
---
id: 612e78af05201622d4bab8aa
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---
# --description--
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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md Normal file
View File

@@ -0,0 +1,60 @@
---
id: 612e7d1c29fb872d6384379c
title: Step 2
challengeType: 0
dashedName: step-2
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md Normal file
View File

@@ -0,0 +1,60 @@
---
id: 612e804c54d5e7308d7ebe56
title: Step 3
challengeType: 0
dashedName: step-3
---
# --description--
Within your `.keys` element, add seven `div` elements, each with 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md Normal file
View File

@@ -0,0 +1,95 @@
---
id: 612e813b3ba67633222cbe54
title: Step 4
challengeType: 0
dashedName: step-4
---
# --description--
Remember, a `class` attribute can hold multiple values. To differentiate between your white and black keys, add a second `class` value of `black--key` 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md Normal file
View File

@@ -0,0 +1,74 @@
---
id: 612e8279827a28352ce83a72
title: Step 5
challengeType: 0
dashedName: step-5
---
# --description--
Now, copy the set of seven `.key` elements and paste two additional 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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
```

107
curriculum/challenges/english/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md Normal file
View File

@@ -0,0 +1,107 @@
---
id: 612e83ec2eca1e370f830511
title: Step 6
challengeType: 0
dashedName: step-6
---
# --description--
Add a `link` element inside your `head` element. Set its `rel` attribute to `stylesheet` and its `href` attribute to `styles.css`.
# --hints--
Your code should have a `link` element.
```js
assert.isNotNull(document.querySelector('link'));
```
You should not change your existing `head` tags. Make sure you did not delete the closing tag.
```js
const headElements = document.querySelectorAll('head');
assert.strictEqual(headElements?.length, 1);
```
You should have one `link` element.
```js
assert.strictEqual(document.querySelectorAll('link')?.length, 1);
```
Your `link` element should be inside your `head` element.
```js
const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
const headElementContent = code.match(headContentRegex);
const headElement = document.createElement("head");
headElement.innerHTML = headElementContent;
assert.isNotNull(headElement.querySelector('link'));
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
const linkElement = document.querySelector('link');
const rel = linkElement?.getAttribute("rel");
assert.strictEqual(rel, "stylesheet");
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
const linkElement = document.querySelector('link');
assert.strictEqual(linkElement?.dataset.href, "styles.css");
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
--fcc-editable-region--
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e89562043183c86df287c.md Normal file
View File

@@ -0,0 +1,77 @@
---
id: 612e89562043183c86df287c
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md Normal file
View File

@@ -0,0 +1,83 @@
---
id: 612e89d254fe5d3df7d6693d
title: Step 8
challengeType: 0
dashedName: step-8
---
# --description--
Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their 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 using `*`, and include the pseudo-elements `::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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md Normal file
View File

@@ -0,0 +1,95 @@
---
id: 612e8eebe3a6dc3fcc33a66f
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
Now target your `#piano` element with an `id` selector. Set its `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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md Normal file
View File

@@ -0,0 +1,81 @@
---
id: 612e95ef2e4bdf41f69067f9
title: Step 10
challengeType: 0
dashedName: step-10
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md Normal file
View File

@@ -0,0 +1,102 @@
---
id: 612e96fc87fe8e44f69f7ec5
title: Step 11
challengeType: 0
dashedName: step-11
---
# --description--
Time to style the keys. Below the `#piano` rule, target the `.keys` element 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md Normal file
View File

@@ -0,0 +1,88 @@
---
id: 612e98f3245c98475e49cfc6
title: Step 12
challengeType: 0
dashedName: step-12
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md Normal file
View File

@@ -0,0 +1,89 @@
---
id: 612e9a21381a1949327512e6
title: Step 13
challengeType: 0
dashedName: step-13
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md Normal file
View File

@@ -0,0 +1,117 @@
---
id: 612e9d142affc44a453655db
title: Step 14
challengeType: 0
dashedName: step-14
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md Normal file
View File

@@ -0,0 +1,103 @@
---
id: 612e9f1e7e5ccd4fa9ada0be
title: Step 15
challengeType: 0
dashedName: step-15
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md Normal file
View File

@@ -0,0 +1,119 @@
---
id: 612ea4c4993aba52ab4aa32e
title: Step 16
challengeType: 0
dashedName: step-16
---
# --description--
Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created 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 an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md Normal file
View File

@@ -0,0 +1,110 @@
---
id: 612ea97df5742154772f312e
title: Step 17
challengeType: 0
dashedName: step-17
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md Normal file
View File

@@ -0,0 +1,112 @@
---
id: 612ead8788d28655ef8db056
title: Step 18
challengeType: 0
dashedName: step-18
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md Normal file
View File

@@ -0,0 +1,144 @@
---
id: 612eaf56b7ba3257fdbfb0db
title: Step 19
challengeType: 0
dashedName: step-19
---
# --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 `.keys` 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md Normal file
View File

@@ -0,0 +1,129 @@
---
id: 612eb4893b63c75bb9251ddf
title: Step 20
challengeType: 0
dashedName: step-20
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md Normal file
View File

@@ -0,0 +1,115 @@
---
id: 612eb75153591b5e3b1ab65e
title: Step 21
challengeType: 0
dashedName: step-21
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md Normal file
View File

@@ -0,0 +1,116 @@
---
id: 612eb7ca8c275d5f89c73333
title: Step 22
challengeType: 0
dashedName: step-22
---
# --description--
To soften the sharp edges of the piano and its 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md Normal file
View File

@@ -0,0 +1,117 @@
---
id: 612eb8e984cd73677a92b7e9
title: Step 23
challengeType: 0
dashedName: step-23
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md Normal file
View File

@@ -0,0 +1,118 @@
---
id: 612eb934f64a4d6890a45518
title: Step 24
challengeType: 0
dashedName: step-24
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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;
}
```

139
curriculum/challenges/english/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md Normal file
View File

@@ -0,0 +1,139 @@
---
id: 612ebcba99bfa46a15370b11
title: Step 25
challengeType: 0
dashedName: step-25
---
# --description--
The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
```css
@media (max-width: 960px) {
.card {
padding: 2rem;
}
}
```
Add a media query that will be applied when the viewport is `768px` wide and below.
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md Normal file
View File

@@ -0,0 +1,133 @@
---
id: 612ebe7fe6d07e6b76d1cae2
title: Step 26
challengeType: 0
dashedName: step-26
---
# --description--
Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
# --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 `358px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
const piano = rules?.find(rule => rule.selectorText === '#piano');
assert(piano?.style.width === '358px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md Normal file
View File

@@ -0,0 +1,136 @@
---
id: 612ebedec97e096c8bf64999
title: Step 27
challengeType: 0
dashedName: step-27
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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: 358px;
}
}
--fcc-editable-region--
```

139
curriculum/challenges/english/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md Normal file
View File

@@ -0,0 +1,139 @@
---
id: 612ebf9a210f2b6d77001e68
title: Step 28
challengeType: 0
dashedName: step-28
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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: 358px;
}
.keys {
width: 318px;
}
}
--fcc-editable-region--
```

133
curriculum/challenges/english/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md Normal file
View File

@@ -0,0 +1,133 @@
---
id: 612ec0490ae8626e9adf82e4
title: Step 29
challengeType: 0
dashedName: step-29
---
# --description--
You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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: 358px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
```

154
curriculum/challenges/english/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md Normal file
View File

@@ -0,0 +1,154 @@
---
id: 612ec19d5268da7074941f84
title: Step 30
challengeType: 0
dashedName: step-30
---
# --description--
Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
For example, a media query that targets a display width between 500px and 1000px would be:
```css
@media (min-width: 500px) and (max-width: 1000px){
}
```
Add another `@media` rule to apply if the browser window is wider 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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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: 358px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
--fcc-editable-region--
--fcc-editable-region--
```

288
curriculum/challenges/english/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md Normal file
View File

@@ -0,0 +1,288 @@
---
id: 612ec29c84b9a6718b1f5cec
title: Step 31
challengeType: 0
dashedName: step-31
---
# --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 lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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: 358px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
--fcc-editable-region--
@media (max-width: 1199px) and (min-width: 769px) {
}
--fcc-editable-region--
```
# --solutions--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>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" alt="freeCodeCamp Logo" />
<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: 358px;
}
.keys {
width: 318px;
}
.logo {
width: 150px;
}
}
@media (max-width: 1199px) and (min-width: 769px) {
#piano {
width: 675px;
}
.keys {
width: 633px;
}
}
```

32
curriculum/test/utils/mongo-ids.js
View File

@@ -127,7 +127,37 @@ const duplicatedProjectIds = [
// Cat Painting
// Responsive Piano
'612e78af05201622d4bab8aa',
'612e7d1c29fb872d6384379c',
'612e804c54d5e7308d7ebe56',
'612e813b3ba67633222cbe54',
'612e8279827a28352ce83a72',
'612e83ec2eca1e370f830511',
'612e89562043183c86df287c',
'612e89d254fe5d3df7d6693d',
'612e8eebe3a6dc3fcc33a66f',
'612e95ef2e4bdf41f69067f9',
'612e96fc87fe8e44f69f7ec5',
'612e98f3245c98475e49cfc6',
'612e9a21381a1949327512e6',
'612e9d142affc44a453655db',
'612e9f1e7e5ccd4fa9ada0be',
'612ea4c4993aba52ab4aa32e',
'612ea97df5742154772f312e',
'612ead8788d28655ef8db056',
'612eaf56b7ba3257fdbfb0db',
'612eb4893b63c75bb9251ddf',
'612eb75153591b5e3b1ab65e',
'612eb7ca8c275d5f89c73333',
'612eb8e984cd73677a92b7e9',
'612eb934f64a4d6890a45518',
'612ebcba99bfa46a15370b11',
'612ebe7fe6d07e6b76d1cae2',
'612ebedec97e096c8bf64999',
'612ebf9a210f2b6d77001e68',
'612ec0490ae8626e9adf82e4',
'612ec19d5268da7074941f84',
'612ec29c84b9a6718b1f5cec',
// Technical Documentation Page
'587d78b0367417b2b2512b05',