freeCodeCamp backend code


With jQuery instead of having the code to run jQuery in the back ground should show how to place the code in the html header to run from our own text editor…
If you do not learn this how can you build pages to upload to a server??


That’s not the backend, that’s still the frontend.

But yes, that is right, if you write all your stuff on codepen, then there are a few things that aren’t clear about how to actually set up a web page.

But most of that stuff is pretty easy to learn and is readily available.

The other option is to let codepen do it for you. In in editor view, there is a button called “export”. From there you can select “export zip” and it will give you a zip that will self deploy all the properly built files.


Went to codepen under js settings selected both the jQuery and kQuery UI. Neither worked on the script. Downloaded jquery-3.2.1.min.js also downoaded the css animate.css… This is what I plased in the head on html. Nothing is working for me.

jQuery Playground



Please provide a link to the pen and tell us exactly what you are trying to do.



There is a ‘JS’ panel, that’s where you put the JS, then it works.


Went to the JS panel. Clicked on the settings added
neither worked on codepen.
Downloaded jquery-3.2.1.min.js added it to my html in my own text editor.

bootstrap works not jQuery


Setting up a page in codepen differs from setting everything up locally. Remove your <script> tags from your HTML and place your JavaScript code in the JS Panel. It should look like the screenshot below:

You have your CSS settings set up correctly. Your JavaScript settings only need jQuery (not jQuery UI).

If you were setting this up locally (outside of codepen), you would have everything in your HTML like:

<!DOCTYPE html>
  <title>CodePen - A Pen by Don Shipley</title>
  <link rel='stylesheet prefetch' href=''>
    /* Add your CSS Styles here */
  <!-- Only change code above this line. -->
  <div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
    <div class="row">
      <div class="col-xs-6">
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1">#target1</button>
          <button class="btn btn-default target" id="target2">#target2</button>
          <button class="btn btn-default target" id="target3">#target3</button>
      <div class="col-xs-6">
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4">#target4</button>
          <button class="btn btn-default target" id="target5">#target5</button>
          <button class="btn btn-default target" id="target6">#target6</button>
  <script src=''></script>
    $(document).ready(function() {
      $("button").addClass("animated bounce");


I highly recommend what @SkyC says. However, if you insist on putting all your code in the HTML section, then remove the external links in the JS section add the script reference above your current script tags and it will work.

<script src=''></script>
  $(document).ready(function () {
  $("button").addClass("animated bounce");


Thank you for your help…


Thank you for your help


As they’ve said, those script tags shouldn’t still be in the html window, they should be in your JS window as:

$(document).ready(function () {
  $("button").addClass("animated bounce");
  $("#target1").css("color", "red");

and then remove the first 5 lines of your html pane (the script tag).

Yes, you could put your JS in you html file if you were building this locally (or just use a script tag to link to a JS file) but that isn’t how codepen does it. And like I described above, codepen will easily convert it for you when you need to copy it to local.

Codepen isn’t perfect. But for quick and dirty stuff like your building for FCC it is great. And it makes it so easy to get help from the forum. But do things the codepen way when you’re using codepen - you’ll save yourself some hassle.