Stats preview card component (react + sass)
Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
Hey @MrBlackvanta, some suggestions to improve you code:
-
You're gonna back and work on the text layout; You're almost there.
-
When using images that are different size for different breakpoints, its’ far more effective to use the <picture> element. By using this element not only are able to use different size images, you can also save on bandwidth, meaning your content loads faster.
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
-
The Alt Tag description for the image needs to be improved upon.You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
The Attribution needs to be wrapped in a Footer Element.; It's the end of you content.
-
Your CSS Reset is extremely bare. You want to add more to it.
Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
Happy Coding!
Marked as helpful1@MrBlackvantaPosted about 2 years agoHey @vcarames, Thanks for this amazing feedback, much appreciated.
-
As for the text layout as you can see am not pro user and I don't have access to the design files only an image and my observation.
-
I know about the picture element but I totally forgot to add it.
-
A footer actually makes more sense I will start implementing that from now on.
-
CSS reset is bare intentionality because it's such a small project and I didn't want to make a deep rest.
0@VCaramesPosted about 2 years ago@MrBlackvanta
- The Alt Tag aren't something provided by being a pro user. Its how you make you content accessible to all users.
https://www.w3.org/WAI/fundamentals/accessibility-intro/
https://webaccess.berkeley.edu/resources/tips/web-accessibility
- CSS reset should include things like:
This will make all image responsive:
img, picture, video, canvas, svg { display: block; max-width: 100%; }
This will help with text overflow:
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
Just because the content is "small" doesn't mean it won't benefit from it.
Marked as helpful1 -
- @correlucasPosted about 2 years ago
👾Hello Abdelrhman Ahmed, congratulations on your first solution!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
To get closer to
overlay effect
on the photo as the Figma Design its better you usemix-blend-mode
. All you need is thediv
under theimage
with thisbackground-color: hsl(277, 64%, 61%);
and applymix-blend-mode: multiply
andopacity: 80%
on theimg
orpicture
selector to activate the overlay blending the image with the color of the div. See the code bellow:img { mix-blend-mode: multiply; opacity: 80%; }
✌️ I hope this helps you and happy coding!
Marked as helpful1@MrBlackvantaPosted about 2 years agoHey @correlucas, thanks for your feedback much appreciated ❤️❤️
Actually I've never heard of this property before but I've just searched it and WOW! It's an amazing solution for overly tasks, and I am going to use it from now one.
Have a good one.
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