Learning on a Code editor

Hi all,

I’m wondering if anyone has found more value from doing these ziplines on code editors rather than strictly on codepen? I have found that some of my pens do not work when I code them up in an external editor and if anyone has found a good resource to deal with the small changes between environments.


I love my local setups but FCC reviewers in the current state of the app, might have more trouble reviewing your source code if you develop locally and upload the sites to a static site hosting site like Netlify, Surge or Github Pages.

Now, if you want to be able to do the conversion between local and Codepen, I recommend the following point:

  1. All the CSS files must be copied in order and pasted in the CSS section. If you have any imports put the CSS files in the settings section that allows links to external css files; you can try rawgit for that purpose.

  2. The HTML must be copied to the HTML section but ONLY what’s inside the <body> tag. The head section has its special place in the settings section of your Pen, it even says it in the description: "stuff for <head>".

  3. Any external JavaScript like jQuery or other libraries must go in the settings section for Scripts imports. And your own javascript must go in sequential order in the javascript portion of the source code.

  4. If you have any image tags whose src that point to local files, you must upload those images to an image sharing service and point to them from your HTML/CSS/JS code.

Thanks! I was planning on using a code editor to get everything running and then move it over to codepen. This really put it together quickly for me.

Thanks again.