---
id: 587d78b0367417b2b2512b05
title: Build a Technical Documentation Page
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Construir una página de documentación técnica
---
## Description
Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/NdrKKL . Cumple las siguientes historias de usuario 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! Historia de usuario n. ° 1: Puedo ver un elemento main
con un id="main-doc"
correspondiente id="main-doc"
, que contiene el contenido principal de la página (documentación técnica). Historia de usuario # 2: Dentro del elemento #main-doc
, puedo ver varios elementos de section
, cada uno con una clase de main-section
. Debe haber un mínimo de 5. Historia del usuario n.º 3: el primer elemento dentro de cada .main-section
debe ser un elemento de header
que contenga texto que describa el tema de esa sección. Historia de usuario n. ° 4: Cada elemento de section
con la clase de main-section
también debe tener un ID que se corresponda con el texto de cada header
contenido en él. Cualquier espacio debe reemplazarse con guiones bajos (por ejemplo, la section
que contiene el encabezado "Javascript y Java" debe tener una id="Javascript_and_Java"
correspondiente id="Javascript_and_Java"
). Historia de usuario n. ° 5: Los elementos .main-section
deben contener al menos 10 p
elementos en total (no cada uno). Historia de usuario n. ° 6: Los .main-section
deben contener al menos 5 elementos de code
total (no cada uno). Historia de usuario # 7: Los .main-section
elementos deben contener al menos 5 li
total de los artículos (no cada uno). Historia de usuario n. ° 8: Puedo ver un elemento de nav
con una id="navbar"
correspondiente id="navbar"
. Historia de usuario n. ° 9: el elemento de la barra de navegación debe contener un elemento de header
que contenga texto que describa el tema de la documentación técnica. Historia de usuario # 10: Además, la barra de navegación debe contener elementos del enlace ( a
) con la clase de nav-link
de nav-link
. Debe haber uno para cada elemento con la clase main-section
. Historia de usuario n. ° 11: El elemento de header
en la barra de navegación debe aparecer antes que cualquier elemento de enlace ( a
) en la barra de navegación. Historia del usuario n. ° 12: Cada elemento con la clase de nav-link
de nav-link
debe contener texto que corresponda al texto del header
dentro de cada section
(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"). Historia de usuario n. ° 13: cuando hago clic en un elemento de la barra de navegación, la página debe navegar a la sección correspondiente del elemento main-doc
(por ejemplo, si hago clic en un elemento de nav-link
que contiene el texto "Hola mundo", la página navega a un elemento de section
que tiene ese ID y contiene el header
correspondiente. Historia del usuario n . ° 14: En dispositivos de tamaño normal (computadoras portátiles, computadoras de escritorio), el elemento con id="navbar"
debe mostrar en el lado izquierdo de la pantalla y siempre debe El usuario puede verlo . Historia del usuario n. ° 15: La página Mi documentación técnica debería usar al menos una consulta de medios. Puede crear su proyecto por medio de este bolígrafo CodePen o puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que desee. : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
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 lectura-búsqueda-preguntar Método si te quedas atascado.
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```