Build a Bookstore Page - Step 18

HTML-CSS
1

Tell us what’s happening:

I have an issue with the HTML exercise validation. My code looks correct, but the system still shows an error related to the element.

I placed the below .card-container and the text matches exactly:
“Review your selections and continue to checkout.”

The task still doesn’t pass. Could you check if there is a validation issue?

Your code so far

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>XYZ Bookstore Page</title>
</head>

<body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
    
    <div class="card" id="dave-cooking-book">
      <h2>Dave's Cooking Adventure</h2>
      <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
      <button class="btn">Buy Now</button>
    </div>

<!-- User Editable Region -->

    <div class="card-container"> 
</div>
<p>Review your selections and continue to checkout.</p>
<div class="btn-container"></div> 

<!-- User Editable Region -->

</body>

</html>

Your browser information:

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

Challenge Information:

Build a Bookstore Page - Step 18

Github Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-bookstore-page/68eca6364c5616d393389a30.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @Andzelela1!

Please reset this step and try again. You have removed the closing tag for the .card-container div.

Remembering that a complete HTML element has an opening tag and a closing tag, place your new code after the complete .card-container element. Do not add another .card-container element.

Happy coding!

3

Hi, Thank you for fast feedback and I’ve corrected the code according to the instructions, but the platform still doesn’t accept the solution and says that text in the <p> element is incorrect, even though it matches the required text exactly. I tried both copying and pasting the text, as well as typing it manually, making sure it matches the instructions exactly. :pleading_face: :pleading_face:

Zrzut ekranu 2026-05-5 o 16.25.16
Zrzut ekranu 2026-05-5 o 16.25.161920×1035 260 KB

4

Please read again this bit of my reply.

And if you need more help, please post your code, not a screenshot.

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

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

5

Ahh, I got it now :yellow_heart: I misunderstood the instruction and thought I had to create a new <div class="card-container">, so I added it. I’ve removed it and everything works fine now. Sorry about the confusion :grinning_face_with_smiling_eyes: and thanks for your help!