Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section

@PatricioZarauz

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm proud of being able to correctly use the grid-template-area property of css grid and also of correctly implementing the card border highlight.

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

My main challenge was correctly implementing the desktop layout since i was using a template with 2 rows instead of 4. In order to overcome this I used the discord channel and some fellow mentors help me to realize the issue.

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

I would like to get some feedback regarding the accessibility or any code improvement.

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

👋 Hello @PatricioZarauz

Nice work there! I can see your CSS structure is very clear and concise, the solution is very close to the original design.

Here is my opinion on what can be improved:

  • Add another media query breakpoints for smoother responsiveness (you can check out my solution for this challenge for reference)
  • You can put <h1> along with it's <p> inside <main> since there is no indication in the original design such that there is an <header> section in the current page
  • Since the content of each <article> is short and concise, you can consider using <ul> <li> to group each <article> together to give it more semantic.
  • The box-shadow of each card need a bit more work because it looks chunky and bold unlike the design it's soft and blurry of blue shades

Hope this is helpful to you, happy coding 😁

2

Please log in to post a comment

Log in with GitHub
Discord logo

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