What is Front‑End Development?

Whether you are ordering a takeaway, calling a taxi, or scrolling through Instagram, all these websites and apps are user interfaces that allow business owners to communicate with their audience. Front‑end development is a significant part of the development of these apps and websites. So, what is front‑end development? What does it entail? These are questions we will answer below.

What is Front‑End Development?

Front‑end development, also known as client‑side development, is the process of creating a user interface with code and connecting that with the back‑end logic, or APIs, that power the application. Usually a developers would use HTML, JavaScript, and CSS for this, or libraries such as React or React Native (for mobile applications built on the same technologies).

In short, anything you see or can interact with whilst using an app or website is the 'front end', and (usually) the remit of a front‑end developer.

The Basics of Front‑End Development

Generally, the front‑end developer will either also have a design background, or otherwise work alongside design and UX to convert their visuals into functioning code. To become a front‑end developer, you should be competent with the following...

1. HTML

Hypertext markup language, or HTML, forms the building blocks of a website. HTML is the markup language that what a developer uses to define the content and structure of the website. If using a JavaScript framework such as React, then this can be replaced with JSX, which is similar in function, but a little more advanced than necessary for this article.

2. CSS

Cascading style sheets (CSS) is a way to describe how your website will look as a final product. Using CSS, developers define how they want their content displayed, either as pictures, words, speech, or any other media.

With the widespread adoption of preprocessor scripting languages such as Sass or Less, actually hand‑coding CSS is now virtually unheard of. Fortunately in my experience, these preprocessors tend to all work in a similar way, and as an enhancement of vanilla CSS so once you master one, your skills will be transferable to others.

3. JavaScript

This is a simple, prototype‑based, object‑oriented programming language used to define the functionality of the website or page. JavaScript is parsed and runs on the client side: that is to say, in the visitor's browsers (in contrast: back‑end code such as PHP runs on the server). In its simplest form, JavaScript can be used to add interactivity and dynamism to an interface. It also has far more advanced applications ‑ especially in frameworks such as React or Angular ‑ where it can be used to interact with various endpoints, regenerate templates on the fly, or even communicate and control a NASA rover on another planet..!

The three languages above are the basic building blocks of front‑end development.

What Does a Front‑End Developer Do?

A website has a lot to it. There is the way you display the content, the user interface, and how the website responds to your interactions. While a general web developer might be working on a user interface, ensuring that a web page works seamlessly, and across different browsers and devices of varying power and size depends solely on the front‑end developer.

As a front‑end developer, the key concern is the performance of the website and ease of access for your users. This generally requires a combination of both creative and technical skills to ensure that any user visiting the website has the best experience, or ‑ at least ‑ the best experience possible given the device they are using.

With that said, you should not get confused between front‑end development and back‑end or full‑stack development. Whilst the front‑end developer focuses on the interaction between the user and the website, the back‑end development focuses on the code that runs on the server: the code that 'powers' the site. The two work hand in hand, and there are often aspects of overlap, but each requires quite a different set of skills.