Skip to content
Submitted 12 months ago

Four card feature section

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

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Teodor Jenkler•4,040
    @TedJenkler

    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
  • David de Alencar•120
    @dealencardavid

    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

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