How to Learn Full-Stack Development:
A Roadmap in Charts…!
Should you focus on the full-stack?
If you want to make learning your career, focus on the fullstack.
The fullstack developer sees the evolving world of software as an opportunity, not a threat. They leverage modern languages and new frameworks. They continually grow their diverse skill-set. They are as cutting edge as technology itself.
Full-stack developers can adapt. Every company has a unique stack, with different challenges in the frontend and/or backend. Therefore, the ability to apply a diverse skill-set makes the full-stack developer truly valuable.
Finally, the full-stack developer capitalizes on the most exciting part of software: exploring the unknown. If you’re coding the same solution for the hundredth time, work is boring. But a full-stack developer will always have the opportunity to dive into new problem spaces.
If you’re a newcomer, where do you start?
The chart throughout this article tracks how you can become a fullstack developer. It lists the technologies you need to learn. Note that the time estimates are based on personal experience, as well as that of my colleagues. Also, the estimates assume that you’re devoting 2–3 hours per day to learning. Adjust the estimates if you can devote more or less time.
Even if you’re experienced, you will find the chart useful. See where you land and track your progress. Either way, new or experienced, by the end of the chart, consider yourself a fullstack developer. 🏆
Frontend (~5 months)
HTML/CSS (1 week+)
Start by learning the building blocks of the web. You must learn HyperText Markup Language (HTML). It’s the syntax that is used to structure a website. Luckily, it’s one of the quicker technologies on the list to pick up.
Next, you have Cascading Style Sheets (CSS). Learning this one is mostly done through experimentation. Once you’ve learned the basics, including flexbox, don’t spend too much time digging further. You can learn the other CSS details when necessary in other projects.
JavaScript (1 month+)
A lot of your time will be spent learning the JavaScript programming language. JavaScript allows your websites to turn into dynamic web applications.
JavaScript is an essential checkpoint. Fortunately, there is plethora of resources for ramping up with JavaScript. But remain careful to focus on the basics. Save the intermediate and advanced concepts later. They will become less confusing/disheartening as you learn more.
Frameworks (2 months+)
As you’re gaining momentum with JavaScript, learn a JS framework. A framework allows you to reuse common functionality, and implement large applications faster.
There a few options: React, Angular, Vue, and more. In my opinion, the one to learn is React.js. It’s both beginner friendly, and loved by many experienced developers.
That’s not to say that you should completely ignore Angular and Vue. At least read about them enough to know their differences from React. Even do a tutorial or two.
But your time is a resource. I would devote most of it to React.
Related Frontend Concepts (1 month+)
Testing (2 weeks+)
It goes without saying that reliable software companies test their code. Therefore, a fullstack developer should be familiar with testing practices and libraries. Since you know JavaScript and React, great options are Jest and Enzyme.
Redux (2 weeks+)
You cannot avoid Redux if you’re learning React. True, they are separate concepts. React is the presentational layer. Redux manages the internal data. However, applying Redux with React has become a standard in the industry.
Related Software Concepts (~1 month)
Try to mix the following concepts into your learning process as soon as possible.
HTTP and Client-Server Architecture (2 weeks+)
A full-stack developer should know how data is communicated over the World Wide Web. In HTTP, functions follow a request and response pattern. It goes like this. One computer acts as the client. The client uses a web browser to send HTTP requests to a server. The server, which is another computer, responds to the client with resources such as HTML and CSS.
I recommend building a project that makes requests to a public API to get your hands dirty with HTTP.
Git (1 week+)
Learn Git as soon as possible. Git is a version control system that tracks changes in repositories (software projects). You can think of it as Google Drive on steroids. You can share repositories with others. There are multiple contributors to files. But with Git, you can have branches of the project repository for alternative versions. Commits record exactly when a change to add, update, or remove a file happened. And that’s only the beginning of its features (Pro-tip: `git reflog` is a secret weapon)…
In addition, other software engineers and recruiters will want to see your work on Github.
Backend (~3 months)
Node.js (1 month+)
Bank off your JavaScript experience, and explore Node.js on the backend. Use it with the Express.js middleware to build your own API. Node.js shines with chat-based applications and streaming. Capitalize on those strengths and try to build a Facebook Messenger/WhatsApp clone.
Like your first encounter with JavaScript, Node.js will seem vast. It’s nice to have plenty of resources. But not if you don’t know where to start. Focus on basic tutorials, and level up naturally.
SQL and the Relational Databases (1.5 months+)
You can’t ignore SQL and the relational model. A fundamental aspect to the backend is data storage. Structured Query Language (SQL) is the most widely used language to coordinate how data will be read, written, and updated. Learn the relational model. This is the concept behind industry standard relational database systems like MySQL, PostgreSQL, and Oracle.
As you’re learning Node.js, you’ll come across a lot of MongoDB tutorials. MongoDB is a NoSQL database — an alternative to a relational database system. Beware, it can be tempting to focus solely on MongoDB. Now, it’s good to know about the NoSQL databases and languages. Learn their advantages/disadvantages too. But don’t skip SQL, nor the relational model. They’re so widely used in the industry. You will encounter them eventually.
🍾🍾🏆🍾🍾
With that, you’ve completed the chart! Pop the bottles of champagne! Party as hard as you did on your 5th birthday! Well, in that case, champagne probably isn’t appropriate…
Regardless, the cake should say it. You’re a full-stack developer.
But It doesn’t stop here…
Going Beyond
A Project to Put it all Together (2 weeks+)
You have the fullstack skills. Hopefully, you’ve been building up the portfolio. But to help with that, it’s really hard to find an online tutorial that ties all of the fullstack concepts together. You’ll have to scrap together a project all by yourself.
So I built a course to solve that problem. By the end, you’ll have a full-stack project in your portfolio. Its focus is on React.js, Redux, Node.js, and PostgreSQL. It also pays attention to the small details that will set you apart: best practices in code design, and method naming.
Master Full-Stack Development | Node, SQL, React, and More
Computer Science (5 months+)
A fullstack developer should also understand computer science. Yes, the time estimate does seem to suggest that four years in college can be boiled down to five months. Does that mean it’s pointless to get a CS degree? Of course not, getting a degree in computer science is a great investment. You network with many intelligent individuals. And you will get to explore other engineering topics that may interest you.
But the stuff that is immediately applicable in the industry — data structures and algorithms, operating systems, and software development principles — can be done in a highly focused five months.
Many of my coworkers graduated from college with non CS degrees (some even non-science). They are either self-taught, or went to bootcamps.
Other Languages/Technologies in Full-Stack (Ongoing)
As mentioned in the beginning, the fullstack developer thrives in the unknown. The learning process is ongoing. Once you’ve become dangerous in one technology, it’s time to add its competitor/alternative to your toolbelt. Build a project or two with another JS framework like Vue.js. Start exploring NoSQL databases like Redis.
The way to really set yourself apart is to know the advantages/disadvantages of each technology. Know when it’s best to use Node.js, vs. when you should use Go or Scala.
Know what parts of a language to praise. Know what parts to complain about.
Ultimately, if you want to make learning your career, focus on fullstack development.
David is a fullstack developer and software engineer at Zendesk in San Francisco. He loves making educational content. He has 17 courses, with ~200,000 students from around the world. Check them out! https://www.udemy.com/user/54cd8dd54e49b/
Highlights:
Master Full-Stack Development | Node, SQL, React, and More
Build a Blockchain and a Cryptocurrency from Scratch
React — Mastering Test and Behavior Driven Development
Also, feel free to connect with David by finding his social media links on davidtkatz.com
