How to use CodePen to create projects on your own computer?

1

I want to learn from other’s CodePen projects, but I’m a little confused about to use it.

For example, I wanted to play around with this user’s project to see how it works: https://codepen.io/FlorinPop17/pen/WEBNyx?editors=1111

I did this by copying the provided code and pasting it into my own html, css, and JS files on my computer. Everything showed up but the JS animation. I referenced JS and jQuery in my html file. Is there something I’m missing?

All code is the same except for the html, since on CP they omit everything before the body tags and any added libraries.

html:

<!DOCTYPE html>
<html>
<head>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="js/main.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link href="style.css" rel="stylesheet">
      <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>

  <h3 class="fixed">Click the letters!</h3>
<div class="word">
<span>M</span>
<span>A</span>
<span>N</span>
<span>G</span>
<span>U</span>
</div>
<footer>
<p>Created with <i class="fa fa-heart"></i> by <a href="http://florin-pop.com">Florin Pop</a></p>
</footer>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
2

You are referencing main.js and jquery twice, remove the ones from the top. Also for tags that don’t require the close tag such as link make sure you add a / before the > (ie. <link href="style.css" rel="stylesheet"/>). Always put javascript at the bottom of the body, unless you know it should go in the head.