HTML y CSS son los dos lenguajes con los que se hace cualquier página web: HTML dice qué es cada cosa y CSS, cómo se ve. Aquí tienes un curso desde cero, sin suponer que ya sabes programar, un editor para probar código en el navegador, las rarezas que más desconciertan, un test y ejemplos resueltos para tareas concretas. Cada ejemplo pasó por el validador del W3C y se probó en Chrome, Firefox y Safari.
Curso · 8 leccionesAprende HTML y CSS desde cero, en españolTu primera página, texto, enlaces e imágenes, semántica y accesibilidad, formularios, selectores y cascada, el modelo de caja, Flexbox y Grid, y diseño responsivo con un proyecto completo. Con resultados en vivo bajo cada ejemplo, esquemas y retos.Ir al curso → Editor en líneaPrueba HTML y CSS en el navegadorEscribe el HTML y el CSS y mira el resultado al momento, con vista de celular y de tableta. Sin instalar nada ni crear una cuenta.Abrir el editor → Rarezas · 14 casosLo que desconcierta de CSSMárgenes que se escapan, el hueco bajo las imágenes, un z-index de 9999 que pierde, height: 100% que no hace nada, un párrafo que se cierra solo… Por qué pasa y cómo evitarlo.Ver las rarezas → Test · 24 preguntas¿Qué se ve?De qué color sale un texto, cuánto mide una caja, cuántas columnas caben. Con la nota, los aciertos por lección y la explicación de cada respuesta.Hacer el test →Colocar y diseñar
- Centrar un elemento: cinco formasCinco formas de centrar con CSS, en horizontal y en vertical: Flexbox, Grid con place-items, margin auto, text-align y position absolute, con cuándo…
- Tarjetas de la misma alturaCómo hacer una fila de tarjetas con CSS Grid y Flexbox: todas de la misma altura, la imagen recortada al mismo tamaño y el botón alineado abajo…
- Galería de imágenes con GridUna galería de fotos con CSS Grid que pone tantas columnas como quepan, con miniaturas cuadradas recortadas con aspect-ratio y object-fit, y la…
- Pie de página siempre abajoCómo hacer que el pie de página quede al fondo de la ventana aunque haya poco contenido, con tres líneas de CSS Grid y min-height: 100dvh, y la…
Componentes sin JavaScript
- Menú responsive sin JavaScriptUn menú de navegación que en el celular se abre con un botón y en la PC se muestra en fila, hecho solo con HTML y CSS: el atributo popover, Flexbox y…
- Acordeón con detailsCómo hacer un acordeón de preguntas frecuentes solo con HTML: details y summary, el atributo name para que se abra uno a la vez, y el estilo del…
- Ventana modal con dialogCómo hacer una ventana modal con el elemento dialog de HTML: showModal, el fondo con ::backdrop, cerrar con Esc, el foco atrapado y la respuesta con…
- Formulario de contacto con validaciónUn formulario de contacto completo en HTML y CSS: etiquetas, autocomplete, validación del navegador con required y pattern, errores con…
Detalles que se notan
- Modo oscuro con variables y un interruptorCómo añadir modo oscuro a una página con CSS: variables, la media query prefers-color-scheme, color-scheme para los controles y un interruptor sin…
- Animaciones y transicionesCómo animar con CSS: transition para pasar de un estado a otro, @keyframes y animation para animaciones que se repiten, qué propiedades animar y cómo…
- Imágenes responsivas: srcset y pictureCómo servir a cada pantalla la imagen del tamaño justo con srcset y sizes, cambiar de formato o de recorte con picture, y evitar saltos con width…
- Tabla de datos accesibleCómo hacer una tabla de datos en HTML que se entienda con un lector de pantalla y no rompa la página en el celular: caption, thead, th con scope…
¿Ya te mueves bien con HTML y CSS? El siguiente paso es el curso de JavaScript, para que tus páginas hagan cosas, y después el de TypeScript.
Todo el HTML de la sección pasó por el Nu Html Checker del W3C y cada resultado se pintó y se midió en Chromium, Firefox y WebKit (los motores de Chrome, Firefox y Safari) antes de publicarse. Logotipos de HTML5 (W3C) y CSS3 (Rudloff) en la imagen de la página: Wikimedia Commons, CC BY 3.0.