In this blog, I will try to explain to you the roadmap for becoming a full-stack developer in the simplest manner. I would recommend this blog to all those who are new to the web dev world or are having any confusion related to the journey.
I got this writing inspiration when I started exploring Twitter for a couple of weeks to see a lot of people are struggling with Full-Stack. So I thought of using my experience.
RoadMap:
- HTML, CSS
- CSS Frameworks
- Javascript, jQuery
- Git
- Front-end Frameworks- Angular/Vue/React
- Back-end Frameworks- Node/Flask
- DataBases- MySql/MongoDB
- Clouds- AWS/GCP
Let's look at these skills in a little more detail, in a very uncomplicated way.
HTML/CSS
It is the most basic thing you will start with, and probably you already heard about it. HTML is a markup language. It gives a skeleton to your website. For example, where to have a paragraph, where to have a header, and so on.
Now there are a few complex elements, like tables and lists. You should learn those, a little. I would recommend you to spend not more than 5-6 days on HTML.
Now CSS, Cascading Style Sheets. It gives a way to style your website. There are multiple ways you can add CSS, you should definitely search for that. Also, there are ways you can style HTML elements, this gets as complex as you want. But a tip, it's not very much necessary to learn it all. You can just give some time to it, around a week should do! Trust me.
As you grow, you need to use these things on a daily basis. And it gets easier with time. Moreover, as you move forward with your journey, you get better tools and frameworks for all this. I don't mean in any ways that it is not necessary, but you should know when to move on to the next thing
CSS Frameworks
Here comes a little interesting part, this will make you feel that a lot of powerful tools are present out there. Don't get carried away though, not more than a week for this too.
These frameworks exist to help you with CSS. Very easy to use, they allow you to make your pages faster and in a neat manner. No one can or should use CSS everywhere possible and make the code complex. Use frameworks!
There are many frameworks present out there. You probably heard of bootstrap too! Most of the frameworks have built-in UI components, for example, you can get a code for a beautiful header, or a button, and so on.
You can try bootstrap for the first time, and then I would suggest you move on to tailwind. It is getting quite famous these days. After a little time, you should start using the frameworks in your projects. You will get more familiar as you use them.
Here is a link to my thread explaining more about CSS Frameworks
Memorizing everything is not required. You are always a Google search away.
Javascript and jQuery
Javascript is the most important and useful thing you will learn. It's everywhere! It is a scripting language, which helps you to make changes with the DOM(Document Object Model). You need to see this as well, quite easy to understand. Don't go deep.
The manipulation of a page is done using jQuery. It allows you to select elements in different ways, and manipulate the view of a web page. An example would be to open a dropdown with a click. This also can go as complex as possible. But again, jQuery isn't much used in unless exceptional cases as you will be using some sort of framework.
You need to learn Javascript nicely, the basics are just like any other programming language. if you're new to the coding world, you should probably give this part around two weeks, and try jQuery simultaneously. Here are some Basics of Javascript
You will pick up Javascript and get better day by day. As you will move to frameworks, it will be heavily used. There are some advanced concepts you should know while doing frameworks. Here is a link to them.
Git
It is a version control system. Now that wouldn't make you understand a lot. It allows you to track changes in your project. For complex projects, when multiple people are working together it is significant. You can know what others are doing and work seamlessly together. Just go through a basic guide, and start using git when you start working with CSS.
At this stage, just understanding the basics and you being able to create a repository and pushing the code is good enough. The concept of branches is a must. You should try using those. Use GitHub, GitLab, bitbucket, or anything you like.
You know a lot now. It's time to move to the amazing stuff. JavaScript Frameworks!!
Javascript Frameworks
Hearing a lot about Angular and React? Here they come.
Every company and every project is using some sort of front-end framework. These frameworks are a significant part of the full-stack journey, and even for front-end developers. Working on this makes you eligible for becoming a front-end developer.
The three of the most popular frameworks are Angular, React, and Vue- My personal favorite.
These frameworks allow you to have a component-based approach, you can create several components and use them at multiple places dynamically. Consider a user information page, you can use the same page for displaying the data of a thousand users. And yes, this all can happen without reloading the application. This is termed as SPA. These frameworks are not limited to this. They have a lot of features.
You can pick up any framework you like. Angular is a little strict and uses typescript a superset of javascript. For a component, you have a typescript file for your logic, an HTML file, a CSS, and a testing file. You shouldn't worry about the testing file as of now. I started with angular.
React uses JSX. I don't find it much pretty to use. But react is the hottest topic out there. And has very good community support. It is light and technically is a library.
Then comes Vue, which is similar to others. A component-based approach, in a very easy manner. I would say it is the easiest to learn. It is a little underrated.
You can use different dependencies as per the requirements, you will start using a package manager here like npm or yarn. Go for yarn, it's good in the long term. You can even use your CSS frameworks here, and much more. Remember, I mentioned earlier about you will get better tools for styling and stuff. These frameworks even have frameworks built on them.
React has a popular one named Material UI. You can see Next.js for SSG/SSR once you're done with react. This is not for styling, read about it. It will be fun.
Angular has one named Angular Material, which gives you all the major components for building UI. These components are highly customizable.
Vue has one named Quasar, it again you a lot of customizable components you can use. Just like Next.js, there is Nuxt.js. Again Nuxt is not for UI. And you should work on it after Vue.
Now for these frameworks, as I said are very important. You need a little more than a month if you're doing Angular and React. Angular is quite big. For Vue, you might be able to do it within a month. I would suggest taking a course for a framework on Udemy.
If you are done with one framework and want to use any other, that is not at all going to be difficult. You can start on another one even by documentation. You can try building projects and use Firebase while learning frameworks. It can help you with the deployment as well as a database. You can also make your deployments using AWS S3 Bucket or Netlify. YouTube them.
You're a Front-End Developer now! At this point, you've made your life very interesting and a door to a lot of opportunities is opened.
You can even start applying for front-end roles now. But don't stop learning, you're very close to becoming a full-stack developer.
Backend Frameworks
Now as there were front-end frameworks, there are back-end frameworks.
Consider an example, you want to retrieve some data from your database. Maybe you're using something like Firebase, you can do that directly from the front-end but it isn't highly customizable. Maybe you want to manipulate it or there is a different type of request you sent from your front-end and you want to handle it as you want. Here comes a backend framework. Helpful to make your own APIs and make your front-end to send requests to that.
Now, since you must be knowing a good javascript by now, you should start with Node.js(Runtime) and Express(Framework). You might be able to do the basics in a week, as it uses javascript. There are popular stacks like MEAN, MEVN, MERN, quite popular you need a google search here. Express is used with node, to make it easier.
Another easy backend framework you can try is Flask. It is a python framework. You'll need to learn python a little before starting this. Python is pretty easy and you will be good with it in no time. There is another popular one for python named Django.
The most important thing here to have good fundamentals is the flow of this communication. Front-End to Back-End to Database and then back again.
Databases
We need to store the data somewhere right? So there a lot of databases present out there. You might have heard of SQL. You can use any database with your application depending upon the requirements. SQL is a table-based structure, there is PostgresSQL, MySQL, and so on.
On the other side, MongoDB used with the above-mentioned stacks like MEAN, is document-based. If you're a fan of javascript by now, you will love this. There are a few more like this. You can see the data as you do in JSON. You will be familiar with JSON by know after using javascript and frameworks.
You will probably need to use a database while using a backend framework.
Deployments and Cloud
You made a web application, but it needs deployment! There are a lot and lot of things you can do here. There are different cloud providers for this and other services.
The most used is AWS, Amazon Web Services. Amazon generates a hell lot of revenue from this. You'll probably need to know about the basics of the cloud to use this. There is Google Cloud Platform from Google and Azure from Microsoft.
You might even use Heroku or similar ones at first.
I would recommend AWS as it is widely used. You can try it, you'll probably start with EC2 for your backend deployment. EC2 is the heart of AWS. There are other services you can learn on the basis of your need. Don't worry a lot about this right now, it will be easier to understand as you move forward!
There is more stuff out there like containers, serverless, etc. which are quite interesting and the list is never-ending. You might've heard of docker, lambda.
Try not to spend endless hours on a particular thing. Full-stack Web Development is an amazing journey, a journey you will never regret! It's an interesting one, just start and you won't realize you are a full-stack developer in no time.
Thanks for reading, I hope you enjoyed reading it.
If you have any questions or suggestions, please leave a comment below or feel free to reach out.
