Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
im proud of these buttons they look so good
What challenges did you encounter, and how did you overcome them?the images wouldnt work with github pages i removed a slash and it worked
What specific areas of your project would you like help with?nothing much but if u have any ideas on how to make it more semantic im willing to take feedback
Community feedback
- @BasselfathyPosted 1 day ago
Good work! you have tried your best to make it looks similar to the design🖼️.
I have reviewed the code and I want to recommend some improvements that can be done.
For HTML
- You can wrap the card inside a
<main>
instead of<div>
to make it more semantic. - Text shouldn't be written within
div
, use text elements like<h1/2/3/4>
or<p>
. - Using buttons for social links is not recommended as they need Javascript to be triggered. instead, use
<a>
tags directly.
For CSS
- The
width: 19%;
on the container squish it whenever you make screen size smaller.instead , give it a reasonablemax-width
about22rem
andwidth:100%
for responsiveness. - You don't need to re-write the same styles for each link, just write the styles once for the
<button>
or<a>
and they will apply on each element. - <br> is not necessary.
Marked as helpful0@VADER900000Posted 1 day ago@Basselfathy Thank you for your lovely feedback I will def keep them in mind in my next projects
0 - You can wrap the card inside 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