Web Development Starter Pack

Getting started with web development is fun and exciting, but also frustrating, since you don't know what you don't know. Below are some links to many useful resources. Don't feel like you need to thoroughly explore each link; it is enough to get an idea of what's available. The web has come a long way since I started: I learned by reading an HTML 4 reference manual cover to cover and by playing around with "View Source".

Documentation

• https://developer.mozilla.org/en-US/
  It is important to read the documentation for any new tool you pick up. "The Web" doesn't really come with an instruction manual, but Mozilla has done a great job at documenting every corner of HTML, CSS and JavaScript. Their documentation is actually a wiki, so as you learn, you can contribute to fill in any (tiny) gaps.

• https://caniuse.com/
  After a while you'll figure out that each browser does things slightly differently and implements things on different timelines. CanIuse is a great documentation for all these browser diffences. (You won't need this at the beginning. Just focus on your favorite browser.)

Editors

Having an editor you are comfortable with can have a dramatic productivity boost. Your editor is your interface to your code, so take some time to find one you really like.

• https://atom.io/
  This is a great editor with many plugins. The code is open source, which means many people work on it and inspect and verify the code. First choice.

• https://www.sublimetext.com/
  Also a great editor, though not open source. I used Sublime early on in my career before Atom came along. I still use it, just not really for code anymore.

• https://notepad-plus-plus.org/ (Windows only)
  Notepad++ was a huge step up from Notepad (as is literally everything else). I used it for a long time before discovering Sublime Text, and it was a lifesaver.

• https://codepen.io/
  Codepen is more of an online scratchpad. It allows you to quickly sketch out an idea and save it for reference later.

Online Learning

Self-directed learning is fun, but many people will get more from a guided approach. If you really have no idea where to start, start with one of these. Most of these are free; I think all have at least some free content.

• https://code.org/
  Geared more towards kids, but has a low barrier to entry.

• https://www.codecademy.com/

• https://www.khanacademy.org/

• https://www.codeschool.com/

• https://meetup.com/
  Attend local user groups to find other people that are also just getting started. Meetings can expose you to new ideas and are a great way to network. Having industry contacts can make a world of difference when you're looking for work.

Code Tracking

When you first get started, copy-paste the project directory (with fancy date stamps) is fine. However after a while (this is not for beginners) you'll find yourself wanting something a bit more (ahem) robust. If/when you get to this point, you're looking for version control. Git is an extremely popular version control system with a large ecosystem. Other fine version controls are also available; some are probably better than git (Subversion isn't though).

Learning git is easy enough at first for the basic stuff, then it really ramps up. Power through it and backup your projects before experimenting. If you stick with it, eventually everyone on your team will be asking you for help, which is a good place to be.

(Graphical tools for git exist, but if you really want to learn it, learn the command line interface.)

• https://git-scm.com/
  This is the official website. Spend some time here, especially the documentation.

• https://github.com/
  Sign up for an account, and you can share your code with the world (it will be publicly viewable unless you pay them). Don't be afraid to put obviously beginner code up. Everybody was a beginner at some point.

• https://git-scm.com/downloads
  Your operating system likely has a preferred way to install git, so you may not need this. (Use HomeBrew on macOS.)

• https://gitforwindows.org/
  Git (and other CLI tools) might be tricky to install/use on Windows.

• http://gitvisual.com/
  A nice way to "dip your toe in" before even installing git

• https://www.sbf5.com/~cduan/technical/git/
  Git asks for a lot when you're getting started, but having a solid understanding will go a long way. This post is pretty technical, but so are you.