Using codepen.io with freecodecamp.org projects?

It looks like freecodecamp.org used to be more integrated with codepen.io? I like that interface better for working through the projects. Is there still a standard way to do this?

As far as I am aware of, the front end certification projects still require the use of Codepen and is still linked to it. As for the projects themselves, the editor on FreeCodeCamp is actually really impressive. Though if you still wish to use Codepen while following the lessons, you could follow along with your own personal Codepen project.

1 Like

I am assuming you are referring to the certification projects, right?

If so, then you can build out the certification projects in whichever editor you like. Then you can copy that code into the fcc editor

Other online options that don’t require setup or installation would be replit, codesandbox, stackblitz, etc.

Offline options where you need to install some software would be VS code, atom, brackets, etc.

The frontend libraries and d3 certs still use that as an option because those certs haven’t been updated yet.

There is no standard way to do this.
The fcc editor is the default, but you can build your projects out in your editor of choice and then copy the code over to the fcc editor to pass and submit the code.

codepen was chosen for the legacy certs because it is free to use and super easy to get started with.

hope that helps

2 Likes

As far as I am aware of, the front end certification projects still require the use of Codepen and is still linked to it.

Does this include the Responsive Web Design survey form? I didn’t see any requirement or link to use Codepen.

As for the projects themselves, the editor on FreeCodeCamp is actually really impressive.

In what way? Is it more than a text editor?

Though if you still wish to use Codepen while following the lessons, you could follow along with your own personal Codepen project.

I’m using VS Code a bit for this. Just curious, is there integration to take the courses completely within VS Code?

Also fyi, signed up for the 30 day free trial for GitHub Copilot (AI interface) extension for VS Code. Phenomenal for learning. I’m sure I’ll continue to pay $10/month for it.

1 Like

I didn’t see any way to use the fcc editor with the Data Visualization projects. Codepen doesn’t work on my smartphone. Is there a way to actually use fcc or what other editors can properly be used to complete and submit the projects?

The issues I have are

  1. Only with the HTML, Codepen is not putting the code into the code window. It only inserts a line feed.
  2. Codepen gives no feedback about errors in the code.
  3. The console doesn’t display anything.
  4. The HTML file is saved as index-(preprocessor name).html. I think codepen might be looking for a plain index.html.
  5. Sometimes Codepen goes to a fake code window, where there is part of my .css file showing under the top buttons on the left side and there are non-responsive buttons.

I hope this clarifies the situation. Thank you for your help.

The Data Visualization projects only allows URLs for the submission. I would suggest you post your Codepen. If you are using the template link, you might try turning off the JavaScript Preprocessor. Click the cog on the JS code box and under the settings set JavaScript Preprocessor to “None”.


Technically, any URL will work, and you are responsible for submitting a URL with passing code. There is no test on the submission.

You can code it locally and submit a hosted version on a free host like Netlify, Surge.sh, or GitHub pages. And as suggested there are other online editors like Stackblitz and Codesandbox you can try as well.