Skip to content
Submitted over 1 year ago

Responsive result-summary-component using vanilla CSS (CSS variables)

Amin Alizadeh•200
@M-AminAlizadeh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there

In this project, I used simple HTML, CSS

Try to do these things :

  • Use the BEM method for naming my classes in HTML
  • Use CSS variables
  • Use relative units (rem, %) instead of absolute units
  • Use media query to make the component responsive on all devices
  • Use lighthouse, webhint, and stylelint as linters to the project
  • Mobile first

This project is so easy but it's also good for beginners to check that out and If you see any issues or have any suggestions to make the code base better don't hesitate and write it down in the comment or click on this Issues Link and make an issue.

I'm looking for your comment

Happy coding

Cheers🎉

Community feedback

  • Cleber Pereira da Silva•50
    @cleberpereiradasilvaPosted over 1 year ago

    Hi Amin, great job!

    I just recommend testing flipping the mobile screen, I believe that needs just some adjustments.

    Thanks for sharing. My best.

    Cleber Silva

    1
    Amin Alizadeh•200
    @M-AminAlizadehPosted over 1 year ago

    Hi @cleberpereiradasilva

    Thank you for the suggestion (responsiveness issue on landscape mode)

    I fixed it

    If you see any other issue or improvement point comment it here

    Cheers🎉

    0

Please log in to post a comment

Log in with GitHub

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