#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 <head> 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.
💡 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.
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).
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.
2. Pega esta plantilla en index.html. Es el esqueleto de todo el proyecto. Fíjate en los comentarios <!-- HERO -->, <!-- NAVBAR -->, etc.: son marcadores donde pegarás código en los módulos siguientes.
HTML
<!DOCTYPE html>
<html lang="es" data-bs-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="PixelCrew: el club de videojuegos de tu colegio. Torneos, noches de juego y talleres.">
<title>PixelCrew | Club de videojuegos</title>
<!-- Aplica el tema ANTES de que se vea la página (evita el parpadeo).
Va primero en el <head> a propósito; en un sitio real se le llama
"anti-flash" y casi siempre se escribe en una sola línea. -->
<script>
(function () {
try {
var guardado = localStorage.getItem('pc-tema');
var oscuroDelSistema = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-bs-theme', guardado || (oscuroDelSistema ? 'dark' : 'light'));
} catch (error) {
document.documentElement.setAttribute('data-bs-theme', 'light');
}
})();
</script>
<!-- Bootstrap 5.3.8 (CSS) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<!-- Tu CSS (siempre DESPUÉS de Bootstrap) -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- NAVBAR -->
<main id="contenido">
<!-- PRUEBA -->
<!-- HERO -->
<!-- ESTADÍSTICAS -->
<!-- QUÉ HACEMOS -->
<!-- GALERÍA -->
<!-- COMUNIDAD -->
<!-- PREGUNTAS -->
<!-- ÚNETE -->
</main>
<!-- FOOTER -->
<!-- MODAL -->
<!-- Bootstrap 5.3.8 (JS con Popper incluido) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<!-- Tu JavaScript (después de Bootstrap) -->
<script src="js/main.js"></script>
</body>
</html>
Observa lo importante:
<html lang="es" data-bs-theme="light">: idioma español y el tema inicial.
El script del <head> 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.
<meta name="viewport" ...>: 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 <body>.
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 <!-- PRUEBA -->:
HTML
<div class="container py-5">
<h1 class="display-4">¡Hola, Bootstrap 5.3.8!</h1>
<p class="lead">Si ves esto con estilo, todo está funcionando.</p>
<button type="button" class="btn btn-primary">Mi primer botón</button>
</div>
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:
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ó.
Cambia data-bs-theme="light" por data-bs-theme="dark" en la etiqueta <html>y borra por un momento el script del <head>: verás el sitio oscuro, pero también el parpadeo al recargar. Después vuelve a poner el script.
En el sistema operativo, cambia tu tema a oscuro y abre el sitio: ¿qué modo aparece? (Pista: prefers-color-scheme).
Cambia el botón de btn-primary a btn-success, btn-danger y btn-warning.
💡 Pista
Solo cambian palabras dentro del atributo `class`. Bootstrap tiene una clase para cada color: `btn-primary`, `btn-secondary`, `btn-success`, `btn-danger`, `btn-warning`, `btn-info`, `btn-light`, `btn-dark`.
El grid de Bootstrap tiene tres piezas que siempre van anidadas en este orden:
Texto
.container → .row → .col-*
(centra y (fila, (columna: cada fila se divide
limita el agrupa en 12 partes)
ancho) columnas)
Cada fila tiene 12 unidades. Una col-6 ocupa la mitad, una col-4 un tercio, una col-3 un cuarto. Si las columnas suman más de 12, las sobrantes saltan a la línea de abajo.
Un breakpoint es el ancho de pantalla a partir del cual cambia el diseño. Bootstrap tiene seis:
Prefijo
Se activa desde
Dispositivo típico
(ninguno)
0 px
Celular vertical
sm
576 px
Celular horizontal
md
768 px
Tablet
lg
992 px
Laptop
xl
1200 px
Escritorio
xxl
1400 px
Pantalla grande
La regla clave es mobile-first: una clase sin prefijo aplica a todas las pantallas, y una clase con prefijo aplica desde ese tamaño hacia arriba. Ejemplo:
HTML
<div class="col-12 col-md-6 col-lg-4">
Se lee así: "ocupa las 12 columnas (todo el ancho) en celular; 6 (la mitad) desde tablet; 4 (un tercio) desde laptop".
Otras herramientas del grid que usaremos:
g-3: gutter (espacio entre columnas) de tamaño 3.
row-cols-2: en vez de dar un ancho a cada columna, dices cuántas columnas caben por fila.
container (ancho fijo por breakpoint) vs container-fluid (siempre 100 % del ancho).
col-6 col-md-3: dos por fila en celular, cuatro por fila desde tablet.
bg-body-tertiary: un fondo que se adapta solo al modo claro u oscuro.
border-top border-bottom: bordes arriba y abajo.
display-6: un texto grande y llamativo (más sobre esto en el módulo 3).
5. Construye la galería. Pega justo debajo de <!-- GALERÍA -->:
HTML
<section id="galeria" class="py-5">
<div class="container">
<h2 class="text-center mb-2">Momentos del club</h2>
<p class="text-center text-body-secondary mb-4">Un vistazo a lo que pasa en las reuniones. (Aquí irían tus fotos reales.)</p>
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3">
<div class="col">
<div class="ratio ratio-1x1">
<div class="rounded-4 bg-primary d-flex align-items-center justify-content-center fs-1" role="img" aria-label="Ilustración de un trofeo">🏆</div>
</div>
</div>
<div class="col">
<div class="ratio ratio-1x1">
<div class="rounded-4 bg-success d-flex align-items-center justify-content-center fs-1" role="img" aria-label="Ilustración de un joystick">🕹️</div>
</div>
</div>
<div class="col">
<div class="ratio ratio-1x1">
<div class="rounded-4 bg-danger d-flex align-items-center justify-content-center fs-1" role="img" aria-label="Ilustración de unos audífonos">🎧</div>
</div>
</div>
<div class="col">
<div class="ratio ratio-1x1">
<div class="rounded-4 bg-warning d-flex align-items-center justify-content-center fs-1" role="img" aria-label="Ilustración de un computador">💻</div>
</div>
</div>
<div class="col">
<div class="ratio ratio-1x1">
<div class="rounded-4 bg-info d-flex align-items-center justify-content-center fs-1" role="img" aria-label="Ilustración de un dado">🎲</div>
</div>
</div>
<div class="col">
<div class="ratio ratio-1x1">
<div class="rounded-4 bg-secondary d-flex align-items-center justify-content-center fs-1" role="img" aria-label="Ilustración de un apretón de manos">🤝</div>
</div>
</div>
</div>
</div>
</section>
Mira la clase row row-cols-2 row-cols-md-3 row-cols-lg-6: ya no le damos ancho a cada columna, sino que decimos cuántas caben: 2 en celular, 3 en tablet, 6 en laptop. Además:
ratio ratio-1x1 crea un cuadrado perfecto sin importar el ancho.
role="img" y aria-label describen el emoji para lectores de pantalla (accesibilidad).
6. (Opcional) Cambia dos cuadrados por fotos reales. Los emojis son cómodo para
practicar, pero un sitio de verdad lleva fotos. Reemplaza dos de los <div class="col">
por estos (usamos fotos de ejemplo de internet; tú pon las tuyas):
HTML
<div class="col">
<div class="ratio ratio-1x1">
<img src="https://picsum.photos/seed/pixelcrew-torneo/400/400"
class="rounded-4 object-fit-cover w-100 h-100"
alt="Jugadores alrededor de una mesa con consolas en un torneo del club"
width="400" height="400" loading="lazy" decoding="async">
</div>
</div>
Qué aprendiste ahí, y son cosas que se usan todo el tiempo:
Atributo o clase
Para qué
alt
Describe la imagen para quien no la ve. Si es solo decorativa, se deja vacío: alt=""
width y height
El navegador reserva el espacio antes de descargar la foto: la página no "salta" al cargar
loading="lazy"
No descarga la foto hasta que está cerca de la pantalla. Acelera páginas largas
object-fit-cover
Rellena el cuadrado sin deformar la foto
decoding="async"
El navegador la decodifica sin bloquear el dibujado
⚠️ alt no es un adorno. Escribir alt="foto 1" no sirve de nada: quien usa un
lector de pantalla solo oirá ese texto inútil. Describe lo que la imagen muestra.
Una franja con 4 cifras y una galería de 6 cuadrados de colores. Al achicar la ventana, la franja pasa de 4 columnas a 2 + 2, y la galería de 6 a 3 + 3 y luego a 2 + 2 + 2.
Te falta la etiqueta viewport o estás mirando otro breakpoint
Usa el modo responsive de F12 y revisa los anchos de la tabla
La página se desplaza a los lados en celular
Usaste un g-5 (gutter grande) dentro de un .container
Una fila con gutter se come la mitad del gutter en margen negativo a cada lado. Si eso supera el relleno del contenedor, la fila se sale de la pantalla. Solución: g-4 g-lg-5
Modifica la galería para que en pantallas lg se vean 4 cuadrados por fila (en vez de 6) y agrega 2 cuadrados más (con otro emoji y otro color) para completar 2 filas parejas de 4.
💡 Pista
Solo necesitas cambiar un número en `row-cols-lg-6` y duplicar dos bloques `
`. Para los colores usa `bg-dark`, `bg-light` o los que ya usaste con otro emoji.
✅ Solución
Cambia `row-cols-lg-6` por `row-cols-lg-4` y agrega, por ejemplo:
HTML
<div class="col">
<div class="ratio ratio-1x1">
<div class="rounded-4 bg-dark d-flex align-items-center justify-content-center fs-1" role="img" aria-label="Ilustración de una estrella">⭐</div>
</div>
</div>
Repite con otro emoji para tener 8 cuadrados en total.
💡 Puedes dejar la galería como la dejaste: el resto del tutorial no depende de cuántos cuadrados tenga.
Fíjate en que usamos text-body-secondary y bg-body-tertiary en vez de colores fijos como text-muted o bg-light. Los primeros cambian solos entre modo claro y oscuro, y son los recomendados desde Bootstrap 5.3.
💡 Regla práctica: usa utilidades para el 90 % del estilo y escribe CSS propio solo para lo que Bootstrap no trae (como un degradado).
1. Agrega el HTML del hero. Pega justo debajo de <!-- HERO -->:
HTML
<section id="inicio" class="hero py-5">
<div class="container py-lg-5">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-lg-7">
<p class="text-uppercase fw-semibold text-primary-emphasis small mb-2">Club de videojuegos del colegio</p>
<h1 class="display-3 fw-bold mb-3">Juega, crea y compite con <span class="text-gradient">PixelCrew</span></h1>
<p class="lead text-body-secondary mb-4">
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.
</p>
<div class="d-flex flex-column flex-sm-row gap-3">
<a href="#unete" class="btn btn-primary btn-lg px-4">Únete al club</a>
<a href="#juegos" class="btn btn-outline-secondary btn-lg px-4">Descubre qué hacemos</a>
</div>
</div>
<div class="col-lg-5 d-none d-lg-block">
<div class="hero-card rounded-4 shadow-lg p-5 text-center text-white" aria-hidden="true">
<div class="display-1">🎮</div>
<p class="fs-4 fw-semibold mb-0">Nivel 1: ¡empieza hoy!</p>
</div>
</div>
</div>
</div>
</section>
Detalles para fijarte:
py-5 y py-lg-5 en el contenedor: relleno vertical, más grande en pantallas grandes.
display-3 fw-bold: el título enorme y en negrita. lead hace un párrafo destacado.
d-flex flex-column flex-sm-row gap-3: los botones se apilan en celular y se ponen uno al lado del otro desde sm.
d-none d-lg-block: la tarjeta decorativa solo aparece desde pantallas grandes.
aria-hidden="true": es decoración, así que los lectores de pantalla la saltan.
<h1>: solo hay uno por página.
g-4 g-lg-5 en la fila: en celular usamos un gutter mediano y lo subimos en pantallas
grandes. ¿Por qué? Porque una fila con g-5 tiene un margen negativo de 24 px a cada
lado, más ancho que el relleno del contenedor, y eso hace que la página se desplace
horizontalmente en el celular. Es un error muy común; pruébalo: cambia a g-5 a secas,
achica la ventana y verás cómo aparece la barra de desplazamiento horizontal.
2. Agrega CSS propio. Bootstrap no trae degradados, así que esta es una buena excusa para escribir un poco de CSS. Pega esto en css/style.css:
CSS
/* 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);
}
La clase text-gradient pinta el texto con un degradado recortando el fondo con la forma de las letras.
Una portada con título gigante (la palabra "PixelCrew" con degradado de morado a azul), un texto descriptivo en gris, dos botones y, en pantallas anchas, una tarjeta decorativa a la derecha. En celular la tarjeta desaparece y los botones ocupan todo el ancho.
⚠️ Clases que ya no existen o están obsoletas (las verás en tutoriales viejos):
Si ves…
Usa…
ml-3, mr-3
ms-3, me-3
pl-2, pr-2
ps-2, pe-2
text-left, text-right
text-start, text-end
float-left, float-right
float-start, float-end
font-weight-bold
fw-bold
text-muted
text-body-secondary
badge-primary
text-bg-primary
data-toggle, data-target
data-bs-toggle, data-bs-target
Otros problemas:
El título no tiene degradado: revisa que style.css esté enlazado y que escribiste -webkit-background-clip y background-clip.
Tu CSS no pisa a Bootstrap: confirma que style.css se carga después del CSS de Bootstrap.
La página se desplaza en celular: casi siempre es un g-5 dentro de un .container o un
texto largo sin partir. Usa g-4 g-lg-5 y agrega overflow-wrap: anywhere al body.
En celular, centra el título y el párrafo del hero. Desde pantallas lg, deben volver a alinearse a la izquierda.
💡 Pista
Es una clase de alineación con y sin prefijo de breakpoint. Va en la columna que contiene el texto (`col-lg-7`).
✅ Solución
Agrega `text-center text-lg-start` a la columna: `
La navbar es un componente completo de Bootstrap. Se compone de:
.navbar: el contenedor principal.
.navbar-expand-lg: define desde qué breakpoint el menú se muestra expandido. Por debajo de lg, se colapsa.
.navbar-brand: el logo o nombre del sitio.
.navbar-toggler: el botón hamburguesa.
.navbar-collapse: la parte que se oculta y se muestra.
.navbar-nav, .nav-item, .nav-link: la lista de enlaces.
El botón hamburguesa funciona sin que escribas JavaScript: Bootstrap lee atributos data-bs-* en el HTML. Aquí, data-bs-toggle="collapse" y data-bs-target="#menuPrincipal" significan "al hacer clic, muestra u oculta el elemento con id menuPrincipal".
Haz que el menú se expanda desde pantallas medianas (md) en lugar de lg.
💡 Pista
Cambia el breakpoint en una clase de la navbar. Hay otras clases con `lg` dentro de la navbar que también deberías ajustar para que todo sea coherente.
✅ Solución
Cambia `navbar-expand-lg` por `navbar-expand-md`, y en el `
` usa `mb-md-0` y `align-items-md-center`. También ajusta `ms-lg-3` y `my-lg-0` del botón "Únete" a `ms-md-3` y `my-md-0`.
Un componente es un bloque de interfaz listo para usar. Se arma con una clase base y variantes:
Botones: base .btn + variante de color (.btn-primary) o contorno (.btn-outline-primary) + tamaño (.btn-lg, .btn-sm).
Badges: etiquetas pequeñas, con .badge text-bg-warning (el fondo y el texto con buen contraste ya vienen resueltos).
Alertas: mensajes contextuales: .alert alert-success, alert-danger, alert-warning, alert-info. Pueden cerrarse con un botón.
Tarjetas:.card > .card-body > .card-title, .card-text. También .card-header y .card-footer.
Los colores contextuales significan algo, y es bueno respetarlo:
Color
Significado
primary
Acción principal
secondary
Acción secundaria
success
Todo salió bien
danger
Error o peligro
warning
Atención
info
Información neutral
Una tarjeta que ocupa toda la fila no es útil por sí sola; lo común es ponerlas dentro de un grid, como aprendiste en el módulo 2: row row-cols-1 row-cols-md-3 g-4. Y para que todas midan lo mismo de alto, cada tarjeta lleva h-100.
El bloque prefers-reduced-motion desactiva la animación para quienes tienen activada la opción de "reducir movimiento" en su dispositivo. Es una buena práctica de accesibilidad.
Una alerta azul cerrable, un título centrado y tres tarjetas del mismo alto, con una etiqueta de color, un título con emoji, una descripción y un botón. Al pasar el mouse, cada tarjeta sube un poco. En celular, las tarjetas se apilan.
Agrega una cuarta tarjeta llamada "📚 Zona de estudio" con un badge text-bg-danger que diga "Antes de exámenes". Haz que en pantallas lg se vean las 4 en una fila, y en md, 2 por fila.
💡 Pista
Duplica una `
...
` completa, cambia los textos y ajusta `row-cols-md-3` para que además tenga una regla para `lg`.
✅ Solución
Cambia la fila a `row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4` y agrega la cuarta tarjeta copiando la estructura de una existente (badge `text-bg-danger`, título "📚 Zona de estudio" y su texto).
Atributos HTML5 que definen las reglas: required, minlength, min, max, type="email", pattern. El navegador ya sabe evaluarlos.
JavaScript que pregunta al navegador si el formulario es válido con formulario.checkValidity().
La clase .was-validated en el <form>. Al agregarla, Bootstrap pinta de verde los campos válidos y de rojo los inválidos, y muestra los mensajes .invalid-feedback.
También agregamos novalidate al <form> para apagar los globitos feos del navegador y mostrar los mensajes de Bootstrap en su lugar.
Todo campo necesita una <label> conectada con el id del campo (for="nombre" ↔ id="nombre"). Sin eso, los lectores de pantalla no saben qué se pide, y hacer clic en la etiqueta no enfoca el campo. En el campo @ que no tiene etiqueta visible usamos aria-label.
1. Agrega el formulario. Pega justo debajo de <!-- ÚNETE -->:
HTML
<section id="unete" class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<h2 class="text-center mb-2">Únete a PixelCrew</h2>
<p class="text-center text-body-secondary mb-4">Completa el formulario y te contamos cuándo es la primera reunión.</p>
<div id="exito" class="alert alert-success d-none" role="status" tabindex="-1">
🎉 ¡Listo! Recibimos tu inscripción. Nos vemos en el siguiente nivel.
</div>
<form id="formUnete" class="row g-3" novalidate>
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="nombre" placeholder="Tu nombre" required minlength="2" autocomplete="given-name">
<label for="nombre">Nombre</label>
<div class="invalid-feedback">Escribe tu nombre (mínimo 2 letras).</div>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="correo" placeholder="tucorreo@ejemplo.com" required autocomplete="email">
<label for="correo">Correo electrónico</label>
<div class="invalid-feedback">Escribe un correo válido, por ejemplo nombre@correo.com.</div>
</div>
</div>
<div class="col-md-4">
<div class="form-floating">
<input type="number" class="form-control" id="edad" placeholder="16" required min="13" max="18">
<label for="edad">Edad</label>
<div class="invalid-feedback">El club es para edades entre 13 y 18 años.</div>
</div>
</div>
<div class="col-md-8">
<div class="form-floating">
<select class="form-select" id="interes" required>
<option value="" selected disabled>Elige una opción…</option>
<option>Torneos</option>
<option>Noches de juego</option>
<option>Taller de creación</option>
<option>Todo lo anterior</option>
</select>
<label for="interes">¿Qué te interesa más?</label>
<div class="invalid-feedback">Elige una opción de la lista.</div>
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text" id="arroba">@</span>
<input type="text" class="form-control" id="usuario" placeholder="Tu usuario gamer (opcional)" aria-label="Tu usuario gamer (opcional)" aria-describedby="arroba">
</div>
</div>
<div class="col-12">
<label for="mensaje" class="form-label">Cuéntanos tu juego favorito (opcional)</label>
<textarea class="form-control" id="mensaje" rows="3"></textarea>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="reglas" required>
<label class="form-check-label" for="reglas">Acepto las reglas del club</label>
<div class="invalid-feedback">Debes aceptar las reglas para inscribirte.</div>
</div>
</div>
<div class="col-12 d-grid">
<button class="btn btn-primary btn-lg" type="submit">Enviar inscripción</button>
</div>
</form>
</div>
</div>
</div>
</section>
Qué observar:
row g-3 + col-md-6: ¡el grid también sirve para formularios! Dos campos por fila en pantallas medianas, uno por fila en celular.
El <select> tiene una primera opción con value="" y disabled selected: es el "texto guía". Como está vacía y required, obliga a elegir una opción real.
edad usa min="13" max="18": el navegador rechaza valores fuera de rango.
d-none en la alerta de éxito: está oculta hasta que se necesite.
d-grid en el botón: lo estira a todo el ancho.
2. Agrega el JavaScript. Pega en js/main.js:
JavaScript
// ===== 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();
}
});
Léelo con calma. No es mucho código:
getElementById busca los elementos por su id.
addEventListener('submit', ...) ejecuta una función cuando se intenta enviar el formulario.
evento.preventDefault() evita que la página se recargue.
formulario.checkValidity() le pregunta al navegador si todos los campos cumplen las reglas.
formulario.querySelector(':invalid') devuelve el primer campo que no las cumple.
Si es válido: limpia el formulario, muestra el mensaje de éxito y le da el foco.
Si no: activa was-validated y lleva el foco al primer campo con error.
Marcar los campos en rojo no sirve de nada si la persona sigue mirando el botón.
Al mandar el foco al primer error, quien usa teclado o lector de pantalla escucha
"Correo electrónico, inválido" y puede corregirlo sin buscarlo con el mouse.
Para que mensajeExito.focus() funcione, el mensaje necesita poder recibir foco, y eso
se logra con tabindex="-1". Es el valor especial que significa: "puede recibir el foco
por código, pero no aparece en la secuencia del Tab".
3. Pruébalo así:
Presiona Enviar inscripción con todo vacío → campos en rojo con sus mensajes.
Escribe un correo mal escrito (ana@) → sigue en rojo.
Escribe edad 25 → rojo; con 16 → verde.
Completa todo correctamente y marca las reglas → aparece el mensaje de éxito.
⚠️ Sobre datos personales: este formulario no guarda ni envía nada. En un sitio real que recoja datos de menores de edad se necesita permiso de madres, padres o tutores y un manejo cuidadoso de la información. Nunca publiques datos personales de otras personas.
Un formulario centrado con campos de etiqueta flotante. Al enviarlo vacío, todo lo obligatorio se marca en rojo con su mensaje explicativo. Al completarlo bien, el formulario se limpia y aparece una alerta verde.
Haz que el campo usuario gamer (opcional) solo acepte letras, números y guion bajo, de 3 a 16 caracteres. Si escriben algo distinto, debe mostrar un mensaje de error. Si lo dejan vacío, debe seguir siendo válido.
💡 Pista
Existe un atributo HTML5 llamado `pattern` que recibe una expresión regular. Para que el mensaje de error se vea bien dentro de un `.input-group`, agrega la clase `has-validation` al grupo y pon el `.invalid-feedback` **dentro** del grupo.
✅ SoluciónHTML
1. Acordeón de preguntas frecuentes. Pega debajo de <!-- PREGUNTAS -->:
HTML
<section id="faq" class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<h2 class="text-center mb-4">Preguntas frecuentes</h2>
<div class="accordion" id="acordeonFaq">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
¿Necesito experiencia para entrar?
</button>
</h3>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#acordeonFaq">
<div class="accordion-body">Para nada. Hay miembros que juegan desde hace años y otros que nunca han tenido una consola. Te ayudamos a empezar.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
¿Cuánto cuesta?
</button>
</h3>
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#acordeonFaq">
<div class="accordion-body">Unirte es gratis. Solo pedimos que cuides el material y participes en las actividades.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">
¿Cuándo nos reunimos?
</button>
</h3>
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#acordeonFaq">
<div class="accordion-body">Los martes, miércoles y viernes después de clases. Te enviamos el calendario completo cuando te inscribas.</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4" aria-expanded="false" aria-controls="faq4">
¿Necesito mi propio equipo?
</button>
</h3>
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#acordeonFaq">
<div class="accordion-body">No. El club tiene consolas, computadores y mandos para todos. Si quieres traer el tuyo, ¡bienvenido!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Fíjate en el patrón: cada botón apunta (data-bs-target="#faq1") a su panel (id="faq1"). El primer ítem tiene show (abierto) y los demás collapsed en el botón.
2. Carrusel de testimonios. Pega debajo de <!-- COMUNIDAD -->:
HTML
<section id="testimonios" class="py-5 bg-body-tertiary">
<div class="container">
<h2 class="text-center mb-4">Lo que dice la comunidad</h2>
<div class="row justify-content-center">
<div class="col-lg-8">
<div id="carruselComunidad" class="carousel slide" aria-label="Testimonios de miembros del club">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carruselComunidad" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Testimonio 1"></button>
<button type="button" data-bs-target="#carruselComunidad" data-bs-slide-to="1" aria-label="Testimonio 2"></button>
<button type="button" data-bs-target="#carruselComunidad" data-bs-slide-to="2" aria-label="Testimonio 3"></button>
</div>
<div class="carousel-inner rounded-4 shadow">
<div class="carousel-item active">
<figure class="testimonio text-white text-center px-5 py-5 mb-0 d-flex flex-column justify-content-center">
<blockquote class="fs-4 mb-3">“Entré por los torneos y salí sabiendo hacer mi primer videojuego.”</blockquote>
<figcaption class="fw-semibold">Valentina, 16 años</figcaption>
</figure>
</div>
<div class="carousel-item">
<figure class="testimonio text-white text-center px-5 py-5 mb-0 d-flex flex-column justify-content-center">
<blockquote class="fs-4 mb-3">“Aquí conocí a mis mejores amigos. Jugar en equipo es otro nivel.”</blockquote>
<figcaption class="fw-semibold">Santiago, 17 años</figcaption>
</figure>
</div>
<div class="carousel-item">
<figure class="testimonio text-white text-center px-5 py-5 mb-0 d-flex flex-column justify-content-center">
<blockquote class="fs-4 mb-3">“Pensé que era solo jugar, pero también aprendí a organizar eventos.”</blockquote>
<figcaption class="fw-semibold">Camila, 15 años</figcaption>
</figure>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carruselComunidad" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carruselComunidad" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
<p class="text-center text-body-secondary small mt-3 mb-0">Los nombres de este ejemplo son ficticios.</p>
</div>
</div>
</div>
</section>
El carrusel tiene tres partes: los indicadores (puntitos de abajo), las diapositivas (carousel-item; una debe llevar active) y los controles (flechas). Usamos botones con texto oculto (visually-hidden) para que las flechas sean comprensibles con lectores de pantalla. No lo configuramos con avance automático a propósito: el movimiento solo se activa por decisión de quien usa la página.
Agrega estilo a las diapositivas. Pega al final de css/style.css:
CSS
/* ===== 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;
}
3. Modal de reglas. Primero pega el modal justo debajo de <!-- MODAL -->:
HTML
<div class="modal fade" id="modalReglas" tabindex="-1" aria-labelledby="tituloReglas" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="tituloReglas">📜 Reglas de PixelCrew</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<ol class="mb-0">
<li class="mb-2"><strong>Respeto ante todo.</strong> Nada de insultos ni burlas, ni dentro ni fuera del juego.</li>
<li class="mb-2"><strong>Juego limpio.</strong> Sin trampas, hacks ni cuentas prestadas en los torneos.</li>
<li class="mb-2"><strong>Equilibrio.</strong> Las tareas del colegio van primero; el club puede esperar.</li>
<li class="mb-2"><strong>Cuidamos el material.</strong> Consolas, mandos y equipos son de todos.</li>
<li class="mb-2"><strong>Contenido apto.</strong> Los juegos deben ser adecuados para la edad de todos.</li>
<li><strong>Si algo te incomoda</strong>, avísale a una persona responsable del club. Siempre te vamos a escuchar.</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Entendido</button>
</div>
</div>
</div>
</div>
Luego conecta un botón con él. En el formulario del módulo anterior, reemplaza esta línea:
HTML
<label class="form-check-label" for="reglas">Acepto las reglas del club</label>
por esta, que convierte "reglas del club" en un botón que abre el modal:
HTML
<label class="form-check-label" for="reglas">
Acepto las
<button type="button" class="btn btn-link p-0 align-baseline" data-bs-toggle="modal" data-bs-target="#modalReglas">reglas del club</button>
</label>
Puntos importantes del modal:
fade da una animación suave al aparecer.
modal-dialog-centered lo centra verticalmente y modal-dialog-scrollable permite desplazar el contenido si es largo.
aria-labelledby="tituloReglas" conecta el modal con su título para lectores de pantalla.
Bootstrap se encarga solo de atrapar el foco dentro del modal, de cerrarlo con la tecla Esc
y de devolver el foco al botón que lo abrió cuando se cierra.
tabindex="-1" en el modal no es un detalle: le permite a Bootstrap poner el foco ahí
al abrirlo. Si lo quitas, el foco se pierde y la persona que navega con teclado se queda
sin saber dónde está.
El modal se coloca al final del <body>, fuera de cualquier sección, para evitar problemas de posición.
4. Prueba la API de JavaScript. Abre la consola (F12) y escribe:
Se abre el modal desde código. Ciérralo con modal.hide(). Cuando una acción (por ejemplo, un temporizador) debe abrir un componente, usarás esta forma.
Acordeón: al abrir una pregunta, la anterior se cierra.
Carrusel: puedes pasar de testimonio con las flechas o los puntitos.
Modal: al hacer clic en "reglas del club" aparece una ventana centrada con el fondo oscurecido; se cierra con ✕, con "Entendido", con Esc o haciendo clic afuera.
Haz que el acordeón permita tener varias preguntas abiertas a la vez.
Haz que el carrusel cambie de diapositiva con un efecto de desvanecimiento en vez de deslizamiento.
💡 Pista
Para el 1, piensa qué atributo es el que "cierra a las demás". Para el 2, busca en la documentación oficial de Carousel el modificador `carousel-fade`.
✅ Solución
1. Quita el atributo `data-bs-parent="#acordeonFaq"` de cada `accordion-collapse`.
2. Cambia `class="carousel slide"` por `class="carousel slide carousel-fade"`.
Desde la versión 5.3, Bootstrap guarda sus colores, bordes y fuentes en variables CSS (--bs-primary, --bs-body-bg, --bs-border-radius...). Al cambiar una variable, todo lo que la usa cambia. Puedes verlas en las herramientas del navegador: selecciona la etiqueta <html> en la pestaña Elements y mira el panel Styles.
Hay dos tipos:
Globales (en :root): afectan a todo el sitio. Ejemplo: --bs-border-radius.
Locales de un componente: viven dentro de cada componente. Ejemplo: un botón usa --bs-btn-bg. Para cambiar solo los botones primarios, sobrescribes esa variable en .btn-primary.
Bootstrap 5.3 trae dos temas integrados. Se elige con el atributo data-bs-theme (light o dark) en <html> o en cualquier elemento: el tema se aplica a ese elemento y a todo lo que contiene. Por eso para alternar el modo solo hay que cambiar un atributo con JavaScript, y recordarlo con localStorage.
Respetar el tema del sistema
Hay una cosa que un sitio bien hecho sí o sí hace: adoptar el tema que ya eligió la
persona en su dispositivo. Se lee con matchMedia:
JavaScript
window.matchMedia('(prefers-color-scheme: dark)').matches // true si el sistema está en oscuro
Ese dark es el tema del sistema. También existe (prefers-color-scheme: light),
(prefers-reduced-motion: reduce) (que ya usaste en el módulo 5) y otras como
(prefers-contrast: more). Todas son la manera correcta de "preguntarle" al dispositivo.
La regla de un sitio bien construido es esta:
Primero respetas el tema del sistema. Después, si la persona elige otro con tu
botón, su elección manda (y se recuerda).
El parpadeo: por qué el script va en el <head>
Un problema típico: si el tema lo aplica JavaScript al final de la página, el navegador
primero pinta el sitio en claro y un instante después lo cambia a oscuro. Se ve un
parpadeo Diez unpleasantísimo.
La solución es la que pusimos en el módulo 1: un <script> diminuto en el <head>, antes
del CSS, que aplica el tema antes de que se pinte el primer píxel. Ese script debe ser
cortísimo y no depender de nada: por eso va dentro de una función immediately ejecutada
((function () { ... })()) y protegido con try/catch, para que un navegador en modo
privado (donde localStorage puede estar bloqueado) no rompa la página.
1. Agrega el botón de modo. En la navbar, pega después del <li> del botón "Únete" (dentro del mismo <ul>):
HTML
<li class="nav-item ms-lg-2 mb-2 mb-lg-0">
<button id="themeToggle" class="btn btn-outline-secondary btn-sm" type="button" aria-label="Cambiar entre modo claro y modo oscuro">
<span id="themeIcon" aria-hidden="true">☀️</span>
</button>
</li>
2. Agrega el JavaScript al final de js/main.js:
JavaScript
// ===== 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);
}
});
Qué hace, en orden:
Consulta el tema del dispositivo con matchMedia('(prefers-color-scheme: dark)').
Aplica el guardado; si no hay, el del sistema.
Cambia el emoji del botón.
Guarda la preferencia (solo si la elección fue suya), protegida con try/catch.
Escucha los cambios del tema del sistema, pero solo si la persona no ha elegido nada.
⚠️ El detalle que hace que la última parte funcione es el parámetro recordar. Si al
cargar guardáramos el tema del sistema, leerTemaGuardado() devolvería siempre un valor y
el sitio dejaría de seguir al sistema después del primer clic. Por eso el valor por
defecto se aplica con recordar = false.
💡 El try/catch parece exagerado, y sin embargo es lo correcto: en modo incógnito,
localStorage puede lanzar un error. Sin esa protección, una sola línea detiene todo el
archivo de JavaScript, y con ella se rompen también el formulario y el menú.
3. Personaliza con variables CSS. Pega al inicio de css/style.css (antes de lo que ya escribiste):
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);
}
CSS
/* ===== 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; }
Observa los dos patrones:
Variables globales (--bs-primary, --bs-body-bg...) que definen la paleta, una para el modo claro (:root) y otra para el oscuro ([data-bs-theme="dark"]).
Variables locales de componentes (.btn-primary, .btn-outline-primary) para que los botones también adopten el morado.
⚠️ Cambiar --bs-primaryno cambia el color de .btn-primary, porque los botones tienen su propia copia del color. Por eso fue necesario sobrescribir también --bs-btn-bg y sus variantes. Si tuvieras que hacer esto con muchos componentes, ahí es donde conviene Sass.
También verás que section[id] { scroll-margin-top } resuelve el problema del módulo 4: la navbar fija ya no tapa los títulos al navegar.
4. Introducción a Sass (lectura, opcional para practicar).
Sass es un lenguaje que se compila a CSS. Con Bootstrap te permite cambiar sus variables internas antes de generar el CSS, y entonces toda la paleta (botones, alertas, fondos suaves, bordes...) se recalcula automáticamente.
El flujo es:
Terminal
# 1. Crear un proyecto e instalar Bootstrap y Sass (necesitas Node.js)
npm init -y
npm install bootstrap@5.3.8 sass
SCSS
// scss/custom.scss
// 2. Tus variables ANTES de importar Bootstrap
$primary: #7c4dff;
$border-radius: 0.75rem;
// 3. Importa Bootstrap
@import "bootstrap/scss/bootstrap";
Terminal
# 4. Compila a CSS
npx sass --load-path=node_modules scss/custom.scss css/custom.css
Luego enlazas css/custom.css en lugar del CSS del CDN.
⚠️ Esto es solo lectura, no lo hagas todavía. Si lo intentas hoy vas a ver una montaña
de avisos rojos: Bootstrap 5.3 todavía usa @import (la sintaxis vieja) y el compilador de
Sass moderno la marca como deprecada. Los avisos no rompen nada, pero desconciertan
mucho. Además compilar Sass necesita Node.js instalado, y en un portátil del colegio eso
puede ser un problema.
La ruta moderna es @use, pero Bootstrap todavía no la usa por dentro. Por ahora quédate
con las variables CSS del paso 3, que no necesitas compilar nada y hacen el 90 % de lo que
querrías hacer con Sass. Cuando tengas un proyecto propio y Node.js funcionando, vuelve
aquí.
💡 ¿Cuándo usar cada una? Variables CSS para ajustes rápidos y para cambiar de tema en tiempo real. Sass cuando quieres una identidad visual completa y estás en un proyecto con herramientas de desarrollo.
El sitio tiene una paleta morada. En la barra hay un botón con ☀️ (en modo oscuro) o 🌙 (en modo claro) que cambia todo el sitio. Al recargar, se mantiene el modo elegido. Los botones principales son morados y las esquinas son un poco más redondeadas.
Cambia el radio de las esquinas de todo el sitio (botones, tarjetas, campos) con una sola línea.
Cambia la fuente del sitio por una de sistema como Georgia, serif.
💡 Pista
Mira la lista de variables `--bs-*` en el panel Styles. Hay una variable de radio de borde y otra de familia de fuente del cuerpo (`--bs-body-font-family`).
✅ Solución
En `:root` de tu `style.css`:
CSS
🎯 Objetivo: terminar el sitio con el pie de página y revisarlo como lo haría un profesional: accesibilidad, orden del código y pruebas en distintos tamaños.
Un sitio "terminado" no es el que se ve bien en tu computador, sino el que funciona para todas las personas y en todos los dispositivos. Hay tres frentes de revisión: estructura y accesibilidad, responsive y calidad del código.
Detalles: flex-column flex-md-row apila los elementos en celular y los pone en línea desde tablet, y justify-content-between los reparte a los extremos. mt-5 separa el pie del contenido.
2. Haz la revisión de accesibilidad. Recorre esta lista con tu sitio abierto:
Qué revisar
Cómo comprobarlo
Un solo <h1> y títulos en orden (h1 → h2 → h3)
Busca <h1 con Ctrl + F en el código
Landmarks:<header>, <nav>, <main>, <footer>
Revisa que estén presentes y que no falten
Teclado: todo se puede usar solo con Tab, Enter y Esc
Deja el mouse quieto y recorre el sitio
Foco visible: al tabular se ve dónde estás
Bootstrap lo trae; no lo quites con outline: none
Textos alternativos: cada foto con alt="descripción real", y los emojis decorativos con role="img" + aria-label
Las fotos que agregaste en el módulo 2 y los seis emojis de la galería
Foco al enviar un formulario: el foco va al primer error o al mensaje de éxito
Envía el formulario vacío y presiona Tab: el foco debe estar en el campo marcado
Anclas: ningún enlace apunta a un id inexistente
Haz clic en cada enlace del menú y en "Volver arriba"
Sin desbordes: nada obliga a desplazar la página de lado a lado
A 375 px no debe aparecer barra horizontal
Etiquetas en formularios: todo campo tiene su <label>
Haz clic en una etiqueta: debe enfocar su campo
Contraste de colores: texto legible sobre su fondo
Movimiento: nada se mueve solo; se respeta prefers-reduced-motion
Ya lo hicimos en el CSS
Enlace "Saltar al contenido"
Presiona Tab al cargar
3. Prueba el diseño responsive. En las herramientas del navegador, comprueba estos anchos: 375 px (celular), 768 px (tablet), 1280 px (laptop). En cada uno confirma que: no hay scroll horizontal, nada se corta, los botones se pueden tocar con facilidad y los textos se leen sin hacer zoom.
4. Haz una auditoría automática. En Chrome o Edge: F12 → pestaña Lighthouse → marca Accessibility y Best Practices → Analyze page load. Lee las sugerencias. No necesitas 100 puntos, pero entender cada aviso te enseña mucho.
5. Valida tu HTML pegándolo en el validador del W3C. Corrige lo que marque como error.
El sitio completo: navbar, hero, estadísticas, tarjetas, galería, carrusel, acordeón, formulario, modal y pie de página, con modo claro y oscuro. Sin errores en la consola.
Ejecuta Lighthouse en modo claro y en modo oscuro. Escribe el número de accesibilidad de cada uno y elige un aviso para corregir.
💡 Pista
Cambia de modo con el botón de la navbar y vuelve a analizar. Para entender un aviso, haz clic sobre él: Lighthouse te muestra el elemento y un enlace con la explicación.
Agrega una nueva sección "Calendario de torneos" a tu sitio, sin copiar código del tutorial. Debe cumplir:
[ ] Estar entre las secciones "Galería" y "Comunidad", con su enlace en la navbar.
[ ] Usar al menos 3 componentes que no hayas usado en el sitio. Opciones: tabla (table, table-striped) dentro de table-responsive, pestañas (nav-tabs con tab-content), lista de grupo (list-group), barra de progreso (progress), tooltip o toast.
[ ] Verse bien en 375, 768 y 1280 px.
[ ] Funcionar en modo claro y oscuro.
[ ] Respetar las reglas de accesibilidad del módulo 9.
💡 Busca cada componente en la documentación oficial: copia su HTML mínimo y adáptalo. Leer la documentación y adaptar ejemplos es exactamente cómo trabajan los profesionales.
// ===== 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);
}
});
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. 🚀