Learn Accessibility by Building a Quiz - Step 17

HTML-CSS
1

Tell us what’s happening:

my code is not passed, even I entered correct
Describe your issue in detail here.

Your code so far

h1, #student-info, #html-questions, #css-questions{
font-family:Verdana sans-serif;
border-bottom:4px solid #dfdfe2;

}

<!-- 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>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>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>
        </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;
}


/* User Editable Region */

h1, #student-info, #html-questions, #css-questions{
  font-family:Verdana sans-serif;
  border-bottom:4px solid #dfdfe2;

} 


/* User Editable Region */

Your browser information:

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

Challenge Information:

Learn Accessibility by Building a Quiz - Step 17

2

This isn’t the CSS selector that the instructions asked for though

2 Likes
3

Select them by there element name which is h2 in this case:

1 Like
4

No, This is the actual code, but it did’t works,

5

I understand that is your actual code. Your actual code doesn’t have the CSS selector you were asked to use through.

6

Hello @prasanth-pemmadi !

As both Leader, JeremyLT and Starstruck have been attempting to explain to you, the instructions ask that the h1 and h2 selectors be used for the changes.

You do have the correct idea on how to use multiple selectors, but instead of the id, try using the element.

I hope this is more clear for you, and you are able to move on to the next step.

Keep up your good progress!

1 Like