Skip to content
Submitted about 2 months ago

Four Card Feature Section with HTML and CSS

P
Dexter Niles•140
@dexterniles
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'm starting to feel much more comfortable with styling based on viewport width. Overall i think this came out really nice but there are still some little things that I need to work on adjusting.

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

Spacing for mobile continues to be an issue. I can't seem to find the right sizing combination to make it look nice. Maybe its the layout im using?

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

Spacing and adaptive sizes. Most of the stuff in here is hard coded which i know is a no no but I don't know how to do it any other way atp. Any and all help is welcomed!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Mnqobi Thusi•150
    @CodexLoop

    Your Four Card Feature Section project is clean, responsive, and visually well-structured, with clear typography, consistent spacing, and effective use of color-coded borders. It adapts smoothly across screen sizes, showcasing a solid grasp of modern frontend design. To polish it further, consider centering the section on wider screens, adding subtle hover effects for interactivity, including a favicon, and ensuring accessibility best practices like contrast checks and alt text for icons. Overall, it’s a strong, portfolio-worthy UI component—just a few tweaks away from being production-ready.

    Marked as helpful

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