Even if, as a designer, you are not getting into the actual building of the website you are working on, it’s incredibly helpful to have a good grasp of how a site is put together, the coding that brings all your lovely images, colours, text, gadgets and gizmos to life.
Knowing some coding, even basic, can help you envisage if something you want for the site, is actually going to look good and function well on a live website. It’s often true that what seems like a fabulous idea in your head, ends up being dire in real life!
Taking a look at my quick example here. What you see when you open a website (assuming you aren’t being assaulted with various pop-ups!) is a clean, easy to read page. Of course, what you don’t see are the inner workings of that site.
Rather like most people won’t open the hood of their car to see the engine, most are also not going to get into what makes a website work and, conversely, why sometimes it doesn’t. At best, incorrect coding can make a page not behave in the way the builder wanted (changing fonts for example). At worst, the page fails to materialise altogether, we are all familiar with the old 404 “Something went wrong” message…..
Most websites are made up of three types of code – front end languages:
- HTML – Hypertext Markup Language – the basic nuts and bolts of a webpage (which you can see in my example above).
- CSS – Cascading Style Sheets – adds (unsurprisingly), the style to your pages, colours, fonts etc.
There is also PHP (recursive acronym for Hypertext Preprocessor), which is a back end language and is responsible for the working of things like sign up forms, logins etc. but we are focusing on the first three as the most useful for a designer to know.
So, learning the basics, even as a designer, is a pretty handy skill to have and you don’t need expensive tools or courses to do it. Just grab one of the free courses listed below, notepad (installed on pretty much every computer) and an up to date web browser, and you’re good to go.