Back to Freecodecamp

Step 1

curriculum/challenges/english/blocks/workshop-game-settings-panel/68e6a99a0fd7386fb66e156f.md

latest1.2 KB
Original Source

--description--

In this workshop, you will practice styling checkboxes by building a game settings panel.

All of the HTML boilerplate (DOCTYPE, html, head and body) has been provided for you.

Within the body, create a div element with an h1 element nested inside. Give the h1 element the text Game Settings

--hints--

You should have a div element.

js
assert.lengthOf(document.querySelectorAll("div"), 1);

You should have an h1 element.

js
assert.lengthOf(document.querySelectorAll("h1"), 1);

Your h1 element should be inside of your div element.

js
assert.exists(document.querySelector("div")?.querySelector("h1"));

Your h1 element should have the text Game Settings.

js
assert.match(document.querySelector("h1")?.textContent, /Game Settings/);

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Settings Panel</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
--fcc-editable-region--
    
--fcc-editable-region--
  </body>
</html>