Skip to content
Submitted 5 months ago

Tarjeta de 3 columnas

Victoriano Dominguez•40
@InformaticaEmpresarial-Tic-Docente
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

✅ De lo que estoy más orgulloso: Implementación responsive con Tailwind:

Logré que el diseño se adaptara perfectamente desde 375px (mobile) hasta 1440px (desktop) usando únicamente clases de Tailwind, sin CSS personalizado.

El uso de lg:flex y lg:w-[920px] para el breakpoint de escritorio funcionó sin problemas.

Consistencia visual:

Los botones mantuvieron el mismo tamaño (w-[146px] h-12) en todas las tarjetas, con efectos hover coherentes (hover:bg-cyan-800 hover:text-gray-100).

La tipografía (font-lexend para texto y font-big-shoulders para títulos) siguió fielmente la guía de estilo.

Detalles interactivos:

Los estados hover en botones (transition-all duration-200) agregaron una sensación pulida y profesional.

🔁 Qué haría diferente la próxima vez: Optimizar la estructura de clases:

Algunas clases de Tailwind se repitieron en los tres botones. Usaría @apply en el CSS para crear componentes reutilizables y reducir código duplicado.

Mejorar accesibilidad:

Añadiría aria-label a los botones y probaría con herramientas como WAVE o axe DevTools para verificar contraste de colores (especialmente en el texto sobre fondos oscuros).

Implementar variables de diseño:

Definiría colores y tamaños como variables en tailwind.config.js para facilitar cambios futuros (ej: gold-500 podría ser primary).

Pruebas en más dispositivos:

Probé en mobile/desktop, pero no en tablets. Usaría breakpoints intermedios (md:) para ajustar márgenes en pantallas medianas.

Automatizar el despliegue:

Configuraría GitHub Actions o Vercel para hacer deploy automático al hacer git push, en lugar de subir manualmente los archivos.

💡 ¿Dónde necesito ayuda? Tailwind avanzado: ¿Cómo organizar mejor archivos grandes con @layer o componentes personalizados?

Performance: ¿Vale la pena usar PurgeCSS en proyectos pequeños como este?

Animaciones: Me gustaría añadir micro-interacciones (ej: hover en las tarjetas) sin complicar el código.

Reflexión final: Este proyecto reforzó mi dominio de Tailwind CSS para maquetación rápida, pero también me hizo ver la importancia de planear la escalabilidad desde el inicio. ¡Agradezco feedback sobre cómo mejorar la estructura o accesibilidad! 🚀

What challenges did you encounter, and how did you overcome them?
  1. 🖥️ Responsive Design entre Mobile y Desktop Desafío: El layout debía cambiar drásticamente de una columna (mobile) a tres columnas (desktop) sin distorsionar el contenido.

Solución:

Usé Tailwind’s breakpoints (lg: para 1024px+) con flex-col (mobile) → lg:flex-row (desktop).

Ajusté el ancho del contenedor padre con w-[327px] (mobile) → lg:w-[920px] (desktop).

  1. 🎨 Coherencia Visual en los Botones Desafío: Cada botón tenía un color de texto diferente (text-gold-500, text-cyan-800, text-green-950), pero el hover debía invertir los colores uniformemente.

Solución:

Definí clases personalizadas en tailwind.config.js para los colores primarios:

js theme: { extend: { colors: { 'gold-500': 'hsl(31, 77%, 52%)', 'cyan-800': 'hsl(184, 100%, 22%)', 'green-950': 'hsl(179, 100%, 13%)' } } } Apliqué hover con lógica inversa:

html <button class="bg-gray-100 text-gold-500 hover:bg-gold-500 hover:text-gray-100"> Learn More </button> 3. 📱 Espaciado en Diferentes Dispositivos Desafío: El margen inferior del texto (<p>) debía ser mb-6 en mobile pero lg:mb-[83px] en desktop para alinear los botones.

Solución:

Usé Tailwind’s responsive prefixes:

html

<p class="mb-6 lg:mb-[83px]">Texto descriptivo...</p> Verifiqué con Chrome DevTools (Ctrl+Shift+M) para simular dispositivos.
  1. 🖋️ Fuentes Personalizadas Desafío: El diseño requería dos fuentes: Lexend Deca (400) para texto y Big Shoulders Display (700) para títulos.

Solución:

Importé las fuentes via CDN en el <head>:

html

<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap" rel="stylesheet"> Las configuré en tailwind.config.js:

js theme: { fontFamily: { 'lexend': ['Lexend Deca', 'sans-serif'], 'big-shoulders': ['Big Shoulders Display', 'sans-serif'] } } 5. 🧩 Repetición de Código en los Botones Desafío: Los 3 botones compartían 90% de clases, pero con variaciones de color.

Solución:

Opción 1: Usé @apply en CSS para crear una clase base:

css .btn-card { @apply w-[146px] h-12 rounded-full cursor-pointer transition-all duration-200 font-lexend text-[15px]; } Opción 2: Podría haber creado un componente React/Vue para reutilizar lógica.

Lecciones Aprendidas Tailwind es poderoso para responsive, pero requiere planear los breakpoints desde el inicio.

Los pequeños detalles (como hover states) marcan la diferencia en la experiencia de usuario.

Configurar bien tailwind.config.js ahorra tiempo en proyectos grandes.

What specific areas of your project would you like help with?
  1. 🎨 Optimización de Clases de Tailwind Código:

html

<!-- Ejemplo de botón con clases repetitivas --> <button class="bg-gray-100 text-gold-500 w-[146px] h-12 rounded-full hover:bg-gold-500 hover:text-gray-100 ..."> Learn More </button> Pregunta: ¿Cómo organizarías estas clases para evitar repetición en los 3 botones? ¿Vale la pena usar @apply en CSS o es mejor crear componentes reutilizables con React/Vue?
  1. ♿ Accesibilidad en Contraste de Colores Código:

html

<div class="bg-green-950 text-transparent-white"> <!-- Texto con opacidad --> </div> Pregunta: El color text-transparent-white (hsla(0, 0%, 100%, 0.75)) sobre bg-green-950 ¿cumple con WCAG AA/AAA? ¿Qué herramientas recomiendan para validarlo automáticamente?
  1. 📱 Breakpoints Personalizados Config actual (tailwind.config.js):

js screens: { 'mobile': '375px', 'desktop': '1440px', } Pregunta: ¿Es mejor usar breakpoints personalizados (como arriba) o ajustar los estándares de Tailwind (sm, lg, etc.)? Noté que lg: (1024px) no coincidía exactamente con el diseño.

  1. 🚀 Performance en Producción Problema: El archivo CSS final incluye todas las clases de Tailwind, incluso las no usadas.

Pregunta: ¿Cómo configurar PurgeCSS con Tailwind para este proyecto? ¿Es necesario si el HTML es pequeño?

  1. 🧪 Testing en Dispositivos Reales Contexto: Probé en Chrome DevTools, pero no en Safari o dispositivos iOS/Android.

Pregunta: ¿Qué flujo de testing recomiendan para verificar compatibilidad cruzada? ¿Es suficiente con herramientas como BrowserStack o debería probar físicamente?

Feedback Específico Solicitado Ejemplo de código mejorado para los botones (¿CSS con @apply vs componentes JS?).

Experiencias con herramientas como axe DevTools o Lighthouse para accesibilidad.

Errores comunes al usar breakpoints personalizados en Tailwind.

“Cualquier sugerencia, recurso o ejemplo concreto sería invaluable. ¡Agradezco su tiempo y expertise!” 😊

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Victoriano Dominguez's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord