39 lines
6.0 KiB
Markdown
39 lines
6.0 KiB
Markdown
---
|
|
id: 587d78b0367417b2b2512b05
|
|
title: Build a Technical Documentation Page
|
|
isRequired: true
|
|
challengeType: 3
|
|
videoUrl: ''
|
|
localeTitle: Construir una página de documentación técnica
|
|
---
|
|
|
|
## Description
|
|
<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="main-doc"</code> correspondiente <code>id="main-doc"</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 "Javascript y Java" debe tener una <code>id="Javascript_and_Java"</code> correspondiente <code>id="Javascript_and_Java"</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="navbar"</code> correspondiente <code>id="navbar"</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 "Hola mundo", su barra de navegación debe tener un elemento que contenga el texto "Hola Mundo"). <strong>Historia de usuario n. ° 13:</strong> cuando hago clic en un elemento de la barra de navegación, la página debe navegar a la sección correspondiente del elemento <code>main-doc</code> (por ejemplo, si hago clic en un elemento de <code>nav-link</code> que contiene el texto "Hola mundo", la página navega a un elemento de <code>section</code> que tiene ese ID y contiene el <code>header</code> correspondiente. <strong>Historia del usuario n</strong> . <strong>° 14:</strong> En dispositivos de tamaño normal (computadoras portátiles, computadoras de escritorio), el elemento con <code>id="navbar"</code> debe mostrar en el lado izquierdo de la pantalla y siempre debe El usuario puede <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">verlo</a> . <strong>Historia</strong> del usuario n. <strong>° 15:</strong> La página Mi documentación técnica debería usar al menos una consulta de medios. Puede crear su proyecto por medio de <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">este bolígrafo CodePen</a> o puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que desee. : <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Una vez que haya terminado, envíe la URL a su proyecto de trabajo con todas las pruebas aprobadas. Recuerde utilizar la función de <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">lectura-búsqueda-preguntar</a> Método si te quedas atascado. </section>
|
|
|
|
## Instructions
|
|
<section id="instructions">
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests: []
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
</section>
|