I used HTML, CSS , Flexbox and Media queries for completing this task.
Design comparison
Solution retrospective
Feedback on my code need suggestion for improvement .
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Greeting Arun Kumar Singh, Congratulation on completing another frontend mentor project . Your solution looks nice.
-
Use an unordered list with 3 items for the stats.
-
The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. (You can set those to be display block via a class).
-
You can apply
border radius
,overflow hidden
to the component. So you don't have to set it to individual corners. -
For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. (in this challenge the image is decorative). -
You should use
em
andrem
units .Bothem
andrem
are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. -
Never use pixel for font-size.
-
no need for any heights on this at all. All you need is a
min height
on the half of the card containing the image. It's rarely ever a good practice to set heights on elements Let the content dictate how tall something needs to be.
I recommend not to use
<h1>
on the same page more than once.I really hope this feedback helps
Marked as helpful1@arunsingh009Posted almost 3 years ago@PhoenixDev22 Thanks for giving your time and writing such great feedback I will ensure all this points in my next challenge.
0 -
- @darryncodesPosted almost 3 years ago
Hi Arun,
Awesome solution, well done!
You could add
mix-blend-mode: multiply;
to yourimg
and removeopacity
from theimg
and the parentdiv
to closer match the design to the challenge!All the best!
Marked as helpful1@arunsingh009Posted almost 3 years ago@darryncodes Thanks for the tip actually this is new one for me.
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