Misión C12Nivel Creadores (13–15 años) En Celular Computador 20–30 min
CSS: el estilo
Web: CSS, selectores, modelo de caja y flexbox
🗺️
Tu Misión de Hoy
El HTML es el esqueleto; el CSS es la ropa. Hoy le das colores, tipos de letra y diseño a tu página.
🧰
Checklist interactivoQué Necesitas en Casa
Revisa los materiales juntos y marca las casillas a medida que los tengan listos:
Trinket → New Trinket → HTML (vista previa inmediata) o VS Code web
👣
Paso a Paso en Familia
🎮
Minijuego Interactivo: Reto C12
Aprende jugando: resuelve el reto interactivo directamente aquí abajo.
Modifica propiedades CSS en tiempo real con border-radius:
radius: 12px
🏆 Reto Extra de Exploración
- Crea una paleta de 3 colores y úsala en toda la página.
- Añade un efecto al pasar el ratón:
a:hover { … }.🐞 Si algo no funciona (¡Hora de depurar!)
- El estilo no se aplica → revisa el
<link> y que la clase se escriba igual en HTML y CSS.
- Falta un ; o } → todo lo de después se ignora.💬 Muéstraselo a tu Familia
Muestra el antes y el después de tu página.
¿Terminaron la misión? Estampa tu sello para avanzar.
Guía para el Adulto Acompañante
Tu rol es guiar con preguntas, no dar la respuesta.
🎯Objetivo
Separar estructura (HTML) y presentación (CSS); selectores, modelo de caja y flexbox.
📋Antes de empezar
Tenga el proyecto de C11.
❓Preguntas para hacer
- ¿Por qué separar HTML y CSS?
- ¿Qué es una clase?
- ¿Qué hace flexbox?
Si se atasca (de menos a más ayuda):
1. Cambien un solo color y observen.
2. Inspeccionen juntos una página con F12.
3. Den el CSS base.
💡Sin computador / solo celular
Solo celular: Trinket HTML funciona en el navegador del celular ⚠; un teclado Bluetooth ayuda mucho.
⭐Sello del pasaporte
✅ la página tiene estilos propios y un diseño con flexbox.
🧠Conceptos
Navegación del Programa
🤖
Jugar ➔¿Practicar con el Robot?
Prueba el simulador de cuadrícula 5x5