<sectionid="description"><strong>Objetivo:</strong> crear una aplicación <ahref="https://codepen.io"target="_blank">CodePen.io</a> que sea funcionalmente similar a esta: <ahref="https://codepen.io/freeCodeCamp/full/NdrKKL"target="_blank">https://codepen.io/freeCodeCamp/full/NdrKKL</a> . Cumple las siguientes <ahref="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 d