Design comparison
Solution retrospective
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
- @haquanqPosted 5 months ago
👋 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-shadowof 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
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