gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
340581e8889be906c1433180c804f8f3d2510178
freeCodeCamp/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/step-009.md
Shaun Hamilton 10f0d3c07a fix: new practice project tests (#44554) 
* fix accessibility-quiz and reg-form tests

(cherry picked from commit 467f0b3e78)

* fix: registration-form tests

* fix: ferris wheel tests

* fix: photo-gallery tests

* fix: magazine tests

(cherry picked from commit 5831c2345d)

* fix: picasso tests

* fix: piano tests

* fix: magazine and nutrition tests

* fix: again magazine...I am doing this in sill order

* chore: resolve discrepancies with tests

(cherry picked from commit a7b5e031df)

* fix: the stuffs...I am tired

* fix: oops

(cherry picked from commit 05ff55a036)

* fix: add missing solutions

(cherry picked from commit 61fa23fc70)

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
2021-12-22 08:16:59 -08:00

1.9 KiB
Raw Blame History

id, title, challengeType, dashedName
id title challengeType dashedName
612e89562043183c86df287c Step 9 0 step-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.

assert(new __helpers.CSSHelp(document).getStyle('html'));

Your html selector should have the box-sizing property set to border-box.

assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');

--seed--

--seed-contents--

<!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>

--fcc-editable-region--

--fcc-editable-region--