Setting up a new html page in codepen.io

html-css

#1

Hi, I’ve been using codepen.io for practicing code but one thing I’ve had trouble with is setting up multiple html pages so that I can program code on multiple pages. I’ve followed all the steps outlined in codeacademy and looked at the notes and material over and over again. Anyone able to give me any advice on how to create multiple html pages on codepen.io?


#2

using projects:

this should be possible, don’t use a pen, then you can only work with the files provided

Personally, if the projects grows in size i prefer to set up my development environment locally, so you can choice tex-editor/IDE and customize to your needs.


#3

Yes, but how do you go about creating multiple pages? Like what’s the code that you use step by step? If you have to create a file, how do you go about creating the individual files? Is it not possible to do it using code.io because I’ve looked everywhere on the site but it doesn’t seem like it’s possible. Do you have to use wordpress in order to do it?


#4

i can only have one project on codepen, but once i select the project there is literally this in the left column:

Screenshot_2017-11-21_19-09-22

where i can drag and drop files to upload, or click the buttons to create new files and directories

no, you don’t have to

I would recommend you to download atom:

this allows you to create multiply files (under file menu, select create new file), save it on your computer, use this as basic to set up your own personal projects, much better once the projects grows in size then all this online tools


#5

Ok thanks. So is the reality that codepen.io is extremely basic and that you can’t practice setting up multiple web pages on it?


#6

codepen was never designed to host a website, so no, its not recommended.

check here:

there are some good tips and resources there which include get your website together:

and hosting on the github pages, which requires git (git bash can be installed for windows)


#7

I’ve checked out atom. Good you can work on multiple pages but unfortunately when I type out the code, there’s no way I can see what the code would look like on a real web page. Is there any way to do this?


#8

yea, you can just open the files with your web-browser (firefox or chrome). The only difference is that now the file is stored locally at your computer (and not on a remote server), the loading time is far less

just save the file, refresh the page in the browser and voila :slight_smile:


#9

Ok, but the problem ive got at the moment is that i only have a few files up but no browser, no page, so I cant see anything displayed.


#10

but once you made the html file, you can open file explorer, navigate to the created file, right click the file and select: open with your chrome (or FF, or whatever browser you prefer), just like you would do with any other file


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.