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.
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, first proposed the different building blocks of the World Wide Web, 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 Standard Generalized Markup Language (SGML) a language used mainly in governmental and commercial documents for its cross-device compatibility and threw Hyperlinks, which he borrowed from existing Hypertext software, 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 browser 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.
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, you will want to use TextEdit, and on Windows, you will need Notepad (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).
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
head has content mostly for browsers, search engines and other robots (🤖) to read, in this case, the
meta element which defines character encoding format (there are plenty of other metadata types, just so you know) and the page title (that you see on the browser tab).
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
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 the topic of one of programming's longest raging "religious wars". A pointless one, since you can set up your IDE (short for Integrated Development Environment, 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. 🚑
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
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 (Extensible Hypertext Markup Language), an attempt to make the language more akin to “real” programming language, changing the forgiving nature of HTML in favor of more strictness (minor syntax 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!
Tiago Almeida on Buy Me A Coffee
A Portuguese Designer and Unicorn in Training™, living the lagom life in Stockholm, Sweden. Welcome to my BMC page. If…
The Designer’s Guide to the Galaxy… (of Code) E02
What tools should you use for writing code?
The Designer’s Guide to the Galaxy… (of Code) E03
A not really in-depth, but still deep enough, look into the anatomy of an HTML page.
Further online reading
First Things First, What is the Web? - The History of the Web
What is the World Wide Web? Well, that's easy. It's the Uniform Resource Locator (URL), the Hypertext Transfer Protocol…
HTML: Hypertext Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of…
Dash is a fun and free online course from General Assembly that teaches you how to program with the basics of web…
HTML Tutorial: Learn HTML For Free | Codecademy
In just 3 hours, learn basic HTML, the skeleton of all web pages, and place text on a page, add images & videos, and…
Books and media
Broad Band by Claire L. Evans
Broad Band by Claire L. Evans, 9780735211759, available at Book Depository with free delivery worldwide.