Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
- Tried my best to make my solution pixel perfect and responsive
- BEM & SCSS to make the code clean and well structured
- Divided SCSS code into different files to make working with styles and debugging easier
- Added h1 heading for accessibility reason and hid it from UI with .sr-only class
- Used aria-label attribute for article elements to enhance accessibility
- Used grid-template areas to position cards inside the grid
Would love to receive feedback on how clean and well structured my code is. Other than this, I'm always open to any other feedbacks!
Community feedback
- @JamesLavironPosted 2 months ago
- Does the solution include semantic HTML?
Yes it does. Maybe you could have use section and header tags but overall it's great.
- Is it accessible, and what improvements could be made?
It is accessible. I loved the fact that you used aria labels but I assume it's not enough meaningful.
- Does the layout look good on a range of screen sizes?
Yes it does. Good job!
- Is the code well-structured, readable, and reusable?
Yes it is, loved the way you used grid-are instead of grid-template properties.
- Does the solution differ considerably from the design?
It's very close to the design. Nice :)
0
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