Semana 3

Página web con Bootstrap y Tailwind

Temas Aprendidos

Esta semana aprendí sobre las librerías CSS Bootstrap y Tailwind, que ayudan a diseñar páginas web más rápido y fácil. Bootstrap tiene clases ya listas para botones, columnas y más, mientras que Tailwind usa clases pequeñas para personalizar el estilo de forma más detallada. Me gustó ver cómo con pocas líneas se pueden crear diseños bonitos y responsivos.

Ejercicios y Resultados

Card con Efectos Hover

Código:

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
  <div class="p-6">
    <div class="text-xl font-semibold text-gray-900 mb-2">Tarjeta Interactiva</div>
    <p class="text-gray-600">Esta tarjeta cambia su sombra al hacer hover</p>
    <button class="mt-4 px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors">
      Botón
    </button>
  </div>
</div>

Resultado:

Tarjeta Interactiva

Esta tarjeta cambia su sombra al hacer hover

Layout con Flexbox

Código del ejercicio:

<div class="flex flex-wrap gap-4 p-4 bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg">
  <div class="flex-1 min-w-48 bg-white p-4 rounded-lg shadow">
    <h3 class="font-bold text-blue-600">Columna 1</h3>
    <p class="text-gray-600">Contenido flexible</p>
  </div>
  <div class="flex-1 min-w-48 bg-white p-4 rounded-lg shadow">
    <h3 class="font-bold text-purple-600">Columna 2</h3>
    <p class="text-gray-600">Se adapta automáticamente</p>
  </div>
  <div class="flex-1 min-w-48 bg-white p-4 rounded-lg shadow">
    <h3 class="font-bold text-green-600">Columna 3</h3>
    <p class="text-gray-600">Layout responsivo</p>
  </div>
</div>

Resultado:

Columna 1

Contenido flexible

Columna 2

Se adapta automáticamente

Columna 3

Layout responsivo

Badges y grupos de botones

Código del ejercicio:

<div class="space-y-4">
  <!-- Badges -->
  <div class="flex flex-wrap gap-2">
    <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium">HTML</span>
    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">CSS</span>
    <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">JavaScript</span>
  </div>
  
  <!-- Button Group -->
  <div class="inline-flex rounded-lg shadow-sm">
    <button class="px-4 py-2 bg-purple-600 text-white rounded-l-lg hover:bg-purple-700">Inicio</button>
    <button class="px-4 py-2 bg-purple-500 text-white hover:bg-purple-600">Medio</button>
    <button class="px-4 py-2 bg-purple-600 text-white rounded-r-lg hover:bg-purple-700">Fin</button>
  </div>
</div>

Resultado:

HTML CSS JavaScript

Reflexión Final

Al aprender Bootstrap y Tailwind, me di cuenta de lo útil que son las herramientas que simplifican el diseño web sin escribir tanto código desde cero. Comprendí que cada librería tiene su estilo y forma de trabajar, lo que me hizo pensar en cuál se adapta mejor a cada proyecto. Esta experiencia me ayudó a valorar la importancia de elegir bien los recursos para trabajar de forma más eficiente.

¿Qué aprendió?

Aprendí a usar las librerías CSS Bootstrap y Tailwind para diseñar páginas web de forma rápida y ordenada.

¿Cómo aprendió?

Aprendí practicando con ejemplos, viendo cómo funcionan las clases y aplicándolas en el protafolio.