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

This is not that story.

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

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.

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, 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).

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 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).

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 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. 🚑

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 (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!

More episodes

Further online reading

Learning resources

Books and media

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Saga of Reviews

Un-BEAR-a-BULL: Building a Strategy During the Bear (Basics)

DIY Google Home Assistant

Project update: Coin Distraction

{UPDATE} Alice: My Wonderland AR Hack Free Resources Generator

Why do programmers wear headphones? For the same reason that you can’t juggle.

A foo’s errand

An Interview experience

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tiago Almeida

Tiago Almeida

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

More from Medium

How to avoid complacency as a developer

Make your Github profile look great!

Writing Clean Code

How to Start a Software Development Company Right after College?