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 to spend any more precious moments considering the need, but instead are focusing on what they 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 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. Most of it was based on existing, more feature-rich, 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 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 has 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 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. 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 on 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 help us in our upcoming task.
It also sheds light on why you likely 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 in a folder you can easily remember later, and open it on your browser (remember you can drag the file onto it).
This is a straightforward example of what an HTML document looks like 👶
Now let’s dig deeper into understanding some basics many of us overlooked when we started cobbling sites together.
First of all, at the start of the document, we have the <!DOCTYPE html> declaration, it used to be a bit more verbose and required some more information, but this is all you need today.
Next, 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 primarily 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, so that 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 that the head and body have white space before them and the elements inside them 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 by 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's 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 broken, though 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 a few exceptions called “void elements” 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 (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 mistakes to be made at first with tolerable consequences, allowing you to learn without losing 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, not a tutor.
You can find links below to free resources and tutorials to help you learn 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 👏
