Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
My design is is responsive as well as so close to the original design.
What challenges did you encounter, and how did you overcome them?I made this feature section with ease using tailwind.
Community feedback
- @wendyhamelPosted 2 months ago
Hi, nice solution to this challenge!
Your mobile and dektop versions are great.
I do have a few things you might want to consider to improve your solution.
- I noticed you can improve semantics on you solution by wrapping the content in a
<main>
element. - You could also reconsider how you used the
<h>
elements. Semantically it is recommended to use only one<h1>
element on one page. And to imporve accessibility, it is better to use the<h>
elements in order of importance. If you like to read more about this, see MDN docs: heading elements - Take another look at the screen sizes between mobile and desktop. There is a point you switch from the mobile layout to the dektop layout, but the cards don't fit next to eachother yet. You may want to switch on one of the other breakpoints, or just add another layout for the in-between screens.
- Nice to see you use the custom class option from tailwind to determine the width and height of your cards.
w-[350px] h-[260px]
Did you know you could also add it as a class to the Spacing, Width and/or Height?
module.exports = { theme: { extend: { spacing: { '128': '32rem', } } } }
I like to add classes if I end up using my custom classes more then once in my code. Read about it in the Tailwind docs
Happy Coding!
0 - I noticed you can improve semantics on you solution by wrapping the content in a
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