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 al curso

Inscribite en este curso online en vivo y empezá a desarrollar habilidades profesionales con acompañamiento personalizado y grupos reducidos. Ver próximas fechas

Curso de HTML y CSS para Frontend

2 hs de clases en vivo por día

10 clases en vivo

Martes 00:00 Hs

Fecha de inicio:

2026-02-04

Precio $150000 ARG Oferta especial
Comprar curso

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.

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

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
Ilustración que resume los pilares del HTML5 moderno

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

Domina la base de la web con HTML5. Aprende sintaxis, estructura, etiquetas semánticas y anidamiento correcto para crear desarrollos sólidos, accesibles y profesionales.

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

Domina la navegación web con HTML. Aprende a crear enlaces con la etiqueta <a>, usar rutas absolutas y relativas, anclas internas y a estructurar la arquitectura de tu sitio.

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

Enriquece tu web con multimedia. Aprende a insertar imágenes, optimizar con atributos alt, añadir favicons e incrustar iframes respetando accesibilidad y rendimiento.

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

Organiza contenido con listas HTML. Domina ul, ol y dl para crear menús y estructuras claras. Aprende anidamiento y semántica para una web accesible y profesional.

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: Lección Técnica Definitiva

Domina los formularios HTML5: estructura, métodos GET/POST, inputs semánticos y validaciones nativas. Aprende accesibilidad y optimización móvil para una mejor experiencia.

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

Tablas en HTML: Estructura y Semántica Profesional

Crea tablas HTML semánticas y accesibles. Aprende a usar thead, tbody, combinar celdas y estructurar datos correctamente para evitar errores comunes de maquetación.

Comenzar Lección
Ilustración del funcionamiento de CSS aplicando estilos visuales a HTML
CSS es el lenguaje que transforma la estructura HTML en interfaces visuales atractivas.

Fundamentos de CSS

Aprende CSS desde la base: domina la sintaxis, reglas de estilo y selectores. Descubre cómo transformar código HTML en interfaces visuales profesionales con estilos correctos.

Comenzar Lección
Diagrama visual de selectores CSS aplicándose sobre elementos HTML
Los selectores CSS permiten conectar reglas de estilo con elementos HTML específicos.

Selectores CSS

Domina los selectores CSS para aplicar estilos con precisión. Aprende a usar etiquetas, clases e IDs correctamente, optimizando la especificidad y mantenibilidad de tu código.

Comenzar Lección
Jerarquía, herencia y cascada de estilos en CSS
Visualización del flujo de estilos CSS sobre un árbol DOM jerárquico.

Jerarquía CSS: Herencia, Cascada y Especificidad

CSS no aplica estilos al azar. Domina la herencia, cascada y especificidad para resolver conflictos entre reglas y escribir código CSS priorizado, claro y escalable.

Comenzar Lección
Diseño tipográfico y color del texto aplicado con CSS en una interfaz web
La tipografía y el color definen la personalidad, jerarquía y legibilidad de una interfaz web.

Tipografía y Texto en CSS

Controla la apariencia del texto en tu web con CSS. Aprende a manejar color, fuentes, tamaño, interlineado y espaciado para lograr una lectura clara y profesional en cualquier dispositivo.

Comenzar Lección
Capas de color y transparencia aplicadas a elementos HTML con CSS
El manejo correcto del color de fondo impacta directamente en la legibilidad y la accesibilidad.

background-color en CSS

Aprende el uso avanzado de background-color en CSS. Domina formatos, transparencia RGBA, evita errores con opacity y aplica criterios de contraste para interfaces accesibles y profesionales.

Comenzar Lección
Relación entre unidades de medida CSS y distintos tamaños de pantalla
Las unidades de medida en CSS definen cómo un diseño se adapta al contexto, al dispositivo y al usuario.

Unidades de Medida en CSS

Elige las unidades correctas en CSS. Domina px, rem, em, % y unidades viewport para crear interfaces accesibles, fluidas y escalables en cualquier dispositivo.

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 identidad visual. Aprende a implementar fuentes personalizadas con @font-face y servicios como Google Fonts, superando las limitaciones del sistema.

Comenzar Lección
Diagrama del CSS Box Model mostrando content, padding, border y margin
El Box Model explica cómo el navegador mide, separa y renderiza cada elemento en pantalla.

CSS Box Model

El Box Model es fundamental en CSS. Aprende cómo el navegador maneja cada elemento como una caja, el cálculo de dimensiones con padding y bordes, y evita errores comunes en tus layouts.

Comenzar Lección
Capas de elementos web mostrando flujo, superposición y posicionamiento en CSS
Dominar display y position es entender cómo el navegador piensa el layout.

CSS Display y Position

Aprende cómo el navegador renderiza el layout. Domina display block vs inline, posicionamiento con relative, absolute y fixed, y controla la superposición con z-index para diseños web profesionales.

Comenzar Lección
Representación visual de ejes principales y transversales organizando elementos con CSS Flexbox
Flexbox permite al navegador distribuir y alinear elementos de forma inteligente según el espacio disponible.

CSS Flexbox: Arquitectura del Layout Flexible

Flexbox es clave para layouts modernos. Aprende a usar su sistema de ejes, distribuye el espacio y alinea elementos para crear interfaces responsive, limpias y profesionales con total control.

Comenzar Lección
Esquema visual de un layout web bidimensional construido con CSS Grid
CSS Grid permite diseñar layouts completos controlando filas y columnas al mismo tiempo.

CSS Grid Maquetación

Domina CSS Grid para crear layouts bidimensionales complejos. Aprende a controlar filas, columnas y áreas para diseñar interfaces web profesionales, ordenadas y mantenibles.

Comenzar Lección
Diseño web adaptable usando Media Queries en CSS
Las Media Queries permiten adaptar el diseño a distintos tamaños de pantalla.

Media Queries y diseño responsive en CSS

Domina el diseño responsive con Media Queries: define breakpoints, aplica Mobile First y adapta layouts y tipografía para interfaces perfectas en cualquier pantalla.

Comenzar Lección
Ejemplos de pseudoclases CSS aplicadas a enlaces y contenedores
Las pseudoclases permiten definir estilos según estado, exclusión y posición.

Pseudoclases CSS

Domina las pseudoclases CSS para crear interfaces interactivas. Controla estados como hover, excluye elementos y selecciona por posición para un código más limpio y eficiente.

Comenzar Lección
Ejes, gradientes y transformaciones aplicadas a elementos CSS
Los efectos visuales en CSS se basan en ejes, fondos y transformaciones.

Efectos visuales y movimiento con CSS

Aprende a manejar el espacio visual con ejes, aplicar gradientes, transformar y animar elementos. Crea interfaces modernas y dinámicas con efectos visuales profesionales en 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

Crea un menú de navegación responsive profesional con HTML y CSS. Aprende Flexbox, Media Queries y el truco del Checkbox Hack para móviles, sin una sola línea de JavaScript.

Comenzar Lección
Resultado final del carrusel
Carrusel infinito y responsive

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

Usarás animaciones fluidas, variables CSS y diseño adaptativo para lograr un resultado profesional sin JavaScript.

Comenzar Lección

Curso anterior

Curso de UX/UI Online en Argentina: Diseño en Figma y Experiencia de Usuario
Curso de UX/UI Online en Argentina: Diseño en Figma y Experiencia de Usuario

Curso de UX/UI: Investigación, Wireframes y Diseño en Figma

Aprendé UX/UI desde cero: investigación de usuarios, arquitectura de información, wireframes y principios de UI. Diseñá interfaces claras y accesibles con prototipos en Figma.

Comenzar Curso

Curso actual

Curso de Desarrollo Web con HTML, CSS
Curso de Desarrollo Web con HTML, CSS

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.

Curso actual

Curso siguiente

Curso de Desarrollo Web Online en Argentina: HTML, CSS y Tailwind desde Cero
Curso de Desarrollo Web Online en Argentina: HTML, CSS y Tailwind desde Cero

Curso de Desarrollo Web con HTML, CSS y Tailwind

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.

Comenzar Curso
¿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.
Chateá por info