adalab / modulo-1-evaluacion-final-noemiyuen

modulo-1-evaluacion-final-NOEMIYUEN created by GitHub Classroom

Módulo 1: Ejercicio de evaluación final

Alumna: Noemí Ho Fa Yuen Durán

Enunciado

El ejercicio consiste en desarrollar una página web de acuerdo a un diseño dado. Hay que resolver varios puntos:

• Usar Sass.
• Usar flexbox y CSS Grid.
• Usar media queries.
• Resolver algunas interacciones usando transiciones.

Maquetación

En primer lugar debéis realizar la maquetación sobre un diseño dado:

1. El botón de hamburguesa (en la esquina superior izquierda) debe estar fijo en la parte superior de la pantalla y no debe desaparecer al hacer scroll. El icono de la hamburguesa debe ser un enlace a la página de Adalab. Este menú de hamburguesa no desplega ningún submenú.
2. Primer módulo (Anonymous proxy): debe estar maquetado con flexbox y debe ocupar el alto de la ventana del navegador.
3. Segundo módulo (Looking Through A Window): se puede maquetar usando las propiedades de CSS que se deseen.
4. Tercer módulo (3 Reasons To Purchase): los 3 elementos del listado deben estar maquetados con CSS Grid en todos los tamaños de pantalla.
5. Cuarto módulo (footer): se debe maquetar usando flexbox. Todos los textos de la columna "ARTICLES" y todos los textos de la columna "TWITTER" deben ser enlaces a la página de Adalab.

Interacción

En total, hay varias interacciones que resolver:

1. El botón de flecha del módulo hero debe enlazar a la sección "3 Reasons To Purchase".
2. El botón de flecha del footer debe enlazar al inicio de la página.
3. Todos los links del pie deben ir a https://adalab.es.
4. En el hover de los botones ("Go" y "3 Reasons To Purchase") se debe incluir una transform que dejamos a vuestra elección (BONUS-> hacer la transform con transition, investigar la propiedad transition)
5. BONUS: hacer una pequeña animación en el botón del footer.(investigar la propiedad animate )

Maquetación

La fecha límite de entrega es:

-Martes, 11 de octubre a las 23:00h.

Solo debéis hacer commits y merges en la rama master de vuestro repositorio hasta la fecha límite. Si después del ejercicio queréis seguir trabajando sobre el ejercicio, lo podéis hacer en otra rama y no debéis mergearla hasta 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én a 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 lado de la descripción.

Normas

Este ejercicio está pensado para que lo realices de forma individual en clase, pero podrás consultar tus dudas con las profesoras y tus compañeras si lo consideras necesario. Ellas no te darán directamente la solución de tu duda, pero sí pistas para poder solucionarla. Aún facilitando la comunicación entre compañeras, durante la prueba 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 debes reforzar durante las siguientes semanas y cuáles dominas. Te recomendamos que te sientas cómoda con el ejercicio 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ás directamente a la re-evaluación del módulo. Tu objetivo no debería ser pasar la evaluación sino convertirte en programadora, 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 se asemenjará a una entrevista técnica: te pedirá que expliques las decisiones tomadas para realizarlo y te propondrá 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 cambios sobre tu código que no conoces a priori. Si evitas que otras compañeras te den pistas sobre la dinámica de feedback, podrás aprovecharlo como una práctica y pasar los nervios con la profesora en lugar de en tu primera entrevista de trabajo.

Al final tendrás un feedback sobre aspectos a destacar y a mejorar en tu ejercicio, y sabrás qué objetivos de aprendizaje has superado de los listados a continuación.

Criterios de evaluación

Vamos a listar los criterios de evaluación de este ejercicio. Si no superas al menos el 80% de estos criterios o no has superado algún criterio clave (marcados con asterisco *) te pediremos que realices una reevaluación con el fin de que termines el curso mejor preparada y enfrentes tu primera experiencia profesional con más seguridad. En caso contrario, estás aprendiendo al ritmo que hemos pautado para poder afrontar los conocimientos del siguiente módulo.

General

• Usar una estructura adecuada de ficheros y carpetas para un proyecto web, y enlazar bien los distintos ficheros*.
• Uso de control de versiones con ramas para manejar un proyecto de código.

General

• 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*.

CSS / Sass

• 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 de id*.
• 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.

Issues

• Haber resuelto las issues de la evaluación intermedia antes del inicio de la evaluación.

modulo-1-evaluacion-final-noemiyuen's Issues

Mejoras

Muy buen trabajo @noemiyuen!!!

Aquí tienes unos consejos para mejorar tu ejercicio:

• HTML > HEADER: Necesitamos al menos una etiqueta header.
• HTML > HAMBURGUESA: El menú de la hamburguesa debe tener un nav.
• HTML > MÓDULO 3 REASON: Debe haber un elemento con el texto "Ut sed metus".

Es posible que cuando corrijas uno de estos puntos, otros se corrijan solos, ya que unos dependen de otros.

Y recuerda algo muy importante:

• Escribe tu código en inglés.
• Escribe todos los ficheros y carpetas en inglés.
• Los commits también tienen que ser en inglés, empezando por un verbo en infinitivo.

Ánimo y si tienes cualquier duda avísame!!!

Con cada mejora que hagas, márcala como completada en este issue y su súbela a este repo.

Este issue ha sido creado automáticamente por ello puede tener algún error, si hay algo que no te encaja escribe por slack al coordinador de Adalab.

Para corregir el ejercicio buscamos determinadas palabras en el código para identificar las secciones. Por ejemplo buscamos Creando para buscar el título de la página. Si has escrito mal alguna palabra en el código es posible que te aparezcan aquí falsos errores.

Por favor no cierres este issue, ya lo haremos nosotros.