Learn Accessibility by Building a Quiz - Step 34

(1) why did i receive a warning that my could not “port” over as it exceeded the maximum length? what does this mean? why is there a max? what is porting?

(2) is there a way to “copy all” of the given code type (html) without right click drag?

Step 34
“To prevent unnecessary repetition, target the before pseudo-element of the p element, and give it a content property of "Question #" .”
(3) repetition of what?
(4) target the before of p? there isnt any before element of p?

<!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">
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label for="student-name">Name:</label>
            <input type="text" name="student-name" id="student-name" />
          </div>
          <div class="info">
            <label for="student-email">Email:</label>
            <input type="email" name="student-email" id="student-email" />
          </div>
          <div class="info">
            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
            <input type="date" name="birth-date" id="birth-date" />
          </div>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
          <div class="question-block">
            <p>1</p>
            <fieldset class="question" name="html-question-one">
              <legend>
                The legend element represents a caption for the content of its
                parent fieldset element
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q1-a1">
                    <input type="radio" id="q1-a1" name="q1" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" name="q1" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <fieldset class="question" name="html-question-two">
              <legend>
                A label element nesting an input element is required to have a
                for attribute with the same value as the input's id
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q2-a1">
                    <input type="radio" id="q2-a1" name="q2" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" name="q2" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

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

before p{
  content: 
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.


```text
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

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 34

Link to the challenge:

1 Like

Ok the before pseudo element is not an element in the actual HTML. Think of it as a way the CSS uses to create a HTML element without any actual HTML code(I hope that makes sense). For example target the before pseudo element of the div element and change its content property to the text “Hello World”, you need to write sth like this

div::before {
   content:"Hello World";
}

Avoiding repetition that the challenge talk about means that you do not have to create a new HTML element, it will be created automatically
If you are still confused check out this video:

2 Likes

As for a way to copy all code, press Ctrl and A at the same time to select all the code then press Ctrl and C at the same time to copy it, go where you want to put click there and press Ctrl and V at the same time to paste it

2 Likes

I havent watched the video yet but thank you I am going to …i entered the “hello world” CSS and watched things change but i still do not understand what is going on here, what is the purpose? I also watched “hello world” appear below the first question division but not the second and it changed the text of the name , dob, wtc in those divs. Boy its days like today where you wonder why bother. the more you learn the more you realize you havent learned s@#$

Tell us what’s happening:

another wasted hour. So this code isnt being accepted.

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;
}
p::before{
content: Question #;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
**Your browser information:**

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

**Challenge:** Learn Accessibility by Building a Quiz - Step 34

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-34

This is a string so you need quotation marks around it.

2 Likes

what makes it a string? i seem to recall that word from some Python and Basic, but we dont see that word here in html/css much right? this step has me very confused im not understanding what is happening here.

If you look closely at the instructions, you’ll see that the value for the content property is "Question #". Notice that there are quotes. So the instructions are telling you that the quotes need to be included.

The content property allows you to add text to the page. Usually you add text to the page through HTML. But content allows you to do this through CSS. Just like the text you add to HTML is a “string”, the text you add through the content property in CSS is also a “string”. A string in this sense is just a sequence of characters. But in CSS you must put quotes around it to tell the browser that it’s a string. If you don’t then the browser will think it is something else.

lol this is the 100th time Ive asked this question , finally stuck. used it today !

AHHHHH so this is what the :: before after rule is about, adding content through CSS instead of HTML. now i understand. I dont understand what the utility or necessity of this is though, could you share an example?

It think one of the main uses of the content property is to add icons, special characters, and such. Some examples can be found on the MDN content page.

Using the content property for text can be troublesome because I don’t think the text in the CSS will be translated if someone is translating the content with a plugin or something similar.

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