Web Development Study Resources

In my experience, learning how to program itself isn't nearly as hard as deciding what to study, and where, and when.

With that in mind, here's a list of the webdev resources I've found most useful so far.

The topics are ordered based on several bootcamp curricula I've gathered, as well as my own experience tackling things in what I feel was the wrong order.

There are some paid resources in this list, but I've only included the ones I've found valuable, and I've tried to mark them clearly. I don't receive any referral benefits from these resources.

Coding for Kids
Important Workflow Items
- The Command Line
- Git and GitHub
Front-End Development
Back-End Development
Negotiating Job Offers

Coding for Kids

I was 35 years old when I began my career change to coding and started gathering these resources. I'm so amazed and impressed to see people who start learning to code when they're still in elementary school!

Praxent - Coding Information and Resources for Kids
- Free - Blog Post

Important Workflow Items

Both Command Line Interface and Git/GitHub are often presented toward the end of online classes, but I learned them beforehand and I'm glad I did.

Basic knowledge of The CLI and Git can do a lot to improve day-to-day quality of life, and they both also have a lot of small tricks to pick up over months and months. For both these reasons, they're good topics to tackle as early as possible.

Checking in code and deploying real webpages also allows development outside of CodePen, Cloud9, and other online editors. Making sure that all the scripts are integrated properly etc is a lot more difficult at first, but extremely educational.

The Command Line

Typing text commands into the console seems extremely arcane at first, but becomes familiar surprisingly quickly.

It's useful for Git, Node development, and lots of other things, and honestly it also just feels cool and fun and hacker-y.

Codecademy - Learn the Command Line
- Free - 4 Units, 4 Lessons (3 hours)
- Paid ($20/Month) - 4 Quizzes, 7 Projects
Udemy - The Web Dev Bootcamp / Unit 21: The Command Line
- Paid ($35 Course) - 5 Lessons (45 minutes), 1 Exercise
dargaCode - “mkdir /data” and “mkdir data” are NOT the Same
- Free - Blog Post

Git and GitHub

Git helps prevent loss of work, and GitHub makes it easy to collaborate and share work with others.

Code School - Try Git
- Free - 25 Exercises (15 minutes)
Codecademy - Learn Git
- Free - 4 Units, 4 Lessons (2 hours)
- Paid ($20/Month) - 4 Quizzes, 8 Projects
Udemy - The Web Dev Bootcamp / Unit 37: Git and GitHub
- Paid ($35 Course) - 3 Lessons (1 hour)
Chacon & Straub - Pro Git
- Free - Online Book, 10 chapters
Roger Dudler - Simple Git Guide
- Free - Cheatsheet webpage
John Kary - "git add -p", The Most Powerful Git Feature You're not Using Yet
- Free - Blog Post
Chris Beams - How to Write a Git Commit Message
- Free - Blog Post
Tuts+ - Leveraging the Power of "git stash"
- Free - Blog Post

Front-End Development

Most simply, "front-end" refers to the content that is actually presented on a webpage. The text, the images, the colors.

For example: A portfolio website that contains a bio, links to projects, and photos.

HTML and CSS

HTML builds the structure of a webpage, and CSS dictates its layout and appearance.

I originally tried learning HTML a long time ago, and was pleasantly surprised to see that all the layout is now handled by CSS rules rather than horrible nested tables and frames.

Codecademy - Make a Website
- Free - 4 Units, 4 Lessons (4 hours)
- Paid ($20/Month) - 4 Quizzes, 4 Projects
Codecademy - Learn HTML & CSS
- Free ($35 Course) - 6 Units, 12 Lessons (7 hours)
- Paid ($20/Month) - 6 Quizzes, 16 Projects
Udemy - The Web Dev Bootcamp / Units 2-6: HTML & CSS
- Paid ($35 Course) - 52 Lessons (6 hours), 8 Exercises
YouTube / EJ Media - HTML Tutorial for Beginners
- Free - 29 Lessons (1.5 hours)
YouTube / EJ Media - CSS Tutorial for Beginners
- Free - 60 Lessons (4 hours)
YouTube / EJ Media - CSS Layout Tutorial
- Free - 19 Lessons (1.5 hours)
Code School - Discover DevTools / Unit 1: Elements
- Free - 2 Lessons (10 minutes), 10 Exercises
Code School - Discover DevTools / Unit 2: Sources
- Free - 1 Lesson (2 minutes), 3 Exercises
Luke Pacholski - CSS Diner
- Free - Game, 32 Levels
NthMaster - Master the :nth-child Selectors
- Free - Cheat sheet, 11 examples
Liquidapsive - 1 site styled with multiple layout types, for comparison
- Free - 4 examples
Learn Layout
- Free - 19 Lessons
Barely Fitz - Learn CSS Positioning in Ten Steps
- Free - 9 Lessons, interactive examples
Geddski Mastery Games - Flexbox Zombies
- Free - Game, 168 Levels
General Assembly - Build a Custom Tumblr Theme
- Free - 6 units, 60 Exercises (3 hours)
CSS Tricks - Box Sizing
- Free - Blog Post
Stack Overflow - When to use HTML <img> vs CSS background-image property?
- Free - Tutorial
Stack Overflow - How to Remove the Space Between inline-block Elements?
- Free - Tutorial
Darga Code - CSS Margin Collapsing, another dangerous "unknown unknown"
- Free - Blog Post

Deploying Front-End Websites

Deployment is putting webpages on the internet where other people can actually see and use them.

Team Treehouse - Using GitHub Pages to Host Your Website
- Free - Blog Post
Codecademy - Deploy a Website
- Free - 3 Units, 3 Lessons (4 hours)

Bootstrap

Boostrap is mainly a ton of pre-built CSS classes which can be applied directly to HTML instead of writing custom CSS.

I originally tried to learn Bootstrap before understanding CSS well, which ended up being very confusing and frustrating. Over time I've come to appreciate its usefulness for making quick prototypes etc.

Udemy - The Web Dev Bootcamp / Unit 7: Bootstrap
- Paid ($35 Course) - 11 Lessons (2 hours), 2 Exercises
Hacker Themes - Bootstrap 4 Cheat Sheet
- Free - Cheat sheet

Basic JavaScript

JavaScript is the only programming language that can reach into a webpage and modify the content of the HTML or the styling of the CSS.

This section covers its basic syntax and control structures, which must be learned first.

[Khan Academy - Intro to JS](https://www.kha

WebDevStudyResources

Install / Use

README

My Other Resource Lists