I get stuck at step 47: don’t know why my selector doesn’t work
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colored Markers</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>CSS Color Markers</h1>
<div class="container">
<div class="marker one">
</div>
<div class="marker two">
</div>
<div class="marker three">
</div>
</div>
</body>
</html>
/* file: styles.css */
h1 {
text-align: center;
}
.container {
background-color: rgb(0, 0, 0);
}
.marker {
width: 200px;
height: 25px;
margin: 10px auto;
}
.one {background-color: rgb (255, 0, 0);}
.two {
background-color: green;
}
.three {
background-color: blue;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Step 22
Link to the challenge:
Hi
The challenge that your post links to is step 22 of the Colored Markers section of the course, and the code in your post also seems to belong to that part of the course.
And your screenshot does not seem to correspond to step 47 of the “Building a Quiz” part of the course.
Could you clarify exactly which challenge your post refers to?
I meant step 47 in Building a Quiz as the picture I posted, not the Colored Markers section.
The instructions in Step 47 in Building a Quiz are:
Step 47
Tidy up the header, by using Flexbox to put space between the children, and vertically center them.
Then, fix the header to the top of the viewport.
That doesn’t seem to match the code in your screenshot.
If you’re stuck in step 47, then please describe the problem you’re having with that step.
In both cases, please post your code.
/* Here’s my html code:
<!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>
*/
Sorry it’s actually step 33 in Learn Accessibility by Building a Quiz. I misread the step. And here’s the link: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-33
And here’s my 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;
}
p::before {content: Question 1}
.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;
}
That’s great - thank you.
This step asks you to target the before pseudo-element of the p element, and give it a content property of
"Question #"
Your code for the content property hasQuestion 1
Can you see the difference?
If you make your content property exactly match the requirement (including the quotes), then your code should pass.
I’ve already tried it. But it’s still not passedhttps://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-33
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;
}
You forgot the quote marks round "Question #"
Now it works. Thank you for your help. Do you use any kind of social media? Can we make friends and discuss about coding sometimes?
I’m glad you got it to work.
I’m afraid, I don’t use social media at all, and my free time is pretty limited at the moment.
You might want to check out the FreeCodeCamp discord chat room, though.
For years people have asked freeCodeCamp to create a Discord chat. Well today, I'm excited to announce that we did it. We now have an official Discord chat room server. Before you join, please give me 2 minutes to explain our goals with this new chat...
1 Like
system
February 1, 2023, 2:52am
13
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
