Learn Accessibility by Building a Quiz - Step 21

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
You should give the third input type of date? Help needed. George Estrada
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" 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 for="student-name" input type="text" name="student-name" placeholder="Joeann">Name:</label>
            <input id="student-name" />
          </div>
          <div class="info">
    <label for="student-email"> <input type="email" name="email">Email:</label>
            <input id="student-email" />
          </div>
          <div class="info">
  <label for="birth-date">D.O.B:</label>
<input type="date"><name="birth-date"><input id="birth-date"/>
          </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>


/* 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;
}

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

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

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14816.131.5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 21

Link to the challenge:

2

Hello!
I notice a few things within this part of the code.

There should not be >< after the date and birth-date. And the input before the id should be removed.

I hope this helps fix the problem.
You may wish to reset the step and work through it with these changes to see if it works.

Happy coding! :slight_smile:

1 Like
3

Gracias, Life.Blessed. The kool part is when u figure it out.

2 Likes
4

Your comment is so true, George Estrada!
More is learned and remembered by figuring it out on your own, or with help, when the brain is active, but the rhythm is a bit off with the thought process. :slight_smile:
Believe me, we all go through it sometimes.
Great job and attitude to learning!:slight_smile:
Wishing much more success with your path to learning.
Happy coding!

1 Like
5

Kind words, Life.blessed

2 Likes
6

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