Skip to content
OverviewSolutions
16
Comments
4
Luis Olivero
@Luis-Olivero

All comments

  • Luis Olivero•170
    @Luis-OliveroPosted about 2 years ago

    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
  • Luis Olivero•170
    @Luis-OliveroPosted about 2 years ago

    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
  • Luis Olivero•170
    @Luis-OliveroPosted about 2 years ago

    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
  • Luis Olivero•170
    @Luis-OliveroPosted about 2 years ago

    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