Interactive rating component using HTML, CSS, JavaScript

Hey @DrissssirD!

Your solution is really impressive!

I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

📌 First: Think about using <main> to wrap your main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

📌 Second: Consider using <h1> for your main title instead of <h2>.

It's more than just text size — it's about structuring your content effectively:

• The <h1> to <h6> tags are used to define HTML headings.
• <h1> is for the most important heading.
• <h6> is for the least important heading.
• Stick to just one <h1> per page – it should be the main title for the whole page.
• And don't skip heading levels – start with <h1>, then use <h2>, and so on.

These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!

Hello Driss,

Congratulations on completing your challenge! It turned out really well, congratulations.

I'd like to start by saying that your JS is impeccable; it's very concise. Well done.

I'd also like to give you some tips regarding CSS and HTML. Starting with CSS, when using font sizes, I strongly recommend using the rem unit because it adapts to the user's font size settings, thus increasing the accessibility of your page.

Regarding HTML, the structure is good, but it's lacking in semantics. You could make it more semantic by adding some tags like <main>, <article>, and <section>.

For example, you could wrap your <div class="rating-card "> and <div class="thank-card hidden"> with a <main> tag. And change the first <div> to <article> and the second <div> to <section>.

Once again, congratulations. If you have any questions, please ask below, and I'll try to help in the best way possible.