Design comparison
Solution retrospective
All feedback is welcomed thank you in advance.
Community feedback
- @AGutierrezRPosted 11 months ago
Hello there @Anlperr 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
General Structure and HTML:
- Consider using
<span>
or<time>
instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".
CSS and Styling:
- Implement CSS custom properties to define and utilize project colors more easily.
- Avoid using
px
forfont-size
, you could read this article to learn why. Letter spacing and line height must not be inpx
, userem
for all the font-related properties. - Instead of fixed widths, employ
max-width
andmin-width
for flexible and responsive design. - Let the content decide the height of the elements. Use padding and margins strategically for this purpose.
Accessibility and Semantic HTML:
- The icons/illustration images are decorative, so their alt text must be empty:
alt=""
. - Profile image could benefit from a more descriptive alt text, like
alt="Headshot of Greg Hooper"
.
I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!
Happy coding!
Marked as helpful2 - Consider using
- @Abed001Posted 11 months ago
Nice work on this challenge! A suggestion I have is to add a hover effect on text to turn the text to yellow . and on the card something like this :cardshadow{ box-shadow: 10px 10px rgba(0,0,0);}
.cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } . keep going!!
2 - @ejmabundaPosted 11 months ago
Hi @Anlperr, for semantics, try to avoid
div
s where possible. Instead use semantic elements likesection
,header
etc. For example, usefigure
for thecard-image
, and usesection
for thecard-content
. This improves SEO of your page. Otherwise, the design looks good 👌 🙌 Hope this helps.2
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