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.

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.)