Módulo 1: Ejercicio de evaluación final
Antes de empezar, tenéis que crear un nuevo repositorio desde GitHub Classroom usando este enlace.Una vez creado, debéis clonarlo en vuestro ordenador y en la carpeta creada debéis empezar a trabajaren el ejercicio.A continuación debéis descargar e incluir en el proyecto el starter kit de Adalab.También necesitaréis varias imágenes e iconos que podéis descargar desde este zip.Y por último aquí tenéis los diseños en zeplin para guiaros en la maquetación. Si no puedes permisospara ver el proyecto, pídeselo a tu profesora.EnunciadoEl ejercicio consiste en desarrollar una página web de acuerdo a un diseño dado. Hay que resolver variospuntos:Usar Sass.Usar flexbox y CSS Grid.Usar media queries.Resolver algunas interacciones usando transiciones.
En primer lugar debéis realizar la maquetación sobre un diseño dado:
- El botón de hamburguesa (en la esquina superior izquierda) debe estar fijo en la parte superior de lapantalla y no debe desaparecer al hacer scroll. El icono de la hamburguesa debe ser un enlace a lapágina de Adalab. Este menú de hamburguesa no desplega ningún submenú.
- Primer módulo (Anonymous proxy): debe estar maquetado con flexbox y debe ocupar el alto de laventana del navegador.
- Segundo módulo (Looking Through A Window): se puede maquetar usando las propiedades de CSSque se deseen.
- Tercer módulo (3 Reasons To Purchase): los 3 elementos del listado deben estar maquetados con CSSGrid en todos los tamaños de pantalla.
- Cuarto módulo (footer): se debe maquetar usando flexbox. Todos los textos de la columna "ARTICLES" ytodos los textos de la columna "TWITTER" deben ser enlaces a la página de Adalab.
En total, hay 3 interacciones que resolver:
- El botón de flecha del módulo hero debe enlazar a la sección "3 Reasons To Purchase".
- El botón de flecha del footer debe enlazar al inicio de la página.
- En el hover de los botones ("Go" y "3 Reasons To Purchase") se debe incluir una transición que dejamosa vuestra elección (por ejemplo: color, tamaño, etc.).
- BONUS: hacer una pequeña animación en el botón del footer.
Hemos pautado 12 horas de dedicación al ejercicio, por lo que la fecha límite de entrega es:Lunes, 15 de junio a las 14:00h.Solo debéis hacer commits y merges en la rama master de vuestro repositorio hasta la fecha límite. Si despuésdel ejercicio queréis seguir trabajando sobre el ejercicio, lo podéis hacer en otra rama y no debéis mergearlahasta que los profesores os lo indiquen.La evaluación solo se considerará terminada cuando:Esté publicada en GitHub Pages y esté funcionando, para lo cual tendréis que subir el código, tambiéna la carpeta docs/ del repositorio.El enlace a GitHub Pages esté en la página página principal del repositorio, en la parte superior, al ladode la descripción.
Este ejercicio está pensado para que lo realices de forma individual en clase, pero podrás consultar tus dudascon la profesora y tus compañeras si lo consideras necesario. Ellas no te darán directamente la solución de tududa, pero sí pistas para poder solucionarla. Aún facilitando la comunicación entre compañeras, durante laprueba no debes copiar código de otra persona ni acceder a su portátil. Confiamos en tu responsabilidad.La evaluación es una buena oportunidad para conocer cómo estás progresando, saber qué temas debesreforzar durante las siguientes semanas y cuáles dominas. Te recomendamos que te sientas cómoda con elejercicio que entregues y no envíes cosas copiadas que no entiendas. Si detectamos que has entregado código que no es tuyo, no entiendes y no lo puedes defender, pasarásdirectamente a la re-evaluación del módulo. Tu objetivo no debería ser pasar la evaluación sino convertirte enprogramadora, y esto debes tenerlo claro en todo momento.Una vez entregado el ejercicio realizarás una revisión del mismo con la profesora (25 minutos), que seasemenjará a una entrevista técnica: te pedirá que expliques las decisiones tomadas para realizarlo y tepropondrá realizar cambios in situ sobre tu solución.Es una oportunidad para practicar la dinámica de una entrevista técnica donde te van a proponer cambiossobre tu código que no conoces a priori. Si evitas que otras compañeras te den pistas sobre la dinámica defeedback, podrás aprovecharlo como una práctica y pasar los nervios con la profesora en lugar de en tuprimera entrevista de trabajo.Al final tendrás un feedback sobre aspectos a destacar y a mejorar en tu ejercicio, y sabrás qué objetivos deaprendizaje has superado de los listados a continuación.
Vamos a listar los criterios de evaluación de este ejercicio. Si no superas al menos el 80% de estos criterios ono has superado algún criterio clave (marcados con asterisco) te pediremos que realices una re-evaluacióncon el fin de que termines el curso mejor preparada y enfrentes tu primera experiencia profesional con másseguridad. En caso contrario, estás aprendiendo al ritmo que hemos pautado para poder afrontar losconocimientos del siguiente módulo.
Usar una estructura adecuada de ficheros y carpetas para un proyecto web, y enlazar bien los distintosficheros*.Uso de control de versiones con ramas para manejar un proyecto de código.
Tener el código perfectamente indentado*.Crear código HTML con sintaxis correcta, bien estructurado*.Usar etiquetas HTML semánticas adecuadas para cada pieza de contenido*.
Tener el código perfectamente indentado*.Crear código Sass con sintaxis correcta, bien estructurado*.Usar algunas características de Sass como variables, anidación y parciales.Usar código CSS que usa de forma intensiva selectores de clase. No usar selectores de etiqueta ni deid*.Usar selectores de clase en inglés*.Usar el modelo de caja de CSS de forma adecuada para especificar tamaño, relleno y márgenes*.Usar estilos de texto y fondo para distintos tipos de elementos.Usar flexbox de forma adecuada para organizar elemento en cajas flexibles*.
Usar media queries para que los diseños se ajusten a distintos tamaños de dispositivo*.Usar posicionamiento para emplazar elementos fijos y absolutos en la pantalla.Usar CSS grid para emplazar elementos usando una rejilla.Usar transiciones CSS para dotar de dinamismo a un proyecto web.
Haber resuelto las issues de la evaluación intermedia antes del inicio de la evaluación