The Designer’s Guide to the Galaxy… (of Code) E01

Among the thousands of stars in the milky way of design articles, one story will froth up above all others — “Should designers learn how to code?”

This is not that story.

Illustration by Leandro D’Andrea. Follow him on or .

This is a story for those fearless souls, who have already decided not spend any more precious moments considering the need, but instead are focusing on what they actually want, to learn a skill set that will not only be extremely valuable but hopefully darn fun also! 🙌

As for what I want, it is simply to be your guide on a perilous but thrilling journey, into a universe full of new discoveries and unpredictable challenges.

Like most stories, this one starts at the beginning…

Ours commences in 1989, more precisely on March 11, when Tim Berners-Lee, a young engineer at CERN, , the Hypertext Transfer Protocol (HTTP), the Hypertext Markup Language (HTML) and the Uniform Resource Locator (URL).

Don’t panic (just yet). Look at this:

None of what Berners-Lee suggested was groundbreaking. In fact, most of it was based on existing and much more feature rich and complex protocols and languages.

For instance, HTML borrowed heavily from the (SGML) a language used mainly in governmental and commercial documents for its cross-device compatibility and threw , which he borrowed from , into the mix.

Hypertext and Hyperlink are a bit of a mouthful, but they are straightforward concepts (nowadays at least). The word hyper comes from Greek and means over or beyond, so hypertext is a text that as some other texts beyond it, connecting them you have the hyperlinks or just links for short.

But going back, what he delivered was an easy to learn and very forgiving document language, coupled with a simple internet protocol to share those documents between servers and the user’s computer.

It turned the web into something anyone with a computer and internet connection could access, and the simplicity gave a lot of regular but passionate folk, the power to create their websites.

On top of that, all of it was given away for free, including the first implemented by Lee in 1990. In hindsight, these were the main reasons for the explosive success that the world wide web is nowadays, with over 1,5 billion websites living in servers all around the world.

Google’s celebration doodle for the 30 years of the web

Wait, I came here to learn how to code!

Yes, my googly-eyed friend, I promised you a journey and so far all you were given was a look into the past but trust me, knowing how HTML came to be will, in fact, help us in our upcoming task.

It also sheds a bit of light into why you have likely already heard a fellow engineer stating that writing HTML and CSS is not programming. It is, albeit a very basic subset of what full-blown programming languages can achieve.

Now let’s get practical and start from the basics! 👨‍💻👩‍💻

You already know HTML is a document format, so let’s boot up a text editor so that you can start writing. If you are on Mac, , and on Windows, (check the links for some details I’m skipping about editing and saving).

Now copy the following code into your file, save it on a folder you can easily remember later and open it on your browser (remember you can just drag the file onto it).

A barebones example of an HTML document in code format
This is how the file you just edited should look like on the browser

This is a very simple example of what an HTML document looks like 👶

Now let’s dig deeper into understanding some basics that a lot of us overlooked when we started cobbling sites together.

First of all, at the start of the document, we have the <!DOCTYPE html> declaration, this used to be a bit more verbose and require some more information, but this is all that you need today.

Next up, you have the <html></html> opening and closing tags that wrap the actual document content. Inside them you will always have a <head></head> and a <body></body> pair.

The head has content mostly for browsers, search engines and other robots (🤖) to read, in this case, the meta element which defines (there are plenty of other metadata types, just so you know) and the page title (that you see on the browser tab).

Inside the body is everything that is supposed to be rendered on the page, our “Hello world!” heading text).

White-space matters even for code

Have you noticed how head and body have white-space before them and the elements inside them have even more?

This is known as indentation, a coding convention common across programming languages. Indentation is used to make it easier to read your code, in HTML it usually serves to indicate that elements are children of a parent element that wraps them.

Indentation can be applied pressing the space or tab key, and this dual possibility is . A pointless one, since you can set up your IDE (short for , a topic for another article) to automatically convert it, according to your team coding conventions.

Regardless, my usual rule is to enforce four spaces as equivalent to one tab (which is what I use in case you were wondering).

Anatomy of an HTML element

Before we go, let’s take a look at what is an HTML element, and it’s composition…

The majority of elements need to have an opening tag, content and a matching closing tag, to produce valid HTML. Failing to close them, will make your document look a little broken, thought browsers are moderately forgiving and will try to minimize the outcomes of human error. 🚑

A tag, in turn, is composed of an opening “angle bracket” (<), the element name and a closing bracket (>) for the opening one, while a closing tag is very similar having only a “forward slash” (/) before the name.

This is true for most HTML elements but there a few exceptions called “void elements”, which do not require closing or content. You already saw some of them in this very article, like <!DOCTYPE html>and <meta>.

You will (or already have) come across void elements that look like <br /> or <hr />. Pretend you never saw them, these are remains from a time when a few distraught engineers created a variation of HTML dubbed XHTML (e), an attempt to make the language more akin to “real” programming language, changing the forgiving nature of HTML in favor of more strictness (minor errors would make your page display blank 😱).

Fortunately, the web as a whole did not warm up to this idea since it went against the things that allowed the world wide web to grow and be accessible to all kinds of people in the first place.

HTML is simple to learn and allows for mistakes to be made at first with tolerable consequences, allowing you to learn as you go without losing your motivation.

And that, my now probably tired eyed friend, is where we park our code spaceship in orbit, for a well deserved rest and refueling.

As we continue our journey some shortcuts will be taken, after all my promise was to be a guide and not a tutor.

You can find some links below, to free resources and tutorials that should help you learn all you need about HTML. Best of all, they are free just like the great gift that Sir Tim gave the world! 🙇‍♂️

So long, and thanks for all the claps 👏

Buy me a coffee if you like what you read!

More episodes

Further online reading

Learning resources

Books and media

A Portuguese Designer and Unicorn in Training™, living the lagom life in Stockholm, Sweden.