chore(learn): remove other language curriculum Chinese (#39745)
This commit is contained in:
Randell Dawson
GitHub
@@ -1,49 +0,0 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Add a Text Alternative to Images for Visually Impaired Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
guideUrl: 'https://portuguese.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility'
|
||||
localeTitle: Adicionar um texto alternativo a imagens para acessibilidade a deficientes visuais
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> É provável que você tenha visto um atributo <code>alt</code> em uma etiqueta <code>img</code> em outros desafios. O atributo <code>alt</code> descreve o conteúdo da imagem e fornece uma alternativa de texto. Isso ajuda no caso de a imagem não carregar ou não ser vista por um usuário. Esse texto alternativo também é usado pelos mecanismos de pesquisa para determinar o que uma imagem contém para inclui-la nos resultados da pesquisa. Veja um exemplo: <code><img src="importantLogo.jpeg" alt="Logótipo da Empresa"></code> As pessoas com deficiência visual dependem dos leitores de tela para converter o conteúdo da Web numa interface de áudio. Eles não receberão as informações se estas forem apresentadas apenas visualmente. Para imagens, os leitores de tela podem acessar o atributo <code>alt</code> e ler o seu conteúdo para fornecer informações importantes. Um bom texto <code>alt</code> é curto, mas descritivo, e destina-se a transmitir rapidamente o significado da imagem. Você deve sempre incluir um atributo <code>alt</code> na sua imagem. Segundo a especificação HTML5, isso agora é considerado obrigatório. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> O Camper Cat é um ninja codificador, e está construindo um site para compartilhar seu conhecimento. A foto do perfil que ele quer usar mostra suas habilidades e deve ser apreciada por todos os visitantes do site. Adicione um atributo <code>alt</code> na tag <code>img</code>, que explica que o Camper Cat está praticando karatê. (O atributo <code>src</code> da imagem não tem um link para um arquivo real, então você deve ver o texto <code>alt</code> na tela.) </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A sua etiqueta <code>img</code> deve ter um atributo <code>alt</code> e não deve estar vazia.
|
||||
testString: 'assert($("img").attr("alt"), "A sua etiqueta <code>img</code> deve ter um atributo <code>alt</code> e não deve estar vazia.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Semente do Desafio
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||
```
|
||||
</section>
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Add an Accessible Date Picker
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar um selecionador de data acessível
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> Os formulários geralmente incluem o campo de <code>input</code>, que pode ser usado para criar vários controles de formulários diferentes. O atributo <code>type</code> neste elemento indica que tipo de entrada será criada. Você deve ter notado os tipos de entrada <code>text</code> e <code>submit</code> nos desafios anteriores, e o HTML5 introduziu uma opção para especificar um campo do tipo <code>date</code>. Dependendo do navegador, quando o campo de <code>input</code> está com o foco, irá aparecer um seletor de data, o que facilita o preenchimento do formulário. Em navegadores mais antigos, o tipo será padronizado para <code>text</code>. Por isso, é útil mostrar aos usuários o formato de data esperado na <i>label</i> ou no campo de texto com um <i>placeholder</i>. Aqui está um exemplo: <blockquote> <label for = "input1"> Insira uma data: </ label> <br> <input type = "date" id = "input1" name = "input1"> <br></blockquote></section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> O Gato Campista está organizando um torneio de Mortal Kombat e quer pedir aos seus participantes para ver qual data funciona melhor. Adicione uma etiqueta de <code>input</code> com um atributo <code>type</code> de "<i>date</i>", um atributo <code>id</code> de "<i>pickdate</i>" e um atributo <code>name</code> de "<i>date</i>". </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O seu código deve adicionar uma etiqueta <code>input</code> para o campo do seletor de datas.
|
||||
testString: 'assert($("input").length == 2, "O seu código deve adicionar uma etiqueta <code>input</code> para o campo do seletor de datas.");'
|
||||
- text: A sua etiqueta de <code>input</code> deve ter um atributo <code>type</code> com um valor de <i>date</i>.
|
||||
testString: 'assert($("input").attr("type") == "date", "A sua etiqueta de <code>input</code> deve ter um atributo <code>type</code> com um valor de <i>date</i>.");'
|
||||
- text: A sua etiqueta de <code>input</code> deve ter um atributo <code>id</code> com um valor de <i>pickdate</i>.
|
||||
testString: 'assert($("input").attr("id") == "pickdate", "A sua etiqueta de <code>input</code> deve ter um atributo <code>id</code> com um valor de <i>pickdate</i>.");'
|
||||
- text: A sua etiqueta de <code>input</code> deve ter um atributo <code>name</code> com um valor de <i>date</i>.
|
||||
testString: 'assert($("input").attr("name") == "date", "A sua etiqueta de <code>input</code> deve ter um atributo <code>name</code> com um valor de <i>date</i>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Semente do Desafio
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Torneios</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Inquérito do Torneio Mortal Kombat</h2>
|
||||
<form>
|
||||
<p>Diga-nos a melhor data para a competição</p>
|
||||
<label for="pickdate">Data Preferida:</label>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Gato Campista</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Evite problemas de daltonismo escolhendo cuidadosamente as cores que transmitem informações
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> Existem várias formas de daltonismo. Estas podem variar de uma sensibilidade reduzida a um determinado comprimento de onda da luz até a incapacidade de ver a cor. A forma mais comum é uma sensibilidade reduzida para detectar tons de verde. Por exemplo, se duas cores verdes semelhantes forem a cor de primeiro e segundo plano do seu conteúdo, talvez um usuário daltônico não consiga distingui-las. As cores próximas podem ser vistas como vizinhas na roda de cores e essas combinações devem ser evitadas ao transmitir informações importantes. <strong>Nota</strong> <br> Algumas ferramentas de coleta de cores on-line incluem simulações visuais de como as cores aparecem para diferentes tipos de daltonismo. Estes são ótimos recursos, além de calculadoras de verificação de contraste on-line. </section>
|
||||
|
||||
## Instruções
|
||||
undefined
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O seu código deve alterar a <code>color</code> do texto do <code>button</code> para azul escuro.
|
||||
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "O seu código deve alterar a <code>color</code> do texto do <code>button</code> para azul escuro.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Semente do Desafio
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Perigo!</h1>
|
||||
</header>
|
||||
<button>Apagar a Internet</button>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Avoid Colorblindness Issues by Using Sufficient Contrast
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Evitar problemas de daltonismo usando suficiente contraste
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> A cor é uma grande parte do design visual, mas seu uso introduz dois problemas de acessibilidade. Primeiro, a cor sozinha não deve ser usada como a única maneira de transmitir informações importantes porque os usuários de leitores de tela não a verão. Segundo, as cores do primeiro plano e do plano de fundo precisam de contraste suficiente para que os usuários daltônicos possam distingui-las. Desafios anteriores mostraram alternativas de texto para abordar o primeiro problema. O último desafio introduziu ferramentas de verificação de contraste para ajudar no segundo. A WCAG recomenda uma relação de taxa de contraste de 4.5: 1 aplicada ao uso das cores, bem como a combinações de escalas de cinza. Usuários daltônicos têm dificuldade em distinguir algumas cores de outras - geralmente em tonalidade, mas às vezes em luminosidade também. Você pode se lembrar que a taxa de contraste é calculada usando os valores relativos de luminância (ou luminosidade) das cores de primeiro plano e de fundo. Na prática, a proporção de 4,5: 1 pode ser alcançada escurecendo a cor mais escura e clareando a mais clara com o auxílio de um verificador de contraste de cores. As cores mais escuras na roda de cores são consideradas azuis, violetas, magentas e vermelhas, enquanto as cores mais claras são laranjas, amarelos, verdes e azuis-esverdeados. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Cat Camper está experimentando o uso de cores para o texto de seu blog e fundo, mas sua combinação atual de um <code>background-color</code> esverdeado com text <code>color</code> marrom tem uma relação de contraste de 2.5: 1. Você pode ajustar facilmente a luminosidade das cores desde que ele as declarou usando a propriedade CSS <code>hsl()</code> (que significa matiz, saturação, luminosidade) alterando o terceiro argumento. Aumente o valor de luminosidade da <code>background-color</code> de 35% para 55% e diminua o valor de luminosidade de <code>color</code> de 20% para 15%. Isso melhora o contraste para 5.9: 1. </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O seu código só deve alterar o valor de luminosidade da propriedade da <code>color</code> do texto para um valor de 15%.
|
||||
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "O seu código só deve alterar o valor de luminosidade da propriedade da <code>color</code> do texto para um valor de 15%.");'
|
||||
- text: O seu código só deve alterar o valor de luminosidade da propriedade <code>background-color</code> para um valor de 55%.
|
||||
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "O seu código só deve alterar o valor de luminosidade da propriedade <code>background-color</code> para um valor de 55%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Semente do Desafio
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Pensamentos Profundos com o Mestre Gato Campista</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Umas Palavras Acerca do Recente Escândalo de Dopagem com Erva-dos-Gatos</h2>
|
||||
<p>Está muito bem documentada a influência que a erva-dos-gatos tem no comportamento dos felinos, e continua a ser controverso o seu uso como suplemento herbal no meio competitivo dos ninjas. Mais uma vez, o debate acerca de banir a substância foi trazido à atenção do público, depois da incomparável vitória de Kittytron, um há muito tempo proponente e consumidor desse material verde, no torneio Garra da Fúria.</p>
|
||||
<p>Tal como tenho afirmado no passado, eu acredito fortemente que os verdadeiros dotes de ninja têm que vir do seu interior e sem influências externas. O meu uso de erva-dos-gatos irá continuar a ser puramente recreacional.</p>
|
||||
</article>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```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>
|
||||
```
|
||||
</section>
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Give Links Meaning by Using Descriptive Link Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Dar sentido aos links usando texto descritivo nos links
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> Os usuários de leitores de tela têm opções diferentes para o tipo de conteúdo que o dispositivo lê. Isso inclui pular para (ou sobre) elementos de referência, pular para o conteúdo principal ou obter um resumo de página dos títulos. Outra opção é apenas ouvir os links disponíveis numa página. Os leitores de tela fazem isso lendo o texto do link ou o que está dentro das etiquetas âncora ( <code>a</code> ). Ter uma lista de links "clique aqui" ou "leia mais" não é útil. Em vez disso, você deve usar um texto breve, mas descritivo nas etiquetas <code>a</code> para apresentar mais significado a esses usuários. </section>
|
||||
|
||||
## Instruções
|
||||
undefined
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O seu código deve mover a etiqueta âncora com <code>a</code> que envolve as palavras "Clicar aqui" para passar a envolver as palavras "informações sobre baterias".
|
||||
testString: 'assert($("a").text().match(/^(informações sobre baterias)$/g), "O seu código deve mover a etiqueta âncora com <code>a</code> que envolve as palavras "Clicar aqui" para passar a envolver as palavras "informações sobre baterias".");'
|
||||
- text: Assegure-se que o seu elemento <code>a</code> tem uma marca de fecho.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Assegure-se que o seu elemento <code>a</code> tem uma marca de fecho.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Semente do Desafio
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Pensamentos Profundos com o Mestre Gato Campista</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Derrotando o teu Inimigo: o Ponto Vermelho é Nosso!</h2>
|
||||
<p>Em todo o mundo os felinos têm estado em guerra com um dos mais persistentes inimigos. Este vermelho malévolo combina tanto uma manhosa invisibilidade como uma velocidade relâmpago. Mas, animem-se, caros companheiros de luta, a nossa hora da vitória pode estar muito perto em breve. <a href="">Clicar aqui</a> para informações sobre baterias</p>
|
||||
</article>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Improve Accessibility of Audio Content with the audio Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Melhore a acessibilidade do conteúdo de áudio com o elemento de áudio
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> O elemento de <code>audio</code> do HTML5 fornece significado semântico quando ele envolve o som ou o conteúdo do fluxo de áudio na sua marcação. O conteúdo de á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 etiqueta de <code>audio</code> suporta o atributo <code>controls</code> . Isso mostra a reprodução, a pausa e outros controles padrão do navegador e suporta a funcionalidade do teclado. Este é um atributo booleano, o que significa que não precisa de um valor, sua presença na etiqueta ativa a configuração. Aqui está um exemplo: <blockquote> <audio id = "meowClip" controla> <br> <fonte src = "audio / meow.mp3" type = "audio / mpeg" /> <br> <source src = "audio / meow.ogg" tipo = "audio / ogg" /> <br> </ audio> <br></blockquote> <strong>Nota</strong> <br> O conteúdo multimídia geralmente tem componentes visuais e auditivos. Ele precisa de legendas sincronizadas e uma transcrição para que os usuários com deficiências visuais e / ou auditivas possam acessá-lo. Geralmente, um desenvolvedor da Web não é responsável pela criação das legendas ou transcrição, mas precisa saber para incluí-las. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Hora de fazer uma pausa em Gato Campista e conhecer Zersiax (@zersiax), um defensor da acessibilidade e usuário de leitor de tela. Para ouvir um clipe do seu leitor de tela em ação, adicione um elemento de <code>audio</code> após o <code>p</code> . Inclua o atributo <code>controls</code> . Em seguida, coloque uma etiqueta de <code>source</code> dentro das etiquetas de <code>audio</code> com o atributo <code>src</code> definido como "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" e <code>type</code> atributo definido como "audio / mpeg". <strong>Nota</strong> <br> O clipe de áudio pode soar rápido e difícil de entender, mas essa é uma velocidade normal para os usuários do leitor de tela. </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O seu código deve ter uma etiqueta de <code>audio</code>.
|
||||
testString: 'assert($("audio").length === 1, "O seu código deve ter uma etiqueta de <code>audio</code>.");'
|
||||
- text: Certifique-se de que o seu elemento de <code>audio</code> tenha uma etiqueta de fechamento.
|
||||
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Certifique-se de que o seu elemento de <code>audio</code> tenha uma etiqueta de fecho.");'
|
||||
- text: A etiqueta de <code>audio</code> deve ter o atributo <code>controls</code>.
|
||||
testString: 'assert($("audio").attr("controls"), "A etiqueta de <code>audio</code> deve ter o atributo <code>controls</code>.");'
|
||||
- text: O seu código deve ter uma etiqueta de <code>source</code>.
|
||||
testString: 'assert($("source").length === 1, "O seu código deve ter uma etiqueta de <code>source</code>.");'
|
||||
- text: Sua etiqueta de <code>source</code> deve estar dentro das etiquetas de <code>audio</code>.
|
||||
testString: 'assert($("audio").children("source").length === 1, "Sua etiqueta de <code>source</code> deve estar dentro das etiquetas de <code>audio</code>.");'
|
||||
- text: O valor para o atributo <code>src</code> na etiqueta de <code>source</code> deve corresponder exatamente ao link nas instruções.
|
||||
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "O valor para o atributo <code>src</code> na etiqueta de <code>source</code> deve corresponder exatamente ao link nas instruções.");'
|
||||
- text: O seu código deve incluir um atributo <code>type</code> na etiqueta de <code>source</code> com um valor de audio/mpeg.
|
||||
testString: 'assert($("source").attr("type") === "audio/mpeg", "O seu código deve incluir um atributo <code>type</code> na etiqueta de <code>source</code> com um valor de audio/mpeg.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Semente do Desafio
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Verdadeiros Ninjas Programadores</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>Um clipe de áudio do leitor de tela Zersiax's em ação.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,99 +0,0 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Improve Chart Accessibility with the figure Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Melhore a acessibilidade do gráfico com a figura Element
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O HTML5 introduziu o elemento <code>figure</code> , juntamente com a <code>figcaption</code> relacionada. Usados em conjunto, esses itens envolvem uma representação visual (como uma imagem, diagrama ou gráfico) junto com sua legenda. Isso proporciona um aumento de acessibilidade duplo por meio do conteúdo relacionado ao agrupamento semanticamente e fornece uma alternativa em texto que explica a <code>figure</code> . Para visualizações de dados, como gráficos, a legenda pode ser usada para observar brevemente as tendências ou conclusões para usuários com deficiências visuais. Outro desafio abrange como mover uma versão da tabela dos dados do gráfico para fora da tela (usando CSS) para usuários de leitores de tela. Aqui está um exemplo - note que o <code>figcaption</code> vai dentro da <code>figure</code> tags e pode ser combinado com outros elementos: <blockquote> <figure> <br> <img src = "roundhouseDestruction.jpeg" alt = "Foto do Camper Cat executando um roundhouse kick"> <br> <br> <br> <figcaption> <br> Mestre Camper Cat demonstra a forma correta de um chute circular. <br> </ figcaption> <br> </ figure> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat está trabalhando duro para criar um gráfico de barras empilhadas mostrando a quantidade de tempo por semana para treinar em furtividade, combate e armas. Ajude-o a estruturar melhor sua página, alterando a tag <code>div</code> ele usou para uma tag <code>figure</code> e a tag <code>p</code> que circunda a legenda para uma tag <code>figcaption</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter uma tag de <code>figure</code> .
|
||||
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
|
||||
- text: Seu código deve ter uma tag <code>figcaption</code> .
|
||||
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
|
||||
- text: Seu código não deve ter tags <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Seu código não deve ter tags <code>p</code> .
|
||||
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
|
||||
- text: A <code>figcaption</code> deve ser um filho da tag de <code>figure</code> .
|
||||
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
|
||||
- text: Certifique-se de que seu elemento <code>figure</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Add your 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>
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,82 +0,0 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Improve Form Field Accessibility with the label Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Melhore a acessibilidade do campo de formulário com o elemento label
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Melhorar a acessibilidade com marcação HTML semântica aplica-se ao uso de nomes de tag apropriados e de atributos. Os próximos desafios abrangem alguns cenários importantes usando atributos em formulários. A <code>label</code> rotula o texto para um item de controle de formulário específico, geralmente o nome ou rótulo para uma escolha. Isso vincula o significado ao item e torna a forma mais legível. O atributo <code>for</code> em uma tag <code>label</code> associa explicitamente esse <code>label</code> ao controle de formulário e é usado pelos leitores de tela. Você aprendeu sobre os botões de opção e seus rótulos em uma lição na seção HTML básico. Nessa lição, envolvemos o elemento de entrada do botão de opção dentro de um elemento de <code>label</code> junto com o texto da etiqueta para tornar o texto clicável. Outra maneira de conseguir isso é usando o atributo <code>for</code> conforme explicado nesta lição. O valor do atributo <code>for</code> deve ser o mesmo que o valor do atributo <code>id</code> do controle de formulário. Aqui está um exemplo: <blockquote> <form> <br> <label for = "name"> Nome: </ label> <br> <input type = "text" id = "nome" name = "nome"> <br> </ form> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O Camper Cat espera muito interesse em seus posts inteligentes e quer incluir um formulário de inscrição por e-mail. Adicione um atributo <code>for</code> no <code>label</code> e-mail que corresponda ao <code>id</code> em seu campo de <code>input</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter um atributo <code>for</code> na <code>label</code> que não está vazia.
|
||||
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
|
||||
- text: Seu <code>for</code> atributo valor deve corresponder ao <code>id</code> valor no e-mail <code>input</code> .
|
||||
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Improve Readability with High Contrast Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Melhore a legibilidade com texto de alto contraste
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O baixo contraste entre as cores do primeiro plano e do plano de fundo pode dificultar a leitura do texto. Contraste suficiente melhora a legibilidade do seu conteúdo, mas o que exatamente significa "suficiente"? As Diretrizes de Acessibilidade ao Conteúdo da Web (WCAG) recomendam pelo menos uma taxa de contraste de 4,5 para 1 para o texto normal. A relação é calculada comparando os valores relativos de luminância de duas cores. Isso varia de 1: 1 para a mesma cor, ou sem contraste, para 21: 1 para branco contra preto, o contraste mais forte. Existem muitas ferramentas de verificação de contraste disponíveis on-line que calculam essa proporção para você. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> A escolha de texto cinza claro em um fundo branco feita pelo Camper Cat para seu recente post no blog tem uma relação de contraste de 1,5: 1, dificultando a leitura. Altere a <code>color</code> do texto do cinza atual ( <code>#D3D3D3</code> ) para um cinza mais escuro ( <code>#636363</code> ) para melhorar a taxa de contraste para 6: 1. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve alterar a <code>color</code> do texto do <code>body</code> para o cinza mais escuro.
|
||||
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
|
||||
- text: Seu código não deve alterar a <code>background-color</code> do <code>body</code> .
|
||||
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Jump Straight to the Content Using the main Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ir Direto para o Conteúdo Usando o Elemento Main
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O HTML5 introduziu vários novos elementos que oferecem aos desenvolvedores mais opções, além de incorporar recursos de acessibilidade. Essas tags incluem <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code> e <code>section</code>, entre outras. Por padrão, um navegador renderiza esses elementos de forma semelhante a um <code>div</code>. No entanto, usá-los quando apropriado dá significado adicional à sua marcação. O nome da tag sozinho pode indicar o tipo de informação que contém, o que adiciona significado semântico a esse conteúdo. As tecnologias assistivas podem acessar essa informação para fornecer um melhor resumo da página ou opções de navegação para seus usuários. O elemento <code>main</code> é usado para envolver (você adivinhou) o conteúdo principal, e deve haver apenas um por página. Ele é destinado a cercar as informações relacionadas ao tópico central da sua página. Ele não é destinado para incluir itens que se repetem nas páginas, como links de navegação ou banners. A tag <code>main</code> também possui um recurso de ponto de referência integrado que a tecnologia assistiva pode usar para navegar rapidamente para o conteúdo principal. Se você já viu um link "Ir para conteúdo principal" na parte superior de uma página, usar a tag main automaticamente fornece aos dispositivos de tecnologia assistiva essa funcionalidade. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">Camper Cat tem algumas grandes ideias para a sua página de armas ninja. Ajude-o a definir sua marcação adicionando as tags <code>main</code> de abertura e fechamento entre o <code>header</code> e o <code>footer</code> (abordados em outros desafios). Mantenha as tags <code>main</code> vazias por enquanto. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter uma tag <code>main</code> .
|
||||
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
|
||||
- text: As tags <code>main</code> devem estar entre a tag <code>header</code> de fechamento e a tag <code>footer</code> de abertura.
|
||||
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Armas de um Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Know When Alt Text Should be Left Blank
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Saiba quando o texto alt deve ser deixado em branco
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> No último desafio, você aprendeu que incluir um atributo <code>alt</code> em tags img é obrigatório. No entanto, às vezes, imagens são agrupadas com uma legenda que já está as descrevendo ou são usadas apenas para decoração. Nestes casos, o texto <code>alt</code> 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, a <code>img</code> ainda precisa de um atributo <code>alt</code> , mas ele pode ser definido como uma string vazia. Aqui está um exemplo: <code><img src="visualDecoration.jpeg" alt=""></code> Imagens de fundo geralmente também se enquadram no rótulo 'decorativo'. No entanto, elas são normalmente aplicadas com regras CSS e, portanto, não fazem parte da marcação que os leitores de tela processam. <strong>Nota</strong> <br> Para imagens com legenda, você ainda pode querer incluir um texto <code>alt</code> , pois isso ajuda os mecanismos de pesquisa a catalogar o conteúdo da imagem. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat codificou uma página esqueleto para a parte do blog do seu site. Ele está planejando adicionar uma quebra visual entre seus dois artigos com uma imagem decorativa de uma espada samurai. Adicione um atributo <code>alt</code> à tag <code>img</code> e defina-o como uma string vazia. (Observe que o <code>src</code> da imagem não é um link para um arquivo de verdade - não se preocupe que não há espadas na tela). </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua tag <code>img</code> deve ter um atributo <code>alt</code> .
|
||||
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
|
||||
- text: O atributo <code>alt</code> deve ser definido como uma string vazia.
|
||||
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Reflexões Profundas com o Mestre Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Derrotando seu Adversário: o Ponto Vermelho é Nosso!</h2>
|
||||
<p>Em breve...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Chuck Norris é gateiro?</h2>
|
||||
<p>Em breve...</p>
|
||||
</article>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,138 +0,0 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Tornar os elementos visíveis apenas para um leitor de tela usando CSS personalizado
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você já reparou que todos os desafios de acessibilidade aplicados até agora não usaram nenhum CSS? Isso é para mostrar a importância de um esboço de documento lógico e usar tags semanticamente significativas ao redor do seu conteúdo antes de introduzir o aspecto do design visual. No entanto, a mágica do CSS também pode melhorar a acessibilidade em sua 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 um 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 é usado para posicionar os elementos somente leitura da tela fora da área visual da janela do navegador. Aqui está um exemplo das regras CSS que fazem isso: <blockquote>.sr-only {<br> position: absolute;<br> left: -10000px;<br> width: 1px;<br> height: 1px;<br> top: auto;<br> overflow: hidden;<br>}</blockquote> <strong>Nota</strong> <br> As seguintes abordagens CSS NÃO farão o mesmo: <ul><li> <code>display: none;</code> ou <code>visibility: hidden;</code> oculta conteúdo para todos, incluindo usuários de leitores de tela </li><li> Valores zero para tamanhos de pixel, como <code>width: 0px; height: 0px;</code> remove esse elemento do fluxo do seu documento, o que significa que os leitores de tela o ignoram </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O Camper Cat criou um gráfico de barras muito legal para sua página de treinamento e colocou os dados em uma tabela para seus usuários com deficiência visual. A tabela já tem uma classe <code>sr-only</code> , mas as regras CSS ainda não foram preenchidas. Atribua à <code>position</code> um valor absoluto, a <code>left</code> um valor de -10000px e a <code>width</code> e a <code>height</code> ambos os valores de 1px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve definir a propriedade de <code>position</code> da classe <code>sr-only</code> para um valor absoluto.
|
||||
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
|
||||
- text: Seu código deve definir a propriedade <code>left</code> da classe <code>sr-only</code> para um valor de -10000px.
|
||||
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
|
||||
- text: Seu código deve definir a propriedade <code>width</code> da classe <code>sr-only</code> para um valor de 1 pixel.
|
||||
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||
- text: Seu código deve definir a propriedade <code>height</code> da classe <code>sr-only</code> para um valor de 1 pixel.
|
||||
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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 & 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 & 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 & 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>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,76 +0,0 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: Make Links Navigatable with HTML Access Keys
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Tornar Links Navegáveis com Chaves de Acesso HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O HTML oferece o atributo <code>accesskey</code> para especificar uma tecla de atalho para ativar ou trazer foco para um elemento. Isso pode tornar a navegação mais eficiente para usuários somente de teclado. O HTML5 permite que esse atributo seja usado em qualquer elemento, mas é particularmente útil quando usado com os interativos. Isso inclui links, botões e controles de formulário. Aqui está um exemplo: <code><button accesskey="b">Important Button</button></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O Camper Cat quer que os links em torno dos dois títulos de 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 <code>accesskey</code> aos dois links e defina o primeiro para "g" (para Garfield) e o segundo para "c" (para Chuck Norris). </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar um <code>accesskey</code> atributo à <code>a</code> tag com o <code>id</code> de "primeira".
|
||||
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
|
||||
- text: Seu código deve adicionar um <code>accesskey</code> atributo à <code>a</code> tag com o <code>id</code> de "segunda".
|
||||
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
|
||||
- text: Seu código deve definir o <code>accesskey</code> atributo no <code>a</code> tag com o <code>id</code> de "primeiro" a "g". Note que o caso é importante.
|
||||
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
|
||||
- text: Seu código deve definir o <code>accesskey</code> atributo no <code>a</code> tag com o <code>id</code> de "segunda" para "c". Note que o caso é importante.
|
||||
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,86 +0,0 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Make Screen Reader Navigation Easier with the footer Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Torne a navegação do leitor de tela mais fácil com o rodapé Landmark
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Semelhante ao <code>header</code> e <code>nav</code> , o elemento de <code>footer</code> tem um recurso de referência integrado que permite que dispositivos de assistência naveguem rapidamente até ele. É usado principalmente para conter informações de direitos autorais ou links para documentos relacionados que geralmente ficam na parte inferior de uma página. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> A página de treinamento da Camper Cat está fazendo um bom progresso. Altere a <code>div</code> ele usou para envolver suas informações de direitos autorais na parte inferior da página em um elemento de <code>footer</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter uma tag de <code>footer</code> .
|
||||
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
|
||||
- text: Seu código não deve ter tags <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Seu código deve ter uma tag de <code>footer</code> abertura e fechamento.
|
||||
testString: 'assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & 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 & 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>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Make Screen Reader Navigation Easier with the header Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Facilitar a navegação do leitor de tela com o cabeçalho Landmark
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O próximo elemento HTML5 que adiciona significado semântico e melhora a acessibilidade é a tag de <code>header</code> . Ele é usado para envolver informações introdutórias ou links de navegação para sua tag pai e funciona bem em torno do conteúdo que é repetido na parte superior em várias páginas. <code>header</code> compartilha o recurso de ponto de referência incorporado que você viu com o <code>main</code> , permitindo que as tecnologias de assistência naveguem rapidamente para esse conteúdo. <strong>Nota</strong> <br> <code>header</code> é destinado para uso na tag <code>body</code> do seu documento HTML. Isso é diferente do elemento <code>head</code> , que contém o título da página, meta informações etc. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat está escrevendo alguns ótimos artigos sobre treinamento ninja, e quer adicionar uma página para eles em seu site. Altere a <code>div</code> superior que atualmente contém o <code>h1</code> para uma tag de <code>header</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter uma tag de <code>header</code> .
|
||||
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
|
||||
- text: Suas tags de <code>header</code> devem envolver o <code>h1</code> .
|
||||
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
|
||||
- text: Seu código não deve ter tags <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Certifique-se de que seu elemento de <code>header</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Make Screen Reader Navigation Easier with the nav Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Torne a navegação do leitor de tela mais fácil com o marco de navegação
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O elemento <code>nav</code> é outro item HTML5 com o recurso de marco incorporado para facilitar a navegação do leitor de tela. Esta tag destina-se a envolver os links principais de navegação na sua página. Se houver links de sites repetidos na parte inferior da página, não será necessário marcar aqueles com uma tag de <code>nav</code> também. Usar um <code>footer</code> (coberto no próximo desafio) é suficiente. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O Camper Cat incluiu links de navegação no topo de sua página de treinamento, mas os envolveu em uma <code>div</code> . Altere o <code>div</code> para uma tag de <code>nav</code> para melhorar a acessibilidade em sua página. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter uma tag de <code>nav</code> .
|
||||
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
|
||||
- text: Suas tags de <code>nav</code> devem envolver o <code>ul</code> e seus itens de lista.
|
||||
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
|
||||
- text: Seu código não deve ter tags <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Certifique-se de que seu elemento <code>nav</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & 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 & 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Standardize Times with the HTML5 datetime Attribute
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Padronizar Tempos com o Atributo de Data e Hora HTML5
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Continuando com o tema date, o HTML5 também introduziu o elemento <code>time</code> junto com um atributo <code>datetime</code> para padronizar os tempos. Este é um elemento in-line que pode envolver uma data ou hora em uma página. Um formato válido dessa data é mantido pelo atributo <code>datetime</code> . Esse é o valor acessado pelos dispositivos auxiliares. Isso ajuda a evitar a confusão, afirmando uma versão padronizada de um tempo, mesmo que seja escrito de maneira informal ou coloquial no texto. Aqui está um exemplo: <code><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></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Resultados da pesquisa Mortal Kombat do Camper Cat estão em! Adicione uma tag de <code>time</code> torno do texto "Quinta-feira, 15 de setembro <sup> th </ sup>" e adicione um atributo <code>datetime</code> a ele definido como "2016-09-15". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Suas tags de <code>time</code> devem envolver o texto "Thursday, September 15 <sup> th </ sup>".'
|
||||
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15<sup>th</sup>".");'
|
||||
- text: Sua tag de <code>time</code> deve ter um atributo de <code>datetime</code> que não esteja vazio.
|
||||
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
|
||||
- text: Seu atributo <code>datetime</code> deve ser definido com um valor de 2016-09-15.
|
||||
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");'
|
||||
- text: Certifique-se de que seu elemento de <code>time</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Add your 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>
|
||||
|
||||
<!-- Add your 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>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Use Headings to Show Hierarchical Relationships of Content
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use Cabeçalhos para Demonstrar as Relações Hierárquicas de Conteúdo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">Cabeçalhos (elementos <code>h1</code> a <code>h6</code>) são elementos instrumentais que ajudam a fornecer estrutura e identificação ao seu conteúdo. Leitores de tela podem ser configurados para ler somente os cabeçalhos em uma página para que o usuário obtenha um resumo. Isso significa que é importante que as tags de cabeçalho em sua marcação tenham um significado semântico e se relacionem entre si, e não sejam escolhidas apenas por seus tamanhos. <em>Significado semântico</em> significa que a tag usada ao redor do conteúdo indica o tipo de informação que ela 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 em seu esboço. Ela deve ser sua própria seção. Da mesma forma, as tags de cabeçalho em uma página da Web precisam estar em ordem e indicar as relações hierárquicas de seu conteúdo. Cabeçalhos com classificação igual (ou superior) iniciam novas seções implícitas, cabeçalhos com classificações inferiores iniciam subseções no cabeçalho anterior. Por exemplo, uma página com um elemento <code>h2</code> seguido por várias subseções identificadas com tags <code>h4</code> confundiria um usuário com leitor de tela. Com seis opções, é tentador usar uma tag porque ela fica melhor em um navegador, mas você pode usar CSS para editar o tamanho relativo. Um último ponto, cada página deve ter sempre um (e apenas um) elemento <code>h1</code>, que é o assunto principal do seu conteúdo. Esse e os outros cabeçalhos são usados em parte pelos mecanismos de pesquisa para entender o tópico da página.</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">Camper Cat quer uma página em seu site dedicada a se tornar um ninja. Ajude-o a corrigir os cabeçalhos para que sua marcação dê significado semântico ao conteúdo e mostre as relações pai-filho adequadas de suas seções. Altere todas as tags <code>h5</code> para o nível de cabeçalho adequado para indicar que elas são subseções dos cabeçalhos <code>h2</code>.</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter seis tags <code>h3</code> .
|
||||
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
|
||||
- text: Seu código não deve ter tags <code>h5</code> .
|
||||
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Como Se Tornar um Ninja</h1>
|
||||
<main>
|
||||
<h2>Aprenda a Arte de Se Mover Sorrateiramente</h2>
|
||||
<h5>Como Se Esconder à Vista</h5>
|
||||
<h5>Como Escalar um Muro</h5>
|
||||
|
||||
<h2>Aprenda a Arte da Batalha</h2>
|
||||
<h5>Como Fortalecer seu Corpo</h5>
|
||||
<h5>Como Lutar como um Ninja</h5>
|
||||
|
||||
<h2>Aprenda a Arte de Viver com Honra</h2>
|
||||
<h5>Como Respirar Adequadamente</h5>
|
||||
<h5>Como Simplificar sua Vida</h5>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,97 +0,0 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Use tabindex to Add Keyboard Focus to an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use tabindex para adicionar foco do teclado a um elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O atributo <code>tabindex</code> HTML possui três funções distintas relacionadas ao foco do teclado de um elemento. Quando está em uma tag, indica que o elemento pode ser focado. O valor (um inteiro que é positivo, negativo ou zero) determina o comportamento. Determinados elementos, como links e controles de formulário, recebem automaticamente o foco do teclado quando um usuário é direcionado por uma página. Está na mesma ordem em que os elementos vêm na marcação de fonte HTML. Essa mesma funcionalidade pode ser fornecida a outros elementos, como <code>div</code> , <code>span</code> e <code>p</code> , colocando-se um <code>tabindex="0"</code> neles. Aqui está um exemplo: <code><div tabindex="0">I need keyboard focus!</div></code> <strong>Observação</strong> <br> Um valor de <code>tabindex</code> negativo (tipicamente -1) indica que um elemento é focalizável, mas não é alcançável pelo teclado. Esse método geralmente é usado para trazer o foco ao conteúdo de forma programática (como quando um <code>div</code> usado para uma janela pop-up é ativado) e está além do escopo desses desafios. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> A Camper Cat criou uma nova pesquisa para coletar informações sobre seus usuários. Ele sabe que os campos de entrada recebem automaticamente o foco do teclado, mas ele quer ter certeza de que seus usuários de teclado pausem nas instruções enquanto navegam pelos itens. Adicione um atributo <code>tabindex</code> à tag <code>p</code> e defina seu valor como "0". Bônus - usando <code>tabindex</code> também ativa a pseudo-classe CSS <code>:focus</code> para trabalhar na tag <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar um atributo <code>tabindex</code> à tag <code>p</code> que contém as instruções do formulário.
|
||||
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");'
|
||||
- text: Seu código deve definir o atributo <code>tabindex</code> na tag <code>p</code> para um valor de 0.
|
||||
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use tabindex para especificar a ordem do foco do teclado para vários elementos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O atributo <code>tabindex</code> também especifica a ordem de tabulação exata dos elementos. Isso é obtido quando o valor do atributo é definido como um número positivo de 1 ou superior. Definir um tabindex = "1" trará o foco do teclado para esse elemento primeiro. Em seguida, ele percorre a sequência de valores de <code>tabindex</code> especificados (2, 3, etc.), antes de passar para os itens padrão e <code>tabindex="0"</code> . É importante observar que, quando a ordem de tabulação é definida dessa forma, ela substitui a ordem padrão (que usa a origem HTML). Isso pode confundir os usuários que estão esperando iniciar a navegação a partir do topo da página. Essa técnica pode ser necessária em algumas circunstâncias, mas em termos de acessibilidade, tome cuidado antes de aplicá-la. Aqui está um exemplo: <code><div tabindex="1">I get keyboard focus, and I get it first!</div></code> <code><div tabindex="2">I get keyboard focus, and I get it second!</div></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat tem um campo de pesquisa em sua página Inspirational Quotes que ele planeja posicionar no canto superior direito com CSS. Ele deseja que a <code>input</code> pesquisa e os controles de formulário de <code>input</code> sejam os dois primeiros itens na ordem de tabulação. Adicione um atributo <code>tabindex</code> definido como "1" à <code>input</code> pesquisa e um atributo <code>tabindex</code> definido como "2" à <code>input</code> envio. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar um atributo <code>tabindex</code> à tag de <code>input</code> pesquisa.
|
||||
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
|
||||
- text: Seu código deve adicionar um atributo <code>tabindex</code> à tag de <code>input</code> envio.
|
||||
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
|
||||
- text: Seu código deve definir o atributo <code>tabindex</code> na tag de <code>input</code> pesquisa como um valor de 1.
|
||||
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
|
||||
- text: Seu código deve definir o atributo <code>tabindex</code> na tag de <code>input</code> envio para um valor de 2.
|
||||
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<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>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Wrap Content in the article Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Envolva o Conteúdo no artigo Element
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>article</code> é outro dos novos elementos HTML5 que adiciona significado semântico à sua marcação. <code>Article</code> é um elemento de segmentação e é usado para envolver conteúdo independente e autossufuciente. A tag funciona bem com publicações de blog, postagens em fóruns ou artigos de notícias. Determinar se o conteúdo pode ser isolado é geralmente uma questão de decisão, mas existem alguns testes simples que você pode utilizar. Pergunte a si mesmo se você removesse todo o contexto adjacente, esse conteúdo ainda faria sentido? Da mesma forma para texto, o conteúdo faria sentido se estivesse em um feed RSS? Lembre-se de que pessoas que usam tecnologias assistivas dependem de uma marcação organizada e semanticamente significativa para compreender melhor seu trabalho. <strong>Nota sobre <code>section</code> e <code>div</code></strong> <br> O elemento <code>section</code> também é novo no HTML5 e tem um significado semântico ligeiramente diferente de <code>article</code>. Um <code>article</code> é para conteúdo independente e um <code>section</code> é para agrupar conteúdos relacionados tematicamente. Eles podem ser usados uns dentro dos outros, conforme necessário. Por exemplo, se um livro é o <code>article</code> , então cada capítulo é um <code>section</code> . Quando não houver relação entre grupos de conteúdo, use um <code>div</code> . <blockquote> <div> - agrupa conteúdo <br> <section> - agrupa conteúdo relacionado <br> <article> - agrupa conteúdo independente e autossufuciente <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat usou tags <code>article</code> para envolver as postagens em sua página de blog, mas ele se esqueceu de usá-las na primeira postagem. Altere a tag <code>div</code> para usar uma tag <code>article</code> em seu lugar. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter três tags <code>article</code> .
|
||||
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
|
||||
- text: Seu código não deve ter tags <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Reflexões Profundas com o Mestre Camper Cat</h1>
|
||||
<main>
|
||||
<div>
|
||||
<h2>Os Arquivos Garfield: Lasanha como Combustível de Treinamento?</h2>
|
||||
<p>A internet está repleta de diversas opiniões sobre paradigmas nutricionais, da dieta paleo de erva do gato a limpezas de bolas de pelo. Contudo, vamos voltar nossa atenção para um combustível fitness muitas vezes negligenciado e examinar a trifeta proteína-carboidrato-nhac que é a lasanha...</p>
|
||||
</div>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Derrotando seu Adversário: o Ponto Vermelho é Nosso!</h2>
|
||||
<p>Felinos no mundo inteiro têm travado uma guerra contra o mais persistente dos inimigos. Esse nêmesis vermelho combina astúcia furtiva com velocidade da luz. Mas cabeça erguida, companheiros guerreiros, nosso tempo de vitória pode estar se aproximando...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Chuck Norris é gateiro?</h2>
|
||||
<p>Chuck Norris é amplamente considerado como o principal artista marcial do planeta, e é uma completa coincidência que qualquer um que discorde com esse fato misteriosamente desapareça pouco tempo depois. Mas a verdadeira questão é: ele é gateiro?...</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,99 +0,0 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Enrole os botões de rádio em um elemento fieldset para uma melhor acessibilidade
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O próximo tópico do formulário aborda a acessibilidade dos botões de opção. Cada escolha é dada uma <code>label</code> com um <code>for</code> atributo amarrar ao <code>id</code> do item correspondente, abrangidos no último desafio. Como os botões de rádio geralmente vêm em um grupo onde o usuário deve escolher um, há uma maneira de mostrar semanticamente que as opções fazem parte de um conjunto. A tag <code>fieldset</code> envolve todo o agrupamento de botões de rádio para conseguir isso. Ele geralmente usa uma <code>legend</code> para fornecer uma descrição para o agrupamento, que é lido pelos leitores de tela para cada opção no elemento <code>fieldset</code> . O wrapper <code>fieldset</code> e a tag <code>legend</code> não são necessários quando as opções são auto-explicativas, como uma seleção de gênero. Usando um <code>label</code> com a <code>for</code> atributo para cada botão de rádio é suficiente. Aqui está um exemplo: <blockquote> <form> <br> <fieldset> <br> <legend> Escolha um destes três itens: </ legend> <br> <input id = "one" type = "rádio" nome = "itens" valor = "um"> <br> <label for = "one"> Choice One </ label> <br> <br> <input id = "two" type = "rádio" name = "itens" valor = "dois"> <br> <label for = "two"> Escolha dois </ label> <br> <br> <input id = "three" type = "rádio" name = "itens" valor = "três"> <br> <label for = "three"> Escolha Três </ label> <br> </ fieldset> <br> </ form> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O Camper Cat quer informações sobre o nível ninja de seus usuários quando eles se inscrevem em sua lista de e-mail. Ele é adicionado um conjunto de botões de rádio, e aprendemos de nossa última lição usar tags de etiquetas com <code>for</code> atributos para cada escolha. Vai o gato do campista! No entanto, seu código ainda precisa de ajuda. Altere a tag <code>div</code> redor dos botões de opção para uma tag de <code>fieldset</code> e altere a tag <code>p</code> dentro dela para uma <code>legend</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve ter uma tag de <code>fieldset</code> torno do conjunto de botões de opção.
|
||||
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
|
||||
- text: Certifique-se de que seu elemento <code>fieldset</code> tenha uma tag de fechamento.
|
||||
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
|
||||
- text: Seu código deve ter uma <code>legend</code> ao redor do texto perguntando qual nível ninja é o usuário.
|
||||
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
|
||||
- text: Seu código não deve ter tags <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Seu código não deve mais ter uma tag <code>p</code> ao redor do texto perguntando qual nível ninja é um usuário.
|
||||
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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">
|
||||
|
||||
|
||||
<!-- Add your 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>
|
||||
<!-- Add your 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>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user