learning-front

Nivel 1 · HTML y CSS: la estructura y la piel

Proyecto: la home del Team Builder

Mega-tarea de cierre: maquetar la home del Team Builder entera —cabecera, grid de cartas y pie— juntando semántica, box model, flexbox, grid, responsive y accesibilidad en una sola entrega, tú solo.

Has llegado al final del Nivel 1. No hay concepto nuevo en este capítulo: el reto es juntarlo todo en una sola página, tú solo, desde un fichero hasta una home terminada. Es el salto que de verdad cuesta —de “sé hacer cada ejercicio” a “sé construir algo mío entero”— y se aprende construyendo.

Qué vas a construir#

La home del Overwatch Team Builder: la página de entrada del proyecto que ha ido creciendo a lo largo del nivel. Tiene cuatro zonas:

  • Cabecera: la marca y la navegación.
  • Intro: un título y una frase que explica de qué va la página.
  • Plantilla: una rejilla de cartas de héroe que se adapta de una columna en móvil a varias en pantallas anchas. Cada carta ya la has maquetado por partes en capítulos anteriores.
  • Pie: discreto, con la nota del proyecto.

El HTML está hecho —semántico y accesible, como en el capítulo de semántica—, para que te centres en darle vida con CSS. Estos son los héroes que verás en la rejilla:

HéroeRolPartidasVictoriasWinrate
TracerDaño1207865%
ReinhardtTanque905157%
MercyApoyo20013065%
GenjiDaño1106055%
D.VaTanque1408460%
AnaApoyo955760%

Cómo se ataca una página entera#

Lo que más bloquea ante una página en blanco no es no saber CSS: es no saber por dónde empezar. Este es el orden que funciona, y el que usarás en cualquier proyecto real:

  1. Lee la estructura primero. Antes de escribir una regla, entiende el HTML: qué secciones hay, qué se repite (la carta), qué clase tiene cada cosa. La mitad del trabajo es saber a qué le vas a hablar.
  2. Empieza por el móvil. Maqueta la versión de una columna sin abrir una sola media query. Es la más sencilla y la base de todo lo demás (mobile-first).
  3. Resuelve la pieza que se repite. Da estilo a la carta de héroe hasta que se vea bien. Cuando la unidad funciona, la rejilla es casi gratis.
  4. Amplía hacia arriba. Con auto-fit + minmax, la rejilla crea columnas sola en pantallas anchas. Sin breakpoints, sin recalcular nada.
  5. Cuida la accesibilidad mientras maquetas, no al final. Contraste suficiente, foco visible con :focus-visible, el skip link oculto hasta recibir el foco. Es parte de maquetar, no un parche posterior.
  6. El remate, al final y con mesura. La sombra y el hover del capítulo BONUS son opcionales: ponlos si suman, quítalos si distraen.

No tienes que clavarlo a la primera. Maqueta, mira, ajusta. Y cuando creas que lo tienes, estréchalo a 375px: ahí se ve si está bien hecho.

Comprueba lo que sabes#

Pregunta 1 de 3

Vas a maquetar una página entera desde cero. ¿Por dónde empiezas?

Tu turno#

Este ejercicio se hace en local, en tu editor: es tu primera página completa, y conviene vivirla como un proyecto de verdad, no en un recuadro. Clónalo, lee el HTML, y construye el CSS por fases como acabas de ver. Cuando termines, despliega las soluciones y compáralas con la tuya: fíjate en cómo el «ok» se rompe a 375px y el «mejor» y el «excelente» aguantan.

Ejercicio · hazlo en local

Maqueta la home del Team Builder entera

El HTML está dado, semántico y accesible: léelo entero. Tu trabajo es el CSS (starter/styles.css): convertir ese esqueleto en una home maquetada, responsive (mobile-first) y bien rematada, juntando todo lo del Nivel 1. Clónalo y trabaja en tu editor; es tu primera página completa de principio a fin.

Paso 1: Que funcione

  • Todas las secciones maquetadas: cabecera, intro, grid de cartas y pie.
  • La carta muestra retrato, nombre, rol y estadísticas, bien espaciados.
  • Se ve y se entiende en escritorio.

Cómo hacerlo en local

Clona el repositorio del curso, entra en la carpeta del ejercicio y abre el index.html en tu navegador. Toda tu solución va en solucion.js. 

git clone <repo>
cd exercises/nivel-1/proyecto-home-team-builder
# abre index.html en el navegador y edita solucion.js
Ver soluciones 
/* SOLUCIÓN OK — la home funciona y se ve, pero el código es frágil.
   Rejilla de columnas fijas (se rompe en móvil), números mágicos en px por todo
   el fichero, sin tokens, y un par de detalles de accesibilidad a medias. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  background: #f7f6fb;
  color: #1c1b22;
  line-height: 1.5;
}

/* El skip link se esconde con display:none... que lo saca también del recorrido
   de tabulación. Visualmente limpio, pero anula la función que debía cumplir. */
.skip-link {
  display: none;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e6e3ee;
}

.brand {
  font-size: 20px;
  font-weight: 700;
}
.brand span {
  color: #b8336a;
}

.site-nav {
  display: flex;
  gap: 16px;
}
.site-nav a {
  color: #5b5966;
  text-decoration: none;
  font-size: 14px;
}

.intro {
  padding: 24px;
}
.intro h1 {
  font-size: 28px;
  margin: 0 0 8px;
}
.intro-texto {
  color: #5b5966;
  margin: 0;
  max-width: 540px;
}

.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5b5966;
  padding: 0 24px;
  margin: 8px 0 16px;
}

.hero-grid {
  list-style: none;
  margin: 0;
  padding: 0 24px 24px;
  display: grid;
  /* Columnas FIJAS: en un móvil de 375px, tres columnas dejan cartas de ~110px
     y el contenido se apelmaza. Aquí está el fallo grande. */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hero-card {
  background: #fff;
  border: 1px solid #e6e3ee;
  border-radius: 12px;
  padding: 20px;
}

.hero-portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #b8336a;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.hero-name {
  font-size: 17px;
  margin: 0;
}
.hero-role {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5b5966;
  margin: 2px 0 12px;
}

.hero-stats {
  display: flex;
  gap: 16px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #e6e3ee;
}
.stat dt {
  font-size: 11px;
  text-transform: uppercase;
  color: #5b5966;
  margin: 0;
}
.stat dd {
  font-size: 16px;
  font-weight: 600;
  margin: 2px 0 0;
}

.site-footer {
  padding: 20px 24px;
  border-top: 1px solid #e6e3ee;
  color: #5b5966;
  font-size: 13px;
}

Por qué este nivel

  • Funciona y se ve: todas las secciones están. Pero la rejilla usa columnas fijas (`repeat(3, 1fr)`), así que en un móvil de 375px las cartas se apelmazan. Ese es el fallo grande.
  • Números mágicos en px por todo el fichero (16px, 24px, 48px...). Cambiar el espaciado base obliga a buscar y reemplazar a mano.
  • El skip link escondido con `display:none` queda limpio, pero lo saca del recorrido de Tab: anula justo la accesibilidad que debía aportar.