Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Stats Preview Card Component

sass/scss
P
Atif Iqbal•3,320
@atif-dev
A solution to the Stats preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hi, It was a good time to complete this challenge, especially using SCSS. Any type of feedback, suggestions, or improvements from your end? Thanks!😇

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vanza Setia•27,715
    @vanzasetia
    Posted over 2 years ago

    Hi, Atif!

    For animations and transitions, I recommend taking a no-motion-first approach. This way, only the users who choose to see them will be able to see them. Also, if the users' browsers don't support the prefers-reduced-motion media query, they will not see them and that's fine as long as the animations are not needed to understand the page content.

    Read more — prefers-reduced-motion: Taking a no-motion-first approach to animations » Tatiana Mac

    <picture> should have an <img> as a fallback for browsers that don't support <picture>. It is also used to provide other information like alternative text (if needed) and the aspect ratio of the image (width and height attributes).

    Add rel="noopener" to all links with target="_blank". It helps protect users of legacy browsers from security issues. Read more — Links to cross-origin destinations are unsafe

    Like @grace-snow said earlier, the website only needs one media query to be responsive. One media query to switch from a one-column layout to a two-column layout or vice versa.

    I hope my feedback helps.

    Marked as helpful
  • Grace•32,130
    @grace-snow
    Posted over 2 years ago

    Hi

    Text content is hitting the sides of the card when I view on mobile. Did you forget to add padding to the text half of the card perhaps?

    Next time definitely work mobile first.

    Here's some feedback for improvement, I hope it helps

    • you need to change the html on this. Things like "10k" make no sense at all as headings. You have to interpret the design into appropriate elements for the content, as if there was no styling at all. If this was plain content, those stats would be 3 bullets in a list so thats what you have to use in html.
    • never ever have font size in px use rem. This is extremely important
    • it's more performant to link fonts in the html than import in css if possible
    • instead of using gap and padding on one side of the card, make it easy on yourself - just padding on the text side of the card
    • main is not an interactive element so should definitely not have a hover style. That would make it appear clickable to some users causing nothing but confusion
    • you can set border radius on the whole component then clip the overflowing corners with overflow hidden. Much easier than setting each corner radii individually on child elements
    • it's really unusual to change font sizes this much. They shouldn't need to change at all between screen sizes
    • there is no need for so many media queries in this. It only needs one
    Marked as helpful

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub