/* Estilos generales para toda la página */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
/* Estilo para el encabezado */
header h1 {
font-size: 2rem; /* Tamaño del título en rem para mayor responsividad */
color: #333;
}
/* Estilo para los subtítulos de cada sección */
section h2 {
font-size: 1.5rem; /* Se ajusta el tamaño de los subtítulos a rem */
color: #666;
margin-top: 20px;
}
/* Estilo para los párrafos */
section p {
font-size: 1rem; /* Tamaño base de fuente en rem */
color: #555;
}
/* Estilo para la lista ordenada de instrucciones */
section ol {
margin-left: 20px;
}
/* Estilo para los elementos de la lista */
section ol li {
font-size: 1rem; /* Tamaño de fuente en rem para consistencia */
margin-bottom: 10px;
}
/* Estilo para los enlaces, en caso de agregar alguno */
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Ejercicios - Manos a la obra</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Encabezado de la página -->
<header>
<h1>Bienvenido a nuestra lista de ejercicios "Manos a la obra"</h1>
</header>
<!-- Sección de introducción -->
<section>
<h2>Qué es:</h2>
<p>Un camino práctico e involucrante para aprender y mejorar tus habilidades en tecnología. Aquí, no encontrarás largas lecturas teóricas o explicaciones abstractas. En cambio, nuestros ejercicios están diseñados para ponerte en el centro del proceso de aprendizaje, permitiéndote construir, experimentar y explorar conceptos tecnológicos de manera directa y aplicada.</p>
</section>
<!-- Sección sobre la utilidad de la lista -->
<section>
<h2>Para qué sirve:</h2>
<p>Esta lista es una herramienta dinámica para aprender, reforzar y mejorar habilidades prácticas en programación y desarrollo web. Cada ejercicio es una oportunidad para aplicar conocimientos teóricos en escenarios reales, preparándote no solo para entender la tecnología, sino también para utilizarla de manera efectiva y creativa en tus propios proyectos o en el entorno laboral.</p>
</section>
<!-- Sección de instrucciones sobre cómo utilizar la lista -->
<section>
<h2>Cómo hacerlo:</h2>
<ol>
<li>Lee cada ejercicio con atención: comienza entendiendo el escenario propuesto y qué se espera como resultado.</li>
<li>Escribe el código: utiliza el entorno de codificación de tu elección para escribir y probar tu código. No te preocupes si no aciertas a la primera, la práctica lleva a la perfección.</li>
<li>Verifica la solución: después de intentar resolver el ejercicio, compara tu código con la solución proporcionada en "Opinión del instructor". Esto te ayudará a identificar áreas de mejora y consolidar el aprendizaje.</li>
<li>Repite: la repetición es clave para el aprendizaje. Intenta hacer los ejercicios más de una vez, aplicando mejoras y variantes.</li>
</ol>
<p>Recuerda, cada desafío es una oportunidad para crecer. No te desanimes por los errores; son pasos en el camino del aprendizaje. ¡Y sobre todo, diviértete! El aprendizaje más efectivo ocurre cuando nos involucramos y nos interesamos en lo que estamos haciendo.</p>
</section>
<!-- Lista de ejercicios -->
<section>
<h2>Ejercicios:</h2>
<ol>
<li>Adaptando el cuerpo del texto a unidades relativas.</li>
<li>Convirtiendo píxeles a rem en CSS.</li>
<li>Mejorando la responsividad de un sitio web.</li>
<li>Ajustando el CSS para diferentes tamaños de fuente.</li>
</ol>
</section>
</body>
</html>
