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 using flexbox

Danrare 70

@danrare

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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

@skippysworld

Posted

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

@danrare

Posted

@skippysworld Thanks a lot for the feedback. Noted.

0
atanasov36 580

@AtanasovCode

Posted

@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

@danrare

Posted

@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
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