Design comparison
Solution retrospective
Hello everyone 🤓💻, I'm Yaniv and this is my solution for the challenge #5
**built with : **
- Grid.
- Flex-box.
It was difficult for me to give the hover effect to the image but finally I did it by reading a lot of info and seeing similar effects in other websites and I did it with few lines of code, I will appreciate any recommendation.
Thanks!💖
Community feedback
- @Mr-jawPosted over 1 year ago
Hello there
Congratulations on completing the challenge*
HTML 📄
-
Always provide the
<img>
tag with meaningful and understandable descriptive text about what the image is about in thealt
attribute. to improve accessibility. -
avoid using
<p>
tags for short text. you can rather use<em>
,<strong>
or<small>
-
Also replace
<h2>
with<h1>
in<h2 class="card__title"><a href="#">Equilibrium #3429</a></h2>
, Since it is the main heading of the component and a page should contain a level-one heading.
CSS 🎨
- Use relative units such as
em
orrem
for margin, padding, width, and height. most preferablyrem
for font size. avoid usingpx
since it is an absolute unit.
Other than that it looks good
I hope this was useful 😊
HAPPY CODING
Marked as helpful0 -
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