🧱 Aprende HTML y CSS

Aprende HTML y CSS desde cero, paso a paso

Este curso está pensado para empezar sin saber absolutamente nada de programación, ni de informática en general. No necesitas experiencia previa: solo un ordenador y ganas de ir probando cosas. Vamos a avanzar muy poquito a poco, explicando cada detalle: primero entendemos una idea muy sencilla, luego la practicamos en un editor de código de verdad, y al final la usamos en las dos actividades finales.

Empezar por el módulo 0 → Ver las actividades
Tu progreso 0 / 11 lecciones

¿Cómo funciona este curso?

Piensa en una página web como una casa. El HTML son los ladrillos y las habitaciones: define qué hay y dónde (un título, un párrafo, una foto, un botón). El CSS es la pintura, los muebles y la decoración: define cómo se ve todo eso. En este curso primero construimos con HTML y después decoramos con CSS.

Cada módulo tiene la misma estructura para que nunca te pierdas:

  • Una explicación muy sencilla, con ejemplos de la vida real
  • Código de ejemplo que puedes leer con calma
  • Un mini-editor interactivo donde tocas el código y ves el resultado al instante
  • Un pequeño ejercicio para practicar tú solo/a
Consejo

No hace falta que memorices nada. Los profesionales del desarrollo web consultan referencias todo el tiempo. Lo importante es que entiendas para qué sirve cada cosa y sepas dónde buscarla.

Módulos del curso

Están agrupados en dos bloques, como en el menú lateral. Empieza siempre por "Primeros pasos": el segundo bloque se apoya en lo que aprendes ahí.

🧩 Primeros pasos — módulos 0 a 5
Módulo 0

Bienvenida y herramientas

El editor de código, el inspector del navegador, el validador de HTML y Figma.

 Módulo 1

Esqueleto de una página HTML

Las piezas mínimas que necesita todo documento HTML para funcionar.

 Módulo 2

Títulos, párrafos y énfasis

Encabezados h1-h3, párrafos, texto en negrita (strong) y en cursiva (em).

 Módulo 3

Listas

Listas numeradas (ol) y listas con viñetas (ul).

 Módulo 4

Imágenes y enlaces

Cómo mostrar una foto y cómo llevar a la gente a otra página.

 Módulo 5

Tipografías y fuentes

Una fuente instalada en tu ordenador y otra traída de Google Fonts.
🎨 Diseño con cajas — módulos 6 a 8
Módulo 6

Divs, bordes y fondos

Cómo dividir la página en secciones y organizarlas en filas y columnas.

 Módulo 7

Formularios (intro)

Campos de texto, botones y cómo se recoge información del usuario.

 Módulo 8

Citas, abreviaturas y más

Citas en bloque y en línea, listas de descripción, abreviaturas, contacto y fechas.

Las dos actividades finales

Todo lo que aprendas en los módulos lo vas a aplicar aquí:

📄 Actividad 1 — index.html

Tu primera página web: la página de inicio de un curso online (usando como inspiración la home de Domestika). Practicarás la estructura básica de HTML y empezarás a dividir la página con <div>.

Encabezados h1, h2, h3 Párrafos em / strong ol / ul img a 2 fuentes distintas border / background-color Intro a formularios
Ver la guía paso a paso →

📰 Actividad 2 — blog.html

Un paso más: la página de noticias/blog de un curso online (inspirada en el blog de Domestika), organizada en filas y columnas con margin y padding.

Todo lo de la Actividad 1 blockquote / q dl / dt / dd abbr address time margin / padding
Ver la guía paso a paso →

Referencia rápida

Dos páginas para consultar siempre que lo necesites, con las etiquetas HTML y las propiedades CSS más importantes explicadas una a una, con ejemplos. No hace falta seguirlas en orden: son un diccionario, no una lección.

🏷️ Referencia

Etiquetas HTML

Todas las etiquetas del curso, más algunas nuevas (b, i, span, table, section...), explicadas con ejemplos.

 🎨 Referencia

Propiedades CSS

Color, tipografía, el modelo de caja, flex y algún detalle extra como sombras y transiciones.