RECETAS - EJERCICIO EN CLASE EN GRUPO / INDIVIDUAL

 

PROYECTO: PÁGINA DE "RECETAS FAVORITAS"

 

CLIC AQUÍ PARA VER EJEMPLO

ACTIVIDAD EN CLASE

Descripción:

Los estudiantes crearán una página web simple que muestre una lista de sus recetas favoritas (o recetas inventadas). Podrán agregar y eliminar etiquetas HTML según sea necesario, pero se limitarán a las etiquetas ya vistas en el proyecto anterior y no podrán usar nuevas propiedades CSS y obviamente no se puede usar la AI, debe apoyarse en lo visto en el proyecto del examen.

Instrucciones

Estructura Básica (obligatoria):

·         La página debe tener un encabezado principal (<h1>) con el título "Mis Recetas Favoritas" (o un título similar).

·         Debe haber al menos tres recetas.

·         Cada receta debe tener:

·         Un título (usando <h1>, <h2>, o <h3> - pueden elegir el nivel de encabezado que consideren apropiado).

·         Una imagen de la comida (pueden usar URLs de imágenes de internet). Deben usar la etiqueta <img>.

·         Una breve descripción de la receta (usando uno o más párrafos <p>).

·         Una lista de ingredientes dentro de un <div> contenedor.

·         Libertad de Estructura:

·         Pueden usar tantos <div> como necesiten para organizar el contenido.

·         Pueden anidar <div> dentro de otros <div>.

·         Pueden repetir las etiquetas <h1> - <h6>, <img>, <p>, <a> tantas veces como sea necesario.

·         Pueden elegir el orden de los elementos dentro de cada receta (imagen primero, luego título, etc., o cualquier otra combinación).

·         Estilo (CSS - Restricciones Importantes):

·         Solo pueden usar las propiedades CSS vistas en el proyecto anterior. Esto incluye:

§  font-family (solo 'Poppins' y 'Open Sans') 

§  font-size

§  color

§  background-color 

§  margin 

§  padding 

§  text-align 

§  border 

§  border-radius 

§  width 

§  height 

§  display (solo los valores usados previamente, como inline-block) 

§  max-width

§  text-decoration (solo para quitar el subrayado de los "enlaces" de ingredientes)

§  :hover (solo para los "enlaces" si lo desean).

·         Deben reutilizar y adaptar las clases CSS del proyecto anterior. Pueden cambiar los nombres de las clases, pero no pueden crear nuevas propiedades CSS. Por ejemplo, pueden renombrar .social-links a .ingredients-list, y .social-links a a .ingredient, pero deben usar las propiedades existentes dentro de esas clases.

·         Deben aplicar un background-color al body.

·         Deben justificar el contenido de las recetas que aparezcan centrados los ingredientes de cada receta

·         Contenido:

·         Las recetas no tienen que ser reales, pueden ser inventadas. Lo importante es la estructura y el estilo.

·         Las imágenes pueden ser de cualquier sitio web, siempre y cuando usen URLs directas.

Objetivos del Proyecto:

·         Flexibilidad Estructural: Practicar la creación de una estructura HTML más compleja usando un conjunto limitado de etiquetas.

·         Reutilización de CSS: Reforzar la habilidad de adaptar estilos CSS existentes a diferentes contextos.

·         Organización del Contenido: Aprender a estructurar información de manera lógica y visualmente atractiva.

·         Consolidación de Conceptos: Reforzar todos los conceptos de HTML y CSS del proyecto anterior en un nuevo contexto.

·         Creatividad Controlada: Fomentar la creatividad dentro de un marco de restricciones, lo que simula desafíos reales de desarrollo web.