freeCodeCamp vs CodePen

On the lessons in free code camp, the HTML, CSS and Javascript are all placed in the same HTML code editing window. The CSS is smply placed in a style element and the javascript is inside a script element.

In CodePen, there are three separate code editing windows, one for HTML, one for CSS and one for JavaScript.

I would like to make my entire website in one single HTML window and use style elements and script elements for the CSS and JavaScript, but as of now, that doesn’t work on codepen. CodePen requires me to use the three different sections.

Does anyone know how to change this?

I would like to be able to recreate scenarios on CodePen that are 100% identical to freeCodeCamp, with all of the code in the same window, with a style element and a script element for the CSS and JavaScript, instead of three separate windows.

If you insist on doing it that way, just enter all your code in the HTML box.


<script>
  alert("Hello");
</script>

<style>
  .red {
    color: red;
  }
</style>

<p class="red">I'm Red</p>


1 Like

javascript will not run inside the html window, even inside a script element.

I tested code I posted above. It runs

I cannot get any jQuery to work, in the HTML window inside a script element. I have jQuery turned on in the javascrit window. Perhaps I need to somehow manually include the jQuery library on the HTML window, because perhaps codePen doesn’t include it into the HTML window?