I try to back up my codepen using export, but get a couple different file types for all my code. Also no bootstrap carries over, along with the fact that it doesn’t even look like my codepen. It backs up my html code by copying it, opening a blank page and pasting it, then giving you the link. I try to access my JS code but it just freezes and crashes. My css code is the only thing that backs up as a legit text file. Is there anyway i can just back it up, and it look the same as on codepen? Like it converts my html so it looks exactly the same on a real website as it does in codepen (with my bootstrap). It backs it up as 3 text files, and then there is a “master button” that opens all 3 up at once and activates it/ runs it. It should only ever go to the internet if i call a api. Do i sound idiotic or does this make sense? It doesn’t have be like this, just as long as it converts the html w/ bootstrap and i get 3 text files or some way of accessing it freely.
You should get a zip file containing all your files.
Unzip the file you get from codepen, and then open the index.html file in the unzipped folder.
It should be as simple as that - I’ve never encountered a problem exporting from Codepen.
Yeah but it opens it up in google and the boostrap isn’t even carried over. I also want mine to be offline, and on readable text files. I cant even copy and paste my JS code if i need too.
Weird that it isn’t working for you. I just hit download zip. All of my files are in the zip and they can all be opened in my code editor. Bootstrap works and my google fonts. Can you share the source code that gets downloaded when you extract the contents of the zip file?
Can mine not rely on a code editor be accessed, This is a back up. I want a text file or something i can open and paste my code, that works.
Plus what code editor anyways?
Codepen won’t supply you with Bootstrap, either. You can either download it to your computer or reference their CDN (if Codepen doesn’t do that for you - seems like it should) [bootstrap].
This part doesn’t make any sense. Codepen doesn’t supply any software for you, just the code you’ve written. The quickest way for you to get up and running would be to download Brackets as it comes with a local server by default. Here’s a video that should get started:
Text editors open up text files so I’m not really sure what you mean by you want a text file. What OS are you on? What program are you thinking you can’t open up a JS file in that you can open up a “text” file in?
…
The only software it should write is the bootstrap or my add-ons, and when i go to open it up anywhere else it should look exactly the same (like a website).
Text file, like notepad so i can easy access my code.
Let’s take a step back to correct some misunderstandings you have here.
A website is a collection of 3 types of files - HTML, CSS, and JavaScript. You are not writing “add-ons”. When you download your pen from Codepen, you get a zip archive with just these types of files (plus some text information, but those are not a part of your website). Bootstrap is CSS and JavaScript that has been written for you, nothing more.
When you “open up” a website, your web browser is opening an HTML document which then tells the browser to open one or more CSS and JavaScript files. Codepen brings these files together for you, but you (as the programmer) usually have to write this part yourself.
Some finer points
- Codepen does not provide Bootstrap for you.
- To edit HTML, CSS, and JavaScript files on your computer, you must use a text editor.
- Notepad is a text editor. It is a piece of software that opens text files for editing.
- As a programmer, you’ll want an editor with more features like syntax highlighting and autocompletion. Brackets will work for you.
- After you download your HTML, CSS, and JavaScript files from Codepen, you can open your HTML file in any web browser and it should work (there can be some issues when doing AJAX requests).
Here’s how you can download any Codepen project. When you’re looking at the project (you can see all of the code and the preview at the bottom), click on the export button at the lower right
This will bring up a menu. Select Export .zip.
You will immediately get a download. Some browsers will give you a dialog telling you about the download, but some don’t. Check your downloads folder and it should be there. Once you find the file, you’ll need to unzip it. In both Windows 10 and macOS, you can just double click on the file. macOS automatically creates a folder for you, but extracting the files is a bit more involved in Windows. Here’s a tutorial video that will walk you through the process in under a minute. Once you’ve got the files extracted, you can go into the folder and there you’ll see a file, index.html, and two folders, css and js.
Double click on index.html and it should open up in your default web browser. When you want to edit these files, you’ll need to use a text editor like Brackets. Watch the video I linked above and it will walk you through the process of opening your project in Brackets.
Okay now i can edit my files in bracket. My thing is, is their anyway to view it instead of opening it in google? Like can i view my project on bracket?
Thanks for writing that reply, it really helped.
By Google do you mean an internet browser? Because the answer is no, in the same way you need a program that edits text to edit text, you need a program that renders out web pages to render out web pages.
Saying that, for most text editors that have plugins, someone at some point will have written some kind of previewer plugin, but literally all a previewer does is wrap a browser view, you don’t gain much from it and it isn’t very good for debugging.
Okay thanks everyone! Ill back up all my projects.