Learn Basic CSS by Building a Cafe Menu - Step 20

trying to do the

and id elemet

Your code so far

/* file: index.Ext.html */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body> <div> id=menu
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body> </body>
</html>
/* file: styles.Ext.css */
body {
  background-color: burlywood;
}

h1, h2, p {
  text-align: center;
}

Your mobile information:

SM-A032F - Android 13 - Android SDK 33

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 20

Link to the challenge:

You should be adding a div element and then nesting the main element (and all other elements within it) inside the div.
The div element, like most others, has both an opening and closing tag. The opening div tag should be directly below the opening body tag and the closing div tag should be directly above the closing body tag.
Finally, inside the opening div tag you should have your id attribute.
As you have a few issues with the code above, Iā€™d Reset the lesson and try it again.

1 Like

this is my code now

<body>
  <div> id="menu"
  <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
    </div>
  </body>

I edited your code for readability. When you post code on the forum you need to enclose it between two sets of triple backticks (`), so that it displays correctly.

HTML attributes should always be inside the opening tag of the element which they are being applied to. You need to move your id attribute inside the opening div tag.

EXAMPLE:

<p class="info">This is how you add a class attribute to a p element</p>