Responsive Stats preview component using HTML & CSS

Solution retrospective
Any help is appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdrianoEscarabote
Hey halovii, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:
To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:
img { mix-blend mode: multiply; opacity: 80%; }
Everything else looks great.
Hope this helps! 👍
Marked as helpful - P@huyphan2210
Hi, @halovii
I checked out your solution and wanted to share some suggestions:
Reduce Overuse of Semantic Tags
Your HTML currently includes two
header
s, twomain
s, and onefooter
. Ideally, you should use at most:- One
header
: It represents the introductory or navigational content. - One
main
: It represents the central content of the page. - One
footer
: It typically contains the closing information.
Overusing these tags can confuse the document's structure and accessibility. Here's a simplified example based on your code:
Instead of this:
<body> <div class="wrapper"> <div class="main-container"> <!-- content --> </div> </div> <div class="attribution"> <!-- your attribution --> </div> </body>
You can do this:
<body> <main> <!-- content --> </main> <footer class="attribution"> <!-- your attribution --> </footer> </body>
Why this is better:
- The
body
itself acts as the best wrapper, so you don’t need an additionaldiv.wrapper
. - The
.main-container
can be replaced with amain
tag since it represents the primary content. - Replace nested
header
,main
, orfooter
elements inside your content with other semantic tags to avoid redundancy.
Semantic HTML Without Confusion
While it’s great to make HTML semantic, overusing or misplacing semantic tags can make the structure confusing. Avoid excessive use of generic
div
s, but also ensure semantic elements fit their purpose.Proper Use of Headings (
h1
,h2
, etc.)You did well with the
h1
, as it serves as the main heading of the page. However, I noticed some numbers like "Companies," "Templates," and "Queries" are marked as headings. These don’t appear to be actual headings, as they’re more like statistics or labels. Remember:h
stands for "heading": It indicates a new section or subsection.- For numbers or non-heading content, consider using other tags like
span
orp
to maintain proper hierarchy and clarity.
Hope this helps!
Marked as helpful - One
Join 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