Roadmap for Frontend Developer

HTML + CSS + JS = Fronted Developer but not modern Fronted Developer

Current Market is looking for a modern front-end developer. So, you need to learn about modern tools. There is a various modern tool and it’s difficult to choose the right tool and order of learning.

I will help you in knowing the right tool and in the right order.

Every big thing started with a small step and to become master of frontend development you need to start with the basics.

1. Basics
2. CSS Framework
3. Package Manager
4. CSS Preprocessor
5. Build Tool
6. Front-end Framework
7. Testing
8. PWA
9. Performance
10. CSR
11. SSR
12. Static Site Generator

These are the things which is very much important for front-end master. I’ll discuss each of this one by one.

If you like to watch video insead of reading this article then here is a video for you

Roadmap for frontend Developer

Basics :

👉 HTML: Never underestimate the HTML. There are lots of things in HTML which are not being used by people but if you once you know this is also available then you will be surprised.

👉 CSS: It’s tricky and interesting because it styles the page and how it works is a little surprising sometimes. You make your page beautiful with it and you define every property by yourself. It’s like building your own home.

👉 JS: JS is the only things which bring logic and programming to the life of frontend developer. It is very much flexible and surprising. It makes own website functional like we see slides we get from verified before sending to the server. Dynamically sending the request to the serve.

HTML is just mark-up language and it will never give you an error. CSS will also never complain you about the wrong code, but JS will do that. Once you learn the basics you are ready to move to the next section.

CSS Framework

It’s is very important to learn CSS framework because it will make your life easier. You need not do every styling by yourself. You can use the standard predefined style from the framework. If you have a good grasp on CSS, then you can easily override the CSS property and customize the style of the page.

• Bulma, Bootstrap, Materialize, Semantic UI and Foundation. There are the top 5 CSS framework and you must learn at least one and that is Bootstrap.

If you ask me to recommend you then I’ll suggest you two framework.

👉 Bootstrap { Every Developer must know}

👉 Materialize { Any Material Design Framework }

Package Manager

A package manager is a programming language’s tool that automates the process of installing, upgrading, configuring. It also creates project environments and easily imports external dependencies.

After learning CSS Framework, you might think of learning JS Framework but when you will start learning that ultimately you will come to package manager.

NPM is node official package manger.

Some people don’t use npm then what they use they use Yarn (unofficial package manager)

Yarn is a common project developed by such companies as Facebook, Exponent, Google, and Tilde.

So might think that I told you different thing what you should follow. You can live life with npm there is nothing bad with it but yarn is enhanced version of npm.

Go with npm after some year/month you will know what is advantages of yarn.

❌ Don’t directly jump to yarn because master must know about npm also.

CSS pre-processor

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS pre-processors to choose from, however, most CSS pre-processors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on.

These features make the CSS structure more readable and easier to maintain.

1. LESS
2. SASS
3. STYLUS
4. POSTCSS

This increased productivity and everyone wants things very fast, as fast as it can’t be.

Build Tool

👉 Task Runner: Task runner for automating all of those boring repeated processes i.e Grunt.

👉Modular builder: bundling many web packages and different dependencies, including CSS files and images, then creates modules i.e. webpack.

👉Linter: Code linting is an important thing to have incorporated in your project because it is a way to increase the code quality

👉 Formatter: code formatter modifies or fixes your source code, according to the defined configuration previously set up.

Front-end Framework

👉 Angular It was built by Google and it the best for enterprise application.

👉 React It was built by Facebook and this is widely used among all the framework.

👉 Vue It is growing exponentially, and it has so much potential that it might someday become number.

Testing

In the test, we test our UI is fine or not because our code is going to run on different devices with different configuration It impossible to test everywhere and every page manually every time. So we write a test to automate these things. There are 3 types of test

👉Unit testing: Unit testing is a type of testing to check if the small piece of code is doing what it is supposed to do. Unit testing checks a single component of an application.

👉INTEGRATION TESTING: Integration testing is a type of testing to check if different pieces of the modules are working together. The behavior of integration modules is considered in Integration testing.

👉FUNCTIONAL TESTING is a type of software testing whereby the system is tested against the functional requirements/specifications.

PWA

Let’s take the example of Whatsapp on your phone. When there is no network, you can still open the app, check past messages and even reply to someone. When the phone gets the internet connection, the messages are being automatically sent in the background.

👉 SERVICE WORKER

👉 NOTIFICATION

👉 LOCATION

👉 DEVICE ORIENTATION

👉 STORAGE

Performance

Once you get a grasp on the things which I told you about. You need to improve the website in terms of performance. There is a various tool for testing your application performance.

👉 LIGHTHOUSE

👉 DEVTOOL

👉 SPEED TEST

These are the tools which you will help you and based on the result of these tools, you can improve your website. So, that it will load faster on 2G, 3G or any other network also. You will also get some more way to improve website performance.

SSR

If you disable the js and then run any SPA i.e. angular react and vue you will not able to see anything more than an error message. which will say you to enable the javascript.

👉 React: Next.js

👉 Angular: Universal

👉 Vue: Nuxt

Means spa doesn't work without js. Server-side render website are the website which comes with HTML and CSS. So that HTML and CSS don’t need to be dependent on js. This helps low configuration device to load your website fast. because No JS being interpreted for Rendering UI or DOM manipulation. All the big company who use SPA have a server-side render website also means if you disable the js then also you can see the website.

Static Site Generator

Static site generator makes your website static means you can run your website without connecting to the database. It will only HTML, CSS and js which don't contact the database or API for any information.

👉 React: Gatsby

👉 Vue: VuePress

👉 Angular: Scully

If you are having a blog with some 20 posts then It will fetch all the available post from the database and make it static, like For every post there will be a new HTML file You can think this as when you started learning HTML , CSS and JS; You used to build page without database. In this case, I took an example of 20 posts means there will be 20 different pages.

Thanks for reading I hope you like it that why you are reading this. If you have any suggestion or feedback you can share. I’ll be happy to read it because that is the only thing which can help me in improving myself.