Diseño Web

5. Práctica

Una sola práctica: tomar el mini sitio de HTML y darle estilo con un solo estilos.css, compartido por las tres vistas. Lo vas a mejorar por partes, a medida que avanzan las páginas del tópico.

El mismo proyecto, un paso más

No empiezas nada nuevo: trabajas sobre el repositorio mi-sitio que ya tienes. Al terminar, este CSS será la base que después vas a traducir a Tailwind.

Trabaja con Live Server y el inspector abiertos

Guarda y mira: si no pasó nada, algo está mal y conviene saberlo ahora, no diez reglas después. Con F12 ves qué reglas le llegan a cada elemento y cuáles perdieron.

Un archivo de estilos para las tres vistas 

mi-sitio/
|-- index.html      \
|-- sobre-mi.html    |  las tres enlazan
|-- contacto.html   /   el MISMO archivo
|-- estilos.css     <-- nuevo
|-- README.md
`-- img/

Paso 1 · Enlazar la hoja de estilos

Página 1: qué es CSS.

  • Crea estilos.css en la raíz del proyecto
  • Enlázalo en el <head> de las tres vistas con <link rel="stylesheet" href="estilos.css">
  • Comprueba que funciona con una regla de prueba (body { background-color: #fdf6e3; }) y bórrala después
  • Deja un comentario al inicio del archivo que diga qué es: /* Estilos del mini sitio */

Un solo estilos.css, compartido

Si copias los estilos dentro de cada página con <style>, el sitio se desordena en cuanto cambies algo: hay que acordarse de tocar los tres archivos y siempre se olvida uno. Ese es justamente el error que la hoja externa evita.

Commit: enlaza estilos.css en las tres vistas.

Paso 2 · Texto, colores y estados

Página 2: selectores y propiedades.

  • En body: la tipografía con respaldo (font-family: Arial, sans-serif;), el color del texto y line-height: 1.5
  • Con un selector de etiqueta, el tamaño y el color de h1 y h2
  • Con el selector de clase .tarjeta, un color de fondo para las tres tarjetas de Inicio
  • Con el selector descendiente .tarjeta h3, un color propio para los títulos de las tarjetas
  • En los enlaces del menú, :hover y :focus en la misma regla, y un :active
  • En los campos del formulario, un :focus que cambie el borde y el outline (sin quitarlo)
  • Escribe dos reglas que choquen sobre el mismo elemento, predice cuál gana y compruébalo en el inspector: la perdedora aparece tachada

Pruébalo sin tocar el ratón

Recorre las tres vistas solo con Tab y Enter. Si en algún momento no sabes dónde estás parado, a ese elemento le falta :focus.

Commit: agrega tipografia, colores y estados.

Paso 3 · Cajas y Flexbox

Página 3: modelo de caja y Flexbox.

  • Empieza el archivo con * { box-sizing: border-box; }
  • Encierra el contenido en una columna central: main { max-width: 900px; margin: 0 auto; padding: 0 16px; }
  • Dale a .tarjeta padding, border y border-radius, y mide una en el panel de caja del inspector: su ancho tiene que coincidir con lo que dice su width
  • En Sobre mí, pon la foto y el texto lado a lado con Flexbox: envuélvelos en un <div class="perfil"> con display: flex, gap y align-items: flex-start
  • Ponle flex: 1 al bloque de texto y mira cómo toma el espacio que sobra; bórralo y observa la diferencia

Por qué un div nuevo

Flexbox se activa en el padre, y acomoda a sus hijos directos. Para poner la foto y el texto en fila necesitas una caja que los contenga a los dos, y solo a ellos. Un div sirve justo para eso: agrupar sin significar nada.

Commit: agrega modelo de caja y perfil con flexbox.

Paso 4 · La navbar y la grilla

Página 4: Grid, position y el menú.

  • Convierte la navbar en barra horizontal: display: flex, gap, list-style: none y padding: 0 en la <ul>
  • Quita el subrayado de los enlaces del menú con text-decoration: none
  • Marca la vista actual con la regla nav a.activa (color y font-weight: 700)
  • En Inicio, pon las tres tarjetas en una grilla: display: grid, grid-template-columns: 1fr 1fr 1fr y gap en la <section> que las contiene
  • Cambia la grilla a dos columnas modificando una sola línea, y vuelve a tres

Commit: agrega navbar horizontal y grilla de tarjetas.

Guarda este CSS

En la práctica de Tailwind vas a hacer esto mismo con clases, y vas a retirar este archivo. Antes de eso quedará en el historial de Git, y tener las dos versiones lado a lado es la mejor forma de entender qué hace Tailwind por debajo.

Autoevaluación

Antes de pasar a Tailwind:

  • Las tres vistas enlazan el mismo estilos.css y ninguna tiene <style> ni style="…"
  • Ninguna regla se quedó sin punto y coma
  • Todo el texto usa la tipografía del body, con su fuente de respaldo
  • Los enlaces del menú cambian al pasar el cursor y al llegar con Tab
  • En cada vista, el enlace de esa vista está marcado con .activa
  • El menú se ve en horizontal, sin viñetas y sin subrayado
  • Las tarjetas tienen el texto separado de su borde (padding) y separación entre ellas (gap)
  • En Sobre mí, la foto y el texto van lado a lado
  • El contenido está centrado y no pasa de su ancho máximo en una pantalla grande
  • Todo está subido a GitHub, con un commit por paso

Vista Gráfica

Retroenlaces