“Where is the best place to learn web development?”

Here’s how to find the best resources for Web development based on your specific needs, which will vary pretty radically depending on what you are building and want to accomplish. This is because web development is becoming synonymous with software development. You could make the strong case that web development is all you need for most applications you would want or need to make that have a graphic user interface. This leaves a rather broad range of different applications which I categorize to help made the decision of what to learn and where to learn it.

But First …

Understand what “modern JavaScript” means and why you should usually never code in anything less than ES6(2015). Particularly, you should never use the following despite how many times you see them used everywhere:

💎 Seeing tutorials and learning resources that heavily use var is a sure sign of outdated content. var is widely acknowledged to be defunct and dangerous — particularly for young coders.

You really should get comfortable using a development environment so you can apply what you learn from these resources. If you don’t have the luxury of setting one up (or don’t have access because you are in school or something) you can consider any of the following online web development environments:

Step by Step

  1. Before you do anything else you should complete the tutorials on the Mozilla Developer Network. While they are not nearly as good, you can also to the Introduction to HTML and Learn CSS interactive tutorials.

  2. Consider signing up for https://freecodecamp.org and getting started right away. You can complete it all, which will take thousands of hours, or you can work on it as you continue to work on your own projects (discussed below).

  3. Then you should setup your own custom domain and download a template to work on. This way you are working right away with professional Web code as you tweak it for your needs. You will learn tons as you research what is happening in the template and how changing the template affects your site.

  4. Now create a minimal responsive site from scratch — preferably one that you need or someone else needs.

  5. After you complete a simple site, try to make a basic canvas game without using any frameworks.

  6. Then make a game using the Phaser3 framework to improve your JavaScript event programming.

  7. Now complete the VueMastery course and create your first Vue web app. [Don’t waste your time on React at this point.]

  8. And finally create a Vue app that is also a Progressive Web App suitable for submission to the Google App Store.

  9. If you want something more challenging combine a canvas framework like Phaser3, Pixi.js, or Babylon.js with Vue and make a PWA out of it.

  10. Now you need to learn Node.js if you haven’t done so already. I personally recommend https://freecodecamp.org for as much as possible. They have a proven track record of getting people real development jobs without paying a penny.

  11. Ultimately you will also learn Node.js or Go as well and combine all your learning to create an Electron desktop application.

References

  1. https://developer.mozilla.org
  2. https://codepen.io/
  3. https://css-tricks.com
  4. https://caniuse.com/

Less desirable: