Ruta gratuita de HTML, CSS y JavaScript

Primera etapa: contenido que funciona solo

Crea index.html con un encabezado, un párrafo de presentación y un enlace de contacto. Añade una lista breve de intereses o proyectos. Antes de aplicar estilos, abre la página y recórrela con teclado. Debes poder comprender quién se presenta y activar el enlace. Si la información depende de una posición en pantalla para entenderse, mejora el orden del HTML. Una tarjeta sin CSS no tiene por qué ser bonita, pero debe ser legible y coherente.

<article>
  <h1>Hola, soy Lara</h1>
  <p>Construyo pequeñas guías de viaje.</p>
  <a href="mailto:[email protected]">Escríbeme</a>
</article>

Comprueba la diferencia entre el texto visible del enlace y su atributo href. Cambiar uno no cambia automáticamente el otro. Ese detalle evita muchos enlaces cuyo rótulo promete una cosa y cuyo destino hace otra.

Segunda etapa: presentación adaptable

Crea styles.css y enlázalo desde el head. Empieza por el tamaño de letra, el espacio entre bloques y un ancho de lectura cómodo. Después añade una disposición que aproveche pantallas grandes sin comprimir el contenido en el teléfono. No cambies etiquetas HTML solo para conseguir un margen. Si desactivas la hoja de estilos, la tarjeta debe conservar el mismo orden de lectura y el enlace debe seguir funcionando.

Como prueba, abre la página a un ancho estrecho y a uno amplio. Mira si el título se parte de forma natural y si ningún control queda fuera de la pantalla. Si aparece desplazamiento horizontal, busca primero un ancho fijo, una imagen sin límite o un texto largo que no pueda partirse. Ajusta la presentación sin borrar información útil.

Tercera etapa: una respuesta observable

Añade un botón que cambie una frase de estado cuando se active. JavaScript puede localizar el botón, escuchar el clic y actualizar el texto. Usa un elemento visible para comunicar el cambio; no dependas solo de un color. Si el botón no hace nada, comprueba que el archivo script.js existe en la ruta indicada, que el código se carga después de crear los elementos y que el selector corresponde al atributo real del botón.

Termina con tres pruebas separadas: sin CSS la tarjeta se entiende, sin JavaScript el contenido principal sigue presente y con los tres archivos el botón produce un cambio que puedes describir. Guarda cada etapa como una copia para comparar. Esta ruta es gratuita y no necesita una cuenta: el avance se demuestra por archivos que puedes abrir y explicar, no por una barra de progreso privada.