Product preview card component
Solution retrospective
All feedback welcome, Thank you
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kxnzx
Hello @idirieh,
Congratulations finishing your second challenge, good job!
You have some accessibility issues:
It is good to use div’s for the purpose of styling and arranging components on the page. Div’s are like empty containers, but they do not have any semantic meaning.
- Instead of <div class="card"></div> use <main class="card"></main> and instead of <div class="attribution"></div> use <footer class="attribution"></footer>.
Main and footer are tags that are considered an accessibility landmark and ensures that a screen reader and people with visual impairment have the ability to jump to sections of the page. More examples of landmarks are: header, nav, aside, section.
Your page must contain at least one H1 element:
- Wrap “Gabrielle Essence Eau De Parfum” in an <h1></h1> tag.
An H1 is very important on a page for search engines, screen readers, SEO and people with visual impairment to know what your page is about. You always at least need ONE h1 in your page. Then (when needed) you follow it up with subheadings such as an h2, h3, h4 etc. It’s the hierarchy that matters. Just remember that the most important title on the page is an h1.
-
You can wrap “PERFUME” in an <h2></h2> tag. Even though it starts earlier on the page, this does not matter. It’s the hierarchy that matters.
-
Instead of placing your styles inside the <head> it is good practice to create a css file, like for example styles.css and use an external link inside the <head>. Example: <link rel="stylesheet" href="styles.css">
Marked as helpful
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