freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.spanish.md

---
id: 587d78b0367417b2b2512b05
title: Build a Technical Documentation Page
localeTitle: Construir una página de documentación técnica
isRequired: true
challengeType: 3
---

## 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> . 
Cumplir con las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a> y obtener todas las pruebas para pasar. 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 de usuario # 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>usuario Historia # 5:</strong> Los <code>.main-section</code> elementos deben contener al menos 10 <code>p</code> total de elementos (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>usuario Historia # 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 # 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 # 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 de 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 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 &quot;Hola mundo&quot;, 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. ° 14:</strong> En dispositivos de tamaño normal (computadoras portátiles, computadoras de escritorio), el elemento con <code>id=&quot;navbar&quot;</code> debe mostrar en el lado izquierdo de la pantalla y el usuario siempre debe estar visible. 
<strong>Historia</strong> del usuario n. <strong>° 15:</strong> La página Mi documentación técnica debe usar al menos una consulta de medios. 
Puede construir su proyecto por medio de <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>este bolígrafo de CodePen</a> . O bien, puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que le guste: <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 usar el método <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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>