Getting Started Web Development Guide

There are a lot of resources online for learning all the bits and bobs to do with web developement—aka making websites or web apps. I'm sure there are lots of good ones I've yet to see but I've been wanting for sometime to collect the ones I've found useful or well done into one place. Hopefully the brief introductions will be helpful for the very new!

Jump to Frontend // Jump to Backend

General: Find Answer on Anything

Odds are you're not the first person to make a bug or get hung up somewhere—this is good! A Google search is every developer's best friend. Favor results from:

• Mozilla Developer Network Mozilla have documented near everything.
• Stack Overflow Someone who had your same problem got help and it's here.

General: Frontend and Backend

Web browsers (like Chrome and Safari) display information they receive from servers (basically computers in warehouses). Code you create to run in the browser is referred to as frontend or client side (clients are those visiting your website). Code that sits on servers to tell the server what to give browsers is called backend or server side. Sections on each are below.

General: Version Control

As you're learning about web development you're likely to come across GitHub.com. This website stores code for users that are using Git, a version control system, with their work. This is a type of system that allows you to track changes over time so that you can work efficiently, not lose work and go back in time when you've made a mistake! GitHub takes Git a step beyond by allowing you to view online the changes a project has seen (rather than reading terminal screens). It's a whole other thing to learn, however, with its own lingo, but you can do it:

• Hello World Guide A guide from GitHub to introduce you to the basic Git concepts and do them yourself just using the website.
• Git-it An app with lessons that teach you Git and GitHub on the command line (Terminal). Also, I wrote it!

General: Open Source

Open source projects are ones that are free for anyone to use. On GitHub you'll find many that fit a common pattern which means including a readme, license and contributing file. These are some resources for getting the lay of the open-source-project land.

• Contributing to Open Source A GitHub guide on the basic elements of open source projects and community.

General: Command line

Resources for using your computer's Terminal (or Bash) to complete tasks (copy files, move around folders, use git..)

• Command Line Tutorials & Basics by @jessicard

Frontend: HTML, CSS, JavaScript & Design

Browsers understand HTML which organizes elements of a webpage, CSS which styles those elements and JavaScript which enables interaction. I'm also including here a section on design resources and inspiration.

HTML & CSS

• Screencasts on design and front-end development by @mrmrs_
• HTML & CSS by Shay Howe
• Learn CSS Layout by @boucoup
• WTF, HTML and CSS by @mdo
• WTF, forms by @mdo
• Code Guide by @mdo

Design & Assets

• Unsplash Free high-res stock photos by Unsplash
• Designer News by Layervault
• Typeography Cheatsheet by Typewolf

Markdown

• This is Markdown by @planetarycorp
• GitHub Guide to Markdown

JavaScript

• JS for Cats by @maxogden
• Eloquent JavaScript by Marijn Haverbeke
• Learn JS Data by @boucoup

Backend: Node.js

Servers can use many different types of languages, but the server side language I know is Node.js, JavaScript on a server, so my resources will relate to that.

Backend Basics: Servers, APIs

• Need suggestions for: How do servers and browsers talk? (req, res, http)
• Need suggestions for: What is an API?

Node.js

• Node for Beginners by @rockbot
• Art of Node by @maxogden
• NodeSchool Open source Node.js lessons