Learn Accessibility by Building a Quiz - Step 16

HTML-CSS
1

/* Hello everybody, I have an issue here which is that I don’t notice the thing that makes my code doesn’t pass, I don’t want to be stuck here, any help? */

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h2>HTML/CSS Quiz</h2>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>

<!-- User Editable Region -->

      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">

        <section role="region" aria-labelledby="student-info">
          <h2  id="student-info">Information</h2>
          </section>

        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML Qestions</h2>
          </section>

        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS Qestions</h2>
        </section>

      </form>

<!-- User Editable Region -->

    </main>
  </body>
</html>


/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 16

Link to the challenge:

2

What errors are you getting when you click the check code button? Your code passes the challenge for me. If you have browser extensions active those can sometimes cause a challenge to fail. For example ad blocker, and dark mode. If you turn off your extensions and the challenge still doesnt pass then can try submitting the challenge on a different browser

3

this is the error that get when i test the code :

Test

Sorry, your code does not pass. Try again.

Hint

You should give the first h2 element an id attribute of student-info.

4

See if the above options of trying a different browser and turning off extensions work. If not I can take another look at the code, but those should hopefully fix your issue because the code worked for me

5

thank you for being so helpful, I’m stuck until now. so ill move to another topic.

6

I am not exactly sure why it is not passing for you, but what you can do is copy your current section code, and reset the lesson. Then just replace each section with the code you copied one by one. I just did that and the challenged passed. Or you can just reset the lesson and type it over again to make sure nothing gets messed up but thats your call.

1 Like
7

thank you very much :smiling_face_with_three_hearts: , it works

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.