How do you design a fully functional website with more than two pages on codepen.io

1

I want to design a website with three to four pages but don’t seem to figure out how to create additional pages. Thanks for your inputs

2

This is the point where your needs exceed what codepen can do for you. Time to make the big step into coding on your machine and hosting on github or surge :slight_smile:

2 Likes
3

What @TomaszGa said–it’s totally not that hard to code locally and push to Github. Work through https://github.com/jlord/git-it-electron.
Buuut just to answer your question, what you’re looking for within CodePen is “Projects”: https://blog.codepen.io/2017/03/20/codepen-projects-is-here/

4

Thanks for your input. Now, I will need to find out how to host my pages on GitHub or Surge. Any cheats sheet for this?

5

Yes, but I just found out that you can only create one project (with a free account). :slight_frown:

EDIT: Didn’t check the article before I posted, but it also mentions this limit.

6

If I can be a little more clearer, I have been working through Free Code Camp tasks and I have reached a point where I need to horn my web design skills, this is why I need to build a fully functional website that can be used in the real world in preparation for the not-for-profit organisation website that I will eventually build. Hope you can see my point and I appreciate your input.

7

Thank you for your insightful comments. Yes, I need to spread my wings and reach out to my machine and extend beyond what I have learned from Free Code Camp.

8

I should say, to my shame, that I worked through FCC for a year without getting around to really using git and Github. Now I’ve entered a bootcamp and got it down on the first day.
The “Git-it” program I linked above is the best tutorial I’ve found for getting the basics of git. Once done, here’s the simplest cheatsheet/flowchart:

  1. make sure that you’ve got git, your command line environment, and your editor all set up nicely (running that “Git-it” program will take care of the first two, I think). I used to swear by Atom but I’ve been seduced by the quickness of SublimeText.
  2. Start a project by creating a new repository in Github. Make sure to check the “Initialize this repository with a README” option.
  3. On the next page, click “Clone or download” and copy the URL provided
  4. In the command line, navigate to the parent folder where you want to create your project (e.g. cd "C:\Users\AbdiViklas\Documents\computer stuff"), and then type git clone … and paste in the copied URL.
  5. Navigate into the folder you just created by typing cd followed by the name of the project (if you’re not sure, type ls to list folder contents)
  6. Go to work! Every time you add a file, an image, etc., go to the command line and type git add plus the name of the file you just added (unless it’s something you shouldn’t track, but that’s for another day). To save time, as long as you want to track everything in the folder, you can just say git add .
  7. Every so often, save your files, go to the command line, and type the following sequence: git commit -a -m "some description of what work you've done in this commit" and then git push origin master. (NB: I don’t think the git commit -a part would pick up on new files that have been added and git hasn’t been “told” about, so you might have to do git add . first if you’ve added any files.)
  8. You just pushed to Github! Run over to the Github page for your repo and you can see your changes. When the project is ready for prime time, click “Settings” and scroll down to the section “GitHub Pages.” On the dropdown menu, change “None” to Master, and your page is live!
9

Thanks for your reply. I will work through it

10

There is a lot useful information about git on the web and i recommend you to read and understand it as much as possible as if you don’t problems can occur, It can also arm you with errors within the code for bad sync problems.It also recommended to know how to fix those errors. To detect them you can use some programs such as checkmarx or others that might help.
Good luck.
Michael.

11

To add onto this part, you need to do a git remote add origin before you can use git push origin master. And before you can use git remote add origin, you actually need to provide your login credentials to git, otherwise it won’t know your username & password.

12

True, though the add origin is taken care of in git clone. But yes, it’s nice to get git configured with your credentials saved; see https://help.github.com/articles/set-up-git/

13

Thank you folks for your input and insightful answers.