Front-end web development explained

Published
Written by
John Kavanagh

I make the 'front-end' of web-based software.. I'm not a designer and I don't work in IT. No, I can't fix your computer.. or your printer.. or the cracked screen on your phone..

Screenshot of CSS front-end code

Front-end development is something that I do all day every day, a skill set which I have spent a very large chunk of my life learning, practicing, perfecting, and earning a living from. Despite that, you would be surprised how difficult it is to describe what I do to someone else. The worst-case being those awkward family occasions where you have to explain - again - what you do to your grandfather who hasn't ever even switched on a computer, far less 'browsed the internet' on it. Naturally for situations like that I just tend to nod my head when asked if I work with computers; true though that might not entirely be..

For people a little more tech-aware, computer-science focused entries on Wikipedia, and the likes of this wordy - almost unintelligible - article from the Guardian really don't help to simplify things either.

I've tried a few different analogies to describe my occupation, my favourite being the union of architect, contractor, builder, interior designer, and decorator to build a house. However, the thing is that up until a few years ago this was actually a relatively obscure and misunderstood speciality, and in order to understand what I do you have to come to terms with a fairly simple concept: Websites are made up of two separate, but interlinking layers:

The front-end

This is everything that you see and interact with on a website. Think of it as being the 'front' end because it is the part of a website that is placed directly in front of you on your screen. The front-end is most commonly built using HTML5, CSS, JavaScript, and graphical elements.

This is the code that is loaded and processed on your computer, it decides how the data of the website is displayed, how it behaves when you interact with it, and even how it should respond and change if you happen to have an older (slower) computer, or be using a mobile phone (and smaller screen).

The back-end

In direct contrast to front-end, the back-end is code that you should never see whilst using a website (although it does occasionally peak out in things like query strings in URLs). It is everything that happens 'under the hood' - this code is run on the website's server it creates or provides the data which the front-end then displays to you. It is made up of databases, logic, and magic: those lines of green text you see flickering on darkened screens in bad hacker movies - that's back-end code. Of course, it is much more complex than that but let's not confuse things.

What about the designer?

Above I mentioned that I'm not a designer - a misunderstanding that I have come across more times than I can count throughout my career. Although it is true that what I do is visual and requires a certain aesthetic sensitivity, I'm simply not creative enough to 'design'. It is - of course - also true that there are people out there who both design and develop websites, but people like that are fairly rare and I'm not one of them.

A designer works in a visual piece of software like Photoshop or Illustrator: they are the first creative element in a website's development and make decisions about how the site will look and feel. They produces flat designs and graphics (essentially: a photograph or a picture) of how a couple of key pages of the website will eventually look, taking into account client requirements like branding, font choices, etc.

It is these flat designs that the client will um and ah over before any technical development (and my real role in the website's production) beings.

So, front-end development..

So front-end web development sits between the designer and the back-end developer. I take the flat designs that the designer has produced and break them down into reusable modules for the website. I build up the page structure using HTML, and style it - extending the designer's typographic styles and colour schemes - across the entire site in CSS, whilst creating and exporting graphical elements from the design.

Although the designer will have had little in the way of constrains during design, it is my responsibility to adapt that design to make sure it works as a website: that it loads quickly, that your new high-resolution screen gets the crispest, highest-quality graphics, and that it functions as intended in your browser, regardless of whether you are using an older version of Internet Explorer or the latest touch-screen smartphone. I also add in the extra nice touches like fades, animations, and interactivity using CSS3 or JavaScript.

Apart from interpreting and building up the designer's vision it is also my task to ensure that my technical development will integrate ('talk to') the code that the back-end developer is producing, building templates to ensure that the two layers work together to fetch and display the data that the website user is requesting.

Simplest terms

In the absolute simplest terms: if you can see it and interact with it on the website then chances are I built it. I am a front-end web developer; I do work with a computer but only in the same way that anyone else uses one as a tool for their day-to-day work pilgrimage. I don't work 'in IT', and I'm really sorry but I would have no idea how to fix your printer.

  • Standfirst image is just a screenshot of the (front-end) CSS code used in my own personal website, loaded in the Brackets source code editor: a free, open-source, development tool that I have become very fond of using!
Comments powered by Disqus
Top