FRONT END DEVELOPMENT
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.
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:
Step 1: HTML
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.
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.
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
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.
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.