chore(i18n,learn): processed translations (#45682)
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 613e275749ebd008e74bb62e
|
||||
title: Passo 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Uma propriedade útil de um _SVG_ (gráficos vetoriais escaláveis) é o atributo `path` (caminho), que permite que a imagem seja dimensionada sem afetar a resolução da imagem resultante.
|
||||
|
||||
Atualmente, o `img` está assumindo que é o tamanho padrão, o que é muito grande. Para arrumar, dimensione a imagem usando o `id` como seletor e defina a largura `width` como `max(100px, 18vw)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `#logo` para direcionar o elemento `img`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
|
||||
```
|
||||
|
||||
Você deve dar à `img` uma `width` de `max(100px, 18vw)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
|
||||
```
|
||||
|
||||
# --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>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--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 6140827cff96e906bd38fc2b
|
||||
title: Passo 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Como descrito no [guia de estilo do freeCodeCamp](https://design-style-guide.freecodecamp.org/), o logotipo deve manter uma proporção de `35:4` e um preenchimento (padding) ao redor do texto.
|
||||
|
||||
Primeiro, altere a `background-color` para `#0a0a23` para ver o logotipo. Em seguida, use a propriedade `aspect-ratio` para definir a proporção desejada. Por fim, adicione um `padding` de `0.4rem` ao redor.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar a `#logo` uma `background-color` de `#0a0a23`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
Você deve usar a propriedade `aspect-ratio`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
|
||||
```
|
||||
|
||||
Você não deve usar a propriedade `height`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
|
||||
```
|
||||
|
||||
Você não deve alterar a propriedade `width`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
|
||||
```
|
||||
|
||||
Você deve dar ao `img` um `aspect-ratio` de `35 / 4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
|
||||
```
|
||||
|
||||
Você deve dar ao `img` um `padding` de `0.4rem`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
|
||||
```
|
||||
|
||||
# --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>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--
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 6140883f74224508174794c0
|
||||
title: Passo 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Faça com que o `header` ocupe toda a largura de seu contêiner pai, defina sua `height` como `50px` e defina a `background-color< /code> para <code>#1b1b32`. Em seguida, defina o `display` para usar o _Flexbox_.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor de elemento `header`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
|
||||
```
|
||||
|
||||
Você deve dar ao `header` uma `width` de `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
|
||||
```
|
||||
|
||||
Você deve dar ao `header` uma `height` de `50px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
|
||||
```
|
||||
|
||||
Você deve dar ao `header` uma `background-color` de `#1b1b32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
|
||||
```
|
||||
|
||||
Você deve dar ao `header` um `display` de `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>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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 61408e4ae3e35d08feb260eb
|
||||
title: Passo 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Altere a cor da fonte `h1` para `#f1be32`, e defina o tamanho da fonte para `min(5vw, 1.2em)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor de elemento `h1`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
Você deve dar ao `h1` uma `color` com o valor de `#f1be32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
|
||||
```
|
||||
|
||||
Você deve dar ao `h1` uma `font-size` de `min(5vw, 1.2em)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
|
||||
```
|
||||
|
||||
# --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>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;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 61408f155e798909b6908712
|
||||
title: Passo 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para permitir a navegação na página, adicione uma lista não ordenada com os três itens da lista a seguir:
|
||||
|
||||
- `INFO`
|
||||
- `HTML`
|
||||
- `CSS`
|
||||
|
||||
O texto da lista de itens deve estar envolvido pelas tags de âncora.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aninhar um elemento `ul` dentro de `nav`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar três elementos `li` dentro do elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `a` dentro de cada elemento `li`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `a` o texto `INFO`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `a` o texto `HTML`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `a` o texto `CSS`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
--fcc-editable-region--
|
||||
<nav>
|
||||
|
||||
</nav>
|
||||
--fcc-editable-region--
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 6141fabd6f75610664e908fd
|
||||
title: Passo 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Como este é um quiz, você precisará de um formulário para os usuários enviarem respostas. Você pode separar semanticamente o conteúdo do formulário usando elementos `section`.
|
||||
|
||||
Dentro do elemento `main`, crie um formulário com três elementos `section` dentro dele. Em seguida, faça o formulário enviar o conteúdo para `https://freecodecamp.org/practice-project/accessibility-quiz`, usando o método correto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um elemento `form` dentro do elemento `main`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('main > form'));
|
||||
```
|
||||
|
||||
Você precisa de três elementos `section` dentro do elemento `form`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `form` um atributo `action`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('main > form')?.action);
|
||||
```
|
||||
|
||||
Você deve dar ao atributo `action` um valor de `https://freecodecamp.org/practice-project/accessibility-quiz`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `form` um atributo `method`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('main > form')?.method);
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `form` um atributo `method` com o valor de `post`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 6141fed65b61320743da5894
|
||||
title: Passo 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para aumentar a acessibilidade da página, o atributo `role` pode ser usado para indicar para tecnologias assistivas a finalidade por trás de um elemento na página. O atributo `role` é parte da _Iniciativa de Acessibilidade da Web_ (WAI) e aceita valores pré-definidos.
|
||||
|
||||
Dê a cada elemento `section` a função `region`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dê ao primeiro elemento `section` a função `region`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
|
||||
```
|
||||
|
||||
Dê ao segundo elemento `section` a função `region`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
|
||||
```
|
||||
|
||||
Dê ao terceiro elemento `section` a função `region`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,171 @@
|
||||
---
|
||||
id: 614202874ca576084fca625f
|
||||
title: Passo 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Cada função `region` requer um rótulo visível, que deve ser referenciado pelo atributo `aria-labelledby`.
|
||||
|
||||
Para os elementos `section`, forneça os seguintes atributos `aria-labelledby`:
|
||||
|
||||
- `student-info`
|
||||
- `html-questions`
|
||||
- `css-questions`
|
||||
|
||||
Então, dentro de cada elemento `section`, aninhe um elemento `h2` com um `id` que corresponda ao atributo `aria-labelledby` correspondente. Dê a cada `h2` conteúdo de texto adequado.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro elemento `section` um atributo `aria-labelledby` de `student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `section` um atributo `aria-labelledby` de `html-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `section` um atributo `aria-labelledby` de `css-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `h2` dentro do primeiro elemento `section`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `h2` dentro do segundo elemento `section`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `h2` dentro do terceiro elemento `section`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `h2` um atributo `id` de `student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `h2` um atributo `id` de `html-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `h2` um atributo `id` de `css-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `h2` um conteúdo de texto adequado. _Dica: eu teria escolhido `Student Info`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Você deve fornecer ao segundo elemento `h2` um conteúdo de texto adequado. _Dica: eu teria escolhido `HTML`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Você deve fornecer ao terceiro elemento `h2` um conteúdo de texto adequado. _Dica: eu teria escolhido `CSS`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region"></section>
|
||||
<section role="region"></section>
|
||||
<section role="region"></section>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 614206033d366c090ca7dd42
|
||||
title: Passo 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O tipo de letra desempenha um papel importante na acessibilidade de uma página. Algumas fontes são mais fáceis de ler do que outras. Isso é especialmente verdadeiro em telas de baixa resolução.
|
||||
|
||||
Altere a fonte dos elementos `h1` e `h2` para `Verdana` e use outra fonte segura para a Web na família sans-serif como substituto.
|
||||
|
||||
Além disso, adicione um `border-bottom` de `4px solid #dfdfe2` aos elementos `h2` para tornar as seções distintas.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar um seletor de elementos múltiplos para direcionar os elementos `h1` e `h2`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('h1, h2') || gs('h2, h1'));
|
||||
```
|
||||
|
||||
Você deve definir o primeiro valor da propriedade `font-family` para `Verdana`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const style = gs('h1, h2') || gs('h2, h1');
|
||||
assert.include(style?.fontFamily, 'Verdana');
|
||||
```
|
||||
|
||||
Você deve definir o segundo valor da propriedade `font-family` para outra fonte sans-serif, fonte segura da web. _Dica: eu escolheria Tahoma_.
|
||||
|
||||
```js
|
||||
// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const style = gs('h1, h2') || gs('h2, h1');
|
||||
assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
|
||||
```
|
||||
|
||||
Você deve usar um seletor de elemento `h2` para direcionar os elementos `h2`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
|
||||
```
|
||||
|
||||
Você deve dar a `h2` uma propriedade `border-bottom` de `4px solid #dfdfe2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 61435e3c0679a306c20f1acc
|
||||
title: Passo 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para poder navegar na página, dê a cada elemento âncora um `href` correspondente ao elemento `id` dos elementos `h2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro elemento `a` um `href` de `#student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `a` um `href` de `#html-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `a` um `href` de `#css-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 6143610161323a081b249c19
|
||||
title: Passo 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Preenchendo o conteúdo do quiz, abaixo de `#student-info`, adicione três elementos `div` com uma `class` de `info`.
|
||||
|
||||
Em seguida, dentro de cada `div` aninhe um elemento `label` e um elemento `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aninhar três elementos `div` abaixo do elemento `h2#student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro `div` uma `class` de `info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `div` uma `class` de `info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `div` uma `class` de `info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info');
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do primeiro `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `input` no primeiro `div`, após o `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1);
|
||||
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do segundo `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `input` dentro do segundo `div`, após o `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1);
|
||||
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do terceiro `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `input` dentro do terceiro `div`, após o `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1);
|
||||
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input'));
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 6143639d5eddc7094161648c
|
||||
title: Passo 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
É importante vincular cada `input` ao elemento `label` correspondente. Isso fornece aos usuários de tecnologia assistiva uma referência visual para a entrada.
|
||||
|
||||
Isso é feito dando ao `label` um atributo `for`, que contém o `id` do `input`.
|
||||
|
||||
Esta seção terá o nome do aluno, endereço de e-mail e data de nascimento. Dê aos elementos `label` apropriados `for` atributos, bem como conteúdo de texto. Em seguida, vincule os elementos `input` aos elementos `label` correspondentes.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro elemento `label` um atributo `for` apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `label` um atributo `for` apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `label` um atributo `for` apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `label` um conteúdo de texto apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `label` um conteúdo de texto apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `label` um conteúdo de texto apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `input` um atributo `id` que corresponda ao atributo `for` do primeiro `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `input` um atributo `id` que corresponda ao atributo `for` do segundo `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `input` um atributo `id` que corresponda ao atributo `for` do terceiro `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
|
||||
```
|
||||
|
||||
Você não deve usar o mesmo atributo `id` para mais de um elemento `input`.
|
||||
|
||||
```js
|
||||
const id = (n) => document.querySelectorAll('input')?.[n]?.id;
|
||||
assert.notEqual(id(0), id(1));
|
||||
assert.notEqual(id(0), id(2));
|
||||
assert.notEqual(id(1), id(2));
|
||||
```
|
||||
|
||||
Você não deve usar o mesmo atributo `for` para mais de um elemento `label`.
|
||||
|
||||
```js
|
||||
const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
|
||||
assert.notEqual(htmlFor(0), htmlFor(1));
|
||||
assert.notEqual(htmlFor(0), htmlFor(2));
|
||||
assert.notEqual(htmlFor(1), htmlFor(2));
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 6143908b6aafb00a659ca189
|
||||
title: Passo 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Tendo em mente as práticas recomendadas para entradas de formulário, dê a cada `input` um atributo `type` e `name` apropriado. Em seguida, dê ao primeiro `input` um atributo `placeholder`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro `input` um `type` de `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `input` um `type` de `email`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `input` um `type` de `date`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro `input` um atributo `name` apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `input` um atributo `name` apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `input` um atributo `name` apropriado.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro `input` um atributo `placeholder`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.:</label>
|
||||
<input id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 6143920c8eafb00b735746ce
|
||||
title: Passo 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Mesmo que você tenha adicionado um `placeholder` ao primeiro elemento `input` na lição anterior, esta não é uma prática recomendada para acessibilidade. Com muita frequência, os usuários confundem o texto do espaço reservado com um valor de entrada real - eles pensam que já existe um valor na entrada.
|
||||
|
||||
Remova o texto do espaço reservado do primeiro elemento `input`, contando com o `label` como a melhor prática.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve remover o atributo `placeholder` do primeiro elemento `input`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" placeholder="e.g. Quincy Larson" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.:</label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 6143931a113bb80c45546287
|
||||
title: Passo 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Indiscutivelmente, `D.O.B.` não é suficientemente descritivo. Isto é especialmente verdadeiro para usuários com deficiência visual. Uma maneira de contornar esse problema, sem precisar adicionar texto visível à etiqueta, é adicionar texto que apenas um leitor de tela possa ler.
|
||||
|
||||
Anexe um elemento `span` com uma classe de `sr-only` ao conteúdo de texto atual do terceiro elemento `label`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `span` dentro do terceiro elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `span` uma classe de `sr-only`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
|
||||
```
|
||||
|
||||
Você deve colocar o `span` após o conteúdo do texto `D.O.B.`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\.<span/);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.</label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
id: 6143956ed76ed60e012faa51
|
||||
title: Passo 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O texto `.sr-only` ainda está visível. Existe um padrão comum para ocultar visualmente o texto para que apenas os leitores de tela leiam.
|
||||
|
||||
Este padrão é para definir as seguintes propriedades do CSS:
|
||||
|
||||
```css
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
```
|
||||
|
||||
Use o padrão acima para definir a classe `sr-only`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.sr-only`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` uma `position` de `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` um `width` de `1px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` uma `height` de `1px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` um `padding` de `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` um `margin` de `-1px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` um `overflow` de `hidden`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` um `clip` de `rect(0, 0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` um `white-space` de `nowrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
|
||||
```
|
||||
|
||||
Você deve dar ao `.sr-only` um `border` de `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,177 @@
|
||||
---
|
||||
id: 6143cb26f7edff2dc28f7da5
|
||||
title: Passo 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Cada `fieldset` conterá uma pergunta verdadeira/falsa.
|
||||
|
||||
Dentro de cada `fieldset`, aninhe um elemento `legend`, e um elemento `ul` com duas opções.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aninhar um elemento `legend` dentro do primeiro elemento `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `ul` dentro do primeiro elemento `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar dois elementos `li` dentro do primeiro elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2);
|
||||
```
|
||||
|
||||
Você deve aninhar dois elementos `legend`dentro do segundo elemento `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `ul` dentro do segundo elemento `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1);
|
||||
```
|
||||
|
||||
Você deve aninhar dois elementos `li` dentro do segundo elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question"></fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question"></fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 6144e818fd5ea704fe56081d
|
||||
title: Passo 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê a cada `fieldset` um atributo `name` adequado. Em seguida, dê a ambas as listas não ordenadas uma `class` de `answers-list`.
|
||||
|
||||
Finalmente, use `legend` para legendar o conteúdo do `fieldset` colocando uma pergunta verdadeira/falsa como o conteúdo do texto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro `fieldset` um atributo `name` adequado. _Dica: Eu usaria `html-question-one`_
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `fieldset` um atributo `name` adequado. _Dica: Eu usaria `html-question-two`_
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `ul` uma `class` de `answers-list`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `ul` uma `class` de `answers-list`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list');
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `legend` conteúdo de texto.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `legend` conteúdo de texto.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent);
|
||||
```
|
||||
|
||||
Você não deve usar o mesmo conteúdo de texto para ambos elementos `legend`.
|
||||
|
||||
```js
|
||||
assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question">
|
||||
<legend></legend>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question">
|
||||
<legend></legend>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 6144f8dc6849e405dd8bb829
|
||||
title: Passo 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para fornecer a funcionalidade das perguntas de verdadeiro/falso, precisamos de um conjunto de entradas que não permita que ambas sejam selecionadas ao mesmo tempo.
|
||||
|
||||
Dentro de cada elemento da lista, aninhe um elemento `label`, e, dentro de cada elemento `label`, aninhe um elemento `input` com o `type` apropriado.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do primeiro elemento `li`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do segundo elemento `li`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do terceiro elemento `li`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do quarto elemento `li`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `input` dentro do primeiro elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `input` dentro do segundo elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `input` dentro do terceiro elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `input` dentro do quarto elemento `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro `input` um `type` de `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `input` um `type` de `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `input` um `type` de `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio');
|
||||
```
|
||||
|
||||
Você deve dar ao quarto `input` um `type` de `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 6145e6eeaa66c605eb087fe9
|
||||
title: Passo 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Embora não seja necessário para elementos `label` com um `input` aninhado, ainda é uma prática recomendada vincular explicitamente um `label` com seu elemento `input` correspondente.
|
||||
|
||||
Vincule os elementos `label` com seus elementos `input` correspondentes.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro `label` um atributo `for` que corresponda ao `id` de seu elemento `input`.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `label` um atributo `for` que corresponda ao `id` de seu elemento `input`.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id);
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `label` um atributo `for` que corresponda ao `id` de seu elemento `input`.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id);
|
||||
```
|
||||
|
||||
Você deve dar ao `label` um atributo `for` que corresponda ao `id` de seu elemento `input`.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,220 @@
|
||||
---
|
||||
id: 6145f8f8bcd4370f6509078e
|
||||
title: Passo 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro do elemento `address`, adicione o seguinte:
|
||||
|
||||
```html
|
||||
freeCodeCamp<br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
```
|
||||
|
||||
Você pode visitar, mas pode não encontrar nada...
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar o texto acima incluindo as tags `<br />` ao elemento `address`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<address>
|
||||
|
||||
</address>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,261 @@
|
||||
---
|
||||
id: 61487b77d4a37707073a64e5
|
||||
title: Passo 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando a largura da tela é pequena, o `h1` não envolve seu conteúdo de texto como deveria. Centralize o texto para `h1`.
|
||||
|
||||
Em seguida, dê a `main` um espaçamento de maneira que a seção de `Student Info` possa ser totalmente vista.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao `h1` um `text-align` de `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
Você deve adicionar um seletor `main` para segmentar o elemento `main`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('main'));
|
||||
```
|
||||
|
||||
Você deve dar ao `main` um `padding-top` de pelo menos `25px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25);
|
||||
```
|
||||
|
||||
Você deve alterar somente o valor `padding-top`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
|
||||
```
|
||||
|
||||
# --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>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>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 5f3c866d0fc037f7311b4ac8
|
||||
title: Passo 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Isso é mais perto, mas o preço não ficou mais à direita. Isto se deve ao fato de que os elementos `inline-block` só ocupam a largura de seu conteúdo. Para distribuí-los, adicione uma propriedade `width` aos seletores de classe `flavor` e `price` com um valor de `50%` cada.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve definir a propriedade `width` para `50%` em seu seletor `.flavor`.
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '50%');
|
||||
```
|
||||
|
||||
Você deve definir a propriedade `width` para `50%` em seu seletor `.price`.
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5f3c866d28d7ad0de6470505
|
||||
title: Passo 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os sabores e preços estão atualmente empilhados uns sobre os outros e centrados com seus elementos `p` respectivos. Seria bom se o sabor estivesse à esquerda e o preço estivesse à direita.
|
||||
|
||||
Adicione o nome da classe `flavor` ao elemento `p` que diz `French Vanilla`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar a classe `flavor` ao seu elemento `p`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p\s*class=('|")flavor\1\s*>/i));
|
||||
```
|
||||
|
||||
Você deve ter apenas um elemento com a classe `flavor`.
|
||||
|
||||
```js
|
||||
assert($('.flavor').length === 1);
|
||||
```
|
||||
|
||||
Sua classe `flavor` deve estar no elemento `p` com o texto `French Vanilla`.
|
||||
|
||||
```js
|
||||
assert($('.flavor')[0].innerText.match(/French Vanilla/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
--fcc-editable-region--
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 5f3c866d5414453fc2d7b480
|
||||
title: Passo 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Começando abaixo do par café/preço existente, adicione os cafés e preços abaixo usando elementos `article` com dois elementos aninhados dentro de cada `p`. Como antes, o primeiro texto `p` deve conter o sabor do café e o segundo texto `p` deve conter o preço.
|
||||
|
||||
```bash
|
||||
Caramel Macchiato 3.75
|
||||
Pumpkin Spice 3.50
|
||||
Hazelnut 4.00
|
||||
Mocha 4.50
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter cinco elementos `article`.
|
||||
|
||||
```js
|
||||
assert($('article').length === 5);
|
||||
```
|
||||
|
||||
Cada elemento `article` deve ter dois elementos `p`.
|
||||
|
||||
```js
|
||||
const articles = $('article');
|
||||
assert(articles[0].children.length === 2);
|
||||
assert(articles[1].children.length === 2);
|
||||
assert(articles[2].children.length === 2);
|
||||
assert(articles[3].children.length === 2);
|
||||
assert(articles[4].children.length === 2);
|
||||
```
|
||||
|
||||
Seu primeiro elemento `article` deve ter elementos `p` com o texto `French Vanilla` e `3.00`.
|
||||
|
||||
```js
|
||||
const children = $('article')[0].children;
|
||||
assert(children[0].innerText.match(/French Vanilla/i));
|
||||
assert(children[1].innerText.match(/3\.00/i));
|
||||
```
|
||||
|
||||
Seu segundo elemento `article` deve ter elementos `p` com o texto `Caramel Macchiato` e `3.75`.
|
||||
|
||||
```js
|
||||
const children = $('article')[1].children;
|
||||
assert(children[0].innerText.match(/Caramel Macchiato/i));
|
||||
assert(children[1].innerText.match(/3\.75/i));
|
||||
```
|
||||
|
||||
Seu terceiro elemento `article` deve ter elementos `p` com o texto `Pumpkin Spice` e `3.50`.
|
||||
|
||||
```js
|
||||
const children = $('article')[2].children;
|
||||
assert(children[0].innerText.match(/Pumpkin Spice/i));
|
||||
assert(children[1].innerText.match(/3\.50/i));
|
||||
```
|
||||
|
||||
Seu quarto elemento `article` deve ter elementos `p` com o texto `Hazelnut` e `4.00`.
|
||||
|
||||
```js
|
||||
const children = $('article')[3].children;
|
||||
assert(children[0].innerText.match(/Hazelnut/i));
|
||||
assert(children[1].innerText.match(/4\.00/i));
|
||||
```
|
||||
|
||||
Seu quinto elemento `article` deve ter elementos `p` com o texto `Mocha` e `4.50`.
|
||||
|
||||
```js
|
||||
const children = $('article')[4].children;
|
||||
assert(children[0].innerText.match(/Mocha/i));
|
||||
assert(children[1].innerText.match(/4\.50/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 5dc174fcf86c76b9248c6eb2
|
||||
title: Passo 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os elementos em HTML têm tags de abertura, como `<h1>`, e tags de fechamento, como `</h1>`.
|
||||
|
||||
Encontre o elemento `h1` e altere o texto entre suas tags de abertura e fechamento para que diga `CatPhotoApp`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O texto `CatPhotoApp` deve estar presente no código. Não se esqueça de verificar a ortografia.
|
||||
|
||||
```js
|
||||
assert(code.match(/catphotoapp/i));
|
||||
```
|
||||
|
||||
O elemento `h1` deve ter uma tag de abertura. As tags de abertura têm essa sintaxe: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1'));
|
||||
```
|
||||
|
||||
O elemento `h1` deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1\>/));
|
||||
```
|
||||
|
||||
Você tem mais de um elemento `h1`. Remova o elemento `h1` a mais.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('h1').length === 1);
|
||||
```
|
||||
|
||||
O elemento `h1` deve conter o texto `CatPhotoApp`. Você omitiu o texto, digitou o texto incorretamente ou ele não está entre as tags de abertura e fechamento do elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>Hello World</h1>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5dc1798ff86c76b9248c6eb3
|
||||
title: Passo 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os elementos de título, que vão de `h1` a `h6`, são usados para dar significado à importância do conteúdo abaixo deles. Quanto menor o número, maior a importância. Assim, os elementos `h2` têm menos importância que os elementos `h1`. Use apenas um elemento `h1` por página e coloque os títulos de importância inferior abaixo dos títulos de maior importância.
|
||||
|
||||
Adicione um elemento `h2` abaixo do elemento `h1` que diga `Cat Photos`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `h1` deve ter uma tag de abertura. As tags de abertura têm essa sintaxe: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1'));
|
||||
```
|
||||
|
||||
O elemento `h1` deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1\>/));
|
||||
```
|
||||
|
||||
Você deve ter apenas um elemento `h1`. Remova o elemento adicional.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('h1') && document.querySelectorAll('h1').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `h1` deve conter o texto 'CatPhotoApp'. Você omitiu o texto ou tem um erro de digitação.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
|
||||
```
|
||||
|
||||
O elemento `h2` deve ter uma tag de abertura. As tags de abertura têm essa sintaxe: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h2'));
|
||||
```
|
||||
|
||||
O elemento `h2` deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h2\>/));
|
||||
```
|
||||
|
||||
O elemento `h2` deve conter o texto 'Cat Photos'. Coloque apenas o texto `Cat Photos` entre as tags de abertura e de fechamento de `h2`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos');
|
||||
```
|
||||
|
||||
O elemento `h2` deve estar abaixo do elemento `h1`. O elemento `h1` tem maior importância e deve estar acima do elemento `h2`.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('h1,h2')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('H1') < collection.indexOf('H2'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CatPhotoApp</h1>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user