Trouble with my Tribute Page

1

Here is the link to my page. Six things are wrong. But I can’t figure it out. Please help! And I wouldn’t mind some feedback.

Content

  1. My tribute page should have an element with corresponding id=“main”, which contains all other elements.
  2. I should see either a figure or div element with corresponding id=“img-div”.
  3. Within the “img-div” element, I should see an img element with a corresponding id=“image”.
  4. 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 subject of the tribute page.
  5. I should see an element with a corresponding id=“tribute-info”, which contains textual content describing the subject of the tribute page.

Layout

  1. The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.
2

Hello!

The link you provided appears to lead to the FCC test script pen.

3

Whoops! My fault…I think.

4
5

Okay.
First, keep the test script on your page. It will help a lot. Just put this at the top of your HTML. <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Here’s what I’m seeing:

  1. <id = "main"> is not a valid HTML element. id is an attribute, which is set on an element such as <p>.
  2. <id= "img-div"> is not a valid HTML element.
  3. This is related to 2.
  4. Also related to 2.
  5. You need an element with an id="tribute-info". You have no such element on your page.
  6. You will need to adjust your CSS for this. Click the red button on the test script to view the error code.
6

My test already has

but I sent you my code directly from Codepen because it wouldn’t let me give you the one from freecodecamp/codepen.

7

image
image1920×1080 427 KB

This is what I see when I load your pen.

8

Try looking at it now.

9

Perfect!
Now in the screen below I’ve highlighted an error message - this should help you know where to look to adjust your code.

image
image1920×1080 344 KB

10

What is inline? I must be the biggest dunce on planet earth!

11

Take a look at this CSS display property explanation. It may help you understand.

Not at all! We all run into obstacles when learning how to code - it’s part of what makes it fun!

1 Like
12

Thank you. :slightly_smiling_face:
W hen I put display: block
it says I now have seven things wrong and the image is no longer centered.

13

Yay!I fixed one thing!

14

Only three things wrong now! Your tips are helping me so much! Thank you so much nhcarrigan!

15

I am glad I could help!

1 Like