freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documenta...

39 lines
6.0 KiB
Markdown
Raw Normal View History

2018-10-08 17:34:43 +00:00
---
id: 587d78b0367417b2b2512b05
title: Build a Technical Documentation Page
isRequired: true
challengeType: 3
2018-10-10 20:20:40 +00:00
videoUrl: ''
localeTitle: Construir una página de documentación técnica
2018-10-08 17:34:43 +00:00
---
## Description
2018-10-10 20:20:40 +00:00
<section id="description"> <strong>Objetivo:</strong> crear una aplicación <a href="https://codepen.io" target="_blank">CodePen.io</a> que sea funcionalmente similar a esta: <a href="https://codepen.io/freeCodeCamp/full/NdrKKL" target="_blank">https://codepen.io/freeCodeCamp/full/NdrKKL</a> . Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda CSS simple porque eso es lo que las lecciones han cubierto hasta ahora y debe obtener algo de práctica con CSS simple. Puede utilizar Bootstrap o SASS si lo desea. No se recomiendan tecnologías adicionales (solo por ejemplo, jQuery, React, Angular o Vue) para este proyecto, y su uso es bajo su propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes pilas de tecnología como React. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación! <strong>Historia de usuario n. ° 1:</strong> Puedo ver un elemento <code>main</code> con un <code>id=&quot;main-doc&quot;</code> correspondiente <code>id=&quot;main-doc&quot;</code> , que contiene el contenido principal de la página (documentación técnica). <strong>Historia de usuario # 2:</strong> Dentro del elemento <code>#main-doc</code> , puedo ver varios elementos de <code>section</code> , cada uno con una clase de <code>main-section</code> . Debe haber un mínimo de 5. <strong>Historia del usuario n.º 3:</strong> el primer elemento dentro de cada <code>.main-section</code> debe ser un elemento de <code>header</code> que contenga texto que describa el tema de esa sección. <strong>Historia de usuario n. ° 4:</strong> Cada elemento de <code>section</code> con la clase de <code>main-section</code> también debe tener un ID que se corresponda con el texto de cada <code>header</code> contenido en él. Cualquier espacio debe reemplazarse con guiones bajos (por ejemplo, la <code>section</code> que contiene el encabezado &quot;Javascript y Java&quot; debe tener una <code>id=&quot;Javascript_and_Java&quot;</code> correspondiente <code>id=&quot;Javascript_and_Java&quot;</code> ). <strong>Historia de usuario n. ° 5:</strong> Los elementos <code>.main-section</code> deben contener al menos 10 <code>p</code> elementos en total (no cada uno). <strong>Historia de usuario n. ° 6:</strong> Los <code>.main-section</code> deben contener al menos 5 elementos de <code>code</code> total (no cada uno). <strong>Historia de usuario # 7:</strong> Los <code>.main-section</code> elementos deben contener al menos 5 <code>li</code> total de los artículos (no cada uno). <strong>Historia de usuario n. ° 8:</strong> Puedo ver un elemento de <code>nav</code> con una <code>id=&quot;navbar&quot;</code> correspondiente <code>id=&quot;navbar&quot;</code> . <strong>Historia de usuario n. ° 9:</strong> el elemento de la barra de navegación debe contener un elemento de <code>header</code> que contenga texto que describa el tema de la documentación técnica. <strong>Historia de usuario # 10:</strong> Además, la barra de navegación debe contener elementos del enlace ( <code>a</code> ) con la clase de <code>nav-link</code> de <code>nav-link</code> . Debe haber uno para cada elemento con la clase <code>main-section</code> . <strong>Historia de usuario n. ° 11:</strong> El elemento de <code>header</code> en la barra de navegación debe aparecer antes que cualquier elemento de enlace ( <code>a</code> ) en la barra de navegación. <strong>Historia del usuario n. ° 12:</strong> Cada elemento con la clase de <code>nav-link</code> de <code>nav-link</code> debe contener texto que corresponda al texto del <code>header</code> dentro de cada <code>section</code> (por ejemplo, si tiene una sección / encabezado de &quot;Hola mundo&quot;, su barra de navegación debe tener un elemento que contenga el texto &quot;Hola Mundo&quot;). <strong>Historia d
2018-10-08 17:34:43 +00:00
## Instructions
2018-10-10 20:20:40 +00:00
<section id="instructions">
2018-10-08 17:34:43 +00:00
</section>
## Tests
<section id='tests'>
```yml
tests: []
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>