Recommended Learning Path for a Self Taught Web Developer (React / NodeJS)

Back in 2016, I designed commercial kitchens for a living. This meant I consulted with restaurant owners who were starting their business for the first time. And made recommendations on how best to run their operation.

I found myself constantly needing new tools to manage these tasks. I would often times catalog the tools I use on alternativeto.net, and try a lot of software products in the startup space.

At one point, I asked one of the developers if they could implement a new feature that I wanted. They didn't have the bandwidth to build it and challenged me to write my first Javascript widget.

But, I didn't know anything about Javascript, CSS, or HTML. But I taught myself and built it.

And people started using the tool I made. And I got hooked. I wanted to become that developer who actually shipped web apps like the ones I relied on daily.

It's 2020 now and I've been hired on as senior frontend engineer, working in React/NodeJS primarily. I didn't go through a coding bootcamp, and just learned mostly everything through things I found online.

I remember how much of a struggle it was trying to find the best learning resources out there. And what things I should even learn as a webdeveloper. There's just so many tutorials out there that I didn't know where to begin, so I spent a great deal of time auditing many of the popular courses out there.

I'm writing the article I wish I had read, when I first started learning to become a web developer (React / NodeJS). What I should learn, in what order, to get that first job and start my coding career.

Here's that guide, and my impression of the learning resources I used as well:

Your First Job

You can learn only so much on your own, and real-world experience always trumps things you learn in a course. You should focus on getting a job ASAP in the software space, and figure out what you want to do after.

I always recommend any junior developer to get a frontend developer position. This is usually someone who makes a website pretty and functional for users. Like what the site looks like, how it talks to a backend, and cool little widgets that make the web fun.

It exposes you to the whole software development cycle and you learn many applicable skills to ship real-world products. Frontend developer roles usually don't have a huge barrier-to-entry and are junior developer-friendly.

Course Guide Overview & Criteria:

I recommend taking multiple courses in different related topics, and not to take a one-course fit-all plan. You learn much faster when you learn from multiple teachers and see different viewpoints on related topics.

At the same time, I also don't like over recommending too many overlapping courses either. You only have so much time throughout the day, so might as well make the best use of it.

Here's the guide:

Part 1 - Learn Computer Science Fundamentals

Before learning web development, you should take an intro course to computer science through Harvard's CS50. It's free.

My reasons as follows:

1. It teaches you a few different languages, C and python, so you'll be able to make comparisons to this and Javascript. It'll also teach you foundational backend programming when you build an image-decoder
2. You'll learn how to use the command line, which is useful when working with Git in team settings and working with webservers
3. It teaches you basic algorithms, which you'll need to know for writing optimal frontend code and backend code. As well as all the coding challenges you run into in interviews
4. It teaches you how memory addresses work, so you can debug things much easier

Most of the things you learn in Harvard's CS50 will pop up later on. When you learn the basics, learning everything else just becomes much easier. There are many patterns that emerge in programming, and they're usually tied to computer science.

Part 2 - Learn Javascript and CSS really well:

I recommend taking two courses in parallel:

1. FreeCodeCamp
2. Any foundational course on Javascript:

For (1), FreeCodeCamp is a free online platform for teaching frontend and backend development. Originally, it started as a way to teach frontend development (HTML, CSS, JS), so I recommend sticking with that.

The two certifications I suggest going for at this point are the "Responsive web design certifications (300 hours)" and "Javascript Algorithms and data structures (300 hours)". These two certifications teaches you the basics of Javascript, HTML, and CSS in a more learn at your own-pace hands-on fashion.

For (2), a foundational course will give you a video instructional overview from an instructor. I suggest taking either of these (or both):

1. Watch and Code
2. Colt Steel's Web Developer Bootcamp

Both teachers here tend to teach in a more gentle fashion. So it's an easier introduction to the topic:

Watch and code is from an ex-google engineer. He teaches you how to build a todo-app from the ground up, and more so how to think like a programmer. Taking this course taught me a lot of foundational design patterns, and how to properly write out the requirements of an app before building it

For watch and code, don't go past building the todo-app course, which is about 4-8 hours long. The other content is senior-level and great for doing later in your career.

Colt Steel's Bootcamp is a high level introduction of how the web works. How a backend talks to a frontend. It's a solid course covering all the fundamentals, but I still recommend watch-and-code though, since the next course will cover overlapping topics

Part 3 - Crash course on a full-stack application React NodeJS

After taking an instructor that takes a more gentle approach (bottoms-up), I recommend taking a course now that takes a hard-fast ball approach instead(top-down).

The course I recommend taking is "MERN stack front to back" from Brad Traversy on Udemy

• MERN Stack front to back

Brad Traversy doesn't really explain how everything works, but just enough for you to understand what's going on. It'll teach you how everything is connected together using React and NodeJS so you can reference down the road later. It'll teach you just enough backend knowledge such that you can entirely focus on frontend afterward

Part 4 - Learn React, Bootstrap, and Sass

At this point, you have solid foundational knowledge on Javascript, HTML, and CSS and have built a few small projects through FreeCodeCamps certification challenges. And have an overview of how React, NodeJS, and MongoDB work together through Brad Traversy's course.

Now you just need to hone in on what employers actually hire for and the skills needed to build features in a codebase.

I suggest taking these two in parallel:

1. FreeCodeCamp - Frontend Libraries Certification (300 hours)
2. Any in-depth React Course

For (2), if you took Colt Steel's course early, I suggest taking a different instructor this time around. Any of the popular Udemy courses are good, but I personally recommend taking this one:

• Max Schwartz - React the Complete Guide

After taking these courses, you'll have built a few React projects, have a solid understanding of react hooks, class components, lifecycles, and redux. Redux is a steep learning curve but once you get over that hump everything else is pretty easy.

There's also a second React course I recommend grokking over as well with Max's course, this one is from Stephen Grider.

• Stephen Griders - Modern React Redux

He makes some of the best diagrams in my opinion for explaining concepts in React / Redux. And also the best analogy on the topic as well.

Part 5 - Learn to build things in a team setting

You have now a ton of useful skills. Now you should start applying it to build actual projects. You should learn a little bit about project management and team dynamics. This is all the things you would have learned at a coding boot camp but didn't because you're learning mostly on your own

I recommend taking these two paths:

1. Chingu cohorts
2. Hackathons

Chingu cohorts is a place where you get together with other self-learning developers such as yourself, and build a project. You can either pick to build something unique or clone something that exists out there. I recommend cloning an application like Trello for instance, you can focus purely on problem-solving instead of generating ideas

Hackathons are great places to learn from others. It's a short 1 - 3 day event most times, where you get together and build a project. Covid makes things complicated, but I always recommend competing with ones local to your area as the learning experience will be much better.

Part 6 - Your portfolio capstone project

I don't really recommend the saying of "following your passion", but rather build something that you actually would want to use.

You should have one project you can talk about at great lengths with an employer. I suggest one, and not two, because it makes it easier for a potential employer to say "Oh he/she was that person that built X project". It's easier to remember than "Oh he/she was that person that built A,B, and C projects"

Also, if you're coming from a different career, consider building something related to that field. It tells a story of how you are transitioning from one career to the next.

But if you truly don't have any ideas, feel free to add new features to a tutorial project and make it unique. Or, check out these recommendations for ideas:

• Github Idea Repo

Make sure the project you build looks really clean on the frontend, I suggest using a CSS framework like MaterialUI, Bootstrap, or Tailwinds. It's the first impression someone makes on your project if it's structured well. You could have an ugly frontend and a beautiful backend, but it won't be appreciated as much.

Part 7 - Be a part of a tech community

I recommend listening to podcasts during your drive to work or commutes. This should be done in parallel in my experience from parts 1 to 6. You'll gain a huge amount of insight on how experienced developers communicate with each other, and pick up knowledge you wouldn't have otherwise gotten anywhere else.

Podcasts I recommend:

• code chefs - My personal podcast
• syntax.fm - Heavily frontend focused
• coding blocks - A really good friend of mine runs this, it's computer science + backend heavy focused
• tech jr - Lots of career related topics

Also, I recommend joining your local tech community. If you live in the middle of nowhere, there are still options for you!

First check out a list of slack channels out there: Github city slack channels

And join your local tech meetups in town

And I also recommend writing about what you learn along the way on dev.to, or your own personal blog. Feel free to use my site as an example and fork the source code here.

Blogging is a good way to reflect on what you learn and to show a potential employer what you know

Recap Summary

Here's a quick recap summary for courses I recommend to take in that order:

1. Learn basic computer science - Harvard's CS50
2. Learn Javascript and CSS well - FreeCodeCamp - Do these certifications: "Responsive web design certifications (300 hours)" and "Javascript Algorithms and data structures (300 hours)". In parallel, take Watch and Code course on building a todo-app
3. Get a grasp on a full-stack app built - MERN Stack front to back
4. Get good at React - FreeCodeCamp - Frontend Libraries Certification (300 hours). And this course in parallel: Max Schwartz - React the Complete Guide. I would also watch the introductory topics from here, but you don't need to finish this one: Stephen Griders - Modern React Redux
5. Apply skills in a team setting - Chingu cohorts and Hackathons
6. Showcase your work - Build your capstone project
7. Pick up everything else you missed - Be a part of your local tech scene, podcasts, and meetups

Everyone has a different learning style, but this is the learning path I would have told myself a few years ago. It covers the foundations really well, in a short time frame for a job skill that'll still be in demand years from now.

NOTE: Also if you're on a budget, always buy the Udemy courses when they're on sale. Don't get them for more than $10 to $15 each. Make a new account under a new email, clear your cookies, and you can always get the first course for that price. You shouldn't have to spend more than $50 on all these courses in total.

Feel free to follow me here if you'd like to follow and read more :D

• newsletter
• twitter
• personal site