Fundamentos

Nivel 2: Hero completo

Objetivo

Mantén el h1 Hello World centrado. Añade un subtítulo <p> debajo y un botón CTA con buen estilo (padding y bordes redondeados).

En este nivel aprenderás

Amplías el hero con más elementos HTML dentro del mismo componente: un párrafo de presentación y un botón de llamada a la acción (CTA). Verás cómo el orden del JSX define la estructura visual y cómo Flexbox en columna alinea varios bloques de forma vertical y centrada.

Pasos a completar (0/13)

• 1Paso 1La página carga sin errores▾
• 2Paso 2El h1 Hello World sigue presente y centrado▾
• 3Paso 3El hero usa columna centrada (flex flex-col items-center)▾
• 4Paso 4Has añadido un <p> en el hero▾
• 5Paso 5El párrafo tiene tu presentación (10+ caracteres)▾
• 6Paso 6El párrafo está debajo del h1 (no al lado)▾
• 7Paso 7El párrafo tiene estilo (gris, margen o centrado)▾
• 8Paso 8Existe un botón «Ver proyectos» (sin estilo aún)▾
• 9Paso 9El botón está debajo del párrafo▾
• 10Paso 10h1, párrafo y botón en columna sin solaparse▾
• 11Paso 11El botón tiene padding (px-6 py-3)▾
• 12Paso 12El botón tiene bordes redondeados▾
• 13Paso 13El botón es teal con texto blanco▾