Curso de Desarrollo Web con HTML, CSS y Tailwind

Diseñá tu primera landing profesional con HTML, CSS y Tailwind

Al finalizar el curso vas a tener una one-page responsive lista para publicar, construida con HTML semántico, estilos base en CSS y utilidades de Tailwind CSS. Todo el proceso lo hacés acompañado en grupos reducidos de máximo 6 personas, con feedback constante sobre tu código y una base perfecta para continuar con JavaScript, React y el resto de la ruta frontend.

Métricas del curso

  • 150+

    10 clases en vivo (2 h cada una)

  • 10+

    Proyecto final: landing one-page profesional

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

  • Certificado de finalización del curso de Desarrollo Web

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

Curso de Desarrollo Web con HTML, CSS y Tailwind

2 hs de clases en vivo por día

10 clases en vivo

Lunes Miércoles Hs

Fecha de inicio:

2025-11-04

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Curso de Desarrollo Web Nivel Inicial

Este curso está pensado para quienes quieren empezar desde cero en desarrollo web y crear sitios profesionales usando HTML, CSS y Tailwind, sin necesidad de saber programar todavía. Es una base sólida para entrar al mundo frontend, entender cómo se arma una web por dentro y después avanzar a JavaScript, React y el resto del stack. Las clases se dictan en grupos reducidos de hasta 6 personas, con práctica guiada, devoluciones personalizadas y un acompañamiento muy cercano.

  • Personas sin experiencia previa en programación que desean dar sus primeros pasos en el mundo tech creando sitios web reales.
  • Desarrolladores que quieren consolidar HTML/CSS, mejorar su maquetado y adoptar Tailwind antes de pasar a JavaScript.
  • Diseñadores y perfiles creativos que buscan trasladar maquetas y prototipos a código semántico y responsive.
  • Equipos que necesitan estandarizar buenas prácticas de maquetado, semántica y diseño responsive con Tailwind.

MODALIDAD

¿Cómo vas a aprender desarrollo web en este curso?

Aprendés desarrollo web en clases online en vivo, construyendo una landing one-page profesional desde el primer módulo. Cada cohorte tiene como máximo 6 personas, lo que permite ver tu código en pantalla, corregir problemas de maquetado en el momento y acompañar tu progreso clase a clase.

Clases en vivo orientadas a maquetado

Sesiones interactivas en grupos pequeños para ver la implementación paso a paso, resolver dudas de HTML/CSS/Tailwind y revisar tu landing en tiempo real.

Clases en vivo del curso

Recursos de apoyo y plantillas

Material complementario con guías, snippets y estructuras reutilizables para practicar entre clases y acelerar tu velocidad de maquetado.

Contenido on demand del curso

Temario del Curso de Desarrollo Web (HTML + CSS + Tailwind)

En este curso de desarrollo web vas a aprender a crear una landing one-page moderna desde cero usando HTML semántico, estilos base en CSS y utilidades de Tailwind para lograr un diseño responsive, limpio y escalable. Es el punto de partida ideal si querés entrar al mundo frontend sin necesidad de saber programar todavía. Trabajamos en grupos reducidos de máximo 6 personas, con práctica constante, correcciones en vivo y acompañamiento cercano en cada clase.

Estructura base de una web con HTML5

  • Armado del esqueleto: !doctype html, html, head, body y primeros tags

  • Metadatos esenciales, favicon, etiquetas meta y SEO on-page básico

  • Estructura de carpetas y archivos del proyecto (assets, css, imágenes)

Boilerplate y estructura inicial de la landing preparada para crecer

Semántica y contenido: texto, links e imágenes

  • Etiquetas semánticas: header, nav, main, section, article, footer

  • Texto, títulos jerárquicos, enlaces internos/externos e imágenes con alt

  • Accesibilidad inicial (labels, estructura lógica y atributos ARIA simples)

Secciones Home/About de la landing con maquetado semántico y contenido real

Listas, tablas y formularios HTML5

  • Listas ordenadas, desordenadas y de definición para contenido estructurado

  • Tablas simples con thead, tbody, th y primeros estilos legibles

  • Formularios HTML5: inputs, labels, placeholders, tipos de campos y validación nativa

Sección Contacto con formulario funcional y tabla de precios sencilla

Bases de CSS: cascada, especificidad y box model

  • Selectores, herencia, cascada y cómo evitar conflictos de estilos

  • Unidades (px, rem, %, vw/vh), tipografía, paletas de color y variables simples

  • Box model: padding, margin, border, overflow y reset básico del navegador

Hoja de estilos base con sistema tipográfico y paleta de colores definidas

Layout moderno con Flexbox

  • Ejes principal/secundario, alineación, distribución, gap y wrap

  • Orden, crecimiento/encogimiento de ítems y patrones comunes de layout

  • Construcción de un header y layout responsive usando Flexbox

Header + hero responsive para la landing utilizando Flexbox

Maquetación avanzada con CSS Grid

  • Tracks (filas/columnas), áreas, fr units y gaps

  • auto-fit/auto-fill y grillas responsivas para distintos anchos de pantalla

  • Patrones para secciones de features, portfolio y testimonios

Sección de features/portfolio de la landing usando CSS Grid

Introducción práctica a Tailwind CSS

  • Instalación, configuración base y tailwind.config

  • Mentalidad utility-first y flujo de trabajo en un proyecto real

  • Utilidades clave: spacing, tipografía, color, bordes, sombras y containers

Refactor de estilos del proyecto a utilidades Tailwind para simplificar el CSS

Responsive design con Tailwind paso a paso

  • Breakpoints sm, md, lg, xl y variantes responsive

  • Patrones comunes: navbar colapsable, grillas fluidas y secciones apiladas en móvil

  • Buenas prácticas mobile-first y lectura cómoda en pantallas pequeñas

Adaptación responsive completa de la one-page utilizando breakpoints de Tailwind

Estados, formularios y dark mode en Tailwind

  • Modifiers de estado: hover, focus, active, focus-visible y focus rings

  • Estilos accesibles para controles de formulario y mensajes de error

  • Dark mode por clase/media, configuración en Tailwind y toggler básico

Formulario estilizado con estados claros + toggle de dark mode aplicado a la landing

Animaciones, performance y cierre del proyecto

  • Transitions, transforms y keyframes en Tailwind para micro-interacciones

  • Efectos sutiles de scroll/hover sin sobrecargar la experiencia

  • Optimización: purge de clases, compresión de assets y chequeo con Lighthouse

Versión final de la landing con animaciones, dark mode y optimización de performance
¿Necesito saber matemáticas o lógica compleja para este curso?No. HTML y CSS son lenguajes descriptivos y visuales, no de programación lógica. Se trata más de estructura y diseño que de algoritmos. Es el punto de entrada más amigable al mundo tech.
¿Por qué enseñan Tailwind CSS en lugar de Bootstrap?Bootstrap te da componentes pre-armados que hacen que todos los sitios se vean iguales. Tailwind te da herramientas (utilidades) para construir diseños únicos y modernos con total libertad, que es lo que pide el mercado hoy.
¿Es necesario aprender CSS puro si vamos a usar Tailwind?Sí, es obligatorio. Tailwind es CSS disfrazado de clases. Si no entiendes cómo funciona el CSS por detrás (Flexbox, Grid, Box Model), usar Tailwind será adivinar. En este curso vemos las bases sólidas primero.
¿Vemos JavaScript en este curso?No. Nos enfocamos 100% en la estructura (HTML) y la apariencia (CSS/Tailwind). Queremos que seas un experto maquetando antes de agregar la capa de lógica. Querer aprender las tres cosas juntas suele generar frustración.
¿Qué computadora necesito?Cualquier computadora que pueda abrir un navegador y un editor de texto sirve. El desarrollo web con HTML y CSS es extremadamente ligero. No necesitas una PC gamer ni una Mac costosa.
¿Qué es una 'Landing One-Page'?Es un sitio web de una sola página donde toda la información está accesible haciendo scroll, sin recargar. Es el formato más popular para portafolios, productos digitales y presentaciones personales.
¿Qué significa que el HTML sea 'Semántico'?Significa usar las etiquetas correctas para cada contenido (ej: `<nav>` para menús, `<footer>` para el pie) en lugar de usar `<div>` para todo. Esto es vital para que Google entienda tu sitio (SEO) y para la accesibilidad.
¿Por qué los grupos son de máximo 6 personas?Porque en la maquetación, un error visual (como un div que no se centra) puede tener muchas causas. Al ser pocos, el profesor puede mirar tu pantalla y decirte exactamente qué regla CSS está fallando.
¿Qué es el 'Box Model'?Es el concepto fundamental de CSS. Todo en la web es una caja rectangular. Entender cómo interactúan el margen, el borde y el relleno (padding) es la diferencia entre un diseño roto y uno profesional.
¿Qué es Flexbox?Es una herramienta de CSS para alinear elementos en una dimensión (fila o columna). Es lo que usamos para hacer barras de navegación, centrar elementos y distribuir espacio automáticamente.
¿Cuál es la diferencia entre Flexbox y CSS Grid?Flexbox es para líneas (1D). Grid es para cuadrículas completas (2D, filas y columnas a la vez). En el curso aprendemos a combinarlos para lograr layouts complejos.
¿Salgo con un portfolio de este curso?Sí. El proyecto final es una Landing Page completa que puedes subir a internet y usar como tu carta de presentación profesional o personal.
¿Qué es el SEO On-Page?Son las optimizaciones que hacemos dentro del código (títulos, meta descripciones, textos alternativos) para intentar aparecer más arriba en los resultados de Google.
¿Vemos diseño gráfico (Photoshop/Figma)?No enseñamos a diseñar, enseñamos a **implementar**. Te enseñaremos a pensar como desarrollador: cómo tomar un diseño visual y convertirlo en código funcional.
¿Qué es la Accesibilidad Web (ARIA)?Es hacer que tu web pueda ser usada por personas con discapacidades (ej: ciegos que usan lectores de pantalla). Veremos cómo etiquetar botones y formularios correctamente.
¿Qué es 'Mobile First'?Es una metodología donde diseñamos primero para celulares (pantallas chicas) y luego expandimos para escritorio. Esto hace que el código sea más limpio y rápido. Tailwind facilita mucho esto.
¿Qué son las 'Media Queries'?Son reglas que le dicen al sitio: 'Si la pantalla mide menos de 600px, cambia el fondo a azul'. Son el motor del Diseño Responsivo.
¿Qué es un Favicon?Es el pequeño icono que aparece en la pestaña del navegador. Aprenderás a generarlo e implementarlo correctamente en el `<head>` de tu documento.
¿Puedo hacer este curso si trabajo a tiempo completo?Sí. Las clases son en vivo en horarios cómodos (generalmente vespertinos) y quedan grabadas por si tienes una reunión o imprevisto.
¿Qué editor de código usamos?Visual Studio Code. Es el estándar de la industria, es gratuito y te enseñaremos a instalarle extensiones que te ayudan a escribir HTML y Tailwind más rápido.
¿Qué es el 'Dark Mode'?Es la versión oscura de tu sitio web. Con Tailwind, aprenderás a implementarlo de forma nativa para que se active según la preferencia del sistema operativo del usuario.
¿Vemos formularios funcionales?Vemos la maquetación y validación visual de formularios. Para que envíen emails reales se necesita Backend (otro curso), pero te enseñaremos a usar servicios externos simples (como Formspree) para que funcionen sin backend.
¿Tailwind ensucia el HTML con muchas clases?Al principio parece que sí, pero la ventaja de no tener que inventar nombres de clases para todo y la velocidad de desarrollo compensan visualmente. Es el estándar moderno.
¿Qué son los 'Breakpoints'?Son los puntos de quiebre donde el diseño cambia (ej: de celular a tablet). Tailwind trae breakpoints preconfigurados (`sm`, `md`, `lg`) que facilitan mucho la vida.
¿Qué es Lighthouse?Es una herramienta de Google que audita tu web. Al final del curso, pasaremos tu proyecto por Lighthouse para asegurar que tenga buen rendimiento, accesibilidad y SEO.
¿Sirve este curso si luego quiero aprender React?Es **fundamental**. React genera HTML y se estiliza con CSS/Tailwind. Si no sabes maquetar, tus aplicaciones de React serán funcionales pero se verán mal y serán inaccesibles.
¿Qué es el `<!DOCTYPE html>`?Es la primera línea de código. Le avisa al navegador que estamos usando HTML5 moderno para que no entre en modo de compatibilidad antiguo.
¿Cómo se optimizan las imágenes?Aprenderás a usar formatos modernos como WebP y a dimensionar las imágenes correctamente para que el sitio cargue instantáneamente en celulares.
¿Qué es una unidad `rem`?Es una medida relativa al tamaño de fuente del navegador. Usamos `rem` en lugar de `px` para que, si el usuario necesita textos más grandes por problemas de visión, el sitio se adapte.
¿Qué son las Pseudo-clases (`:hover`)?Son estados especiales. Por ejemplo, cambiar el color de un botón cuando pasas el mouse por encima. Con Tailwind esto es tan fácil como escribir `hover:bg-blue-500`.
¿Aprenderemos a publicar el sitio?Sí. Usaremos servicios gratuitos como Vercel o Netlify para que tu proyecto tenga una URL real (https://tu-nombre.vercel.app) y se la puedas pasar a amigos o clientes.
¿Qué es `z-index`?Es la propiedad que controla la profundidad (qué elemento tapa a cuál). Es vital para hacer menús flotantes, modales y efectos de superposición.
¿Qué es la especificidad en CSS?Es el sistema de puntos que usa el navegador para decidir qué estilo gana cuando hay conflicto. Entenderlo te ahorrará horas de pelear con estilos que 'no se aplican'.
¿Vemos animaciones?Vemos micro-interacciones: botones que reaccionan, menús que se deslizan suavemente y transiciones. No hacemos animaciones 3D complejas, sino interfaces fluidas.
¿Qué es `tailwind.config.js`?Es el archivo de configuración donde puedes personalizar tus colores de marca, tipografías y breakpoints, haciendo que Tailwind se adapte a tu diseño y no al revés.
¿Este curso sirve para freelance?Sí. Muchos negocios pequeños solo necesitan una Landing Page informativa bien hecha, rápida y que se vea bien en Google Maps. Este curso te capacita para vender ese servicio.
¿Qué es un 'Reset CSS'?Es un código que borra los estilos por defecto del navegador (que suelen ser feos e inconsistentes) para que empecemos a diseñar desde una hoja en blanco limpia.
¿Qué son las 'Google Fonts'?Es un catálogo de tipografías gratuitas. Aprenderás a importarlas y usarlas para que tu sitio no tenga la letra aburrida por defecto (Times New Roman).
¿Qué es un `iframe`?Es una ventana a otro sitio web dentro del tuyo. Lo usaremos, por ejemplo, para incrustar mapas de Google Maps o videos de YouTube en tu landing.
¿Qué es el 'Inspect Element'?Es la herramienta de rayos X del navegador. La usaremos en todas las clases para ver cómo están hechos otros sitios y corregir el nuestro en vivo.
¿Cuál es la diferencia entre `id` y `class`?Los `id` son únicos (como un DNI) y las `class` son para grupos (como un uniforme). En CSS y Tailwind, usamos clases el 99% del tiempo.
¿Qué es `gap`?Es una propiedad mágica de Flexbox y Grid que nos permite separar elementos sin tener que calcular márgenes complicados. Tailwind lo hace muy fácil con clases como `gap-4`.
¿Qué pasa si no tengo gusto para el diseño?No pasa nada. Tailwind y sus utilidades te ayudan a mantener proporciones y colores armónicos matemáticamente, haciendo que tus diseños se vean profesionales aunque no seas diseñador.
¿Qué es `sticky` y `fixed`?Son tipos de posicionamiento. Aprenderás a dejar la barra de navegación pegada arriba (`sticky`) o hacer un botón de WhatsApp que te siga al scrollear (`fixed`).
¿Qué son los atributos `alt`?Son textos que describen las imágenes. Son obligatorios para el SEO (Google no ve imágenes, lee texto) y para que los ciegos sepan qué hay en la foto.
¿Qué es `overflow: hidden`?Es una propiedad para recortar contenido que se sale de su caja. Muy útil para hacer tarjetas de productos con bordes redondeados e imágenes.
¿Cómo hago que mi sitio cargue rápido?Usando HTML limpio, optimizando imágenes y usando Tailwind (que elimina automáticamente el CSS que no usas para que el archivo final sea diminuto).
¿Qué es VS Code Live Server?Es una extensión que usaremos para ver los cambios en el navegador instantáneamente cada vez que guardamos el archivo, sin tener que recargar la página manualmente.
¿Hay soporte fuera de clase?Sí, tenemos un grupo de chat exclusivo para la cohorte donde puedes mandar capturas de tu código si algo no se ve como esperabas.
¿Qué sigue después de este curso?Lo natural es seguir con el curso de **JavaScript Moderno**. Con HTML/CSS ya tienes el cuerpo del sitio, con JS le darás cerebro e interactividad.
Chateá por info