Design comparison
Solution retrospective
I would use grid so that i can understand it.
What challenges did you encounter, and how did you overcome them?I couldnt center the profile card, and the buttons kept being too large on different mobile screens
Community feedback
- @margaux-worksPosted 3 months ago
Hi Maryam,
Congratulations on submitting this solution! It looks fantastic and very close to the design. Well done! 😊
You have a very clear HTML structure, and I appreciate your use of semantic HTML elements. You also ensured your design adapts to different screens by using media queries. Great job on these aspects!
Here are a few suggestions for further optimization:
-
Use Relative CSS Units: Instead of using pixels, try using relative units like rem and em to make your layout more adaptable to different screen sizes. This approach improves the responsiveness of your design.
-
Semantic Links: Instead of using buttons, consider placing your links within an unordered list to enhance the semantic structure of your code. Additionally, make sure to add actual hyperlinks to these items for better functionality.
-
Flexbox Gap Property: You can use the Flexbox gap property to set the spacing between your elements more efficiently. This property simplifies the spacing management without the need for margins.
-
Hover Animation: To make the transition of background color and text color smoother, you can add a hover animation using CSS transitions. The ease timing function can help achieve a smoother effect.
I hope you find my feedback helpful!
Keep up the great work and happy coding! 🌈
Cheers, Margaux
Marked as helpful1 -
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