Setting up your Dev Lab/ contributors welcome

This might be way too basic - seasoned developers welcome ! But I thought a beginner guide would be welcome. Also delete this sentence when this article starts taking shape !
I won’t refer any link because it’s from memory - but you can imagine it all comes from the usual suspects.

About Codepen

  • Pros

  • great for quick essays, tweaking, etc.

  • It’s easy to share a page and look at the code and fix it directly.

  • Cons

  • Do you know how to link your css, js, html correctly?

  • Do you understand what’s really going on in the head tag for example?

  • Not for giving evidence of your professional skills.

Get an editor

It’s not the time it takes to download and try so go ahead and pick the one you like best.

-(wondering how to start your html? There’s a quick boilerplate to get you started here)

It’s also a lot more comfortable to work your code on a full screen.

Getting started with Javascript?

There is repli/it where you can code and do all the console.log() you want to understand what’s going on. Also for lots of other languages. (Sometimes your code will work on repl/il but not on FCC… You might want to start using strict mode then?)

Start with Github

Github allows you to work locally, then push your project to Github where the code can be looked up, corrected, commented by others without ever affecting the original project (also on Github) if you want to. Great for collaboration (and so open-source work).


  • Github Pages
    You can “deploy” your project like a real website by going in the settings of your repository (the little gear). That being said, several campers like /recommend to host your files on Github (for collaboration, safe-keeping, etc…) and…
  • Surge (super easy!!)
  • Heroku (to set up Heroku: Wiki here)

For example with Surge you can set up your own domain etc for every project you want, from the command line and it is really easy.

Don’t sweat it! If you need to download one thing or another, you will be asked to along the way (like npm/node.js for example).


Rather than composing from bits and pieces, you might want to go right away for a full IDE which is exactly what this article is supposed to target (Integrated Development Environment).
Simply googling that up will give you Webstorm, NetBeans, Eclipse…
(you’re welcome to add more info than that…)


Solid. The above is solid.

No one lynch me but consider a real IDE like webstorm. I LOVE but WebStorm is a solid investment. I pay <.05$ an hour of use and it has this week saved me about 4 hours with the command y tool.

I think you should add at least Atom and Visual Studio Code in the editors section.

Done. As for WebStorm (@CarlJKashnier) could you maybe add something yourself? For example on other IDE as well as another point in the article ? I don’t anything about that …

1 Like

Chris Pederick’s Web Developer Extension comes to mind as an excellent tool. In particular, the “View Responsive Layouts” option is very helpful. It basically simulates how your page would look on various mobile devices.

1 Like