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.
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:
- You'll learn how to use the command line, which is useful when working with Git in team settings and working with webservers
- 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
- 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.
I recommend taking two courses in parallel:
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.
For (2), a foundational course will give you a video instructional overview from an instructor. I suggest taking either of these (or both):
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
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
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:
- FreeCodeCamp - Frontend Libraries Certification (300 hours)
- 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:
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.
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:
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:
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
Here's a quick recap summary for courses I recommend to take in that order:
- Learn basic computer science - Harvard's CS50
- Get a grasp on a full-stack app built - MERN Stack front to back
- Get good at React - FreeCodeCamp - Frontend Libraries Certification (300 hours). And this course in parallel: Max Schwartz. I would also watch the introductory topics from here, but you don't need to finish this one: Stephen Griders - Modern React Redux
- Apply skills in a team setting - Chingu cohorts and Hackathons
- Showcase your work - Build your capstone project
- 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