Proyectos HTML y CSS para practicar

Proyecto uno: ficha de receta

El archivo debe mostrar nombre de la receta, ingredientes, pasos y una nota que ayude a decidir si se puede preparar. Usa una lista sin orden para ingredientes y una ordenada para pasos. Si incluyes una fotografía, añade una alternativa textual apropiada y limita su ancho para que no desplace el contenido fuera de la pantalla. El resultado esperado es que alguien pueda consultar la lista mientras cocina sin tener que adivinar el siguiente paso.

Una variante consiste en añadir una segunda receta y enlazar ambas. Comprueba que los enlaces funcionan desde los archivos locales. Desactiva CSS: si el orden de ingredientes y pasos sigue claro, la estructura está haciendo su trabajo. Si una instrucción solo aparece dentro de una imagen decorativa, escríbela también como texto.

Proyecto dos: una página de evento

La tarea del visitante es encontrar fecha, lugar y programa. Coloca esos datos cerca del comienzo y usa encabezados para separar el programa de la información práctica. Añade un enlace de contacto cuyo texto explique qué ocurre al activarlo. Puedes usar CSS para crear una jerarquía visual, pero no escondas fecha o ubicación en una imagen que no se pueda seleccionar o leer con tecnologías de apoyo.

<h1>Taller de páginas web</h1>
<p>Sábado, 10:00. Biblioteca del barrio.</p>
<h2>Programa</h2>
<ol><li>Crear un archivo.</li><li>Probarlo.</li></ol>

Prueba el proyecto en un teléfono y aumenta el tamaño de la letra. Pide a alguien que localice la hora en menos de unos segundos. Si necesita leer todo el texto, mueve o reformula la información antes de añadir un color más llamativo.

Proyecto tres: mini guía navegable

Escoge un proceso de tres pasos que conozcas bien. Crea una página inicial con un resumen y tres secciones, o una página por paso. Usa títulos descriptivos y enlaces que permitan ir al siguiente punto y volver. El entregable debe poder recorrerse con teclado. Si usas varias páginas, revisa cada ruta desde el archivo donde aparece: una ruta relativa se calcula desde su ubicación, no desde una raíz imaginaria del proyecto.

Como revisión común de los tres retos, verifica que la estructura tenga sentido sin CSS, que no haya desplazamiento horizontal, que todos los enlaces lleven a un destino real y que las imágenes informativas tengan alternativa. Enseña cada proyecto a alguien con una tarea concreta. Su dificultad para encontrar un ingrediente, una fecha o un paso es evidencia para mejorar el contenido y la navegación, no una razón para añadir más efectos visuales.