Skip to content
Submitted almost 2 years ago

Interactive rating component

Edwin_Owino•60
@Edwin574
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found difficulties in the responsiveness of the component.

Community feedback

  • Vas•110
    @VasJMPosted almost 2 years ago

    Hiya, Edwin!

    You've done a good job here, but there is definitely room for improvement!

    Before I get into it, I wanted you to know that I was unable to view your code on GitHub. Maybe check to see you've linked it correctly!

    So just going off of your reports, here are some suggestions:

    • Having a main element is very important! Whatever is within your body tag needs to wrapped with the main tag. i.e.:
    <body>
    <main>
        ...
    </main>
</body>

    and not

    <body>
    <div class="main">
        ...
    </div>
</body>

    • Again, every HTML doc needs to have at most one h1 element. In this case, "How did we do?" will be your h1! You cannot use h2-h6 without having an h1 present in your doc first. I see you have used the h2 heading element, which is wrong! You can later adjust the font-size using CSS.

    • Your img element should not have the srcset attribute if it is going to remain empty. Remove it and it should be fine! You only have it in there if there are alternative images.

    Unfortunately I cannot help you with the responsiveness as I do not have access to your CSS code. Though I see you have used vh (60vh) for the height and a percentage value (40%) for the width. My advice would be to use em instead of a percentage value, and you don't have to specify a height as long as you have specified a width! But make sure you set it as max-width and not width.

    Also for font sizes in projects, I suggest you use rem or em instead of px. For example, this project called for a font-size of 15px, so in rem this would be 0.9375rem. You get this value by doing 15px/16px where 16px (or 1rem) is the default font-size on most devices unless you have changed this in your settings. In that case, it would be 15px divided by whatever is your browser's default font-size! So the rule-of-thumb here is to use rem or em over px to make your website more responsive!

    I hope this helps you! Hope you have a good day, Edwin, and good luck 😊

    0
    Edwin_Owino•60
    @Edwin574Posted almost 2 years ago

    @VasJM Thank you very much on your feedback...I'll definitely work on it.And I'm sorry i forget to update the repository to public because it's currently private.I am working on it😊.

    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