Front-end education for the real world. Since 2018.





Latest articles by Andy Bell

  1. How I build a button component

    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.

  2. Introducing: Complete CSS

    Our first course is nearly ready so we’re opening up pre-orders.

  3. Building a breakout element with container units

    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.

  4. Redesigning Piccalilli: the build process

    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.

  5. Redesigning Piccalilli: the second part of the design process

    The second part of the Piccalilli redesign article series where we cover the second half of our design process, getting ready to build it.

  6. Riffing on the latest CSS fit text approach

    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.

  7. A handful of reasons JavaScript won’t be available

    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.

  8. Redesigning Piccalilli: the first part of the design process

    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.

  9. We want to help designers learn to code

    We want to produce content that helps people working on real world projects, so we’ve created a survey to learn more from you.

  10. Front-End solution: Eyebrow heading dots

    Learn how anchor positioning is really useful for a solution other than for positioning popovers.

  11. It’s about time I tried to explain what progressive enhancement actually is

    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.

  12. How to stop Figma using your work to train their “AI” models

    A really quick video to show you where the right settings are and what settings to disable to protect your work.

  13. The time for designers to learn to code is now

    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.

  14. Front-End challenge: Eyebrow heading dots

    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.

  15. Mask image is pretty handy

    Often overlooked, the mask-image property can be a simple way to inject some character into your web design work.

  16. A quick and easy guide to Markdown

    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.

  17. Let’s make a floating button sign up form pattern

    I tackle an age-old design pattern and build it with nice, simple CSS.

  18. How I’m using “AI”

    An honest roundup of what I personally think of “AI” and how it genuinely has its uses in my day-to-day work.

  19. How a handful of independent publishers are doing their thing

    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.

  20. I’m worried about the tabbing behaviour, rather than the syntax and name of CSS masonry

    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.

  21. Full text RSS is back

    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!

  22. Applying P3 colours on an existing project

    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.

  23. Upcoming custom element support in React

    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.

  24. CSS inheritance

    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.

  25. An evolution, not a revolution

    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.

  26. A primer on the cascade and specificity

    Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS.

  27. I want to elevate more people with Piccalilli Links

    A big part of the Piccalilli Links thing is I want to elevate good writers. I need help discovering those writers though!

  28. How we’re approaching theming with modern CSS

    We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out.

  29. The box model and box sizing

    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.

  30. Front-End solution: progress indicator

    All is revealed about how to build this Front-End Challenges Club challenge, with some great contributions to the community too.

  31. Some little ways I’m using CSS :has() in the real world

    I’ve created some low fidelity demos of :has() snippets that I’ve been using in real-world client projects.

  32. The path to becoming a publisher

    In light of Chris Coyier’s recent article about CSS-Tricks, I think it’s about time I shared some plans with you all.

  33. Front-End challenge: progress indicator

    Front-End Challenges Club is back! It’s been a long while since the last one and this challenge is a real head scratcher.

  34. Event currentTarget to the rescue

    A really quick tip to hopefully save you from throwing your computer out of the window due to JavaScript events.

  35. A Global Documentation Platform

    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.

  36. A CSS project boilerplate

    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.

  37. Interop 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.

  38. Some information about my upcoming workshop and course

    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.

  39. Happy international box sizing awareness day

    My all-time favourite CSS technique — courtesy of Paul Irish — celebrates another birthday.

  40. It feels like React is getting a bit of a kicking recently

    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.

  41. A highly configurable switch component using modern CSS techniques

    Learn how build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties and Custom Properties.

  42. Low-tech Eleventy Categories

    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.

  43. Piccalilli Links

    I give a run-down about the new links setup on the Piccalilli site and how it all works.

  44. Reality Check #3: Building out a layered hero grid layout from Dribbble

    In this edition of Reality Check, I tackle an interesting grid layout that also features some pretty unique background image treatment.

  45. Piccalilli will return in 2024

  46. LH units are cool

  47. Reality Check #2: Building out a fancy 404 page from Layers

  48. Reality Check #1: Building out a furniture site from Dribbble

  49. A (more) Modern CSS Reset

    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.

  50. How a minimum viable experience produces a resilient, inclusive end-product

  51. My favourite 3 lines of CSS

  52. Line heights in CSS work better with ratios

  53. A CLS punishment for progressive enhancement?

    I’ve stumbled across an issue with Lighthouse where I get a bad performance score for a progressive enhanced burger menu pattern.

  54. Learn Eleventy From Scratch is now open source

  55. Define delay for each property in the transition shorthand

    You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.

  56. Prevent squishy elements with flex none

    You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.

  57. Build a fancy hover animation

    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.

  58. Container Queries are actually coming

    After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.

  59. Use transparent borders and outlines to assist with high contrast mode

    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.

  60. Disable client-side React with Next JS

    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.

  61. Fluid typography with CSS clamp

    Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

  62. Add inline SVG directly in your CSS

  63. CSS Frameworks, hype and dogmatism

    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.

  64. Add scroll margin to all elements which can be targeted

    We can add an extra bit of space to targeted elements, thanks to modern CSS!

  65. Control changing numbers with font variant numeric

    Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.

  66. Convert a 2D array into a flat, 1D array of unique items

    Convert a messy multidimensional array into a nice single dimension array of unique items.

  67. Use CSS Clamp to create a more flexible wrapper utility

    A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.

  68. Build a fully-responsive, progressively enhanced burger menu

    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.

  69. Load all focusable elements with JavaScript

    A handy helper function that will load all user-focusable elements inside a parent element for you.

  70. Dynamic footer copyright date in Eleventy

    That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.

  71. What are design tokens?

    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.

  72. Flow CSS Utility

  73. Solution: Progress Stepper

    Front-End Challenges Club - Challenge #008

  74. Challenge: Progress Stepper

    Front-End Challenges Club - Challenge #008

  75. Build a responsive media browser with CSS

    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.

  76. Create a JSON feed with 11ty

  77. Picture element as a progressive enhancement

  78. Use grayscale filter to see where you are relying too much on colour

  79. Create a line break while maintaining inline status

  80. Visually hide an element with CSS

  81. Tips and notes about freelancing

    A guide on going freelance with some helpful advice to hopefully help you to make the plunge.

  82. Build a dashboard with CUBE CSS

    An in-depth guide to going from HTML all the way to a full styled banking dashboard, using the CUBE CSS methodology

  83. Squishy button active state

  84. Aligning description lists with CSS Grid

  85. Contains CSS attribute selector

  86. Easy horizontal and vertical centering in CSS

  87. A safer way to vertically fill the viewport

  88. Make a button element look like a link

  89. Limit line lengths to increase readability

  90. Responsive borders with CSS outline

  91. Quick and easy local server

  92. Use a set to remove array duplicates

  93. How to use the lesson project files to rescue your project

    Sometimes you get a bit stuck in a course, so this quick tip teaches you how to get back on track

  94. Parity Purchasing Power

    Helping to make the pricing of premium content on this site as fair as possible for the global web community

  95. Learn Eleventy From Scratch launch day

    Today is a massive day for Piccalilli, so here’s a reflective post about the production of the debut course.

  96. CUBE CSS

    A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

  97. Solution: Heading Keyline

    Front-End Challenges Club - Challenge #007

  98. Challenge: Heading Keyline

    Front-End Challenges Club - Challenge #007

  99. CSS Logical Properties

    Create spacing that works regardless of the direction of your content or the environment of your users.

  100. Build a light and global state system

    Using Proxies and subscriber functions, we can create an observable, reactive state system with a tiny footprint.

  101. Create a responsive grid layout

    Even with no media-queries, we can create a flexible and powerful responsive layout.

  102. Creating a full bleed CSS utility

    Break out of the mould of your fixed-width container to create visual interest.

  103. New shoes

    Piccalilli has been on a holiday for over two months, but has had a complete re-design and re-platforming.

  104. Solution: Auto-scrolling, responsive grid

    Front-End Challenges Club - Solution #006

  105. Challenge: Auto-scrolling, responsive grid

    Front-End Challenges Club - Challenge #006

  106. Solution: Tabs

    Front-End Challenges Club - Solution #005

  107. Challenge: Tabs

    Front-End Challenges Club - Challenge #005

  108. Solution: Progress Button

    Front-End Challenges Club - Solution #004

  109. Challenge: Progress Button

    Front-End Challenges Club - Challenge #004

  110. Solution: Duotone card

    Front-End Challenges Club - Solution #003

  111. Challenge: Duotone Card

    Front-End Challenges Club - Challenge #003

  112. Solution: Toggle switch

    Front-End Challenges Club - Solution #002

  113. Challenge: Toggle switch

    Front-End Challenges Club - Challenge #002

  114. Solution: Email sign-up form

    Front-End Challenges Club - Solution #001

  115. Challenge: Email sign-up form

    Front-End Challenges Club - Challenge #001

  116. Create a semantic breakout button to make an entire element clickable

  117. Create a user controlled dark or light mode

    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.

  118. Create a split, faux-container layout with CSS Grid and Flexbox

  119. Two simple methods to vertically and horizontally center content with CSS

  120. Relative sizing with EM units

    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

  121. Creating an aspect ratio CSS utility

  122. Get a CSS Custom Property value with JavaScript

  123. A progressive disclosure component

  124. Bypass service worker on localhost