Having trouble with: Build Tribute Page

HTML-CSS
1

Hi guys, I’m completely new to this. I have finished the first set of tasks and now I’m in the process of building my Tribute Page, having trouble with task 1 to 5 and also 8 an 9. Not sure where to add and how to add each of these things into the Tribute Page.

I’m using codepen top build the Tribute Page.
My pen is here

Any help would be greatly appreciated, thanks in advance.
Odin.

2

@Odin, a couple of things;

  1. Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    The test script, with all tests passing, should be included when you submit your projects.

  2. When a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.
    Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

3

Appreciate you taking your time, mate.

How do I run a test?

4

Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)

  1. Since it looks like you didn’t fork the pen add the test script into codepen’s HTML editor.
  2. When you do that you’ll see a green hamburger menu in the upper left of the preview
  3. Click the dropdown and select the test script you want to run. In this case it’s “tribute page”
  4. Click “run tests”
  5. If a test fails, follow the instructions from my previous post
1 Like
5

Again, appreciate your response, mate.
I see the many errors now after running the test(s) haha.
Thank you, will work on it. :+1:

6

Ok, so now I’ve the tests passing but even though I’m now passing the tests, some how my Tribute Info link is bleeding into the first paragraph and the heading of the second paragraph making them all the external link and not the actual text that is in the code. Below is the code I have written for the external link. Any ideas?

 <article id="tribute-info">Link to external site for same information and more<a target="_blank" id="tribute-link" href="https://en.wikipedia.org/wiki/Chelsea_F.C."</a>
</article>
7

Hello Odin, first of all I noticed that you added the <script> test code including the parentheses, now they appear at the top of your page as text… delete those.

And for the broken link you should fix your html by adding a > at the end of the opening tag, and then adding some text to be showed as a link. I would suggest the following code:

<p id="tribute-info">
  <a target="_blank" id="tribute-link" href="https://en.wikipedia.org/wiki/Chelsea_F.C.">Link to external site for same information and more</a>.
</p>

As a last advice I would suggest “Analyze HTML” from CodePen utilities in the html tab. That will show you some errors on your html, including the one you’ve got with your link.
I hope this helps to improve your project!

1 Like
8

:man_facepalming:
target & tribute BEFORE the text, :man_facepalming: x100
Greatly appreciate your time and input, thanks so much, mate.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.