CSS grid, CSS flex, responsive, JS, no-librairies

Hello.

Nice try on this challenge.

In terms of functionality, it's working just as I expected, so good job on that.

However, your solution has many errors both in the accessibility report and the HTML validation report.

I'll address some in this comment, but I'd recommend going through them and trying to fix as many as you can before looking at the JavaScript.

One issue is you have empty <h2> elements. This is bad for accessibility because screen readers read these out loud to people with poor vision telling them what the section is about.

If you're not going to use them, then it's best to remove them completely. If you do plan on using them with JavaScript, you could add the whole element to the DOM instead of having an empty one whose textContent or innerHTML you'll change later.

Secondly, if you want to use <aside>, it should not be inside an <article> because these are both landmarks. Either use an <aside> with <div> inside them, or an <article> with <div> inside them, but not both nested inside each other.

Finally, if you want to use a <label>, what goes inside it should often be just plain text. You're getting a lot of errors because you're putting an <h3>, <p>, and <div> inside a <label>.

I'd recommend just using a <div> instead of a <label> if you plan on including many things inside it.

I'll let you work on these first.

Try it, and let me know how it goes.

I hope this helps.