gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(curriculum): add accessibility-quiz practice project (#43244)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

89
curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-010.md Normal file
View File

@@ -0,0 +1,89 @@
---
id: 6140883f74224508174794c0
title: Part 10
challengeType: 0
dashedName: part-10
---
# --description--
Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_.
# --hints--
You should use the `header` element selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
```
You should give the `header` a `width` of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
```
You should give the `header` a `height` of `50px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
```
You should give the `header` a `background-color` of `#1b1b32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
```
You should give the `header` a `display` of `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
```
# --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>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
```