Construye la estructurade la web

HTML y CSS sin atajos: el modelo del navegador, layouts con Flexbox y Grid, CSS moderno, accesibilidad y rendimiento. La base sobre la que se construye cualquier interfaz.

Empezar

Acceso al curso completo, ejercicios y material de entrevista.

<!-- HTML semántico: la estructura habla sola -->
<article>
  <h1>Aprender la web</h1>
  <p>De cero a publicar.</p>
  <button popovertarget="info">Más</button>
</article>

→El lector de pantalla anuncia el artículo y su título

⧗Semántica = accesibilidad y SEO gratis

/* Grid responsive sin media queries */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

→Las columnas se adaptan solas al ancho disponible

⧗auto-fit + minmax: responsive sin breakpoints

/* Tema con variables y modo oscuro */
:root { --bg: oklch(98% 0 0); }
@media (prefers-color-scheme: dark) {
  :root { --bg: oklch(20% 0 0); }
}
body { background: var(--bg); }

→El fondo cambia según la preferencia del sistema

⧗Custom properties + oklch: theming moderno

Orientado a entrevistas

No solo aprendes HTML y CSS. Te preparas para que te contraten.

Banco orientado a la entrevista técnica frontend: preguntas reales sobre el modelo de caja, la cascada, Flexbox y Grid, los errores que delatan a un junior y retos de maquetación al estilo prueba en vivo.

Preguntas

Preguntas reales de entrevistas técnicas.

Errores comunes

Lo que delata a un junior frente al entrevistador.

Retos de debug

Maquetación rota al estilo prueba técnica.

Qué vas a aprender

Del primer <div> a publicar un sitio accesible y rápido

Qué pasa de verdad al cargar una web

Del cliente-servidor al DOM, el CSSOM y cómo el navegador pinta la página.

HTML semántico y accesible

Estructura, formularios, multimedia y un marcado que las máquinas entienden.

Layout con Flexbox y Grid

Cascada, caja, posicionamiento y maquetación moderna sin hacks.

Responsive y CSS moderno

Media y container queries, variables, animaciones y propiedades nuevas.

Accesibilidad, rendimiento y SEO

Core Web Vitals, WCAG, datos estructurados y carga optimizada.

De la idea al sitio publicado

Web Components, PWA, herramientas, depuración y despliegue real.