Reto 1
🟢 Inicial
⏱️ 30 minutos
Crea tu primera página personal
Construye una página sencilla que presente información
sobre ti, tus intereses y tus objetivos.
🎯 Objetivo
Practicar la estructura básica de HTML y las etiquetas
de contenido más importantes.
La página debe incluir:
- Un título principal con tu nombre.
- Un párrafo de presentación.
- Una lista con tres intereses.
- Un subtítulo llamado “Mis objetivos”.
- Un enlace hacia ByteNova.
- Un footer con el año actual.
💡 Ver pista
Utiliza las etiquetas
<h1>,
<p>,
<ul>,
<a>
y <footer>.
✅ Ver solución orientativa
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Mi página personal</title>
</head>
<body>
<main>
<h1>Mi nombre</h1>
<p>
Estoy aprendiendo desarrollo web.
</p>
<h2>Mis intereses</h2>
<ul>
<li>Tecnología</li>
<li>Programación</li>
<li>Diseño web</li>
</ul>
<h2>Mis objetivos</h2>
<p>
Quiero crear mis propios proyectos.
</p>
<a href="https://bytenova.app/">
Visitar ByteNova
</a>
</main>
<footer>
<p>© 2026 Mi página personal</p>
</footer>
</body>
</html>
📘 Repasar HTML y CSS
Reto 2
🟡 Básico
⏱️ 45 minutos
Crea una sección de tarjetas responsive
Diseña tres tarjetas que se adapten automáticamente a
computadoras, tabletas y teléfonos.
🎯 Objetivo
Practicar CSS Grid, espacios, bordes, sombras y diseño
adaptable.
Cada tarjeta debe incluir:
- Un emoji o icono.
- Un título.
- Una descripción corta.
- Un botón o enlace.
- Bordes redondeados.
- Una sombra suave.
💡 Ver pista
.tarjetas {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
✅ Ver solución orientativa
<section class="tarjetas">
<article class="tarjeta">
<span>🌐</span>
<h2>Desarrollo web</h2>
<p>Aprende HTML, CSS y JavaScript.</p>
<a href="#">Comenzar</a>
</article>
<article class="tarjeta">
<span>🐍</span>
<h2>Python</h2>
<p>Aprende programación desde cero.</p>
<a href="#">Comenzar</a>
</article>
<article class="tarjeta">
<span>🛡️</span>
<h2>Ciberseguridad</h2>
<p>Protege tus cuentas y dispositivos.</p>
<a href="#">Comenzar</a>
</article>
</section>
.tarjetas {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
padding: 30px;
}
.tarjeta {
padding: 25px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.tarjeta span {
font-size: 2rem;
}
.tarjeta a {
display: inline-block;
margin-top: 12px;
padding: 10px 18px;
background: #2563eb;
color: white;
text-decoration: none;
border-radius: 8px;
}
📘 Repasar diseño responsive
Reto 7
🟢 Básico⏱️ 50 minutos
Construye una landing page adaptable
Organiza una portada con llamada a la acción que se adapte a móvil y escritorio.
🎯 ObjetivoPracticar estructura semántica, CSS y diseño responsive.
Debes completar:
- Hero con título, texto y botón
- Tres beneficios en tarjetas
- Diseño legible en móvil
- Footer sencillo
💡 Ver pista
Empieza por la versión móvil y utiliza una media query para ampliar el diseño.
✅ Ver solución orientativa
Comprueba cada requisito uno por uno. Si tu resultado funciona y puedes explicar por qué, el reto está cumplido. Compara después tu proceso con los recursos de ByteNova y mejora lo que sea necesario.