What’s a front-end?

Probably when you walk down the streets, the first thing you see are the glittering, eye-catching shop fronts, created to lure you inside. You choose the most attractive one, open the door and step inside.

The same thing happens on the web. As you browse the Internet for the things you need, you come across the most attractive site, open it and that’s it.

Table of Contents

But if shop windows can show you what’s inside, inviting you to touch the products, it’s a bit different for websites.

What makes the visible elements of the site possible, how they interact with a user, with each other and with the system behind it all? It’s the Frontend, and today we’ll tell you a bit more about it.

What is a frontend and what is it for?

The frontend of the website is everything you see and interact with through a browser. So, the creation of this visual part is called frontend development.

You could even say that designers who create user interfaces and planning experiences are also frontend developers, as they work collaboratively on the same part of the project.

To create the interface, developers use a combination of HTML (for basic page structure and content), CSS (for visual editing) and JavaScript (to make websites interactive).

The same set of tools is used to create progressive web apps: mobile apps that look and feel native but are created using frontend technologies.

It is important that developers in this area have knowledge of and work with software such as AngularJS and EmberJS, Bootstrap, Backbone, Foundation, which ensure a good look and feel on any display device.

In addition to these, jQuery and LESS, which are libraries that are responsible for packaging the code faster and more efficiently.

With the mastery of these tools, developers must collaborate with user experience analysts and designers to successfully complete the whole process.

It is also important to be able to partner and work seamlessly with other teams in the business to understand specific goals, needs and opportunities, and then execute on those directives.

So what is a Frontend for?

Everything you can see on a website right now was made possible by frontend development.

It’s the end result, assembled by a developer. A designer makes the logo and graphics, a photographer takes the pictures and a copywriter writes the text.

The person in charge on the Frontend puts all those pieces together, translates them into the language of the web, and builds the experience you have with each web page.

Tools for the developer

Let’s talk a bit more in detail about the tools and skills a frontend developer needs to create the interface of a website.

HTML

It is a codification designed to create websites so that they can later be browsed by anyone accessing the Internet.

It is commonly used to structure a web document and define elements such as headlines or paragraphs, as well as embedding images, video and other media.

HTML also consists of a series of short codes called tags, standardised in a text file by a site builder.

The text is stored as an HTML file and viewed through a browser, which scans the file and interprets the encoded text into a visually accessible form, and ideally renders the page as the designer intended.

CSS

It is a codification of style sheets. It defines how HTML elements should be presented on a web page in terms of design, layout and variations for various devices at different screen sizes. CSS can determine the visual and aesthetic presentation of many different web pages at once, and it works by interacting with HTML elements.

  • To communicate with each other, CSS uses selectors.
  • A selector is the part of the code that defines which piece of HTML will modify and impact CSS styling.
  • A declaration contains properties and values that are used by the selector.
  • Properties define the font size, colour and margins. Values are the settings of these properties.
    For example:

P {

font-size:24px;

colour:blue;

}

Then we have:

  • P (of paragraph) is the selector.
  • The bracket { } sets a declaration.
  • Font-size and colour are the propierties
  • while 24px and blue, are the values

Javascript

It is one of the most popular programming languages. It is best known for providing a full range of technologies for both frontend and backend development.

In the case of Frontend, it is applied to make dynamic web pages.

Javascript increases the overall interactivity of a website. It allows the modelling of animated user interface components such as image sliders, pop-up windows, extensive site navigation menus and more.

It provides websites with extended functionality that cannot be achieved with HTML and CSS alone. In addition, it allows pages to respond to user actions and refresh dynamically.

Thanks to JavaScript, this process does not require a page reload to alter its rendering.

More practices that go into frontend development

We have already outlined the basic elements for frontend development. However, there are other terms and concepts that a frontend developer must understand.

Responsive design

As more and more people access the Internet from their mobile devices rather than from their desktop computers, responsiveness and adaptability is a necessity.

Responsive design makes various aspects, such as interface design, content and functionality, fit seamlessly to the device being used, be it a computer, tablet, mobile, etc.

For example, when visiting a website from a desktop computer with a large monitor, the user gets numerous columns, heavy graphics and an interface designed especially for the mouse and keyboard.

On mobile, the same website appears as a single column adjusted for touch interaction, but with the same basic data.

Accessibility and inclusion

Accessibility means making a website available to as many people as possible.

This concept not only includes all types of disabilities that people have, such as visual, cognitive, hearing or mobility. It also encompasses issues of law, compliance standards, different mobile devices and different types of network connections.

Share in your social networks

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Related Posts

Web-Magento
CMS

Create your website with Magento

The Magento content management system is an allied tool for e-commerce, as it is an open source CMS. This platform allows the construction of a

Backend
CMS

What is a Backend for?

Websites are like an iceberg. There is a visible part which is the interface that you interact with (Frontend), but there is another part that

wordpress
CMS

Free WordPress themes

For WordPress, the world’s most widely used CMS content management system; Perhaps millions of developers around the world are designing dozens of new themes every