Andy Bell is completely redesigning his personal site from scratch and breaking down each part to educate and hopefully, inspire you to build your own corner of the internet. We start with an overview of how this project is going to work and why he's doing it.
We don't normally do one of these, but I think 2025 has been a stellar year for Piccalilli, so we wanted to get into what we've done and what we're planning for next year.
We recently launched Mindful Design, and plenty of people have mentioned that they don’t know how to approach their boss to ask them to pay for it. Here’s an email template for you to help with that.
We recently launched JavaScript for Everyone, and a lot of people have mentioned that they don’t know how to approach their boss to ask them to pay for it. Here’s an email template for you to help with that.
We walk through a fictional bug and fix a little visual issue, but we then spend time uncovering other much more important issues and fix them too.
Andy Bell had heard companies were forcing employees to use AI tools so spoke to developers to determine if that was the case and learned some horrors in the process.
When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.
We want to make Piccalilli’s position absolutely clear on LLMs and generative AI. It’s important for you, the reader, to understand our position.
This one is different, I promise. It's my advice on approaching the options we have to center an element with CSS now and what pragmatic choices we should make.
We’ve been working really hard to balance making articles easier to read and to provide advertisers with much better options to sustain Piccalilli in the long term.
After a truck-load of work, we’ve given our upcoming courses branded landed pages so that our authors have their own little home to express themselves on Piccalilli.
subgrid in CSS is really handy for getting a nice level of design detail in place, especially in terms of maintaining a nice reading line, as Andy shows in this article.
We've taken a cut of the respondents from our 2025 survey, so it's time to break down what the data is telling us and how that relates to our longer term plans to go all-in on Piccalilli.
We’ve just arrived the prototypes and technical planning sprint and up until this point the focus has been heavily swayed towards creativity. Now it’s all about working out what can work in the browser, what needs walking back and what needs fixing.
Andy runs through some common deceptive patterns and tactics that marketers use to manipulate users and then shows how we're doing things differently on our course marketing pages.
We always want to do better here at Piccalilli and we have ideas. It'll be really helpful if you could give us your opinion on those and also our bread and butter: educational content for the real world.
A quick video showing you how to apply very little CSS to get that nice, revealing from the bottom effect on your footer.
Andy runs us through what a mess he's made in the past, how to rectify that mess and how to avoid being nerd-sniped to maintain a focus.
We take a look at where we started with the course marketing pages and what the success of this project looks like. We also look back on experimentations since launch.
The start of this open working project where we look at what's the come and what our starting point is.
A fun little side quest to show you how applying styles to alt text can really elevate your user interface.
We’re trying a rather radical new approach at Piccalilli by doing real world projects — for real clients — in the open. This gives us a context to provide genuine high quality, real world education for free at the point of entry.
We're equal parts delighted and excited to share that Piccalilli will be working with Mat Marquis and Scott Riley to launch two premium courses this year: JavaScript for Everyone and Mindful Design.
Instead of leaning into heavy social sharing widgets, you can create a truly user-friendly social sharing component that works for everyone, using built-in APIs and progressive enhancement.
I read a really interesting article on CSS layout that I don’t really agree with, so I thought I’d lay out some advice related to that.
Our newsletter, The Index has had a full design refresh — root to branch. It’s clearer, easier to subscribe to and a much better reading experience. We’ve also introduced simple, non-intrusive ads to keep Piccalilli sustainable long-term.
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native CSS brings with it.
I get asked a lot about what technologies and frameworks we use at the studio, so I thought I’d note them down.
It’s going to be a long time until CSS masonry is ready for us to use in our projects so I’ve got a nice stop-gap here for you that uses composable layouts.
We recently launched Complete CSS, and a lot of people have mentioned that they don’t know how to approach their boss to ask them to pay for it. Here’s an email template for you to help with that.
We have news! We’re in the home straight, finishing up Complete CSS and with that, we have a launch date: November 26 at 12pm GMT. Sign up to get updates and we’ll email you as soon as it is live.
A quick article to help folks affected by the recent WordPress situation and the reckless takeover of ACF.
A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one.
Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
In the final part of this redesign series we break down our approach to aspects of the production build of the incoming, new front-end.
The second part of the Piccalilli redesign article series where we cover the second half of our design process, getting ready to build it.
I took Roman Komarov’s handy new @property powered CSS fit text solution for a spin and tweaked it to work with our context, replacing a JS powered system.
It’s always safe to assume JavaScript will not be available, so here’s a quick list of very realistic reasons it won’t be.
The start of a new article series which gives you a look behind the scenes at the Piccalilli redesign and Set Studio’s design process.
We want to produce content that helps people working on real world projects, so we’ve created a survey to learn more from you.
Learn how anchor positioning is really useful for a solution other than for positioning popovers.
Progressive enhancement hasn’t caught on nearly as much as it should. It’s likely related to folks not being able to envision it working in their real world contexts. This post attempts to alleviate that and reignite the conversation.
A really quick video to show you where the right settings are and what settings to disable to protect your work.
With design tools further commoditising and sanitising expected creative output, the time for designers to be able to stand out is very much here. I think for some, learning to code is a good route for that.
We’re doing it differently in this edition. There’s already code and I’m challenging folks to refactor and improve my solution with modern CSS.
Often overlooked, the mask-image property can be a simple way to inject some character into your web design work.
So many Markdown guides are either too complicated or really hard to read. I thought I’d try to fix that with a super simple, clear guide.
I tackle an age-old design pattern and build it with nice, simple CSS.
An honest roundup of what I personally think of AI and how it genuinely has its uses in my day-to-day work.
I really like paying good writers so I thought I’d recommend a handful of publications I’m paying for and look at how they do things.
There’s a lot of chatter about CSS masonry at the moment. Should it be called “masonry” and should it be grid? Let’s worry about the basics first.
Ever since we re-platformed Piccalilli to Astro, full text RSS no longer worked like it did with Eleventy. We’ve hacked together a fix and now it does!
The set.studio site is powered by design tokens, which for colours, are hex codes. I managed to automatically convert those to P3 colours with a custom PostCSS plugin.
React’s version 19 Beta is boasting full custom element support so I cover how that could impact projects on our radar and how this new support will make an impact.
Inheritance truly is a superpower and it’s what makes developing on the web a joy if you embrace it. In this quick post, I’m going to convert you into a super fan.
We’ve refreshed the look and feel of both the Piccalilli site and the brand so wrote up a little about that and the future of the platform.
Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS.
A big part of the Piccalilli Links thing is I want to elevate good writers. I need help discovering those writers though!
We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out.
To open up this CSS Fundamentals series, we’re looking at one of those most important aspects of CSS to understand: how the box model is affected by box sizing.
All is revealed about how to build this Front-End Challenges Club challenge, with some great contributions to the community too.
I’ve created some low fidelity demos of :has() snippets that I’ve been using in real-world client projects.
In light of Chris Coyier’s recent article about CSS-Tricks, I think it’s about time I shared some plans with you all.
Front-End Challenges Club is back! It’s been a long while since the last one and this challenge is a real head scratcher.
A really quick tip to hopefully save you from throwing your computer out of the window due to JavaScript events.
Inspired by the recent “A Global Design System” article, I talk about what worries me: the future of MDN and a possible alternative to it.
For the many folks who ask how I write CSS since removing Sass, this is how I and the Set Studio team do it in 2024.
After the success of previous years, it’s great to see Interop is back in 2024. In this post, I note down what I’m looking forward to.
I’m doing a lot of content this year, but the stuff I’m most excited about is a brand new workshop and a brand new course. They follow a similar theme to each other: helping you to become a better CSS developer who writes more scalable, maintainable CSS.
My all-time favourite CSS technique — courtesy of Paul Irish — celebrates another birthday.
I talk about an apparent attitude shift in attitude towards React in the community and also make some recommendations about decision-making for your projects.
Learn how build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties and Custom Properties.
Eleventy has built-in tagging and collections capabilities that I’m riffing on to show you how to build a super simple category system with RSS feeds for each one.
I give a run-down about the new links setup on the Piccalilli site and how it all works.
In this edition of Reality Check, I tackle an interesting grid layout that also features some pretty unique background image treatment.
I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version.
Something non-designers understandably struggle with is how to make things look good. One of those things is long form content that’s well set and readable. Luckily, CSS makes this easy, you just have to know what to change.
If you’ve got a rounded corner on both the outside, and the inside of an element that both have the same value, it looks pretty weird. In this Little Design Tip, we dig into a formula to get relative rounded corners, along with a nice CSS utility to apply to your projects.
I’ve stumbled across an issue with Lighthouse where I get a bad performance score for a progressive enhanced burger menu pattern.
You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.
You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.
Learn how to use the power of CSS to take any collection of images and make them blend well together with a fancy interactive state.
After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.
It’s tempting to use a sharp box shadow for focus styles to both remove the default focus ring and to get around sharp outline corners. With this method, you can create problems for Windows High Contrast users, so this quick tip will help you get the best of both worlds.
Frameworks like Next JS output a lot of heavy-duty client side JavaScript, so this quick tip stops that to have a huge positive impact on performance.
Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.
Some notes on the dogmatism and gatekeeping themes of Tech Twitter and how they can generate often incorrect and naive statements—specifically about frameworks and methodologies.
We can add an extra bit of space to targeted elements, thanks to modern CSS!
Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.
Convert a messy multidimensional array into a nice single dimension array of unique items.
A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.
In this premium tutorial, we’re going to build a burger menu from the ground up, using progressive enhancement, ResizeObserver, Proxy state and of course, super-solid HTML and CSS that pull from the CUBE CSS principles.
A handy helper function that will load all user-focusable elements inside a parent element for you.
That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.
Design tokens are just spicy variables, right? Wrong! They are an extremely versatile way of sharing design properties and in this tutorial, you’ll learn how they work.
Using the power of modern CSS layout, we create a flexible media browser and video player layout that maintains its aspect ratio at all viewports.
A guide on going freelance with some helpful advice to hopefully help you to make the plunge.
An in-depth guide to going from HTML all the way to a full styled banking dashboard, using the CUBE CSS methodology
Sometimes you get a bit stuck in a course, so this quick tip teaches you how to get back on track
Today is a massive day for Piccalilli, so here’s a reflective post about the production of the debut course.
Create spacing that works regardless of the direction of your content or the environment of your users.
Using Proxies and subscriber functions, we can create an observable, reactive state system with a tiny footprint.
Even with no media-queries, we can create a flexible and powerful responsive layout.
Break out of the mould of your fixed-width container to create visual interest.
Front-End Challenges Club - Solution #006
Front-End Challenges Club - Challenge #006
Automatic dark and light themes, based on system user-preferences, are handy but in this tutorial, we take that one step further and give our users control.
Responsive units, like EM units, are super powerful and in this tutorial, you’ll learn how to use that power to give your front-ends resilience