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

using html/css and javascript to complete.

@arudu

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


The modal was a new thing for me but definetley going to be playing with that more it was a lotta fun.

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ Remove margin-top from .card its not a good way of centering card.

  • To properly center the container.

  • USING FLEXBOX

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
  • USING GRID
body{
min-height: 100vh;
display: grid;
place-items: center;
}

➨ Use Semantics for the proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up `.attribution` inside `footer`
</body>

➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

I hope you find this helpful.

Happy coding😄

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