HTML y CSS desde cero: la base visual de la web
Guía completa de HTML y CSS para principiantes: semántica, layout, Flexbox, Grid, responsive, accesibilidad y un proyecto landing listo para tu portfolio.
camilogaon
@camilogaon
HTML y CSS desde cero: la base visual de la web
Antes de React o animaciones fancy, necesitas estructura (HTML) y presentación (CSS). Esta guía te deja capaz de construir landings limpias y responsive.
//1. HTML: esqueleto semántico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mi landing | Programemos</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav aria-label="Principal">...</nav>
</header>
<main>
<section>...</section>
</main>
<footer>...</footer>
</body>
</html>
Etiquetas clave: header, nav, main, section, article, footer, button, a, img (siempre con alt).
//2. Formularios accesibles
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
Asocia siempre label + id.
//3. CSS: cascada, especificidad y box model
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #14213d;
background: #f8fafc;
}
Box model: content → padding → border → margin.
//4. Selectores útiles
.btn { }
.btn--primary { }
nav a:hover { }
input:focus { outline: 2px solid #2563eb; }
Prefiere clases. Evita IDs para estilos.
//5. Flexbox (componentes)
.row {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
Ideal para navbars, cards horizontales, toolbars.
//6. Grid (layouts)
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.5rem;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
//7. Responsive mobile-first
.container {
width: min(1100px, 100% - 2rem);
margin-inline: auto;
}
@media (min-width: 768px) {
.hero {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
}
}
//8. Tipografía y spacing
Define una escala:
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 1rem;
--space-4: 1.5rem;
--text-lg: 1.25rem;
--text-xl: 2rem;
}
Menos “números mágicos”, más consistencia.
//9. Accesibilidad rápida
- Contraste legible
- Focus visible
- Botones reales (
button) para acciones - Imágenes con
alt - Orden de tab lógico
//10. Proyecto: landing de Programemos
Secciones:
- Header + CTA
- Hero (headline + subtítulo + botón)
- Beneficios (3 cards)
- Ruta de aprendizaje
- FAQ
- Footer
Entrega: HTML/CSS limpio, responsive, deploy en GitHub Pages o Netlify.
//11. Errores comunes
- Divitis (todo
div) - Estilos inline por todas partes
- Anchos fijos que rompen móvil
- Olvidar
viewport - Contraste pobre
pxexcesivos sin fluidz
//12. Plan 2 semanas
| Día | Foco |
|---|---|
| 1–3 | HTML semántico + forms |
| 4–6 | Box model + tipografía |
| 7–9 | Flex + Grid |
| 10–12 | Responsive + a11y |
| 13–14 | Landing portfolio |
//Conclusión
HTML/CSS no son “lo fácil que se salta”: son tu base de producto. Domínalos y todo framework frontend se vuelve más simple.
Siguiente paso: publica la landing y luego añade interactividad con JavaScript.
FAQ
¿Debo aprender HTML/CSS antes de JavaScript?
Sí, al menos lo básico. El DOM y la UI tienen mucho más sentido si entiendes estructura y estilos.
¿Flexbox o Grid?
Flexbox para filas/columnas de componentes; Grid para layouts de página bidimensionales. Se complementan.
¿Todavía sirve aprender CSS “a mano” con frameworks?
Sí. Tailwind o Bootstrap son más fáciles si entiendes el CSS que generan y cómo debuguearlo.
¿Qué es HTML semántico?
Usar etiquetas con significado (header, main, nav, article) para accesibilidad, SEO y código más claro.
¿Cómo practico responsive?
Diseña mobile-first, usa DevTools para anchos distintos y prueba en un teléfono real.
