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

HTML-CSS
1

Tell us what’s happening:

The prompt says to create two more div element and give them each a class of marker. I keep getting errors that say I need to give the div tags need an opening tag or I need to give them a closing tag. I thought that I did both. what am I doing wrong?

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>

<!-- User Editable Region -->

    <h1>CSS Color Markers</h1>
      <div class="container">
        <div>
      <div class="marker">
        </div>
      <div class="marker">
            </div>

<!-- User Editable Region -->

  </body>
</html>

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

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

h1 {
  text-align: center;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

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

2

Have two opening div tags here. The second one needs to be removed, and you need to add a closing div tag after the second new div you added

3

You need to add total three marker div elements, between

That container div opening and closing tags.
@matt.roeber

4

how important is the spacing on each line? I created the marker div’s correctly and keep getting “code does not pass”

CSS Color Markers

6

Thank you! I added the third marker class. I realized that by clicking the div tags the compiler shows where each div tag is connected to.

The code looks like it should work yet the console says that the new div elements should both have a class of elements, which they do have.

<div class="container">
    <div><div class="marker"></div>
      </div>
   <div><div class="marker"></div>
      </div>
   <div><div class="marker"></div>      
    </div>
</div>
type or paste code here
7

you should have three .marker div element each one should have only one pair of opening and closing tag like the above one i mentioned. remove all extra div tags.
@matt.roeber

1 Like
8

Thank you for your help. My code finally passed. I didn’t initially realize that I needed 3 div class markers and I over did it with the div tags to somehow appease the compiler. I think I would have had it right the very first time if I had just had the third marker class.

9

In your earlier code you had added the marker div elements after it’s container div element. By the way that is great you passed the challenge. Keep it up, happy Coding.

10

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