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





Design

Topic Archive
  1. Why I’m excited about text-box-trim as a designer

    Jason Bradberry shows us what’s possible in the real world with the new CSS text-box-trim capabilities from a designer’s perspective, and gives us a deep dive into the text spacing and alignment problems it solves.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. Quick Figma tricks you may not know exist

    In this Little Design Tip, Leanne shares some really handy Figma tricks about its powerful auto layout tool.

  7. Some simple ways to make content look good

    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.

  8. Relative rounded corners

    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.

  9. 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.

  10. 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.

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