freeCodeCamp/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/step-003.md

---
id: 61329b210dac0b08047fd6ab
title: Step 3
challengeType: 0
dashedName: step-3
---

# --description--

Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation).

Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page.

# --hints--

You should create another `meta` element in the `head`.

```js
assert.equal(document.querySelectorAll('body > meta')?.length, 2);
```

You should give the `meta` a `name` attribute of `viewport`.

```js
assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);
```

You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.

```js
// TODO: Double-check this is the only correct answer
assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
--fcc-editable-region--
  <body>

  </body>
</html>

```

```css
body {
	background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}
```
feat(curriculum): add accessibility-quiz practice project (#43244) * feat(curriculum): add accessibility-quiz practice project * add parts 002-006 * add parts 7-8, tentative on logo aspect-ratio * add parts 008-013 * add parts 013-016 * add parts 017-026 * add parts 026-027 * add parts 027-029 * add parts 029-044 * add parts 044-067 - all parts done * add tests 001-009 * add tests 010 - 033 * add tests 034 - 039 * update tests 008~033, add tests 040-050 * add all tests * fix some stuff, remove final.md * take reasonable suggestions from Nich, ignore rest Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * replace svg link with actual CDN * remove getAttribute in potentially bad places * add method to form * fix silly querySelectors * adjust selectors for 028 * fix selectors, and add color transformations Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com> * fix: typos, and make one test lenient Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> 2021-09-28 21:38:44 +01:00			`---`
			`id: 61329b210dac0b08047fd6ab`
chore: rename "part" to "step" (#43934) * chore: rename part to step * chore: update metas * chore: more renaming * chore: update tooling * chore: update frontmatter * chore(tools): title testing 2021-10-21 10:07:52 -07:00			`title: Step 3`
feat(curriculum): add accessibility-quiz practice project (#43244) * feat(curriculum): add accessibility-quiz practice project * add parts 002-006 * add parts 7-8, tentative on logo aspect-ratio * add parts 008-013 * add parts 013-016 * add parts 017-026 * add parts 026-027 * add parts 027-029 * add parts 029-044 * add parts 044-067 - all parts done * add tests 001-009 * add tests 010 - 033 * add tests 034 - 039 * update tests 008~033, add tests 040-050 * add all tests * fix some stuff, remove final.md * take reasonable suggestions from Nich, ignore rest Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * replace svg link with actual CDN * remove getAttribute in potentially bad places * add method to form * fix silly querySelectors * adjust selectors for 028 * fix selectors, and add color transformations Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com> * fix: typos, and make one test lenient Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> 2021-09-28 21:38:44 +01:00			`challengeType: 0`
chore: rename "part" to "step" (#43934) * chore: rename part to step * chore: update metas * chore: more renaming * chore: update tooling * chore: update frontmatter * chore(tools): title testing 2021-10-21 10:07:52 -07:00			`dashedName: step-3`
feat(curriculum): add accessibility-quiz practice project (#43244) * feat(curriculum): add accessibility-quiz practice project * add parts 002-006 * add parts 7-8, tentative on logo aspect-ratio * add parts 008-013 * add parts 013-016 * add parts 017-026 * add parts 026-027 * add parts 027-029 * add parts 029-044 * add parts 044-067 - all parts done * add tests 001-009 * add tests 010 - 033 * add tests 034 - 039 * update tests 008~033, add tests 040-050 * add all tests * fix some stuff, remove final.md * take reasonable suggestions from Nich, ignore rest Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * replace svg link with actual CDN * remove getAttribute in potentially bad places * add method to form * fix silly querySelectors * adjust selectors for 028 * fix selectors, and add color transformations Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com> * fix: typos, and make one test lenient Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> 2021-09-28 21:38:44 +01:00			`---`

			`# --description--`

			Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation).

			Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page.

			`# --hints--`

			You should create another `meta` element in the `head`.

			```js
			`assert.equal(document.querySelectorAll('body > meta')?.length, 2);`
			```

			You should give the `meta` a `name` attribute of `viewport`.

			```js
			`assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);`
			```

			You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.

			```js
			`// TODO: Double-check this is the only correct answer`
			`assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);`
			```

			`# --seed--`

			`## --seed-contents--`

			```html
			`<!DOCTYPE html>`
			`<html lang="en">`
			`--fcc-editable-region--`
			`<head>`
			`<meta charset="UTF-8" />`
			`<link rel="stylesheet" href="styles.css" />`
			`</head>`
			`--fcc-editable-region--`
			`<body>`

			`</body>`
			`</html>`

			```

			```css
			`body {`
			`background: #f5f6f7;`
			`color: #1b1b32;`
			`font-family: Helvetica;`
			`margin: 0;`
			`}`
			```