Skip to content
Submitted 3 months ago

Four card feature master

NATNAEL GETACHEW ASEFA•100
@Eng-Natole
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I’m proud of successfully implementing a clean and responsive layout using Flexbox. Next time, I’d focus on optimizing my code structure and improving accessibility features.

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

A challenge I faced was aligning the card components correctly across different screen sizes. I overcame this by refining my Flexbox usage and adjusting spacing with CSS custom properties.

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

I’d appreciate feedback on improving my mobile-first workflow and making my CSS more efficient and scalable. Any tips on enhancing visual hierarchy and accessibility would also be valuable.

Please log in to post a comment

Log in with GitHub

Community feedback

  • Howslifem8•100
    @Howslifem8

    Hello, your final product looks great ! I do have some recommendations for your semantic structure though. Firstly, within any <div> your header elements should be in hieratical order. For example within your <header> you used two <h1> elements. The semantic approach would've been using a single <h1> for the top-first line then a <h2> for the second and a <p> for the longer text. Using CSS you then change how the <h> text appears.

    Additionally, I believe you could've used less classes to structure your code better. In your code it seems you utilized 5 unique classes (container, content, combiner, card & card-component), I believe you could've combined card & card-component, and scrapped the combiner class. I personally used 2 classes (Container & Card). For this project the combiner class could've been scrapped if you used your container class for only the card section, excluding the <header> that's pre-placed with html. The html also places the card in it's respective column so if you put 2 cards inside 1 <div> that means they share a column. Lastly, the card & card-component could be combined.

    All-in-all you got the job done and it looks sleekly professional so awesome job. Hope the feedback helps, keep on going !

    Marked as helpful
  • k-mardine•60
    @k-mardine

    you just need practice your eyes to make same desgin you have to be proud keep going

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