Im having a hard time understanding all this element within a element stuff for the tribute page stories. It goes from element within div with id= img-div all the way to id= img-caption within img-div. This got me very confused
Blockquote
Your browser information:
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14388.61.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.107 Safari/537.36
Challenge: Build a Tribute Page
Link to the challenge:
Hi @nextdev !
Welcome to the forum!
Are you talking about these users stories here?
User Story #4: Within the img-div element, I should see an img element with a corresponding id="image" .
User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div .
If so, they want you to add an image element inside your existing div as well as add a div with the textual content describing that image.
<div id="img-div">
IMAGE ELEMENT GOES HERE
DIV FOR TEXTUAL CONTENT GOES HERE
</div>
Hope that helps!
Thank you for the quick reply. I think i’m close to understanding but far away. Coding talk is new to me so can you check my code for me to see if its on track
https://codepen.io/codertre/pen/jOYOgRP
A few things concerning the tests.
You need to make sure to have the test suite on your page and test your code along the way.
Place this script tag in your html section.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
For user story 4, it is looking for an image tag with the id of image.
You have an image tag here with no id
<img src="https://images.squarespace-cdn.com/content/v1/5256f6e4e4b086e2b62842e2/1421589861526-NLMVFC4TD9JMJI8CMFQ7/image-asset.jpeg?format=1500w" alt="Image of Dr. Norman">
For user story 5, it is looking for an element with the id of “img-caption”.
I don’t see an id here. Also it looks like you are missing a closing p tag.
<p>Dr. Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.
When I fix those things, then tests 4 and 5 pass.
But while we are here, there are a few other things
That is not the correct use for head tags here
<head>
<h1 id="title">Dr. Norman Borlaug</h1>
</head>
Head tags contain information like title tags, meta tags, link tags, etc. This is information that is needed for the browser but not displayed on the web page.
I would go ahead and delete those head tags.
Maybe you meant to use the header tags instead?
For this section here,
<p>• <strong>1914</strong> Born in Cresco, Iowa</p>
it would be better to create an unordered list.
When you finish the project I would suggest sharing it with the forum in the #project-feedback section so you can incorporate the feedback into future projects and level up your coding.
Hope that helps! 
Thank you so much for your help!! You are amazing, people like you make this self-taught process possible.
When I tried the unordered list, the bullet points were on the left side of the page while my text was in the center of the page. How do I fix that? Also the link for the js script isn’t doing anything
Post a Codepen with your updated code. You can fork it first to create a copy (click the fork button on the bottom right of the footer).
https://codepen.io/codertre/pen/zYpxwoP You see how the bullet points are on opposite side of text
Updated
The bulletpoints on the list can be removed entirely by adding:
ul {
list-style-type: none;
}
Here are some other styling ideas:
https://www.w3schools.com/css/css_list.asp
Thanks! I actually want the bullet points, just close to the text but i figured it out though
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.