Design comparison
SolutionDesign
Community feedback
- @MikDra1Posted 2 months ago
- The meta charset tag should be the first child in the <head> for optimal performance and compatibility.
- The <link> to the stylesheet (./src/output.css) and favicon are correct, but ensure the paths are accurate relative to the HTML file's location.
- The alt attribute for the <img> tag in the <section> is empty. Provide descriptive text for better accessibility.
- The <h1> tag is visually hidden (sr-only), which is fine, but ensure it's not missing or redundant if the title is not visible on the page.
- Wrapping an <h2> inside an <a> tag can be semantically incorrect if the link is not meant to be part of the heading. Consider separating them or ensuring correct semantic use.
- The text-gray-dark class on the <body> is not defined in the provided CSS. Verify that it is correctly defined in your stylesheet.
- The footer uses opacity-0 and translate-y-2 by default, which may be hidden or not visible on load. Ensure this behavior aligns with your design goals and enhances user experience.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0@wendyhamelPosted 2 months ago@MikDra1
I appreciate that you try to give feedback. Unfortunately I do not really get your points.
- The meta charset, it's just the standard we get with these challenges. It is the first child.
- I do not see what it wrong here, the path to the files is accurate, otherwise they would not show.
- The alt attribute is left empty on purpose. The image is used as an illustration and does not offer any information users with screen readers would miss. The screen readers will skip over the empty attrubute, so the users are not bothered with meeningless descriptions of illustrations that do not contribute to the information they want to gather. See MDN docs: alt
- The H1 is hidden here to have it on page for screenreaders, but it does not have value in the page. I added it to prevent the error in the accessibility report. On. real page, you would have the h1 set to the page name, probably. Here I didn't want the h1 on the card, because on a real pege, you probably have more cards, and you should have only one h1 per page. To be semantically correct see MDN docs: HTML section Heading elements
- The wrapping of the h2 is perfectly valid in HTML5. Imagine you need to make the whole card a link to the page with the full article. In that case there is a lot more code wrapped inside the a tag. Including the h2. In thes case the whole h2 is meant to be the link, and not the whole card so this was the way to go for me.
- I do not see the issue of text-gray-dark class not being defined in de css. It is in the provided css in the browser, when I inspect it.
- The footer classes are intentional. I do not want to disrupt the designs with the challenge footer.
Thank you for taking the time to look at the challenge and code so thoroughly though!
0
Please log in to post a comment
Log in with GitHub
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