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
@@ -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--
|
||||
```
|
||||
Reference in New Issue
Block a user