What Are the Technologies Used in Front-End Development?

Back-End, Front-End, Full-Stack. So, many denominations to talk about Web development, how to navigate? You need to coordinate a digital project and you do not know which profile to call? I will try to simplify your task.

In this article, I will answer these 3 questions:

1. What does a Front End developer do?
2. How can it improve my site?
3. With what does he work?

IN A FEW WORDS

Front-End development is a work of website programming and interface design.

The Front-End Developer will work on all parts of the site viewed by the client.

"Some compare his work to the work of a translator. "

Let me explain. In programming, the developer juggles with 4 types of languages, namely HTML, CSS, JavaScript, and PHP. He will need these languages to translate the graphics to deliver a website in the end.

Does it translate graphical elements? Yes. The Front-End developer uses the elements to write code to create the visual appearance of your site. He is also responsible for applying the design chosen by the web designer so that your pages and the elements of your site are coherent.

What do graphical elements include?

They include the graphics models of your website.

They also include style guides. It contains information about the font (typography, size, style) to use, colors in hexadecimal, dimensions, etc.

OPTIMIZES WEBSITES

The developer creates the environment for everything the user sees and touches about the content, layout, and interaction of the website.

The Front-End developer must consider several types of browsers, for example, Chrome, Safari, Firefox, and Internet Explorer (Edge). Why? Because it has to make sure that the site is displayed uniformly on all browsers. The developer will also design the site so that the design of the site adapts to the size of the different screens (computers, mobiles, and tablets). In other words, it is he who creates the site in responsive design.

The developer can quickly identify the glaring technical problems of your website and can correct these problems by choosing the most appropriate technology for the situation;

This improves the structure of the site so that it is faster and more fluid to navigate;

The developer also aims to improve the accessibility of your website.

WHAT DOES A FRONT-END DEVELOPER USE TO DO HIS JOB?

There are 4 types of language that the Front-End developer essentially uses: HTML, CSS, JavaScript, and PHP. These 4 languages compose the web pages and allow the pages to be displayed in the browser.

HTML code

This code is expressed in the form of tags and tags and can represent the skeleton of a web page;

It will define sections of a page as the location of a paragraph or title, for example.

This code helps structure the text hierarchy.

For example, using the <h1>, <h2>, <h3> ... <h6> title hierarchy.

It allows to insert an image in a page and to structure the information;

The HTML code is also used by the developer to define the clickable areas in a page, or for the creation of forms and links between your pages.

CSS

It is a language that allows to "decorate" web pages by applying pre-established styles in graphic elements.

To help you, compare HTML to a house frame and CSS to the finish of this one:

While only its structure and insulation panels are visible (HTML), the CSS allows you to determine what color will have the house, what type of bricks you will put, what shape, and how big the windows will be. The CSS can also decorate the interior of the house, for example, the walls, the type of ceramic, and the type of floor. In fact, the CSS is like the interior designer of a house, but for a website. It is this language that stylizes your site.

Here is an example of a site with CSS and without CSS. The content is the same in both cases. It's just to help you visualize the difference.

JavaScript

JavaScript is a language that is responsible for animations of interactive pages.

For example, in the photo on the left, when you arrive on the homepage of the Evollia site, you can very well visualize the logo because of its size.  However, if you go lower in the home page, the menu changes, it shrinks and the logo too. So, there is an animation created by JavaScript attached to the scrolling of the page, when you go down or up the scrollbar. These animations are designed to improve the site's user-friendliness and dynamism.

PHP

We have not forgotten the PHP. It's an equally important language for the developer. It is used to complete the HTML structure. I will discuss it in more detail in a future article.

IN SUMMARY

To sum up, Front-End development is a programming and interface design work provided by many famous companies like FutureOn nowadays. Whoever occupies this position will use graphical elements and 4 types of languages (HTML, CSS, JavaScript, and PHP) to create the visual and ergonomic aspect of your site. A Front-End developer can then create dynamic sites, but for more advanced features, he will have to collaborate with a Back-End developer.