Responsive Four Card Feature Section using Tailwind CSS

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

I'm most proud of creating a responsive and visually accurate layout using Tailwind CSS. The grid system (md:grid-cols-2 lg:grid-cols-3) allowed me to achieve the challenge’s unique desktop layout, with the Supervisor and Calculator cards vertically centered using lg:row-span-2 lg:self-center. Tailwind’s utility classes streamlined my styling process, enabling me to match the design’s colors, typography (Poppins font), and spacing efficiently. Additionally, I prioritized semantic HTML (header, main, footer) and included alt attributes for accessibility, which improved the structure and usability of the page.

Next time, I would focus on enhancing accessibility further by adding ARIA landmarks (e.g., role="region" for cards) and ensuring keyboard navigation. I’d also optimize the image paths; the ../images/ references in my HTML caused minor issues during testing, so I’d move images to a ./images/ folder for consistency. Additionally, I’d experiment with CSS animations (e.g., hover effects on cards) to add interactivity and explore image optimization (e.g., converting SVGs to WebP) for faster load times.

What challenges did you encounter, and how did you overcome them?

One major challenge was aligning the cards correctly on desktop to match the design’s layout, where the Supervisor and Calculator cards are vertically centered alongside two stacked cards (Team Builder and Karma). Initially, my grid layout didn’t position the cards as expected on larger screens. Another challenge was ensuring the mobile-first approach transitioned smoothly to tablet and desktop breakpoints without breaking the layout.

To address the desktop layout, I used CSS Grid with lg:grid-cols-3 and lg:row-span-2 to span the Supervisor and Calculator cards across two rows, paired with lg:self-center for vertical alignment. Tailwind’s media query classes (md:, lg:) simplified this process. For responsiveness, I adopted a mobile-first workflow, starting with a single-column layout (grid gap-6) and progressively adding columns for larger screens. Testing across devices using browser dev tools helped me fine-tune breakpoints and spacing.

What specific areas of your project would you like help with?

I’d appreciate feedback on the following areas:

• Accessibility: Are there specific ARIA roles or attributes I should add to improve screen reader support or keyboard navigation?
• Code Structure: Is my HTML structure semantic enough, or are there better ways to organize the card components for maintainability?