Learn Accessibility By Building A Quiz

Web Development Bootcamp
1

Let it be known, I usually finish a lesson within an hours time. I spent an entire hour on this lesson and a few minutes and I’m only on step 51 of 67. I had to visit Google and Stackoverflow to answer a few questions so I know my fellow classmates are going to have some major questions about this lesson. If you have any questions about this lesson please ask, I will answer them to the best of my ability. I already have a notion page with some notes on this lesson ready to go for you guys. Have fun, try your best, and don’t forget to re-read the question and hint :wink:

1 Like
2

Step 33: target the before pseudo-element of the p element, and give it a content property of Question # – I’m not getting this?? I can’t figure out how to write the content property.

here’s my code so far: p::before {

content: content(Question #);

}

3

Figured it out!! CSS Content Property is a great resource, alongside MDN!

4

Okay, glad you figured it out, let me know if there is anything else :hugs:

5

Any thoughts on why step 60 won’t work for me? Directions are " Remove the default styling for the list items of .answers-list , and remove the unordered list padding."

My code is .answers-list {
list-style: none;
}

The hint I get says " You should give .answers-list a list-style of none ."

I’ve tried this in Firefox, Chrome, and DuckDuckGo, I’ve refreshed the page, I even texted my software engineer brother and copied the code he sent me (same as mine!!). Every single time, I get the same hint.

6

It also asks you to remove the unordered list padding, it’s a long lesson and it’s easy to get caught up in reading the directions. It happens to me all the time.


.answers-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
7

I found that in step 3 it has to be initial-scale=1.0 I tried to put initial-scale=1 (as found on the internet AND as suggested in the hint under my failed solution) but that wouldn’t work. So I checked the lecture on Youtube and the answer was right there.

8

The same thing has happened to me twice! I tried to put one but it has to be 1.0

9

But this doesn’t work either for me… what is wrong with that question? I’ve checked everywhere and there’s only a few solutions to this, tried all of them many times and each time I get the same hint. This really annoyed me :smiley:

10

Hi rico,

I’m stuck at Step 56, maybe you can help ? I don’t quite get which element should align to the right. I have tried putting the text-align: right; property in .info input, or/and .info label, or .info label, .info input, or label, input. But none are working ! I have run out of ideas :frowning:

Céline

1 Like
11

Let’s review the directions

To align the input boxes with each other, set the display property to inline-block for all input and label elements within .info elements.
Also, align the text to the right.

This is asking us to manipulate .info label and .info input, this would require

.info > label, .info > input

or

.info label, .info input

I prefer the second because it’s easier to read and you can tell the classes you are manipulating. Next it asks for a display of inline-block and text-align of right. If you have any trouble after this let me know. You got this!

12

Hi rico !

Thank you for your repply.

Yes, this is what I did:

.info label, .info input {

display: inline-block;

text-align: right;

}

but it was not working. I realised today it was because I put the hole thing AFTER

.info input {
}

.info label {
}

and not BEFORE, as I did not know the order of the css rules actually matters :laughing:

2 Likes
14

This one stumped me pretty early on, but today I picked it back up and it took about 2 hours from start to finish. Thanks for posting. I feel better knowing this one wasn’t easy for everyone. Cheers.

2 Likes