Skip to content
Logo de la documentación HoneyCode

10. Estructura Avanzada

🏛️ Estructura Avanzada de Páginas

Section titled “🏛️ Estructura Avanzada de Páginas”

Una estructura avanzada de páginas web va más allá de los elementos básicos, incorporando organización modular, navegación interna eficiente, tipografías personalizadas e iconografía profesional para crear experiencias web completas y pulidas.

📦 Organización Modular de Contenido

Section titled “📦 Organización Modular de Contenido”

La organización modular consiste en dividir el contenido en componentes reutilizables y bien estructurados que facilitan el mantenimiento y la escalabilidad.

Principios de Modularidad

Section titled “Principios de Modularidad”
PrincipioDescripciónBeneficio
🧩 Separación de ResponsabilidadesCada módulo tiene un propósito específicoCódigo más mantenible
🔄 ReutilizaciónComponentes que se usan en múltiples lugaresMenos código duplicado
📐 ConsistenciaEstructura uniforme en toda la aplicaciónMejor experiencia de usuario
🎯 IndependenciaMódulos funcionan de forma autónomaFácil testing y debugging

Patrones de Organización

Section titled “Patrones de Organización”
componentes.html
<!-- Card Component -->
<article class="card">
<div class="card__image">
  <img src="image.jpg" alt="Descripción">
</div>
<div class="card__content">
  <h3 class="card__title">Título</h3>
  <p class="card__description">Descripción...</p>
  <a href="#" class="card__link">Leer más</a>
</div>
</article>


<!-- Button Component -->
<button class="btn btn--primary btn--large">
<span class="btn__icon">🚀</span>
<span class="btn__text">Comenzar</span>
</button>


<!-- Alert Component -->
<div class="alert alert--success">
<span class="alert__icon">✅</span>
<p class="alert__message">Operación exitosa</p>
<button class="alert__close">×</button>
</div>


<!-- Navigation Component -->
<nav class="navbar">
<ul class="navbar__list">
  <li class="navbar__item navbar__item--active">
    <a href="#" class="navbar__link">Inicio</a>
  </li>
  <li class="navbar__item">
    <a href="#" class="navbar__link">Servicios</a>
  </li>
</ul>
</nav>

⚓ Anclas y Navegación Interna

Section titled “⚓ Anclas y Navegación Interna”

Las anclas permiten crear enlaces a secciones específicas dentro de la misma página, mejorando la navegación y la experiencia del usuario.

Sintaxis de Anclas

Section titled “Sintaxis de Anclas”
anclas-basicas.html
<!-- Definir el destino con ID -->
<section id="sobre-nosotros">
<h2>Sobre Nosotros</h2>
<p>Contenido de la sección...</p>
</section>


<section id="servicios">
<h2>Nuestros Servicios</h2>
<p>Contenido de la sección...</p>
</section>


<section id="contacto">
<h2>Contacto</h2>
<p>Contenido de la sección...</p>
</section>


<!-- Enlaces a las anclas -->
<nav>
<a href="#sobre-nosotros">Sobre Nosotros</a>
<a href="#servicios">Servicios</a>
<a href="#contacto">Contacto</a>
</nav>


<!-- Volver al inicio -->
<a href="#top">⬆️ Volver arriba</a>
<a href="#">⬆️ Volver arriba (alternativa)</a>

Ejemplo Interactivo

Section titled “Ejemplo Interactivo”
Editor en vivo 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navegación Interna</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
  }
  
  /* Navigation */
  .nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
  }
  
  .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-brand {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
  }
  
  .nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
  }
  
  .nav-links a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: all 0.3s;
  }
  
  .nav-links a:hover,
  .nav-links a.active {
    background: rgba(255,255,255,0.2);
  }
  
  /* Sections */
  section {
    min-height: 100vh;
    padding: 100px 20px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-margin-top: 60px;
  }
  
  .section-content {
    max-width: 800px;
    text-align: center;
  }
  
  section h2 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #667eea;
  }
  
  section p {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 30px;
  }
  
  /* Colors */
  #inicio {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  
  #inicio h2,
  #inicio p {
    color: white;
  }
  
  #sobre {
    background: #f8f9fa;
  }
  
  #servicios {
    background: white;
  }
  
  #portafolio {
    background: #f8f9fa;
  }
  
  #contacto {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
  }
  
  #contacto h2,
  #contacto p {
    color: white;
  }
  
  /* Back to top button */
  .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #667eea;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.5em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s;
    opacity: 0;
    pointer-events: none;
  }
  
  .back-to-top.visible {
    opacity: 1;
    pointer-events: all;
  }
  
  .back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
  }
  
  /* Cards */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
  }
  
  .card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
  }
  
  .card:hover {
    transform: translateY(-5px);
  }
  
  .card-icon {
    font-size: 3em;
    margin-bottom: 15px;
  }
  
  .card h3 {
    color: #667eea;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
<!-- Navegación fija -->
<nav class="nav-fixed">
  <div class="nav-container">
    <div class="nav-brand">⚓ Mi Sitio</div>
    <ul class="nav-links">
      <li><a href="#inicio" class="nav-link active">🏠 Inicio</a></li>
      <li><a href="#sobre" class="nav-link">👤 Sobre</a></li>
      <li><a href="#servicios" class="nav-link">💼 Servicios</a></li>
      <li><a href="#portafolio" class="nav-link">🎨 Portafolio</a></li>
      <li><a href="#contacto" class="nav-link">📧 Contacto</a></li>
    </ul>
  </div>
</nav>

<!-- Secciones -->
<section id="inicio">
  <div class="section-content">
    <h2>🚀 Bienvenido</h2>
    <p>Navega por las diferentes secciones usando el menú superior</p>
    <p>El scroll es suave y el enlace activo se resalta automáticamente</p>
  </div>
</section>

<section id="sobre">
  <div class="section-content">
    <h2>👤 Sobre Nosotros</h2>
    <p>Esta sección demuestra la navegación interna con anclas</p>
    <p>Cada sección tiene un ID único que permite enlazar directamente</p>
  </div>
</section>

<section id="servicios">
  <div class="section-content">
    <h2>💼 Nuestros Servicios</h2>
    <div class="cards">
      <div class="card">
        <div class="card-icon">🎨</div>
        <h3>Diseño</h3>
        <p>Diseño web moderno</p>
      </div>
      <div class="card">
        <div class="card-icon">💻</div>
        <h3>Desarrollo</h3>
        <p>Código limpio</p>
      </div>
      <div class="card">
        <div class="card-icon">🚀</div>
        <h3>Deploy</h3>
        <p>Hosting rápido</p>
      </div>
    </div>
  </div>
</section>

<section id="portafolio">
  <div class="section-content">
    <h2>🎨 Portafolio</h2>
    <p>Aquí mostramos nuestros proyectos destacados</p>
    <p>Observa cómo el menú superior resalta la sección actual</p>
  </div>
</section>

<section id="contacto">
  <div class="section-content">
    <h2>📧 Contacto</h2>
    <p>¿Tienes un proyecto en mente?</p>
    <p>¡Contáctanos y hagámoslo realidad!</p>
  </div>
</section>

<!-- Botón volver arriba -->
<a href="#inicio" class="back-to-top" id="backToTop">⬆️</a>

<script>
  // Resaltar enlace activo
  const sections = document.querySelectorAll('section[id]');
  const navLinks = document.querySelectorAll('.nav-link');
  
  window.addEventListener('scroll', () => {
    let current = '';
    
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.clientHeight;
      
      if (pageYOffset >= sectionTop - 100) {
        current = section.getAttribute('id');
      }
    });
    
    navLinks.forEach(link => {
      link.classList.remove('active');
      if (link.getAttribute('href') === '#' + current) {
        link.classList.add('active');
      }
    });
    
    // Mostrar/ocultar botón volver arriba
    const backToTop = document.getElementById('backToTop');
    if (window.pageYOffset > 300) {
      backToTop.classList.add('visible');
    } else {
      backToTop.classList.remove('visible');
    }
  });
</script>
</body>
</html>

🔤 Importación de Fuentes Externas

Section titled “🔤 Importación de Fuentes Externas”

Las fuentes personalizadas mejoran significativamente la estética y la identidad visual de tu sitio web.

Google Fonts

Section titled “Google Fonts”
google-fonts-link.html
<!-- En el <head> -->
<head>
<meta charset="UTF-8">
<title>Mi Sitio</title>


<!-- Importar una fuente -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">


<!-- Importar múltiples fuentes -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
</head>


<!-- Usar en CSS -->
<style>
body {
  font-family: 'Roboto', sans-serif;
}


h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
}


p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}
</style>

Fuentes Populares y Combinaciones

Section titled “Fuentes Populares y Combinaciones”
Fuente PrincipalFuente SecundariaUso Recomendado
MontserratOpen SansSitios modernos y corporativos
Playfair DisplayLatoBlogs y sitios editoriales
RobotoRoboto SlabAplicaciones y dashboards
PoppinsInterSitios tech y startups
RalewayMerriweatherPortafolios creativos

Optimización de Fuentes

Section titled “Optimización de Fuentes”
optimizacion-fuentes.html
<!-- Optimización de carga de fuentes -->
<head>
<!-- 1. Preconnect para conexión temprana -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


<!-- 2. Solo cargar pesos necesarios -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">


<!-- 3. Usar font-display: swap -->
<style>
  @font-face {
    font-family: 'MiFuente';
    src: url('fuente.woff2') format('woff2');
    font-display: swap; /* Muestra texto inmediatamente */
  }
</style>


<!-- 4. Preload para fuentes críticas -->
<link rel="preload" href="fonts/mifuente.woff2" as="font" type="font/woff2" crossorigin>
</head>

🎨 Integración de Íconos

Section titled “🎨 Integración de Íconos”

Los íconos mejoran la interfaz visual y facilitan la comprensión del contenido.

Font Awesome

Section titled “Font Awesome”
fontawesome-cdn.html
<!-- Importar Font Awesome desde CDN -->
<head>
<!-- Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>


<body>
<!-- Íconos sólidos -->
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-star"></i>


<!-- Íconos regulares -->
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-star"></i>


<!-- Íconos de marcas -->
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>


<!-- Tamaños -->
<i class="fa-solid fa-home fa-xs"></i>
<i class="fa-solid fa-home fa-sm"></i>
<i class="fa-solid fa-home fa-lg"></i>
<i class="fa-solid fa-home fa-2x"></i>
<i class="fa-solid fa-home fa-3x"></i>


<!-- Colores y estilos -->
<i class="fa-solid fa-heart" style="color: red;"></i>
<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-heart fa-beat"></i>
</body>

Íconos SVG

Section titled “Íconos SVG”
svg-inline.html
<!-- SVG directamente en HTML -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
</svg>


<!-- SVG con estilos -->
<svg class="icon icon-heart" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="currentColor"/>
</svg>


<style>
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
}


.icon-heart {
  color: #e74c3c;
}


.icon-heart:hover {
  color: #c0392b;
  transform: scale(1.2);
  transition: all 0.3s;
}
</style>

Comparación de Soluciones de Íconos

Section titled “Comparación de Soluciones de Íconos”
SoluciónVentajasDesventajasMejor Para
Font AwesomeFácil de usar, gran variedadArchivo grande, fuenteProyectos rápidos
SVG InlinePersonalizable, ligeroMás código HTMLÍconos únicos
SVG SpritesReutilizable, eficienteConfiguración inicialProyectos grandes
Lucide/FeatherModerno, ligeroMenos íconosDiseños minimalistas
Material IconsConsistente, familiarEstilo específicoApps estilo Material

🎨 Ejemplo Completo Integrado

Section titled “🎨 Ejemplo Completo Integrado”
Editor en vivo 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estructura Avanzada Completa</title>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
  }
  
  h1, h2, h3 {
    font-family: 'Playfair Display', serif;
  }
  
  /* Header */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  
  .header__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header__logo {
    font-size: 1.5em;
    font-weight: 700;
    color: #667eea;
  }
  
  .header__nav {
    display: flex;
    gap: 30px;
    list-style: none;
  }
  
  .header__nav a {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
  }
  
  .header__nav a:hover {
    color: #667eea;
  }
  
  /* Hero */
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 100px 20px 50px;
  }
  
  .hero__title {
    font-size: 3.5em;
    margin-bottom: 20px;
  }
  
  .hero__subtitle {
    font-size: 1.3em;
    margin-bottom: 30px;
    opacity: 0.9;
  }
  
  .hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
  }
  
  .hero__cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  }
  
  /* Features */
  .features {
    padding: 80px 20px;
    background: #f8f9fa;
  }
  
  .features__container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .features__title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #667eea;
  }
  
  .features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
  }
  
  .feature-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s;
  }
  
  .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  }
  
  .feature-card__icon {
    font-size: 3em;
    color: #667eea;
    margin-bottom: 20px;
  }
  
  .feature-card__title {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #333;
  }
  
  .feature-card__description {
    color: #666;
  }
  
  /* Services */
  .services {
    padding: 80px 20px;
    background: white;
  }
  
  .services__container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .services__title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #667eea;
  }
  
  .services__list {
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .services__item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    margin-bottom: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s;
  }
  
  .services__item:hover {
    background: #667eea;
    color: white;
    transform: translateX(10px);
  }
  
  .services__item i {
    font-size: 1.5em;
    color: #28a745;
  }
  
  .services__item:hover i {
    color: white;
  }
  
  /* Footer */
  .footer {
    background: #2c3e50;
    color: white;
    padding: 50px 20px 20px;
  }
  
  .footer__container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .footer__social {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .footer__social a {
    color: white;
    font-size: 1.5em;
    transition: all 0.3s;
  }
  
  .footer__social a:hover {
    color: #667eea;
    transform: scale(1.2);
  }
  
  .footer__copyright {
    opacity: 0.7;
    font-size: 0.9em;
  }
  
  /* Back to top */
  .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
  }
  
  .back-to-top.visible {
    opacity: 1;
    pointer-events: all;
  }
  
  .back-to-top:hover {
    transform: translateY(-5px);
    background: #764ba2;
  }
</style>
</head>
<body>
<!-- Header -->
<header class="header">
  <div class="header__container">
    <div class="header__logo">
      <i class="fa-solid fa-rocket"></i> MiSitio
    </div>
    <nav>
      <ul class="header__nav">
        <li><a href="#inicio"><i class="fa-solid fa-house"></i> Inicio</a></li>
        <li><a href="#features"><i class="fa-solid fa-star"></i> Features</a></li>
        <li><a href="#servicios"><i class="fa-solid fa-briefcase"></i> Servicios</a></li>
      </ul>
    </nav>
  </div>
</header>

<!-- Hero -->
<section id="inicio" class="hero">
  <div class="hero__content">
    <h1 class="hero__title">🚀 Estructura Avanzada</h1>
    <p class="hero__subtitle">Organización modular, fuentes personalizadas e íconos profesionales</p>
    <a href="#features" class="hero__cta">
      Explorar Features
      <i class="fa-solid fa-arrow-down"></i>
    </a>
  </div>
</section>

<!-- Features -->
<section id="features" class="features">
  <div class="features__container">
    <h2 class="features__title">✨ Características Principales</h2>
    <div class="features__grid">
      <div class="feature-card">
        <div class="feature-card__icon">
          <i class="fa-solid fa-cubes"></i>
        </div>
        <h3 class="feature-card__title">Modular</h3>
        <p class="feature-card__description">Componentes reutilizables y bien organizados</p>
      </div>
      
      <div class="feature-card">
        <div class="feature-card__icon">
          <i class="fa-solid fa-font"></i>
        </div>
        <h3 class="feature-card__title">Tipografía</h3>
        <p class="feature-card__description">Fuentes de Google Fonts integradas</p>
      </div>
      
      <div class="feature-card">
        <div class="feature-card__icon">
          <i class="fa-solid fa-icons"></i>
        </div>
        <h3 class="feature-card__title">Íconos</h3>
        <p class="feature-card__description">Font Awesome para iconografía profesional</p>
      </div>
    </div>
  </div>
</section>

<!-- Services -->
<section id="servicios" class="services">
  <div class="services__container">
    <h2 class="services__title">💼 Nuestros Servicios</h2>
    <ul class="services__list">
      <li class="services__item">
        <i class="fa-solid fa-check-circle"></i>
        <span>Diseño web responsive y moderno</span>
      </li>
      <li class="services__item">
        <i class="fa-solid fa-check-circle"></i>
        <span>Desarrollo con las mejores prácticas</span>
      </li>
      <li class="services__item">
        <i class="fa-solid fa-check-circle"></i>
        <span>Optimización de rendimiento</span>
      </li>
      <li class="services__item">
        <i class="fa-solid fa-check-circle"></i>
        <span>SEO y accesibilidad incluidos</span>
      </li>
    </ul>
  </div>
</section>

<!-- Footer -->
<footer class="footer">
  <div class="footer__container">
    <div class="footer__social">
      <a href="#"><i class="fa-brands fa-facebook"></i></a>
      <a href="#"><i class="fa-brands fa-twitter"></i></a>
      <a href="#"><i class="fa-brands fa-instagram"></i></a>
      <a href="#"><i class="fa-brands fa-github"></i></a>
      <a href="#"><i class="fa-brands fa-linkedin"></i></a>
    </div>
    <p class="footer__copyright">
      © 2024 MiSitio. Hecho con <i class="fa-solid fa-heart" style="color: #e74c3c;"></i> y HTML5
    </p>
  </div>
</footer>

<!-- Back to top -->
<a href="#inicio" class="back-to-top" id="backToTop">
  <i class="fa-solid fa-arrow-up"></i>
</a>

<script>
  // Mostrar/ocultar botón volver arriba
  window.addEventListener('scroll', () => {
    const backToTop = document.getElementById('backToTop');
    if (window.pageYOffset > 300) {
      backToTop.classList.add('visible');
    } else {
      backToTop.classList.remove('visible');
    }
  });
</script>
</body>
</html>

✅ Mejores Prácticas

Section titled “✅ Mejores Prácticas”

  1. Organiza tu código de forma modular

    Divide tu HTML, CSS y JavaScript en componentes reutilizables.

    <!-- ✅ Buena organización -->
    <article class="card">
      <div class="card__header">...</div>
      <div class="card__body">...</div>
      <div class="card__footer">...</div>
    </article>

  2. Usa IDs únicos para anclas

    Cada ID debe ser único y descriptivo.

    <section id="sobre-nosotros">...</section>
    <section id="nuestros-servicios">...</section>

  3. Implementa scroll suave

    Mejora la experiencia de navegación interna.

    html {
      scroll-behavior: smooth;
    }

  4. Optimiza la carga de fuentes

    Usa preconnect y carga solo los pesos necesarios.

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

  5. Elige la solución de íconos adecuada

    • Font Awesome: Proyectos rápidos
    • SVG: Máxima personalización
    • Sprites: Proyectos grandes

  6. Mantén consistencia visual

    Usa un sistema de diseño coherente con fuentes e íconos.

  7. Considera el rendimiento

    • Minimiza el número de fuentes
    • Usa font-display: swap
    • Carga íconos de forma eficiente

  8. Prueba la accesibilidad

    • Asegura contraste adecuado
    • Usa texto alternativo para íconos
    • Verifica navegación por teclado

🎯 Checklist de Estructura Avanzada

Section titled “🎯 Checklist de Estructura Avanzada”
  • ✅ Código organizado en módulos/componentes
  • ✅ Nomenclatura consistente (BEM o similar)
  • ✅ Anclas con IDs únicos y descriptivos
  • ✅ Scroll suave implementado
  • ✅ Navegación interna funcional
  • ✅ Fuentes personalizadas optimizadas
  • ✅ Solo pesos de fuente necesarios
  • ✅ Íconos implementados correctamente
  • ✅ Tamaños de íconos consistentes
  • ✅ Botón “volver arriba” funcional
  • ✅ Responsive en todos los dispositivos
  • ✅ Rendimiento optimizado

🚀 Próximos Pasos

Section titled “🚀 Próximos Pasos”

Ahora que dominas la estructura avanzada, puedes continuar con:

📚 Recursos Adicionales

Section titled “📚 Recursos Adicionales”
🐝