docs: add Spanish docs
This commit is contained in:
Beau Carnes
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Add a Text Alternative to Images for Visually Impaired Accessibility
|
||||
localeTitle: Agregar una alternativa de texto a las imágenes para la accesibilidad de personas con discapacidad visual
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Es probable que haya visto un atributo <code>alt</code> en una etiqueta <code>img</code> en otros desafíos. <code>Alt</code> texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
<code><img src="importantLogo.jpeg" alt="Company logo"></code>
|
||||
personas con discapacidades visuales confían en los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo <code>alt</code> y leer su contenido para entregar información clave.
|
||||
buen texto <code>alt</code> es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo <code>alt</code> en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat es tanto un ninja codificador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo <code>alt</code> en la etiqueta <code>img</code> , que explica que Camper Cat está haciendo karate. (La imagen <code>src</code> no se vincula a un archivo real, por lo que debería ver el texto <code>alt</code> en la pantalla).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> , y no debe estar vacío'.
|
||||
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Add an Accessible Date Picker
|
||||
localeTitle: Añadir un selector de fecha accesible
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
formularios a menudo incluyen el campo de <code>input</code> , que se puede usar para crear varios controles de formulario diferentes. El atributo de <code>type</code> en este elemento indica qué tipo de entrada se creará.
|
||||
Usted puede haber notado el <code>text</code> y <code>submit</code> los tipos de entrada en los desafíos anteriores, y HTML5 introducido una opción para especificar una <code>date</code> campo. Dependiendo de la compatibilidad del navegador, un selector de fecha aparece en el campo de <code>input</code> cuando está enfocado, lo que facilita el llenado de un formulario para todos los usuarios.
|
||||
Para los navegadores más antiguos, el tipo será el <code>text</code> predeterminado, por lo que es útil mostrar a los usuarios el formato de fecha esperado en la etiqueta o como texto de marcador de posición, por si acaso.
|
||||
Aquí hay un ejemplo:
|
||||
<blockquote><label for="input1">Enter a date:</label><br><input type="date" id="input1" name="input1"><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat está organizando un torneo de Mortal Kombat y quiere preguntar a sus competidores para ver qué fecha funciona mejor. Agregue una etiqueta de <code>input</code> con un atributo de <code>type</code> de "fecha", un atributo de <code>id</code> de "pickdate" y un atributo de <code>name</code> de "fecha".
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe agregar una etiqueta de <code>input</code> para el campo selector de fecha.
|
||||
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
|
||||
- text: Su etiqueta de <code>input</code> debe tener un atributo de <code>type</code> con un valor de fecha.
|
||||
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
|
||||
- text: Su etiqueta de <code>input</code> debe tener un atributo <code>id</code> con un valor de pickdate.
|
||||
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
|
||||
- text: Su etiqueta de <code>input</code> debe tener un atributo de <code>name</code> con un valor de fecha.
|
||||
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
|
||||
localeTitle: Evite los problemas de ceguera al color al elegir cuidadosamente los colores que transmiten información
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Hay varias formas de ceguera al color. Estos pueden ir desde una sensibilidad reducida hasta una cierta longitud de onda de la luz hasta la incapacidad de ver el color. La forma más común es una sensibilidad reducida para detectar greens.
|
||||
Por ejemplo, si dos colores verdes similares son el color de primer plano y de fondo de su contenido, es posible que un usuario que no tenga color no pueda distinguirlos. Los colores cercanos pueden considerarse vecinos de la rueda de colores, y deben evitarse esas combinaciones cuando se transmite información importante.
|
||||
<strong>Nota</strong> <br> Algunas herramientas de selección de color en línea incluyen simulaciones visuales de cómo aparecen los colores para diferentes tipos de ceguera al color. Estos son excelentes recursos además de las calculadoras de comprobación de contraste en línea.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat está probando diferentes estilos para un botón importante, pero el color de <code>background-color</code> amarillo ( <code>#FFFF33</code> ) y el color verde ( <code>#33FF33</code> ) son tonalidades <code>#33FF33</code> en la rueda de colores y prácticamente no se distinguen para algunos usuarios con <code>#33FF33</code> <code>color</code> . (Su luminosidad similar también falla la comprobación de la relación de contraste). Cambie el <code>color</code> del texto a azul oscuro ( <code>#003366</code> ) para resolver ambos problemas.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe cambiar el <code>color</code> del texto del <code>button</code> a azul oscuro.
|
||||
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<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>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Avoid Colorblindness Issues by Using Sufficient Contrast
|
||||
localeTitle: Evite los problemas de ceguera al color usando un contraste suficiente
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
color es una gran parte del diseño visual, pero su uso presenta dos problemas de accesibilidad. Primero, el color solo no debe usarse como la única forma de transmitir información importante porque los usuarios de lectores de pantalla no la verán. En segundo lugar, los colores de fondo y de fondo necesitan un contraste suficiente para que los usuarios con daltonismo los puedan distinguir.
|
||||
Los desafíos anteriores cubrieron tener alternativas de texto para abordar el primer problema. El último desafío introdujo herramientas de comprobación de contraste para ayudar con el segundo. La relación de contraste recomendada por WCAG de 4.5: 1 se aplica al uso del color así como a las combinaciones de escala de grises.
|
||||
usuarios de Colorblind tienen problemas para distinguir algunos colores de otros, generalmente en tonos, pero a veces también con ligereza. Puede recordar que la relación de contraste se calcula utilizando los valores de luminancia relativa (o luminosidad) de los colores de primer plano y de fondo.
|
||||
En la práctica, se puede alcanzar la proporción de 4.5: 1 oscureciendo el color más oscuro y aclarando el más claro con la ayuda de un comprobador de contraste de color. Los colores más oscuros en la rueda de colores se consideran azules, violetas, magentas y rojos, mientras que los colores más claros son naranjas, amarillos, verdes y verdes azules.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper gato está experimentando con el uso del color para su blog de texto y el fondo, pero su actual combinación de un color verdoso <code>background-color</code> con el texto marrón <code>color</code> tiene un 2.5: 1 relación de contraste. Puede ajustar fácilmente la luminosidad de los colores ya que los declaró utilizando la propiedad <code>hsl()</code> CSS (que significa matiz, saturación, luminosidad) cambiando el tercer argumento. Aumente el valor de luminosidad del <code>background-color</code> del 35% al 55% y disminuya el valor de luminosidad del <code>color</code> del 20% al 15%. Esto mejora el contraste a 5.9: 1.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código solo debe cambiar el valor de luminosidad de la propiedad de <code>color</code> del texto a un valor del 15%.
|
||||
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
|
||||
- text: Su código solo debe cambiar el valor de luminosidad de la propiedad de <code>background-color</code> a un valor del 55%.
|
||||
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<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>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
|
||||
var code = "body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Give Links Meaning by Using Descriptive Link Text
|
||||
localeTitle: Dar el significado de enlaces mediante el uso de texto de enlace descriptivo
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Los usuarios de lectores de pantalla tienen diferentes opciones para el tipo de contenido que lee su dispositivo. Esto incluye saltar a (o sobre) elementos de hito, saltar al contenido principal u obtener un resumen de la página de los encabezados. Otra opción es escuchar solo los enlaces disponibles en una página.
|
||||
Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que hay entre las etiquetas de ancla ( <code>a</code> ). Tener una lista de enlaces "haga clic aquí" o "leer más" no es útil. En su lugar, debe utilizar el texto breve pero descriptiva dentro de las <code>a</code> etiquetas para proporcionar más significado para estos usuarios.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
El texto del enlace que está utilizando Camper Cat no es muy descriptivo sin el contexto que lo rodea. Mueva las etiquetas de anclaje ( <code>a</code> ) para que envuelvan el texto "información sobre baterías" en lugar de "Haga clic aquí".
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El código debe mover el ancla <code>a</code> las etiquetas de todo las palabras "Haga clic aquí" para envolver alrededor de las palabras "información sobre las baterías".
|
||||
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
|
||||
- text: Asegúrese de que su <code>a</code> elemento tiene una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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 lightening 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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Improve Accessibility of Audio Content with the audio Element
|
||||
localeTitle: Mejorar la accesibilidad del contenido de audio con el elemento de audio
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El elemento de <code>audio</code> de HTML5 da un significado semántico cuando envuelve el contenido de la transmisión de sonido o audio en su marca. El contenido de audio también necesita una alternativa de texto para que las personas sordas o con dificultades auditivas puedan acceder. Esto se puede hacer con el texto cercano en la página o un enlace a una transcripción.
|
||||
La etiqueta de <code>audio</code> admite el atributo de <code>controls</code> . Esto muestra los controles de reproducción, pausa y otros controles predeterminados del navegador, y es compatible con la funcionalidad del teclado. Este es un atributo booleano, lo que significa que no necesita un valor, su presencia en la etiqueta activa la configuración.
|
||||
Aquí hay un ejemplo:
|
||||
<blockquote><audio id="meowClip" controls><br> <source src="audio/meow.mp3" type="audio/mpeg" /><br> <source src="audio/meow.ogg" type="audio/ogg" /><br></audio><br></blockquote>
|
||||
<strong>Nota</strong> <br> El contenido multimedia suele tener componentes tanto visuales como auditivos. Necesita subtítulos sincronizados y una transcripción para que los usuarios con discapacidades visuales y / o auditivas puedan acceder a ella. Generalmente, un desarrollador web no es responsable de crear los subtítulos o la transcripción, pero necesita saber para incluirlos.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
hora de tomar un descanso de Camper Cat y conocer a su compañero campista Zersiax (@zersiax), un campeón de accesibilidad y un usuario de lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, agregue un elemento de <code>audio</code> después de la <code>p</code> . Incluir el atributo de <code>controls</code> . Luego coloque una etiqueta de <code>source</code> dentro de las etiquetas de <code>audio</code> con el atributo <code>src</code> configurado en "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" y <code>type</code> atributo establecido en "audio / mpeg".
|
||||
<strong>Nota</strong> <br> El clip de audio puede sonar rápido y ser difícil de entender, pero esa es una velocidad normal para los usuarios de lectores de pantalla.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener una etiqueta de <code>audio</code> .
|
||||
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
|
||||
- text: Asegúrese de que su elemento de <code>audio</code> tiene una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
|
||||
- text: La etiqueta de <code>audio</code> debe tener el atributo de <code>controls</code> .
|
||||
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
|
||||
- text: Su código debe tener una etiqueta de <code>source</code> .
|
||||
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
|
||||
- text: Su etiqueta de <code>source</code> debe estar dentro de las etiquetas de <code>audio</code> .
|
||||
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
|
||||
- text: El valor del atributo <code>src</code> en la etiqueta de <code>source</code> debe coincidir exactamente con el enlace en las instrucciones.
|
||||
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
|
||||
- text: Su código debe incluir un atributo de <code>type</code> en la etiqueta de <code>source</code> con un valor de audio / mpeg.
|
||||
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Improve Chart Accessibility with the figure Element
|
||||
localeTitle: Mejora la accesibilidad de la carta con la figura Elemento.
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 introdujo el elemento <code>figure</code> , junto con la <code>figcaption</code> relacionada. Usados juntos, estos elementos envuelven una representación visual (como una imagen, diagrama o gráfico) junto con su título. Esto proporciona un aumento de accesibilidad doble al agrupar semánticamente el contenido relacionado y al proporcionar una alternativa de texto que explica la <code>figure</code> .
|
||||
Para visualizaciones de datos como cuadros, la leyenda se puede usar para observar brevemente las tendencias o conclusiones para usuarios con discapacidades visuales. Otro desafío es cómo mover una versión de tabla de los datos del gráfico fuera de la pantalla (mediante CSS) para los usuarios de lectores de pantalla.
|
||||
Aquí hay un ejemplo: tenga en cuenta que la <code>figcaption</code> va dentro de las etiquetas de <code>figure</code> y se puede combinar con otros elementos:
|
||||
<blockquote><figure><br> <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick"><br> <br><br> <figcaption><br> Master Camper Cat demonstrates proper form of a roundhouse kick.<br> </figcaption><br></figure><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat está trabajando duro para crear un gráfico de barras apiladas que muestre la cantidad de tiempo por semana para pasar el entrenamiento en sigilo, combate y armas. Ayúdelo a estructurar mejor su página cambiando la etiqueta <code>div</code> que usó por una etiqueta de <code>figure</code> , y la etiqueta <code>p</code> que rodea el título a una etiqueta de <code>figcaption</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener una etiqueta de <code>figure</code> .
|
||||
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
|
||||
- text: Su código debe tener una etiqueta de <code>figcaption</code> .
|
||||
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
|
||||
- text: Su código no debe tener ninguna etiqueta <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Su código no debe tener ninguna etiqueta <code>p</code> .
|
||||
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
|
||||
- text: La <code>figcaption</code> debe ser un hijo de la etiqueta de la <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: Asegúrese de que el elemento de su <code>figure</code> tenga una etiqueta de cierre.
|
||||
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>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Improve Form Field Accessibility with the label Element
|
||||
localeTitle: Mejorar la accesibilidad del campo de formulario con la etiqueta Elemento
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
mejora de la accesibilidad con el código HTML semántico se aplica al uso de nombres de etiquetas y atributos apropiados. Los siguientes varios desafíos cubren algunos escenarios importantes utilizando atributos en formularios.
|
||||
La <code>label</code> etiqueta envuelve el texto de un elemento de control de formulario específico, generalmente el nombre o la etiqueta de una opción. Esto vincula el significado al elemento y hace que la forma sea más legible. El atributo <code>for</code> en una <code>label</code> etiqueta asocia explícitamente esa <code>label</code> con el control de formulario y es utilizado por los lectores de pantalla.
|
||||
Aprendió sobre los botones de radio y sus etiquetas en una lección en la sección HTML básico. En esa lección, envolvimos el elemento de entrada del botón de radio dentro de un elemento de <code>label</code> junto con el texto de la etiqueta para poder hacer clic en el texto. Otra forma de lograr esto es utilizando el atributo <code>for</code> como se explica en esta lección.
|
||||
El valor del atributo <code>for</code> debe ser el mismo que el valor del atributo <code>id</code> del control de formulario. Aquí hay un ejemplo:
|
||||
<blockquote><form><br> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br></form><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat espera mucho interés en las publicaciones de su blog, y desea incluir un formulario de registro por correo electrónico. Agregue un atributo <code>for</code> en la <code>label</code> correo electrónico que coincida con el <code>id</code> en su campo de <code>input</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener un atributo <code>for</code> en la <code>label</code> etiqueta que no esté vacía.
|
||||
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: El valor del atributo <code>for</code> debe coincidir con el valor de <code>id</code> en la <code>input</code> correo electrónico.
|
||||
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 lightening 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>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Improve Readability with High Contrast Text
|
||||
localeTitle: Mejora la legibilidad con texto de alto contraste
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
bajo contraste entre los colores de primer plano y de fondo puede dificultar la lectura del texto. Un contraste suficiente mejora la legibilidad de su contenido, pero ¿qué significa exactamente "suficiente"?
|
||||
Las Pautas de Accesibilidad al Contenido en la Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1: 1 para el mismo color, o sin contraste, a 21: 1 para blanco contra negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación para usted.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
La elección del texto gris claro de Camper Cat sobre un fondo blanco para su reciente publicación en el blog tiene una relación de contraste de 1.5: 1, lo que dificulta su lectura. Cambie el <code>color</code> del texto del gris actual ( <code>#D3D3D3</code> ) a un gris más oscuro ( <code>#636363</code> ) para mejorar la relación de contraste a 6: 1.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe cambiar el <code>color</code> del texto del <code>body</code> al gris más oscuro.
|
||||
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: Su código no debe cambiar el <code>background-color</code> de <code>background-color</code> del <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>
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Jump Straight to the Content Using the main Element
|
||||
localeTitle: Ir directamente al contenido usando el elemento principal
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 introdujo una serie de nuevos elementos que brindan a los desarrolladores más opciones al tiempo que incorporan funciones de accesibilidad. Estas etiquetas incluyen <code>main</code> , <code>header</code> , <code>footer</code> , <code>nav</code> , <code>article</code> y <code>section</code> , entre otras.
|
||||
De forma predeterminada, un navegador presenta estos elementos de manera similar a la humble <code>div</code> . Sin embargo, usarlos cuando sea apropiado le da un significado adicional a su marca. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega un significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar un mejor resumen de la página o opciones de navegación para sus usuarios.
|
||||
El elemento <code>main</code> se utiliza para envolver (usted lo adivinó) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información relacionada con el tema central de su página. No está diseñado para incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners.
|
||||
La etiqueta <code>main</code> también tiene una característica de hito incorporada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez ha visto un enlace "Ir al contenido principal" en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat tiene algunas grandes ideas para su página de armas ninja. Ayúdelo estableció su margen de beneficio mediante la adición de apertura y cierre de <code>main</code> etiquetas entre la <code>header</code> y <code>footer</code> (cubierto en otros desafíos). Mantener las etiquetas <code>main</code> vacías por ahora.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener una etiqueta <code>main</code> .
|
||||
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
|
||||
- text: Las etiquetas <code>main</code> deben estar entre la etiqueta de <code>header</code> cierre y la etiqueta de <code>footer</code> apertura.
|
||||
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>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Know When Alt Text Should be Left Blank
|
||||
localeTitle: Sepa cuándo el texto alternativo debe dejarse en blanco
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En el último desafío, aprendiste que incluir un atributo <code>alt</code> en las etiquetas img es obligatorio. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos, el texto <code>alt</code> puede parecer redundante o innecesario.
|
||||
En situaciones en las que una imagen ya está explicada con contenido de texto o no agrega un significado a una página, el <code>img</code> aún necesita un atributo <code>alt</code> , pero se puede establecer en una cadena vacía. Aquí hay un ejemplo:
|
||||
<code><img src="visualDecoration.jpeg" alt=""></code>
|
||||
Las imágenes de fondo también suelen caer bajo la etiqueta 'decorativa'. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado.
|
||||
<strong>Nota</strong> <br> Para imágenes con un título, es posible que desee incluir texto <code>alt</code> , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat ha codificado una página de esqueleto para la parte del blog de su sitio web. Está planeando agregar un descanso visual entre sus dos artículos con una imagen decorativa de una espada samurai. Agregue un atributo <code>alt</code> a la etiqueta <code>img</code> y establézcalo en una cadena vacía. (Tenga en cuenta que la imagen <code>src</code> no se enlaza con un archivo real; no se preocupe si no se ven espadas en la pantalla).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> .
|
||||
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
|
||||
- text: El atributo <code>alt</code> debe establecer en una cadena vacía.
|
||||
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>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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
|
||||
localeTitle: Haga que los elementos solo sean visibles para un lector de pantalla utilizando CSS personalizado
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
¿Ha notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico y el uso de etiquetas semánticamente significativas alrededor de su contenido antes de introducir el aspecto de diseño visual.
|
||||
Sin embargo, la magia de CSS también puede mejorar la accesibilidad en su página cuando desea ocultar visualmente contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios de lectores de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos de solo lectura de pantalla fuera del área visual de la ventana del navegador.
|
||||
Aquí hay un ejemplo de las reglas CSS que logran esto:
|
||||
<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> Los siguientes enfoques de CSS NO harán lo mismo:
|
||||
<ul>
|
||||
<li> <code>display: none;</code> o <code>visibility: hidden;</code> oculta el contenido para todos, incluidos los usuarios de lectores de pantalla </li>
|
||||
<li> Valores cero para tamaños de píxeles, tales como <code>width: 0px; height: 0px;</code> elimina ese elemento del flujo de su documento, lo que significa que los lectores de pantalla lo ignorarán </li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat creó un gráfico de barras apiladas realmente genial para su página de entrenamiento y puso los datos en una tabla para sus usuarios con discapacidades visuales. La tabla ya tiene una clase <code>sr-only</code> , pero las reglas de CSS aún no están completas. Asigne a la <code>position</code> un valor absoluto, el valor <code>left</code> a -10000px, y el <code>width</code> y el <code>height</code> ambos valores de 1px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe establecer la propiedad de <code>position</code> de la clase <code>sr-only</code> en un 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: Su código debe establecer la propiedad <code>left</code> de la clase <code>sr-only</code> a un 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: Su código debe establecer la propiedad de <code>width</code> de la clase <code>sr-only</code> en un valor de 1 píxel.
|
||||
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: Su código debe establecer la propiedad de <code>height</code> de la clase <code>sr-only</code> en un valor de 1 píxel.
|
||||
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>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: Make Links Navigatable with HTML Access Keys
|
||||
localeTitle: Haga que los enlaces sean navegables con claves de acceso HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML ofrece la <code>accesskey</code> atributo para especificar una tecla de acceso directo para activar o traer el foco a un elemento. Esto puede hacer que la navegación sea más eficiente para usuarios que solo usan el teclado.
|
||||
HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con los interactivos. Esto incluye enlaces, botones y controles de formulario.
|
||||
Aquí hay un ejemplo:
|
||||
<code><button accesskey="b">Important Button</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat desea que los enlaces que se encuentran alrededor de los dos títulos de artículos de blogs tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agregue un atributo de <code>accesskey</code> a ambos enlaces y establezca el primero en "g" (para Garfield) y el segundo en "c" (para Chuck Norris).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El código debería añadir una <code>accesskey</code> atributo a la <code>a</code> etiqueta con el <code>id</code> de "primera".
|
||||
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: El código debería añadir una <code>accesskey</code> atributo a la <code>a</code> etiqueta con el <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: El código debe establecer la <code>accesskey</code> atributo en el <code>a</code> etiqueta con el <code>id</code> de "primera" a "g". Tenga en cuenta que el caso importa.
|
||||
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: El código debe establecer la <code>accesskey</code> atributo en el <code>a</code> etiqueta con el <code>id</code> de "segunda" a "c". Tenga en cuenta que el caso importa.
|
||||
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>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Make Screen Reader Navigation Easier with the footer Landmark
|
||||
localeTitle: Facilita la navegación por el lector de pantalla con el pie de página
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
igual que el <code>header</code> y la <code>nav</code> , el elemento de <code>footer</code> tiene una característica de marca incorporada que permite que los dispositivos de asistencia naveguen rápidamente hacia ella. Se utiliza principalmente para contener información de derechos de autor o enlaces a documentos relacionados que generalmente se encuentran en la parte inferior de una página.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
La página de entrenamiento de Camper Cat está progresando bien. Cambie el <code>div</code> que usó para ajustar su información de copyright en la parte inferior de la página a un elemento de <code>footer</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener una etiqueta de <code>footer</code> .
|
||||
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
|
||||
- text: Su código no debe tener ninguna etiqueta <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Su código debe tener una etiqueta de <code>footer</code> apertura y cierre.
|
||||
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>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Make Screen Reader Navigation Easier with the header Landmark
|
||||
localeTitle: Haga que la navegación del lector de pantalla sea más fácil con el encabezado
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El siguiente elemento HTML5 que agrega un significado semántico y mejora la accesibilidad es la etiqueta del <code>header</code> . Se usa para envolver información introductoria o enlaces de navegación para su etiqueta principal, y funciona bien con el contenido que se repite en la parte superior de varias páginas.
|
||||
<code>header</code>
|
||||
comparte la característica de hito incorporada que vio con <code>main</code> , permitiendo que las tecnologías de asistencia naveguen rápidamente hacia ese contenido.
|
||||
<strong>Nota</strong> <br> <code>header</code> está diseñado para su uso en la etiqueta del <code>body</code> de su documento HTML. Esto es diferente al elemento de <code>head</code> , que contiene el título de la página, metainformación, etc.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat está escribiendo algunos artículos geniales sobre el entrenamiento de ninja, y quiere agregar una página para ellos en su sitio. Cambie la <code>div</code> superior que actualmente contiene el <code>h1</code> a una etiqueta de <code>header</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener una etiqueta de <code>header</code> .
|
||||
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
|
||||
- text: Sus etiquetas de <code>header</code> deben envolver alrededor de la <code>h1</code> .
|
||||
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
|
||||
- text: Su código no debe tener ninguna etiqueta <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Asegúrese de que su elemento de <code>header</code> tenga una etiqueta de cierre.
|
||||
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>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Make Screen Reader Navigation Easier with the nav Landmark
|
||||
localeTitle: Facilita la navegación por el lector de pantalla con el navegador Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El elemento de <code>nav</code> es otro elemento de HTML5 con la función de marca incorporada para facilitar la navegación del lector de pantalla. Esta etiqueta está diseñada para envolver alrededor de los enlaces de navegación principales en su página.
|
||||
Si hay enlaces repetidos al sitio en la parte inferior de la página, no es necesario marcar también aquellos con una etiqueta de <code>nav</code> . Usar un <code>footer</code> (cubierto en el siguiente desafío) es suficiente.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un <code>div</code> . Cambie el <code>div</code> a una etiqueta de <code>nav</code> para mejorar la accesibilidad en su página.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener una etiqueta de <code>nav</code> .
|
||||
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
|
||||
- text: Sus etiquetas de <code>nav</code> deben envolver alrededor de la <code>ul</code> y sus elementos 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: Su código no debe tener ninguna etiqueta <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Asegúrese de que su elemento de <code>nav</code> tenga una etiqueta de cierre.
|
||||
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>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Standardize Times with the HTML5 datetime Attribute
|
||||
localeTitle: Estandarizar los tiempos con el atributo datetime HTML5
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Continuando con el tema de la fecha, HTML5 también introdujo el elemento de <code>time</code> junto con un atributo de <code>datetime</code> y <code>datetime</code> para estandarizar los tiempos. Este es un elemento en línea que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene en el atributo <code>datetime</code> . Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto.
|
||||
Aquí hay un ejemplo:
|
||||
<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'>
|
||||
encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta de <code>time</code> alrededor del texto "Jueves, 15 de septiembre <sup> th </sup>" y agregue un atributo de <code>datetime</code> y <code>datetime</code> establecido en "2016-09-15".
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Sus etiquetas de <code>time</code> deben rodear el texto "Jueves 15 de septiembre <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: Su etiqueta de <code>time</code> debe tener un atributo de <code>datetime</code> y <code>datetime</code> que no esté vacío.
|
||||
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
|
||||
- text: Su atributo de <code>datetime</code> y <code>datetime</code> debe establecerse en un 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: Asegúrese de que su elemento de <code>time</code> tenga una etiqueta de cierre.
|
||||
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>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Use Headings to Show Hierarchical Relationships of Content
|
||||
localeTitle: Usar encabezados para mostrar relaciones jerárquicas de contenido
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
encabezados (elementos <code>h1</code> a <code>h6</code> ) son etiquetas de trabajo que ayudan a proporcionar estructura y etiquetado a su contenido. Los lectores de pantalla pueden configurarse para leer solo los encabezados de una página, de modo que el usuario obtenga un resumen. Esto significa que es importante que las etiquetas de encabezado en su marca tengan un significado semántico y se relacionen entre sí, no para ser elegidas simplemente por sus valores de tamaño.
|
||||
<em>Significado semántico significa</em> que la etiqueta que usa alrededor del contenido indica el tipo de información que contiene.
|
||||
Si estuviera escribiendo un artículo con una introducción, un cuerpo y una conclusión, no tendría mucho sentido poner la conclusión como una subsección del cuerpo en su esquema. Debe ser su propia sección. Del mismo modo, las etiquetas de encabezado en una página web deben ir en orden e indicar las relaciones jerárquicas de su contenido.
|
||||
encabezados con rango igual (o superior) inician nuevas secciones implícitas, los encabezados con subsecciones de inicio de rango inferior del anterior.
|
||||
Como ejemplo, una página con un elemento <code>h2</code> seguido de varias subsecciones etiquetadas con etiquetas <code>h4</code> confundiría a un usuario lector de pantalla. Con seis opciones, es tentador usar una etiqueta porque se ve mejor en un navegador, pero puedes usar CSS para editar el tamaño relativo.
|
||||
Un punto final, cada página debe tener siempre un elemento <code>h1</code> (y solo uno), que es el tema principal de su contenido. Este y los otros encabezados son utilizados en parte por los motores de búsqueda para comprender el tema de la página.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat quiere una página en su sitio dedicada a convertirse en ninja. Ayúdelo a arreglar los títulos para que su marca dé un significado semántico al contenido y muestre las relaciones correctas entre padres e hijos de sus secciones. Cambie todas las etiquetas <code>h5</code> al nivel de título adecuado para indicar que son subsecciones de las <code>h2</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener seis etiquetas <code>h3</code> .
|
||||
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
|
||||
- text: Su código no debe tener ninguna etiqueta <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>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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Use tabindex to Add Keyboard Focus to an Element
|
||||
localeTitle: Use tabindex para agregar el foco de teclado a un elemento
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El atributo HTML <code>tabindex</code> tiene tres funciones distintas relacionadas con el enfoque del teclado de un elemento. Cuando está en una etiqueta, indica que el elemento se puede enfocar. El valor (un entero que es positivo, negativo o cero) determina el comportamiento.
|
||||
Ciertos elementos, como los enlaces y los controles de formulario, reciben automáticamente el enfoque del teclado cuando un usuario se desplaza por una página. Está en el mismo orden en que los elementos vienen en el código fuente HTML. Esta misma funcionalidad se puede dar a otros elementos, como <code>div</code> , <code>span</code> <code>p</code> , colocando un <code>tabindex="0"</code> en ellos. Aquí hay un ejemplo:
|
||||
<code><div tabindex="0">I need keyboard focus!</div></code>
|
||||
<strong>Nota</strong> <br> Un valor de <code>tabindex</code> negativo (generalmente -1) indica que un elemento es enfocable, pero no es accesible por el teclado. Este método generalmente se usa para enfocar el contenido mediante programación (como cuando se activa un <code>div</code> para una ventana emergente), y está más allá del alcance de estos desafíos.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Sabe que los campos de entrada se enfocan automáticamente en el teclado, pero quiere asegurarse de que los usuarios de su teclado se detengan en las instrucciones mientras repasan los elementos. Agregue un atributo de <code>tabindex</code> a la etiqueta <code>p</code> y establezca su valor en "0". Bonus: el uso de <code>tabindex</code> también habilita la <code>tabindex</code> CSS <code>:focus</code> para trabajar en la etiqueta <code>p</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe agregar un atributo <code>tabindex</code> a la etiqueta <code>p</code> que contiene las instrucciones del formulario.
|
||||
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: Su código debe establecer el atributo <code>tabindex</code> en la etiqueta <code>p</code> a un 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>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
|
||||
localeTitle: Use tabindex para especificar el orden de enfoque del teclado para varios elementos
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El atributo <code>tabindex</code> también especifica el orden de tabulación exacto de los elementos. Esto se logra cuando el valor del atributo se establece en un número positivo de 1 o superior.
|
||||
Establecer un tabindex = "1" traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de <code>tabindex</code> especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y <code>tabindex="0"</code> .
|
||||
Es importante tener en cuenta que cuando el orden de tabulación se establece de esta manera, anula el orden predeterminado (que utiliza la fuente HTML). Esto puede confundir a los usuarios que esperan comenzar la navegación desde la parte superior de la página. Esta técnica puede ser necesaria en algunas circunstancias, pero en términos de accesibilidad, tenga cuidado antes de aplicarla.
|
||||
Aquí hay un ejemplo:
|
||||
<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 tiene un campo de búsqueda en su página de citas inspiradoras que planea posicionar en la esquina superior derecha con CSS. Quiere que la <code>input</code> búsqueda y <code>input</code> controles de formulario de <code>input</code> sean los dos primeros elementos en el orden de tabulación. Agregue un <code>tabindex</code> atributos de <code>tabindex</code> a "1" a la <code>input</code> búsqueda, y un atributo de <code>tabindex</code> establecido a "2" a la <code>input</code> envío.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe agregar un atributo <code>tabindex</code> a la etiqueta de <code>input</code> búsqueda.
|
||||
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
|
||||
- text: Su código debe agregar un atributo <code>tabindex</code> a la etiqueta de <code>input</code> envío.
|
||||
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
|
||||
- text: Su código debe establecer el atributo <code>tabindex</code> en la etiqueta de <code>input</code> búsqueda a un 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: Su código debe establecer el atributo <code>tabindex</code> en la etiqueta de <code>input</code> envío a un 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>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Wrap Content in the article Element
|
||||
localeTitle: Envolver contenido en el artículo Elemento.
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>article</code> es otro de los nuevos elementos HTML5 que agrega un significado semántico a su marca. <code>Article</code> es un elemento de sección y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en foros o artículos de noticias.
|
||||
Determinar si el contenido puede ser independiente por lo general es una decisión de juicio, pero hay un par de pruebas simples que puede usar. Pregúntese si eliminó todo el contexto circundante, ¿ese contenido aún tendría sentido? De manera similar, para el texto, ¿se mantendría el contenido si estuviera en una fuente RSS?
|
||||
Recuerde que las personas que usan tecnologías de asistencia confían en un marcado organizado semánticamente significativo para comprender mejor su trabajo.
|
||||
<strong>Nota sobre la <code>section</code> y <code>div</code></strong> <br> El elemento de <code>section</code> también es nuevo con HTML5 y tiene un significado semántico ligeramente diferente al <code>article</code> . Un <code>article</code> es para contenido independiente, y una <code>section</code> es para agrupar contenido relacionado temáticamente. Se pueden usar uno dentro del otro, según sea necesario. Por ejemplo, si un libro es el <code>article</code> , entonces cada capítulo es una <code>section</code> . Cuando no haya una relación entre grupos de contenido, use un <code>div</code> .
|
||||
<blockquote><div> - groups content<br><section> - groups related content<br><article> - groups independent, self-contained content<br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat usó etiquetas de <code>article</code> para envolver las publicaciones en su página de blog, pero se olvidó de usarlas en la parte superior. Cambie la etiqueta <code>div</code> para usar una etiqueta de <code>article</code> lugar.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Su código debe tener tres etiquetas de <code>article</code> .
|
||||
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
|
||||
- text: Su código no debe tener ninguna etiqueta <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>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 lightening 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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
|
||||
localeTitle: Envuelva los botones de radio en un elemento fieldset para una mejor accesibilidad
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El siguiente tema del formulario cubre la accesibilidad de los botones de radio. A cada opción se le asigna una <code>label</code> con un atributo <code>for</code> vincula con el <code>id</code> del elemento correspondiente tal como se describe en el último desafío. Dado que los botones de radio a menudo vienen en un grupo donde el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto.
|
||||
La etiqueta de <code>fieldset</code> rodea todo el grupo de botones de radio para lograr esto. A menudo utiliza una etiqueta de <code>legend</code> para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento <code>fieldset</code> .
|
||||
El <code>fieldset</code> y la etiqueta de <code>legend</code> no son necesarios cuando las opciones son autoexplicativas, como una selección de género. Usando una <code>label</code> con el <code>for</code> atributo para cada botón de radio es suficiente.
|
||||
Aquí hay un ejemplo:
|
||||
<blockquote><form><br> <fieldset><br> <legend>Choose one of these three items:</legend><br> <input id="one" type="radio" name="items" value="one"><br> <label for="one">Choice One</label><br><br> <input id="two" type="radio" name="items" value="two"><br> <label for="two">Choice Two</label><br><br> <input id="three" type="radio" name="items" value="three"><br> <label for="three">Choice Three</label><br> </fieldset><br></form><br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat desea información sobre el nivel de ninja de sus usuarios cuando se registran en su lista de correo electrónico. Ha añadido un conjunto de botones de radio, y aprendió de la lección anterior para utilizar etiquetas de la etiqueta con la <code>for</code> atributos para cada elección. ¡Ve el gato campista! Sin embargo, su código todavía necesita ayuda. Cambie la etiqueta <code>div</code> rodea a los botones de <code>fieldset</code> una etiqueta de conjunto de <code>fieldset</code> y cambie la etiqueta <code>p</code> dentro de una <code>legend</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El código debe tener un <code>fieldset</code> de etiqueta en todo el juego de botones circulares.
|
||||
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
|
||||
- text: Asegúrese de que su elemento <code>fieldset</code> tenga una etiqueta de cierre.
|
||||
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: Tu código debe tener una etiqueta de <code>legend</code> alrededor del texto que pregunta qué nivel de ninja es un usuario.
|
||||
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: Su código no debe tener ninguna etiqueta <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Tu código ya no debería tener una etiqueta <code>p</code> alrededor del texto que pregunta qué nivel de ninja es un usuario.
|
||||
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 lightening 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