Creating a website Hero module with flexbox and the ‘vh’ unit

I wrote a tutorial on about creating a hero with flexbox and the ‘vh’ unit.


My default browser is Safari. Safari has a feature called 'Top Hits'. These are websites you regularly visit. When you start typing a website address, Safari suggest Top Hits.

I thought it is a fun thing to type every letter of the alphabet and see which websites Safari comes up with. This results in my URL ABC.

You can do the same. I don't know if other browser have a similar function to Safari's Top Hits. Firefox auto completes URL's you type based on browsing history.

It's nothing serious, just for fun! You can create your own URL ABC. Share it on Twitter and use #urlabc. Then, many people can enjoy creating their own URL ABC.

A CSS Grid Based Layout

Since the cool boys and girls are talking a lot about the new CSS Grid specification lately, it’s time to dig into this subject myself. For me, the best way by learning this, is: 1. choose a real world problem and 2. write about it in a post. The first is done and the second are you reading right now.

Please note, this is not a complete guide to CSS Grid. Others have already written about it. I've included references after this post. Please, also check the browser support of CSS Grid. At the moment of writing this post (July 2017), the global browser support is around 70%.

This post covers how to create a web layout with CSS Grid. I'll explain each step and include all HTML and CSS code needed.

Grid layout

I started with a sketch (left). It shows the layout I want to build using the Grid Layout. At the right you see a screenshot of the final result (desktop view).

3 dingen die ik heb geleerd op WordCamp Europe 2017

Van 16 tot 17 juni was ik in Parijs voor WordCamp Europe 2017. WordCamp Europe is een jaarlijkse conferentie over WordPress en met bijna 2000 deelnemers een van de grootste conferenties over WordPress ter wereld. WordCamp gaat niet alleen over WordPress, maar ook over meer algemene webdesign onderwerpen. De drie belangrijkste dingen die ik geleerd heb:

  1. Toegankelijkheid is goed voor iedereen
  2. Inhoud gaat voor presentatie
  3. Themes!

Toegankelijkheid is goed voor iedereen

Er waren meerdere lezingen over toegankelijkheid (hiervoor wordt de Engelse term accessibility of a11y meestal gebruikt) De beste lezing vond ik Selfish Accessibility van Adrian Roselli. Deze lezing is terug te kijken op Met ondertiteling (!), selecteer CC rechtsonder de video.. Toegankelijkheid gaat over het beschikbaar maken van je website voor zoveel mogelijk doelgroepen. Dus ook voor mensen met een beperking: visueel, fysiek of cognitief.

Responsive images with srcset and sizes

With the new attributes srcset and sizes for the <img> tag, you can specify multiple sizes of the same image. The browser chooses the best size for each situation. This will help serving better images for your users and improving the loading time of your website.

These new attributes are available for some time now. However, I didn't manage to understand it fully. There are great articles on the web explaining this new syntaxLike the great article 'Srcset and sizes' from Eric Portis. But I couldn't wrap my head around it. And especially, I missed in those articles how one could apply srcset and sizes to real world problems.

So, that's why I wrote this article about srcset and sizes. It comes with an example of a common website layout: a page with sidebar. I hope it will help you better understand srcset and sizes and how to apply it to your website projects.