You can make full use of variable fonts in WordPress now. Isn’t that great? Let’s review how to do it so you can take fully control of your site’s typography.

We’ve all been there—rushing to meet a deadline, we throw together a dropdown menu or modal without fully considering its accessibility. But what if making a few small changes could drastically improve the experience for a broader range of users? Accessibility doesn’t have to be a daunting task or a compliance box to tick. It’s about creating products that are usable by everyone, no matter their ability, technical literacy, operating…

When starting to use a new CSS feature it’s important to understand its impact on the performance of your websites, whether positive or negative. With @property now in Baseline this post explores its performance impact, and things you can do to help prevent negative impact.

CSS variables, often referred to as custom properties, offer a centralized way to manage values in your stylesheets. By using the var() function, you can insert these variable values directly into your CSS, making it more streamlined and manageable. Whether you’re applying global or local scope, CSS variables enhance readability and maintainability across your projects.

Most likely, you remember the experiences you had, not just the objects or things that you saw. That’s how humans work: we’re wired for stories and interactive journeys that engage all of our senses.

Let me teach you how to animate the CSS Grid properties by building a responsive image grid with hover effects.

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user engagement: the HTML title tag. Often overlooked, this small but mighty piece of code can have a significant impact on how your website is perceived by search engines like Google and by potential visitors browsing the search engine results pages.

Deferring offscreen images is a web performance optimization technique that can help you improve user experience and Core Web Vitals on your site. Also known as lazy loading, it downloads out-of-view images only when they’re about to appear in the user’s viewport. Deferring offscreen images is especially important on image-heavy websites.

Styling form controls like the <select> element has been reported as a top developer pain point for years, and we’ve been working on a solution. While this work is complex and has taken a long time to get right, we’re getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype for you to test out from…

A selection of creative menu patterns and animations that highlight diverse design styles, offering fresh inspiration for your next project.