Build a Tribute Page Step 1

Blockquote
Good morning everyone how come my tests keeps falling for these Id attributes? Also how come my image doesn’t show in preview? Thank you

<main id="main">
   <link rel="stylesheet" href="styles.css">
   <title id="title">Steve Jobs
  </title>
  <div id="img-div">
  <img id="image"src="https://images.app.goo.gl/97YZBuJxxv6VcCHn9">
  <figcaption id="img-caption"> A picture of Steve Jobs</figcaption>
  </div>
  <body id="tribute-info">
    Steve Jobs was a visionary whose impact on technology and modern life is immeasurable. As the co-founder of Apple Inc., he revolutionized personal computing, telecommunications, and digital entertainment. His relentless pursuit of innovation and perfection led to the creation of iconic products such as the iPhone, iPad, and Mac, transforming how people interact with technology. Jobs' ability to foresee market trends and his commitment to elegant design and user experience set new standards in the tech industry. Beyond his technical genius, he was a masterful storyteller, marketer, and leader who inspired millions. His legacy continues to influence and shape the future, reminding us that creativity and determination can change the world. Steve Jobs' contributions are a testament to the power of innovation and the enduring impact of one man's vision on the global stage.
    <body>
     <p> to learn more checkout their  <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Jobs" >wikipedia<a/></p>
  </main>

because it’s not the link to the image, it’s a link to a page that contains the image. you need the direct image link

Try validating your html, you may have some weird nesting that went wrong

Failed Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main .

I see that…

start with a proper html boilerplate

add the doctype declaration, the html element, then the body and head elements inside the html. meta data in the head, then visual elements in the body.

1 Like

Blockquote Okay so I added the doctype declaration, the html element, the body and head nested in html also the meta still no luck.


<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />

   <link rel="stylesheet" href="styles.css">
   <title id="title">Steve Jobs</title>
</head>
  <body id="tribute-info">
  <div id="img-div">
  <img id="image"src="https://images.app.goo.gl/97YZBuJxxv6VcCHn9">
  <figcaption id="img-caption"> A picture of Steve Jobs</figcaption>
  </div>
  <main id="main">
    Steve Jobs was a visionary whose impact on technology and modern life is immeasurable. As the co-founder of Apple Inc., he revolutionized personal computing, telecommunications, and digital entertainment. His relentless pursuit of innovation and perfection led to the creation of iconic products such as the iPhone, iPad, and Mac, transforming how people interact with technology. Jobs' ability to foresee market trends and his commitment to elegant design and user experience set new standards in the tech industry. Beyond his technical genius, he was a masterful storyteller, marketer, and leader who inspired millions. His legacy continues to influence and shape the future, reminding us that creativity and determination can change the world. Steve Jobs' contributions are a testament to the power of innovation and the enduring impact of one man's vision on the global stage.
    </main>
     <p> to learn more checkout their  <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Jobs" >wikipedia<a/></p>
  </body>
  </html>

did you forget a couple of lines at the top?

do not give an id to this, add a header element to your body with the title and give the id to that

the main element should contain all the important elements, to pass Your #img-div, #image, #img-caption, #tribute-info, and #tribute-link should all be descendants of #main. you need to write those elements to be descendants of #main

1 Like