chore(i18n,curriculum): update translations (#42487)

* chore(i18n,curriculum): update translations

* chore: Italian to italian

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
2021-06-15 03:34:20 +09:00
committed by GitHub
parent 840c7c738f
commit b3af21d50f
556 changed files with 57236 additions and 0 deletions

View File

@@ -0,0 +1,46 @@
---
id: 587d774c367417b2b2512a9c
title: Adicionar um texto alternativo em imagens para acessibilidade de deficientes visuais
challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp7VfD'
forumTopicId: 16628
dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
---
# --description--
Você provavelmente já viu um atributo `alt` em uma tag `img` em outros desafios. O texto do atributo `alt` descreve o conteúdo da imagem, dando a ela um texto alternativo. Um atributo `alt` ajuda nos casos onde a imagem não carrega ou não pode ser vista pelo usuário. Os mecanismos de busca também a utilizam para compreender o que uma imagem contém para a incluir nos resultados de pesquisa. Aqui está um exemplo:
```html
<img src="importantLogo.jpeg" alt="Company logo">
```
Pessoas com deficiências visuais dependem de leitores de tela para converter conteúdo da web em uma interface de áudio. Eles não vão obter informações se elas forem apresentadas apenas visualmente. Para imagens, os leitores de tela podem acessar o atributo `alt` e ler seu conteúdo para fornecer informações importantes.
Um bom texto no atributo `alt` fornece ao leitor uma breve descrição da imagem. Você sempre deve incluir um atributo `alt` na sua imagem. Segundo a especificação do HTML5, isso agora é considerado obrigatório.
# --instructions--
O Camper Cat é tanto um ninja do código quanto um ninja de verdade. Ele está construindo um site para compartilhar seu conhecimento. A foto de perfil que ele quer usar mostra suas habilidades e deve ser apreciada por todos os visitantes do site. Adicione um atributo `alt` na tag `img` que explique que o Camper Cat está fazendo caratê. (O `src` da imagem não aponta para nenhum arquivo, então você deve ver o texto do `alt` na tela.)
# --hints--
A tag `img` deve ter um atributo `alt` e o texto dele não deve estar vazio.
```js
assert($('img').attr('alt'));
```
# --seed--
## --seed-contents--
```html
<img src="doingKarateWow.jpeg">
```
# --solutions--
```html
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
```

View File

@@ -0,0 +1,105 @@
---
id: 587d778b367417b2b2512aa8
title: Adicionar um seletor de data acessível
challengeType: 0
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
forumTopicId: 301008
dashedName: add-an-accessible-date-picker
---
# --description--
Formulários frequentemente incluem o campo `input`, que pode ser usado para criar diferentes tipos de inputs no formulário. O atributo `type` nesse elemento indica qual tipo de elemento `input` deve ser criado.
Você deve ter notado os tipos de input `text` e `submit` em desafios anteriores. O HTML5 introduziu uma opção para especificar um campo `date`. Dependendo do suporte do navegador, o seletor de data aparece dentro do `input` quando este está em foco, o que deixa o preenchimento do formulário mais fácil para todos os usuários.
Em navegadores antigos, o tipo será convertido para o padrão `text`, o que ajuda a mostrar aos usuários o formato da data esperado no texto da `label` ou do `placeholder`.
Exemplo:
```html
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
```
# --instructions--
O Camper Cat está organizando um campeonato de Mortal Kombat e quer perguntar para os competidores qual a melhor data. Adicione uma tag `input` com um atributo `type` com o valor `date`, um atributo `id` com o valor `pickdate` e um atributo `name` com o valor `date`.
# --hints--
O código deve adicionar uma tag `input` para o campo seletor de data.
```js
assert($('input').length == 2);
```
A tag `input` deve ter um atributo `type` com o valor `date`.
```js
assert($('input').attr('type') == 'date');
```
A tag `input` deve ter um atributo `id` com o valor `pickdate`.
```js
assert($('input').attr('id') == 'pickdate');
```
A tag `input` deve ter um atributo `name` com o valor `date`.
```js
assert($('input').attr('name') == 'date');
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<!-- Only change code below this line -->
<!-- Only change code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<input type="date" id="pickdate" name="date">
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,74 @@
---
id: 587d778f367417b2b2512aad
title: >-
Evitar problemas de daltonismo escolhendo cuidadosamente as cores informativas
challengeType: 0
videoUrl: 'https://scrimba.com/c/c437as3'
forumTopicId: 301011
dashedName: >-
avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
---
# --description--
Existem várias formas de daltonismo. Elas variam de uma sensibilidade reduzida de uma frequência de luz até a incapacidade de ver qualquer cor. A forma mais comum é uma sensibilidade reduzida em detectar cores verdes.
Por exemplo, se duas cores verdes semelhantes são a cor de primeiro plano e de fundo do seu conteúdo, um usuário daltônico pode não ser capaz de distingui-las. Cores parecidas são vizinhas no círculo cromático e essas combinações devem ser evitadas quando se está transmitindo informações importantes.
**Observação:** algumas ferramentas de seletores de cores on-line incluem simuladores visuais de como as cores aparecem para diferentes tipos de daltonismo. São ótimos recursos que complementam as calculadoras de verificação de contraste.
# --instructions--
O Camper Cat está testando diferentes estilos para um botão importante, mas `background-color` em amarelo (`#FFFF33`) e `color` em verde (`#33FF33`) são cores próximas e virtualmente indistinguíveis para alguns usuários daltônicos. (O brilho dessas duas cores é semelhante, o que faz com que essa combinação não passe no teste de taxa de contraste). Mude a propriedade `color` do texto para um azul escuro (`#003366`) para resolver os dois problemas.
# --hints--
O código deve mudar a propriedade `color` do texto do `button` para um azul escuro.
```js
assert($('button').css('color') == 'rgb(0, 51, 102)');
```
# --seed--
## --seed-contents--
```html
<head>
<style>
button {
color: #33FF33;
background-color: #FFFF33;
font-size: 14px;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Danger!</h1>
</header>
<button>Delete Internet</button>
</body>
```
# --solutions--
```html
<head>
<style>
button {
color: #003366;
background-color: #FFFF33;
font-size: 14px;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Danger!</h1>
</header>
<button>Delete Internet</button>
</body>
```

View File

@@ -0,0 +1,84 @@
---
id: 587d778f367417b2b2512aac
title: Evitar problemas de daltonismo usando o contraste suficiente
challengeType: 0
videoUrl: 'https://scrimba.com/c/cmzMEUw'
forumTopicId: 301012
dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
---
# --description--
A cor é uma grande parte do design visual, mas a sua utilização introduz duas questões de acessibilidade. Primeiro, a cor, por si só, não deve ser usada como a única maneira de transmitir informações importantes, pois usuários de leitores de tela não vão vê-la. Em segundo lugar, as cores de fundo e de primeiro plano precisam ter contraste suficiente para que os usuários daltônicos possam distingui-las.
Os desafios anteriores abordaram alternativas textuais para resolver o primeiro problema. O último desafio introduziu ferramentas de verificação de contraste para ajudar com o segundo. A proporção de contraste recomendada pelas WCAG, de 4.5:1, aplica-se para uso de cores, bem como de combinações da escala de cinza.
Usuários daltônicos têm problemas para distinguir algumas cores - geralmente em tonalidade mas, às vezes, também em luz. Lembre-se que a relação de contraste é calculada usando os valores da luminosidade das cores de primeiro plano e de fundo.
Na prática, a relação 4.5:1 de contraste pode ser alcançada adicionando preto à cor mais escura e adicionando branco à cor mais clara. As tonalidades mais escuras do círculo cromático são consideradas a partir de azuis, violetas, magentas e vermelhos, enquanto que tonalidades claras são laranjas, amarelos, verdes e verdes-azulados.
# --instructions--
O Camper Cat está experimentando usar cores no texto e no fundo do seu blog, mas sua combinação atual de verde para `background-color` e marrom para `color` tem uma relação de contraste de 2.5:1. Você pode facilmente ajustar a luz das cores, pois ele as declarou usando a propriedade CSS `hsl()` (que significa hue tonalidade , saturation saturação , lightness luz ). Para isso, altere o terceiro argumento. Aumente o valor da luz em `background-color` de 35% para 55% e diminua o valor da luz em `color` de 20% para 15%. Isso melhora o contraste em 5.9:1.
# --hints--
O código deve apenas mudar o valor da luz para a propriedade `color` do texto para o valor 15%.
```js
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
```
O código deve mudar apenas o valor do brilho na propriedade `background-color` para o valor de 55%.
```js
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
```
# --seed--
## --seed-contents--
```html
<head>
<style>
body {
color: hsl(0, 55%, 20%);
background-color: hsl(120, 25%, 35%);
}
</style>
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
```
# --solutions--
```html
<head>
<style>
body {
color: hsl(0, 55%, 15%);
background-color: hsl(120, 25%, 55%);
}
</style>
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
```

View File

@@ -0,0 +1,75 @@
---
id: 587d778f367417b2b2512aae
title: Dar significado aos links usando textos descritivos
challengeType: 0
videoUrl: 'https://scrimba.com/c/c437DcV'
forumTopicId: 301013
dashedName: give-links-meaning-by-using-descriptive-link-text
---
# --description--
Os usuários de leitores de tela têm várias opções para o tipo de conteúdo que o seu dispositivo lê. Essas opções incluem pular para (ou sobre) elementos de referência, pular para o conteúdo principal ou obter um resumo da página a partir dos títulos. Outra opção é apenas ouvir os links disponíveis na pagina.
Leitores de tela fazem isso lendo o texto do link, ou o que estiver entre as tags (`a`). Ter uma lista de links com textos do tipo "clique aqui" ou "leia mais" não ajuda muito. Em vez disso, você deve usar um texto pequeno, mas descritivo, entre as tags `a` para fornecer mais significado para os usuários.
# --instructions--
O texto do link que o Camper Cat está usando não é muito descritivo sem um contexto. Mova a tag (`a`) para que ela envolva a frase `information about batteries` ao invés de `Click here`.
# --hints--
O seu código deve mover a tag `a` das palavras `Click here` para que envolva as palavras `information about batteries`.
```js
assert(
$('a')
.text()
.match(/^(information about batteries)$/g)
);
```
O elemento `a` deve ter um atributo `href` com o valor de uma string vazia `""`.
```js
assert($('a').attr('href') === '');
```
O elemento `a` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/a>/g) &&
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
);
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
</article>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
</article>
</body>
```

View File

@@ -0,0 +1,115 @@
---
id: 587d7789367417b2b2512aa4
title: Melhore a acessibilidade de áudios com o elemento audio
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
forumTopicId: 301014
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
---
# --description--
O elemento `audio` do HTML fornece significado semântico quando é utilizado para envolver conteúdo relacionado a reprodução de áudio. O conteúdo do áudio também precisa de uma alternativa em texto para ser acessível a pessoas surdas ou com deficiência auditiva. Isso pode ser feito com um texto próximo na página ou um link para uma transcrição.
A tag `audio` suporta o atributo `controls`. Este atributo exibe os controles de reprodução, pausa e outras funcionalidades, além de oferecer suporte ao teclado. Este é um atributo booleano, o que significa que não precisa de um valor. Sua presença na tag ativa a configuração.
Um exemplo:
```html
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg">
<source src="audio/meow.ogg" type="audio/ogg">
</audio>
```
**Observação:** os conteúdos multimídia geralmente são compostos por partes visuais e auditivas. É preciso legendas sincronizadas e uma transcrição para que usuários com deficiência visual e/ou auditiva possam acessá-lo. Geralmente, um desenvolvedor Web não é responsável por criar as legendas ou transcrições, mas precisa saber como incluí-las.
# --instructions--
É hora de fazer uma pausa com o Camper Cat e conhecer o colega Zersiax (@zersiax), um campeão de acessibilidade e também usuário de leitor de tela. Para ouvir um clipe de seu leitor de tela em ação, adicione um elemento `audio` após o elemento `p`. Inclua o atributo `controls`. Em seguida, coloque uma tag `source` dentro da tag `audio` com o atributo `src` definido como `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` e o atributo `type` definido como `"audio/mpeg"`.
**Observação:** o clipe de áudio pode parecer rápido e difícil de entender, mas é uma velocidade normal para usuários de leitores de tela.
# --hints--
O código deve ter uma tag `audio`.
```js
assert($('audio').length === 1);
```
O elemento `audio` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/audio>/g).length === 1 &&
code.match(/<audio.*>[\s\S]*<\/audio>/g)
);
```
A tag `audio` deve ter o atributo `controls`.
```js
assert($('audio').attr('controls'));
```
O código deve ter uma tag `source`.
```js
assert($('source').length === 1);
```
A tag `source` deve estar dentro das tags `audio`.
```js
assert($('audio').children('source').length === 1);
```
O valor do atributo `src` na tag `source` deve ser exatamente igual ao link nas instruções.
```js
assert(
$('source').attr('src') ===
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
);
```
O código deve incluir um atributo `type` na tag `source` com um o valor de "audio/mpeg".
```js
assert($('source').attr('type') === 'audio/mpeg');
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Real Coding Ninjas</h1>
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
</main>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Real Coding Ninjas</h1>
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
<audio controls>
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
</audio>
</main>
</body>
```

View File

@@ -0,0 +1,161 @@
---
id: 587d778a367417b2b2512aa5
title: Melhore a acessibilidade de gráficos com o elemento figure
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJMqtE'
forumTopicId: 301015
dashedName: improve-chart-accessibility-with-the-figure-element
---
# --description--
O HTML5 introduziu o elemento `figure`, juntamente com o `figcaption`. Usados juntos, esses elementos envolvem uma representação visual (como uma imagem, diagrama ou gráfico) junto de sua legenda. Isso aumenta a acessibilidade em duas partes, agrupando semanticamente o conteúdo relacionado e fornecendo uma alternativa textual que explica a imagem contida em `figure`.
Para a visualização de dados na forma de gráficos, a legenda pode ser usada para registrar de modo sucinto as tendências ou conclusões para usuários com deficiência visual. Outro desafio abrange como mover uma versão dos dados contidos em uma tabela de um gráfico para fora da tela (usando CSS) para usuários de leitores de tela.
Um exemplo: observe que o elemento `figcaption` vai dentro da tag `figure` e pode ser combinada com outros elementos:
```html
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
```
# --instructions--
O Camper Cat está trabalhando a sério na criação de um gráfico de barras empilhadas que mostra o tempo por semana que ele deve passar nos treinamentos de furtividade, combate e armas. Ajude-o a estruturar melhor sua página alterando a tag `div` para a tag `figure`. Altere também a tag `p`, que envolve a legenda, para uma tag `figcaption`.
# --hints--
O código deve ter uma tag `figure`.
```js
assert($('figure').length == 1);
```
O código deve ter uma tag `figcaption`.
```js
assert($('figcaption').length == 1);
```
O código não deve ter nenhuma tag `div`.
```js
assert($('div').length == 0);
```
O código não deve ter nenhuma tag `p`.
```js
assert($('p').length == 0);
```
A tag `figcaption` deve ser filha da tag `figure`.
```js
assert($('figure').children('figcaption').length == 1);
```
O elemento `figure` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/figure>/g) &&
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
);
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- Only change code below this line -->
<div>
<!-- Stacked bar chart will go here -->
<br>
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
</div>
<!-- Only change code above this line -->
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section>
<figure>
<!-- Stacked bar chart will go here -->
<br>
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,119 @@
---
id: 587d778a367417b2b2512aa6
title: Melhorar a acessibilidade de campos de formulário com o elemento label
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJMMAN'
forumTopicId: 301016
dashedName: improve-form-field-accessibility-with-the-label-element
---
# --description--
Melhorar a acessibilidade com a marcação semântica HTML se aplica ao uso de nomes de tag e atributos apropriados. Os desafios a seguir mostram alguns cenários importantes quanto ao uso de atributos em formulários.
A tag `label` envolve o texto que será associado a um campo de input no formulário. Isso dá significado ao campo de input e torna o formulário mais legível. O atributo `for` em uma tag `label` associa explicitamente esse `label` ao campo de input no formulário e é usado por leitores de tela.
Você aprendeu sobre botões de opção (radio buttons) e seus rótulos (labels) em uma lição na seção HTML básico. Naquela lição, envolvemos o elemento de opção dentro de um elemento `label` junto com o texto do rótulo para tornar o texto clicável. Outra maneira de conseguir isso é usando o atributo `for`, conforme explicado nesta lição.
O valor do atributo `for` deve ser igual ao valor do atributo `id` contido no campo de input. Exemplo:
```html
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
```
# --instructions--
O Camper Cat espera que muita gente se interesse pelas postagens em seu blog e deseja incluir um formulário de inscrição por e-mail. Adicione um atributo `for` no `label` do e-mail, cujo valor corresponda ao valor do `id` do elemento `input`.
# --hints--
O código deve ter um atributo `for` na tag `label` que não seja vazio.
```js
assert($('label').attr('for'));
```
O valor do atributo `for` deve corresponder ao valor do `id` no `input` de e-mail.
```js
assert($('label').attr('for') == 'email');
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label>Email:</label>
<input type="text" id="email" name="email">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,80 @@
---
id: 587d778e367417b2b2512aab
title: Melhore a legibilidade com textos de alto contraste
challengeType: 0
videoUrl: 'https://scrimba.com/c/cKb3nCq'
forumTopicId: 301017
dashedName: improve-readability-with-high-contrast-text
---
# --description--
O baixo contraste entre as cores do primeiro plano e do fundo pode dificultar a leitura do texto. Contraste suficiente melhora a legibilidade do seu conteúdo, mas o que significa "suficiente"?
As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) recomendam uma relação de contraste de, pelo menos, 4,5 para 1 para texto normal. A proporção é calculada comparando os valores de luminância (brilho) entre duas cores. Isso varia de 1: 1, para a mesma cor (ausência de contraste), até 21: 1 para branco em contraste com preto, o mais forte. Existem muitas ferramentas de verificação de contraste disponíveis on-line que calculam essa relação para você.
# --instructions--
A escolha do Camper Cat de texto cinza claro em um fundo branco para sua postagem recente no blog tem uma relação de contraste de 1,5:1, dificultando a leitura. Altere a propriedade `color` do texto de um cinza claro (`#D3D3D3`) para um cinza mais escuro (`#636363`) para melhorar a taxa de contraste para 6:1.
# --hints--
O código deve alterar a propriedade `color` do texto dentro do `body` para um cinza mais escuro.
```js
assert($('body').css('color') == 'rgb(99, 99, 99)');
```
O código não deve alterar a propriedade `background-color` do `body`.
```js
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
```
# --seed--
## --seed-contents--
```html
<head>
<style>
body {
color: #D3D3D3;
background-color: #FFF;
}
</style>
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
```
# --solutions--
```html
<head>
<style>
body {
color: #636363;
background-color: #FFF;
}
</style>
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
```

View File

@@ -0,0 +1,62 @@
---
id: 587d774e367417b2b2512a9f
title: Saltar para o conteúdo diretamente usando o elemento main
challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp7zuE'
forumTopicId: 301018
dashedName: jump-straight-to-the-content-using-the-main-element
---
# --description--
O HTML5 introduziu uma série de novos elementos que fornecem aos desenvolvedores mais opções, ao mesmo tempo em que incorporam recursos de acessibilidade. Essas tags incluem `main`, `header`, `footer`, `nav`, `article` e `section`, entre outros.
Por padrão, um navegador torna esses elementos semelhantes ao elemento `div`. No entanto, usá-los onde eles forem apropriados fornece um significado adicional ao código. O nome da tag, sozinho, pode indicar o tipo de informação que esta contém, o que adiciona significado semântico a esse conteúdo. As tecnologias assistivas podem acessar essas informações para fornecer um resumo melhor da página ou opções de navegação para seus usuários.
O elemento `main` é usado para envolver (você adivinhou) o conteúdo principal, e deve haver apenas um por página. O objetivo é envolver as informações relacionadas ao tópico central da página. Ele não tem como objetivo incluir itens que se repetem nas páginas, como links de navegação ou banners.
A tag `main` também possui um recurso de referência incorporado que a tecnologia assistiva pode usar para navegar rapidamente até o conteúdo principal. Se você já viu um link "Ir para o conteúdo principal" no topo de uma página, usar a tag `main` automaticamente fornece essa funcionalidade aos dispositivos assistivos.
# --instructions--
O Camper Cat tem grandes ideias para a página de armas ninja que ele criou. Ajude-o a configurar o código adicionando tags de abertura e fechamento `main` entre o `header` e o `footer` (abordados em outros desafios). Mantenha a tag `main` vazia por enquanto.
# --hints--
O código deve ter uma tag `main`.
```js
assert($('main').length == 1);
```
A tag `main` deve estar entre a tag de fechamento `header` e a tag de abertura `footer`.
```js
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
```
# --seed--
## --seed-contents--
```html
<header>
<h1>Weapons of the Ninja</h1>
</header>
<footer></footer>
```
# --solutions--
```html
<header>
<h1>Weapons of the Ninja</h1>
</header>
<main>
</main>
<footer></footer>
```

View File

@@ -0,0 +1,76 @@
---
id: 587d774c367417b2b2512a9d
title: Saber quando o texto alternativo (alt) deve ser deixado em branco
challengeType: 0
videoUrl: 'https://scrimba.com/c/cM9P4t2'
forumTopicId: 301019
dashedName: know-when-alt-text-should-be-left-blank
---
# --description--
No último desafio, você aprendeu que incluir o atributo `alt` ao usar tags `img` é obrigatório. No entanto, às vezes, as imagens são agrupadas com uma legenda que já as descreve ou são usadas apenas para decoração. Nestes casos, o texto `alt` pode parecer redundante ou desnecessário.
Em situações em que uma imagem já é explicada com conteúdo de texto ou não adiciona significado a uma página, o `img` ainda precisa de um atributo `alt`, mas pode ser definido como uma string vazia. Exemplo:
```html
<img src="visualDecoration.jpeg" alt="">
```
As imagens de fundo também costumam ser classificadas como "decorativas". No entanto, elas são normalmente aplicadas usando CSS e, portanto, não fazem parte do processo de leitura de tela por tecnologias assistivas.
**Observação:** para imagens com legenda, você ainda pode querer incluir o texto `alt`, pois ajuda os mecanismos de busca a catalogar o conteúdo da imagem.
# --instructions--
O Camper Cat codificou o esqueleto da página do blog do site dele. Ele está planejando adicionar uma quebra visual entre os dois artigos com uma imagem decorativa de uma espada de samurai. Adicione o atributo `alt` à tag `img` e defina-o como uma string vazia. (Observe que o `src` da imagem não aponta para um arquivo real - não se preocupe se não houver espadas aparecendo na tela.)
# --hints--
A tag `img` deve ter um atributo `alt`.
```js
assert(!($('img').attr('alt') == undefined));
```
O atributo `alt` deve ser definido como uma string vazia.
```js
assert($('img').attr('alt') == '');
```
# --seed--
## --seed-contents--
```html
<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>To Come...</p>
</article>
<img src="samuraiSwords.jpeg">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>
```
# --solutions--
```html
<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>To Come...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>
```

View File

@@ -0,0 +1,244 @@
---
id: 587d778d367417b2b2512aaa
title: Tornar elementos visíveis apenas para leitores de tela usando CSS personalizado
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
forumTopicId: 301020
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
---
# --description--
Você notou que todos os desafios de acessibilidade aplicados até agora não usaram nenhum CSS? Isso mostra a importância de um esboço lógico do documento e do uso de tags semanticamente significativas em torno de seu conteúdo antes de introduzir o aspecto do design visual.
No entanto, a magia do CSS também pode melhorar a acessibilidade da página quando você deseja ocultar visualmente o conteúdo destinado apenas a leitores de tela. Isso acontece quando as informações estão em formato visual (como um gráfico), mas os usuários de leitores de tela precisam de uma apresentação alternativa (como uma tabela) para acessar os dados. O CSS pode ser usado para posicionar os elementos destinados somente ao leitor de tela fora da área visual da janela do navegador.
Um exemplo de código CSS que realiza isso:
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
**Observação:** as abordagens com CSS a seguir NÃO farão a mesma coisa:
<ul>
<li><code>display: none;</code> ou <code>visibility: hidden;</code> oculta o conteúdo para todos, incluindo usuários de leitores de tela</li>
<li>Valores de zero para tamanhos de pixel, como <code>width: 0px; height: 0px;</code> removem esse elemento do fluxo do seu documento, o que significa que os leitores de tela vão ignorá-lo.</li>
</ul>
# --instructions--
O Camper Cat criou um gráfico de barras empilhadas muito legal para a página de treinamento e colocou os dados em uma tabela para os usuários com deficiência visual. A tabela já tem uma classe `sr-only`, mas o código CSS ainda não foi criado. Dê a `position` um valor `absolute`, a `left` um valor `-10000px` e a `width` e `height` o valor `1px`.
# --hints--
O código deve definir a propriedade `position` da classe `sr-only` com um valor de `absolute`.
```js
assert($('.sr-only').css('position') == 'absolute');
```
O código deve definir a propriedade `left` da classe `sr-only` com um valor de `-10000px`.
```js
assert($('.sr-only').css('left') == '-10000px');
```
O código deve definir a propriedade `width` da classe `sr-only` com um valor de `1` pixel.
```js
assert(code.match(/width:\s*?1px/gi));
```
O código deve definir a propriedade `height` da classe `sr-only` com um valor de `1` pixel.
```js
assert(code.match(/height:\s*?1px/gi));
```
# --seed--
## --seed-contents--
```html
<head>
<style>
.sr-only {
position: ;
left: ;
width: ;
height: ;
top: auto;
overflow: hidden;
}
</style>
</head>
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<section>
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
<figure>
<!-- Stacked bar chart of weekly training -->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<table class="sr-only">
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
<thead>
<tr>
<th></th>
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week One</th>
<td>3</td>
<td>5</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<th scope="row">Week Two</th>
<td>4</td>
<td>5</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Week Three</th>
<td>4</td>
<td>6</td>
<td>3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<head>
<style>
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
</style>
</head>
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<section>
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
<figure>
<!-- Stacked bar chart of weekly training -->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<table class="sr-only">
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
<thead>
<tr>
<th></th>
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week One</th>
<td>3</td>
<td>5</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<th scope="row">Week Two</th>
<td>4</td>
<td>5</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Week Three</th>
<td>4</td>
<td>6</td>
<td>3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,106 @@
---
id: 587d7790367417b2b2512aaf
title: Faça com que os links fiquem navegáveis com chaves de acesso HTML
challengeType: 0
videoUrl: 'https://scrimba.com/c/cQvmaTp'
forumTopicId: 301021
dashedName: make-links-navigable-with-html-access-keys
---
# --description--
O HTML oferece o atributo `accesskey` para especificar uma tecla de atalho para ativar ou levar o foco para um elemento. Usar o atributo `accesskey` pode tornar a navegação mais eficiente para aqueles que usam somente o teclado.
O HTML5 permite que este atributo seja usado em qualquer elemento, mas ele é particularmente útil quando usado com elementos interativos. Isso inclui links, botões e inputs de formulário.
Exemplo:
```html
<button accesskey="b">Important Button</button>
```
# --instructions--
O Camper Cat quer que os links em torno dos títulos dos dois artigos do blog tenham atalhos de teclado para que os usuários de seu site possam navegar rapidamente para a história completa. Adicione um atributo `accesskey` a ambos os links e defina o primeiro como `g` (para Garfield) e o segundo como `c` (para Chuck Norris).
# --hints--
O código deve adicionar um atributo `accesskey` à tag `a` com o `id` de `first`.
```js
assert($('#first').attr('accesskey'));
```
O código deve adicionar um atributo `accesskey` à tag `a` com o `id` de `second`.
```js
assert($('#second').attr('accesskey'));
```
O código deve definir o atributo `accesskey` na tag `a` com o `id` de `first` para `g`. Observe que letras maiúsculas e minúsculas diferem.
```js
assert($('#first').attr('accesskey') == 'g');
```
O código deve definir o atributo `accesskey` na tag `a` com o `id` de `second` para `c`. Observe que maiúsculas e minúsculas diferem.
```js
assert($('#second').attr('accesskey') == 'c');
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<article>
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<article>
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,116 @@
---
id: 587d7788367417b2b2512aa3
title: Facilitar a navegação do leitor de tela com o ponto de referência footer
challengeType: 0
videoUrl: 'https://scrimba.com/c/crVrDh8'
forumTopicId: 301022
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
---
# --description--
Semelhante a `header` e `nav`, o elemento `footer` possui um recurso de ponto de referência integrado que permite que dispositivos auxiliares naveguem rapidamente até ele. Essa tag é usada principalmente para conter informações de direitos autorais ou links para documentos relacionados, que geralmente ficam na parte inferior de uma página.
# --instructions--
A página de treinamento do Camper Cat está avançando bem. Altere a `div` que ele usou para envolver suas informações de copyright na parte inferior da página para o elemento `footer`.
# --hints--
O código deve ter uma tag `footer`.
```js
assert($('footer').length == 1);
```
O código não deve ter nenhuma tag `div`.
```js
assert($('div').length == 0);
```
O código deve ter uma tag de abertura e fechamento `footer`.
```js
assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<div>&copy; 2018 Camper Cat</div>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,111 @@
---
id: 587d7787367417b2b2512aa1
title: Facilite a navegação do leitor de tela com o ponto de referência header
challengeType: 0
videoUrl: 'https://scrimba.com/c/cB76vtv'
forumTopicId: 301023
dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
---
# --description--
O próximo elemento HTML5 que adiciona significado semântico e melhora a acessibilidade é a tag `header`. Ela é usada para envolver informações introdutórias ou links de navegação e funciona bem em torno do conteúdo que é repetido no topo em várias páginas.
O elemento `header` compartilha o recurso de referência incorporado que você viu em `main`, permitindo que tecnologias de assistência naveguem rapidamente até esse conteúdo.
**Observação: ** o elemento `header` deve ser usado na tag `body` do seu documento HTML. É diferente do elemento `head`, que contém o título da página, metadados, etc.
# --instructions--
O Camper Cat está escrevendo ótimos artigos sobre treinamento de ninjas e deseja adicionar uma página para eles no site. Altere a `div` superior que atualmente contém o `h1` para uma tag `header`.
# --hints--
O código deve ter uma tag `header`.
```js
assert($('header').length == 1);
```
A tag `header` deve envolver o `h1`.
```js
assert($('header').children('h1').length == 1);
```
O código não deve ter nenhuma tag `div`.
```js
assert($('div').length == 0);
```
O elemento `header` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/header>/g) &&
code.match(/<\/header>/g).length === code.match(/<header>/g).length
);
```
# --seed--
## --seed-contents--
```html
<body>
<div>
<h1>Training with Camper Cat</h1>
</div>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Training with Camper Cat</h1>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
</body>
```

View File

@@ -0,0 +1,121 @@
---
id: 587d7788367417b2b2512aa2
title: Facilite a navegação do leitor de tela com o ponto de referência nav
challengeType: 0
videoUrl: 'https://scrimba.com/c/czVwWSv'
forumTopicId: 301024
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
---
# --description--
O elemento `nav` é outro item HTML5 com o recurso de ponto de referência integrado para facilitar a navegação do leitor de tela. Essa tag destina-se a envolver os principais links de navegação em sua página.
Se os mesmos links se repetirem tanto no cabeçalho quanto no rodapé da página, não é necessário marcar os links do rodapé com uma tag `nav` também. Usar um `footer` (abordado no próximo desafio) é suficiente.
# --instructions--
O Camper Cat incluiu links de navegação no topo da página de treinamento, mas os envolveu em uma `div`. Altere a `div` para uma tag `nav` para melhorar a acessibilidade da página.
# --hints--
O código deve ter uma tag `nav`.
```js
assert($('nav').length == 1);
```
A tag `nav` deve envolver o `ul` e os itens de lista.
```js
assert($('nav').children('ul').length == 1);
```
O código não deve ter nenhuma tag `div`.
```js
assert($('div').length == 0);
```
O elemento `nav` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/nav>/g) &&
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
);
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Training with Camper Cat</h1>
<div>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</div>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Training with Camper Cat</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
</body>
```

View File

@@ -0,0 +1,132 @@
---
id: 587d778c367417b2b2512aa9
title: Padronize o tempo com o atributo datetime no HTML5
challengeType: 0
videoUrl: 'https://scrimba.com/c/cmzMgtz'
forumTopicId: 301025
dashedName: standardize-times-with-the-html5-datetime-attribute
---
# --description--
Continuando com o tema da data, o HTML5 também introduziu o elemento `time` junto com um atributo `datetime` para padronizar os tempos de data e hora. O elemento `time` é um elemento inline que pode envolver a data ou a hora na página. Um atributo `datetime` mantém um formato válido dessa data. O valor atribuído a este atributo será acessado por dispositivos assistivos. Isso ajuda a evitar confusão ao declarar uma versão padronizada de um horário, mesmo que seja escrito de maneira informal ou coloquial no texto.
Exemplo:
```html
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
```
# --instructions--
Os resultados da pesquisa do jogo Mortal Kombat do Camper Cat chegaram! Envolva uma tag `time` em torno do texto `Thursday, September 15<sup>th</sup>` e adicione um atributo `datetime` definido com o valor de `2016-09-15`.
# --hints--
O código deve ter um elemento `p` que inclui o texto `Thank you to everyone for responding to Master Camper Cat's survey.` e inclua um elemento `time`.
```js
assert(timeElement.length);
```
A tag `time` que você adicionou deve estar ao redor do texto `Thursday, September 15<sup>th</sup>`.
```js
assert(
timeElement.length &&
$(timeElement).html().trim() === 'Thursday, September 15<sup>th</sup>'
);
```
A tag `time` que você adicionou deve ter um atributo `datetime` que não pode estar vazio.
```js
assert(datetimeAttr && datetimeAttr.length);
```
O atributo `datetime` adicionado deve ser um conjunto de valores no formato `2016-09-15`.
```js
assert(datetimeAttr === '2016-09-15');
```
# --seed--
## --after-user-code--
```html
<script>
const pElement = $("article > p")
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
const datetimeAttr = $(timeElement).attr("datetime");
</script>
```
## --seed-contents--
```html
<body>
<header>
<h1>Tournaments</h1>
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<!-- Only change code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
<!-- Only change code above this line -->
<section>
<h3>Comments:</h3>
<article>
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
<p>Johnny Cage better be there, I'll finish him!</p>
</article>
<article>
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
<p>Wow, much combat, so mortal.</p>
</article>
<article>
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
<p>Looks like I'll be busy that day.</p>
</article>
</section>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Tournaments</h1>
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
<section>
<h3>Comments:</h3>
<article>
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
<p>Johnny Cage better be there, I'll finish him!</p>
</article>
<article>
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
<p>Wow, much combat, so mortal.</p>
</article>
<article>
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
<p>Looks like I'll be busy that day.</p>
</article>
</section>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,92 @@
---
id: 587d774d367417b2b2512a9e
title: Usar títulos para criar relações hierárquicas de conteúdo
challengeType: 0
videoUrl: 'https://scrimba.com/c/cqVEktm'
forumTopicId: 301026
dashedName: use-headings-to-show-hierarchical-relationships-of-content
---
# --description--
Títulos (elementos `h1` até `h6`) são tags que ajudam a fornecer estrutura e rotulagem ao seu conteúdo. Os leitores de tela podem ser configurados para ler apenas os cabeçalhos de uma página para que o usuário obtenha um resumo. Isso significa que é importante que as tags de título em seu código tenham significado semântico e se relacionem umas com as outras. Também é importante que não sejam escolhidas apenas pelo tamanho da fonte que essas tags fornecem.
*Significado semântico* significa que a tag que você usa em torno do conteúdo (do texto) indica o tipo de informação que a tag contém.
Se você estivesse escrevendo um artigo com uma introdução, um corpo e uma conclusão, não faria muito sentido colocar a conclusão como uma subseção do corpo. A conclusão deve ter sua própria seção. Da mesma forma, as tags de título em uma página da web precisam estar em ordem e indicar as relações hierárquicas de seu conteúdo.
Títulos com classificação igual (ou superior) iniciam novas seções, títulos com classificação inferior começam subseções dentro da seção pai.
Por exemplo: uma página com um elemento `h2` seguido por várias subseções rotuladas com tags `h4` confundiria um usuário de leitor de tela. Como o HTML5 oferece 6 opções de títulos, pode ser tentador usar uma dessas tags apenas pelo tamanho da fonte que elas oferecem, mas você pode usar o CSS para alterar estes tamanhos.
Uma última observação, cada página deve sempre ter um (e apenas um) elemento `h1`, que é o assunto principal do seu conteúdo. Este e outros cabeçalhos são usados em parte pelos mecanismos de pesquisa para entender o tópico da página.
# --instructions--
O Camper Cat quer uma página no site dedicada a como se tornar um ninja. Ajude-o a corrigir os títulos para que o código tenha significado semântico e mostre as relações pai-filho de forma adequada entre as seções. Altere todas as tags `h5` para o nível de cabeçalho apropriado para indicar que são subseções das tags `h2`. Use a tag `h3` para esse propósito.
# --hints--
O código deve ter 6 tags `h3`.
```js
assert($('h3').length === 6);
```
O código deve ter 6 tags de fechamento `h3`.
```js
assert((code.match(/\/h3/g) || []).length === 6);
```
O código não deve ter nenhuma tag `h5`.
```js
assert($('h5').length === 0);
```
O código não deve ter nenhuma tag de fechamento `h5`.
```js
assert(/\/h5/.test(code) === false);
```
# --seed--
## --seed-contents--
```html
<h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h5>How to Hide in Plain Sight</h5>
<h5>How to Climb a Wall</h5>
<h2>Learn the Art of Battle</h2>
<h5>How to Strengthen your Body</h5>
<h5>How to Fight like a Ninja</h5>
<h2>Learn the Art of Living with Honor</h2>
<h5>How to Breathe Properly</h5>
<h5>How to Simplify your Life</h5>
</main>
```
# --solutions--
```html
<h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h3>How to Hide in Plain Sight</h3>
<h3>How to Climb a Wall</h3>
<h2>Learn the Art of Battle</h2>
<h3>How to Strengthen your Body</h3>
<h3>How to Fight like a Ninja</h3>
<h2>Learn the Art of Living with Honor</h2>
<h3>How to Breathe Properly</h3>
<h3>How to Simplify your Life</h3>
</main>
```

View File

@@ -0,0 +1,144 @@
---
id: 587d7790367417b2b2512ab0
title: Use tabindex para adicionar foco a um elemento usando o teclado
challengeType: 0
videoUrl: 'https://scrimba.com/c/cmzMDHW'
forumTopicId: 301027
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
---
# --description--
O atributo HTML `tabindex` tem três funções distintas relacionadas ao foco de um elemento utilizando o teclado. Quando ele está em uma tag, indica que o elemento pode receber foco. O valor (um número inteiro positivo, negativo ou zero) determina o comportamento.
Certos elementos, como links e inputs de formulário, recebem foco automaticamente quando um usuário aperta a tecla tab em uma página. O foco acompanha a ordem em que os elementos aparecem na tela. Essa mesma funcionalidade pode ser dada a outros elementos, como `div`, `span` e `p`, colocando um atributo `tabindex="0"` neles. Exemplo:
```html
<div tabindex="0">I need keyboard focus!</div>
```
**Observação:** um elemento `tabindex` com valor negativo (normalmente -1) indica que um elemento está focado, mas não será acessado pelo teclado. Este método é geralmente usado para trazer o foco para o conteúdo programaticamente (como quando um `div` usado para uma janela pop-up é ativado) e está além do escopo desses desafios.
# --instructions--
Camper Cat criou uma nova pesquisa para coletar informações sobre os usuários. Ele sabe que os campos de entrada obtêm o foco do teclado automaticamente, mas ele quer ter certeza de que os usuários do teclado façam uma pausa nas instruções enquanto percorrem os itens. Adicione um atributo `tabindex` à tag `p` e defina o valor como `0`. Bônus - usar `tabindex` também permite que a pseudoclasse CSS `:focus` funcione na tag `p`.
# --hints--
O código deve adicionar um atributo `tabindex` à tag `p` que contém as instruções do formulário.
```js
assert($('p').attr('tabindex'));
```
O código deve definir o atributo `tabindex` na tag `p` com um valor de 0.
```js
assert($('p').attr('tabindex') == '0');
```
# --seed--
## --seed-contents--
```html
<head>
<style>
p:focus {
background-color: yellow;
}
</style>
</head>
<body>
<header>
<h1>Ninja Survey</h1>
</header>
<section>
<form>
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">9th Life Master</label>
</fieldset>
<br>
<fieldset>
<legend>Select your favorite weapons:</legend>
<input id="stars" type="checkbox" name="weapons" value="stars">
<label for="stars">Throwing Stars</label><br>
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
<label for="nunchucks">Nunchucks</label><br>
<input id="sai" type="checkbox" name="weapons" value="sai">
<label for="sai">Sai Set</label><br>
<input id="sword" type="checkbox" name="weapons" value="sword">
<label for="sword">Sword</label>
</fieldset>
<br>
<input type="submit" name="submit" value="Submit">
</form><br>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<head>
<style>
p:focus {
background-color: yellow;
}
</style>
</head>
<body>
<header>
<h1>Ninja Survey</h1>
</header>
<section>
<form>
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">9th Life Master</label>
</fieldset>
<br>
<fieldset>
<legend>Select your favorite weapons:</legend>
<input id="stars" type="checkbox" name="weapons" value="stars">
<label for="stars">Throwing Stars</label><br>
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
<label for="nunchucks">Nunchucks</label><br>
<input id="sai" type="checkbox" name="weapons" value="sai">
<label for="sai">Sai Set</label><br>
<input id="sword" type="checkbox" name="weapons" value="sword">
<label for="sword">Sword</label>
</fieldset>
<br>
<input type="submit" name="submit" value="Submit">
</form><br>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,160 @@
---
id: 587d7790367417b2b2512ab1
title: Usar tabindex para especificar a ordem do foco em vários elementos usando o teclado
challengeType: 0
videoUrl: 'https://scrimba.com/c/cmzRRcb'
forumTopicId: 301028
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
---
# --description--
O atributo `tabindex` também especifica a ordem em que a tecla tab percorrerá os elementos. Isso é obtido quando o valor do atributo é definido como um número positivo (1 ou acima).
Definir um `tabindex="1"` fará com que o foco seja levado para esse elemento quando o usuário apertar a tecla tab pela primeira vez. Em seguida, o foco passará ao próximo elemento que tem um `tabindex` maior que o anterior. Quando não existirem mais itens para receberem foco, ele volta ao valor inicial - `tabindex="0"`.
É importante observar que quando a ordem da tecla tab é definida dessa forma, ela sobrescreve a ordem padrão (que se baseia no código HTML). Isso pode confundir os usuários que esperam iniciar a navegação do topo da página. Esta técnica pode ser necessária em algumas circunstâncias, mas, em termos de acessibilidade, tome cuidado antes de aplicá-la.
Exemplo:
```html
<div tabindex="1">I get keyboard focus, and I get it first!</div>
```
```html
<div tabindex="2">I get keyboard focus, and I get it second!</div>
```
# --instructions--
O Camper Cat tem um campo de pesquisa em sua página Citações Inspiradoras, o qual ele planeja posicionar no canto superior direito com CSS. Ele deseja que os controles de formulário search `input` e submit `input` sejam os dois primeiros itens na ordem das guias. Adicione um atributo `tabindex` definido como `1` para o `search` `input` e um atributo `tabindex` definido como `2` para o `submit` `input`.
Outra questão a ser observada é o fato de que alguns navegadores podem colocar você no meio da ordem de navegação via tecla "tab" quando um elemento é clicado. Um elemento foi adicionado à página que garante que você sempre iniciará no início de sua ordem ao pressionar a tecla tab.
# --hints--
O código deve adicionar um atributo `tabindex` à tag `input` de id `search`.
```js
assert($('#search').attr('tabindex'));
```
O código deve adicionar um atributo `tabindex` à tag `input` de id `submit`.
```js
assert($('#submit').attr('tabindex'));
```
O código deve definir o atributo `tabindex` na tag `input` de id `search` para um valor de 1.
```js
assert($('#search').attr('tabindex') == '1');
```
O código deve definir o atributo `tabindex` na tag `input` de id `submit` para um valor de 2.
```js
assert($('#submit').attr('tabindex') == '2');
```
# --seed--
## --seed-contents--
```html
<body>
<div tabindex="1" class="overlay"></div>
<header>
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Training</a></li>
</ul>
</nav>
</header>
<form>
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<h2>Inspirational Quotes</h2>
<blockquote>
<p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
- Chuck Norris</p>
</blockquote>
<blockquote>
<p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
- TMNT</p>
</blockquote>
<footer>&copy; 2018 Camper Cat</footer>
</body>
<style>
body {
height: 100%;
margin: 0 !important;
padding: 8px;
}
.overlay {
margin: -8px;
position: absolute;
width: 100%;
height: 100%;
}
</style>
```
# --solutions--
```html
<body>
<div tabindex="1" class="overlay"></div>
<header>
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Training</a></li>
</ul>
</nav>
</header>
<form>
<label for="search">Search:</label>
<input tabindex="1" type="search" name="search" id="search">
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
</form>
<h2>Inspirational Quotes</h2>
<blockquote>
<p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
- Chuck Norris</p>
</blockquote>
<blockquote>
<p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
- TMNT</p>
</blockquote>
<footer>&copy; 2018 Camper Cat</footer>
</body>
<style>
body {
height: 100%;
margin: 0 !important;
padding: 8px;
}
.overlay {
margin: -8px;
position: absolute;
width: 100%;
height: 100%;
}
</style>
```

View File

@@ -0,0 +1,92 @@
---
id: 587d774e367417b2b2512aa0
title: Envolva conteúdos usando o elemento article
challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp79S3'
forumTopicId: 301029
dashedName: wrap-content-in-the-article-element
---
# --description--
O `article` é outro dos novos elementos HTML5 que adiciona significado semântico à sua marcação. `article` é um elemento de seção e contém informações independentes. A tag funciona bem com resumos de postagens de blog, postagens de fóruns ou artigos de notícias.
Determinar se o conteúdo pode ser independente, geralmente, é uma questão de julgamento, mas existem alguns testes simples que você pode usar. Pergunte-se: se eu remover todo o contexto ao redor, esse conteúdo ainda faria sentido? Da mesma forma para textos, o conteúdo se manteria se estivesse em um feed RSS?
Lembre-se de que as pessoas que usam tecnologias assistivas contam com uma marcação organizada e semanticamente significativa para entender melhor seu trabalho.
**Observação:** o elemento `section` também é novo no HTML5 e tem um significado semântico ligeiramente diferente do `article`. Um `article` é para conteúdo autônomo e uma `section` é para agrupar conteúdo relacionado por temas. Um podem ser usado dentro um do outro e vice-versa, conforme necessário. Por exemplo, se um livro é um `article`, cada capítulo é uma `section`. Quando não há relação entre grupos de conteúdo, use uma `div`.
`<div>` - agrupa conteúdo `<section>` - agrupa conteúdo relacionado `<article>` - agrupa conteúdo independente
# --instructions--
O Camper Cat usou a tag `article` para envolver as postagens do blog, mas se esqueceu de usá-las em outra parte da página. Altere a tag `div` por uma tag `article`.
# --hints--
O código deve ter três tags `article`.
```js
assert($('article').length == 3);
```
O código não deve ter nenhuma tag `div`.
```js
assert($('div').length == 0);
```
# --seed--
## --seed-contents--
```html
<h1>Deep Thoughts with Master Camper Cat</h1>
<main>
<div>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</div>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
</main>
```
# --solutions--
```html
<h1>Deep Thoughts with Master Camper Cat</h1>
<main>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
</main>
```

View File

@@ -0,0 +1,165 @@
---
id: 587d778b367417b2b2512aa7
title: Envolva botões de opção em um elemento fieldset para melhor acessibilidade
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJVefw'
forumTopicId: 301030
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
---
# --description--
O próximo tópico sobre formulários aborda a acessibilidade dos botões de opção (radio buttons). Cada opção recebe um `label` com um atributo `for`, que será vinculado ao `id` do item correspondente, conforme abordado no último desafio. Como os botões de opção geralmente fazem parte de um grupo em que o usuário deve escolher um, há uma maneira de mostrar semanticamente que as opções fazem parte de um conjunto.
A tag `fieldset` envolve todo o grupo de botões de opção para fazer isso. Frequentemente, usa-se uma tag `legend` para fornecer uma descrição para o agrupamento, que é lida por leitores de tela para cada opção no elemento `fieldset`.
O wrapper `fieldset` e a tag `legend` não são necessários quando as escolhas são autoexplicativas, como uma seleção de gênero. Usar um `label` com o atributo `for` para cada botão de opção é suficiente.
Exemplo:
```html
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
```
# --instructions--
O Camper Cat quer informações sobre o nível ninja dos usuários quando eles se inscrevem em sua lista de e-mail. Ele adicionou um conjunto de botões de opção e aprendeu em nossa última lição a usar tags `label` com atributos `for` para cada opção. É isso aí, Camper Cat! No entanto, o código ainda precisa de uma revisão. Altere a tag `div` ao redor dos botões de opção para uma tag `fieldset` e altere a tag `p` dentro dela para uma `legend`.
# --hints--
O código deve ter uma tag `fieldset` ao redor do grupo de botões de opção.
```js
assert($('fieldset').length == 1);
```
O elemento `fieldset` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/fieldset>/g) &&
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
);
```
O código deve ter uma tag `legend` ao redor do texto perguntando em que nível ninja o usuário está.
```js
assert($('legend').length == 1);
```
O código não deve ter nenhuma tag `div`.
```js
assert($('div').length == 0);
```
O código não deve mais ter uma tag `p` ao redor do texto perguntando em que nível ninja o usuário está.
```js
assert($('p').length == 4);
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<!-- Only change code below this line -->
<div>
<p>What level ninja are you?</p>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
</div>
<!-- Only change code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```

View File

@@ -0,0 +1,154 @@
---
id: 587d781b367417b2b2512abe
title: Adicionar sombras a um elemento de cartão
challengeType: 0
videoUrl: 'https://scrimba.com/c/cvVZdUd'
forumTopicId: 301031
dashedName: add-a-box-shadow-to-a-card-like-element
---
# --description--
A propriedade `box-shadow` aplica uma ou mais sombras a um elemento.
A propriedade `box-shadow` recebe valores para
<ul>
<li><code>offset-x</code> (determina a distância que você quer "empurrar" a sombra na horizontal),</li>
<li><code>offset-y</code> (determina a distância que você quer "empurrar" a sombra na vertical),</li>
<li><code>blur-radius</code> (faz com que a sombra fique mais borrada),</li>
<li><code>spread-radius</code> (faz com que a sombra se espalhe mais) e</li>
<li><code>color</code> (cor), nessa ordem.</li>
</ul>
Os valores `blur-radius` e `spread-radius` são opcionais.
Múltiplas sombras podem ser criadas usando vírgulas para separar os valores de cada `box-shadow`.
Um exemplo de CSS para criar várias sombras com um pouco de desfoque (blur), usando a cor preta quase transparente:
```css
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
```
# --instructions--
O elemento ao qual você precisa aplicar a sombra tem um id de `thumbnail`. Com esse seletor, use os valores CSS do exemplo acima para colocar uma `box-shadow` no cartão.
# --hints--
O código deve adicionar uma propriedade `box-shadow` no elemento de id `thumbnail`.
```js
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
```
Você deve usar os valores do CSS fornecidos para `box-shadow`.
```js
assert(
code.match(
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
```
# --solutions--
```html
<style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
```

View File

@@ -0,0 +1,113 @@
---
id: bad87fee1348bd9aedd08830
title: Adicionar um botão de envio a um formulário
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
forumTopicId: 16627
dashedName: add-a-submit-button-to-a-form
---
# --description--
Vamos adicionar um botão do tipo `submit` ao seu formulário. Ao clicar neste botão, enviaremos os dados inseridos para o URL que você especificou no atributo `action` de seu formulário.
Aqui está um exemplo de um botão do tipo enviar (submit):
```html
<button type="submit">this button submits the form</button>
```
# --instructions--
Adicione um botão do tipo `submit` e com o texto `Submit` como o último elemento de seu elemento `form`.
# --hints--
O elemento `form` precisa ter um elemento `button` dentro dele.
```js
assert($('form').children('button').length > 0);
```
O botão enviar deve ter o atributo `type` definido como `submit`.
```js
assert($('button').attr('type') === 'submit');
```
O botão enviar deve ter apenas o texto `Submit`.
```js
assert(
$('button')
.text()
.match(/^\s*submit\s*$/gi)
);
```
O elemento `button` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/button>/g) &&
code.match(/<button/g) &&
code.match(/<\/button>/g).length === code.match(/<button/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
</main>
```

View File

@@ -0,0 +1,93 @@
---
id: bad87fee1348bd9aedf08812
title: Adicionar imagens ao seu site
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
forumTopicId: 16640
dashedName: add-images-to-your-website
---
# --description--
Você pode adicionar imagens ao seu site usando o elemento `img` e apontar o caminho (URL) da imagem usando o atributo `src`.
Exemplo:
```html
<img src="https://www.freecatphotoapp.com/your-image.jpg">
```
Observe que os elementos `img` fecham em si mesmos.
Todos os elementos `img` **precisam** ter um atributo `alt`. O texto de um atributo `alt` é usado por leitores de tela para melhorar a acessibilidade. Ele é exibido se a imagem não puder ser carregada.
**Observação:** usar um atributo `alt` vazio é uma prática recomendada se a imagem for meramente ilustrativa.
Preferencialmente, o atributo `alt` não deve conter caracteres especiais, a menos que isso seja necessário.
Vamos adicionar um atributo `alt` ao nosso exemplo `img` acima:
```html
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
```
# --instructions--
Tente adicionar uma imagem ao seu site:
Dentro do elemento `main` existente, insira um elemento `img` antes dos elementos `p` existentes.
Agora defina o atributo `src` para que ele aponte para o URL `https://www.bit.ly/fcc-relaxing-cat`
Por fim, não se esqueça de dar ao elemento `img` um atributo `alt` com um texto adequado.
# --hints--
A página deve ter um elemento de imagem.
```js
assert($('img').length);
```
A imagem deve ter um atributo `src` que aponte para o caminho da imagem do gatinho.
```js
assert(/^https:\/\/(www\.)?bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
```
O atributo `alt` do elemento de imagem não deve estar vazio.
```js
assert(
$('img').attr('alt') &&
$('img').attr('alt').length &&
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
__helpers.removeWhiteSpace(code)
)
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

View File

@@ -0,0 +1,108 @@
---
id: bad87fee1348bd9aedf08830
title: Adicionar texto placeholder a um campo de texto
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
forumTopicId: 16647
dashedName: add-placeholder-text-to-a-text-field
---
# --description--
O texto placeholder é o conteúdo exibido dentro do elemento `input` antes da inserção de texto por parte do usuário.
Você pode criar um texto placeholder da seguinte maneira:
```html
<input type="text" placeholder="this is placeholder text">
```
**Observação:** lembre-se de que os elementos `input` fecham em si mesmos.
# --instructions--
Defina o valor do `placeholder` do elemento `input` de texto para "cat photo URL".
# --hints--
Você deve adicionar um atributo `placeholder` ao elemento `input` de texto que já existe.
```js
assert($('input[placeholder]').length > 0);
```
Você deve definir o valor do atributo `placeholder` para `cat photo URL`.
```js
assert(
$('input') &&
$('input').attr('placeholder') &&
$('input')
.attr('placeholder')
.match(/cat\s+photo\s+URL/gi)
);
```
O elemento `input` final não deve ter uma tag de fechamento.
```js
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
```
O elemento `input` final deve ter uma sintaxe válida.
```js
assert($('input[type=text]').length > 0);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text">
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text" placeholder="cat photo URL">
</main>
```

View File

@@ -0,0 +1,104 @@
---
id: bad87fee1348bd9aedd08835
title: Marcar botões e caixas de seleção por padrão
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
forumTopicId: 301094
dashedName: check-radio-buttons-and-checkboxes-by-default
---
# --description--
É possível deixar selecionada uma caixa ou um botão de seleção por padrão usando o atributo `checked`.
Para fazer isso, basta adicionar a palavra `checked` dentro de um elemento input. Por exemplo:
```html
<input type="radio" name="test-name" checked>
```
# --instructions--
Faça com que seu primeiro radio button e sua primeira checkbox estejam selecionados por padrão.
# --hints--
O primeiro radio button de seu formulário deve estar selecionado por padrão.
```js
assert($('input[type="radio"]').prop('checked'));
```
A primeira checkbox de seu formulário deve estar selecionada por padrão.
```js
assert($('input[type="checkbox"]').prop('checked'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

View File

@@ -0,0 +1,76 @@
---
id: bad87fee1348bd9aedf08804
title: Comentários no HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
forumTopicId: 16782
dashedName: comment-out-html
---
# --description--
Para iniciar um comentário, lembre-se de que é preciso usar `<!--`. Para encerrá-lo, utilize `-->`
Neste exercício, você vai precisar encerrar o comentário antes do elemento `h2` iniciar.
# --instructions--
Comente os elementos `h1` e `p`, mas deixe o elemento `h2` fora do comentário.
# --hints--
O elemento `h1` deve estar comentado para não ser exibido na página.
```js
assert($('h1').length === 0);
```
O elemento `h2` não deve ser comentado para poder ser exibido na página.
```js
assert($('h2').length > 0);
```
O elemento `p` deve estar comentado para não ser exibido na página.
```js
assert($('p').length === 0);
```
Todos os comentários devem ser fechados com `-->`.
```js
assert(code.match(/[^fc]-->/g).length > 1);
```
Você não deve mudar a ordem dos elementos `h1`, `h2` e `p` no código.
```js
assert(
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
);
```
# --seed--
## --seed-contents--
```html
<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->
```
# --solutions--
```html
<!--<h1>Hello World</h1>-->
<h2>CatPhotoApp</h2>
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
```

View File

@@ -0,0 +1,102 @@
---
id: bad87fee1348bd9aedf08827
title: Criar uma lista não ordenada de itens
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
forumTopicId: 16814
dashedName: create-a-bulleted-unordered-list
---
# --description--
O HTML tem um elemento especial para a criação de <dfn>listas não ordenadas</dfn> ou listas ao estilo itemizado.
Listas não ordenadas começam com o elemento `<ul>`, seguido por uma quantidade qualquer de elementos `<li>`. Por fim, são fechadas com a tag `</ul>`.
Por exemplo:
```html
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
```
cria uma lista de estilo itemizado de `milk` e `cheese`.
# --instructions--
Remova os dois últimos elementos `p` e crie uma lista não ordenada de três coisas que os gatos adoram na parte inferior da página.
# --hints--
Crie um elemento `ul`.
```js
assert($('ul').length > 0);
```
Você precisa de três elementos `li` dentro de seu elemento `ul`.
```js
assert($('ul li').length > 2);
```
O elemento `ul` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/ul>/gi) &&
code.match(/<ul/gi) &&
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
);
```
Os elementos `li` devem ter tags de fechamento.
```js
assert(
code.match(/<\/li>/gi) &&
code.match(/<li[\s>]/gi) &&
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
);
```
Os elementos `li` não devem estar vazios ou ter espaços em branco.
```js
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<ul>
<li>milk</li>
<li>mice</li>
<li>catnip</li>
</ul>
</main>
```

View File

@@ -0,0 +1,106 @@
---
id: bad87fee1348bd9aede08830
title: Criar um elemento de formulário
challengeType: 0
forumTopicId: 16817
dashedName: create-a-form-element
---
# --description--
Você pode criar formulários que enviam dados a um servidor usando apenas HTML puro. Você pode fazer isso especificando o atributo `action` ao elemento `form`.
Por exemplo:
```html
<form action="/url-where-you-want-to-submit-form-data">
<input>
</form>
```
# --instructions--
Coloque o elemento `input` que já existe dentro de um elemento `form` e insira `"https://www.freecatphotoapp.com/submit-cat-photo"` no atributo `action` do elemento `form`.
# --hints--
O elemento `input` existente deve ficar dentro do elemento `form`.
```js
const inputElem = document.querySelector('form input');
assert(
inputElem.getAttribute('type') === 'text' &&
inputElem.getAttribute('placeholder') === 'cat photo URL'
);
```
O elemento `form` deve ter o atributo `action` definido como `https://www.freecatphotoapp.com/submit-cat-photo`
```js
const action = $('form').attr('action');
assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
```
O elemento `form` deve ter as tags de abertura e fechamento corretas.
```js
assert(
code.match(/<\/form>/g) &&
code.match(/<form [^<]*>/g) &&
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text" placeholder="cat photo URL">
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
</main>
```

View File

@@ -0,0 +1,135 @@
---
id: bad87fee1348bd9aedf08835
title: Criar um grupo de caixas de seleção
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
forumTopicId: 16821
dashedName: create-a-set-of-checkboxes
---
# --description--
Os formulários normalmente usam <dfn>caixas de seleção</dfn> para perguntas que tenham mais de uma resposta.
As caixas de seleção são um tipo de `input`.
Cada uma das caixas de seleção deve estar dentro de seu próprio elemento `label`. Ao envolver um elemento `input` em um elemento `label`, este último vai estar automaticamente associado ao input da caixa de seleção em questão.
Todos os inputs de caixa de seleção correspondentes a uma mesma pergunta devem ter o atributo `name` de mesmo valor.
É uma prática recomendada definir claramente a relação entre o `input` de uma caixa de seleção e seu elemento `label` correspondente por meio da definição do atributo `for` no elemento `label`, de modo que este atributo corresponda ao atributo `id` associado ao elemento `input`.
Aqui vemos um exemplo de caixa de seleção:
```html
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
```
# --instructions--
Adicione ao formulário um grupo de três caixas de seleção. Cada caixa de seleção deve estar dentro de seu próprio elemento `label`. As três devem compartilhar o atributo `name` de valor `personality`.
# --hints--
A página deve ter três elementos de caixa de seleção.
```js
assert($('input[type="checkbox"]').length > 2);
```
Cada uma das três caixas de seleção deve estar dentro de seu próprio elemento `label`.
```js
assert($('label > input[type="checkbox"]:only-child').length > 2);
```
Verifique se cada um dos elementos `label` tem uma tag de fechamento.
```js
assert(
code.match(/<\/label>/g) &&
code.match(/<label/g) &&
code.match(/<\/label>/g).length === code.match(/<label/g).length
);
```
As caixas de seleção devem ter o atributo `name` com o valor de `personality`.
```js
assert(
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
);
```
Todas as suas caixas de seleção dever ser adicionadas dentro da tag `form`.
```js
assert($('label').parent().get(0).tagName.match('FORM'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
<label for="lazy"><input id="lazy" type="checkbox"
name="personality">Lazy</label>
<label for="evil"><input id="evil" type="checkbox"
name="personality">Evil</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

View File

@@ -0,0 +1,160 @@
---
id: bad87fee1348bd9aedf08834
title: Criar um grupo de botões de seleção
challengeType: 0
forumTopicId: 16822
dashedName: create-a-set-of-radio-buttons
---
# --description--
Você pode usar <dfn>botões de seleção</dfn> para perguntas onde você queira que o usuário dê apenas uma resposta dentre várias opções.
Os botões de seleção são um tipo de `input`.
Cada um dos botões de seleção deve estar dentro de seu próprio elemento `label`. Ao envolver um elemento `input` em um elemento `label`, este último vai estar automaticamente associado ao input do botão de seleção em questão.
Todos os botões de seleção correspondentes a uma mesma pergunta devem ter o atributo `name` de mesmo valor para criar um grupo de botões de seleção. Ao criar um grupo de botões de seleção, ao selecionar qualquer um dos botões, os outros serão desmarcados automaticamente, garantindo que apenas uma resposta seja fornecida pelo usuário.
Aqui vemos um exemplo de botão de seleção:
```html
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
```
É uma prática recomendada definir o atributo `for` no elemento `label` contendo um valor equivalente ao do atributo `id` do elemento `input`. Isso permite que tecnologias assistivas criem uma relação entre o label e o elemento `input`. Por exemplo:
```html
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
```
Também podemos alocar o elemento `input` dentro das tags `label`:
```html
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
```
# --instructions--
Adicione dois botões de seleção ao formulário, cada um associado ao seu próprio elemento `label`. Em um, coloque o texto `indoor`. No outro, coloque o texto `outdoor`. Ambos devem ter o atributo `name` definido como `indoor-outdoor` para que seja criado um grupo de botões de seleção.
# --hints--
A página deve ter dois inputs do tipo `radio`.
```js
assert($('input[type="radio"]').length > 1);
```
Os botões de seleção devem ter o atributo `name` com o valor de `indoor-outdoor`.
```js
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
```
Cada um dos dois botões de seleção deve estar dentro de seu próprio elemento `label`.
```js
assert($('label > input[type="radio"]:only-child').length > 1);
```
O elemento `label` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/label>/g) &&
code.match(/<label/g) &&
code.match(/<\/label>/g).length === code.match(/<label/g).length
);
```
Um dos botões de seleção deve ter o elemento label com o texto `indoor`.
```js
assert(
$('label')
.text()
.match(/indoor/gi)
);
```
Um dos botões de seleção deve ter o elemento label com o texto `outdoor`.
```js
assert(
$('label')
.text()
.match(/outdoor/gi)
);
```
Os botões de seleção dever ser adicionados dentro da tag `form`.
```js
assert($('label').parent().get(0).tagName.match('FORM'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

View File

@@ -0,0 +1,89 @@
---
id: bad87fee1348bd9aedf08829
title: Criar um campo de texto
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
forumTopicId: 16823
dashedName: create-a-text-field
---
# --description--
Agora vamos criar um formulário web.
Os elementos `input` são uma maneira conveniente de obter informações de seu usuário.
Você pode criar um input de texto dessa forma:
```html
<input type="text">
```
Observe que os elementos `input` fecham em si mesmos.
# --instructions--
Crie um elemento `input` do tipo `text` abaixo das listas.
# --hints--
A página deve ter um elemento `input` do tipo `text`.
```js
assert($('input[type=text]').length > 0);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form>
<input type="text">
</form>
</main>
```

View File

@@ -0,0 +1,157 @@
---
id: bad87fee1348bd9aedf08828
title: Criar uma lista ordenada
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
forumTopicId: 16824
dashedName: create-an-ordered-list
---
# --description--
O HTML tem um elemento especial para a criação de <dfn>listas ordenadas</dfn>, ou listas numeradas.
Listas ordenadas têm um elemento `<ol>` inicial, seguido por uma quantidade qualquer de elementos `<li>`. Por fim, listas ordenadas são fechadas com uma tag `</ol>`.
Por exemplo:
```html
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
```
criaria uma lista numerada com `Garfield` e `Sylvester`.
# --instructions--
Crie uma lista ordenada com as três coisas que os gatos mais odeiam.
# --hints--
Você deve ter uma lista ordenada para as `Top 3 things cats hate:`
```js
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
```
Você deve ter uma lista não ordenada para `Things cats love:`
```js
assert(/Things cats love:/i.test($('ul').prev().text()));
```
Você deve ter apenas um elemento `ul`.
```js
assert.equal($('ul').length, 1);
```
Você deve ter apenas um elemento `ol`.
```js
assert.equal($('ol').length, 1);
```
Você precisa de três elementos `li` dentro do elemento `ul`.
```js
assert.equal($('ul li').length, 3);
```
Você precisa de três elementos `li` dentro do elemento `ol`.
```js
assert.equal($('ol li').length, 3);
```
O elemento `ul` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/ul>/g) &&
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
);
```
O elemento `ol` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/ol>/g) &&
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
);
```
O elemento `li` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/li>/g) &&
code.match(/<li>/g) &&
code.match(/<\/li>/g).length === code.match(/<li>/g).length
);
```
Os elementos `li` da lista não ordenada não devem estar vazios.
```js
$('ul li').each((i, val) =>
assert(__helpers.removeWhiteSpace(val.textContent))
);
```
Os elementos `li` da lista ordenada não devem estar vazios.
```js
$('ol li').each((i, val) =>
assert(!!__helpers.removeWhiteSpace(val.textContent))
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>hate 1</li>
<li>hate 2</li>
<li>hate 3</li>
</ol>
</main>
```

View File

@@ -0,0 +1,70 @@
---
id: 587d78aa367417b2b2512aed
title: Declarar o doctype de um documento HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
forumTopicId: 301095
dashedName: declare-the-doctype-of-an-html-document
---
# --description--
Os desafios, até o momento, trataram de elementos HTML específicos e de seus usos. No entanto, existem alguns elementos que garantem uma estrutura global à sua página, devendo ser incluídos em todos os documentos HTML.
Na parte superior do documento, você precisa informar ao navegador qual a versão do HTML você está utilizando. O HTML é uma linguagem em evolução, sendo atualizada regularmente. A maior parte dos navegadores mais conhecidos dá suporte à especificação mais recente, o HTML5. Páginas da web mais antigas, contudo, podem utilizar versões anteriores da linguagem.
Você informa isso ao navegador adicionando a tag `<!DOCTYPE ...>` na primeira linha, onde a parte que diz `...` é a versão do HTML. Para o HTML5, use apenas `<!DOCTYPE html>`.
O `!` e o `DOCTYPE` em letras maiúsculas são importantes, especialmente em navegadores mais antigos. O `html` não diferencia maiúsculas de minúsculas.
Em seguida, o resto do seu código HTML precisa ser colocado dentro de tags `html`. A tag de abertura `<html>` vai diretamente abaixo da linha que diz `<!DOCTYPE html>`, enquanto a tag de fechamento `</html>` vai ao final da página.
Aqui vemos um exemplo da estrutura inicial de uma página. Seu código HTML é colocado no espaço entre as duas tags `html`.
```html
<!DOCTYPE html>
<html>
</html>
```
# --instructions--
Adicione uma tag `DOCTYPE` na parte superior do documento HTML em branco no editor de código para utilizar a versão 5 do HTML. Abaixo dela, adicione as tags `html` de abertura e de fechamento, que ficarão ao redor do elemento `h1`. O cabeçalho pode incluir qualquer texto.
# --hints--
O código deve incluir a tag `<!DOCTYPE html>`.
```js
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
```
Deve haver um elemento `html`.
```js
assert($('html').length == 1);
```
As tags `html` devem estar ao redor do elemento `h1`.
```js
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
```
# --seed--
## --seed-contents--
```html
```
# --solutions--
```html
<!DOCTYPE html>
<html>
<h1> Hello world </h1>
</html>
```

View File

@@ -0,0 +1,140 @@
---
id: 587d78aa367417b2b2512aec
title: Definir head e body de um documento HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
forumTopicId: 301096
dashedName: define-the-head-and-body-of-an-html-document
---
# --description--
Você pode adicionar mais um nível de organização ao seu documento HTML dentro das tags `html` com os elementos `head` e `body`. A marcação com informações sobre sua página é inserida na tag `head`. Por outro lado, toda a marcação com conteúdo da página (o que é exibido para o usuário) é inserida na tag `body`.
Elementos de metadados, como `link`, `meta`, `title` e `style`, normalmente vão dentro do elemento `head`.
Aqui vemos um exemplo de layout de página:
```html
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
```
# --instructions--
Edite a marcação para que haja um elemento `head` e um elemento `body`. O elemento `head` deve conter apenas o elemento `title`, enquanto o elemento `body` deve conter apenas os elementos `h1` e `p`.
# --hints--
Deve haver apenas um elemento `head` na página.
```js
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
assert(headElems && headElems.length === 1);
```
Deve haver apenas um elemento `body` na página.
```js
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
assert(bodyElems && bodyElems.length === 1);
```
O elemento `head` deve ser filho do elemento `html`.
```js
const htmlChildren = code
.replace(/\n/g, '')
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
let foundHead;
if (htmlChildren) {
const { children } = htmlChildren.groups;
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
}
assert(foundHead);
```
O elemento `body` deve ser filho do elemento `html`.
```js
const htmlChildren = code
.replace(/\n/g, '')
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
let foundBody;
if (htmlChildren) {
const { children } = htmlChildren.groups;
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
}
assert(foundBody);
```
O elemento `head` deve envolver o elemento `title`.
```js
const headChildren = code
.replace(/\n/g, '')
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
let foundTitle;
if (headChildren) {
const { children } = headChildren.groups;
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
}
assert(foundTitle);
```
O elemento `body` deve envolver os elementos `h1` e `p`.
```js
const bodyChildren = code
.replace(/\n/g, '')
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
let foundElems;
if (bodyChildren) {
const { children } = bodyChildren.groups;
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
const numH1s = h1s ? h1s.length : 0;
const numPs = ps ? ps.length : 0;
foundElems = numH1s === 1 && numPs === 1;
}
assert(foundElems);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<title>The best page ever</title>
<h1>The best page ever</h1>
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</html>
```
# --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<title>The best page ever</title>
</head>
<body>
<h1>The best page ever</h1>
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</body>
</html>
```

View File

@@ -0,0 +1,56 @@
---
id: bad87fed1348bd9aedf08833
title: Excluir elementos HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
forumTopicId: 17559
dashedName: delete-html-elements
---
# --description--
A tela do nosso telefone não possui muito espaço vertical.
Vamos remover os elementos desnecessário para podermos começar a construir nosso CatPhotoApp.
# --instructions--
Exclua o elemento `h1` para poder simplificar a visualização.
# --hints--
O elemento `h1` deve ser excluído.
```js
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
```
O elemento `h2` deve estar na página.
```js
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
```
O elemento `p` deve estar na página.
```js
assert(code.match(/<p>[\w\W]*<\/p>/gi));
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```
# --solutions--
```html
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```

View File

@@ -0,0 +1,50 @@
---
id: bad87fee1348bd9aedf08833
title: Preencher um espaço vazio com um texto placeholder
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
forumTopicId: 18178
dashedName: fill-in-the-blank-with-placeholder-text
---
# --description--
Desenvolvedores da web normalmente utilizam o texto <dfn>lorem ipsum</dfn> como placeholder. O texto lorem ipsum é composto de partes retiradas aleatoriamente de um escrito famoso de Cícero, da Roma antiga.
O texto lorem ipsum vem sendo usado como texto placeholder por tipógrafos desde o século XVI. Essa é uma tradição que continua a ser utilizada na web.
Quem somos nós para discutir com cinco séculos de tradição? Como estamos construindo um aplicativo de fotos de gatos (CatPhotoApp), vamos usar um texto chamado "kitty ipsum".
# --instructions--
Substitua o texto dentro do elemento `p` pelas primeiras palavras desse texto: `Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
# --hints--
O elemento `p` deve conter as primeiras palavras do texto "kitty ipsum" fornecido.
```js
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
```

View File

@@ -0,0 +1,70 @@
---
id: bad87fee1348bd9aedf0887a
title: Título com o elemento h2
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
forumTopicId: 18196
dashedName: headline-with-the-h2-element
---
# --description--
Durante as próximas lições, construiremos aos poucos um aplicativo para fotos de gatos em HTML5.
O elemento `h2` que você vai adicionar nesta etapa dará um título de nível dois à página da web.
Este elemento informa ao navegador sobre a estrutura do seu site. Elementos `h1` geralmente são usados para os títulos principais, enquanto os elementos `h2` geralmente são usados para subtítulos. Também existem elementos `h3`, `h4`, `h5` e `h6` para indicar níveis diferentes de subtítulos.
# --instructions--
Adicione a tag `h2` com o texto "CatPhotoApp" para criar um segundo elemento HTML abaixo do elemento `h1` que contém o texto "Hello World".
# --hints--
Você deve criar um elemento `h2`.
```js
assert($('h2').length > 0);
```
O elemento `h2` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/h2>/g) &&
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
);
```
O elemento `h2` deve conter o texto `CatPhotoApp`.
```js
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
```
O elemento `h1` deve conter o texto `Hello World`.
```js
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
```
O elemento `h1` deve estar antes do elemento `h2`.
```js
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
```

View File

@@ -0,0 +1,64 @@
---
id: bad87fee1348bd9aedf08801
title: Informar com o elemento de parágrafo
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
forumTopicId: 18202
dashedName: inform-with-the-paragraph-element
---
# --description--
Elementos `p` são os preferidos para textos de parágrafos em sites. `p` é a abreviação de "parágrafo".
Você pode criar um elemento de parágrafo da seguinte forma:
```html
<p>I'm a p tag!</p>
```
# --instructions--
Crie um elemento `p` abaixo do elemento `h2` e dê a ele o texto `Hello Paragraph`.
**Observação:** é uma convenção que todas as tags HTML sejam escritas em letras minúsculas (por exemplo, `<p></p>` em vez de `<P></P>`).
# --hints--
Seu código deve ter um elemento `p` válido.
```js
assert($('p').length > 0);
```
O elemento `p` deve conter o texto `Hello Paragraph`.
```js
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
```
O elemento `p` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/p>/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
```
# --seed--
## --seed-contents--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
```

View File

@@ -0,0 +1,98 @@
---
id: bad87fee1348bd9aecf08801
title: Introdução aos elementos do HTML5
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
forumTopicId: 301097
dashedName: introduction-to-html5-elements
---
# --description--
O HTML5 apresenta tags HTML mais descritivas. Essas tags incluem `main`, `header`, `footer`, `nav`, `video`, `article` e `section`, entre outras.
Essas tags conferem uma estrutura descritiva ao seu HTML, tornam seu HTML mais fácil de ler e ajudam com a otimização dos mecanismos de busca (SEO) e com a acessibilidade. A tag `main` do HTML5 ajuda os mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal de sua página.
Vemos abaixo um exemplo de uso de um elemento `main` com dois elementos filhos dentre dele:
```html
<main>
<h1>Hello World</h1>
<p>Hello Paragraph</p>
</main>
```
**Observação:** muitas das novas tags HTML5 e seus benefícios são abordadas na seção Acessibilidade Aplicada.
# --instructions--
Crie um segundo elemento `p` com o texto de kitty ipsum a seguir: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
Em seguida, crie um elemento `main` e coloque os dois elementos `p` dentro do elemento `main`.
# --hints--
Você deve ter 2 elementos `p` contendo o texto Kitty Ipsum.
```js
assert($('p').length > 1);
```
Cada elemento `p` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/p>/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
```
O elemento `p` deve conter as palavras do texto `kitty ipsum text` fornecido.
```js
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
```
O seu código deve ter um elemento `main`.
```js
assert($('main').length === 1);
```
O elemento `main` deve ter dois elementos de parágrafo como filhos.
```js
assert($('main').children('p').length === 2);
```
A tag de abertura `main` deve vir antes da primeira tag de parágrafo.
```js
assert(code.match(/<main>\s*?<p>/g));
```
A tag de fechamento `main` deve vir depois da segunda tag de fechamento de parágrafo.
```js
assert(code.match(/<\/p>\s*?<\/main>/g));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

View File

@@ -0,0 +1,78 @@
---
id: bad87fee1348bd9aedf08816
title: Criar links para páginas externas com elementos de âncora
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
forumTopicId: 18226
dashedName: link-to-external-pages-with-anchor-elements
---
# --description--
Você pode usar elementos `a` (*âncora*) para vincular conteúdos externos à sua página da web.
Os elementos `a` precisam de um endereço (link) que é colocado no atributo `href`. Eles também precisam de um texto que servirá de "âncora". Aqui está um exemplo:
```html
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
```
Então o seu navegador exibirá o texto `this links to freecodecamp.org` como um "link" que você pode clicar. E esse link levará você para o endereço `https://www.freecodecamp.org`.
# --instructions--
Crie um elemento `a` que vincule a `https://www.freecatphotoapp.com` e que tenha "cat photos" como seu texto de âncora.
# --hints--
O elemento `a` deve ter o texto `cat photos` como âncora.
```js
assert(/cat photos/gi.test($('a').text()));
```
Você precisa de um elemento `a` que se vincule ao endereço `https://www.freecatphotoapp.com`
```js
assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
```
O elemento `a` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/a>/g) &&
code.match(/<\/a>/g).length === code.match(/<a/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<a href="https://www.freecatphotoapp.com">cat photos</a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

View File

@@ -0,0 +1,120 @@
---
id: bad88fee1348bd9aedf08816
title: Link para seções internas de uma página com elementos de âncora
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
forumTopicId: 301098
dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
---
# --description--
Os elementos `a` (*âncora*) também podem ser usados para criar vínculos internos, para saltar para seções diferentes de sua pagina da web.
Para criar um link interno, você associa o atributo `href` do link para um símbolo de hash `#`, em combinação com o valor do atributo `id` do elemento ao qual você deseja vincular internamente, que geralmente fica mais abaixo na página. Você, então, precisará adicionar o mesmo atributo `id` ao elemento que está sendo vinculado ao link. `id` é um atributo que descreve um único elemento.
Abaixo, vemos um exemplo de um link vinculado a um elemento interno da página:
```html
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
```
Quando os usuários clicam no link `Contacts`, eles são levados à seção da página que contem o texto **Contacts**.
# --instructions--
Troque o link externo por um link interno mudando o atributo `href` para o valor `"#footer"` e o texto de `cat photos` para `Jump to Bottom`.
Remova o atributo `target="_blank"` da tag de âncora, pois ele faz com que o documento vinculado abra em uma nova aba do navegador.
Em seguida, adicione o atributo `id` com o valor de `footer` ao elemento `<footer>` na parte inferior da página.
# --hints--
Deve haver apenas uma tag de âncora em sua página.
```js
assert($('a').length == 1);
```
Deve haver apenas um elemento `footer` em sua página.
```js
assert($('footer').length == 1);
```
A tag `a` deve ter o atributo `href` definido com o valor de "#footer".
```js
assert($('a').eq(0).attr('href') == '#footer');
```
A tag `a` não deve ter o atributo `target`
```js
assert(
typeof $('a').eq(0).attr('target') == typeof undefined ||
$('a').eq(0).attr('target') == true
);
```
O texto de `a` deve ser "Jump to Bottom".
```js
assert(
$('a')
.eq(0)
.text()
.match(/Jump to Bottom/gi)
);
```
A tag `footer` deve ter um atributo `id` com o valor "footer".
```js
assert($('footer').eq(0).attr('id') == 'footer');
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
</main>
<footer>Copyright Cat Photo App</footer>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="#footer">Jump to Bottom</a>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
</main>
<footer id="footer">Copyright Cat Photo App</footer>
```

View File

@@ -0,0 +1,58 @@
---
id: bad87fee1348bd9aedf08817
title: Tornar links inativos usando o símbolo de hash
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
forumTopicId: 18230
dashedName: make-dead-links-using-the-hash-symbol
---
# --description--
Às vezes, você desejará adicionar elementos `a` ao seu site antes de saber para onde eles levarão.
Isso também é útil quando você está mudando o comportamento de um link usando `JavaScript`, linguagem que aprenderemos mais tarde.
# --instructions--
O valor atual do atributo `href` é um link que aponta para "`https://www.freecatphotoapp.com`. Substitua o valor do atributo `href` por um `#`, também conhecido como símbolo de hash, para criar um link inativo.
Por exemplo: `href="#"`
# --hints--
Seu elemento `a` deve ser um link inativo com o valor do atributo `href` definido como "#".
```js
assert($('a').attr('href') === '#');
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>.</p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

View File

@@ -0,0 +1,163 @@
---
id: bad87fee1348bd9aede08817
title: Inserir um elemento de âncora em um parágrafo
challengeType: 0
forumTopicId: 18244
dashedName: nest-an-anchor-element-within-a-paragraph
---
# --description--
Você pode incluir links dentro de outros elementos de texto.
```html
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
```
Vamos dividir o exemplo em partes. O texto normal está dentro do elemento `p`:
```html
<p> Here's a ... for you to follow. </p>
```
Em seguida, temos o elemento de *âncora* `<a>` (que exige uma tag de fechamento `</a>`):
```html
<a> ... </a>
```
`target` é um atributo da tag de âncora que especifica onde abrir o link. O valor `_blank` especifica que o link deve ser aberto em uma nova aba. O atributo `href` da tag de âncora contém o endereço URL do link:
```html
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
```
O texto, `link to www.freecodecamp.org`, dentro do elemento `a`, é chamado de <dfn>texto âncora</dfn> e exibirá o link que pode ser clicado:
```html
<a href=" ... " target="...">link to freecodecamp.org</a>
```
O resultado final do exemplo ficará assim:
Aqui está um link <a href="https://www.freecodecamp.org" target="_blank">para www.freecodecamp.org</a> para você clicar.
# --instructions--
Insira o elemento `a` dentro de um novo elemento `p`. O novo parágrafo deve ter um texto que diz `View more cat photos`, onde `cat photos` é um link, enquanto o restante é texto sem formatação.
# --hints--
Você deve ter apenas um elemento `a`.
```js
assert(
$('a').length === 1
);
```
O elemento `a` deve direcionar para "`https://www.freecatphotoapp.com`".
```js
assert(
$('a[href="https://www.freecatphotoapp.com"]').length === 1
);
```
O texto âncora do elemento `a` deve ser `cat photos`
```js
assert(
$('a')
.text()
.match(/cat\sphotos/gi)
);
```
Você deve criar um novo elemento `p`. Deve haver pelo menos 3 tags `p` no seu código HTML.
```js
assert($('p') && $('p').length > 2);
```
O elemento `a` deve ser incluído em seu novo elemento `p`.
```js
assert(
$('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
);
```
O elemento `p` deve ter o texto `View more` (com um espaço depois dele).
```js
assert(
$('a[href="https://www.freecatphotoapp.com"]')
.parent()
.text()
.match(/View\smore\s/gi)
);
```
O elemento `a` <em>não</em> deve conter o texto `View more`.
```js
assert(
!$('a')
.text()
.match(/View\smore/gi)
);
```
Todos os elementos `p` devem ter uma tag de fechamento.
```js
assert(
code.match(/<\/p>/g) &&
code.match(/<p/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
```
Cada elemento `a` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/a>/g) &&
code.match(/<a/g) &&
code.match(/<\/a>/g).length === code.match(/<a/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

View File

@@ -0,0 +1,121 @@
---
id: bad87fee1348bd9aede08835
title: Inserir diversos elementos em um único elemento div
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
forumTopicId: 18246
dashedName: nest-many-elements-within-a-single-div-element
---
# --description--
O elemento `div`, também conhecido como elemento de divisão, é um container para outros elementos.
O elemento `div` é, provavelmente, o elemento de HTML mais utilizado de todos.
Assim como os outros elementos que precisam de fechamento, você pode abrir um elemento `div` com `<div>` e fechá-lo em outra linha com `</div>`.
# --instructions--
Insira suas listas que dizem "Things cats love" e "Top 3 things cats hate" dentro de um único elemento `div`.
Dica: experimente colocar a tag de abertura da `div` acima do elemento `p` que diz "Things cats love" e a tag de fechamento da `div` após a tag de fechamento do elemento `ol` para que as duas listas estejam dentro do elemento `div`.
# --hints--
Os elementos `p` deve estar dentro do elemento `div`.
```js
assert($('div').children('p').length > 1);
```
O elemento `ul` deve estar dentro do elemento `div`.
```js
assert($('div').children('ul').length > 0);
```
O elemento `ol` deve estar dentro do elemento `div`.
```js
assert($('div').children('ol').length > 0);
```
O elemento `div` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<\/div>/g).length === code.match(/<div>/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

View File

@@ -0,0 +1,60 @@
---
id: bd7123c8c441eddfaeb5bdef
title: Conhecer os elementos HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
forumTopicId: 18276
dashedName: say-hello-to-html-elements
---
# --description--
Bem-vindo aos desafios sobre HTML da freeCodeCamp. Eles guiarão você no aprendizado sobre desenvolvimento web.
Em primeiro lugar, você construirá uma página simples usando HTML. Você poderá editar o código em seu editor, que se encontra incorporado a esta página.
Você consegue ver no seu editor de código um código que diz `<h1>Hello</h1>`? Ele é um elemento HTML.
A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento.
As tags de abertura seguem este formato:
```html
<h1>
```
As de fechamento, por outro lado, são assim:
```html
</h1>
```
A única diferença entre as tags de abertura e de fechamento é a barra inclinada para frente (/) após o sinal de menor (<) da tag de fechamento.
Cada desafio possui testes que você pode executar a qualquer momento clicando no botão "Run tests". Ao passar em todos os testes, será sugerido que você envie a solução e vá para o próximo desafio.
# --instructions--
Para passar no teste deste desafio, mude o texto do elemento `h1` para que ele exiba `Hello World`.
# --hints--
O elemento `h1` deve conter o texto `Hello World`.
```js
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
```
# --seed--
## --seed-contents--
```html
<h1>Hello</h1>
```
# --solutions--
```html
<h1>Hello World</h1>
```

View File

@@ -0,0 +1,80 @@
---
id: bad87fee1348bd9aedf08820
title: Transformar uma imagem em um link
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
forumTopicId: 18327
dashedName: turn-an-image-into-a-link
---
# --description--
Você pode transformar elementos em links colocando-os dentro de um elemento `a`.
Coloque a imagem dentro de um elemento `a`. Exemplo:
```html
<a href="#"><img src="https://www.bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
```
Lembre-se de usar `#` como valor da propriedade `href` no elemento `a` para transformá-lo em um link inativo.
# --instructions--
Coloque o elemento de imagem existente dentro do elemento `a` (*de âncora*).
Uma vez feito isso, passe o cursor do mouse sobre a imagem. O ponteiro do cursor vai se transformar no ponteiro para clicar em links. A foto agora é um link.
# --hints--
O elemento `img` deve estar dentro do elemento `a`.
```js
assert($('a').children('img').length > 0);
```
O elemento `a` deve ser um link inativo com o atributo `href` definido com o valor `#`.
```js
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
```
Todos os elementos `a` devem ter uma tag de fechamento.
```js
assert(
code.match(/<\/a>/g) &&
code.match(/<a/g) &&
code.match(/<\/a>/g).length === code.match(/<a/g).length
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```

View File

@@ -0,0 +1,70 @@
---
id: bad87fee1348bd9aedf08802
title: Remover comentário no HTML
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
forumTopicId: 18329
dashedName: uncomment-html
---
# --description--
Comentar é uma forma de deixar comentários para outros desenvolvedores dentro de seu código sem afetar o resultado exibido para o usuário final.
Também é uma maneira conveniente de deixar código inativo sem ter de excluí-lo completamente.
Comentários em HTML começam com `<!--` e terminam em `-->`
# --instructions--
Remova seus elementos `h1`, `h2` e `p` dos comentários.
# --hints--
O elemento `h1` deve estar visível na página ao retirá-lo do comentário.
```js
assert($('h1').length > 0);
```
O elemento `h2` deve estar visível na página ao retirá-lo do comentário.
```js
assert($('h2').length > 0);
```
O elemento `p` deve estar visível na página ao retirá-lo do comentário.
```js
assert($('p').length > 0);
```
Não devem restar tags de comentário visíveis na página (por exemplo, `-->`).
```js
assert(!$('*:contains("-->")')[1]);
```
# --seed--
## --seed-contents--
```html
<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->
```
# --solutions--
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```

View File

@@ -0,0 +1,86 @@
---
id: bad87fee1348bd9aedc08830
title: Tornar um campo de entrada obrigatório usando HTML5
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
forumTopicId: 18360
dashedName: use-html5-to-require-a-field
---
# --description--
Você pode tornar obrigatórios campos específicos do formulário para que o usuário não possa enviar o formulário sem que o tenha preenchido.
Por exemplo, se você quer tornar um campo de inserção de texto obrigatório, simplesmente adicione o atributo `required` em seu elemento `input` da seguinte maneira: `<input type="text" required>`
# --instructions--
Torne o `input` de texto em um campo `required`, para que seu usuário não possa enviar o formulário sem preencher este campo.
Em seguida, tente enviar seu formulário sem inserir informação alguma nele. Consegue ver como o formulário no HTML5 notifica você de que o campo é obrigatório?
# --hints--
O elemento `input` do tipo de texto deve ter o atributo `required`.
```js
assert($('input').prop('required'));
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" required placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
</main>
```

View File

@@ -0,0 +1,148 @@
---
id: 5c6c06847491271903d37cfd
title: Usar o atributo value nos inputs do tipo radio e checkbox
challengeType: 0
forumTopicId: 301099
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
---
# --description--
Quando um formulário é enviado, os dados vão para um servidor, e este, por sua vez, irá identificar os valores de cada input. Os inputs do tipo `radio` e `checkbox` têm seus valores identificados a partir do atributo `value`.
Por exemplo:
```html
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
```
Aqui, temos dois inputs do tipo `radio`. Quando o usuário envia o formulário com a opção `indoor` selecionada, os dados do formulário incluirão a linha: `indoor-outdoor=indoor`. Essas informações vêm dos atributos `name` e `value` do input "indoor".
Se você omitir o atributo `value`, o formulário enviado usa o valor padrão, que é `on`. Neste cenário, mesmo que o usuário clicasse na opção "indoor" e enviasse o formulário, os dados resultantes do formulário seriam `indoor-outdoor=on`, o que não é útil. Por isso, o atributo `value` precisa ser definido com algo que identifique a opção.
# --instructions--
Dê a cada um dos inputs do tipo `radio` e do tipo `checkbox` o atributo `value`. Use o texto do label do input, em letras minúsculas, como o valor do atributo.
# --hints--
Um dos botões de seleção (radio) deve ter o atributo `value` definido com o valor de `indoor`.
```js
assert(
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
.length > 0
);
```
Um dos botões de seleção (radio) deve ter o atributo `value` definido com o valor de `outdoor`.
```js
assert(
$('label:contains("Outdoor") > input[type="radio"]').filter(
"[value='outdoor']"
).length > 0
);
```
Uma das caixas de seleção (checkbox) deve ter o atributo `value` definido com o valor de `loving`.
```js
assert(
$('label:contains("Loving") > input[type="checkbox"]').filter(
"[value='loving']"
).length > 0
);
```
Uma das caixas de seleção (checkbox) deve ter o atributo `value` definido com o valor de `lazy`.
```js
assert(
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
.length > 0
);
```
Uma das caixas de seleção (checkbox) deve ter o atributo `value` definido com o valor de `energetic`.
```js
assert(
$('label:contains("Energetic") > input[type="checkbox"]').filter(
"[value='energetic']"
).length > 0
);
```
# --seed--
## --seed-contents--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
# --solutions--
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```

View File

@@ -0,0 +1,91 @@
---
id: 587d78b0367417b2b2512b08
title: Criar media queries
challengeType: 0
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
forumTopicId: 301139
dashedName: create-a-media-query
---
# --description--
Media Queries são uma nova técnica introduzida no CSS3 que altera a apresentação do conteúdo baseando-se nas diferentes dimensões da janela de exibição (viewport). A janela de exibição é a área de uma página web visível para o usuário, e é diferente dependendo do dispositivo utilizado para acessar o site.
Media Queries consistem em um media type. Se esse media type corresponder ao tipo de dispositivo no qual o documento é exibido, os estilos são aplicados. Você pode ter quantos seletores e estilos quiser dentro de sua media query.
Aqui está um exemplo de media query que retorna o conteúdo quando a largura do dispositivo é menor ou igual a `100px`:
```css
@media (max-width: 100px) { /* CSS Rules */ }
```
e a media query a seguir retorna o conteúdo quando a altura do dispositivo é maior ou igual a `350px`:
```css
@media (min-height: 350px) { /* CSS Rules */ }
```
Lembre-se de que o CSS dentro da media query é aplicado apenas se o tipo de mídia corresponder ao do dispositivo que está sendo usado.
# --instructions--
Adicione uma media query, de modo que a tag `p` tenha a propriedade `font-size` com o valor de `10px` quando a altura do dispositivo for menor ou igual a `800px`.
# --hints--
Você deve declarar uma `@media` query para dispositivos que possuam uma altura (`height`) menor ou igual a `800px`.
```js
const media = new __helpers.CSSHelp(document).getCSSRules('media');
assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
```
O elemento `p` deve ter um `font-size` de `10px` quando a altura (`height`) do dispositivo for menor ou igual a `800px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
```
O elemento `p` deve ter um `font-size` inicial de `20px` quando a altura (`height`) do dispositivo for menor ou igual a `800px`.
```js
const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
assert(ifPFirst?.style?.fontSize === '20px');
```
# --seed--
## --seed-contents--
```html
<style>
p {
font-size: 20px;
}
/* Only change code below this line */
/* Only change code above this line */
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
```
# --solutions--
```html
<style>
p {
font-size: 20px;
}
@media (max-height: 800px) {
p {
font-size: 10px;
}
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
```

View File

@@ -0,0 +1,77 @@
---
id: 587d78b1367417b2b2512b09
title: Tornar uma imagem responsiva
challengeType: 0
videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
forumTopicId: 301140
dashedName: make-an-image-responsive
---
# --description--
Tornar imagens responsivas com CSS é muito simples. Você só precisa adicionar essas propriedades a uma imagem:
```css
img {
max-width: 100%;
height: auto;
}
```
A propriedade `max-width` de valor `100%` garantirá que a imagem nunca seja mais larga do que o contêiner em que está inserida. A propriedade `height` de valor `auto`, por sua vez, fará com que a imagem mantenha sua proporção original.
# --instructions--
Adicione as regras de estilo à classe `responsive-img` para torná-la responsiva. A imagem não pode ser mais larga do que seu contêiner (neste caso, é a janela de visualização). A proporção original deve ser mantida. Depois de adicionar seu código, redimensione a visualização para ver como suas imagens se comportam.
# --hints--
A classe `responsive-img` deve ter a propriedade `max-width` com o valor de `100%`.
```js
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
```
A classe `responsive-img` deve ter a propriedade `height` com o valor de `auto`.
```js
assert(code.match(/height:\s*?auto;/g));
```
# --seed--
## --seed-contents--
```html
<style>
.responsive-img {
}
img {
width: 600px;
}
</style>
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
```
# --solutions--
```html
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
img {
width: 600px;
}
</style>
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
```

View File

@@ -0,0 +1,77 @@
---
id: 587d78b1367417b2b2512b0c
title: Tornar a tipografia responsiva
challengeType: 0
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
forumTopicId: 301141
dashedName: make-typography-responsive
---
# --description--
Em vez de usar `em` ou `px` para dimensionar o texto, você pode usar unidades relativas à viewport para ter uma tipografia responsiva. As unidades de viewport, como as porcentagens, são unidades relativas, mas são baseadas em itens diferentes. As unidades de viewport são relativas às dimensões da viewport (largura ou altura) de um dispositivo e as porcentagens são relativas ao tamanho do elemento pai.
As quatro unidades de viewport são:
<ul><li><code>vw</code> (largura da viewport): <code>10vw</code> seria 10% da largura da viewport.</li><li><code>vh</code> (altura da viewport): <code>3vh</code> seria 3% da altura da viewport.</li><li><code>vmin</code> (mínimo da viewport): <code>70vmin</code> seria 70% da menor dimensão da viewport (altura ou largura).</li><li><code>vmax</code> (máximo da viewport): <code>100vmax</code> seria 100% da maior dimensão da viewport (altura ou largura).</li></ul>
Vemos aqui um exemplo que define a largura da tag `body` para 30% da largura da viewport.
```css
body { width: 30vw; }
```
# --instructions--
Defina a largura (`width`) da tag `h2` para 80% da largura da viewport e a largura (`width`) do parágrafo para 75% da menor dimensão da viewport.
# --hints--
A tag `h2` deve ter a propriedade `width` com o valor de 80vw.
```js
assert(
__helpers
.removeCssComments(code)
.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
);
```
A tag `p` deve ter a propriedade `width` com o valor de 75vmin.
```js
assert(
__helpers
.removeCssComments(code)
.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
);
```
# --seed--
## --seed-contents--
```html
<style>
</style>
<h2>Importantus Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
```
# --solutions--
```html
<style>
h2 {
width: 80vw;
}
p {
width: 75vmin;
}
</style>
<h2>Importantus Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
```

View File

@@ -0,0 +1,64 @@
---
id: 587d78b1367417b2b2512b0a
title: Usar uma imagem Retina para telas de resolução mais alta
challengeType: 0
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
forumTopicId: 301142
dashedName: use-a-retina-image-for-higher-resolution-displays
---
# --description--
Com o aumento dos dispositivos conectados à Internet, seus tamanhos e especificações variam bastante. As telas que esses dispositivos usam podem ser diferentes externa e internamente. A densidade de pixels é um aspecto que pode ser diferente de um dispositivo para outro e essa densidade é conhecida como Pixel Por Polegada (PPI) ou pontos por polegada (DPI). A tela mais famosa é aquela conhecida como "Tela Retina" nos notebooks Apple MacBook Pro mais recentes e, nos últimos tempos, em computadores iMac. Devido à diferença na densidade de pixels entre uma tela "Retina" e "não Retina", algumas imagens que não foram feitas com uma tela de alta resolução em mente podem parecer "pixeladas" quando renderizadas em uma tela de alta resolução.
A maneira mais simples de fazer com que suas imagens apareçam de maneira adequada em telas de alta resolução, como a "tela retina" do MacBook Pro, é definir os valores de largura (`width`) e altura (`height`) da imagem para a metade do arquivo original. Aqui vemos um exemplo de imagem que usa apenas metade da altura e largura originais:
```html
<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">
```
# --instructions--
Defina a largura (`width`) e a altura (`height`) da tag `img` para a metade de seus valores originais. Nesse caso, a altura (`height`) original e a largura (`width`) original são `200px`.
# --hints--
A tag `img` deve ter a propriedade `width` com o valor de 100 pixels.
```js
assert(document.querySelector('img').width === 100);
```
A tag `img` deve ter a propriedade `height` com o valor de 100 pixels.
```js
assert(document.querySelector('img').height === 100);
```
# --seed--
## --seed-contents--
```html
<style>
</style>
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
```
# --solutions--
```html
<style>
img {
height: 100px;
width: 100px;
}
</style>
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
```

View File

@@ -0,0 +1,47 @@
---
id: bd7158d8c242eddfaeb5bd13
title: Crie uma página de portfólio pessoal
challengeType: 3
forumTopicId: 301143
dashedName: build-a-personal-portfolio-webpage
---
# --description--
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
**Especificação de usuário nº 1:** o portfólio deve ter uma seção de boas-vindas com um id de `welcome-section`.
**Especificação de usuário nº 2:** a seção de boas-vindas deve ter um elemento `h1` que contenha algum texto.
**Especificação de usuário nº 3:** o portfólio deve ter uma seção de projetos com um id de `projects`.
**Especificação de usuário nº 4:** a seção de projetos deve conter pelo menos um elemento com uma classe de `project-tile` para armazenar um projeto.
**Especificação de usuário nº 5:** a seção de projetos deve conter pelo menos um link para um projeto.
**Especificação de usuário nº 6:** o portfólio deve ter uma seção de projetos com um id de `navbar`.
**Especificação de usuário nº 7:** a barra de navegação deve conter pelo menos um link clicável para navegar por diferentes seções na página.
**Especificação de usuário nº 8:** o portfólio deve ter um link com id `profile-link`, que abre um perfil do GitHub ou do FCC em uma nova aba.
**Especificação de usuário nº 9:** o portfólio deve ter pelo menos uma media query.
**Especificação de usuário nº 10:** a altura da seção de boas-vindas deve ser igual à altura da viewport.
**Especificação de usuário nº 11:** a barra de navegação deve estar sempre na parte superior da viewport.
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Quando tiver terminado, envie a URL do seu projeto depois de ele haver passado em todos os testes.
# --solutions--
```html
// solution required
```

View File

@@ -0,0 +1,55 @@
---
id: 587d78af367417b2b2512b04
title: Construa uma landing page para um produto
challengeType: 3
forumTopicId: 301144
dashedName: build-a-product-landing-page
---
# --description--
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
**Especificação de usuário nº 1:** a landing page do produto deve ter um elemento `header` com um `id="header"` correspondente.
**Especificação de usuário nº 2:** deve haver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente. Um logotipo da empresa seria uma boa imagem para colocar aqui.
**Especificação de usuário nº 3:** dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"`.
**Especificação de usuário nº 4:** deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link`.
**Especificação de usuário nº 5:** ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na landing page.
**Especificação de usuário nº 6:** é possível assistir a um vídeo do produto no elemento de `id="video"`.
**Especificação de usuário nº 7:** a landing page deve ter um formulário (`form`) com um `id="form"`.
**Especificação de usuário nº 8:** dentro do formulário, deve haver um campo de entrada (`input`) com `id="email"`, onde deve ser possível digitar um endereço de e-mail.
**Especificação de usuário nº 9:** o campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo.
**Especificação de usuário nº 10:** o campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail.
**Especificação de usuário nº 11:** dentro do formulário, deve haver um campo de entrada (`input`) do tipo botão com `id="submit"`.
**Especificação de usuário nº 12:** quando o elemento `#submit` for clicado, o e-mail deve ser enviado para uma página estática (use esta URL fictícia: [https://www.reecodecamp.com/email-enviar](https://www.freecodecamp.com/email-submit)).
**Especificação de usuário nº 13:** a barra de navegação deve estar sempre na parte superior da viewport.
**Especificação de usuário nº 14:** a landing page deve ter pelo menos uma media query.
**Especificação de usuário nº 15:** a landing page deve utilizar pelo menos uma vez o CSS Flexbox.
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Quando tiver terminado, envie a URL do seu projeto depois de ele haver passado em todos os testes.
# --solutions--
```html
// solution required
```

View File

@@ -0,0 +1,57 @@
---
id: 587d78af367417b2b2512b03
title: Crie um formulário de pesquisa
challengeType: 3
forumTopicId: 301145
dashedName: build-a-survey-form
---
# --description--
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
**Especificação de usuário nº 1:** deve haver um título com `id="title"` que possua o tamanho de uma tag h1.
**Especificação de usuário nº 2:** deve haver uma descrição curta com `id="description"` que possua o tamanho de uma tag p.
**Especificação de usuário nº 3:** deve haver um formulário (`form`) com `id="survey-form"`.
**Especificação de usuário nº 4:** dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com `id="name"`.
**Especificação de usuário nº 5:** dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com `id="email"`.
**Especificação de usuário nº 6:** se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado.
**Especificação de usuário nº 7:** dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com `id="number"`.
**Especificação de usuário nº 8:** se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado.
**Especificação de usuário nº 9:** se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado.
**Especificação de usuário nº 10:** para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"`, e `id="number-label"`.
**Especificação de usuário nº 11:** para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (text ilustrativo) que forneça uma descrição ou instruções para cada campo.
**Especificação de usuário nº 12:** dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um `id="dropdown"`.
**Especificação de usuário nº 13:** dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo `name`.
**Especificação de usuário nº 14:** dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo `value`.
**Especificação de usuário nº 15:** dentro do elemento de formulário, deve haver um campo `textarea` no final para comentários adicionais.
**Especificação de usuário nº 16:** dentro do elemento de formulário, deve haver um botão com `id="submit"` para enviar todas as informações.
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Quando tiver terminado, envie a URL do seu projeto depois de ele haver passado em todos os testes.
# --solutions--
```html
// solution required
```

View File

@@ -0,0 +1,55 @@
---
id: 587d78b0367417b2b2512b05
title: Crie uma página de documentação técnica
challengeType: 3
forumTopicId: 301146
dashedName: build-a-technical-documentation-page
---
# --description--
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
**Especificação de usuário nº 1:** deve haver um elemento `main` com um `id="main-doc"`, que contém o conteúdo principal da página (documentação técnica).
**Especificação de usuário nº 2:** dentro do elemento `#main-doc`, deve haver várias seções (`section`), cada uma com a classe `main-section`. Deve haver um mínimo de 5.
**Especificação de usuário nº 3:** o primeiro elemento de cada `.main-section` deve ser um elemento de cabeçalho (`header`) que contém o texto que descreve o tópico desta seção.
**Especificação de usuário nº 4:** cada `section` com a classe `main-section` também deve ter um id que corresponda ao texto de cada `header` contido dentro dela. Os espaços existentes devem ser substituídos por sublinhados (por exemplo, a `section` que contém o cabeçalho "JavaScript e Java" deve ter um `id="JavaScript_and_Java"`).
**Especificação de usuário nº 5:** os elementos `.main-section` devem conter, juntos, pelo menos 10 elementos `p` no total (não 10 para cada elemento).
**Especificação de usuário nº 6:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `code` no total (não 5 para cada elemento).
**Especificação de usuário nº 7:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `li` no total (não 5 para cada elemento).
**Especificação de usuário nº 8:** deve haver uma barra de navegação (`nav`) com um `id="navbar"`.
**Especificação de usuário nº 9:** o elemento de barra de navegação (nav) deve conter um elemento `header` que contém o texto que descreve o tópico da documentação técnica.
**Especificação de usuário nº 10:** além disso, a barra de navegação (nav) deve conter elementos de âncora (`a`) com a classe `nav-link`. Deve haver um para cada elemento com a classe `main-section`.
**Especificação de usuário nº 11:** o elemento `header` na barra de navegação deve aparecer antes de qualquer elemento de âncora (`a`).
**Especificação de usuário nº 12:** cada elemento com a classe `nav-link` deve conter um texto que corresponda ao texto do `header` dentro de cada `section` (exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua barra de navegação deve ter um elemento que contém o texto "Olá mundo").
**Especificação de usuário nº 13:** quando um elemento da barra de navegação for clicado, a página deve navegar para a seção correspondente ao elemento `main-doc` (exemplo: se eu clicar em um elemento `nav-link` que contém o texto "Olá mundo", a página deve navegar para o elemento `section` que tem esse id e contém o `header` correspondente.
**Especificação de usuário nº 14:** em dispositivos com tamanho regular (laptops, desktops), o elemento com `id="navbar"` deve ser mostrado no lado esquerdo da tela e deve sempre estar visível para o usuário.
**Especificação de usuário nº 15:** a página deve ter pelo menos uma media query.
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Quando tiver terminado, envie a URL do seu projeto depois de ele haver passado em todos os testes.
# --solutions--
```html
// solution required
```

View File

@@ -0,0 +1,43 @@
---
id: bd7158d8c442eddfaeb5bd18
title: Crie uma página de homenagem
challengeType: 3
forumTopicId: 301147
dashedName: build-a-tribute-page
---
# --description--
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
**Especificação de usuário nº 1:** a página de tributo deve ter um elemento com um `id="main"` que envolva todos os demais elementos.
**Especificação de usuário nº 2:** deve haver um elemento com `id="title"`, que contenha um texto que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug").
**Especificação de usuário nº 3:** deve haver uma `div` com um `id="img-div"`.
**Especificação de usuário nº 4:** dentro do elemento `img-div`, deve haver um elemento `img` com um `id="image"`.
**Especificação de usuário nº 5:** dentro do elemento `img-div`, deve haver um elemento com um `id="img-caption"` que contenha um conteúdo textual descrevendo a imagem mostrada em `img-div`.
**Especificação de usuário nº 6:** deve haver um elemento com `id="tribute-info"`, que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem.
**Especificação de usuário nº 7:** deve haver um elemento `a` com um `id="tribute-link"`, que leve a um site externo que contenha informações adicionais sobre a pessoa a quem a página presta homenagem. DICA: você deve dar ao seu elemento um atributo `target` e definir o valor para `_blank` para que seu link possa ser aberto em uma nova aba (exemplo: `target="_blank"`).
**Especificação de usuário nº 8:** o elemento `img` deve redimensionar responsivamente com relação à largura de seu elemento pai, sem exceder o seu tamanho original.
**Especificação de usuário nº 9:** o elemento `img` deve ser centralizado dentro de seu elemento pai.
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
Quando tiver terminado, envie a URL do seu projeto depois de ele haver passado em todos os testes.
# --solutions--
```html
// solution required
```