Start-preview card component using SASS
Design comparison
Solution retrospective
Hi developers!!! I have just completed this challenge and I am very eager to hear about how can I improve my codes!
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi, Shaxboz! π
For the statistic, I recommend using a list element (
<ul>
) instead of<div>
and<p>
elements.For the image overlay, if you are making the image as the background image, you should use
background-blend-mode
instead ofmix-blend-mode
. Also remove the following styling:filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
andopacity: 0.75;
. Those are not needed to make the overlay.I hope my feedback helps. Have a great coding day! π
Marked as helpful0 - @NikitossikPosted almost 2 years ago
Hey, nice job, but there is enough room for improvements:
- pick the right classnames for the elements
- avoid using fixed widths or heights, because it can cause problems like horizontal scroll, overflows on diffenrent screen sizes etc. Use max/min-width, relative units, it's more reliable
- actually it's not bad, that you used SCSS, but preprocessors are made to reduce the amount of work. If speaking of SCSS, it has nesting, mixins, math, templates and other cool things. I'm trying to say, that you didn't benefit from it, so it wasn't important to use SCSS, because your code is plain CSS
good luck, keep learning!
Marked as helpful0 - @frank-itachiPosted almost 2 years ago
Hello there π. You did a good job!
I have some suggestions about your code that might interest you.
HTML π:
-
Wrap the page's whole main content in the
<main>
tag. -
The heading order is important in the html structure so try to always start your headings with an
<h1>
tag and then you can decrease by one if you need to use more heading in your html code. -
Since the mobile design has a different image, you can use the
<picture>
tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here
I hope you find it useful! ππ Above all, the solution you submitted is greatπ!
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