https://validator.w3.org/nu/#textarea
https://codepen.io/GoodNGo/pen/eYvgwEr
The two links above directs to my code. In the w3 html editor it says I have unclosed element’s when I do, and also gives me trouble for “white-space” when I removed them. I also don’t know where to put my alt text because it says its an error no matter what. is it necessary for the html to pass through the editor or does it not matter?
You do have unclosed HTML elements in your codepen. For example, I see a <main> at the beginning but I don’t see a </main> anywhere in your HTML, so the main element is not closed properly. Use the “Analyze HTML” feature in codepen to show you all of your unclosed elements.
Your alt text isn’t working because you need quotes around the alt text:
alt="your alt text goes here surrounded by quotes"
I have removed the <main>. Unless you mean the <main id = "main"> which doesn’t need a closing tag I was told.
No, main element needs a closing tag
Sorry for the misunderstanding but I think it was the closing tag doesn’t need to have an id tag.
<main id="main">
your code here
</main>
It should be like this.
you also have two opening <ul> but only one closing </ul>
oh I see. thanks for elaborating
I suggest you use the Format HTML tool
Other issue, at the end you have <div><blockquote><i>, but you close with </div></i></blockquote>, the last opening need to be the first closing
I changed the order but it still saying block quote has no closing tag. its doing the same thing ul id thing
does this affect whether the tests pass or not? because I’m willing to leave it if it doesn’t.
These are easy fixes. You just need to make sure that all opening HTML tags have a corresponding closing HTML tag. For example, an opening <ul> tag always needs a closing </ul> tag. There is no reason not to fix these.
I see that you are trying to fix them. Not only do the closing tags need to be there, but they need to be at the correct level in the DOM. For example, the <main> element wraps around all of the content on the page, so the </ul> closing tag will not come after the </main> closing tag. In other words, you need to preserve the parent/child relationship of the elements.
<parent>
<child>
...
</child>
</parent>
The opening/closing tags of the child element will always be inside the opening/closing tags of the parent element.
just fixed the parent/child thing regarding the div and ul elements. I have one question though, what is “white-space” ? I thought it was unnecessary gaps in code but I removed all of them and I am still receiving that error for my img src element
I think the whitespace issue is with the id on the img:
<img src="..." class="drake-image, thin-black-border" id="Muscian Drake" alt= "drake's face">
Id’s can’t have spaces in them.
Furthermore, you don’t want a comma between the class names. Multiple class names are separated by a space not a comma.
you open the i last, so </i> should be the first one. You put that last too
just did it and it worked
fixed it. I’m almost done but for user story #9, what does by being centered within its element? I believe my img src is centered here : https://codepen.io/GoodNGo/pen/eYvgwEr?editors=1010
you don’t need two ul elements inside each other, one is enough - maybe delete the one without id attribute
your last li element is unclosed
the tests do not pass because you do not have an element with id="image"
I already have the id element though, its the “MusicianDrake” one.
Let’s break down the four error messages because there is some confusion here
Within the “img-div” element, I should see an element with a corresponding id=“image”.
Here is your image element
<img src="https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5ed578988b3c370006234c35%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D43%26cropX2%3D1074%26cropY1%3D49%26cropY2%3D1080" class="drake-image thin-black-border" id="MuscianDrake" alt= "drake's face">
You wrote this for the id
id="MuscianDrake"
But the error message is telling you this
id="image"
Here is the next error message
5. Within the “img-div” element, I should see either a <figcaption> or <div> element with a corresponding id="img-caption" that contains textual content describing the image shown in “img-div”.
Inside your img div you need to have another div element with an id of img-caption with a text caption for the image.
<div id= "img-div">
<div ID GOES HERE>
Write some sort of caption here about drake
</div>
</div>
Here are the last two error messages
The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
The <img> element should be centered within its parent element.
What you have now isn’t going to work.
.drake-image {
transform: scale(1);
}
You will need to google two things.
The first results will give you the exact code you need.
Once you make all of those changes then the test will pass.
If you run into any more issues passing the test then make sure to read the full error messages.
Hope that helps!
Is the img caption div element supposed to be outside of the img div element or inside?