# Bootstrap 5.3.8 paso a paso: construye el sitio de tu club de videojuegos > **Tutorial guiado de autoestudio · 3 horas y 30 minutos · Nivel principiante** > > 🧪 **Versión 2 (revisada y verificada).** Corrige cuatro problemas reales que tenía > la v1 y que se comprobaron abriendo el sitio en un navegador: > > | Problema | Qué hace ahora | > |---|---| > | El sitio se desplazaba de lado a lado en celular | La portada usa `g-4 g-lg-5` y el CSS parte los textos largos con `overflow-wrap` | > | El modo oscuro ignoraba la preferencia del sistema | Arranca con el tema del dispositivo (`prefers-color-scheme`) y recuerda el que elijas | > | La página parpadeaba al cargar | Un script en el `` aplica el tema antes de pintar | > | Al enviar el formulario el foco no se movía | El foco salta al primer campo con error y al mensaje de éxito | > > Además: la galería enseña a usar imágenes reales con `alt`, y se aclara cuándo usar Sass. ¡Bienvenido/a! En las próximas 3 horas y media vas a construir **PixelCrew**, la página web de un club de videojuegos de colegio. Vas a empezar con un archivo casi vacío y terminar con un sitio completo, responsive, con modo oscuro y modo claro, formulario con validación, carrusel, acordeón y ventana emergente. Y lo más importante: al final no solo tendrás un sitio terminado. Tendrás las herramientas para **crear tus propios proyectos con Bootstrap sin necesitar este tutorial**. --- ## Tabla de contenidos 1. [Antes de empezar](#antes-de-empezar) 2. [Módulo 1: Preparación del entorno](#módulo-1-preparación-del-entorno) (15 min) 3. [Módulo 2: Contenedores, grid y breakpoints](#módulo-2-contenedores-grid-y-breakpoints) (30 min) 4. [Módulo 3: Tipografía, color y utilidades](#módulo-3-tipografía-color-y-utilidades) (20 min) 5. [Módulo 4: Navbar y navegación responsive](#módulo-4-navbar-y-navegación-responsive) (25 min) 6. [Módulo 5: Tarjetas, botones, badges y alertas](#módulo-5-tarjetas-botones-badges-y-alertas) (25 min) 7. [Módulo 6: Formularios y validación](#módulo-6-formularios-y-validación) (25 min) 8. [Módulo 7: Componentes interactivos con JavaScript](#módulo-7-componentes-interactivos-con-javascript) (25 min) 9. [Módulo 8: Personalización, modo oscuro y Sass](#módulo-8-personalización-modo-oscuro-y-sass) (20 min) 10. [Módulo 9: Integración final y buenas prácticas](#módulo-9-integración-final-y-buenas-prácticas) (15 min) 11. [Módulo 10: Tu reto final y siguientes pasos](#módulo-10-tu-reto-final-y-siguientes-pasos) (10 min) 12. [Código completo del proyecto](#código-completo-del-proyecto) 13. [Hoja de referencia rápida](#hoja-de-referencia-rápida) 14. [Retos adicionales y recursos oficiales](#retos-adicionales-y-recursos-oficiales) --- ## Antes de empezar ### Qué vas a construir Una página con estas secciones, todas hechas con Bootstrap 5.3.8: | Sección | Lo que practicas | |---|---| | Barra de navegación | Navbar responsive con menú hamburguesa | | Hero (portada) | Tipografía, utilidades, color | | Estadísticas y galería | Sistema de grid y breakpoints | | "Qué hacemos" | Tarjetas, botones, badges, alertas | | Comunidad | Carrusel | | Preguntas frecuentes | Acordeón | | Inscripción | Formularios con validación | | Reglas del club | Modal (ventana emergente) | | Todo el sitio | Modo claro/oscuro y personalización | ### Prerrequisitos - Saber lo básico de **HTML** (etiquetas, atributos, enlaces) y de **CSS** (selectores, colores, márgenes). - Un **editor de código**. Recomendado: [Visual Studio Code](https://code.visualstudio.com/) con la extensión *Live Server* (te recarga la página sola cada vez que guardas). - Un navegador moderno (Chrome, Edge o Firefox). - **Conexión a internet** mientras practicas (Bootstrap se carga desde un CDN). - No necesitas instalar nada más, ni saber JavaScript, ni conocer Bootstrap. ### Cómo usar este tutorial 1. **Hazlo en orden.** Cada módulo agrega una pieza al mismo sitio, así que los módulos dependen unos de otros. 2. **Escribe o pega el código tú mismo/a y míralo funcionar.** No basta con leer. 3. **Cada módulo tiene el mismo formato:** objetivo, concepto, pasos, resultado esperado, errores comunes, mini-ejercicio y punto de control. 4. **Intenta el mini-ejercicio antes de abrir la pista** y la solución. Equivocarse ahí es parte del aprendizaje. 5. **Usa el punto de control** al final de cada módulo. Si no puedes marcar todo, repasa antes de seguir. 6. Si algo no se ve como debería, revisa la sección de **errores comunes** y las **Herramientas del navegador** (tecla `F12`). Íconos que verás: 💡 tip · ⚠️ ojo con esto · ✅ punto de control. ### Plan de tiempo | Módulo | Tema | Tiempo | |---|---|---| | 1 | Preparación del entorno | 15 min | | 2 | Contenedores, grid y breakpoints | 30 min | | 3 | Tipografía, color y utilidades | 20 min | | 4 | Navbar y navegación responsive | 25 min | | 5 | Tarjetas, botones, badges y alertas | 25 min | | 6 | Formularios y validación | 25 min | | 7 | Componentes interactivos (JS) | 25 min | | 8 | Personalización, modo oscuro y Sass | 20 min | | 9 | Integración final y buenas prácticas | 15 min | | 10 | Reto final: planificación y primer paso | 10 min | | | **Total** | **210 min (3 h 30 min)** | 💡 Los tiempos son estimaciones para una persona que escribe a ritmo normal. Si vas más rápido, aprovecha para hacer los retos adicionales; si vas más lento, está bien: lo importante es entender, no terminar primero. ### Suposiciones que hice Para no dejar decisiones abiertas, asumí lo siguiente: - **Tema del proyecto:** un club de videojuegos de colegio (PixelCrew). Los nombres, cifras y testimonios son ficticios. - **Imágenes:** para que no dependas de descargar nada, la galería empieza con emojis sobre bloques de color. En el módulo 2 verás cómo cambiarlos por fotos reales con su `alt` (usaremos fotos de ejemplo de internet; en tu club, pon las tuyas). - **Modo claro u oscuro:** el sitio **arranca con el tema que ya tiene tu dispositivo** (`prefers-color-scheme`) y recuerda el que elijas después. - **Bootstrap por CDN**, con la versión exacta **5.3.8** y sus hashes de integridad. Sass se presenta como lectura opcional: **no hace falta para nada de este tutorial**. - **El formulario no envía datos** a ningún servidor: es solo práctica de interfaz y validación. - Todo el contenido está en **español** y usa solo clases de **Bootstrap 5** (nada de jQuery ni de clases de Bootstrap 4). --- ## Módulo 1: Preparación del entorno ⏱ **15 minutos** 🎯 **Objetivo:** crear la estructura de archivos, cargar Bootstrap 5.3.8 y comprobar que funciona. ### Concepto **Bootstrap** es un framework de front-end: una colección de CSS y JavaScript ya escrita que te da tres cosas: - Un **sistema de rejilla (grid)** para organizar la página en filas y columnas. - **Componentes** listos para usar: barras de navegación, tarjetas, botones, formularios, modales... - **Utilidades**: clases pequeñas que hacen una sola cosa (`mt-3` = margen arriba, `text-center` = texto centrado). Es **mobile-first**: el diseño base piensa en celulares y luego se adapta a pantallas más grandes. Hay dos formas de usarlo. Usaremos la primera: | Forma | Cómo | Cuándo | |---|---|---| | **CDN** | Enlazas el CSS y el JS desde internet | Aprender, prototipos, sitios sencillos | | **npm + Sass** | Lo instalas y lo compilas | Proyectos grandes con personalización profunda | Bootstrap tiene dos archivos: el **CSS** (los estilos) y el **bundle JS**, que incluye todo el JavaScript de los componentes y a *Popper* (necesario para menús desplegables). Por eso usamos `bootstrap.bundle.min.js` y no el JS suelto. ### Pasos **1. Crea esta estructura de carpetas y archivos** (puedes hacerlo desde VS Code): ```text pixelcrew/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js ``` Deja `style.css` y `main.js` vacíos por ahora. **2. Pega esta plantilla en `index.html`.** Es el esqueleto de todo el proyecto. Fíjate en los comentarios ``, ``, etc.: son **marcadores** donde pegarás código en los módulos siguientes. ```html PixelCrew | Club de videojuegos
``` Observa lo importante: - ``: idioma español y el tema inicial. - El **script del ``** aplica el tema guardado (o el de tu dispositivo) antes de que se pinte nada. Sin él, el navegador muestra un tema claro y luego salta a oscuro: eso es el parpadeo. - ``: sin esta línea, Bootstrap **no** se adapta a celulares. - El CSS de Bootstrap va **antes** que tu `style.css`, para que tus estilos puedan sobrescribirlo. - Los scripts van al **final** del ``. - Los atributos `integrity` y `crossorigin` verifican que el archivo del CDN no fue alterado. No los modifiques. **3. Agrega un bloque de prueba.** Pega esto justo debajo del comentario ``: ```html

¡Hola, Bootstrap 5.3.8!

Si ves esto con estilo, todo está funcionando.

``` **4. Ábrelo en el navegador.** Con Live Server: clic derecho en `index.html` → *Open with Live Server*. Sin Live Server: doble clic en el archivo. **5. Comprueba la versión.** Abre las herramientas del navegador (`F12`), ve a la pestaña **Console** y escribe: ```js bootstrap.Tooltip.VERSION ``` Debe responder `"5.3.8"`. ### Resultado esperado Una página oscura con un título grande, un párrafo destacado y un botón azul con esquinas redondeadas. Si ves letras blancas simples sobre fondo blanco y un botón gris, Bootstrap no cargó. ### Errores comunes | Síntoma | Causa probable | Solución | |---|---|---| | La página se ve sin estilos | Sin internet, o error al copiar la URL del CDN | Revisa la conexión y compara los enlaces con los de la plantilla | | La consola dice que bloqueó el recurso por `integrity` | Se alteró el hash al copiar | Vuelve a copiar la línea completa, sin espacios extra | | El botón se ve bien pero los componentes no responden | Falta el ` Saltar al contenido

Club de videojuegos del colegio

Juega, crea y compite con PixelCrew

Somos el club donde los videojuegos se juegan, se estudian y hasta se programan. Si tienes entre 14 y 18 años, hay un lugar para ti en el equipo.

Únete al club Descubre qué hacemos

120+

miembros

12

torneos al año

3

talleres semanales

1

sala gamer

Más que jugar

Tres formas de formar parte del club. Elige la tuya (o prueba las tres).

Cada viernes

🏆 Torneos

Compite en equipo o en solitario en juegos para todos los niveles. Hay premios, diplomas y mucha rivalidad sana.

Quiero competir
Cada miércoles

🕹️ Noches de juego

Juegos cooperativos y de mesa, música y snacks. Ideal para conocer gente nueva sin presión.

Me apunto
Cada martes

💻 Taller de creación

Aprende a diseñar niveles y personajes, y a programar tu primer videojuego desde cero.

Quiero crear

Momentos del club

Un vistazo a lo que pasa en las reuniones. (Aquí irían tus fotos reales.)

Lo que dice la comunidad

Los nombres de este ejemplo son ficticios.

Preguntas frecuentes

Para nada. Hay miembros que juegan desde hace años y otros que nunca han tenido una consola. Te ayudamos a empezar.

Unirte es gratis. Solo pedimos que cuides el material y participes en las actividades.

Los martes, miércoles y viernes después de clases. Te enviamos el calendario completo cuando te inscribas.

No. El club tiene consolas, computadores y mandos para todos. Si quieres traer el tuyo, ¡bienvenido!

Únete a PixelCrew

Completa el formulario y te contamos cuándo es la primera reunión.

🎉 ¡Listo! Recibimos tu inscripción. Nos vemos en el siguiente nivel.
Escribe tu nombre (mínimo 2 letras).
Escribe un correo válido, por ejemplo nombre@correo.com.
El club es para edades entre 13 y 18 años.
Elige una opción de la lista.
@
Debes aceptar las reglas para inscribirte.
``` ### `css/style.css` ```css /* ===== 1. Variables: personalizamos Bootstrap sin tocar sus archivos ===== */ :root { --pc-accent: #7c4dff; /* Variables de Bootstrap que sobrescribimos */ --bs-primary: #7c4dff; --bs-primary-rgb: 124, 77, 255; --bs-primary-text-emphasis: #4a22b8; --bs-primary-bg-subtle: #e9e0ff; --bs-primary-border-subtle: #cbb8ff; --bs-border-radius: 0.75rem; } /* Este bloque va DESPUÉS de :root para ganar en modo oscuro */ [data-bs-theme="dark"] { --bs-body-bg: #0e0f1f; --bs-body-bg-rgb: 14, 15, 31; --bs-tertiary-bg: #161833; --bs-tertiary-bg-rgb: 22, 24, 51; --bs-primary-text-emphasis: #b8a0ff; --bs-primary-bg-subtle: #241a4d; --bs-primary-border-subtle: #4a2fa8; } /* Los componentes de Bootstrap guardan sus colores en variables LOCALES. Las cambiamos para que los botones también usen nuestro morado. */ .btn-primary { --bs-btn-bg: var(--pc-accent); --bs-btn-border-color: var(--pc-accent); --bs-btn-hover-bg: #6a3de8; --bs-btn-hover-border-color: #6a3de8; --bs-btn-active-bg: #5a30d0; --bs-btn-active-border-color: #5a30d0; --bs-btn-disabled-bg: var(--pc-accent); --bs-btn-disabled-border-color: var(--pc-accent); --bs-btn-focus-shadow-rgb: 124, 77, 255; } .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--pc-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--pc-accent); --bs-btn-hover-border-color: var(--pc-accent); --bs-btn-active-color: #fff; --bs-btn-active-bg: #5a30d0; --bs-btn-active-border-color: #5a30d0; --bs-btn-focus-shadow-rgb: 124, 77, 255; } .card { --bs-card-bg: var(--bs-tertiary-bg); } /* ===== 2. Ajustes generales ===== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Evita que la navbar fija tape los títulos al navegar por el menú */ section[id] { scroll-margin-top: 4.5rem; } /* Un texto muy largo (un correo, una URL) puede empujar la página y crear scroll horizontal en celular. `overflow-wrap: anywhere` lo parte. Ojo: `anywhere`, no `break-word`, porque es el único que además reduce el ancho mínimo de las celdas de un grid. */ body { overflow-wrap: anywhere; } /* ===== 3. Hero ===== */ .hero { background: radial-gradient(circle at 15% 20%, rgba(124, 77, 255, 0.25), transparent 45%), radial-gradient(circle at 85% 80%, rgba(13, 139, 217, 0.18), transparent 45%); } .text-gradient { background: linear-gradient(90deg, #7c4dff, #0d8bd9); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-card { background: linear-gradient(135deg, #7c4dff, #0d8bd9); } /* ===== 4. Tarjetas ===== */ .card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25) !important; } @media (prefers-reduced-motion: reduce) { .card-hover { transition: none; } .card-hover:hover { transform: none; } } /* ===== 5. Carrusel de la comunidad ===== */ .testimonio { min-height: 280px; background: linear-gradient(135deg, #4b2bb5, #0b6fa8); } /* En modo oscuro Bootstrap pone controles negros en los carruseles. Como nuestras diapositivas son oscuras en ambos modos, los forzamos a blanco. */ .carousel { --bs-carousel-indicator-active-bg: #fff; --bs-carousel-caption-color: #fff; --bs-carousel-control-icon-filter: none; } ``` ### `js/main.js` ```js // ===== Validación del formulario de inscripción ===== const formulario = document.getElementById('formUnete'); const mensajeExito = document.getElementById('exito'); formulario.addEventListener('submit', (evento) => { evento.preventDefault(); // este sitio de práctica no envía datos a ningún servidor if (formulario.checkValidity()) { formulario.reset(); formulario.classList.remove('was-validated'); mensajeExito.classList.remove('d-none'); mensajeExito.focus(); // el foco va al mensaje: quien navega con // teclado o lector de pantalla se entera } else { mensajeExito.classList.add('d-none'); formulario.classList.add('was-validated'); // Nadie se da cuenta de un error si no lo ve. Movemos el foco al primer // campo inválido: el navegador lo resalta y además lo deja preparado // para escribir de nuevo. const primerError = formulario.querySelector(':invalid'); if (primerError) primerError.focus(); } }); // ===== Modo claro / oscuro ===== const raiz = document.documentElement; const botonTema = document.getElementById('themeToggle'); const iconoTema = document.getElementById('themeIcon'); const CLAVE = 'pc-tema'; // el nombre con el que guardamos la preferencia // El tema que ya tiene el dispositivo. Se consulta, no se supone. const consultaSistema = window.matchMedia('(prefers-color-scheme: dark)'); // Leer y guardar puede fallar en modo privado: por eso van protegidos. function leerTemaGuardado() { try { return localStorage.getItem(CLAVE); } catch (error) { return null; } } function aplicarTema(tema, recordar) { raiz.setAttribute('data-bs-theme', tema); iconoTema.textContent = tema === 'dark' ? '☀️' : '🌙'; // el ícono muestra a qué modo cambiarás // Solo guardamos cuando la ELECCIÓN es de la persona. Si guardáramos el // tema del sistema, después no sabríamos si ella eligió o si fue el default. if (recordar) { try { localStorage.setItem(CLAVE, tema); } catch (error) { /* en modo privado no se guarda, pero el sitio funciona igual */ } } } // Al cargar: primero la elección de la persona; si no hay, la del sistema. aplicarTema(leerTemaGuardado() || (consultaSistema.matches ? 'dark' : 'light'), false); botonTema.addEventListener('click', () => { const actual = raiz.getAttribute('data-bs-theme'); aplicarTema(actual === 'dark' ? 'light' : 'dark', true); }); // Si la persona NO ha elegido nada y cambia el tema del sistema, la seguimos. consultaSistema.addEventListener('change', (evento) => { if (!leerTemaGuardado()) { aplicarTema(evento.matches ? 'dark' : 'light', false); } }); ``` --- ## Hoja de referencia rápida ### Grid y contenedores | Clase | Efecto | |---|---| | `container`, `container-fluid`, `container-lg` | Contenedor centrado / a todo el ancho / fluido hasta `lg` | | `row` | Fila | | `col`, `col-6`, `col-md-4`, `col-lg-auto` | Columna: igual reparto / 6 de 12 / 4 desde `md` / según contenido | | `row-cols-1`, `row-cols-md-3` | Cuántas columnas por fila | | `g-3`, `gx-2`, `gy-4` | Separación entre columnas | | `offset-md-2` | Deja espacio vacío a la izquierda | ### Espaciado | Clase | Efecto | |---|---| | `m-*`, `p-*` | Margen / relleno (0–5, `auto`) | | `mt-*`, `mb-*`, `ms-*`, `me-*` | Arriba, abajo, inicio, final | | `mx-*`, `my-*`, `px-*`, `py-*` | Horizontal / vertical | | `gap-*` | Separación entre elementos en flex o grid | ### Texto y color | Clase | Efecto | |---|---| | `display-1`…`display-6`, `h1`…`h6`, `lead`, `small` | Tamaños de texto | | `fs-1`…`fs-6` | Tamaño de fuente | | `fw-bold`, `fw-semibold`, `fw-normal`, `fst-italic` | Peso y estilo | | `text-start`, `text-center`, `text-end` | Alineación | | `text-uppercase`, `text-truncate` | Transformación del texto | | `text-primary`, `text-body-secondary`, `text-white` | Color de texto | | `bg-primary`, `bg-body-tertiary`, `bg-success-subtle` | Color de fondo | | `text-bg-primary` | Fondo y texto con buen contraste a la vez | ### Display y flexbox | Clase | Efecto | |---|---| | `d-none`, `d-block`, `d-flex`, `d-lg-none` | Mostrar y ocultar (con breakpoints) | | `flex-row`, `flex-column`, `flex-wrap` | Dirección y salto de línea | | `justify-content-center`, `-between`, `-end` | Alineación en el eje principal | | `align-items-center`, `-start`, `-end` | Alineación en el eje cruzado | | `ms-auto`, `me-auto` | Empuja hacia un lado | ### Bordes, sombras y tamaños | Clase | Efecto | |---|---| | `border`, `border-top`, `border-0` | Bordes | | `rounded`, `rounded-3`, `rounded-pill`, `rounded-circle` | Esquinas | | `shadow-sm`, `shadow`, `shadow-lg` | Sombras | | `w-100`, `h-100`, `mw-100`, `min-vh-100` | Anchos y altos | | `ratio ratio-16x9` | Proporción fija | | `position-relative`, `sticky-top`, `fixed-bottom` | Posición | | `visually-hidden`, `visually-hidden-focusable` | Oculto visualmente pero accesible | ### Componentes | Componente | Estructura mínima | |---|---| | Botón | `btn btn-primary`, `btn-outline-*`, `btn-lg`, `btn-sm` | | Badge | `badge text-bg-primary` | | Alerta | `alert alert-success` (+ `alert-dismissible`) | | Tarjeta | `card` > `card-body` > `card-title`, `card-text` | | Navbar | `navbar navbar-expand-lg` > `navbar-brand`, `navbar-toggler`, `navbar-collapse` | | Formulario | `form-control`, `form-select`, `form-check`, `form-floating`, `invalid-feedback` | | Lista de grupo | `list-group` > `list-group-item` | | Tabla | `table table-striped` dentro de `table-responsive` | | Barra de progreso | `progress` > `progress-bar` | | Modal | `modal` > `modal-dialog` > `modal-content` > `modal-header/body/footer` | | Acordeón | `accordion` > `accordion-item` > `accordion-header`, `accordion-collapse` | | Carrusel | `carousel` > `carousel-inner` > `carousel-item` | | Pestañas | `nav nav-tabs` + `tab-content` > `tab-pane` | ### Atributos de JavaScript | Atributo | Uso | |---|---| | `data-bs-toggle` | `collapse`, `modal`, `tab`, `dropdown`, `tooltip`, `offcanvas` | | `data-bs-target` | Selector (`#id`) del elemento afectado | | `data-bs-dismiss` | `modal`, `alert`, `toast`, `offcanvas` | | `data-bs-slide`, `data-bs-slide-to` | Carrusel | | `data-bs-parent` | Acordeón de uno a la vez | | `data-bs-theme` | `light` o `dark` en cualquier elemento | ### De Bootstrap 4 a Bootstrap 5 | Bootstrap 4 | Bootstrap 5 | |---|---| | `ml-*`, `mr-*`, `pl-*`, `pr-*` | `ms-*`, `me-*`, `ps-*`, `pe-*` | | `text-left`, `text-right` | `text-start`, `text-end` | | `float-left`, `float-right` | `float-start`, `float-end` | | `font-weight-bold` | `fw-bold` | | `data-toggle`, `data-target`, `data-dismiss` | `data-bs-toggle`, `data-bs-target`, `data-bs-dismiss` | | `form-group`, `form-row` | `mb-3`, `row g-3` | | `badge badge-primary` | `badge text-bg-primary` | | `btn-block` | `d-grid` en el contenedor, o `w-100` | | `sr-only` | `visually-hidden` | | `text-muted` | `text-body-secondary` | | `jQuery` | No es necesario: Bootstrap 5 funciona con JavaScript puro | --- ## Retos adicionales y recursos oficiales ### Retos adicionales Cuando termines, prueba cualquiera de estos (están de menor a mayor dificultad): 1. **Tooltips:** agrega un tooltip a los emojis de la galería. *(Necesitas inicializarlos con JavaScript: busca "Tooltips" en la documentación.)* 2. **Dropdown:** convierte "Qué hacemos" en la navbar en un menú desplegable con los tres tipos de actividad. 3. **Toast:** al enviar el formulario con éxito, muestra un *toast* en una esquina en vez de la alerta verde. 4. **Offcanvas:** crea un panel lateral con las reglas del club en vez del modal. 5. **Scrollspy:** resalta en la navbar la sección que estás viendo. *(Busca "Scrollspy".)* 6. **Un tercer tema:** en lugar de solo claro y oscuro, crea una clase `.tema-retro` con tus propias variables y alterna entre tres modos. 7. **Sass real:** monta el proyecto con npm y Sass, con una paleta propia de 3 colores. 8. **Publica tu sitio:** súbelo a GitHub Pages y compártelo con tus amistades. ### Recursos oficiales | Recurso | Para qué | |---|---| | [Documentación de Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) | La referencia definitiva, con ejemplos de cada componente | | [Ejemplos oficiales](https://getbootstrap.com/docs/5.3/examples/) | Plantillas completas para inspirarte | | [Bootstrap Icons](https://icons.getbootstrap.com/) | Íconos gratuitos para tus proyectos | | [MDN Web Docs (español)](https://developer.mozilla.org/es/) | HTML, CSS y JavaScript explicados con detalle | | [WCAG: guía rápida de accesibilidad](https://www.w3.org/WAI/WCAG22/quickref/) | Criterios de accesibilidad web | | [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) | Comprueba el contraste de colores | | [Validador HTML del W3C](https://validator.w3.org/) | Encuentra errores en tu HTML | --- ### Lo que lograste Empezaste con una página vacía y hoy sabes: organizar contenido con el **grid**, dar estilo con **utilidades**, armar **componentes**, validar **formularios**, usar el **JavaScript de Bootstrap**, **personalizar** colores y temas, y revisar la **accesibilidad** de un sitio. Eso es una base real de desarrollo front-end. La mejor forma de consolidarlo es **construir algo que te importe**. Empieza hoy con el Reto 2. 🚀