How to test any final project code using codepen orCDN link?

So when I create my HTML+CSS code for Tribute Page or any other of the final projects, how do I test them? I do not find a way to test the code within the codepen window since I wrote the code there. And the following CDN link: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js leaves me totally confused. Either of the methods does not seem to work out for me. Some help please in baby language!! Much appreciated! :slight_smile:

1 Like

Hey Tanya,

Great questions you ask btw on the live streams. So on the Build Tribute Page link when u scroll down just after the “User Story #9” text you will find this link ; using the CodePen template.
Then after when you go to this link you will have to create a CodePen account eazy pizzy, then once logged in you will find 3 separate windows where you can write HTML, CSS, JS if needed.
*To test your page you will need to click on the green hamburger menu which drops down to this:

1 Like

Great question! The CDN link method also left me quite confused. I thought I might use it as I’m coding my projects locally in VS code. Hoping I could somehow test them via the link. But I also couldn’t figure it out so ended up copying everything into the code pen template and hosting images on GitHub. 🤷

1 Like

Just add this code to your HTML page just above the closing body tag in your editor.

<script src="[https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js]"></script>

@michael-duke I created my codepen code externally without using this template and therefore I could not see the testing menu. Thanks a lot! Hopefully my questions are valuable for you too. Cheers!

@Kathrin I actually did not host the images online anywhere and ended up using what was already available online, but it is a good idea to do so on Github. This way, will also unravel the mystery that Git is!

@davidturner2608113 Unfortunately this does not seem to do the job for me. Did it work for anyone else?Maybe I am doing something wrong.

I just tried it and nothing happens. Console gives me Error 404, resource not found.

If you are using Codepen you can start with this template that FreeCodeCamp links on their project pages:
[Project Template Page]([https://codepen.io/pen?template=MJjpwO]

That script tag didn’t work in your stand alone editor? VS Code, Atom, etc.
You can add this in a link tag in the Head of the document:
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

I’ll try it. What’s the value of the rel attribute of the link though? I’m in VS code btw

It doesn’t work as a link, but it works for me placed in a script tag before the closing body tag. The other code I posted was messed up. This should work.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
1 Like

Ah yes. That worked fine now. Thanks David!

The first code I posted had extra text in it. That’s why it didn’t work.
Glad it’s working now.

This works for me too! Thanks David!

Your welcome. Glad I could help out.