Marina

Posted on Aug 30, 2020 • Edited on Sep 4, 2020 • Originally published at hybridcattt.com

"Building a Well-Rounded Website: Essentials"

I first learned the basics of web development in the 2000s, and have since contributed to web applications code in my corporate jobs and worked with HTML&CSS in the context of ebooks.
But the first real website I made and published from scratch was the first version of my personal site that I built two years ago.
It was a single index.html with a static layout and very little content.
The blog that you are reading right now is built with a static site generator.

During the last couple of years, I have accumulated a large collection of bookmarks that I find helpful when making websites.
I regularly keep referring to many of them.

All of these resources are relevant to most kinds of websites, regardless of what stack or framework you use.
If you are building a website on your own, I hope this collection will prove to be useful.

All links are from my personal collection. I have no affiliation with any of the linked resources.
All linked resources are free to use.

Page Layout

Flexbox

Table-based layouts are a thing of the past, with Flexbox being the most common way to layout web UIs these days.
A Complete Guide to Flexbox ended up being one of the resources I get back to the most.

CSS Selectors

There's a lot of ways to apply styles to an element in CSS.
I love the CSS selector reference from w3schools. It provides a short overview of each selector and lets me quickly choose the best option.

HTML & Accessibility

While browsing Twitter one day I stumbled upon an article recommendation from @ReyTheDev for structuring HTML semantically to achieve low-effort accessibility and reader mode support.
It's a gold-mine when it comes to the basics of modern HTML.

Navigation

Opening external links

It was a discovery that opening links in a new tab is unfriendly to accessibility and mobile usage.
This is usually achieved with target="_blank" on links.
I've never looked at it in such a way that the user can always opt-in to open something in a new tab, but they can never opt-out.
UX Collective wrote a comprehensive article on opening links.

SEO

To make a site searchable through search engines, it is essential to get several meta properties right.
Shout out to @MarinaHuber for introducing me to this comprehensive SEO check tool. It checks not only the technical side, but also the content itself.

Canonical URLs help avoid duplicate content on the web. They are useful even if you post only in one place. Check out rel=canonical: the ultimate guide.

Art

It's hard to avoid needing graphic resources, even when building a simple website.
There are many copyright-free collections out there, for example Unsplash, Undraw and Black Illustrations.

Favicons

The quickest way to get favicons is to use an online generator.
favicon.io lets you make favicons from text, emojis, and images. For example, I made my favicon from the text "MG" - creative, right!
Files will be ready-to-go along with a code snippet.

Favicon checker is super handy for verifying that all favicons and manifests are in place.

Icons

Simple Icons has a comprehensive catalog of free SVG icons for popular brands.

Colors

I've tried several color scheme generators before ending up with Coolors.
You can pick a palette from a large catalog, modify or create your own, even based on an uploaded image.

Social Sharing

Buttons

Twitter's sharing widget and similar components from other social networks have tracking embedded, so I opted out of using them.
I am also avoiding using unnecessary cookies or any kind of local storage, so I wouldn't have to show the infamous cookie banner.

Social Media share buttons without javascript documents sharing links for many popular social apps and networks.

Sharing button generator is a great starting point for rolling your own buttons.
I had to tweak the CSS, but it was still easier than starting from scratch.

Preview cards

Most social networks use Open Graph metadata to generate preview cards.
Open Graph Protocol homepage gives a nice overview of the generic webpage properties and directions to dig deeper.

Twitter has its own meta properties inspired by Open Graph. The main addition is that you can specify the style you want your cards to follow.
Here's the link to Twitter's Documentation on Cards. Other social networks such as LinkedIn and Facebook rely on Open Graph protocol and don't have their own properties sans rare exceptions.

Testing preview cards

Testing preview cards is something that I did a lot of, making sure I like how my site looks when shared.
I certainly did send messages to myself, nothing wrong with that :)

Each of the major social networks has its own card validator, which lets you easily preview the cards. I only have Twitter Card Validator bookmarked, but here's also LinkedIn Post Inspector and Facebook Sharing Debugger.

Card metadata is heavily cached on the social network's side, so they don't have to hit your webpage every time someone is looking at a post with your link.
Card validators have a hidden perk: they also invalidate the respective caches.
This article goes in-depth on cards and caching: How to Clear Facebook Cache, Twitter Cache, and LinkedIn Cache so Your Content Looks Right.

Tracking

I care about privacy, so having Google Analytics on the previous version of my site was bugging me.
Once I randomly stumbled upon GoatCounter - privacy-friendly open source web analytics.
GoatCounter's rationale resonated with me, and now it is my go-to analytics service. By the way, it is completely free for non-commercial use.

Inspiration

humans.fyi is a huge catalog of personal websites, where you can browse by platform, dominant color, and even occupation. Exploring other people's sites gives endless inspiration for layouts, color schemes, and fonts. And a little bit of FOMO.

TL;DR

Thanks for reading 🙌

DEV Community