feat(curriculum): add piano project (#43364)
* 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)
committed by
GitHub
GitHub
parent
6996d54fe7
commit
2cf4a7d787
@ -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.",
|
||||
"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": ["", ""]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
"css-grid": "HTML-CSS",
|
||||
"css-box-model": "HTML-CSS",
|
||||
"css-picasso-painting": "HTML-CSS",
|
||||
"css-piano": "HTML-CSS",
|
||||
"responsive-web-design-projects": "HTML-CSS",
|
||||
"basic-javascript": "JavaScript",
|
||||
"es6": "JavaScript",
|
||||
|
||||
146
curriculum/challenges/_meta/css-piano/meta.json
Normal file
146
curriculum/challenges/_meta/css-piano/meta.json
Normal 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"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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
|
||||
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -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--
|
||||
```
|
||||
@ -4,6 +4,7 @@
|
||||
"basic-html-and-html5": "Basic HTML and HTML5",
|
||||
"css-flexbox": "CSS Flexbox",
|
||||
"css-grid": "CSS Grid",
|
||||
"css-piano": "CSS Piano",
|
||||
"devops": "DevOps",
|
||||
"es6": "ES6",
|
||||
"information-security-with-helmetjs": "Information Security with HelmetJS",
|
||||
|
||||
Reference in New Issue
Block a user