@AgataLiberska
Posted
Hi Zauri! Visually this solution is really great, it's very nicely responsive - but html needs some revision. You're missing a <main> landmark here, and if you use a <section> tag, it will need a heading (maybe use the logo as heading?). also for the progress bar, <meter> tag would be perfect (but I think it may be a bit tricky to style)
Hope this helps :)
Marked as helpful
@zauri-khutsishvili
Posted
@AgataLiberska I decided to not use <main> since this is a component, or should I still have used it? I tried <progress> and <meter> tags but I was only able to style them for Chrome. It seems like people recommend using divs and spans instead.
@AgataLiberska
Posted
@zauri-khutsishvili Yeah always include <main> as a container for the main content (the component is the main content here) - this is for accessibility - for example for screen reader users :) if you have a look at the report above this is highlighted as an issue in your Accessibility report.
And for the progress bar - totally understand why you went for divs then, your styling is on point. In real world you'd need to consider accessibility of this but I'm not quite sure what the best solution would be here so I don't want to give any misleading advice :)
