---
id: 685db0bd1280154ae85bcf9f
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---

# --description--

In this workshop, you will build an accessible planets tablist using HTML, CSS and JavaScript. The HTML boilerplate and CSS have been provided for you.

In these first few steps, you will build out the remaining HTML for the tablist.

Start by creating a `div` element with a class set to `"tabs"`. Inside of that `div` element, add an `h2` element with an `id` attribute set to `"tabs-title"` and the text content `Planets`.

# --hints--

You should have a `div` element.

```js
assert.exists(document.querySelector("div"));
```

Your `div` element should have a class set to `"tabs"`.

```js
assert.exists(document.querySelector("div.tabs"));
```

Your `div` element should have an `h2` element inside of it.

```js
assert.exists(document.querySelector(".tabs h2"));
```

Your `h2` element should have an `id` attribute set to `"tabs-title"`.

```js
assert.equal(document.querySelector(".tabs h2").getAttribute("id"), "tabs-title");
```

Your `h2` element should have the text content `Planets`.

```js
assert.equal(document.querySelector(".tabs h2").textContent, "Planets");
```

# --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>Planets Facts</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    --fcc-editable-region--

    --fcc-editable-region--
    
    <script src="./script.js"></script>
  </body>
</html>
```

```css
.tabs [role="tablist"] {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

[role="tab"] {
  padding: 0.5rem 1rem;
  background: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
  font-weight: bold;
}

[role="tab"][aria-selected="true"] {
  background: #fff;
  border-bottom: 2px solid dodgerblue;
}

[role="tabpanel"] {
  border: 1px solid #ccc;
  padding: 1rem;
}
```
