Empezar por el significado y la estructura
HTML no consiste solo en colocar texto en pantalla. Los encabezados, las regiones, los enlaces, las listas y los formularios comunican a las personas y a los navegadores cómo se organiza una página. Una estructura bien pensada facilita navegar, mantener y ampliar el contenido.
Adaptar el diseño a cada pantalla
CSS transforma esa estructura en una experiencia visual. Practicarás espaciado, jerarquía y diseño adaptable para que la página siga siendo legible tanto en un teléfono como en una pantalla grande. No se trata de encoger una composición de escritorio, sino de permitir que el contenido se adapte con naturalidad.
Añadir comportamiento sin perder claridad
Los fundamentos de JavaScript introducen la interacción: responder a entradas, actualizar la interfaz y conectar el comportamiento con el contenido. La accesibilidad y el SEO se convierten después en comprobaciones prácticas: ¿se puede navegar la página y entender su estructura? La etapa une estas bases en páginas limpias y adaptables.
Del concepto al código funcional
Estos fragmentos muestran cómo aparecen en proyectos reales los conceptos de cada nivel. Son puntos de partida para leer, cuestionar, adaptar y probar; no código para copiar sin entenderlo.
Dar significado a la estructura
La página usa una región principal, una jerarquía de encabezados y una lista real. La cuadrícula CSS combina minmax() y auto-fit para reorganizar las tarjetas según el espacio disponible.
<main class="program-page">
<section class="intro" aria-labelledby="page-title">
<p class="eyebrow">Community learning</p>
<h1 id="page-title">Build your first web project</h1>
<p>Learn by making a page people can actually use.</p>
<a class="button" href="#apply">Explore the program</a>
</section>
<section aria-labelledby="outcomes-title">
<h2 id="outcomes-title">What you will practise</h2>
<ul class="outcomes">
<li>Structure content with HTML</li>
<li>Shape a responsive layout with CSS</li>
<li>Add useful behavior with JavaScript</li>
</ul>
</section>
</main>
<style>
.outcomes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
</style>Crear una interacción accesible
El botón controla su respuesta y comunica el estado mediante aria-expanded. El botón nativo funciona con teclado; JavaScript actualiza tanto la respuesta visible como el estado anunciado a tecnologías de asistencia.
const questions = document.querySelectorAll("[data-faq]");
questions.forEach((question) => {
const button = question.querySelector("button");
const answer = question.querySelector("[data-answer]");
button.addEventListener("click", () => {
const isOpen = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!isOpen));
answer.hidden = isOpen;
});
});Léelo y después adáptaloCambia un requisito, predice el resultado y ejecuta el código para comprobarlo. En la revisión, explica la decisión tomada y una mejora que harías después.