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

HTML-CSS
1

Tell us what’s happening:

Something is wrong with my code it keeps showing, “your first or second new div should have opening tag.”
Help me

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 class="marker">
      <div class="marker">
      </div> </div></div>
    </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/128.0.0.0 Safari/537.36

Challenge Information:

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

2

please create each div element on a line by itself.
Do not nest the elements.

1 Like
3

you are missing the > for this tag, and for the three.marker divs, they need to one next to the other, not one inside the other

1 Like
4

still can’t solve its showing “second div should have opening tag”

5

thank you but i still can’t seem to crack it

6

it might be better to reset the step and then add the divs one by one.
Keep each div by itself on each line.
Make sure each div has an opening and closing tag on each line.

If you’re still stuck, copy the code here in your next reply.

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

here is the code

8

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

9

so please click the Reset button

This will restore the code to the initial state.

After that, create a new blank line inside the container div and add the new marker div to it.
Add one per line.
Total new lines will be 3

Each line will contain the opening and closing tag of each .marker div.

If you’re still stuck, please share the code again.

1 Like
10 
<div class="container">
      <div class="marker"> </div>
     <div class="marker"></div>
      </div>
    </div>
11

this is getting better. You added two markers now.
How many did this step want?
Make sure you don’t add too many closing tags.

(also when you post code on the forum, you have to take an extra step to make it readable. I did it for you twice in this thread. Please try to learn the technique)

12

this step needs two new div elements. sorry for the trouble . I will try learn.

13

The total number of divs inside the container element should be three.