Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive layout for stats preview card

MiloosN5β€’ 190

@MiloosN5

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm intrested, since I've done this challenge with webpack, are @forward and @use valid? It didn't work for me, but @import does. In addition, any suggestion for better SASS organization will be helpful.

Community feedback

Randall3475β€’ 360

@Randall3475

Posted

Hello, the @use and @forward methods - as of now - only work in Dart Sass, which is the version of Sass that includes all newer features.

More on Dart Sass here: Sass: Dart Sass

Marked as helpful

1

MiloosN5β€’ 190

@MiloosN5

Posted

@Randall3475 I understand now, thank you!

1
Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

Hi, MiloosN5! πŸ‘‹

I do not know about Webpack. But, Sass recommends using @use and @forward instead of @import.

I wrote a blog post to help you write better Sass code. It contains five code snippets. They can help you write media queries, convert px to rem, and much more.

5 Handy Sass Code Snippets β€” Vanza Setia

Some suggestions:

  • Empty alternative text: Decorative image should have empty alternative textβ€”alt="". If you write "..." (triple dots), the screen reader will still announce it.
  • Appropriate element: Use a list element for the statistic, <div class="stats__content__numbers">.

If you want to get more feedback, I recommend using HTML and CSS. This way, more people can give you feedback.

I hope this helps. Happy coding! πŸ™‚

Marked as helpful

1

MiloosN5β€’ 190

@MiloosN5

Posted

@vanzasetia Thank you so much, it is really helpful!

0
Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

@MiloosN5 Happy to help!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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