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
- Front-End Development
- HTML and CSS
- Deploying Front-End Websites
- Bootstrap
- Basic JavaScript
- Functional JavaScript
- Manipulate the DOM with "Vanilla" JavaScript
- Manipulate the DOM with jQuery
- Manipulate the DOM with React
- Regular Expressions
- JavaScript Challenges I
- JavaScript Challenges II
- JavaScript Challenges III
- Intermediate JavaScript
- Back-End Development
- Negotiating Job Offers
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
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.
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 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
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 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
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)
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
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
- Free - 53 Lessons, 33 Exercises, 4 Quizzes, 9 Projects
- Codecademy - Learn JavaScript
- Free - 8 Units, 16 Lessons (10 hours)
- Paid ($20/Month) - 9 Quizzes, 1
- Udemy - The Web Dev Bootcamp / Units 8-12: JavaScript
- Paid ($35 Course) - 54 Lessons (6 hours), 19 Exercises
- YouTube / EJ Media - JavaScript Tutorial for Beginners / Lessons 1-24
- Free - 24 Lessons (1.5 hours)
- Code School - Discover DevTools / Unit 3: Console
- Free - 3 Lessons (6 minutes), 11 Exercises
- Code School - Discover DevTools / Unit 4: Debugging
- Free - 3 Lessons (7 minutes), 9 Exercises
- James Padolsey - Truthy and Falsey
- Free - Blog Post
- Wikipedia - Immediately-Invoked Function Expressions
- Free - Blog Post
- 2ality - Initializing an Array with Values
- Free - Blog Post
- Stack Overflow - Is 'switch(true){...' valid JavaScript?
- Free - Tutorial
- Douglas Crockford - Code Conventions for JavaScript
- Free - Blog Post
Using functional programming is one of those weird things in programming that's actually more easily done than described.
Most of what FP means (at least early on) is using functions to iterate through arrays, rather than writing loops all over the place. It's more readable, and less error-prone.
- Mind About JS - The Three JavaScript Musketeers
- Free - Blog Post
- Youtube / Funfunfunction - Functional Programming in JavaScript
- Free - 12 Lessons (2.5 hours)
The DOM is another concept that sounds scarier than it is.
The Document-Object Model is just the content of a webpage, parsed into an object so that JS can read and manipulate it.
- Udemy - The Web Dev Bootcamp / Units 13-14: DOM Manipulation
- Paid ($35 Course) - 15 Lessons (2.5 hours), 4 Exercises
- Udemy - The Web Dev Bootcamp / Unit 15: Color Game
- Paid ($35 Course) - 9 Lessons (3 hours)
- YouTube / EJ Media - JavaScript Tutorial for Beginners / Lessons 25-51
- Free - 27 Lessons (2 hours)
jQuery is a JavaScript library that primarily enables DOM manipulation with more tersely-written code.
- Codecademy - Make an Interactive Website
- Free - 5 Units, 5 Lessons (5 hours)
- Codecademy - Learn jQuery
- Free - 5 Units, 5 Lessons (3 hours)
- Paid ($20/Month) - 5 Quizzes, 15 Projects
- Udemy - The Web Dev Bootcamp / Units 16-17: jQuery
- Paid ($35 Course) - 12 Lessons (2 hours), 1 Exercise
- Udemy - The Web Dev Bootcamp / Unit 18: Todo List
- Paid ($35 Course) - 9 Lessons (1 hour)
- YouTube / EJ Media - jQuery Tutorial for Beginners
- Free - 43 Lessons (2.5 hours)
React is a JavaScript library that primarily enables creation of Single-Page Applications (SPAs).
- YouTube / Delba de Oliveira - Getting Started with React (Next.js Conf 2021)
- Free - 1 Lessons (0.25 hours)
Regular Expressions (Regex) are a way to easily parse some text and find all the places that match a given pattern.
For example, matching all the email addresses in a string, or all the 5-letter names starting with "Ja".
- Stack Overflow - Learning Regular Expressions
- Free - Overview
- RegexOne - Regex Lessons
- Free - 16 lesssons, 8 Exercises
- Regexr - Learn, Build, and Test Regex
- Free - Reference, Cheat sheet, interactive sandbox
- Regex Crossword - Regex Puzzles
- Free - 10 difficulties, 55 challenges
- JavaScript Kit - Regular Expressions Methods and Usage
- Free - Cheatsheet, 6 functions
- Regex Guru - Replacement Text Syntax for JavaScript's String.replace()
- Free - Blog Post
There are all kinds of useful topics that come up on Code Wars exercises.
- Code Wars - 8 kyu / Fundamentals
- Free - 161 Challenges
Seeing everyone else's solutions (and discussions about them) is a great way to pick up new concepts and tricks.
- Code Wars - 8 kyu / All Remaining
- Free - 39 Challenges
- Code Wars - 7 kyu / Algorithms
- Free - 190 Challenges
Code Wars includes support for the newest features in JavaScript, and it's also a great place to learn about writing Test Cases.
- Code Wars - 7 kyu / Remaining Fundamentals
- Free - 303 Challenges
JS definitely has some interesting and potentially-confusing quirks, but learning about them is very satisfying.
- YouTube / LearnCode.Academy - JavaScript is Weird... and AWESOME
- Free - 5 Lessons (0.5 hours)
- YouTube / Java Brains - JavaScript Scopes and Closures In-Depth
- Free - 23 Lessons (2.5 hours)
- YouTube / Java Brains - JavaScript Objects and Prototypes In-Depth
- Free - 19 Lessons (2.5 hours)
- YouTube / Tony Alicea - JavaScript: The Weird Parts (Preview)
- Free - 31 Lessons (3.5 hours)
- Udemy / Tony Alicea - Javascript: The Weird Parts
- Paid ($19 Course) - 80 Lessons (11.5 hours)
- Ryan Morr - Exploring the Eternal Abyss of Null and Undefined
- Free - Blog Post
- 2ality - Apply and Arrays: 3 Tricks
- Free - Blog Post
- Cool Coder - Everything You Need to Know about JavaScript Scope
- Free - Blog Post
- Nathan Friedly - Objects, Arrays, and Array-Like Objects
- Free - Blog Post
- 2ality - Tail Call Optimization in ES6
- Free - Blog Post
- Todd Motto - Mastering the JS Module Pattern
- Free - Blog Post
- YouTube / Kyle Robinson Young - Mastering JavaScript Callbacks
- Free - 1 Lesson (15 minutes)
"Back-end" largely refers to gathering and assembling information on the server side, before sending it to the browser to be displayed.
The archetypical back-end pages are those that users can log into, and which store a lot of information about its users and their activities. For example: Facebook, Reddit, and Yelp.
Webpages which require a server are basically too complicated to be deployed the same way as a simpler front-end page.
Heroku and similar services can host server-side projects (also called "apps") and serve them to users.
- Udemy - The Web Dev Bootcamp / Unit 38: Deploying
- Paid ($35 Course) - 6 Lessons (1 hour)
JavaScript was originally only usable inside the client of a web browser. Node sets it free for use as a server-side language.
Express is a JS framework that makes it possible to write a server-side Node app more simply and tersely.
- Udemy - The Web Dev Bootcamp / Units 22-25: Node & Express
- Paid ($35 Course) - 26 Lessons (5 hours), 4 Exercises
- dargaCode - Custom EJS Delimiter
- Free - Blog Post
MongoDB and other databases are the main way that sites store data permanently, so the data won't be reverted every time the program restarts.
For example: Facebook friends lists, Netflix queues, and Reddit comments.
- Udemy - The Web Dev Bootcamp / Units 26-31: Databases
- Paid ($35 Course) - 32 Lessons (6 hours), 1 Exercise
- Udemy - The Web Dev Bootcamp / Units 32-36: YelpCamp
- Paid ($35 Course) - 26 Exercises (5 hours)
The earlier in your career that you can become comfortable negotiating, the more successful and well-compensated you will be.
- Penelope Trunk - 4 tips for salary negotiation
- Free - Blog Post
- WorkMonger - 6 steps for negotiating your next job offer
- Free - Blog Post
- Harvard - BATNA essentials
- Free - Blog Post
- Interviewing.io - What to say when recruiters ask you for a number
- Free - Blog Post
- Haseeb Qureshi - 10 rules for negotiating, part 1
- Free - Blog Post
- Haseeb Qureshi - 10 rules for negotiating - part 2
- Free - Blog Post
- Patrick McKinzie - Make more money, be more valued
- Free - Blog Post