Skip to content
Submitted 3 months ago

Four card feature section

Daniel Tving•230
@dantvi
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?

Finishing the challenge and improving my CSS grid skills.

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

The main challenge I encountered were in the desktop version, when I needed to place the card elements according to the design. I have not been working that much with CSS grid, but after reading about it I managed to solve the problem.

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

Any feedback would be appreciated.

Community feedback

  • Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Hi @dantvi,

    Nice project! Here are a couple of suggestions for improvement:

    Responsive Design: I noticed that at around 975px, the p takes up the full width of the screen. Consider adjusting it to 50% or a similar value to make the content more compact and visually appealing.

    ARIA Labels: Adding ARIA labels to summarize the content of the cards would help screen readers better interpret your site. This will greatly improve accessibility.

    Otherwise, your site looks great and is responsive. Great work!

    Hope this helps!

    Best, Teodor

    Marked as helpful
    0
    Daniel Tving•230
    @dantviPosted 3 months ago

    Thank you Teodor for your feedback 😊 I will check out your changes and try to implement them. It was good feedback.

    1
  • David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hey, Daniel!

    Great job here and nice job handling the positioning with a combination of id's and a single grid.

    The only thing I would say that could be improved in your solution is to change the card background-color to pure white to better match the design.

    Happy coding!

    Marked as helpful
    0
    Daniel Tving•230
    @dantviPosted 3 months ago

    Thank you David for your feedback. I didn’t even notice the pure white background on the cards. I will fix it 😊

    0

Please log in to post a comment

Log in with GitHub

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