Using alternative services to host FreeCodeCamp Frontend projects?

Hi campers,
I was wondering if developing my FreeCodeCamp projects (tribute page, calculator, etc) via github pages rather than Codepen is acceptable.

Codepen is fine and super easy to get started with, but I like github pages more for a number of reasons:

  • You can use your own workflow and tools to complete the task
  • Less limitations than codepen in terms of using assets or splitting you code into multiple files
  • Closer to a real work environment

Reasons against using Github Pages I can see:

  • Codepen simplifies projects by having them all in one spot.
  • Git and Github pages have prior knowledge and experience required to use them. Codepen makes it really easy to just get started.

This post honestly isn’t a complaint about anything, merely an enquiry.


edit: @rickstewart cleared this up below with a quote from the about page:

##Do I have to use CodePen for the front end projects?
As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

4 Likes

I wonder the same thing. I don’t really think anyone will care where it’s hosted and, whilst I haven’t tried it, I’m guessing that the link you paste into FCC to complete a challenge could be a link to anywhere.

My main reason for wanting to use GitHub is for versioning. It’s somewhat surprising to me that the FCC curriculum asks you to sign up for a GitHub account, but then doesn’t get mentioned again until you get to the Backend Course.

CodePen is super nice for rapid prototyping and trying out ideas. It would be awesome if they had better support for GitHub other than just creating Gists. Or, it would be awesome if GitHub had its own code editor.

2 Likes

I submitted my tribute page and its hosted on Github pages. You can get to it through my FreeCodeCamp Profile so everything seems to work. I developed it first in codepen, then I downloaded the zip. I did the bulk of the work with atom and jekyll on my own computer.

I guess github has their own code editor: atom. It’s not web embeddable as far as I know and I’m not sure how a full featured web embedded editor would work with versioning.

2 Likes

That’s true @MolarAmbiguity, Atom is indeed Git’s own editor. Considering that it (a) already includes Git functionality, and (b) it’s basically a web app already, it’s probably not too outrageous to think they would integrate it directly into GitHub at some point.

1 Like

@MolarAmbiguity this is a quote directly off the FreeCodeCamp information page: quote

Do I have to use CodePen for the front end projects?
As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

8 Likes

Well… I feel kinda stupid now. Thanks for clearing that up. I though I’d seen something about it before, but couldn’t find it in any of the project pages or videos. Once again, thanks.

1 Like

Holy Moly, don’t feel stupid! Doing something like FreeCodeCamp is pure Information Overload and there is no way you can keep it all straight. That is where the community comes in, to fill in the blanks when we can’t find, or can’t remember, or are having an old-timers moment! - last one is me… ; )

4 Likes

The main issue with CodePen I am having as a free user is no image uploads. Only images that you have hosted on the web can be linked to. Pro users get image storage and uploads. There are many options out there of course to simply store images of course, but it adds another step. Cloudinary is a good one I heard about recently, as well as Amazon Web Services (AWS) S3. If anything AWS would be overkill at this point, but just for the learning I may try it out for the 12 months free trial.

I have been using Atom since last year when it was still 0.x version. I have watched it improve and now I don’t use anything else except IntelliJ for Java. GitHub has big plans for Atom and it shows with the constant improvement. Extensions exist to integrate Atom closer with GitHub as well.

I agree that FCC could be more flexible with project upload, especially as other options besides CodePen exist. I would like to use GitHub once in awhile just for practice. But on the other hand CodePen has some really nice formatting and settings for learners like us!

1 Like

For me :slight_smile: , codepen and github are so fundamentally different in their presentation, usage and purpose it’s hard to compare for hosting FreeCodeCamp projects.

While Github excels in versioning as code repositories, it can’t demo static and dynamic codes like codepen does. How can we play, run or show our running codes using Github like codepen does? However, at the bottom right of our pen, we can click export and save as Github gist the pen.

I understanding the reasoning behind closer to a real work environment with using github, that’s likely to mean the developer is using his own tools, but the crux is showing front-end web development projects. So yeah, I’m glad FCC uses codepen. Ever re-visited an uninteresting Github page wondering what it can offer? Codepen can grab our attention and show directly how good a pen is at first glance. That said, I think we need both to be a full-stack developer. Good luck!

2 Likes

@drikting Have you used Github Pages? You push your code to a branch called gh-pages and then it’s available at username.github.io/repoName. Its not quite as responsive as codepen, but still gives you a great live demo. Its more fleixible and featureful.

The workflow I use with Github Pages is:

  • Edit site locally in my text editor
  • Preview it with jekyll
  • When I’m happy with my changes, push it to the repo on Github.

If you want to check out / debug someone else code you can just clone the repo

4 Likes

:slight_smile:

Thanks for the intro. I think I know what you mean now. It’s doable, yes. But still may not as convenient as codepen online, if one has 100 projects, for every project he has to launch offline editor and edit offline, preview with jerkyll, and once finished at every version, he should commit again - that is a lot of extra work, my opinion, and assuming jekyll has no problem preview offline with on. Also, I like to easily manage and organise my pens into collections with just a click or two. If one wants to edit an online github project, has to figure out where is the local or has to clone compared to just looking through the pens, click and start editing with all html,css,js,preview,console in one place with the libraries neatly tucked away without multiple script tags.

The codepen workflow is just to click the right pen, edit and save.

Considering github pages for projects may host a project just like codepen, it’s really good to have especially for big projects with team, and to have this as an alternative hosting or backup solution.

1 Like

I use dropbox for hosting of images while using codepen.

Upload, create the link, dont forget to change the domain for direct image access and youre done!

Last i checked dropbox offers 2GB free space.

4 Likes

@zigzactly dropbox is a great idea, especially since imgur doesn’t allow embeding.

I have noticed many people using Dropbox as well, when putting together a quick pen. Perhaps I will take a look at that, certainly it would be much easier than learning something I have never used before. :+1:

1 Like

check Prose.io Prose is a content editor for GitHub designed for managing websites. Learn more. Authorize on GitHub. Set repository access. :slight_smile:

2 Likes

This is a great idea, will try this using my dropbox. I’ve been frustrated not able to upload my images in codepen.

@stewartmurrie I name, fork and number (V1, V2 etc) my pages at Codepen for versioning.

I have all of my projects hosted on my own website. I found CodePen to be nearly unusable, so I do all my work locally and FTP to my own website.

When submitting a finished project, I just put the URL to the project on my website in the box. I have finished them all and claimed my Front End Cert, so you can certainly host them anywhere so long as they are accessible.

I had the same experience with codepen as matty22 - it is nearly unusable. I follow a similar process. Do the project locally using a code editor (Komodo Edit 10) and then upload it on GitHub. Everything works fine till here. But when I put the same code in Cope Pen, I don’t get the same output. It’s like almost having to re-do the entire project in code pen and it still does’nt work for me.
S, I have decided to dump code pen and upload my projects only on Github.

You can turn any Github repo into a Github Page - it’s literally just choosing the branch you want to display as a page - and then they give you a publicly accessible URL.

It’s pretty great workflow-wise because you can code using Atom (and all its great shortcuts) and use git to version control them, then just publish whenever you’re ready. And you can set up multiple branches if you’d prefer to have a dev branch where you’re still working and a publicly viewable version.