[RFC] My Frontend Learning Plan

Nice post. Since your goal is to learn, I recommend ditch the frameworks and build a couple of apps with pure javascript. Pull in some helper libraries if you want, but otherwise stick to pure js as much as you can.

As you point out in one of your charts, the state of js frameworks is a game of musical chairs. For example, the chart doesn't point out Backbone.js. That used to be "it" framework of it's time. The point is that frameworks like React will be a relic in due time.

You will find your time better spent learning core javascript, with all its goodness and its limitations. That alone will help you judge frontend frameworks better and avoid some of these bloats.

Even for rapid prototyping I have started using pure javascript, and it is so much cleaner and quicker.

Good luck!

When you start digging into CSS checkout this post from the creator of Tailwind CSS: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

I think it does a great job at explaining the design decisions of Tailwind. It put a lot of issues I've had with CSS into words and showed how this utility-first approach solves a lot of them.

Thanks for sharing your journey! We’re somewhat on the same boat, so it’s interesting to see the path you take.

I’ve recently picked up Python and Django. Been enjoying the ride. Almost done with my certificate at FreeCodeCamp.

My plan after that is to brush up on js and tackle next.js - I’ve read so many great things about it. And your writing gave more conviction.

Followed you here and on Twitter to follow along. Happy coding! :)

I think you've got a solid plan, and a background that's going to make this easy.

JS is super simple. It's as easy as other scripting languages, with just a slightly C-ish syntax.

CSS/HTML you can definitely learn and improve over time.

I've gathered a lot about all of these in the 7-ish years since I left my job and started doing heavy frontend dev. Sometimes I regret not taking the time to learn them a little more in-depth up front, but even incremental worked pretty well.

React/Next: You're mostly right. I'd never use React (or in my case, Vue) for something that I want SEO for (like you said, static gen). Next might be a cool in-between. Never had the need to share components that much.

Webpack: Good job thinking about this. My biggest regret is never learning this, and sort of "devolving" to using pure JS. Now I've got some massive projects and realized the way I coded them doesn't make it easy to use a build system. A huge regret of mine!

Also haven't used TypeScript. I'm an IndieHacker - sloppy is fine with me until there are paying users haha.

Here's my suggestion to slightly counter what's in your plan... (you'll find this is a faster track)

*For HTML/CSS: https://youtu.be/mU6anWqZJcc CodingAddict put this together for FCC and I'll make another recommendation for him.

*For pure javascript: Complete Javascript 2020 by Jonas Schmedtmann on Udemy

You'll learn a lot about targeting elements in the DOM for the previous course in pure javascript, but you might want to find a quick course on jQuery which is incredibly easy to learn in an hour.

*React how-to: https://youtu.be/4UZrsTqkcW4 CodingAddict for FCC

*React practice projects: https://youtu.be/ly3m6mv5qvg CodingAddict

This is literally all you need to have a thorough understanding of consuming an API and displaying it responsively in the client with Javascript and React. Then you can start to worry more about state management systems as you'll get a primer in the above 2 courses with Redux.

I learned Typescript in a course for .NET and React with Typescript. But you may want to find something else as that's very .NET heavy. It's easy to learn, it's just a little uncomfortable at first if you're not coming from a strongly typed programming language like C#.