Front‑End Web Development: A Beginner's Introduction

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 is the work of building a user interface and connecting it to the services or back‑end logic it needs. On the web, that normally involves HTML, CSS and JavaScript, often with a library such as React. React Native applies React's component model to native applications, but uses native components rather than the browser's DOM elements and ordinary CSS.

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

HTML, short for Hypertext Markup Language, defines a web document's content and structure. React often uses JSX to describe elements, but JSX does not replace the need to understand HTML. A web interface still needs meaningful headings, links, forms and other appropriate elements in the output the browser receives.

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.

Teams may write CSS directly or use tools such as Sass or Less to organise it. A preprocessor adds features and a compilation step; the browser still applies the resulting CSS. Learning selectors, the cascade and layout remains useful whichever authoring tool the project uses.

3. JavaScript

JavaScript adds behaviour to web interfaces, from responding to a button to fetching data and updating a view. In the browser it runs on the user's device, but the same language can also run on a server through a runtime such as Node.js. Libraries and frameworks such as React and Angular help organise more complex interfaces; they do not change that distinction between where code runs and what language it uses.

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: how content is presented, how the interface responds and how it behaves across browsers and devices. Front‑end developers bring specialist knowledge to that work, but quality is shared with designers, testers, back‑end engineers and the people deciding what the product should do. It depends on how those pieces work together.

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.