Tutorial: Four CSS Layout Modes and Their Use Cases
In times when it feels that everything is built using powerful CSS layout algorithms like flexbox or grid, I’d like to have a look at some other layout modes still required to build great designs.
Tutorial: Creating a Dark Theme using CSS Custom Properties
Custom properties are a great addition to CSS. In this article I give you a short introduction how they can be used to build a dark theme for our small tutorial website.
Tutorial: Responsive Images With HTML
HTML offers a bunch of great features to include images on your website that perfectly fit your responsive design and to improve their performance. Let’s explore them together in this article.
Forms on the Web That Make Me Cry and Why
Forms are everywhere on the web. Unfortunately, very often they turn out to be an accessibility and UX nightmare. Here are some examples of forms I found, what problems there are, and how to (easily!) fix them.
Tutorial: A Responsive Form Layout with CSS Grid
CSS grid is a powerful layout algorithm that enables us to build great designs. In this part of the tutorial series we use it to create a responsive layout for a small contact form.
Connecting My Doorbell to the Internet: The How and Why
In this article, I share my experiences and thought process while coming up with ways of upgrading my doorbell and intercom system. There’s also a short how-to to follow along.
Tutorial: Building Responsive Websites
Websites are responsive by default. They adapt perfectly to every screen size—without any help from CSS. The goal of this article is to learn the basics about modern CSS features you need to build advanced responsive layouts.
Tutorial: The CSS Box Model & Layout Basics
What is the CSS box model and how to transform a hand-drawn wireframe into a webpage layout? These are only two questions I am going to answer in this article.
CMS-Driven Content Structure for a Static Next.js Site
This is a guide on how to create reusable Contentful components that define the page and content structure of a static Next.js website by keeping the design and business logic in the hands of the developer.
Posted in How To
Stripe-Driven Development
This article details the contact points of Stripe payment integration in a custom shop app by example of the Woodstock Academy Organizer.
A Static Website Dream Team: Next.js With TypeScript, Contentful, and Netlify
This is a guide about how to set up a small static blog website using Next.js (with TypeScript) as a static site generator, Contentful as a headless content management system, and Netlify for hosting.
Posted in How To
What Teaching Has Taught Me. Seven Lessons Learned.
Stepping out of my comfort zone brought me new opportunities. One of them is teaching. In this article I share some insights and experiences I made on the way.
Posted in How We Work
How Next.js I18n Works at scale
Learn about that time I tried to internationalize our own Website using React-based static site generation and ended up tearing out our whole build setup.
Posted in How To
Tutorial: CSS Selectors and Their Specificity
Understanding different CSS selectors and possible combinations is a foundation of writing good CSS code. Basic knowledge about the specificity of CSS selectors will help you to create maintainable CSS code right from the beginning.
Tutorial: An Introduction to the Awesome World of CSS
This is part four of my web development tutorial series and this one is an introduction to CSS and how to integrate some basic styles to our tiny website.
Tutorial: Creating an Accessible Contact Form in HTML
Almost every website contains at least one form. Today we learn how to build forms with HTML that are accessible and easy to understand and use.
How We Build Websites at scale
In times when “simple” website builder tools get more and more popular, it’s hard to sell classic marketing websites. Here’s a story about why I still like building handcrafted websites and what my clients get out of it.
Get Three Platforms for the Complexity of One
Using React Native increases development velocity for iOS and Android apps. Learn how we took it to the next level by adding web as a third platform.
Posted in Portfolio
Tutorial: Building a Small Website – First Steps
Like my previous post, this one is again about HTML. Together we will build a setup for a small website containing a homepage, an about me page, and a contact page.
The Story Behind TimeSloth
When your client’s requirements suddenly turn into your new start-up. In this post I look back on the initial problem and why the solution was three products.
Posted in Portfolio
Tutorial: Let’s Get Started With Web Development
In the first part of my web development basics article series I’ll focus on HTML and how to create your first small webpage.
Another Web Development Blog – the Why
An introduction to a new series of blog posts about web development basics.
Posted in Web Development Basics