DEV Community

Cover image for Front-End Developer Roadmap
itgitnit
itgitnit

Posted on

Front-End Developer Roadmap

So you are an absolute beginner who is trying to learn web development and more interested in the front-end part of it and you are looking forward to having an absolute guided path or a roadmap so that you can learn front-end development. Let me give it to you in the very easiest and the cleanest manner. HTML, CSS, and Javascript and that’s it, that is your front-end developer guide. But hey, you have also heard that XYZ YouTuber was saying that you should also be learning react, is he wrong? No, absolutely not. We have also heard about Chakra UI, Tailwind CSS, Bootstrap, So you shouldn't be learning that, no it’s not like that. So there is a lot more context here that you should understand. So, let me explain it in a little bit more in-depth. See the ultimate guide of front-end development is still the basic HTML, CSS, and Javascript, but it is a lot more information that is exposed to you without understanding the context of that information. So, in this blog, I’ll give you not only the roadmap, but actually the understandable, contextual roadmap so that you can figure out which tech stack you should pick up and which you can leave.

Let’s start with not everybody's favorite which is HTML. Now I understand the context of HTML, everybody knows it but nobody knows it, this is the ultimate reality of HTML, you know enough that you can figure out what this tag is going to do, but sometimes beginner faces a really challenging situation that they don’t want to write this much of HTML for designing the page. But the ultimate reality is that the page is going to be no matter what, is going to build with HTML, and this is exactly the point when you have to do something but you don’t want to do something, this is where exactly more tools come into the front-end development. See, when you build a web application let's just say there is a product on the web page, somebody needs to actually write HTML for that product. Now surely we have programming languages that help us to give us loops and conditional so that we can either conditionally replace those products with something else, or maybe can repeat that product probably a hundred times with different values. Now, this is all a little bit of an advanced side we don’t want to go there, first, we want to capture the front-end part of it. But something you must really understand is that no matter what happens, somebody needs to write HTML for those buttons, for those images, and something else. Now, this something else can be buttons, unlisted elements, listed elements, and a whole bunch of other things. So in order to make sure that you write faster HTML, Emmet comes into the picture which gives you a lot of shortcuts so that you don’t really feel tiresome to write those HTML, yet somebody actually writes them. So this is the first introduction to the additional tool in the front-end journey, Emmet.

Now, moving on to our second part of the front-end development which is CSS. Now it’s not just about structuring the web page it should look also decently beautiful. And that’s where CSS comes into the picture. But writing the CSS with position absolute or position relative and providing all these elements to be arranged at the exact place where you want is not the easiest task of all and hence since again, the picture comes in, we want to do something but we really don’t want to do it, that’s exactly when the same things come in. Some of the helper tools, now writing CSS you can absolutely write that, you don’t need to use any tools, libraries, frameworks, anything at all, you can use plain vanilla CSS to write everything. But since we don’t want to and that’s where the new libraries, frameworks of CSS come into the picture. These libraries and frameworks help you to actually arrange things nicely and beautifully, some provide a really powerful grid so that you can arrange your web pages into the easiest format. Some even give you more things to make things beautiful like buttons and navigation bar and a whole lot of other things. And trust me there is no shortage of these CSS frameworks, some people love one, some people love others. Bootstrap, Material CSS, MD Bootstrap, Chakra, Tailwind CSS, and there is so much of them. Now my personal recommendation is to go ahead and get started with bootstrap and eventually explore others. You may fall in love with Tailwind CSS or the Chakra CSS or something else, but again one thing is sure, these are all helper libraries if you don’t want to use them, you absolutely can avoid them and, hence comes into the picture that CSS is the foundation of the front-end development. And also the reason why I’m recommending to get started with Bootstrap is because it gives you the ultimate knowledge and the sense of, how things should be arranged on the web page. Once you understand the bootstrap understanding Material or the Chakra or the Tailwind is relatively easier but it’s not true for everyone. So, again, if you are getting started with Material that’s also totally fine.

Now, finally moving into the third part of the front-end development guide which is Javascript. Now Javascript is really one of the most powerful and proving to be more powerful than we expected it to be. Now the question is can we build everything in Vanilla Javascript? Absolutely yes, there is no one who is stopping you to do so. Javascript can actually make server calls and can bring up some of the JSON data and then you can actually place these JSON data nicely and there is nothing that is stopping you. But is it tiresome? Yes, Of Course, writing a Web application that is governed entirely by Javascript without imposing some of the rules that what you should do? What you should not do? Can become an absolute nightmare, adding more team members to this and this actually gets out of hand pretty quickly and pretty easily and this is exactly where some of the rules are imposed on the entire team or the entire project, that hey, if you are going to change this object in the javascript so this is the way how you are going to do it, if you need to render some condition this is how you are going to do it. Previously, people used to do this kind of rules and regulations on the project basis or the company basis, but eventually, somebody realizes that hey, we need to just roll out these standards to everyone and thus a lot of libraries and frameworks in the Javascript came into the picture, but one thing you need to absolutely understand that the final output of these all things React, Vue or whatever we learning is HTML, CSS, and Javascript. So, ultimately your code is compiled into these three things only. So the more we are going to understand the Javascript paradigm more easily, it’s going to be easier for you to switch between React or angular or Vue. So, ultimately it boils down to the basic javascript.

Now in order to make sure that your web applications follow some of the standard practices and these same practices are being followed by your team members also, we pick up some of the libraries or the frameworks, and famous ones are React, Angular, Vue and there is a lot more other than that. A whole lot of companies are using even those frameworks as well, some due to legacy reasons, some due to other conditional reasoning that this is the best fit for us, so, there is no shortage of them. Now in this vast world where Javascript frameworks are dropping every next day, my personal recommendation is to get started with React because React standards are being utilized by a whole lot of other frameworks and libraries too. Once you understand, how to write these codes into React you will be able to quickly migrate into Vue, Meteor, and tonnes of other frameworks. Now, once you understand React, obviously your project is going to go more complex and that’s where you start exploring more of these libraries and frameworks may be Vue is much more suitable for your project, or maybe you need something more complex may be NextJS but again this is all can go like really crazy. But again, my recommendation is to get started with React, understand this as basic, and explore things later on.

Now let me give you an additional tip to you that is going to make you even a better front-end developer. Now, as things are getting more complex, there are things something known as State Management. So, what basically happens, let's just say this is your name and you want to display this name onto 10 different places on the website, and what happens if one place changes that name how you are going to make sure that 9 different places get to know about this change. And that’s where the State Management Library comes in. The State Management Library can be a little bit intimidating at first, but they are not, it is just a centralized place from which all the data goes in and goes out, and thus State Management Library is also an essential part if you want to become a front-end developer. Now, since this is also a common problem there is no shortage of such State Management Library my personal recommendation is to get started with Redux. I know this is a little bit tough compared to others, but this is going to give you the ultimate knowledge of why we are doing and what we are doing once you understand the Redux rest of the things are gonna fine and are gonna seem like absolutely easy. So, I told you that ultimately it is just HTML, CSS, and Javascript rest of all the libraries, and all the front-end roadmaps which are including all these extra things, yes they are helpful but not too much necessary. But is it going to be necessary if you are looking for a job? Or want to become a modern front-end developer? Yes, it’s going to be. But the most important thing is, now you know the context of why this is happening and why there are so many things to learn. So, I think you can make a better decision now to pick what’s library I can choose and what I can learn later on in life.

I hope you have enjoyed this demystifying the front-end developer roadmap!!!!!!......

Top comments (0)