Build a Checkout Page - Build a Checkout Page

HTML-CSS
1

Tell us what’s happening:

I don’t know what I’m doing wrong put all those fails after adding the aria-describedby and p elements for me it isn’t clear enough what I’m supposed to do.
Here the steps that fails at the moment. This is what the consoles says

12. All of your input elements that aren't a type of submit should have a label element associated with them.
14. You should include a span element with the text * inside the label element for each required input.
15. Your span elements should have aria-hidden set to true.
16. You should have a p element with an id of card-number-help immediately after the card number input.

Your code so far

<!DOCTYPE html>
<html lang="en">
<body>
<head>
    <meta charset="UTF-8" />
    <title>Checkout Page</title>
</head>
<h1>Checkout</h1>
<section><h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="an image of a rubik cube"></img></section>
<section><h2>Payment Information</h2>
<form><input id="card-name" name="card-name" type="text" required><label for="card-name"><span aria-hidden="true">*</span>Card Name</label>
<input id="card-number" name="card-number" type="text" required aria-describedby="card-number-help"><label> for="card-number"><span aria-hidden="true">*</span>Card Number</label>
<p id="card-number-help">Your have to write it like this XXXX-XXXX-XXX, replace the x with your card number and ignore the dashes</p></form></section>


</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:149.0) Gecko/20100101 Firefox/149.0

Challenge Information:

Build a Checkout Page - Build a Checkout Page

2

hi there,

your code is not easy to read because of the way you formatted it.
Do you want to try to fix the format so it is neat and indented and that may help you as well to debug the issues you are having?
(if you look at any of the code in any of the fcc workshops, you will see how they indent and format it with spaces and newlines)

edit: also watch out where you put your head element.
Is the head supposed to be nested in the body? Or supposed to be above it?

3

oh oops. but now I don’t know to insert my code back into it? since it’s bugs out. actually fixed it by myself lol. Just switched where the paragraph element was.