Actividad 20: La Receta Perfecta: Diseñando la Jerarquía Tipográfica de tu Plato Favorito

Descripción de la actividad

Parte 1
Imagina que estás creando una página web elegante y fácil de leer para compartir tu . Queremos que los lectores puedan escanear rápidamente los ingredientes, seguir los pasos y apreciar el título del plato sin esfuerzo. Para lograrlo, usaremos los diferentes recursos para establecer la jerarquía , controlando cada aspecto del texto.
Instrucciones
El objetivo es maquetar la receta de «Galletas de Chocolate Caseras» (o cualquier otra que te guste) asegurando que cada bloque de contenido tenga un peso visual distinto y armónico.
Usaremos el recurso de las animaciones visto en el material Animacions d’entrada per a qualsevol element de les nostres publicacions para mejorar la legibilidad.
Tareas a realizar

HTML. Estructura el contenido de tu receta con los siguientes elementos para representar la jerarquía
Un <h1> para el (ej: «Galletas de Chocolate Caseras Perfectas»).
Un <p> para una de la receta.
Un <h2> para la sección «Ingredientes».
Una lista <ul> (o <ol>) para los .
Otro <h2> para la sección «Instrucciones» (o «Preparación»).
Una lista <ol> para los .
Un <blockquote> para un o una nota especial.
Un <footer> con un <p> para la autoría o derechos de autor.

CSS. Dentro de :root, define un conjunto de para controlar la tipografía de tu receta.
: El tamaño base de la fuente para tu html (ej: 16px). Este es el cimiento de todos tus rem.
: Define al menos dos (–font-recipe-title, –font-recipe-body) para diferenciar el título de la receta del cuerpo principal.

–font-size-h1: Para el título de la receta.
–font-size-h2: Para los encabezados de sección («Ingredientes», «Instrucciones»).
–font-size-body: Para el párrafo de descripción y los elementos de lista.
–font-size-blockquote: Para el consejo del chef.
–font-size-footer: Para el texto del pie de página.
: –font-weight-light, –font-weight-regular, –font-weight-bold.
–line-height-heading, –line-height-body.
–letter-spacing-heading, –letter-spacing-body.
: –color-text-dark, –color-text-light, –color-accent (quizás para el consejo del chef).


Usa las variables que definiste para estilizar cada elemento de tu receta (h1, p, h2, li, blockquote, footer p).

 Establece font-size: var(–base-font-size); en tu html para que los rem escalen correctamente.

Parte 2: Maquetarmeos la misma receta en una entrada de WordPress

CONTENIDO para maquetar

Galletas de Chocolate Caseras Perfectas
Estas galletas de chocolate son la definición de perfección: crujientes por fuera, suaves y masticables por dentro, ¡y llenas de trozos de chocolate derretido!
Ingredientes

•  
• 200g de mantequilla sin sal, a temperatura ambiente
• 150g de azúcar moreno
• 100g de azúcar blanco
• 2 huevos grandes
• 1 cucharadita de extracto de vainilla
• 300g de harina de trigo todo uso
• 1 cucharadita de bicarbonato de sodio
• 1/2 cucharadita de sal
• 300g de chips de chocolate (mezcla de chocolate con leche y chocolate negro)

Instrucciones
Precalienta el horno a 180°C (350°F). Cubre una bandeja para hornear con papel de horno.
En un bol grande, bate la mantequilla con el azúcar moreno y el azúcar blanco hasta obtener una mezcla suave y cremosa.
Incorpora los huevos uno a uno, batiendo bien después de cada adición. Agrega el extracto de vainilla.
En un bol aparte, mezcla la harina, el bicarbonato de sodio y la sal.
Añade gradualmente los ingredientes secos a la mezcla húmeda, batiendo a baja velocidad hasta que se combinen. No mezcles en exceso.
Incorpora los chips de chocolate con una espátula.
Forma bolas de masa del tamaño de una nuez y colócalas en la bandeja preparada, dejando espacio entre ellas.
Hornea durante 10-12 minutos, o hasta que los bordes estén ligeramente dorados y el centro siga blando.
Deja enfriar las galletas en la bandeja durante unos minutos antes de transferirlas a una rejilla para que se enfríen completamente.

«El secreto para unas galletas perfectas es no cocinarlas en exceso. ¡Un centro ligeramente suave es clave!»
© 2025 Recetas Caseras. Todos los derechos reservados.