Learning to make websites in HTML

featured image

The time is ripe for me to show you some design samples I coded in HTML and some CSS, paying a special focus on fine typo­graphy. Learning HTML also helped me appreciate the anatomy of a humble website. While many websites are now made with simplis­tic, drag-and-drop, visual website-builders (this site included), many websites, say two decades ago, were painstakingly coded by hand (which is more time-consuming than I intially thought).

By the way, these samples were created from the handy about:blank link which can be accessed on almost every internet browser. I have currently made only three satisfactory designs, but I will update this post in the coming weeks when new designs are added. Here they go!

The text extract above sits in the open domain at present; sourced from Google Books. © 2021 Thomas Rettig. All rights reserved. Sorry for the bottom “contact me via email” line — it would indeed be distrubing if Franklin had an email address!

This first sample took advantage of different stylistic alternates within the font. Body text was set in Inter, a, bland, yet somehow charming, typeface for digital interfaces. It was generously made free to the public by Rasmus Anderson. I activated the alternate lowecase “l” for the body text in order to disambiguate it from the digit 1. The highlighted text was in medium sea green via CSS.

Extracted text taken from Klim Type Foundry’s website. Here and here. © 2021 Thomas Rettig. All rights reserved.

I opted for a fresh and contemporary vibe over here. The black weight of Bodoni Moda, an elegant prima donna, was chosen for the heading. Body text was set in Source Serif Pro, which features lower contrast to aid both legibility and readability. These two typefaces were sourced from Google Fonts.

It would’ve been foolish for me not to recreate the ominpresent, corporate style we see so often on the web. I added lots of white space, thus giving some breathing air to the text. No boring stock images were put. And the much-abused button with capitalised letters were finally positively letterspaced (haha, get the joke?). The humanist sans serif Commissioner was used because of its impressively versatile variable font capabilities. Whenever the button is hovered by the mouse, the flair axis shoots up and the weight increases. I intended to make a quick video demo of this, but unfortunately I closed the browser tab so my hours of hard work was gone immediately. Sigh.

Featured photo by Markus Spiske on Unsplash


Published by Thomas Rettig


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: