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

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Now that you’ve got one marker centered with color, it’s time to add the other markers.

In the container div, add two more div elements and give them each a class of marker.

Good morning my Coding Coaches. I need assistance again. I’ve tried many ways to figure out the code.
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" 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/110.0.0.0 Safari/537.36

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

Link to the challenge:

2

This is what you get in this challenge:

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

Your task is to make three in their sum.

Restart the step. This is just a copy/paste assignment.
The instruction: " In the container div , add two more div elements and give them each a class of marker" - - - so, they are the same as the existing one.

3

another hint. this one isn’t working.

I’ve tried and now this is what i’m getting:
Test

Sorry, your code does not pass. You’re getting there.

Hint

Your second new div element should have an opening tag.

4

Please copy the first div element and replace it with the second one.

5

yea that doesn’t work either… in time i’ll figure it out. Thanks.

6

There is so much going on here that my advice and what I do when I am stuck is to restart the step then out loud read instruction and try to think it through. If you do that I am sure you will get it.

7

Another way of thinking about it is you already put one marker in the container correctly so you have done it correctly once already. You just need to do it again the step has not changed. If it helps go back to that step where you first inserted the marker and that is what you are trying to do x2 in this step

8

Tell us what’s happening:
Describe your issue in detail here.
In the container div , add two more div elements and give them each a class of marker .

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>
    <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/110.0.0.0 Safari/537.36

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

Link to the challenge:

9

don’t nest the markers inside each other.
Create each one separately on a different line without nesting.

10

This is much closer, so far you have only closed the container and the bottom marker the closing tag of elements has a / take a look at your code you need to put closing tags on the top and middle markers.

11

i figured it out. how I first did it on the previous step is not how it let me do it to add the 2 others. when i did it i put it like:

<div class="container"
and it went through. so this step which is shown above (the new image) i did the same thing and it didn't go through. Watching youtube i figured it out. the closing tags had to follow behind nesting, not put at the end after nesting it all. I get it now. I appreciate the assistance. Respect.
1 Like