Un proyecto propuesto por freeCodeCamp.org para reforzar conocimientos en CSS3 y HTML5.
Página Web: https://eduardout.github.io/fCCProyectos-PaginaDocumentacion/
Proyecto Propuesto: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page/
Acerca de...
El proyecto esta enfocado en el desarrollo de una página web responsiva que posea información de documentación técnica de uno de los lenguajes de programación más demandados en el mercado JavaScript, con una propuesta de diseño tradicional en la que se puede apreciar un menu con scoll independiente a la izquierda para escritorio y en móvil ubicado en la parte superior de la página conservando el desplazamiento horizontal apreciado en escritorio.
Requerimientos:
- Historia de usuario n.º 1: puedo ver un elemento principal con un id="main-doc" correspondiente, que contiene el contenido principal de la página (documentación técnica).
- Historia de usuario n.º 2: dentro del elemento #main-doc, puedo ver varios elementos de sección, cada uno con una clase de sección principal. Debe haber un mínimo de 5.
- Historia de usuario n.° 3: el primer elemento dentro de cada sección principal debe ser un elemento de encabezado que contenga texto que describa el tema de esa sección.
- Historia de usuario n.º 4: cada elemento de sección con la clase de sección principal también debe tener una identificación que se corresponda con el texto de cada encabezado que contiene. Los espacios deben reemplazarse con guiones bajos (p. ej., la sección que contiene el encabezado "JavaScript y Java" debe tener un id correspondiente="JavaScript_y_Java").
- Historia de usuario n.° 5: Los elementos de la sección principal deben contener al menos 10 p elementos en total (no cada uno).
- Historia de usuario n.° 6: los elementos de la sección principal deben contener al menos 5 elementos de código en total (no cada uno).
- Historia de usuario n.° 7: Los elementos de la sección principal deben contener al menos 5 elementos li en total (no cada uno).
- Historia de usuario n.º 8: Puedo ver un elemento de navegación con un id="navbar" correspondiente.
- Historia de usuario n.° 9: el elemento de la barra de navegación debe contener un elemento de encabezado que contenga texto que describa el tema de la documentación técnica.
- Historia de usuario n.º 10: además, la barra de navegación debe contener elementos de enlace (a) con la clase de enlace de navegación. Debe haber uno para cada elemento con la sección principal de la clase.
- Historia de usuario n.° 11: El elemento de encabezado 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 enlace de navegación debe contener texto que corresponda al texto del encabezado dentro de cada sección (por ejemplo, si tiene una sección/encabezado "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 del documento principal (por ejemplo, si hago clic en un elemento de enlace de navegación que contiene el texto "Hola mundo", la página navega a un elemento de sección que tiene esa identificación y contiene el encabezado correspondiente.
- Historia de usuario n.° 14: en dispositivos de tamaño normal (computadoras portátiles, computadoras de escritorio), el elemento con id="barra de navegación" debe mostrarse en el lado izquierdo de la pantalla y siempre debe estar visible para el usuario.
- Historia de usuario n.º 15: Mi página de documentación técnica debe usar al menos una consulta de medios.
Para asegurarnos de cumplir con cada uno de los requerimientos antes mencionados, freeCodeCamp.org proporciona una herramienta que permite evaluar si se cumple con el objetivo.
Resultados de Pruebas:
Vista Previa:
