Front-end Development

Front-end development is essentially the look and feel of a website. It is building interfaces and the visual front (hence the name) of a website.

Code-wise it is a mix of HTML, CSS and Javascript. Skill-wise it is a mix of coding, logical structure and also an eye for detail towards aesthetics. You need to know how to take a design or design ideas and build it in a clean way that fully respects and matches the design.

The Gap Between Design and Development

Design tools like Figma, Sketch, Photoshop, Illustrator etc all have their quirks and never match up exactly with the code behind a website. The best example of this is fonts and text. In a design tool the text will have a perfect bounding box, and lovely careful spacing of say 20px vertically between items. When you build this in HTML, the text has a different bounding box i.e. it can have extra space around it. This means if you chuck in 20px as the spacing it will most likely be wrong!

This is what I think of as the gap. Designer designs something beautiful, developer then codes something beautiful but it doesn’t quite match up. Sure the code is clean, but the white space is off. This for me is the real skill in front-end development – to match design sometimes you need to have slightly messy code.

Messy Code

When I say messy code, there are still good ways of going about this. The underlying structure needs to be rock-solid and easily maintainable, but the very top visual layer – that is where (if you plan it right) there is room for some micro adjustments.

I think of it like double glazing. The frame has to be measure properly, the glass has to be tempered and all that good stuff. If you want a perfect fit on those windows though, then you’re gonna need some of those plastic spacers. Unless you’ve taken a window apart, you won’t see them, but if and when you do, you will see that are chaotic and ugly – but they are more often than not, necessary.

In real coding terms this means your spacing under a text element might be 18px instead of 20px (or more accurately 1.125rems because that’s the units we mostly use). You’d be amazed by how many developers can not handle this lack of neat, round numbers in their code! I have learnt to live with it because I know the end results is better for it.

I treat this extra care and attention with spacing as another level of progressive enhancement.

Progressive Enhancement

As well as a good underlying code and structure and the ability to create nice visuals they are many more skills involved in front-end development. A key one is accessibility and progressive enhancement.

At it’s core, this is building something everyone can use, but I think of it as more a school of thought and away of approaching building. It means everything you build has a contingency plan and will work in multiple ways. Someone has javascript turned off – well that site should still load. Someone wants to bump up the font size to 200% – that site should still be usable.

Speed, Performance and SEO

On top of all this, the site still has to work well under the hood. It needs to load fast, be responsive to different screen sizes and devices with or without touch. Getting good performance means things like correctly sizing and compressing images, loading the right image for different devices and lazy loading (only load things when you need them).

Good performance and clean code is the basis for good SEO (search engine optimisation). Content is incredibly important too, but if the site is built properly that’s half the battle.

Putting it all together

As you can see there are lots of pieces to the front end puzzle. They all combine together to make something of quality… and this is just the basics!

You usually need to combine this with a decent backend like WordPress so users can edit and change the site. Sometimes you want some animations to take your site up or notch, or need to display some complex data in an easy to understand way – there is when you need some creative development.