Learn Accessibility by Building a Quiz - Step 19

HTML-CSS
1

Tell us what’s happening:

for some reason my code is not working I have been trying to do it for some time so please help me

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

<!-- 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">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a href="#student-info">INFO</a></li>
          <li><a href="#html-questions">HTML</a></li>
          <li><a href="#css-questions">CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">

<!-- User Editable Region -->

        <section role="region" aria-labelledby="student-info">
          <h2 id="#student-info">student info</h2>
          <div class="info"><label></label><input>
          <div class="info"><label></label><input>
          <div class="info"><label></label><input>
          </div>
        </section>

<!-- User Editable Region -->

        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

<!-- User Editable Region -->



/* 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(10rem, 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;
}

h1,
h2 {
  font-family: Verdana, Tahoma;
}

h2 {
  border-bottom: 4px solid #dfdfe2;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 19

2

Your first two divs are missing the closing div tags

3

still does not work for some reason

4

Maybe you put them in the wrong place? Copy the code in your response if you need us to take a look.

5

here

Accessibility Quiz

HTML/CSS Quiz

    <section role="region" aria-labelledby="student-info">
      <h2 id="#student-info">student info</h2>
      <div class="info"><label></label><input></div>
      <div class="info"><label></label><input></div>
      <div class="info"><label></label><input></div>
    </section>

    <section role="region" aria-labelledby="html-questions">
      <h2 id="html-questions">HTML</h2>
    </section>
    <section role="region" aria-labelledby="css-questions">
      <h2 id="css-questions">CSS</h2>
    </section>
  </form>
</main>
6
  • this passes for me!!

if its not for you then perhaps try restart and complete this again or maybe disable any dark them extension from your browser and try again or try a different browser

happy coding :slight_smile:

2 Likes
7

ty you so much I reset it and it work I was stuck on this for ever

2 Likes
8

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