Learn Accessibility by Building a Quiz - Step 23

HTML-CSS
1

Tell us what’s happening:

hi im new here, pls help
You should nest two div elements within the second section element.
You should give the first new div element a class of question-block.
You should give the second new div element a class of question-block.
You should nest one h3 element within each div.question-block element.
You should give the first h3 element text of 1.
You should give the second h3 element text of 2.
You should nest one fieldset element within each div.question-block element.
and something like that

Your code so far

<!-- 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" alt="freeCodeCamp" 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">
      <section role="region" aria-labelledby="student-info">
        <h2 id="student-info">Student Info</h2>
        <div class="info">
          <label for="student-name">Name:</label>
          <input type="text" name="student-name" id="student-name" />
        </div>
        <div class="info">
          <label for="student-email">Email:</label>
          <input type="email" name="student-email" id="student-email" />
        </div>
        <div class="info">
          <label for="birth-date">Date of Birth:</label>
          <input type="date" name="birth-date" id="birth-date" />
        </div>
      </section>

<!-- User Editable Region -->

      <section role="region" aria-labelledby="html-questions">
        <h2 id="html-questions">HTML</h2>
<section>
          <div class="question-block"></div>
            <h3>1</h3>
          <fieldset class="question"></fieldset>
          </div>
          <div class="question-block"></div>
          <h3>2</h3>
          <fieldset class="question"></fieldset>
          </div>
</section>


<!-- User Editable Region -->

      <section role="region" aria-labelledby="css-questions">
        <h2 id="css-questions">CSS</h2>
      </section>
    </form>
  </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(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;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Your browser information:

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

Challenge Information:

Learn Accessibility by Building a Quiz - Step 23

2

Hi there, welcome to fcc community.

Your .question-block div has 2 closing tags </div>

Remember, h3 and fieldset must be inside .question-block div.

2 Likes