Curso de HTML y CSS para Frontend

Construí sitios web modernos con HTML y CSS

Al finalizar el curso vas a poder maquetar sitios web responsivos, aplicar estilos profesionales, crear componentes reutilizables y publicar tu primera landing page para tu portfolio. Todo en grupos reducidos de máximo 6 personas, con devoluciones constantes y bases firmes para continuar con JavaScript o React.

Métricas del curso

  • 150+

    8 clases en vivo (2 h cada una)

  • 10+

    Proyecto: Landing page completa y publicada

  • Grupos reducidos (máx. 6 personas por cohorte)

  • Certificado de finalización del curso de HTML y CSS

Inscripción a los cursos de programación

Elegí tu camino: frontend, backend o full stack. Inscribite en los cursos online en vivo y empezá a construir proyectos profesionales en grupos reducidos. Ver próximas fechas

No hay cohortes disponibles por el momento. Consultá por WhatsApp las próximas fechas para cursar programación.

Curso de HTML y CSS Nivel Inicial

Este curso está pensado para quienes quieren comenzar en el frontend construyendo sitios web modernos con HTML y CSS. Es una base sólida para luego pasar a JavaScript, React o Next.js. Vas a maquetar una landing page completa con diseño responsivo, componentes visuales y buenas prácticas de accesibilidad.

  • Personas sin experiencia previa que quieren iniciarse en el desarrollo web.
  • Perfiles en etapa inicial que necesitan base sólida antes de avanzar a JavaScript.
  • Diseñadores y UX/UI que desean convertir maquetas en código real.
  • Equipos que buscan estandarizar buenas prácticas de maquetación web.

MODALIDAD

¿Cómo vas a aprender HTML y CSS en este curso?

Aprendés maquetación web en clases online en vivo, construyendo una landing page real desde cero. Los grupos son de máximo 6 personas, con práctica desde la primera clase, correcciones personalizadas y seguimiento constante.

Clases en vivo orientadas a práctica

Construcción en tiempo real, dudas resueltas en el momento y revisión de tus entregables.

Clases en vivo del curso

Recursos de apoyo y ejemplos

Guías, sugerencias de diseño, snippets y componentes listos para reutilizar.

Contenido on demand del curso

Temario del Curso de HTML y CSS para Frontend

En este curso de HTML y CSS vas a dominar la maquetación web moderna, estructura semántica, CSS responsivo, tipografía, colores, flexbox, grid y componentes reutilizables. Construís una landing page profesional desde cero aplicando buenas prácticas de accesibilidad y diseño. Las clases son online en vivo, en grupos reducidos de máximo 6 personas, con práctica constante, correcciones y seguimiento en cada clase.

Fundamentos de la Web, HTML semántico

  • Estructura base: doctype, html/head/body

  • Etiquetas de texto, enlaces, listas, imágenes y atributos

  • Buenas prácticas de semántica y accesibilidad inicial

Estructura inicial de la landing page con etiquetas semánticas

CSS básico: selectores, colores y tipografía

  • Selectores, clases, IDs, herencia y especificidad

  • Variables CSS, tipografías web y escalas de tamaño

  • Sistema de colores, contraste y accesibilidad

Hoja de estilos principal con identidad visual del proyecto

Maquetación moderna con Flexbox

  • Ejes, alineación, espaciamiento y distribución

  • Layouts responsivos con flex y patrones comunes

  • Componentes reutilizables (navbar, cards, secciones)

Sección principal de la landing usando flexbox

Diseño avanzado con CSS Grid

  • Filas, columnas y áreas de maquetación

  • Grillas responsivas y autoajuste

  • Layout completo de página usando Grid

Maquetación del cuerpo de la landing con Grid

Responsive Design y Media Queries

  • Mobile-first, breakpoints y escalas fluidas

  • Optimización de imágenes y tamaños relativos

  • Buenas prácticas para navegabilidad en móviles

Ajuste responsivo completo para celulares y tablet

Animaciones, transiciones y microinteracciones

  • Transiciones, transform y opacity

  • Hover states, focos visibles y accesibilidad

  • Animaciones simples para mejorar experiencia

Microinteracciones en botones y elementos clave

Buenas prácticas y componentes UI

  • Pseudoclases y pseudoelementos

  • Patrones reutilizables y escalabilidad CSS

  • Cómo mantener una UI consistente

Componentes reutilizables: botones, tarjetas y secciones

Publicación y deploy del sitio

  • Optimización básica: tamaños, carga y lectura de CSS

  • Build y publicación con GitHub Pages / Netlify

  • Checklist de accesibilidad y performance inicial

Landing page publicada y lista para portfolio

Accesibilidad Web (A11y)

  • Uso correcto de roles y ARIA

  • Foco visible, navegación por teclado y lectores de pantalla

  • Texto alternativo, contraste y validación de accesibilidad

Checklist A11y aplicada a la landing final

Proyecto Final: Landing Web Profesional

  • Maquetación completa con HTML + CSS

  • Diseño responsivo, UI consistente y microinteracciones

  • Deploy final y preparación para portfolio

Landing page final publicada y lista para tu portfolio
Ilustración que resume los pilares del HTML5 moderno

Introducción a HTML5: Tus Primeros Pasos en el Desarrollo Web

En esta lección aprenderás la sintaxis básica y el uso correcto de etiquetas

Comenzar Lección
Guía de enlaces HTML
Representación visual de la sintaxis básica y el funcionamiento de la etiqueta ancla en HTML.

Arquitectura de Enlaces: El Sistema Nervioso de la Web

Aprende a enlazar recursos internos y externos gestionando correctamente las rutas y la experiencia de navegación

Comenzar Lección
Ejemplo visual de imágenes, favicons e iframes usados en HTML
Los elementos multimedia permiten enriquecer visualmente una página web y mejorar la experiencia del usuario.

Multimedia en HTML

Una web sin imágenes es difícil de comprender. En esta lección aprenderás a insertar contenido multimedia correctamente, cuidando la accesibilidad, el rendimiento y el posicionamiento en buscadores.

Comenzar Lección
Ejemplo de listas HTML ordenadas, desordenadas y anidadas
Las listas en HTML permiten organizar información relacionada de forma clara, jerárquica y accesible.

Listas en HTML

Las listas en HTML son fundamentales para estructurar información en la web. Se utilizan en menús de navegación, pasos secuenciales, características de productos y glosarios. En esta lección aprenderás qué tipos de listas existen, cuándo usar cada una y cómo anidarlas respetando la semántica del HTML.

Comenzar Lección
Interfaz de formulario moderno con validaciones y teclado móvil activo
Vista previa de interfaces de formularios optimizadas para validación en tiempo real y usabilidad móvil.

Formularios HTML5: La Guía Técnica Definitiva

Domina la captura de datos. Desde la configuración del servidor hasta la UX en móviles con teclados virtuales y validaciones sin JavaScript.

Comenzar Lección
Estructura de tabla HTML moderna
Ilustración de una cuadrícula de datos estructurada semánticamente.

Tablas en HTML: Dominando la Información Tabulada

Las tablas suelen confundir al principio porque se codifican 'hacia abajo' pero se visualizan 'hacia el lado'. En esta guía desmitificamos su estructura, aprendemos a fusionar celdas y descubrimos por qué son vitales para representar datos (y prohibidas para maquetar sitios).

Comenzar Lección
Ilustración abstracta de pinceles digitales pintando sobre una estructura de alambre
CSS actúa como la capa de presentación que viste y da vida a la estructura ósea del HTML.

Introducción a CSS: Sintaxis y Lógica Visual

El HTML define qué es el contenido, pero el CSS define cómo se ve. En este módulo desglosamos la sintaxis fundamental para que aprendas a hablar el lenguaje del diseño web, desde la estructura de una regla hasta la importancia de las unidades de medida.

Comenzar Lección
Gráfico de jerarquía y cascada en CSS
Ilustración técnica de un árbol DOM complejo con flujos de estilos descendentes.

Dominando la Jerarquía: El ADN de tus Estilos

Escribir CSS es fácil, pero mantenerlo es difícil si no entiendes las reglas del juego. En este módulo profundizamos en cómo el navegador decide qué estilo aplicar cuando hay conflictos y cómo aprovechar la 'genética' del código para escribir menos y lograr más.

Comenzar Lección
Ilustración esquemática conectando nodos HTML con reglas de estilo CSS
Los selectores son el mecanismo fundamental que permite al CSS 'apuntar' y dar estilo a la estructura HTML.

Selectores CSS: El Lenguaje de Vinculación

Antes de aprender sobre colores o márgenes, necesitas dominar cómo decirle al navegador 'a qué' aplicar esos estilos. Este módulo es la base de toda la arquitectura CSS, profundizando en la tríada esencial: Etiquetas, Clases e Identificadores.

Comenzar Lección
Composición de tipografías y paletas cromáticas en una interfaz digital
La tipografía abarca el 90% del diseño web. Controlar su estilo es fundamental para comunicar con eficacia.

Tipografía y Color: La Voz Visual de tu Web

El texto en la web no es solo información; es interfaz. En este módulo aprenderás a manipular la 'voz' de tu contenido mediante propiedades de color, familias tipográficas, pesos, decoraciones y las nuevas reglas modernas de maquetación de texto.

Comenzar Lección
Representación artística de capas de pintura digital sobre bloques estructurales
El color de fondo es la base sobre la que se construye el contraste y la jerarquía visual de cualquier interfaz.

Background-Color: Pintando la Caja

Cada elemento HTML es una caja rectangular. La propiedad background-color nos permite 'pintar' el interior de esa caja. En este módulo exploraremos los diferentes formatos de color, cómo manejar la opacidad y cómo interactúa el fondo con los bordes y el contenido.

Comenzar Lección
Representación abstracta de reglas de medición elásticas y fluidas
En la web moderna, el tamaño no es fijo; es una relación entre elementos y el entorno de visualización.

Unidades de Medida: La Matemática del Diseño Fluido

CSS ofrece una caja de herramientas métricas mucho más rica que los simples píxeles. En este módulo, desglosamos la tabla periódica de las unidades de medida, desde las relativas a la tipografía hasta las que reaccionan al tamaño de la pantalla, permitiéndote construir layouts a prueba de futuro.

Comenzar Lección
Composición artística de letras y glifos de diferentes familias tipográficas
La elección tipográfica define el carácter y la legibilidad de tu interfaz web.

Tipografías: Más allá de Arial y Times

El diseño web moderno exige una identidad visual única. En este módulo aprenderás a romper las limitaciones de las fuentes preinstaladas en el sistema operativo, implementando tipografías externas mediante archivos locales y servicios en la nube.

Comenzar Lección
Ilustración isométrica de un cubo desglosado en capas: núcleo, relleno, borde y margen
Comprender la anatomía de la caja es el requisito número uno para dejar de luchar contra CSS.

El Modelo de Caja: La Base de Todo

Para el navegador, tu sitio web no es una obra de arte, es una colección de cajas rectangulares. En este módulo exhaustivo, desglosamos la geometría del diseño web: desde las propiedades básicas de ancho y alto, pasando por la gestión del contenido que se desborda, hasta las técnicas profesionales para evitar cálculos matemáticos complejos.

Comenzar Lección
Ilustración isométrica de capas flotantes sobre un wireframe web
Controlar el espacio y la ubicación es la diferencia entre un sitio roto y uno profesional.

Control Total: Display y Position

En este módulo desmitificamos los pilares del diseño web. Entenderás la naturaleza de los elementos (¿por qué algunos saltan de línea?), aprenderás a romper el flujo natural para anclar elementos y dominarás conceptos avanzados como el 'Stacking Context' para solucionar errores imposibles de z-index.

Comenzar Lección
Ilustración técnica de ejes X e Y manipulando cajas flexibles
Flexbox cambió las reglas del juego: por primera vez, el diseño web responde inteligentemente al contenido.

Arquitectura Flexible con Flexbox

Bienvenido al estándar moderno de la maquetación web. En este curso completo desglosaremos la especificación Flexbox propiedad por propiedad. Entenderás la diferencia crítica entre ejes, dominarás el cálculo del espacio disponible y aprenderás patrones de diseño que te ahorrarán cientos de líneas de código CSS.

Comenzar Lección
Diseño de barra de navegación responsive mostrándose en laptop y celular con menú hamburguesa
Vista previa del proyecto final: una barra de navegación que conserva su estética en escritorio y transforma su funcionalidad en móviles mediante CSS puro.

Cómo crear un Navbar Responsive solo con HTML y CSS

Aprende a maquetar una barra de navegación que se adapta a todos los dispositivos. Tutorial paso a paso utilizando Flexbox y Media Queries, sin necesidad de usar JavaScript.

Comenzar Lección

Cómo crear un Carrusel Infinito y Responsive solo con HTML y CSS

Aprende a maquetar un slider de imágenes automático con animaciones fluidas, variables CSS y diseño adaptativo, sin escribir una sola línea de JavaScript.

Comenzar Lección
¿Necesito conocimientos previos de programación para este curso?No. Este curso comienza desde cero absoluto. Es ideal para quienes nunca han escrito una línea de código y quieren aprender las bases fundamentales de la web.
¿Por qué el cupo es de máximo 6 personas?Para garantizar una enseñanza personalizada. Al ser pocos, podemos revisar tu código en vivo, corregir errores específicos y asegurar que nadie se quede atrás, algo imposible en cursos masivos.
¿Vemos JavaScript en este curso?No. Nos enfocamos 100% en dominar la estructura (HTML) y el diseño (CSS). Es la base obligatoria antes de saltar a la lógica de programación. Querer aprender los tres a la vez suele generar confusión.
¿Qué es la 'Semántica HTML' y por qué le dan tanta importancia?Es escribir código con significado (usar `<header>`, `<main>`, `<article>` en vez de solo `<div>`). Es crucial para que Google entienda tu sitio (SEO) y para que sea accesible para personas con discapacidad.
¿Cuál es la diferencia entre Flexbox y CSS Grid?Flexbox es para diseños unidimensionales (una fila o una columna), ideal para alinear elementos. Grid es bidimensional (filas y columnas a la vez), perfecto para crear la estructura general de la página.
¿Qué significa 'Mobile First'?Es una metodología de diseño donde empezamos maquetando para celulares y luego, mediante Media Queries, adaptamos el sitio a pantallas más grandes. Esto hace que el código sea más limpio y performante.
¿Al finalizar el curso tendré un proyecto para mi portafolio?Sí. Terminarás con una Landing Page profesional, responsive y publicada en internet, lista para mostrar a reclutadores o clientes potenciales.
¿Qué herramientas necesito instalar?Principalmente Visual Studio Code (el editor de código estándar de la industria) y un navegador moderno como Chrome o Firefox. Te enseñaremos a configurarlos en la primera clase.
¿Qué son las 'Variables CSS' que menciona el temario?Son contenedores de valores (como colores o tamaños) que definimos una vez y reutilizamos en todo el sitio. Si quieres cambiar el color principal de la marca, solo lo cambias en un lugar y se actualiza todo.
¿Las clases quedan grabadas?Sí, aunque la modalidad es en vivo para aprovechar la práctica, tendrás acceso a las grabaciones para repasar conceptos o si tuviste que faltar por fuerza mayor.
¿Por qué usamos unidades `rem` en lugar de `px`?`rem` es una unidad relativa que se adapta a la configuración de fuente del usuario. Usar `px` es una mala práctica de accesibilidad porque impide que las personas con visión reducida escalen los textos correctamente.
¿Qué es el 'modelo de caja' (Box Model)?Es el concepto fundamental de CSS que dicta cómo se comportan los elementos: margen, borde, relleno (padding) y contenido. Entender esto es la clave para que tu diseño no se rompa.
¿Cómo se publica el sitio web en internet?En el módulo 8 aprenderemos a usar GitHub y plataformas como Netlify o Vercel para subir tu código y obtener una URL pública y segura (HTTPS) de forma gratuita.
¿Qué es la Accesibilidad Web (A11y)?Es la práctica de hacer sitios utilizables por todos, incluyendo personas ciegas que usan lectores de pantalla. Aprenderás sobre contraste de color, navegación por teclado y etiquetas ARIA.
¿Este curso sirve si quiero ser UX/UI Designer?Absolutamente. Entender cómo se construye lo que diseñas te hará un diseñador mucho más valioso y te permitirá comunicarte mejor con los desarrolladores.
¿Qué son las Media Queries?Son reglas de CSS que nos permiten aplicar estilos diferentes según el tamaño de la pantalla. Son el motor del diseño responsivo (adaptable a móviles, tablets y desktop).
¿Veremos frameworks como Bootstrap o Tailwind?No. Aprenderemos CSS puro. Depender de un framework sin saber las bases te limitará a largo plazo. Una vez domines CSS, aprender cualquier framework te tomará una tarde.
¿Qué es la especificidad en CSS?Es la regla matemática que usa el navegador para decidir qué estilo aplicar cuando hay conflicto. Entenderla evitará que pases horas peleando con estilos que 'no se aplican'.
¿Cómo se corrigen los ejercicios?Al ser un grupo de 6, la corrección es personalizada. Revisamos tu código, te marcamos buenas prácticas y sugerimos optimizaciones específicas para tu estilo de maquetación.
¿Qué son las pseudoclases como `:hover`?Permiten dar estilos a elementos en estados específicos, como cuando el usuario pasa el mouse por encima (`:hover`) o cuando hace clic (`:active`), vitales para la interactividad.
¿Cuánto tiempo debo dedicarle fuera de clase?Recomendamos al menos 2 a 4 horas semanales de práctica adicional para asentar los conceptos y avanzar con el proyecto final.
¿Qué es el 'Reset CSS'?Es un conjunto de reglas que aplicamos al inicio para eliminar los estilos inconsistentes que traen los navegadores por defecto, asegurando que tu sitio se vea igual en Chrome, Safari y Edge.
¿Aprenderemos a optimizar imágenes?Sí, veremos formatos modernos como WebP y SVG, y cómo usar atributos de HTML para que las imágenes carguen rápido y no consuman datos innecesarios en móviles.
¿Qué es GitHub?Es una plataforma para alojar y gestionar versiones de tu código. Es el estándar de la industria y tu perfil allí servirá como tu currículum técnico.
¿Por qué es importante la etiqueta `doctype`?Le dice al navegador que estamos usando HTML5 moderno. Sin ella, el navegador entra en 'modo de compatibilidad' y puede romper tu diseño visual.
¿Veremos animaciones?Sí, en el módulo 6 veremos transiciones suaves y transformaciones (rotar, escalar, mover) para dar vida a la interfaz sin necesidad de JavaScript.
¿Qué es un componente reutilizable?Es pensar en 'piezas de lego' (ej: un botón, una tarjeta de producto) que codificas una vez y usas en múltiples partes de tu sitio, haciendo el código escalable.
¿Hay certificado al finalizar?Sí, recibirás un certificado de finalización que acredita que has completado el curso y desarrollado el proyecto final satisfactoriamente.
¿Qué son los atributos `alt` en imágenes?Son descripciones de texto obligatorias para accesibilidad. Si la imagen no carga o el usuario es ciego, este texto describe qué hay en la imagen.
¿Podré hacer sitios freelance después del curso?Sí. Tendrás la capacidad de maquetar Landing Pages, sitios institucionales o blogs estáticos para clientes reales.
¿Qué es el 'Inspect Element' o DevTools?Es una herramienta del navegador que usaremos en todas las clases para 'radiografiar' sitios web, ver cómo están hechos y depurar nuestro propio código.
¿Cuál es la diferencia entre `id` y `class`?Los `id` son únicos (uno por página) y se usan para anclas o JS específico. Las `class` son reutilizables y son la forma estándar de aplicar estilos en CSS.
¿Qué es el flujo de documento (Document Flow)?Es el orden natural en que los elementos se apilan en la página. Aprenderemos cuándo respetarlo y cuándo romperlo (con `position: absolute` o `fixed`).
¿Veremos formularios?Sí, maquetaremos formularios de contacto visualmente atractivos, con campos de texto, validaciones visuales y botones, listos para ser integrados con un backend.
¿Qué es `z-index`?Es la propiedad que controla la profundidad (qué elemento tapa a cuál). Aprenderemos a manejar el contexto de apilamiento para evitar errores visuales.
¿Por qué usar Visual Studio Code?Es gratuito, ligero y tiene miles de extensiones que facilitan la vida del desarrollador (autocompletado, formateo de código, live server).
¿Qué es una Landing Page?Es una página web diseñada específicamente para convertir visitantes en leads (ventas o registros). Es el tipo de proyecto más demandado para freelancers iniciales.
¿Qué es `gap` en Flexbox y Grid?Es una propiedad moderna que permite definir espacios entre elementos sin usar márgenes complicados, simplificando mucho el diseño de grillas.
¿Cómo sé si mi sitio se ve bien en todos los celulares?Usaremos las herramientas de emulación de dispositivos del navegador para probar tu diseño en iPhone, Samsung, iPad y diferentes resoluciones.
¿Qué es una fuente web (Web Font)?Aprenderemos a importar tipografías desde Google Fonts o archivos locales para que tu diseño tenga personalidad y no dependa de las fuentes instaladas en la PC del usuario.
¿El curso cubre buenas prácticas de SEO técnico?Sí, la semántica HTML que enseñamos es la base del SEO técnico. Un sitio bien estructurado es premiado por Google.
¿Qué pasa si tengo dudas fuera del horario de clase?Tendrás acceso a un canal de comunicación directa (Discord/Slack) para dejar tus dudas y recibir ayuda de los mentores o compañeros durante la semana.
¿Qué es `box-sizing: border-box`?Es una regla CSS esencial que hace que el padding y el borde se incluyan dentro del tamaño total del elemento, facilitando enormemente los cálculos de tamaño.
¿Este curso me sirve para luego aprender React?Es el requisito número uno. React es JavaScript, pero renderiza HTML y se estiliza con CSS. Sin bases sólidas de maquetación, sufrirás mucho en React.
¿Qué son los pseudo-elementos `::before` y `::after`?Nos permiten insertar contenido decorativo o funcional desde CSS sin ensuciar el HTML, una técnica avanzada muy usada para efectos visuales.
¿Cómo afecta el rendimiento la carga de CSS?Aprenderemos a no sobrecargar el sitio con estilos innecesarios y a mantener el código limpio para que la página cargue instantáneamente.
¿Qué es la herencia en CSS?Es cómo las propiedades de un elemento padre pasan a sus hijos (ej: la fuente). Entender esto te ahorra escribir cientos de líneas de código repetido.
¿Veremos cómo hacer un menú hamburguesa?Sí, es parte fundamental del módulo de Responsive Design. Crearemos una navegación que se adapta de escritorio a móvil.
¿Qué es la validación W3C?Es pasar tu código por un validador oficial que busca errores de sintaxis. Es un paso de calidad profesional antes de entregar un trabajo.
¿Cuándo comienza la próxima cohorte?Las fechas de inicio se actualizan mensualmente. Te recomendamos inscribirte pronto ya que los cupos de 6 personas suelen llenarse rápido.
Chateá por info