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





  1. Black Friday deals 2024

    We’ve pulled together some Black Friday deals from independent authors and publishers who are offering some great discounts for you to enhance your skillset.

  2. Complete CSS is now live!

    After nearly a year of production, Complete CSS is finally available for a limited Black Friday launch price of £189

  3. The `<details>` and `<summary>` elements are getting an upgrade

    Stephanie Stimac shares some useful changes arriving to simplify styling these elements.

  4. A Friendly Introduction to Container Queries

    Josh is here again with another stunner of an article.

  5. Foundations: form validation and error messages

    Demelza Feltham has written a fantastic run-down on form validation with some great tips about providing an accessible and user-friendly experience.

  6. Creating Design System-Friendly Snowflakes with Utility Classes

    Stu Robson shows us the power of utility classes in design systems to tackle those in-context specifics that always come around.

  7. An HTML Email Template with Basic Typography and Dark/Light Modes

    Chris Coyier shows how keeping it simple with email templates brings great results, even on the old clients.

  8. HTML for people

    Blake Watson has just launched a fantastic resource to help you learn HTML from scratch.

  9. Building a robust frontend using progressive enhancement

    When the gov design team offer a rundown like this, you have to read it because that team are some of the best in the business of great user experience.

  10. I wasted a day on CSS selector performance to make a website load 2ms faster

    Trys Mudford goes on what they thought was an epic CSS performance refactor with a not so surprising result.

  11. Introducing TODS – a typographic and OpenType default stylesheet

    Richard Rutter walks us through their thoroughly useful, new typographic and OpenType default stylesheet, step by step.

  12. Masonry and good defaults

    Rachel Andrew outlines some understandable concerns about masonry potentially being a part of grid.

  13. The Undeniable Utility Of CSS :

    A fantastic rundown of CSS :has() by one of the best in the business at explaining things.

  14. Ahmad Shadeed has a really nice new website

  15. Daily Dev

    An interesting alternative to discovering articles and resources for developers.

  16. CSS @property and the New Style

    Ryan Mulligan steps through a stunning animated button component that uses the now widely supported @property really effectively.

  17. The Dev Tools Performance Monitor Panel

    Dave Rupert shows us how they used some lesser-know dev tools performance features to debug a common performance hit caused by animation.

  18. My under-engineered way to avoid a Flash of inAccurate coloR Theme (FART)

    A super simpler solution to applying a theme preference from local storage.

  19. Responsive bar charts in HTML and CSS

    A fascinating run-through of how Mathias and the 9Elements crew levelled up their charting from JS powered calculations to clean, semantic HTML and CSS.

  20. Every Layout

    Learn to write better, resilient CSS by helping the browser to make decisions for itself with the simple, composable layouts this book teaches you to read.

  21. State of CSS 2024

    The 2024 State of CSS survey is here and it’s about time we got a more diverse set of responses.

  22. What if you used Container Units for… everything?

    Chris Coyier ponders whether they can use container queries for everything and unearths some rather frustrating, but predictable outcomes.

  23. Just Build Websites

    Quite possibly one of the best analogies I’ve seen in a long time about Just Building Websites™

  24. The anchor element

    An incredibly well articulated, informative and entertaining run-down of the mighty HTML anchor element.

  25. How to animate around a circle

    A handy, quick post from Robin Rendle about a really common pitfall of trying to animate around shapes.

  26. Getting stuck: all the ways position:sticky can fail

    Sticky position in CSS can be super awkward and low-key enraging to work with. There’s plenty of little things you have to account for which Kilian Valkhof outlines really well.

  27. CSS One-Liners to Improve (Almost) Every Project

    A handy collection of simple CSS solutions to add little improvements to any web page by Alvaro Montoro.

  28. No No-JavaScript

    A quick and handy run-down of the CSS media query scripting features by David Bushell.

  29. CSS Grid Areas

    A really useful, highly interactive guide on CSS grid areas and how you can use them for every day layouts by Ahmad Shadeed.

  30. Fit-to-Width Text: A New Technique

    Sure, there’s a million ways to do fit text and you can technically already do it with CSS, but this approach Roman Komarov is interesting.

  31. Replacing GSAP with scroll animations

    A really handy re-working of a GSAP demo with CSS scroll animations that certainly helped them stick for me.

  32. The 3 Types of CSS Utility Classes

    A really handy breakdown of how to the separate concerns of your utility classes.

  33. code-pen Web Component

    A really handy web component that progressively enhances code blocks into CodePen editors.

  34. Accessible SVG Forms

    An extremely deep dive in how to build highly visual form functionality in an accessible manner.

  35. Consent, LLM scrapers, and poisoning the well

    An interesting approach to tackling the relentless scourge of LLM scrapers stealing content.

  36. The Basics

    Geoff Graham has published a brand new course for absolute beginners and it looks fantastic.

  37. Opinions for writing good CSS

    A great run down of useful advice to help you write good CSS.

  38. I Need Your Help to Make 11ty Fully Independent and Sustainable in 2024

    Zach writes how he is trying to work 100% full time on 11ty. To do that, the project needs financial support, so let’s make that happen.

  39. Look Mum, No Breakpoints!

    Rob McCormick breaks down how they refactored their front-end with fluid type, flexible layouts and importantly, giving the browser more control.

  40. Manifesto for a Humane Web

    Michelle Barker has published a manifesto which is stunning — both visually and content-wise.

  41. What the heck is an SVG sprite sheet?

    Ryan Trimble gives us the run-down on SVG sprites, how they work and how you can build a nice pipeline for them.

  42. What is Motion Sensitivity? How to Design Accessible Web Animations

    Elizabeth Meshioye runs down how animations can affect people negatively and how you can prevent that while still producing lovely, interactive work.

  43. Finally Understanding How Array.sort(comparator) Works

    James Kerr explains how the Array.sort() function actually works!

  44. Testing HTML With Modern CSS

    Heydon Pickering unleashes the power that CSS gives us with selectors and custom properties to create handy tests to make sure your markup is up to scratch.

  45. How would you build Wordle with just HTML & CSS?

    Scott Jehl has written a super detailed run-down of how they tried to recreate Wordle with HTML and CSS.

  46. An Interactive Guide to CSS Container Queries

    Bored of the same old card demos for Container Queries and struggling to see where you’d use them in real projects? I was too until Ahmad Shadeed published yet another great guide.

  47. CSS Button Styles You Might Not Know

    David Bushell shares some unbelievably good tips on styling buttons and explains exactly how they work too.

  48. 404 Media Now Has a Full Text RSS Feed

    404 Media has invested really well in RSS and broken all the decisions and process down in a nice article.

  49. A Guide To Designing For Older Adults

    The one and only Vitaly Friedman takes a deep-dive into a lesser thought about focus of user-centric design.

  50. Arguments for opening links in a new tab or window

    Jason Grigsby asks for data to support an apparent preference for people defaulting to links opening in new tabs.

  51. Can you feel the rhythm‽

    Adam Argyle shows some really cool baseline grid stuff that modern CSS empowers us to do.

  52. ECSS - an interesting CSS methodology

    I got sent a link to a CSS methodology called ECSS and thought I’d note down what I like and what I don’t like about it.

  53. How I Solved My Font Rendering Problem

    Michelle Barker yet again, shares a life-saver of a CSS tip!

  54. The Fifty-Fifty Split and Overflow

    Ryan Mulligan demonstrates not just some elegant layout work but also, a very tidy method of dealing with overflow content.

  55. CSS :has() Interactive Guide

    Ahmad Shadeed has done it again with a stunning interactive guide that

  56. Speedier tunes

    Jeremy Keith showcases a proper real-world performance improvement using content-visibility.

  57. Tailwind vs. Semantic CSS

    A really interesting study by Tero Piirainen, comparing a build of the exact same page using Tailwind vs semantic CSS.

  58. Removing list styles without affecting semantics

    Manuel Matuzović solves an age-old problem with dealing with list styles when you don’t want them and I riff about my reset.

  59. Smashing hour - April 30th 2024

    Join Vitaly Friedman and myself as we talk about design, CSS and all sorts in April.

  60. CSS Scroll-triggered Animations with Style Queries

    I stumbled across Ryan Mulligan’s excellent article on scroll-triggered animations which helps them make more sense to me.

  61. Some use cases for revert-layer

    A damn useful run-down of revert-layer — a more useful CSS revert tool — by Mayank

  62. The legendary Codrops are on Patreon

    One of the best publications in the biz are feeling the pinch of rising costs and fewer sponsors, so they’ve set up a Patreon that I hope you will support.

  63. Offloading JavaScript With Custom Properties

    Heydon Pickering perfectly illustrates why it’s important to understand both CSS and JavaScript well.

  64. New GitHub Copilot Research Finds “Downward Pressure on Code Quality”

    I’ve noted down some thoughts about research that shows CoPilot use, lowers the quality of code, overall.

  65. How to align the text of the last paragraph line

    Stefan Judis runs us through the rather useful text-align-last CSS property with a handy demo.

  66. Utopia SCSS Library

    Utopia — the extremely handy fluid type and space tool — now has an SCSS (Sass) library which looks great.

  67. ShopTalk reaches 600th episode

    The ultimate stalwart of podcasts about the web hits yet another major milestone, so I wanted to congratulate them.

  68. Kind of annoyed at React

    A really interesting commentary on the state of React by one of the best in the biz: Cassidy Williams.

  69. Steady has a great new homepage

    This new homepage demonstrates how concise content mixed with clear design — riddled with delightful flare — is super effective.

  70. Urlbox

  71. 12 Modern CSS One-Line Upgrades

    A handy run down of newer stable, stable enhancement and progressive enhancement CSS features by Stephanie Eckles.

  72. Automated weekly links posts with raindrop.io and Eleventy

    A really clever setup by Sophie that automates a weekly links post, based on articles she saves in a third party service.

  73. Designing better target sizes