Banco de 20 Retos de Live Coding — Unidad 1

<!-- último enlace del nav, el que ya existe -->
<li><a class="hover:text-emerald-400" href="#contacto">Contacto</a></li>
<!-- la sección de proyectos existente, sin Testimonios todavía -->
<section id="proyectos" class="max-w-5xl mx-auto px-6 py-14">...</section>

<!-- último enlace que ya existía, no se toca -->
<li><a class="hover:text-emerald-400" href="#contacto">Contacto</a></li>
<!-- li nuevo: el href debe ser IGUAL al id de la section de abajo -->
<li><a class="hover:text-emerald-400" href="#testimonios">Testimonios</a></li>
<!-- sección de proyectos existente, no se toca -->
<section id="proyectos" class="max-w-5xl mx-auto px-6 py-14">...</section>
<!-- section nueva: mismo contenedor centrado que las demás -->
<section id="testimonios" class="max-w-5xl mx-auto px-6 py-14">
  <!-- h2 con el mismo estilo que Sobre mí, Skills y Proyectos -->
  <h2 class="text-2xl font-bold mb-6">Testimonios</h2>
  <!-- grid: 1 columna en celular, 2 desde 768px -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- article: el testimonio se entiende leído solo, por eso no es un div -->
    <article class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
      <!-- p: la cita del testimonio -->
      <p class="text-slate-600 text-sm mb-3">"Excelente predisposición para aprender."</p>
      <!-- p: autor de la cita, en negrita -->
      <p class="font-semibold text-sm">— Docente, UTH</p>
    <!-- cierra el article -->
    </article>
  <!-- cierra el div de la grilla -->
  </div>
<!-- cierra la section -->
</section>

<!-- div suelto: no pertenece a ninguna section y no tiene id -->
<div class="flex flex-col md:flex-row gap-4">
  <!-- caja 1: solo un fondo celeste y relleno -->
  <div class="bg-sky-500 p-4">Caja 1</div>
  <!-- caja 2: solo un fondo verde y relleno -->
  <div class="bg-emerald-300 p-4">Caja 2</div>
<!-- cierra el div suelto -->
</div>

<!-- section nueva: le da nombre (id) y significado al bloque -->
<section id="destacados" class="max-w-5xl mx-auto px-6 py-10">
  <!-- el div de antes queda igual: columna en celular, fila desde md -->
  <div class="flex flex-col md:flex-row gap-4">
    <!-- caja 1: se le agregan esquinas redondeadas y texto blanco -->
    <div class="bg-sky-500 p-4 rounded-lg text-white">Caja 1</div>
    <!-- caja 2: esquinas redondeadas, mismo patrón -->
    <div class="bg-emerald-300 p-4 rounded-lg">Caja 2</div>
  <!-- cierra el div contenedor -->
  </div>
<!-- cierra la section nueva -->
</section>

<!-- p vacío: ocupa lugar en el DOM pero no dice nada -->
<p class="text-slate-500 text-sm"></p>

<!-- p con una cita personal real, en cursiva para que se lea destacada -->
<p class="text-slate-500 text-sm italic">"Aprender haciendo, un commit a la vez."</p>

<!-- alt describe una clase CSS (rounded-lg), no la imagen -->
<img src="img/foto1.png" class="rounded-lg w-64 h-64 object-cover" alt="Rounded corners">

<!-- alt describe QUÉ se ve en la foto, para quien no puede verla -->
<img src="img/foto1.png" class="rounded-lg w-64 h-64 object-cover" alt="Foto de perfil de Prado Diaz Bernardo">

<!-- última tarjeta existente, la de MySQL -->
<article class="bg-white rounded-xl border border-slate-200 p-5 shadow-sm hover:shadow-md transition">
  <!-- nombre de la skill -->
  <h3 class="font-semibold mb-1">MySQL</h3>
  <!-- descripción breve -->
  <p class="text-sm text-slate-500">Manejador de Base de Datos</p>
<!-- cierra el article -->
</article>

<!-- tarjeta nueva: COPIA exacta de las clases de las otras cuatro -->
<article class="bg-white rounded-xl border border-slate-200 p-5 shadow-sm hover:shadow-md transition">
  <!-- h3: solo cambia el nombre -->
  <h3 class="font-semibold mb-1">Django</h3>
  <!-- p: solo cambia la descripción -->
  <p class="text-sm text-slate-500">Framework web en Python, patrón MTV.</p>
<!-- cierra el article; va dentro de la MISMA grilla, antes de cerrarla -->
</article>

<!-- md: activa 3 columnas desde 768px (tablet) -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">

<!-- lg: activa 3 columnas recién desde 1024px; sm:grid-cols-2 no se toca -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">

<!-- única tarjeta de proyecto actual -->
<article class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg hover:-translate-y-1 transition">
  <!-- nombre del proyecto -->
  <h3 class="text-lg font-bold mb-2">Gestor de Tareas Web</h3>
  <!-- enlace al repositorio -->
  <a href="#" class="text-emerald-700 font-semibold text-sm hover:underline">Ver repositorio →</a>
<!-- cierra el article -->
</article>

<!-- tarjeta 2: mismas clases, incluido el hover que la levanta -->
<article class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg hover:-translate-y-1 transition">
  <!-- h3 con el nombre del proyecto nuevo -->
  <h3 class="text-lg font-bold mb-2">Portafolio Personal</h3>
  <!-- p con su descripción, mismo tamaño y color -->
  <p class="text-slate-600 text-sm mb-4">Sitio propio con HTML5 semántico y Tailwind CSS.</p>
  <!-- enlace: mismo estilo; cambia el href al repo real -->
  <a href="#" class="text-emerald-700 font-semibold text-sm hover:underline">Ver repositorio →</a>
<!-- cierra el article; va dentro del mismo contenedor grid -->
</article>

<!-- bloque suelto: no está dentro de ninguna section -->
<div class="flex items-center space-x-4 p-4 bg-white rounded-xl shadow-md max-w-sm">
  <!-- alt genérico y en inglés -->
  <img class="w-16 h-16 rounded-full object-cover border-2 border-indigo-500" src="img/foto1.png" alt="Student profile photo" />
  <!-- rol en inglés -->
  <p class="text-sm font-medium text-indigo-600">Computer Science Engineer</p>
  <!-- dato inventado -->
  <p class="text-xs text-gray-500">ID: #84920</p>
<!-- cierra el div -->
</div>

<!-- ahora vive dentro de la columna 2 de #sobre-mi; mt-6 lo separa del texto de arriba -->
<div class="flex items-center space-x-4 p-4 bg-white rounded-xl shadow-md max-w-sm mt-6">
  <!-- alt describe la foto real -->
  <img class="w-16 h-16 rounded-full object-cover border-2 border-indigo-500" src="img/foto1.png" alt="Foto de perfil de Prado Diaz Bernardo" />
  <!-- rol traducido y real -->
  <p class="text-sm font-medium text-indigo-600">Estudiante de Desarrollo Web</p>
  <!-- dato real en lugar del ID inventado -->
  <p class="text-xs text-gray-500">UTH · APLICAWEB 4to</p>
<!-- cierra el div -->
</div>

<!-- botón Enviar solo, sin nada al lado -->
<button type="submit" class="bg-emerald-600 hover:bg-emerald-700 transition text-white font-semibold px-6 py-2.5 rounded-lg">Enviar</button>

<!-- div: pone ambos botones en fila con separación -->
<div class="flex gap-3">
  <!-- Enviar: sin cambios -->
  <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 transition text-white font-semibold px-6 py-2.5 rounded-lg">Enviar</button>
  <!-- Cancelar: type="button" es lo crítico, evita que dispare el submit -->
  <button type="button" class="border border-slate-600 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-400 transition text-white font-semibold px-6 py-2.5 rounded-lg">Cancelar</button>
<!-- cierra el div -->
</div>

<!-- header normal: se va hacia arriba con el scroll -->
<header class="bg-slate-900 text-white flex flex-col gap-4 md:flex-row md:items-center md:justify-between px-6 py-6 md:px-10">

<!-- sticky top-0 lo pega arriba al hacer scroll; z-10 lo deja por encima del contenido -->
<header class="bg-slate-900 text-white flex flex-col gap-4 md:flex-row md:items-center md:justify-between px-6 py-6 md:px-10 sticky top-0 z-10">

<!-- ancho y alto fijos de 256px en cualquier pantalla, incluso en celular chico -->
<img src="img/foto1.png" class="rounded-lg w-64 h-64 object-cover" alt="Foto de perfil">

<!-- w-full: base para celular · max-w-xs: tope · sm:w-64: tamaño fijo recién desde 640px -->
<img src="img/foto1.png" class="rounded-lg w-full max-w-xs h-64 object-cover sm:w-64" alt="Foto de perfil">

<!-- solo hover: el cambio de color es instantáneo -->
<li><a class="hover:text-emerald-400" href="#sobre-mi">Sobre mí</a></li>

<!-- transition-colors anima el cambio de color en lugar de aplicarlo de golpe -->
<li><a class="hover:text-emerald-400 transition-colors" href="#sobre-mi">Sobre mí</a></li>

<!-- nav: verde al pasar el mouse -->
<li><a class="hover:text-emerald-400" href="#skills">Skills</a></li>
<!-- botón: verde, hover más oscuro y aro de foco verde -->
<button type="submit" class="bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-400 ...">

<!-- nav: mismo número (400), cambia solo el nombre del color -->
<li><a class="hover:text-indigo-400" href="#skills">Skills</a></li>
<!-- botón: 600, 700 y 400 se conservan; solo cambia emerald por indigo -->
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-400 ...">

<!-- input de nombre solo con minlength; no tiene required -->
<input type="text" id="nombre" name="nombre" minlength="2" placeholder="Tu nombre">

<!-- required obliga a que haya algo; minlength solo mide lo que ya se escribió -->
<input type="text" id="nombre" name="nombre" required minlength="2" placeholder="Tu nombre">

<!-- solo tiene el piso (mínimo) -->
<input type="text" id="nombre" name="nombre" required minlength="2" placeholder="Tu nombre">

<!-- maxlength agrega el techo: el navegador no deja escribir más de 60 -->
<input type="text" id="nombre" name="nombre" required minlength="2" maxlength="60" placeholder="Tu nombre">

<!-- el for del label es IGUAL al id del input: letra por letra -->
<label for="correo" class="block text-sm font-semibold mb-1">Correo</label>
<!-- el id coincide con el for de arriba; name es lo que viaja al enviar -->
<input type="email" id="correo" name="correo" required placeholder="tu@correo.com">

<!-- si el for NO coincidiera (for="email"), el vínculo se rompería -->
<label for="email" class="block text-sm font-semibold mb-1">Correo</label>
<!-- el id sigue siendo correo: ya no hay pareja -->
<input type="email" id="correo" name="correo" required placeholder="tu@correo.com">

<!-- placeholder-slate-500 sobre bg-slate-800: contraste ≈ 3.1:1, menos del 4.5:1 exigido por WCAG AA -->
<input class="bg-slate-800 border border-slate-700 text-white placeholder-slate-500" placeholder="Tu nombre">

<!-- placeholder-slate-400 sobre bg-slate-800: contraste ≈ 5.7:1, cumple AA -->
<input class="bg-slate-800 border border-slate-700 text-white placeholder-slate-400" placeholder="Tu nombre">

<!-- solo hover: con el teclado no hay ninguna pista de dónde está el foco -->
<li><a class="hover:text-emerald-400" href="#skills">Skills</a></li>

<!-- focus:ring-2 dibuja un aro al llegar con Tab; rounded lo redondea -->
<li><a class="hover:text-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 rounded" href="#skills">Skills</a></li>

# muestra qué archivos cambiaron y siguen sin guardarse en un commit
$ git status

# prepara TODOS los archivos modificados para el commit
$ git add .
# guarda la fotografía del proyecto con un mensaje descriptivo
$ git commit -m "Agregar segunda tarjeta en Proyectos"
# sube el commit a GitHub; eso dispara el redeploy automático en Render
$ git push

<!-- grid: columnas fijas por breakpoint (1, 2, 3) -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">
  <!-- cada tarjeta ocupa lo que le da la columna -->
  <article class="bg-white rounded-xl border border-slate-200 p-5">

<!-- flex flex-wrap: las tarjetas fluyen en fila y saltan de línea si no entran -->
<div class="flex flex-wrap gap-5">
  <!-- flex-1 reparte el espacio sobrante; min-w-[14rem] evita que se aplasten (repetir en las 5 tarjetas) -->
  <article class="flex-1 min-w-[14rem] bg-white rounded-xl border border-slate-200 p-5">