Tabla de contenido

Introducción: Por qué HTML y CSS siguen siendo esenciales en 2026

Si estás empezando en el mundo del desarrollo web, es probable que hayas escuchado hablar de frameworks como React, Vue, Svelte o herramientas como Tailwind CSS y Astro. Todos son excelentes, pero hay algo fundamental que debes entender: todos dependen de HTML y CSS.

Sin importar cuántos años pasen o cuántas tecnologías nuevas aparezcan, la web siempre se construirá sobre dos pilares:

  • HTML para la estructura y el contenido
  • CSS para la apariencia y el diseño

Incluso los frameworks más avanzados terminan compilando su código a HTML y CSS antes de que el navegador pueda mostrar algo en pantalla. Aprender estas tecnologías desde cero no es opcional — es la base sobre la que se construye todo lo demás.

Esta guía está diseñada para llevarte desde cero absoluto hasta un nivel donde puedas crear páginas web completas, responsivas y profesionalmente diseñadas. No necesitas experiencia previa en programación.

Si quieres profundizar en HTML desde cero, te recomiendo nuestro Curso de HTML desde cero y para CSS tenemos CSS Flexbox desde cero.

Parte 1: HTML — La Estructura de la Web

1.1 ¿Qué es HTML realmente?

HTML (HyperText Markup Language) no es un lenguaje de programación. Es un lenguaje de marcado que usa etiquetas para definir la estructura y el significado del contenido en una página web.

Piensa en HTML como los planos de una casa. Los planos no son la casa en sí, pero definen dónde va cada pared, cada puerta, cada ventana. De la misma forma, HTML no define colores ni animaciones — define qué es cada elemento y cómo se relaciona con los demás.

HTML funciona con etiquetas (tags). Cada etiqueta se escribe entre corchetes angulares < > y la mayoría tiene una etiqueta de apertura y una de cierre:

<h1>Este es un título principal</h1>
<p>Este es un párrafo de texto.</p>
<a href="https://8devmx.com">Este es un enlace</a>

Atributos: Las etiquetas pueden tener atributos que agregan información adicional. En el ejemplo del enlace, href es un atributo que indica hacia dónde dirige el enlace.

1.2 Tu primer archivo HTML

Para crear tu primera página, necesitas:

  1. Instalar VS Code — descárgalo gratis desde code.visualstudio.com
  2. Crear una carpeta llamada mi-primera-web
  3. Crear un archivo dentro llamado index.html
  4. Escribir ! y presionar Tab — VS Code autogenerará la estructura base

La estructura básica de cualquier archivo HTML es:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Primera Página Web</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Todo tu contenido va aquí -->
</body>
</html>

Explicación línea por línea:

  • <!DOCTYPE html> — Le dice al navegador que esto es HTML5
  • <html lang="es"> — La raíz del documento, con idioma español
  • <head> — Metadata que no se muestra en la página (título, charset, enlaces a CSS)
  • <meta charset="UTF-8"> — Permite usar ñ, acentos y caracteres especiales
  • <meta name="viewport"> — Hace que la página sea responsive en móviles
  • <body> — Todo el contenido visible de tu página

1.3 Etiquetas esenciales de HTML

Encabezados (Headings)

HTML tiene 6 niveles de encabezados, del más importante al menos importante:

<h1>Título principal (solo uno por página)</h1>
<h2>Sección principal</h2>
<h3>Subsección</h3>
<h4>Sub-subsección</h4>
<h5>Detalle menor</h5>
<h6>El menos importante</h6>

Regla de oro de SEO: Solo debe haber un <h1> por página. Los buscadores usan el h1 para entender de qué trata tu página.

Párrafos y texto

<p>Este es un párrafo de texto normal.</p>
<p>Este párrafo tiene texto <strong>importante (bold)</strong> y texto <em>enfatizado (italic)</em>.</p>

Enlaces

<!-- Enlace simple -->
<a href="https://8devmx.com">Visitar 8devmx</a>

<!-- Abrir en nueva pestaña -->
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer">YouTube</a>

<!-- Enlace con imagen -->
<a href="/blog">
  <img src="banner.jpg" alt="Ir al blog">
</a>

Imágenes

<img src="foto.jpg" alt="Descripción de la imagen" width="800" height="420" loading="lazy">

El atributo alt es obligatorio para accesibilidad y SEO. Describe la imagen para personas que no pueden verla.

Listas

<!-- Lista desordenada (bullet points) -->
<ul>
  <li>HTML para estructura</li>
  <li>CSS para diseño</li>
  <li>JavaScript para interactividad</li>
</ul>

<!-- Lista ordenada (numerada) -->
<ol>
  <li>Aprender HTML</li>
  <li>Practicar con proyectos</li>
  <li>Aprender CSS</li>
</ol>

Tablas

Para datos tabulares (no para layout):

<table>
  <thead>
    <tr>
      <th>Tecnología</th>
      <th>Función</th>
      <th>Dificultad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura</td>
      <td>Fácil</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Diseño</td>
      <td>Media</td>
    </tr>
  </tbody>
</table>

1.4 HTML Semántico: La clave del SEO

El HTML semántico usa etiquetas que describen el significado del contenido, no solo su apariencia. Esto es crucial para:

  • SEO: Google entiende mejor tu contenido
  • Accesibilidad: Los lectores de pantalla navegan por secciones semánticas
  • Mantenimiento: El código es más legible y organizado

Estructura semántica de una página

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Blog de Desarrollo Web</title>
  <meta name="description" content="Tutoriales de desarrollo web en español">
</head>
<body>

  <!-- Encabezado del sitio -->
  <header>
    <nav>
      <a href="/">Inicio</a>
      <a href="/blog">Blog</a>
      <a href="/contacto">Contacto</a>
    </nav>
  </header>

  <!-- Contenido principal -->
  <main>
    <article>
      <header>
        <h1>Cómo Aprender HTML y CSS en 2026</h1>
        <p>Publicado el <time datetime="2026-04-06">6 de abril de 2026</time></p>
      </header>

      <section>
        <h2>¿Por qué empezar con HTML?</h2>
        <p>HTML es la base de toda página web...</p>
      </section>

      <section>
        <h2>Primeros pasos con CSS</h2>
        <p>Una vez que dominas HTML, CSS te permite...</p>
      </section>

      <footer>
        <p>Autor: 8devmx</p>
      </footer>
    </article>

    <!-- Sidebar o contenido relacionado -->
    <aside>
      <h2>Artículos relacionados</h2>
      <ul>
        <li><a href="/html-desde-cero">Curso de HTML desde cero</a></li>
        <li><a href="/css-flexbox-desde-cero">CSS Flexbox desde cero</a></li>
      </ul>
    </aside>
  </main>

  <!-- Pie de página del sitio -->
  <footer>
    <p>&copy; 2026 8devmx. Todos los derechos reservados.</p>
  </footer>

</body>
</html>

Etiquetas semánticas esenciales:

EtiquetaPropósitoCuándo usarla
<header>Encabezado del sitio o artículoLogo, navegación, título del post
<nav>Navegación principalMenú del sitio, tabla de contenidos
<main>Contenido principal únicoEl contenido central de la página
<article>Contenido autocontenidoPosts de blog, noticias, tutoriales
<section>Sección temática del contenidoCapítulos, secciones con encabezado
<aside>Contenido relacionado indirectamenteSidebar, notas al margen, recomendaciones
<footer>Pie de páginaCopyright, enlaces legales, créditos

1.5 Formularios y entrada de datos

Los formularios son la puerta de entrada para que los usuarios interactúen con tu sitio:

<form action="/enviar" method="POST">
  <div>
    <label for="nombre">Nombre completo:</label>
    <input type="text" id="nombre" name="nombre" required placeholder="Tu nombre">
  </div>

  <div>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email" required placeholder="tu@email.com">
  </div>

  <div>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" rows="4" placeholder="Escribe tu mensaje..."></textarea>
  </div>

  <div>
    <label>
      <input type="checkbox" name="terminos" required>
      Acepto los términos y condiciones
    </label>
  </div>

  <button type="submit">Enviar mensaje</button>
</form>

Tipos de input más usados:

TipoUsoEjemplo
textTexto libreNombre, ciudad
emailCorreo electrónico (valida automáticamente)tu@email.com
passwordContraseña (oculta caracteres)••••••••
numberNúmerosCantidad, edad
dateSelector de fechaCalendario nativo
urlURL válidahttps://8devmx.com
telNúmero telefónico+52 998 123 4567
checkboxSí/No múltipleAceptar términos
radioSelección únicaGénero, opción exclusiva

1.6 Mejores prácticas de HTML en 2026

  1. Siempre declara el idioma: <html lang="es"> para accesibilidad y SEO
  2. Un solo h1 por página: El título principal debe ser único y descriptivo
  3. Usa etiquetas semánticas: <article>, <section>, <nav> en lugar de solo <div>
  4. Atributo alt en imágenes: Describe cada imagen para accesibilidad
  5. Labels en formularios: Cada input debe tener un <label> asociado
  6. Meta viewport obligatorio: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. Meta description: Cada página debe tener una descripción única de 150-160 caracteres

Para más detalle sobre cómo funcionan los formularios, revisa nuestro artículo sobre formularios en HTML.

Parte 2: CSS — El Arte del Diseño Web

2.1 ¿Qué es CSS y cómo funciona?

CSS (Cascading Style Sheets) es el lenguaje que controla la apariencia visual de tu HTML. Si HTML es el esqueleto de una página web, CSS es la piel, la ropa, el maquillaje y todo lo que la hace visualmente atractiva.

CSS funciona con un sistema simple de reglas. Cada regla tiene:

  1. Un selector que apunta a los elementos HTML
  2. Propiedades que definen qué cambiar
  3. Valores que definen cómo cambiarlo
/* Selector { propiedad: valor; } */
h1 {
  color: #E53E3E;
  font-size: 2.5rem;
  font-weight: bold;
}

Formas de incluir CSS:

<!-- 1. Inline (no recomendado) -->
<h1 style="color: red;">Título</h1>

<!-- 2. Interno en el head -->
<style>
  h1 { color: red; }
</style>

<!-- 3. Externo (RECOMENDADO) -->
<link rel="stylesheet" href="styles.css">

2.2 Selectores: El poder de apuntar elementos

Los selectores CSS son tu herramienta para decirle al navegador exactamente a qué elementos aplicar estilos.

/* Por etiqueta */
p { color: #333; }

/* Por clase */
.destacado { background-color: #fff3cd; }

/* Por ID */
#header { background: #1a1a2e; }

/* Descendiente */
nav a { color: white; }

/* Hijo directo */
ul > li { margin-bottom: 0.5rem; }

/* Múltiples selectores */
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }

/* Pseudo-clases */
a:hover { color: #E53E3E; }
input:focus { outline: 2px solid #E53E3E; }
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(even) { background: #f8f9fa; }

/* Pseudo-elementos */
p::first-line { font-weight: bold; }
blockquote::before { content: '"'; font-size: 2rem; }

Especificidad: Cuando dos reglas apuntan al mismo elemento, gana la más específica:

  1. Estilos inline (más específico)
  2. IDs (#header)
  3. Clases, pseudo-clases, atributos (.btn, :hover)
  4. Etiquetas, pseudo-elementos (p, ::before)

2.3 El Modelo de Caja (Box Model)

Todo elemento en CSS es una caja rectangular. Entender el modelo de caja es absolutamente fundamental para dominar CSS.

.caja {
  /* El contenido */
  width: 300px;
  height: 200px;

  /* Espacio interno */
  padding: 20px;

  /* Borde */
  border: 2px solid #E53E3E;

  /* Espacio externo */
  margin: 15px;
}

La fórmula del tamaño real:

  • Ancho real = width + padding-left + padding-right + border-left + border-right
  • Alto real = height + padding-top + padding-bottom + border-top + border-bottom

Para evitar cálculos complicados, usa box-sizing: border-box:

* {
  box-sizing: border-box;
}

Con border-box, el width incluye el padding y el border. Esto hace que los cálculos sean mucho más intuitivos.

2.4 Flexbox: Layouts flexibles

Flexbox (Flexible Box Layout) es el sistema de CSS para alinear y distribuir elementos en una dimensión (fila O columna). Es perfecto para:

  • Navbars con logo a la izquierda y menú a la derecha
  • Centrar contenido vertical y horizontalmente
  • Tarjetas en fila que se adaptan al espacio disponible
  • Botones de formulario alineados
/* Activar Flexbox */
.contenedor {
  display: flex;
}

/* Dirección del eje principal */
.contenedor {
  flex-direction: row;          /* Horizontal (default) */
  flex-direction: column;       /* Vertical */
  flex-direction: row-reverse;  /* Horizontal invertido */
}

/* Alineación en eje principal */
.contenedor {
  justify-content: flex-start;    /* Al inicio */
  justify-content: center;        /* Centrado */
  justify-content: flex-end;      /* Al final */
  justify-content: space-between; /* Espacio entre elementos */
  justify-content: space-around;  /* Espacio alrededor */
  justify-content: space-evenly;  /* Espacio uniforme */
}

/* Alineación en eje cruzado */
.contenedor {
  align-items: stretch;     /* Estirar (default) */
  align-items: flex-start;  /* Arriba */
  align-items: center;      /* Centro */
  align-items: flex-end;    /* Abajo */
}

/* Espacio entre elementos */
.contenedor {
  gap: 1rem;
}

Ejemplo práctico: Navbar responsive

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1a1a2e;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.navbar .menu {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.navbar .menu a {
  color: #e2e8f0;
  text-decoration: none;
  transition: color 0.2s;
}

.navbar .menu a:hover {
  color: #E53E3E;
}

Para dominar Flexbox completamente, revisa nuestra guía de CSS Flexbox desde cero.

2.5 CSS Grid: Layouts bidimensionales

Mientras Flexbox maneja una dimensión (fila O columna), CSS Grid maneja ambas simultáneamente. Es ideal para:

  • Layouts de página completa (header, sidebar, main, footer)
  • Galerías de imágenes en cuadrícula
  • Tarjetas de productos
  • Cualquier diseño que necesite filas Y columnas
.grid-container {
  display: grid;

  /* Definir columnas */
  grid-template-columns: 200px 200px 200px;  /* 3 columnas fijas */
  grid-template-columns: 1fr 1fr 1fr;        /* 3 columnas iguales */
  grid-template-columns: repeat(3, 1fr);     /* Equivalente al anterior */
  grid-template-columns: 250px 1fr 1fr;      /* Sidebar + 2 columnas flexibles */

  /* Definir filas */
  grid-template-rows: auto 1fr auto;  /* Header flexible, contenido, footer */

  /* Espacio entre celdas */
  gap: 1.5rem;
}

Grid responsive sin media queries:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Esta sola línea crea una cuadrícula que:

  • En desktop: muestra 3-4 columnas
  • En tablet: muestra 2 columnas
  • En móvil: muestra 1 columna

Todo automáticamente, sin media queries.

Ejemplo: Layout de página completa

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1;  /* Ocupa todas las columnas */
  background: #1a1a2e;
  color: white;
  padding: 1rem 2rem;
}

.sidebar {
  background: #f8f9fa;
  padding: 2rem;
}

.main-content {
  padding: 2rem;
}

.footer {
  grid-column: 1 / -1;
  background: #1a1a2e;
  color: #e2e8f0;
  text-align: center;
  padding: 2rem;
}

2.6 Responsive Design y Media Queries

El diseño responsive hace que tu página se vea bien en cualquier tamaño de pantalla. Se logra con dos herramientas:

Viewport meta tag (obligatorio)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sin esta línea, los navegadores móviles simulan un ancho de 980px y tu página se ve diminuta.

Media Queries

/* Mobile First: diseña para móvil primero */

/* Estilos base (móvil) */
.container {
  padding: 1rem;
}

.grid {
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Desktop grande (1280px+) */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }

  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Breakpoints estándar de la industria:

DispositivoBreakpointUso
Móvil pequeño< 640pxTeléfonos en vertical
Móvil grande640px+Teléfonos en horizontal
Tablet768px+iPads y tablets
Desktop1024px+Laptops y monitores
Desktop grande1280px+Monitores grandes

Unidades responsive recomendadas:

  • rem para tamaños de fuente y espaciado (1rem = 16px por defecto)
  • em para padding/margin relativo al font-size del elemento
  • % o fr para anchos de contenedores
  • vw y vh para dimensiones relativas a la ventana

2.7 Variables CSS y temas dinámicos

Las Custom Properties (variables CSS) te permiten definir valores reutilizables y cambiar temas dinámicamente:

:root {
  --color-primary: #E53E3E;
  --color-primary-hover: #C53030;
  --color-bg: #111213;
  --color-surface: #1A1B1D;
  --color-text: #E8E6E1;
  --color-text-muted: #8A8A8E;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --radius: 0.75rem;
}

/* Uso */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.btn {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
}

.btn:hover {
  background-color: var(--color-primary-hover);
}

/* Tema claro con una sola regla */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f8f9fa;
  --color-text: #1a1a2e;
  --color-text-muted: #6c757d;
}

Parte 3: HTML + CSS Juntos — Proyecto Práctico

Vamos a construir una landing page completa combinando todo lo aprendido:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>8devmx - Aprende Desarrollo Web</title>
  <meta name="description" content="Tutoriales prácticos de desarrollo web en español. Aprende HTML, CSS, JavaScript y más.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Navegación -->
  <header class="site-header">
    <nav class="nav-container">
      <a href="/" class="logo">
        <img src="/logo.webp" alt="8devmx" width="120" height="40">
      </a>
      <ul class="nav-menu">
        <li><a href="/rutas/">Rutas</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/herramientas/">Herramientas</a></li>
        <li><a href="/contacto/">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hero -->
  <main>
    <section class="hero">
      <div class="hero-content">
        <h1>Aprende <span class="gradient-text">Desarrollo Web</span></h1>
        <p>Tutoriales prácticos con código real. Desde cero hasta profesional.</p>
        <div class="hero-buttons">
          <a href="/rutas/" class="btn btn-primary">Empezar desde cero</a>
          <a href="/blog/" class="btn btn-outline">Ver tutoriales</a>
        </div>
      </div>
    </section>

    <!-- Grid de tecnologías -->
    <section class="tech-grid container">
      <h2>Tecnologías que aprenderás</h2>
      <div class="grid">
        <article class="card">
          <div class="card-icon">📄</div>
          <h3>HTML</h3>
          <p>La estructura de toda página web. Aprende etiquetas, semántica y accesibilidad.</p>
          <a href="/category/html/">Ver tutoriales →</a>
        </article>

        <article class="card">
          <div class="card-icon">🎨</div>
          <h3>CSS</h3>
          <p>Diseño visual moderno con Flexbox, Grid, variables CSS y animaciones.</p>
          <a href="/category/css/">Ver tutoriales →</a>
        </article>

        <article class="card">
          <div class="card-icon">⚡</div>
          <h3>JavaScript</h3>
          <p>Interactividad y lógica. Desde variables hasta manipulación del DOM.</p>
          <a href="/category/javascript/">Ver tutoriales →</a>
        </article>

        <article class="card">
          <div class="card-icon">🐘</div>
          <h3>PHP</h3>
          <p>Backend poderoso. Servidores, bases de datos y aplicaciones completas.</p>
          <a href="/category/php/">Ver tutoriales →</a>
        </article>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="site-footer">
    <p>&copy; 2026 8devmx. Tutoriales de desarrollo web en español.</p>
  </footer>

</body>
</html>
/* ===== RESET ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== VARIABLES ===== */
:root {
  --color-primary: #E53E3E;
  --color-primary-hover: #C53030;
  --color-bg: #111213;
  --color-surface: #1A1B1D;
  --color-surface-2: #222426;
  --color-text: #E8E6E1;
  --color-text-muted: #8A8A8E;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius: 0.75rem;
  --container: min(90%, 1200px);
}

/* ===== BASE ===== */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: white;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

.container {
  width: var(--container);
  margin: 0 auto;
  padding: 4rem 1rem;
}

/* ===== HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(17, 18, 19, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem;
}

.nav-menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-menu a {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-menu a:hover {
  color: var(--color-primary);
}

/* ===== HERO ===== */
.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.gradient-text {
  background: linear-gradient(135deg, #E53E3E, #FF6B6B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ===== TECH GRID ===== */
.tech-grid h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: all 0.3s;
}

.card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .nav-menu {
    display: none; /* En producción usarías un hamburger menu */
  }

  .hero {
    min-height: 60vh;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

Este proyecto demuestra:

  • HTML semántico con <header>, <main>, <section>, <article>, <footer>
  • CSS con variables custom properties para consistencia
  • Flexbox para la navegación
  • CSS Grid con auto-fit y minmax para layouts responsive automáticos
  • clamp() para tipografía fluida
  • Media queries para ajustes en móvil
  • Efectos hover con transiciones suaves
  • backdrop-filter para el header sticky con blur

Parte 4: Siguientes Pasos

¡Felicidades! Si has llegado hasta aquí, ya tienes los fundamentos sólidos de HTML y CSS. Pero esto es solo el comienzo. Aquí te dejo la ruta de aprendizaje recomendada:

1. Practica con proyectos reales

No te quedes solo en teoría. Construye:

  • Una página personal de portafolio
  • Un clon de la página de inicio de Google
  • Una tarjeta de producto con imagen, precio y botón
  • Un formulario de registro completo

2. Aprende JavaScript

Una vez que domines HTML y CSS, el siguiente paso natural es JavaScript para agregar interactividad. Te recomendamos empezar con nuestros tutoriales de fundamentos de JavaScript y aprender a manipular el DOM.

3. Explora frameworks CSS

Cuando ya tengas CSS base dominado, explora:

  • Tailwind CSS — Utility-first, el más popular en 2026
  • Bootstrap — Componentes predefinidos, ideal para prototipos rápidos
  • CSS-in-JS — Styled Components, Emotion (para React)

4. Aprende un framework de JavaScript

  • React — El más demandado laboralmente
  • Astro — Perfecto para sitios de contenido (¡el que usa este sitio!)
  • Next.js — React con server-side rendering

5. Sigue la Ruta del Ninja

En 8devmx tenemos rutas de aprendizaje estructuradas que te guían paso a paso:

Recursos adicionales en 8devmx

Resumen de esta guía:

ConceptoImportanciaTiempo estimado
Estructura HTML básicaEsencial1 semana
HTML semánticoEsencial1 semana
CSS básico (selectores, propiedades)Esencial1-2 semanas
Box ModelEsencial3-5 días
FlexboxEsencial1 semana
CSS GridMuy importante1-2 semanas
Responsive DesignEsencial1 semana
Variables CSSImportante3-5 días
FormulariosImportante1 semana
AccesibilidadImportante1 semana

Total estimado: 2-3 meses con práctica diaria de 1-2 horas.

El desarrollo web es una maratón, no un sprint. Lo más importante es practicar todos los días, aunque sea 30 minutos. Construye cosas, rómpelas, arréglalas, y sobre todo, nunca dejes de aprender.