Matt Studdert

Hey Khaled, nice work. The main thing I'd recommend working on with this project would be to make it accessible. At the moment, you're using div elements instead of buttons for the keys. div elements aren't interactive and so can't be accessed by people not using a mouse/trackpad to click on the keys. Always be sure to use interactive elements if you expect the user to interact with the page.

Also, you're not using any of the technologies you've added as tags. I'd recommend removing the tags so that they match up with what you've used to build the project.

Keep it up!

Hey Vivian! Congrats on submitting your first solution! I've just taken a look at your code. Here are a few suggestions:

• I'd recommend reviewing HTML semantics for structural elements. You've used a section element for each column, whereas sections are typically used for larger groupings of themed content. For example, I'd expect a single section element to be nested inside the main element, which wraps three div elements that would make up the columns. Here's the MDN article on section elements for more info.
• You've currently got multiple h1 elements. Although this is valid HTML, it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. Instead, I'd recommend sticking to a single h1. This project is tricky, as all three headings are the same level. Personally, I'd have a visually hidden h1 heading saying some like "Frontend Mentor 3-column preview card component challenge" and then the visible headings would all be h2 headings. You don't need alt text for the icons, as you're just repeating what the headings say. In this instance, I'd leave them blank, e.g. alt="", as this will ensure screen readers skip them. They add no context to the content, so it's OK for screen readers to ignore these.

I hope these tips help. Keep up the great work! 👍

Hey Niladri, it seems the live version of your project hasn't been updated since you made edits to your code. This is why the reporter is still showing duplicate ID errors. If you use the inspector to look at the HTML in your project, you'll see the duplicated anchor tags with the "cancel" ID.

I'd recommend clicking on the "Learn More" links in the report to try resolving the other issues. Most of them will be cleared up by adding a main element and a h1 for the main heading, which in this instance would be the "Order Summary" heading.

Also, I'd recommend avoiding IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.

I hope this helps! Keep up the good work! 👍

Hey Byron! Fantastic work on this challenge. The filtering is definitely the most challenging part of this project, and you've done an excellent job. Your solution matches the design brilliantly as well, and I can't see any accessibility issues. Keep it up! 👍

Hey Benjamin! Excellent work on this project. I'm glad to hear you enjoyed it! Your solution looks fantastic, and it's good to see you made the map interactive. I'd recommend reviewing the accessibility and HTML reports and resolving those issues. But you've done a brilliant job overall. Keep up the great work! 👍