Design comparison
Solution retrospective
I have completed this as my 12th challenge in Frontend Mentors. I am glad to accept any feedback and suggestions regarding the accessibility and the techniques that I have used to develop the webpage.
I used the grid layout and used the grid-rows
and grid-columns
properties to align the card . This has helped me a lot.
.products { display: grid; grid-gap: 2.5rem; grid-template-rows: repeat(4, minmax(max-content, 1fr)); grid-template-columns: repeat(3, 2fr); } .products__card--indigo { grid-row: 2 / span 2; grid-row-start: 2; } .products__card--red { grid-row: 1 / span 2; grid-column: 2; } .products__card--yellow { grid-row: 3 / span 2; grid-column: 2; } .products__card--blue { grid-row: 2 / span 2; }
If anybody has an easier approach then I am happy to hear that and please go through the code and if you have to correct any mistakes I am happy to recive the comments.
Advance thanks for the comments π«‘.
Community feedback
- @rayaattaPosted 11 months ago
hi π Madhavan, congratulations on completing this challenge π I only have 2simple suggestions to improve your code.
1 It's nice to see that you have tried to make your html as semantic as possible but you could make it more semantic by changing These divs
<div class="products__card products__card--indigo"> <div class="products__card products__card--red"> <div class="products__card products__card--blue"> <div class="products__card products__card--blue">
To
articles
with the same respective classes You can find out more about the article tag in this article.π2 In your css I noticed you used
html { font-size: 62.5%; }
Despite some sources recommending this hack, It is not a very good idea to use it because
a) Overriding defaults causes accessibility problems for people who changed their font sizes.
b) Many engineering teams would look down on job applicants who use this in their code because of the issues it can cause. Check out this FED article About the grid, its the best solution but just to get more familiar, you can check out other people`s solutions. I'm sure you will learn a lot. You can also check out my submission
I hope this helps Did I mention your solution is really epicπ€©
0
Please log in to post a comment
Log in with GitHubJoin 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