⌨️ Convert to “Real” Website

With all that setup out of the way, we can finally start converting our CodePen website to a “real” site.

The first step is to make a new folder on your computer to hold all our project files.

Next, open GitHub Desktop and add this folder as a new repository (“Add local repository”).

Next, let’s open this new folder in Atom. You should see nothing inside your folder except for a file called .git. You can ignore this.

That’s all the setup we have to do, so let’s start writing some code!

You’ll need to make new files for each of the code sections from CodePen. For example, if we used all three sections in CodePen (HTML, CSS, and JS), we’ll need to make three files:

• index.html – this is your HTML code
• style.css – this is your CSS code
• yourproject.js – this is your JS code

In the last two files, CSS and JS, you can simply copy and paste your code from CodePen. However, for the HTML code, we’ll need to make some changes.

Every HTML document starts with a few things: a DOCTYPE, a head tag, and a body tag. That’ll look something like this:

Go ahead and add this code to your index.html file.

Once that’s added, you can copy and paste all the HTML code from CodePen into the body tag of this new file.

In the head tag, you should add the following items:

• Your website’s title
• A link to your stylesheet

Then, lastly, we need to link our Javascript file — similar to how we linked the CSS file above.

Use a <script> tag, with the src set to the name of your file. Place this just before the closing </body> tag.