Diseño Web - Módulo 1 - Proyecto Final

🎓 Proyecto Final: Mi Mini Sitio Web

Este es el momento de aplicar lo aprendido. Vas a crear tu propia página web usando HTML, CSS y JavaScript.

🎯 ¿Qué debe tener tu página?

✅ Estructura completa con <html>, <head> y <body>
✅ Títulos y párrafos
✅ Una imagen y un enlace
✅ Una lista o tabla
✅ Estilos CSS: color de fondo, texto, márgenes, clases o ID
✅ Una plantilla con div organizados (puedes usar Grid o Flexbox)
✅ Un botón que cambie algo con JavaScript (texto, color, etc.)

🌈 Tema libre:

Tu página puede ser sobre lo que tú quieras: un videojuego, tu cantante favorito, tu mascota, una receta, una película, etc.

🧪 Plantilla base editable

Puedes comenzar con este ejemplo y modificarlo como quieras:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #f0f0f0;
        font-family: Arial;
      }
      #contenedor {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 10px;
      }
      .caja {
        background: white;
        padding: 10px;
        border-radius: 8px;
      }
      #boton {
        background: navy;
        color: white;
        padding: 8px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Mi sitio web</h1>
    <p>Bienvenido a mi primera página personalizada</p>

<div id="contenedor">
      <div class="caja">
        <h3>Sobre mí</h3>
        <p>Me gusta el arte y la tecnología.</p>
      </div>
      <div class="caja">
        <h3>Mi imagen</h3>
        <img src="https://via.placeholder.com/150" alt="Mi imagen" style="max-width:100%;">
      </div>
    </div>

<br>
    <button id="boton" onclick="document.body.style.background = '#cceeff'">Cambiar fondo</button>
  </body>
</html>

¡Este proyecto es tu oportunidad de demostrar tu creatividad y lo que has aprendido en el Módulo 1!