Learn Accessibility by Building a Quiz - Step 18

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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>

<!-- User Editable Region -->

    <main>
   <form action="https://freecodecamp.org/practice-project/accessibility-quiz" method="POST">
      <section role="region" aria-labelledby="student-info">
         <h2 id="student-info">Student Information</h2>
         <!-- Content for the first section goes here -->
      </section>
      <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML Questions</h2>
         <!-- Content for the second section goes here -->
         <p><a href="#student-info">Go to Student Information</a></p>
         <p><a href="#html-questions">Go to HTML Questions</a></p>
      </section>
      <section role="region" aria-labelledby="css-questions">
         <h2 id="css-questions">CSS Questions</h2>
         <!-- Content for the third section goes here -->
         <p><a href="#student-info">Go to Student Information</a></p>
         <p><a href="#html-questions">Go to HTML Questions</a></p>
         <p><a href="#css-questions">Go to CSS Questions</a></p>
      </section>
      <!-- Add form inputs and submit button as needed -->
   </form>
</main>



<!-- User Editable Region -->

      </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>
        </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>
  </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 18

Link to the challenge:

2

Hello!

I suggest the step be reset.
Complete it without adding all of the comments into the code.
If error messages are received when the instructions are being followed, please post both the code and your questions, along with the error message received?

Thank you! Happy coding!

1 Like
3

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