Skip to content
Submitted over 2 years ago

Responsive layout using flexbox

Danrare•70
@danrare
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 had it difficult getting my js codes to work the way it should. But against all odds I prevailed. Maybe for now I will be focusing on writing clean js codes.

Community feedback

  • Skippy•110
    @skippysworldPosted over 2 years ago

    It looks well overall. I can spot few misalignments in CSS but the logic behind rating seems to work well.

    By inspecting your code quickly..:

    1. You can improve your HTML accessibility using landmarks - such as <main> for main content of the webpage.

    2. IMG tags should include width and height attributes that matches source image ratio. When using decorative images such as icons that are not necessary for the rest of the content, you can embed them using CSS.

    3. It's better to put script src tag at the end of your HTML file (before </body> tag). That way the HTML will get loaded properly first before loading JS interaction to it.

    4. var statement is considered obsolete and should not be used for new designs anymore. let and const are it's successor, lookup MDN site for more information about them.

    You can look up my solution I made yesterday for this challenge, maybe it will inspire you :)

    Enjoy and keep it up!

    1
    Danrare•70
    @danrarePosted over 2 years ago

    @skippysworld Thanks a lot for the feedback. Noted.

    0
    atanasov36•640
    @AtanasovCodePosted over 2 years ago

    @skippysworld

    Your answer is great but one thing I would like to mention is for point number 3.

    You can put your script:src tag inside of the <head> by adding 'defer'. For example: script src="script.js" defer

    This tells the browser to load the HTML first before loading the JS.

    2
    Danrare•70
    @danrarePosted over 2 years ago

    @AtanasovCode oh thanks atana. Another code up my sleeves. Anyways I had used DOMcontentLoaded in the js

    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