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>
This commit is contained in:
Shaun Hamilton
2021-09-28 21:38:44 +01:00
committed by GitHub
parent 92d2119199
commit 2deb73c8d1
71 changed files with 14817 additions and 5 deletions

View File

@@ -0,0 +1,93 @@
---
id: 613e2546d0594208229ada50
title: Part 7
challengeType: 0
dashedName: part-7
---
# --description--
Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element.
The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`.
The `h1` should contain the text `HTML/CSS Quiz`.
# --hints--
You should add an `img` element to the `header` element.
```js
assert.exists(document.querySelector('header > img'));
```
You should add an `h1` element to the `header` element.
```js
assert.exists(document.querySelector('header > h1'));
```
You should add a `nav` element to the `header` element.
```js
assert.exists(document.querySelector('header > nav'));
```
You should place the `img`, `h1`, and `nav` elements in that order.
```js
assert.exists(document.querySelector('img + h1 + nav'));
```
You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
```js
assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
```
You should give the `img` element an `id` attribute of `logo`.
```js
assert.equal(document.querySelector('img')?.id, 'logo');
```
You should give the `h1` element the text `HTML/CSS Quiz`.
```js
assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
```
# --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" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>freeCodeCamp: Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
--fcc-editable-region--
<header>
</header>
--fcc-editable-region--
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```