Roadmap to becoming a Front End Developer

best software development

Follow the steps to become a frontend software engineer – boost your skills

Hello, My dear friends,

Hope everyone is fine and you might want to become a frontend developer where you are reading. Well, first of all, the frontend is not just HTML, CSS, JavaScript. There are so many things that you need to follow.

  1. Design — You must clear the concept of design.
  2. Font and Color — You must be clear of fonts and color you may read color theory
  3. Frameworks/Libraries
  4. CSS Preprocessing
  5. Version Control/Git
  6. Responsive Design
  7. Testing/Debugging
  8. Developer Tools

Let’s dig in…


How to boost design

For the very first time, you will not be able to a good designer because you have no experience of color and fonts yet. So you may start with HTML and CSS Basic from Basic. You may learn from w3schools. Please complete full tutorial of w3schools. If you feel bored with reading you may go to YouTube and search some basic tutorial. After HTML, CSS you may start JavaScript and JQuery which is very important for front end developer. You can’t believe how important JavaScript for the front end development

Font and Color:

what is color psychology

Do you know font and color is one of the main parts of the design. If you don’t choose a good font and color your design will not be a quality standard. For this reason, you may see some website as an example.


Wow! You can become a good developer. Isn’t it… haha. Do you know why I’m saying? yes, let me explain. to become a good developer you must have an interest in what you are learning otherwise you can’t. So you already come to this section and I’m assuming that you are really very interested. So, what is the framework? It’s really really very important part to become a good front end developer. A framework is nothing but a layered structure. You can’t understand? let me tell you a simple example.

Suppose you are a coffee lover and every morning you take a cup of coffee. So every day your ingredients ratio is not equal, right? You might forget to add sugar or you may add little amount of sugar. Where your time is wasting every single day. So if you decide to make an ingredient where sugar, coffee, milk will all together with a specific ration where you can take coffee every day without any trouble. So you put your mixed ingredient in a jar. This jar is your framework.

So, you may understand the concept of the framework. if not you may ask me. So for the very first time, you may start Bootstrap which is a framework of HTML, CSS, JavaScript. When you will become a good designer you can move to something else. ReactJS, Vue JS, Angular JS is a very powerful framework nowadays built with JavaScript. You may start any of them.

CSS Preprocessor:

A preprocessor is a program that takes one type of data and converts it to another type of data. CSS preprocessor is a program that generates CSS from preprocessor’s unique syntax. There are a few CSS preprocessors that you can use. Here are few most popular CSS Preprocessor

  1. Sass
  2. Less
  3. Stylus
  4. PostCSS

Version Control/Git:

version controlling using git

If you want to become a professional developer you must have a clear concept of version control/git. Version control is something that records all of your changes. If you don’t like the latest version of your code or if you want to see your last code or revert to the last version you can go to your last version with git.

Responsive Design:

It’s is important nowadays. Responsive design is to make your design device friendly. If you don’t understand let think this example. You might use Facebook and you don’t see design in Mobile and Desktop is not the same. The layout is the difference? Yes, that is device responsive.

how to become a frontend engineer

You are seeing the example above is difference layout in Desktop, Tablet, and Mobile.


Software testing is a process of executing a program or application with the intent of finding the software bugs. It can also be stated as the process of validating and verifying that a software program or application or product: Meets the business and technical requirements that guided its design and development.

debug app and software

Developer Tools:

debug in chrome

Press F12 in your keyboard from your browser. You will see some tabs with tools. This tool is used for different purpose like finding bugs, check web application performance, network calls, security and so on. As a beginner, you must know to inspect element and console

Thank you and have a good day.