Front End Development (A Complete Road Map)


The Question arises many times, what is front end development?

A process in which, a developer works on the front interface is called front end development. The interface is what you see and interact with. For example now you are reading this post on a specific designed and developed template with some sort of behaviors like read more, comment, share etc. The face or front side you see is called user interface which is well known as UI. Whereas, the interaction between you and the website on which you are on, is called User experience. Now, what is interaction? The answer is, you may react by using read more , share content and comment. So, the art of design is forcing you to do something on the site which you are visiting that’s called interaction.

The Front end development all based on UI/UX. Now, don’t get bored I am gonna tell you what is the demand and actual worth of this field in the market with proper reliable road map.
Now, in 2017 the top companies like Google, Accenture and many others are offering front end developers with higher pay than in 2016.

[contact-form-7 404 "Not Found"]

front end development

The front end technologies are rising day by day. For complete road map to learn, with free resources and valuable information are given below. So, keep reading.

Learn some basics:

Click here to download front end tutorials.

Step 1: HTML
HYPER TEXT MARKUP LANGUAGE, a foundation or structure of Web page consist of different blocks which are represented by tags or elements. In simple words, a naked wall without any cement, paint or color. This is an initial step to learn front end development. The current version is HTML5 which have now support some programming features with the embedment of JavaScript.

Step 2: CSS
CASCADING STYLE SHEETS, a layered of styling upon html blocks. In simple words, a naked wall with cement, colors paints etc. This is the second language which you need to learn after understanding of html blocks and their levels. The style sheets are responsible for all the formatting like width, height, colors, font families, animations and all sort of designing. The current version is CSS3 which have now support of advance animation like key frames, borders setup, transitions, transforms and many more.

Step 3: JavaScript
A third layer over Html and CSS, which increases the interactivity in any application and a programming language which responds dynamically. Some of the usage which I am going to discus with you like a dynamic slider on webpage contains three images, you can make this short slide by using CSS3 too. But, what about if slider contains one hundred images? Yes. It’s seems that we need to copy and paste image code every time, the better solution will be JavaScript which will allow you, only by using one image tag you will be able to make one hundred images slides at once with the usage of loop. There are many other features of JavaScript programming like animation, changing the content on specific elements by targeting them, graphic designing by using different libraries in JS and many more.

Responsive Web Design
Now, before moving forward. I want to explain a very essential topic in design process which is Responsive Design. In simple words, a way of coding in which you need to keep consider in mind the structure of specific software on different platforms or devices. For example, I developed a web application according to the desktop screen size not considered the mobile version of web in my mind what will happen? It’s clear that my web application structure’s will not properly work on mobile devices. So, for this purpose we firstly create a plan that how our application will react on different platforms or devices. In my case I will use media queries which were introduced in CSS3 or third party framework like bootstrap (I will discuss about it later) to make my design responsive.
responsive web design

Next step after custom based development is the usage of framework. On initial level, many developers don’t have idea about it. But, don’t worry I am going in depth to explain about it. Now, consider there is a bunch of Pre made cakes available in the market. And you choose to make your own for specific occasion. So, the time require to purchase ingredients like baking powder, flavors, creams from the market and the time require for the backing of cake, the total time will become approximately 4-5 hours. You have achieved your desire of making cake at home but have waste a lot of time. It’s a long term process from start to finish. But, what about directly bring a cake from the market at home and decorate it according to our needs. It will cost you no time just maximum of 10 to 15 minutes. Same like in software development we use frameworks because if the pre made functions are already available. So, why do we need to make them from scratch.

Step 4: jQuery
It’s a JavaScript library, now you will ask what is library? A library is a collection of functions in one or more than one file. You are not bound to implement the whole scenario to use a simple function like in framework. You can call any function at any time to remove your needs. For example I want to add the animation , like if the user hover over specific button than color of that button and text should be change. So, for that purpose I will use a specific function from jQuery library to implement. It will save your time, instead of writing hundred lines of JavaScript code, you will be able to write a single function to perform same action.

Step 5: Choose CSS framework
As above I have already explain about frameworks in details. There are many CSS frameworks are available some of them are very useful. Which one you should choose that may gave you benefits in future? I have listed some of the best CSS frameworks which you can use in front end development.

-Bootstrap: (Highly Recommended)
-Materialize CSS (Recommended). It’s a Google framework.
-Semantic UI

You don’t need to learn every framework. Just master one and use it according to your needs in development process. After that you will have the idea how other frameworks could work. So, it will be easy for you to understand other frameworks.

Step 6: Choose CSS preprocessor
A preprocessor is a smarter way to code cleaner, fast and efficiently. There are different preprocessors available for different languages but for front end development we mostly use LESS, SASS , stylus and HAML. Now, don’t get exhaust. I am going to explain that how it works. For example, you are using a similar closing tag, again and again in your code what will happen if you have plan to write code approximately five thousands lines it will take hours of hours Right? Now, what if i just don’t write closing tags in my code?. Preprocessors are programs that allow you to code with their own syntax or scripts and after that it generates the code into css or html whatever program you used. They reduces your time of coding, they are just like template engines that generate templates with short codes. LESS , SASS, stylus are CSS preprocessors whereas HAML is an html preprocessor.


Don’t forget to comment your reviews and share with others.

The full map of front end development is not completed yet, It’s a very long article .To get article updates in your inbox, get subscribe to this blog.


  1. Madiha Khan May 3, 2017
    • Shan Shah May 3, 2017
  2. noor May 3, 2017
    • Shan Shah May 3, 2017
  3. Fawad Naeem May 4, 2017
    • Shan Shah May 4, 2017
  4. Mkhan May 5, 2017
    • Shan Shah May 5, 2017
  5. Abdul Maajid May 10, 2017
    • Shan Shah May 10, 2017
  6. Muhammad May 11, 2017
    • Shan Shah May 15, 2017
  7. Brofi June 28, 2017
    • Shan Shah June 28, 2017
  8. Ascnqi June 29, 2017
    • Shan Shah June 29, 2017
  9. education degree September 24, 2017
  10. Mohammed Shahil November 23, 2018
    • Shan Shah November 27, 2018

Add Comment