PopularRecorrido
Aprende HTML
Un curso de HTML online, interactivo y gratis. Escribes HTML en cada lección —etiquetas, atributos, formularios, enlaces, imágenes y la estructura de una página web real— con vista previa en vivo mientras tecleas y un certificado gratis al terminar.
256,507+ codders inscritos
- Apto para principiantes
Ayuda de codificación con IA
Lecciones interactivas prácticas
Narración de audio en cada lección
Cuestionarios para poner a prueba tu conocimiento
Certificado gratuito de finalización
Programa
Sección 1
Fundamentals
Empezar secciónEmpezarExpandirContraerLearn the core structure and syntax to create web pages from scratchFundamentos de HTML
5 lecciones531- 01¿Qué es HTML?Reto
- 02Estructura básica de HTMLRetoQuiz
- 03Etiquetas y elementosRetoQuiz
- 04Anidamiento y cierre de etiquetasRetoQuiz
- 05Comentarios en HTMLRetoQuiz
Texto y formato
6 lecciones1135- 01EncabezadosRetoMaestríaQuiz
- 02PárrafosRetoMaestríaQuiz
- 03Saltos de líneaRetoMaestríaQuiz
- 04Texto en negrita y cursivaRetoMaestríaQuiz
- 05Negrita y cursiva de nuevoRetoMaestríaQuiz
- 06Resumen - FormatoReto
Trabajando con listas
4 lecciones721- 01Lista desordenadaRetoMaestríaQuiz
- 02Lista ordenadaRetoMaestríaQuiz
- 03Listas anidadasRetoMaestríaQuiz
- 04Resumen - ListasReto
Tarjeta de receta
Proyecto4 lecciones1- 01Descripción general del proyectoReto
- 02Título y descripción de la recetaProyecto
- 03IngredientesProyecto
- 04PasosProyecto
Agregar contenido
5 lecciones837- 01Atributos HTMLQuiz
- 02EnlacesRetoMaestríaQuiz
- 03Enlaces a una nueva páginaRetoMaestríaQuiz
- 04ImágenesRetoMaestríaQuiz
- 05Atributos de imagenRetoMaestríaQuiz
Diseño de página
5 lecciones930- 01DivisionesRetoMaestríaQuiz
- 02Spans en líneaRetoMaestríaQuiz
- 03Etiquetas semánticasRetoMaestríaQuiz
- 04Secciones y artículosRetoMaestríaQuiz
- 05Repaso - DiseñoReto
Página de Perfil Personal
Proyecto5 lecciones1- 01Descripción General del ProyectoReto
- 02Sección de EncabezadoProyecto
- 03Foto de PerfilProyecto
- 04Sección Sobre MíProyecto
- 05Enlaces a Redes SocialesProyecto
Formularios e Inputs Parte 1
6 lecciones936- 01Conceptos básicos de formulariosQuiz
- 02Inputs de textoRetoMaestríaQuiz
- 03Atributos de los inputsRetoMaestríaQuiz
- 04Campo de contraseñaRetoMaestríaQuiz
- 05Etiquetas para inputsRetoMaestríaQuiz
- 06Resumen - Formulario básicoReto
Formularios e Inputs Parte 2
7 lecciones1239- 01Radio buttonsRetoMaestríaQuiz
- 02CheckboxesRetoMaestríaQuiz
- 03DropdownsRetoMaestríaQuiz
- 04BotonesRetoMaestríaQuiz
- 05Botones en formulariosRetoMaestríaQuiz
- 06Repaso - Formularios #1Reto
- 07Repaso - Formularios #2Reto
Tablas
4 lecciones723- 01Conceptos básicos de tablasRetoMaestríaQuiz
- 02Añadir leyendasRetoMaestríaQuiz
- 03Combinar filas y columnasRetoMaestríaQuiz
- 04Resumen - TablasReto
Página de registro de eventos
Proyecto5 lecciones1- 01Descripción general del proyectoReto
- 02Sección del encabezadoProyecto
- 03Sección de detalles del eventoProyecto
- 04Formulario de registroProyecto
- 05Sección del pie de páginaProyecto
Desafíos finales
4 lecciones4- 01Tarjeta de perfil sencillaReto
- 02Tarjeta de invitación a eventoReto
- 03Página de artículo sencillaReto
- 04Lista de libros favoritosReto
Sección 2
Styling with CSS
Empezar secciónEmpezarExpandirContraerBring your web pages to life with colors, layouts, and stylesIntroducción
5 lecciones540- 01¿Qué es CSS?RetoQuiz
- 02Sintaxis de CSSRetoQuiz
- 03Comentarios en CSSQuiz
- 04La etiqueta HeadRetoQuiz
- 05La etiqueta TitleRetoMaestríaQuiz
Añadir CSS
4 lecciones725- 01CSS en líneaRetoMaestríaQuiz
- 02CSS internoRetoMaestríaQuiz
- 03CSS externoRetoMaestríaQuiz
- 04Desafío de estilos básicosReto
Selectores básicos
7 lecciones1247- 01Introducción a los selectoresRetoQuiz
- 02Selector de tipoRetoMaestríaQuiz
- 03Selector de claseRetoMaestríaQuiz
- 04Selector de IDRetoMaestríaQuiz
- 05Selectores de grupoRetoMaestríaQuiz
- 06Selector universalRetoMaestríaQuiz
- 07Desafío de selecciónReto
Fundamentos del texto
8 lecciones1450- 01Color de textoRetoMaestríaQuiz
- 02Familia de fuentesRetoMaestríaQuiz
- 03Tamaño de fuenteRetoMaestríaQuiz
- 04Grosor de fuenteRetoMaestríaQuiz
- 05Alineación de textoRetoMaestríaQuiz
- 06Decoración de textoRetoMaestríaQuiz
- 07Desafío de repaso #1Reto
- 08Desafío de repaso #2Reto
Colores y fondos
5 lecciones834- 01Color de fondoRetoMaestríaQuiz
- 02Colores HEXRetoMaestríaQuiz
- 03Colores RGBRetoMaestríaQuiz
- 04Transparencia con RGBARetoQuiz
- 05Desafío de repaso #1Reto
Menú de cafetería
Proyecto3 lecciones1- 01Fundamentos de tipografíaReto
- 02Estilo de textoProyecto
- 03Color y fondosProyecto
Modelo de caja - Parte 1
6 lecciones943- 01¿Qué es el modelo de caja?Quiz
- 02PaddingRetoMaestríaQuiz
- 03MárgenesRetoMaestríaQuiz
- 04BordesRetoMaestríaQuiz
- 05Ancho y altoRetoMaestríaQuiz
- 06Desafío de repasoReto
Modelo de caja - Parte 2
5 lecciones834- 01Box SizingRetoQuiz
- 02Border RadiusRetoMaestríaQuiz
- 03OverflowRetoMaestríaQuiz
- 04Box ShadowRetoMaestríaQuiz
- 05Desafío de repasoReto
Flex Box
6 lecciones943- 01¿Qué es Flex Box?RetoQuiz
- 02Flex DirectionRetoMaestríaQuiz
- 03Justify ContentRetoMaestríaQuiz
- 04Align ItemsRetoMaestríaQuiz
- 05El centrado perfectoRetoQuiz
- 06Desafío de Flex BoxReto
Formulario de inicio de sesión
Proyecto4 lecciones1- 01CuerpoReto
- 02Contenedor del formularioProyecto
- 03InputProyecto
- 04BotónProyecto
Técnicas de maquetación
7 lecciones1152- 01Elementos de bloque vs. en líneaRetoQuiz
- 02Conceptos básicos de posicionamientoRetoMaestríaQuiz
- 03Posicionamiento relativoRetoMaestríaQuiz
- 04Posicionamiento absolutoRetoMaestríaQuiz
- 05Posicionamiento fijoRetoMaestríaQuiz
- 06Conceptos básicos de Z-IndexRetoQuiz
- 07Desafío de repasoReto
Fundamentos de Diseño Responsivo
6 lecciones1052- 01¿Qué es el Diseño Responsivo?RetoQuiz
- 02Etiqueta Meta ViewportRetoQuiz
- 03Diseños FluidosRetoMaestríaQuiz
- 04Unidades de ViewportRetoMaestríaQuiz
- 05Fundamentos de Media QueriesRetoMaestríaQuiz
- 06Imágenes FlexiblesRetoMaestríaQuiz
Página web de Tonga
Proyecto6 lecciones1- 01Menú de navegaciónReto
- 02Encabezado de bienvenidaProyecto
- 03Sección "Acerca de"Proyecto
- 04Sección de contactoProyecto
- 05Etiqueta ViewportProyecto
- 06Media QueryProyecto
Desafíos finales
4 lecciones4- 01Organizar elementosReto
- 02Lista de películasReto
- 03Tarjeta de invitación de bodaReto
- 04Notificación flotanteReto
Sección 3
CSS Mastery
Empezar secciónEmpezarExpandirContraerTake you css skills to the next level!Dominio de selectores – Combinación
6 lecciones539- 01IntroducciónQuiz
- 02Selector de descendienteRetoQuiz
- 03Selector de hijoRetoQuiz
- 04Selector de hermano adyacenteRetoQuiz
- 05Selector de hermano generalRetoQuiz
- 06Desafío de repasoReto
Pseudoclases interactivas
5 lecciones431- 01PseudoclasesQuiz
- 02Efectos de hoverRetoQuiz
- 03Efectos de focusRetoQuiz
- 04Estilos de estado activoRetoQuiz
- 05Desafío de repasoReto
Pseudoclases estructurales
5 lecciones432- 01Pseudoclases estructuralesQuiz
- 02Seleccionando el primer hijoRetoQuiz
- 03Seleccionando el último hijoRetoQuiz
- 04El poder de los patrones: Usando nth-childRetoQuiz
- 05Desafío de repasoReto
Proyecto de menú desplegable
4 lecciones4- 01Añadir el submenúReto
- 02Mostrar el submenúReto
- 03Más estilosReto
- 04Input y botónReto
Efectos visuales
5 lecciones536- 01DegradadosRetoQuiz
- 02Filtros CSSRetoQuiz
- 03TransformacionesRetoQuiz
- 04Transiciones y efectos hoverRetoQuiz
- 05Desafío de repasoReto
Landing Page
5 lecciones5- 01Dar estilo a la sección del encabezadoReto
- 02Dar estilo al botónReto
- 03Diseño de la secciónReto
- 04Diseño de tarjetasReto
- 05Añadir los toques finalesReto
Construye con CSS Grid
4 lecciones426- 01Conceptos básicos de GridRetoQuiz
- 02Posicionamiento de elementos en Grid-rowRetoQuiz
- 03Áreas con nombreRetoQuiz
- 04Desafío de repasoReto
Sitio web de Flavor Fiesta
4 lecciones4- 01Configuración del gridReto
- 02EncabezadoReto
- 03La parte principalReto
- 04Pie de páginaReto
Desafíos finales
5 lecciones5- 01Resaltar menú activoReto
- 02Filas de tabla tipo cebraReto
- 03Efecto hover en botonesReto
- 04Diseño de tarjetas en GridReto
- 05Imagen Hero desenfocadaReto
Sección 4
Practical Frontend
Empezar secciónEmpezarExpandirContraerCombine structure and style to design complete, responsive web pagesVariables
5 lecciones432- 01VariablesQuiz
- 02Uso de variables CSSRetoQuiz
- 03Variables para Design TokensRetoQuiz
- 04Variables localesRetoQuiz
- 05Desafío de repasoReto
Estrategia Mobile-First
6 lecciones643- 01Qué significa “mobile-first”RetoQuiz
- 02Tipografía Mobile-FirstRetoQuiz
- 03Navegación Mobile-FirstRetoQuiz
- 04Imágenes Mobile-FirstRetoQuiz
- 05Formularios Mobile-FirstRetoQuiz
- 06Desafío de repasoReto
Tematización y estilos visuales
5 lecciones535- 01Tematización en CSSRetoQuiz
- 02Conceptos básicos del modo oscuro/claroRetoQuiz
- 03Colores de acento y resaltadoRetoQuiz
- 04Tematización de la tipografíaRetoQuiz
- 05Desafío de repasoReto
Deportes extremos
3 lecciones3- 01VariablesReto
- 02Mobile-FirstReto
- 03TematizaciónReto
Componentes de UI
6 lecciones642- 01Menú desplegableRetoQuiz
- 02PestañasRetoQuiz
- 03BadgesRetoQuiz
- 04TooltipsRetoQuiz
- 05Banners de notificaciónRetoQuiz
- 06Desafío de repasoReto
Patrones responsivos
6 lecciones645- 01Diseño Holy GrailRetoQuiz
- 02Diseño de cuadrícula de tarjetasRetoQuiz
- 03Diseño de barra lateral + contenidoRetoQuiz
- 04Diseño de pantalla divididaRetoQuiz
- 05Header y Footer stickyRetoQuiz
- 06Desafío de repasoReto
Desafíos finales
4 lecciones4- 01Tarjeta de perfilReto
- 02Cuadrícula de galería de chocolatesReto
- 03Siete maravillasReto
- 04Nuevas siete maravillasReto
Sección 5
JavaScript in Action
Empezar secciónEmpezarExpandirContraerExplore how javascript is used with html and cssInteractividad/Componentes de UI
4 lecciones433- 01PestañasRetoQuiz
- 02Acordeón (expandir/contraer)RetoQuiz
- 03Modal (abrir/cerrar)RetoQuiz
- 04Menú desplegableRetoQuiz
Formularios y validación
3 lecciones325- 01Validación de entradasRetoQuiz
- 02Mensajes de error personalizadosRetoQuiz
- 03Botones de envíoRetoQuiz
Notificaciones y feedback
3 lecciones327- 01Mensaje toastRetoQuiz
- 02Banners descartablesRetoQuiz
- 03Indicadores de cargaRetoQuiz
Formulario con Notificación Toast
2 lecciones2- 01Mostrar el mensaje ToastReto
- 02Ocultar el mensaje ToastReto
Navegación
3 lecciones329- 01Alternar menú hamburguesa móvilRetoQuiz
- 02Navegación lateral plegableRetoQuiz
- 03Menús desplegablesRetoQuiz
Temas y personalización
2 lecciones217- 01Temas claro y oscuroRetoQuiz
- 02Guardar preferencia de temaRetoQuiz
Animaciones y efectos
3 lecciones327- 01Transiciones CSSRetoQuiz
- 02Animar elementos al hacer scrollRetoQuiz
- 03Animaciones al hacer clic en botonesRetoQuiz
Navegación animada
3 lecciones36- 01VariablesRetoQuiz
- 02Event listenersReto
- 03Transición CSSReto
Desafíos finales
4 lecciones4- 01Acordeón de preguntas frecuentes interactivoReto
- 02Formulario de inicio de sesiónReto
- 03Barra de navegación responsiveReto
- 04Página de blog con temaReto
Por qué aprender HTML con Coddy
- Escribe HTML en tu navegador y ve la página renderizada al lado. Sin instalar ningún editor, sin configuraciones. Cada cambio que haces en el código HTML aparece al instante, así el ciclo de feedback es corto.
- HTML moderno y semántico: encabezados, listas, enlaces, imágenes, tablas, formularios y etiquetas semánticas como
<header>,<nav>,<main>,<section>,<footer>. El HTML que realmente usarías para construir un sitio web de verdad. - Las pistas de IA te ayudan a corregir errores de HTML —etiquetas sin cerrar, sintaxis rota en los atributos, descuidos de accesibilidad— sin revelarte la respuesta, para que los hábitos al escribir HTML se queden contigo.
- Certificado gratis de HTML al terminar. Un primer paso creíble para el desarrollo web, que combina de forma natural con los cursos de CSS y JavaScript.
Preguntas frecuentes sobre aprender HTML
¿HTML es fácil de aprender?
HTML es de las cosas más fáciles que puedes aprender en tecnología. Es un lenguaje de marcado, no un lenguaje de programación: estás etiquetando piezas de contenido (encabezados, párrafos, enlaces, imágenes) en lugar de escribir lógica. La mayoría de los principiantes arman su primera página web real dentro de la primera hora.
¿Cuánto tiempo se tarda en aprender HTML?
Los fundamentos de HTML suelen aprenderse en una o dos semanas de práctica diaria. Para sentirte cómodo creando proyectos reales, reserva de uno a tres meses según tu ritmo y tu experiencia previa.
¿Debería aprender HTML antes que CSS y JavaScript?
Sí. HTML define la estructura de una página; CSS controla cómo se ve; JavaScript la vuelve interactiva. Aprender HTML primero te da algo concreto que luego puedes estilizar y animar. El curso de HTML es corto a propósito, así puedes avanzar rápido a CSS y JS.
¿HTML es un lenguaje de programación?
Estrictamente hablando, no. HTML es un lenguaje de marcado que se usa para describir la estructura del contenido web. Por sí solo no tiene variables, condicionales ni bucles. La programación real de una página web viene de JavaScript, que se cubre en un curso aparte.
¿Puedo aprender HTML online de forma gratuita?
Sí. El curso interactivo de HTML es gratis — lecciones, ejercicios de código, una vista previa de HTML en vivo y un certificado. Todo corre en el navegador, así que no necesitas instalar ningún editor ni herramientas para empezar.
¿Recibo un certificado al terminar el curso de HTML?
Sí. Al terminar el curso de HTML obtienes un certificado de finalización gratuito. Una prueba verificable que puedes agregar a tu currículum o compartir en LinkedIn, normalmente como un paso hacia un portafolio más completo de HTML, CSS y JavaScript.
