GuíaBásico
Guía de Fundamentos Web: HTML y CSS
Aprende a estructurar y dar estilo a una página web desde cero, con el criterio de un desarrollador senior: por qué el HTML semántico importa (accesibilidad, SEO), cómo se calcula el tamaño real de una caja con el box model, por qué un estilo gana sobre otro (la cascada y la especificidad), y cómo Flexbox y CSS Grid resuelven el layout moderno. La guía trata HTML y CSS no como "lo fácil que se salta", sino como el fundamento que permite razonar sobre cualquier interfaz, incluida la que construirás después con React o Tailwind. Cada módulo ejecuta en Node.js la lógica del modelo CSS —especificidad, box model, reparto de espacio en Flexbox, ubicación de celdas en Grid— para que el razonamiento se verifique, no se memorice. El hilo conductor es el storefront de Mercado: construyes su markup semántico y accesible, ordenas su hoja de estilos con baja especificidad, armas su lista de productos como un Grid responsivo con Flexbox en las tarjetas, y la haces responsiva de móvil a escritorio. Es la guía base del ecosistema Fullstack de NIEVA: todo lo que viene después (React, Next.js, sistemas de diseño) renderiza HTML y aplica CSS sobre esta base.
- 64
- lecciones
- 8
- módulos
- Inglés · Español
- disponible en
- Sí
- certificado
- Gratis
- acceso
Resultados
Lo que vas a poder hacer
- Estructurar documentos con HTML semántico (`header`, `nav`, `main`, `article`, `section`, `footer`) en vez de `div` genéricos, y entender su impacto en accesibilidad y SEO
- Calcular el tamaño real de cualquier elemento con el box model (content, padding, border, margin) y elegir entre `content-box` y `border-box` con criterio
- Resolver por qué un estilo gana sobre otro: la cascada (origen, especificidad, orden de aparición) y la especificidad de cada selector
- Elegir el selector correcto (tipo, clase, id, atributo, pseudo-clases, pseudo-elementos, combinadores) sin inflar la especificidad
- Construir layouts con Flexbox: eje principal y cruzado, `justify-content`, `align-items`, `flex-grow`/`shrink`/`basis`
- Construir layouts en dos dimensiones con CSS Grid: `grid-template-columns`/`rows`, `fr`, `repeat`, `minmax`, áreas de grid
- Diseñar de forma responsiva: mobile-first, media queries, breakpoints y unidades fluidas (`rem`, `%`, `vw`, `clamp`)
- Construir el storefront completo de Mercado: markup accesible, cascada organizada, y el catálogo como Grid responsivo con Flexbox en las tarjetas
Antes de empezar
Qué necesitas traer
Es para ti si...
- Desarrolladores que quieren dominar HTML y CSS con criterio, no memorizando propiedades sueltas
- Quienes van a aprender React, Next.js o Tailwind después y necesitan la base sólida para entender qué hacen esas herramientas por debajo
- Devs a quienes "les funciona pero no saben por qué" y quieren entender la cascada, la especificidad y el box model a fondo
- Quienes se preparan para construir interfaces accesibles y responsivas desde el primer día
Requisitos y materiales
- Conocimientos básicos de programación (variables, funciones) — no se requiere experiencia previa con HTML o CSS
- Un editor de código y un navegador moderno
- Node.js 18+ instalado para ejecutar los mini-modelos que verifican la lógica del CSS
- Ninguna guía previa: es la guía base del ecosistema Fullstack
Contenido
El temario, módulo por módulo
Abre cualquiera para ver sus lecciones.
- Presentación del módulo: el marcado tiene significado
- La estructura de un documento HTML
- Elementos semánticos contra el `<div>` genérico
- El outline del documento y los encabezados
- Enlaces, imágenes y atributos
- Formularios y labels
- Bases del marcado accesible
- Mini-proyecto: arma el markup semántico del storefront de Mercado
- Presentación del módulo: toda caja tiene cuatro anillos
- Cada elemento es una caja
- Los cuatro anillos: content, padding, border, margin
- box-sizing: content-box contra border-box
- Calcular el ancho y el alto totales
- display: block, inline e inline-block
- El colapso de márgenes
- Mini-proyecto: dale caja al product-card de Mercado
- Presentación del módulo: acomodar las cajas, no solo pintarlas
- El contenedor flex y sus items
- El eje principal y el eje cruzado
- Repartir en el eje principal, alinear en el cruzado
- Estirar y encoger: `flex-grow`, `flex-shrink` y `flex-basis`
- El shorthand `flex` y el `gap`
- Envolver a varias líneas: `flex-wrap`
- Mini-proyecto: maquetar la `search-bar` y una fila de tarjetas con Flexbox
- Presentación del módulo: de una fila a una rejilla
- El grid container y los tracks: `display: grid` y las líneas de la rejilla
- La unidad `fr` y `repeat()`: columnas que se reparten el espacio
- `minmax()` y `auto-fill`: la rejilla que se adapta sola
- Colocar items: líneas y `span`
- `grid-template-areas`: dibujar el layout con nombres
- Grid vs Flexbox: cuándo cada uno (y por qué se complementan)
- Mini-proyecto: el catálogo de Mercado como grid responsivo
- Presentación del módulo: de una rejilla que ya se adapta a controlar el diseño en cada tamaño
- El viewport meta tag y mobile-first
- Media queries: `@media`, condiciones y la cascada
- Elegir breakpoints: por el contenido, no por los dispositivos
- Unidades fluidas: `%`, `rem`, `vw` (y por qué `px` no siempre sirve)
- `clamp()` y el tamaño fluido: piso, fluido, techo
- Imágenes responsivas: que no desborden y que no pesen de más
- Mini-proyecto: hacer responsivo el storefront de Mercado
- Presentación del módulo: siete capas, un solo storefront
- Capa 1: el esqueleto semántico del storefront
- Capa 2 + 6: la caja de la tarjeta y la rejilla del catálogo
- Capa 3 + 4: la hoja de estilos, plana y bien apuntada
- Capa 5: Flexbox en la search-bar y dentro de la tarjeta
- Capa 7: el storefront responsivo
- Repaso: accesibilidad y auditoría final
- Proyecto final: el storefront de Mercado, de punta a punta
Dudas frecuentes
Lo que suele preguntarse
Sin límite. Es una guía gratuita: entras cuando quieras, las veces que quieras.
No. Los módulos están ordenados de menos a más, pero puedes saltar al que necesites. Tu progreso se guarda por lección.
Lo que haga falta está en «Qué necesitas traer», arriba. Si no aparece nada ahí, puedes empezar desde cero.
En el grupo de WhatsApp del Club, y cada quince días hay un live con un instructor donde se resuelven dudas en vivo.
Sí. Al terminar todas las lecciones se emite automáticamente, con un código verificable que puedes compartir en LinkedIn.
Empieza cuando quieras
Lo que dicen los estudiantes
Estas reseñas son de estudiantes inscritos que completaron al menos el 50% del curso. Moderamos las reseñas solo por motivos de contenido (spam, lenguaje ofensivo, datos personales), nunca por ser críticas o negativas.
Aún no hay reseñas aprobadas.
¡Sé el primero en compartir tu experiencia!