Design comparison
Solution retrospective
Well, this is the first challenge I have done to practice CSS grid, any advice on how to improve and honest feedback will be welcome. Happy coding.
Community feedback
- @JorahhhPosted over 2 years ago
I think you forgot to put the border radius at the whole grid.
Just put in the main container:
‘Border-radius: 10px;’ (or less)
And also in the mobile version in the first and last square.
This time you have to do in the first square:
Border-top-right-radius: 10px Birder-top-left-radius: 10px
…and in the last one:
Border-bottom-right-radius:10px; Border-bottom-left-radius: 10px;
For the rest, it seems fine. Nice job! 😀
Marked as helpful0@DevibtissamPosted over 2 years ago@Jorahhh oh I completely forgot about border-radius, thank you so much for your feedback
1 - @grace-snowPosted over 2 years ago
Hi
It's really important to Indent your code consistently. Your code editor should even be able to do this for you.
It's also important to be more aware of html semantic structure. You cannot skip heading levels like this, page content should be contained by landmark elements (a main element, not just sections which are fairly meaningless), and that button should be an anchor tag because it would trigger navigation.
The only other styling issue I notice that's not already mentioned is the content touches the sides of my phone screen. There should always be some margin around the card or padding on an outer wrapper to prevent this
I hope this helps you
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