Need help with Tribute page project

HTML-CSS
1

Tell us what’s happening:

I believe I have the project completed, but when I hit the run tests (for tribute page, in the test suite), I get the following 5 options as incomplete:

  1. I should see either a or
    element with corresponding id=“img-div”.
  2. Within the “img-div” element, I should see an element with a corresponding id=“image”.
  3. Within the “img-div” element, I should see either a or
    element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.
  4. I should see an element with a corresponding id=“tribute-info”, which contains textual content describing the subject of the tribute page.
  5. I should see an <a element with a corresponding id=“tribute-link”, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to “_blank” in order for your link to open in a new tab (i.e. target="_blank").

Could someone please help me figure out what I am doing wrong? I don’t know what I am doing wrong. I have not included the CSS style sheet here, as I did not think it was relevant for the problem at hand.

Your code so far

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

2

The first thing that I notice is that you have put everything in the html section of CodePen. CodePen is set up in such a way that the HTML section should contain only the contents of the body tag. Your CSS should go in the CSS section.

In terms of why tests are failing, I notice that in your code there are some odd characters. In a few places there is some other character where quotes should be. I know that this is often a problem with Apple devices using “smart punctuation” and I believe it can also happen from copy-pasting from other programs that format text.

1 Like
3

Thank you, I don’t know if I would have caught that! I was initially working on this project in a Word doc, and then copied and pasted it into CodePen. I replaced the odd characters and now everything works perfectly!

4

I’m glad I could help.

I recommend using a text editor rather than a word processor. Depending on your OS, you probably have something simple like Notepad. You can also get a small, free text editor that has syntax awareness for programming languages like Notepad++, or SublimeText. Eventually you’ll probably start using something more more full-featured like VSCode but that can be pretty overwhelming at this point.

1 Like