CHAKIRI• 70
@mouad-chakiri
Submitted
Luis Olivero
@Luis-Olivero
All comments
- Luis Olivero• 170
@Luis-Olivero
Posted
Hello Chakiri, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues and only one issue with your HTML.
To start, I would suggest adding this to your <html> tag.
<html lang="en">Also I would add a < main> tag around your <div>
<body> <main> <div class="card"> </div> </main> </body>Another thing to keep in mind is that it is best practice to always have at least one <h1> tag on each page. I would change your <h2> line to an <h1>.
<h1 class="header">Improve your front-end skills by building projects</h1>Hope this helps and keep at it!
Marked as helpful
0 - Akshat Sharma• 30
@AkshatSharma078
Submitted
Luis Olivero• 170@Luis-Olivero
Posted
Hello Akshat Sharma, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues that I would like to help you with.
I would recommend adding a <main> tag around your div.div for better accessibility. Also possibly changing your div.div to div.card since you would be using a <main> tag now.
<body> <main> <div class="card"> </div> </main> </body>Another accessibility issue you have is that you need at least one <h1> tag on your page. I would suggest you replace your <h4> tags with <h1> tags instead.
<h1>Improve your front-end skills by building projects</h1>To help with your <footer>, I would recommend adding this to your code.
footer { width: 100%; margin-top: 2rem; font-size: 1rem; text-align: center; color: white; }Hope this helps and keep at it!
Marked as helpful
0 - Kalani Prabodha• 20
@kalani9uggalle
Submitted
Luis Olivero• 170@Luis-Olivero
Posted
Hello Kalani Prabodha, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues and only one issue with your HTML.
For the HTML issue, I would replace your <strike> tag with a <span> tag instead. You can still get the strike through effect with your CSS.
.prev{ margin-right: 12px; text-decoration: line-through; }I would also recommend adding a <main> tag around your div.card for better accessibility.
<body> <main> <div class="card"> </div> </main> </body>Another accessibility issue you have is that you need at least one <h1> tag on your page. You can either replace your <h2> with an <h1> and your <h3> with an <h2>.
<h2 class="title-type">PERFUME</h2> <h1 class="title-preview"> Gabrielle Essence Eau De Parfum</h1>Or you can you add an <h1> that will be hidden by adding a class of sr-only.
<h1 class="sr-only"></h1>Hope this helps and keep at it!
Marked as helpful
1 - Mostafa Hosseini• 10
@smostafa80
Submitted
Luis Olivero• 170@Luis-Olivero
Posted
Hey Mostafa Hosseini,
I would put background-color: hsl(30, 38%, 92%); on the body instead of .super-container so the whole page gets the Cream color.
Marked as helpful
0
