Code

Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.

Visualize, configure and generate JavaScript and CSS spring and easing functions with the official Anime.js Easing Editor

@Okay the 2025 way is probably with uv. After installing uv, my guess is that for example uv tool install fonttools gives you a global (but still isolated) install of the fonttools command-line tools. Need to try this to see if it’s correct and/or what additional instructions may be needed. Installing uv isn’t hard.

I'm somewhat a fan of resets and sensible global CSS styles, so I thought it would be fun to run through Chris' recent starter and pick out bits I like and don't like.

Calculate a CSS clamp function that scales a property between two browser widths.

Fonts are one of the most visible, most powerful parts of the web. And yet: almost everyone gets them wrong.

Let’s get started with Typetura.css! The most responsive way to style text on your website.

I’ve started writing more Python code lately (because of… AI, you know). In this post, I share the tools, libraries, configs, and other integrations I use for building production-grade Python applications following a frontend-backend architecture.

Easily calculate clamp() values for any properties, like font sizes, widths, paddings, margins, and more using this streamlined CSS Clamp Calculator.

Tired of juggling Git and YAML to update your Next.js, Astro, Hugo or Nuxt website? Make it easy on you and your team, get a user-friendly CMS running straight on top of GitHub.

UA+ (User agent plus), a different type of reset style sheet

aider is AI pair programming in your terminal

Zed adds a uniquely powerful interface for AI-assisted programming.

Pete Barr teaches us how he creates beautiful animations with SVG and GSAP. We pick up a few techniques like text splitting and infinite scroll.

Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I'd say, is what you'd expect, but things get weird when srcset

Animated SVGs add a touch of interactive whimsy and polish to our websites. In this episode, Cassie Evans will teach us how to use Greensock to create fun, engaging experiences!

By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns.

What can you do with a single CSS keyframe? A metric ton. 0:00 - 50% keyframes are magic 0:49 - Animation is easier than you think 2:17 - Why at 50%? 6:51 - Trick 1 Shake 12:00 - Trick 2 Pulse 23:25 - Trick 3 Glitch 27:55 - Trick 4 Flip 32:45 - Trick 5 Fill 41:20 - Trick 6 Sheen 44:25 - Trick 7 Emphasize 46:50 - Trick 8 Censor 48:35 - Trick 900 Tony Hawk Links Bad at CSS - https://twitter.com/badatcss Adam Twitter - https://twitter.com/argyleink David Twitter - https://twitter.com/_davideast Codepen Demo: https://codepen.io/davideast/pen/MWxvzjm Open Props: https://open-props.style

The past few years have brought us a tonne of new CSS features to help solve common layout challenges. In this session, we’ll delve into some real-world use cases for new features like container queries and the :has() pseudo class.

Share your videos with friends, family, and the world

Eleventy starter using modern CSS, fluid type, fluid spacing, flexible layout and progressive enhancement.

The @view-transition at-rule has two descriptions. One is the commonly used navigation descriptor. The second is types, the lesser-known of the two, and one that probably envies how much attention navigation gets. But read on to learn why we need types and how it opens up new possibilities for custom view transitions when navigating between pages.

Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue.

Free, out-of-the-box utilities to help with common frontend and backend tasks.

Video and audio player themes that work for any web player (Video.js, Youtube embeds, and more), and with every web app framework (HTML, React, and more). Open source and built with Media Chrome so they’re fully customizable using just HTML and CSS.

HTML isn't only for people working in the tech field. It's for everyone. Learn how to make a website from scratch in this beginner friendly web book.