Learn CSS Colors by Building a Set of Colored Markers - Step 14

HTML-CSS
1

Tell us what’s happening:
I dont know what to do I think I have done it correctly but its not letting me proceed
Your code so far

<!-- file: index.html -->
<!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>

<!-- User Editable Region -->

    <div class="container">
      <div class="marker">
      </div>
    </div>
    <div class="marker" class="container"></div>
        <div class="marker" class="container"></div>

<!-- User Editable Region -->

  </body>
</html>

/* file: styles.css */
h1 {
  text-align: center;
}

.marker {
  width: 200px;
  height: 25px;
  background-color: red;
  margin: auto;
}

Your browser information:

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

Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 14

Link to the challenge:

2

Edit: I am thinking of the wrong challenge. So, you need to have three marker divs inside one container div

<div class="container">
      <div class="marker">
      </div>
    </div>
    <div class="marker" class="container"></div>
        <div class="marker" class="container"></div>

You can take this code, and remove the others. Then just add two more marker divs after the first marker div

<div class="container">
      <div class="marker">
      </div>
</div>
3

Its still telling me the same thing

4

Can we see your new code

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 (').

5 
<!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">
        <div class="marker" class="container"></div>
        <div class="marker" class="container"></div>
      </div>
    </div>
</body>
</html>```
6

You have two divs nested inside the top div. You shouldnt have any nested marker divs here. You need your second marker div to start after the closing for the first marker div. Then your third marker div starting after the closing for the second marker div

7 
<div class="container" class="marker">
   </div>
      <div class="marker" class="container">
   </div>
      <div class="marker" class="container">
   </div>
8

Does the challenge tell you to give both classes to the new divs you added?

you need a div with the class container. Then you need three divs nested inside that container dive with the class “marker”

9 
<div class="container">
        <div class="marker">
          <div class="marker">
            <div class="marker">
              </div>

is it like this?

10

your marker class divs need closing tags

12

Mod edit: removed
It took me awhile but this worked for me

13

@tedterrific

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

14

oops, sorry. I’m more of a visual learner. I made this picture in ms paint, could it be used as a hint?
syntax errors

15

As long as the code to pass the challenge is not given to those asking the questions then you can use what you think would be the best way to get the point across. Some users use examples with code, but its code that cant be copied and pasted in the challenge. In the end, we want those who ask the question to be the ones to come up with the code themselves.

16

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