Proyecto integrador
Lo que ya sabés
En esta unidad aprendiste a: elegir elementos con selectores, entender por qué gana una regla sobre otra, trabajar con color y unidades, controlar texto y tipografía, entender el modelo de caja, decidir cómo se acomoda cada elemento (display y position), distribuir layouts con Flexbox y Grid, adaptar el diseño a distintos tamaños de pantalla, cuidar el contraste y la accesibilidad, y usar el inspector del navegador para entender qué está pasando.
Esta última lección combina varias de esas piezas en un solo ejercicio — y después te propone aplicar todo eso al sitio real que armaste al final de la unidad de HTML.
Ejercicio integrador: una tarjeta de perfil
Tenés el HTML de una tarjeta de perfil, sin ningún estilo todavía. Armá el CSS para que:
- La tarjeta (
.tarjeta) tenga un ancho fijo razonable, padding, borde con esquinas redondeadas (border-radius) ybox-sizing: border-box. - Adentro de la tarjeta, la foto, el nombre y la descripción queden acomodados en columna y centrados horizontalmente (Flexbox).
- El nombre (
.nombre) tenga un tamaño de fuente enrem, más grande que el texto normal. - El botón (
.boton-contacto) cambie de color al pasar el mouse (:hover).
Ahora, tu sitio real
El sitio de varias páginas que armaste al final de la unidad de HTML todavía no tiene CSS — se ve como texto plano del navegador. Ahora tenés las herramientas para cambiar eso, trabajando en tus propios archivos, con tu editor de código.
No hace falta que sea perfecto ni muy elaborado — la idea es aplicar, de verdad, lo que aprendiste:
- ☐ Un archivo
estilos.cssexterno, enlazado desde todas las páginas del sitio (Lección 1) - ☐ Una tipografía y un color de texto general, definidos en
body(Lección 3, herencia) - ☐ Contraste de color cuidado entre texto y fondo (Lección 14)
- ☐ El menú de navegación estilizado con Flexbox, sin viñetas de lista (Lección 12)
- ☐ Al menos una sección de la página armada con Flexbox o Grid (Lección 10 u 11)
- ☐ El sitio se ve razonable tanto ancho como angosto — probá cambiando el tamaño de la ventana del navegador (Lección 11)
- ☐ Probaste al menos una vez el inspector del navegador sobre tu propio sitio (Lección 15)
Cuando el CSS esté aplicado a las 5 páginas y se vea razonablemente consistente entre todas, tu sitio está completo — HTML para la estructura, CSS para la presentación, las dos unidades trabajando juntas.