Updated 25/3/2021
CodePen is fantastic for testing and experimenting with HTML and CSS. It is also great for documenting and sharing your work. At some stage though, you will want to move that work to a local environment to continue your development. By ‘local environment’, I mean your own computer. You will want to download the HTML/CSS you’ve perfected in CodePen and prepare it to be deployed to a public server, or combined with other content to complete your website.
It’s pretty easy to move development from CodePen to a local environment. Although it is possible to use nothing more than a text editor link notepad to edit your code, a code editor will get you much more flexibility and many more helpful features. One of my favorite code editors is Brackets. Brackets is free and open source. It is very easy to download and install on both OSX and Windows.
Update: Adobe has discontinued support of Brackets. I’m using Visual Studio Code at the moment. Feel free to use the code editor of your choice.
A dedicated code editing tool speeds up your workflow by offering code hinting, auto tag closing, and even live preview. A live preview shows you code changes in Chrome as you’re writing. There are also heaps of extension that can be added on.
To download your HTML and CSS from CodePen, you click the Export button at the bottom right of the CodePen interface. You will be offered the choice of downloading a zip file.
Once you have unzipped the package, you’ll notice two folders in the directory. The src folder contains files with code as written in CodePen. The dist folder is compiled versions of your work. CodePen adds in HTML structure and document links.
If you open the dist files in a code editor, you’ll notice that there are stylesheet links and a doctype added. From here you can continue to edit your work with files on your computer hard drive.
You can check out my previous video about CodePen to Brackets here. Still might be useful if you decide to continue using Brackets.
