Skip to content
Submitted 3 months ago

Four Card Feature Section

pheight-89•250
@pheight-89
A solution to the Four card feature section 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?

I am most proud of learning how to use Tailwind CSS v-4 as it is the first time I have used Tailwind in general

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

Working with the Tailwind framework. The setup was pretty straight forward. However, I had a hard time added the custom colors, and grid layout with Tailwind. However, after reading Tailwind documentation I was able to work through the issues.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Weyehn Reeves•190
    @WeyehnR

    🌟 What’s Good:

    • Clean Structure: The project is organized well. The use of folders for images and a clear naming of files (like style.css, index.html) is a nice touch.
    • Semantic HTML: The HTML seems to use proper tags (section, h1, p, etc.), which helps with accessibility and structure.
    • Visual Consistency: The layout appears clean and aligned well with the original challenge design. Spacing and typography look well-balanced.
    • Responsive Effort: There’s an attempt at responsiveness (which is key for any front-end project). The layout doesn’t completely fall apart on smaller screens.

    🔧 What Could Be Improved:

    • More Comments: Adding some comments in the CSS would help readers (and future you) understand the layout choices faster.
    • Mobile Optimization: While there's some responsiveness, you could enhance the mobile view a bit more — maybe stack the cards vertically or adjust the padding/margins for better spacing.
    • Class Naming: Consider using more descriptive class names (.card-wrapper vs something like .container-2). It helps others understand what each class does at a glance.
    • Alt Text: If there are images, make sure alt attributes are filled meaningfully — this helps with accessibility and SEO.

    💡 Suggestions:

    • Try adding a little hover effect on the cards (like a subtle shadow or scale-up) for better interactivity.
    • Look into using CSS variables for colors and spacing if you’re planning to expand this — it makes maintenance much easier.
  • Shakiba•130
    @Shakiba-Alipour

    Good job!

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