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

HTML-CSS
1

Tell us what’s happening:

Hello, I am struggling with my code on this tutorial. In particular the div part, adding another div element within my original div element with class=“marker”.

My attempted code-

<div class=“marker”

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>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

</html>

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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 10

2

The div opening tag is missing the > at the end.

3

Thank you for your reply! I don’t think that worked or maybe I’m still not doing it correctly. This is the hint they’re telling me. (Your new div element should have a closing tag.) but I am not understanding.

4

Welcome back to the forum @mistyv926

The first div element has no closing tag.

Happy coding

5

When writing an element like div, you need to fully close the opening tag of the div and the closing tag of the div.
That means the opening tag you showed us:

is not closed because it needs a >
Place the > right after the “marker”.

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

This is now my code but it still isn’t working. I’m sorry please be patient with me lol :confused:

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

I’m not sure why you deleted the angled bracket for your .container class div?
Your original code was;

This version was missing a > after the word “marker”.
Now, in this new code, the .container is missing it’s >

Please understand that each tag needs a < and a > on each side.

9

Hi @mistyv926

I edited your code to show the structure.

  1. the first div opening tag is missing a closing angular bracket
  2. the second div opening tag is missing an opening angular bracket
  3. your code has two div elements, but only one div closing tag

Happy coding