Learn Accessibility by Building a Quiz - Step 13

HTML-CSS
1

Tell us what’s happening:
The lesson has already given me the answer to what is wrong with my code, I just have 2 problems with this lesson.
The > syntax for CSS was not covered in any of the previous lessons, and neither was justify-content: space-evenly
I’m not sure if step 13 or this lesson were pulled from an older version of the Responsive Web Design course, but it may be something to go back and add into a previous lesson.

Your code so far
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;
}

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

Your browser information:

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

Challenge: Learn Accessibility by Building a Quiz - Step 13

Link to the challenge:

2

You target an element like: smth > smth { }. Then, add " justify-content: space-evenly; " to evenly space the children.

3

Yeah, the lesson told me that after the code failed.

But I also noticed the same oversight in Step 14, where you’re told to create a form that will submit to a site using a specific “method.” However, method=“post” was never covered in earlier steps or lessons. The Accessibility Quiz lesson really needs to be retooled or reworked for better clarity.

4

There is an open issue for the method=“post” concern.
You can open an issue for the the other ones if you like. Instructions here:

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

5

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