Front End Developer

Introduction

FRONT-END : Front-end means the front side of a website, we can call it a user interface

contains : texts , buttons ,images ,videos ,tags etc , all these are used for making the interaction with the website cool.

So front-end is a practice that makes user interface comfortable and easy to to use .

• 

HTML, CSS and Javascript are the main building blocks for creating any website.

HTML(Hypertext markup language):

It is the language used for developing the web pages

Tells browser what to display and how to display

It is the skeleton of the project

Tags and attributes are vital components of this language

CSS(cascading style sheet):

CSS is used for styling the HTML elements

There are various types eg : inline css that is adding css to html elements

embedded css in which css is added inside html page

External css where in we add css externally and link the file to html page , this leads to easy handling and understanding of code .Therefore the maintenance is easy

The elements are picked by class-selector, id-selector, universal selector, type selector etc

JS(Javascript):

javascript is a client side scripting language

It executes in user’s browser

We make the websites alive by adding different logics to it

This is used at both frontend as well as backend

ES6- it is also called the modern javascript , for example fat arrow function, let and const ,async await ,math objects etc.

Frameworks and Libraries

Frameworks and libraries are both code written by someone else that helps you perform some common tasks in a less verbose way

A software framework is an abstraction in which software, providing generic functionality, can be selectively changed by additional user-written code, thus providing application-specific software.

A library is a collection of resources used by coders, often for web developments. These may include configuration data, documentation, help data, message templates ,pre-written code ,classes or  specifications

The key difference is in the “Inversion of Control”, commonly called as IoC. When we call a method from a library, we are in control. But in framework, the control is inverted i.e. the framework calls us. It defines a skeleton where the application defines its own features to fill out the skeleton.

for example, in Framework we use :

$(document.ready(){     // this call will be done by the jquery 
// framework when document will be ready.
    
    function() {
        /* your code */    // our implementation inside the framework's function
    }
});

where as in library, we normally have its object to call its functions or we simply call them. Ex: 

str = "Geeks.ForGeeks"
var pos = str.lastIndexOf("."); // simply calling function of string library

Some popular libraries/frameworks

The most widely used libraries/frameworks are React-js ,Angular and VUE

There are many options available but based on the time required, the experience level one may choose any suitable libraries or the frameworks

The common question all beginners have is from where to start

so lets compare the two

• 

• 

• 

• 

So the conclusion here is , both are very good in its own field .

Road map for React

Getting started

You can use online code editors to practice, or you can use Create React App.

Then setup a development environment in visual studio or in other editor.

To grasp all the fundamentals of React, you can start with the following tutorials:

React official documentation by React

Beginners guide to React by Kent C. Dodds

Fundamentals of React by Samer Buna

By now, you will have a basic idea of the fundamentals of React. It’s enough to start developing simple web apps in React.

Now, take a look at the React official tutorial:

React Official tutorial by React

It’s a well-written article covering the fundamentals of React. And it also explains the specific topics very clearly.

Last but not least, learn how to connect to APIs with React apps:

Fetching API with React.js by Ethan Jarrell

Start building some projects

1. Simple todo-app
2. Simple calculator app
3. Build a shopping cart
4. Display GitHub’s user stats using GitHub API

React Router

React Router helps you create routes to your single page applications. It’s very powerful and easy to use with your React application.

To get started:

React Router tutorial by Paul Sherman

React Router and intro to SPA by Learn Code Academy

Routing React apps by Scotch.io

These articles are more than enough for you to get started with React routing.

Projects

1. A simple CURD application
2. Hacker News clone

Webpack

Webpack is a famous JavaScript module bundler. Webpack helps you to maintain dependencies as static files for your project so developers don’t have to do it.

Webpack also comes with loaders. Loaders help run specific tasks around your project.

To learn much more about Webpack, follow the following tutorials.

When and why to use Webpack by Andrew Ray

Webpack tutorial by Learn Code Academy

To setup your local React environment using Webpack, you can refer to the following GitHub repository:

React SPA template by Hanif Roshan

Server rendering

Server rendering is one of the coolest features in React. It can be used with any of the back-end technologies.

Server Side Rendering (SSR) in React helps you to create components in the server and render that as HTML in your browser. And when all the JavaScript modules are downloaded in the browser, React takes the stage. Simple!

First of all, take a look at the React-DOM API:

React-DOM API by React

Redux

Redux is a JavaScript library developed for maintaining application states. When you are building a complex application, it will add overhead to manage states across components. Redux helps you store all your states in a single source. And of course, React plays well with Redux 🙂

To get started:

Redux tutorial by Learn Code Academy

Redux tutorial for beginners by Valentino Gagliard

Git : The control system

To track the project history and to work as a team we need control system such as Git

WHY IS GIT SO POPULAR???

• 

• 

TYPES OF GIT

Future Tool

Once we get very good hold on the basics and frameworks we can go for css preprocessors

various new tools and features are present in the preprocessors which makes coder’s life easy

this is also called future css

• 

Here is a brief introduction how css preprocessors works

• 

Options available are :

Here is a road map explained in brief for a beginner

But always remember the technologies keep updating and evolving , so keep updating about different technologies around the world and keep updating yourself .

THANK YOU !!!