My web development learning plan

How to make a plan?

Okay so I’ll be learning web development, but where do I start? A quick search on Google for something like “learn web development” will give you about a bazillion options to choose from. It can get pretty overwhelming. And no matter how many reddit threads & articles you go through you won’t find “THE BEST” way to go about it.

Now, my methods may not work for everyone. I won’t get into the pros and cons of the different ways of learning new technologies here, because that could have an article on its own. Without further explanation, let’s see my criteria for setting up my learning path:

  • It shouldn’t cost much: College, bootcamps were out of the question.
  • I am a self learner, thus I only need an internet connection and the rest I’ll take care of: Another point against college, or bootcamps.
  • It should be the most efficient way to learn: For me that usually means a few carefully selected online courses with lots of hands-on practice
  • It should take no longer than 3-4 months: This is again specific to my situation. I already have a strong foundation in software development. I am no stranger to things like software development principles, system architecture, using git in a team workflow, continuous integration, building working software from scratch (mostly iOS apps). I am also a pretty fast learner. On the other hand I won’t spend every waking hour learning web dev during this period, since I have other things to pursue as well: working on my next product, writing this blog, building up an online presence, networking and maybe even traveling. Oh and also I’ll still have my full time job as an iOS dev for the next month so my time in the beginning will be limited.
  • It should be fun: I could read through the entire JavaScript documentation and try to memorize it but I’d probably break down crying after 10 minutes. Not to mention it’s probably not a very efficient way to learn.

The tech stack

Keep in mind that I’ll be focusing on frontend for now but I’ll cover some backend technologies as well. There are countless tech stacks to learn on both frontend and backend. I selected some of ones that seem to be the most popular, widely-adopted and intuitive to use as of now. I won’t give a comparison of different stacks but they all have their own use cases. At the end of the day, you just have to pick one that looks like a viable option for your goals and stick with it.

My tech stack:

Frontend:

  • HTML
  • CSS, SASS
  • JavaScript
  • TypeScript
  • webpack
  • BootStrap
  • DOM
  • React
  • Redux
  • Next.js

Backend:

  • NodeJS
  • GraphQL
  • npm
  • REST APIs
  • Websockets
  • Express
  • Authentication
  • Sessions, Cookies
  • MongoDB, Mongoose

The ones in bold are the ones I want to get a deeper level understanding of. They are mostly the foundations plus 1-2 popular higher-level frameworks.

Courses, resources

All the courses in the next sections are from three recognized web developer instructors: Dr. Angela Yu, Maximilian Schwarzmüller and Wes Bos. I am not affiliated with any of them, I just found them to be awesome teachers who can break down complex concepts in ways that are easily understandable. What’s equally as important to me is that they can make learning fun and not feel like a chore.

What I’ve done so far

Before I started writing this blog I already dabbled with some small projects and took some courses so I’m not starting from absolute zero. For the sake of completeness, here’s what I’ve done so far.

Courses

  • The Complete 2020 Web Development Bootcamp: Awesome course that touches a little bit on everything. It goes over some of the foundations like HTML, CSS and JS, covers both backend and frontend, and even gives you an intro into some of the popular frameworks on both platforms. Of course, the sheer amount of technologies covered here makes it impossible to get a deep understanding of any of them but it gives you a nice overview of the whole stack. After finishing this course I no longer felt like people were speaking Chinese when they mentioned something about web dev.
  • NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL): Another great course, only this one is narrower in its focus. It only deals with backend technologies, more specifically with NodeJS. Again, you won’t be ready to take on the world as a backend engineer after this but will for sure learn a lot.

Works

  • This website which is essentially just a fork of a Jekyll theme reverie with some modifications (UPDATE: this refers to my previous site, which since then I've taken down)
  • My old website which is no longer live. That one I actually built from scratch but I needed something more extensible so I pulled the plug on it.
  • All the assignments for the courses I took

And that’s about all I’ve done so far. Not a whole lot, but enough to give me some understanding of what I’m getting myself into.

What’s next

Alright onto the exciting stuff! That is what things I’m gonna learn and in what order. What comes next is simply an ordered list of Udemy courses that I’m gonna take (with only one exception).

Besides all these course, I plan to build some sites from scratch as I go along to push myself to apply the knowledge and not just be stuck in tutorial purgatory.

Courses

  1. I’ll start off by reviewing the 2 courses I’ve taken. The first one I took over a year ago and the second one a few months ago so I’ll need a bit of a refresher.
  2. CSS: Get Started With CSS (Plus Flexbox, Grid, and Sass) Before I move on to the more advanced stuff I want to really get the foundations down so I’ll start off with a pretty in-depth CSS course. As I already have some CSS knowledge, I’ll probably skip sections here and there.
  3. JS: JavaScript - The Complete Guide 2020 (Beginner + Advanced) More foundational stuff, this time it’s JavaScript. This is gonna be a tough one, as this course is massive with over 50 hours of video material. Again I’ll probably skip some of the introductory parts.
  4. JS: https://javascript30.com: Wes Bos’s JS 30 challenge, that lots of people recommended. When I’m finished with the JS course and this, I should have a pretty good understanding of JavaScript and will be ready to tackle more advanced frameworks.
  5. React: The Complete 2020 Web Development Bootcamp (React Section): This belongs to the course which I’ve already taken, with the exception of the React section which was not yet available at the time.
  6. (Optional) React: React 16: The Complete Course (incl. React Router 4 & Redux): If I am still not sick of studying yet at this point, I’ll finish it off with another loooong course. It’s possible that by this point tutorial fatigue will kick in and I’ll just be itching to jump into building sites so I made this one optional.

Other resources

  • syntax.fm: A great podcast about all web dev related things.
  • Effective_Engineer.md · GitHub: Very good notes on how to maximize your potential as an engineer. I read this every so often to check myself if I’m on the right track or I need some adjustment.
  • Learn to become a modern frontend developer: A very nicely put together roadmap for learning front end development. This was a major inspiration for my learning plan too.
  • There will probably be lots of other resources, like documentations, articles etc. that I’ll use if I need some more clarification on something.

Let’s get to it!

So there you have it, my full learning plan. As I mentioned earlier, I still have a full time job for another month and I’ll be working on other projects next to this so my progress in the beginning will be rather slow. Once I’m free of all my obligations I’ll go full speed on it.

Check back here for my weekly updates on my progress & other development related articles. And follow me on Twitter!