Files
freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.spanish.md
2018-10-08 13:34:43 -04:00

5.9 KiB

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

Description

Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/NdrKKL . Cumplir con las siguientes historias de usuario 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! 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 de usuario # 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" ). usuario Historia # 5: Los .main-section elementos deben contener al menos 10 p total de elementos (no cada uno). Historia de usuario n. ° 6: Los .main-section deben contener al menos 5 elementos de code total (no cada uno). usuario Historia # 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 # 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 # 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 de 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 el usuario siempre debe estar visible. Historia del usuario n. ° 15: La página Mi documentación técnica debe usar al menos una consulta de medios. Puede construir su proyecto por medio de este bolígrafo de CodePen . O bien, puede usar este enlace CDN para ejecutar las pruebas en cualquier entorno que le guste: 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 usar el método Read-Search-Ask si te quedas atascado.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required