I need help with step 18

HTML-CSS
1

this step is not functioning in my project. i have completed the project except step 18. i had similar issues with one or more other steps but they resolved when i refreshed the pages, except step18. its not even giving me any instructions as to what the task is for this step.

2

Please give us a link to the challenge. We can’t help you if we don’t know exactly what you’re stuck on.
If you could also share your code with us, we might be able to see what’s causing you problems.
The easiest way to ask for help is to click on the help icon on the challenge page, which appears after you have submitted incorrect code three times.

3

i think this is it

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/step-18h

4

Cool, can you post your code as well? Thanks

5

Step 18
Then, create a new CSS rule that targets the class one and set its background-color property to red.

This is the one which you can’t pass?

6 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker one">
      </div>
      <div class="marker">
      </div>
      <div class="marker">
      </div>
    </div>
  </body>
</html>

Above is for html

h1 { text-align: center; }

.marker { width: 200px; height: 25px; margin: 10px auto; }

Above is for the css file up to that point.
Thanks

7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

Step 18 says you should create a CSS rule which targets the class one. I don’t see that in your CSS.

9

yes. The page is non responsive.
No instruction and no Submit button.
even if i go and add create a CSS rulel that targets class one and set its background-color to red, there is not Submit button to accept or reject the code if it is correct or not.

10

Well, the link you posted above is invalid as it has a stray ‘h’ on the end. Have you tried this link?

If that doesn’t work, have you tried a different browser?

11

noted thanks will do so next time

12

This link is showing me the same non responsive screen without instruction and submit button.

i use chrome. this is the olny step that is not completed. Am on the next project already - Creating a Registration Form. But the last one that has this step 18 says am only 98% done on that one and would not check it as completed.

13

which browser do you suggest?

14

I don’t know what may be causing the issue with just this one particular page (as it works perfectly for me), but browser extensions can sometimes be at fault too:

Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.

If a page reload with CTRL+F5 doesn’t work and removing any browser extensions doesn’t solve it either, you could try switching to Firefox, Edge or Opera perhaps?

15

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