Students wishing to learn web development online have a number of free options to choose from. As Oregonians, we have TeamTreehouse as well. Rather than choosing just one to learn from, I believe that the resources can instead work well together and help to cover each other's weaknesses. In my experience learning web development, I've utilized codecademy.com, teamtreehouse.com, and freecodecamp.com extensively, and I've found the combination of the three to be effective in solidifying the essentials of web development.
I believe these are strengths and weaknesses of each program:
| Codecademy | Treehouse | FreeCodeCamp |
|---|---|---|
| Pros: | Pros: | Pros: |
| - instant feedback | - More thorough coverage of topics | - Lots of practical projects |
| - more practice problems | - More topics covered | - Emphasis on problem solving |
| Cons: | Cons: | Cons: |
| - Tells how, not always why | - (mostly) walks you through problems | - under-developed lessons |
| - no projects (behind paywall) | - video based, so pace is set for you. | - potentially steep learning curve |
Using this knowledge, I've found an effective strategy to be to use codecademy as syntax practice, treehouse as foundation building, and freecodecamp as a source of quick review and projects.
This learning order is, by design, redundant: repetition is invaluable to solidifying long term knowledge. If you feel truly confident in your ability, though, use your best judgement on whether or not to skip sections.
Notes: Treehouse time estimates can be very conservative, especially when there is a project involved. Freecodecamp estimates on the other hand can be much longer than it actually takes you, especially if you learn from other places first like I'm suggesting (though I think their estimates are improving). Use of resources other than these 3 is warranted and suggested in the data visualization section.
Key:
CC Codecademy.com
TH TeamTreehouse.com *paid, but free for Code Oregon Students
FCC FreeCodeCamp.com
data visualization extras:
CS CodeSchool.com
PL Pluralsight.com *paid, but with 10 day trial, sufficient for our use
YT Youtube.com
- CC HTML & CSS*
- TH How to Make a Website
- TH CSS Basics
- TH HTML Forms
- TH CSS Layout Basics * #
- FCC HTML5 and CSS
- CC JavaScript
- TH JavaScript Basics
- TH JavaScript Loops, Arrays, and Objects
- FCC Basic JavaScript
- TH Responsive Layouts
- TH CSS Flexbox Layout * #
- TH CSS Selectors *
- FCC Responsive Design with Bootstrap
- CC jQuery
- TH jQuery Basics
- TH Using jQuery Plugins
- TH Interactive Web Pages with JavaScript
- FCC jQuery
- TH Object-Oriented JavaScript
- FCC Object Oriented and Functional Programming
- FCC Basic Algorithm Scripting
- FCC Basic Front End Development Projects
- FCC Intermediate Algorithm Scripting
- TH AJAX Basics
- FCC JSON APIs and Ajax
- TH Accessibility*
- TH Website Optimization*
- FCC Intermediate Front End Development Projects
- FCC Advanced Algorithm Scripting
* potentially optional
# new and/or unevaluated by me
Notes: The next stages involve the use of frameworks to enhance your websites. FreeCodeCamp used to use angularjs, back when I was learning it, but they have since switched to ReactJS. However, they do not have any lessons on ReactJS live as of yet, nor do they have any on sass or d3 which together make the foundation of the data visualization section. While the only classes that I've found that teach React have been on Pluralsight.com, I've found that knowing angularjs has made learning react much simpler. Of course, your mileage may vary. Feel free to learn one or the other, but know that I don't know whether my current resources on React will be sufficient on their own.
- TH Sass Basics
- TH Advanced Sass *#
- CS Shaping up with AngularJS
- CC AngularJS
- YT AngularJS Fundamentals in 60-ish Minutes https://www.youtube.com/watch?v=i9MHigUZKEM
- TH AngularJS Basics #
- PL React.js: Getting Started
- PL Styling React Components #
- FCC React Projects
- TH d3.js
- PL D3.js Data Visualization Fundamentals *#
- FCC Data Visualization Projects
- TH Console Foundations
- FCC Automated Testing and Debugging
- TH Git Basics
- FCC Git
- TH Node.js Basics
- TH Build a Simple Dynamic Site with Node.js
- TH npm Basics
- TH Express Basics #
- FCC Node.js and Express.js
- TH Mongo Basics #
- FCC MongoDB
- TH Front End Performance Optimization
- TH Gulp Basics*
- FCC API Projects
- FCC Dynamic Web Application Projects