Help and support for assignment: Creating Hyperlinks: Test your Skills Tasks 1 and 2 (HTML)

MDN Learn
,
#1

I am having some trouble completing a couple of my assessments involving how to link to images and files via file directories using HTML.

For the first part of this assignment, I am asked to link to a page called whales.html , which is in the same directory as the current page.
The link to my coding page: https://codepen.io/checkplz3432/pen/QWNMmJK

Here is the page I created:

Information on Whales

For more information on our conservation activities and which Whales we study, see our Whales page.

If you want to ask our team more questions, feel free to email us.

When I click on my "Whales page" link, this page pops up. ![Screenshot (23)|690x326](upload://Pu8dSNwWTQXT8vunnFrTOeYeBP.png) I require assistance to see if I am not inputting my code correctly, or if the coding site I use has an error or bug. I have just started using CodePen, so I am not entirely sure yet how this website will work for me and my coding class.
#2

Hi there @CheckPlz3432, and welcome to the community!

So, looking at your code, you’ve got it right. I’m assuming you checked it either on your local computer, or in the editable code window in the assessment page? The trouble with putting it on codepen in this case is that codepen doesn’t have a whales.html page in the same directory as the main code editor page, so when you click on the link you’ll get a 404 (not found) error.

But your code is correct.

#3

Thank you, sir. I appreciate your feedback on my problem. Going forward, should I use a different program (coding sandbox) that isn’t CodePen? If so, what would be your recommended coding software?

#4

@CheckPlz3432 With any online code sharing program, you’ll get the same problem, unless you use one where you can manually edit the file structure to create the whales.html file and then link to it. I don’t think it matters that much at this stage, as long as I can see that you’ve got the link code correct in principle.

If you do want to go that extra mile and get it working, then I’d recommend:

  1. Putting the example in a GitHub repo and then creating a live, shareable version using GitHub pages (or use some other similar site; GitLab also has the same functionality, for example). Git is an essential tool for web developers, so you’ll need to learn it eventually, anyway.
  2. Putting the example on Glitch. Glitch has the advantage that you can control the whole file system, and you can also create server-side components using Node.js — useful if you want to start learning about server-side code.