Design comparison
Solution retrospective
any feedback ?
Community feedback
- @MelvinAguilarPosted 11 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
Wrap the page's whole main content in the
<main>
tag. -
You should use the
<a>
tag instead of the<button>
tag because theLearn More
button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here ๐.
- You shouldn't have a fixed height like h-96; if the content grows, its elements will overflow. This is what happens when resizing the page. Also, avoid using percentage widths; instead, use max-width (max-w-[900px]) to allow the element to resize, providing better control over its width.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0 -
- @danielmrz-devPosted 11 months ago
Hello @cocotiwak!
Your project looks great!
Since you asked for feedback, I have a few tips for you to improve your project:
-
The button Learn More borders are a bit more curvy, like, rounded. Since you used Tailwind on this project, you may wanna add
rounded-full
to them. -
Still about borders, your main container only has curvy edges on mobile version, so you can add those same properties to its desktop version too.
-
Lastly, if you change the body
background-color
to#F2F2F2
, it'll look even closer to the original design.
Other than those little details, you did an excelent job!
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