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

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

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