Curso gratis de HTML y CSS

Construye primero la receta en HTML

Escribe un título que nombre la receta, un párrafo con el resultado esperado, una lista de ingredientes y una lista ordenada de pasos. Si añades una nota sobre alérgenos o sustituciones, colócala cerca de la parte a la que se refiere. No uses tablas solo para alinear dos columnas. El documento debe poder leerse de arriba abajo y responder a la pregunta práctica de quien cocina: qué necesito y qué hago después.

<main>
  <h1>Pan tostado con tomate</h1>
  <h2>Ingredientes</h2>
  <ul><li>Pan</li><li>Tomate</li></ul>
  <h2>Pasos</h2>
  <ol><li>Tostar el pan.</li><li>Añadir tomate.</li></ol>
</main>

Comprueba que los pasos mantienen su sentido si la hoja de estilos aún no existe. Lee solo los encabezados para ver si anuncian bien las partes. Si una instrucción esencial aparece únicamente en una fotografía, escríbela también en el texto.

Añade CSS para facilitar la lectura

Crea styles.css y enlázalo desde el documento. Elige un tamaño de texto cómodo, espacio entre secciones y una longitud de línea razonable. En una pantalla grande puedes distribuir ingredientes y pasos en áreas distintas, siempre que el orden del HTML siga siendo lógico. En una pantalla estrecha deja que vuelvan a una columna. Limita el ancho de las imágenes para evitar desplazamiento horizontal.

Prueba la página a un ancho cercano al de un teléfono y a otro de escritorio. Si los pasos se vuelven difíciles de seguir, ajusta espacio, contraste y jerarquía antes de añadir adornos. Un estilo sirve a la tarea de leer y cocinar; no debe ocultar información ni obligar a ampliar la página para ver un botón o una lista.

Revisa las dos capas por separado

Desactiva la hoja de estilos en las herramientas del navegador. Debes seguir encontrando título, ingredientes e instrucciones. Si una sección desaparece por completo, puede que su contenido se haya creado solo como decoración. Reactiva CSS y comprueba ahora el foco de los enlaces, la legibilidad del texto y los saltos de línea. Cambia una regla a la vez para ver qué efecto tiene.

Como ejercicio final, añade una variante de la receta y enlázala desde la primera página. Comprueba la ruta relativa y abre ambas desde la carpeta local. La diferencia entre HTML y CSS debe quedar clara: un archivo dice qué información existe y cómo se relaciona; el otro decide cómo distribuirla. Esa separación permite rediseñar sin reescribir la receta y mejorar el contenido sin desmontar el diseño.