Learn Accessibility by Building a Quiz - Step 12

HTML-CSS
1

Tell us what’s happening:

I did what they told me to do, i.e. I made three li elements and nested them inside three anchor tags and one ul element. I don’t see what I got wrong here. Could anyone please help me? Thanks a lot :slightly_smiling_face:

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>

<!-- User Editable Region -->

      <nav>
        <ul>
          <a><li>INFO</li></a>
          <a><li>HTML</li></a>
          <a><li>CSS</li></a>
        </ul>
      </nav>

<!-- User Editable Region -->

    </header>
    <main></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);
}

Your browser information:

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

Challenge Information:

Learn Accessibility by Building a Quiz - Step 12

2

Hi there and welcome to our community!

The list items text should be wrapped in anchor tags.

Your code is almost correct but the anchor tags should wrap around the text inside the li elements, not around the outside of the li elements.

3

Thanks a lot ! I got it right now :slight_smile: