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).
- easy start
- tutorial How to use Git and Gitub
- learn GitBranching
Deployment
-
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).
[EDIT] IDE
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…)