Front End ROAD MAP – The front End Road map describes the skills and knowledge required to learn in designing user interface of an Application. Now let’s have a look at the front End Web Development roadmap – here we’ll study HTML – As HTML is the basic building block of Front End Development (Web & APP). Let’s Begin with learning  HTML and how to use its elements and tags to create a simple web page , later on we will see different technology that can use with HTML in detail to design and develop more complex, dynamic and Interactive web Pages.

Front End Development includes the development of user Interface (UI) of an Application, that decides how a single element will look on web page.

User Interface includes graphical images and visual part of the application and also user’s interaction, when a user clicks on a website. Whatever user see , when he visits a website  -“different type of buttons  , clickable events , Motions and other UI based components such as Media , Texts ,  Forms , Animation , Colour, Navigation ,images etc,  all are aligned and developed as a part of the front End Development.

Web Development refers to the process of creating, building and maintaining websites. It contains different aspects like Web Design, Web Publishing, Web programming and Database Management.

A web Application Developer is a software Professional who develops websites for Individual or Business. If we talk about web Developers usually they are categorized in three basic categories such as  – Front End Developer , Back End Developer and Full Stack Developer.

Here developers are classifying in three different categories according to type of work they are doing in process of web development. Let’s have a closer look at each of their roles and responsibilities –

Front End Developer – A front end developer is a person who is responsible for building and creating user friendly websites, using Front End Technologies like HTML, CSS, and JavaScript & Frameworks of CSS & JavaScript.

As a front End Developer , Developer will be responsible for building the user interface of a website, with a special consideration to design Principles and user Experiences , to assure that it looks good and closely and easy to access. It also ensures about look & feel of website.

Back End Developer- Backend developer is a software professional who is responsible for writing core logic or functionalities of website, these are the experts who actually writes logic to process data and perform actions.

 

Full Stack Developer – A full stack developer is a software professional , who is responsible to handle front end and Back end development process of Web Application. They are responsible for designing and development of an application with databases or servers.

 

FRONT END DEVELOPER ROADMAP includes –

• Mark Up Language and Web Language such as – HTML , CSS and JavaScript.
• Asynchronous request & Ajax
• Specialized Web Editing Software
• Image Editing
• Accessibility
• Cross – Browser Issues
• Search Engine Optimization

FRONT END TOP SKILLS –

HTML

CSS

JAVASCRIPT

FRAMEWORKS – BOOTSTRAP, Angular JS, React JS, Node JS

Testing /DEBUGGING

DEPLOYMENT

FUNDAMENTALS OF FRONT END DEVELOPMENT- To move forward in front end development, the most essential skills you need to know are HTML, CSS and JavaScript. These skills are the very basic to get started with front end development. As a basic structure of any website is “Web Page” ,and by learning these three skills, anyone can create a “web page” but note  that Front End Development  is not only bounded to these skills only ,there are many more technologies need to learn to become an expert front end Developer.

 

1. Basic Computer – Usage of computer in our daily routine makes our work easier and faster. So before you start your journey in website/App development, you must know the basics of computers in order to carry out task smoothly.

 

2. Internet and Web Technology – As websites are being accessed on Internet only, so how internet is important to view your website on server, and how it works it is important to know.

 

3. Text Editor /IDE (Integrated development environment )

 

The text editor is the tool where you will write your code. Selection of right text editor will improve efficiency.

Visual Studio Code – Visual Studio Code is the best IDE for front end development. It works across all operating system such as mac OS, windows etc.

 

 

4. HTML – HYPERTEXT MARK UP LANGUAGE – HTML stands for HYPERTEXT MARKUP LANGUAGE. IT is considered as a standard Mark Up Language for building web Pages. It is a code that provide structure to any website.HTML offers a set of elements that displayed on the screen such as – buttons, images, Navigation ,Text ,Media,Sliders,Lists etc.

 

5. CSS – Cascading Style Sheet –

Css stands for Cascading style Sheet,by including CSS Sheet in a web page ,you can add styles like colors,fonts,Layout and animation to your web page. With the help of CSS, we can also build responsive websites using Media Query , that will change whole Layout of website and styles according to the device resolution ,so that user can view the whole website in a proper manner whether it is opened on large devices or even on smaller devices , with the help of css , multiple elements can be styled at once. To target different HTML elements, it uses tag, class and id selectors.

 

6. Javascript – Now after applying css to the website, it is mandatory to make website interactive for smooth and easy access to user .With the help of JavaScript we can provide functionality to the website, it helps to add actions and events in web page  like- click on the button , to open a menu , showing the progress in a progress bar , to send a request to the authentication service , which contains username and password ,before login or at the time of login , it will ask whether a user is an authorized user or not. So by using JavaScript on a web page, it can respond to different activities going on web page interactively.

 

7. Framework for Front End Developer-

It is defined as a software framework , that was developed to simplify the task of web development process, it also provide flexibility to create and web projects smoothly, specially it is designed to handle more repetitive task and features , involved in web Development Process. It consists of built in Libraries and resources which help us to create, build and manage Web Applications, Web Services And Websites. It consists of programs, code, libraries and compilers assembles together at single platform will help project development efficiently and interactively. The major framework used in frond end development is React, Angular, Vue.Js etc.

 

1. React Js – It is a front end JavaScript Framework used for building user Interfaces of an application, it creates single page applications, it will also helps us to create reusable UI Components. It is an open source component based front and Library.
2. Angular Js – Angular Js is an open source JavaScript framework used to build web applications. It was developed by Google. It can be used freely.

 

3. Vue Js – Vue .Js helps us to extend HTML attributes called directives. Vue.js directives offer functionality to HTML applications.

 

8. Version Control System –

A versions control system is valuable, if you are working on a large project or where you need to collaborate with other developers. It is software that allows you to manage and track changes in the source code and go back to the previous version of the code instead of manually reverting the changes. This increases the development speed and experiences as you spend less time managing the code, conflicts and helps recover to a previous version. GitHub is one of the most popular and widely used version control system.

9. Build Projects – The best way to learn any technology or anything is when you get practical knowledge. And this practical knowledge can be gained by building projects. While building projects, you face some real world challenges and when you fix them, you gain additional skills that ease your journey as a front end Developer.
10. Learn Testing – Software testing is another important skill to have in order to become an efficient front end developer, as many companies already have dedicated team of quality assurance for testing of applications ,basic testing of your applications to ensure usability and functionality.Witing test cases for your own code is one way to ensure that code is working as expected.
11. Learn the Process to deploy Website – Once you have created your website, you need to deploy the website, so that anyone on the internet can visit and use the website. In order to deploy a website, you will need to know the basics of hosting tools, like Git Hub, Cloud providers like Amazon web services, Google cloud platform, Microsoft Azure also providing hosting services.

 

Writer of the blog:

PRIYA RATHORE

ASSISTANT PROFESSOR

ICA , SUI