Learn Accessibility by Building a Quiz - Step 23

HTML-CSS
1

Tell us what’s happening:

Within the second section element, add two div elements with a class of question-block.

Then, within each div.question-block element, add one h3 element with text of incrementing numbers, starting at 1, and one fieldset element with a class of question.

Thanks for the help!

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>
<div class="question-block"></div>
  <h3>1</h3>
  <fieldset class="question"></fieldset>
  <div class="question-block"></div>
   <h3>2</h3>
  <fieldset class="question"></fieldset>
        </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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15

Challenge Information:

Learn Accessibility by Building a Quiz - Step 23

2

Hi there!

You didn’t added anything within the both div elements.

3

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

4

Hello and welcome to the forum community @starlight !

Great attempt!

Let’s break down the instructions:
1. Within the second section element, add two div elements with a class of question-block.

2. Within each div.question-block element add the following:

a) Add one h3 element with text of incrementing numbers, starting at 1. (great job of creating the h3 with the numbers) But, they need to be added between the opening and closing tag of the question-block div tags.

b) Add one fieldset element with a class of question within each question-block div.
Good attempt. This needs to be nested between the opening and closing question-block div tags.

A good example of the placement is to see how you added the numbers between the opening and closing h3 element tags. All of the code being added after the div elements with a class of question-block, should be added between these opening and closing tags.

I hope this helps you succeed and move on in your coding journey, @starlight !

May you enjoy much more success on your coding path. :slightly_smiling_face:

5

Thanks for reminding! I am too careless to recognise the mistake…Will be careful next time!Happy Coding!

2 Likes
6

Wow, Thank you for the detailed explanation and encouragement. I really did not see it coming! :grin: Gonna be careful on these little details next time…

1 Like
7

You are very welcome, @starlight !

It has happened to us all, at some time, I would imagine.

Keep up the great progress on your coding journey. :slightly_smiling_face:

1 Like