CSS Basics
@cssbasics.fridayfrontend.com
Front-end dev links aimed at beginners, posted daily. Brought to you by @fridayfrontend.com and curated by @spaceninja.com
Responsive Hexagon Grid without Media Queries: "Using modern #CSS to create a responsive hexagon grid. corner-shape to create the hexagon shape and sibling-index() combined with math functions to conditionally apply a margin to only the first element of every other row." css-tip.com/hexagon-grid/
Responsive Hexagon Grid without Media Queries
A few lines of modern CSS to create a responsive grid of hexagon shapes (and more!)
css-tip.com
January 23, 2026 at 6:04 PM
Responsive Hexagon Grid without Media Queries: "Using modern #CSS to create a responsive hexagon grid. corner-shape to create the hexagon shape and sibling-index() combined with math functions to conditionally apply a margin to only the first element of every other row." css-tip.com/hexagon-grid/
Responsive and fluid typography with Baseline #CSS features: "Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind." web.dev/articles/bas...
Responsive and fluid typography with Baseline CSS features | Articles | web.dev
Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind.
web.dev
January 22, 2026 at 6:03 PM
Responsive and fluid typography with Baseline #CSS features: "Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind." web.dev/articles/bas...
Don't Fall Into the "Accessibility Grade/Score" Trap: "Accessibility scores are attractive because they simplify what is complex, but they collapse lived experience into a number that can never reflect the needs of actual people." #a11y buttondown.com/access-abili...
Don't Fall Into the "Accessibility Grade/Score" Trap
A wooden box labeled “Accessibility Grades” being propped up with a stick with a string tied to it with a business man about to walk underneath In the rush...
buttondown.com
January 21, 2026 at 6:02 PM
Don't Fall Into the "Accessibility Grade/Score" Trap: "Accessibility scores are attractive because they simplify what is complex, but they collapse lived experience into a number that can never reflect the needs of actual people." #a11y buttondown.com/access-abili...
A Minimal #CSS Starter: "What would you include in a CSS starter, as a CSS minimalist? Submitting not a reset—yet perhaps five and a half surgical tweaks." meiert.com/blog/a-minim...
A Minimal CSS Starter · Jens Oliver Meiert
What would you include in a CSS starter, as a CSS minimalist? Submitting not a reset—yet perhaps five and a half surgical tweaks.
meiert.com
January 20, 2026 at 6:05 PM
A Minimal #CSS Starter: "What would you include in a CSS starter, as a CSS minimalist? Submitting not a reset—yet perhaps five and a half surgical tweaks." meiert.com/blog/a-minim...
Common misconceptions about implementing accessibility: "Knowing how to start implementing accessibility and sustain it over time isn't always straightforward. Teams often wonder who is responsible, which tools to use, and when it should be considered." #a11y tetralogical.com/blog/2025/12...
Common misconceptions about implementing accessibility - TetraLogical
For many organisations and digital teams, knowing how to start implementing accessibility and how to sustain it over time isn't always straightforward. Teams often wonder who is responsible, which…
tetralogical.com
January 19, 2026 at 6:03 PM
Common misconceptions about implementing accessibility: "Knowing how to start implementing accessibility and sustain it over time isn't always straightforward. Teams often wonder who is responsible, which tools to use, and when it should be considered." #a11y tetralogical.com/blog/2025/12...
#HTML Input Validation is (maybe) Good: "You can use the Constraint Validation API to layer on accessible messages with a bit of #JavaScript. That way you get the browser's validation working as a baseline, and then enhance it to be accessible when JS is available." www.htmhell.dev/adventcalend...
HTML Input Validation is (maybe) Good - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 16, 2026 at 10:01 PM
#HTML Input Validation is (maybe) Good: "You can use the Constraint Validation API to layer on accessible messages with a bit of #JavaScript. That way you get the browser's validation working as a baseline, and then enhance it to be accessible when JS is available." www.htmhell.dev/adventcalend...
Different Page Transitions For Different Circumstances: "In #JavaScript, you can detect a view transition happening, set a type, and have #CSS do unique things based on that type." frontendmasters.com/blog/differe...
Different Page Transitions For Different Circumstances
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
frontendmasters.com
January 16, 2026 at 6:03 PM
Different Page Transitions For Different Circumstances: "In #JavaScript, you can detect a view transition happening, set a type, and have #CSS do unique things based on that type." frontendmasters.com/blog/differe...
Replacing #JavaScript with just #HTML: "As time marches on, and the HTML and CSS methods gain traction, we need to start replacing the old JS methods that feel so comfy with new methods that require less JS." www.htmhell.dev/adventcalend...
Replacing JS with just HTML - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 15, 2026 at 10:01 PM
Replacing #JavaScript with just #HTML: "As time marches on, and the HTML and CSS methods gain traction, we need to start replacing the old JS methods that feel so comfy with new methods that require less JS." www.htmhell.dev/adventcalend...
Recreating Toon Text With #CSS And #SVG: "In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG." www.smashingmagazine.com/2025/12/smas...
Smashing Animations Part 7: Recreating Toon Text With CSS And SVG — Smashing Magazine
In this article, pioneering author and web designer [Andy Clarke](https://stuffandnonsense.co.uk) shows his techniques for creating [Toon Text…
www.smashingmagazine.com
January 15, 2026 at 6:02 PM
Recreating Toon Text With #CSS And #SVG: "In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG." www.smashingmagazine.com/2025/12/smas...
Class names for content not design: "If you make the class names design and layout specific, you will have to edit your #HTML files every time you want to change these elements their position or design, instead of only editing the #CSS file." www.htmhell.dev/adventcalend...
Class names for content not design - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 14, 2026 at 10:02 PM
Class names for content not design: "If you make the class names design and layout specific, you will have to edit your #HTML files every time you want to change these elements their position or design, instead of only editing the #CSS file." www.htmhell.dev/adventcalend...
Toggle `position: sticky` to `position: fixed` on Scroll: "Fixed and sticky positioning behave very differently, but we can switch between the two at exact points for some unusual looking effects." #CSS frontendmasters.com/blog/toggle-...
Toggle `position: sticky` to `position: fixed` on Scroll
Fixed and sticky positioning behave very differently, but we can switch between the two at exact points for some unusual looking effects.
frontendmasters.com
January 14, 2026 at 6:02 PM
Toggle `position: sticky` to `position: fixed` on Scroll: "Fixed and sticky positioning behave very differently, but we can switch between the two at exact points for some unusual looking effects." #CSS frontendmasters.com/blog/toggle-...
Abbreviations done right: "Skip the element altogether. It creates a false sense that your abbreviations are accessible. Clearly spell out each abbreviation the first time you use it, and then stick to the short form for the rest of the text." #a11y www.htmhell.dev/adventcalend...
Abbreviations done right: The <abbr> element and why not use it - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 13, 2026 at 10:01 PM
Abbreviations done right: "Skip the element altogether. It creates a false sense that your abbreviations are accessible. Clearly spell out each abbreviation the first time you use it, and then stick to the short form for the rest of the text." #a11y www.htmhell.dev/adventcalend...
Connecting Circles With #CSS Anchor Positioning: "Not only is the arrow dynamic, but the shape adjusts according to the distance between the circles. And if they touch each other, the link disappears. Collision detection using pure CSS!" css-tip.com/connected-ci...
Connecting Circles With Anchor Positioning
Using modern CSS to create a dynamic link that connects two circles, whatever their position
css-tip.com
January 13, 2026 at 6:02 PM
Connecting Circles With #CSS Anchor Positioning: "Not only is the arrow dynamic, but the shape adjusts according to the distance between the circles. And if they touch each other, the link disappears. Collision detection using pure CSS!" css-tip.com/connected-ci...
The three semantics of #HTML: "There is always that one elephant in the room alongside HTML – semantics. You can ignore it for quite a while, but at the end of the day, you'll need to acknowledge that it's there, cluttering half of the space." www.htmhell.dev/adventcalend...
The three semantics of HTML - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 12, 2026 at 10:01 PM
The three semantics of #HTML: "There is always that one elephant in the room alongside HTML – semantics. You can ignore it for quite a while, but at the end of the day, you'll need to acknowledge that it's there, cluttering half of the space." www.htmhell.dev/adventcalend...
Forced Colors Mode: "The most important thing when designing for forced colors mode is making things obvious. This browsing mode is often used by people who are not blind but do have vision issues, people who suffer migraines from lots of color, and so on." #CSS gomakethings.com/forced-color...
Forced Colors Mode
Forced Colors Mode is an accessibility feature that, as my friend Ben Myers explains… replaces websites’ colors (backgrounds, borders, text, focus outlines, and more) with a significantly reduced…
gomakethings.com
January 12, 2026 at 6:03 PM
Forced Colors Mode: "The most important thing when designing for forced colors mode is making things obvious. This browsing mode is often used by people who are not blind but do have vision issues, people who suffer migraines from lots of color, and so on." #CSS gomakethings.com/forced-color...
For the Love of
- "It can do so much out of the box but paired with some creative #HTML and #CSS, it’s easy to imagine dozens of uses for the
element that do not compromise on performance, accessibility or SEO visibility." www.htmhell.dev/adventcalend...
For the Love of <details> - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 9, 2026 at 10:02 PM
For the Love of
- "It can do so much out of the box but paired with some creative #HTML and #CSS, it’s easy to imagine dozens of uses for the
element that do not compromise on performance, accessibility or SEO visibility." www.htmhell.dev/adventcalend...
Vanilla #CSS is all you need: "You might not need Sass or PostCSS. Native CSS has variables, nesting, and color-mix(). You might not need Tailwind for every project. Especially if your team understands CSS well enough to build a small design system." www.zolkos.com/2025/12/03/v...
Vanilla CSS is all you need
Rob Zolkos
www.zolkos.com
January 9, 2026 at 8:02 PM
Vanilla #CSS is all you need: "You might not need Sass or PostCSS. Native CSS has variables, nesting, and color-mix(). You might not need Tailwind for every project. Especially if your team understands CSS well enough to build a small design system." www.zolkos.com/2025/12/03/v...
The #HTML Elements Time Forgot: "These obsolete tags represent experiments in web development—some more successful than others. They're a reminder that the web platform we use today is the result of decades of trial, error, and evolution." www.htmhell.dev/adventcalend...
The HTML Elements Time Forgot - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 9, 2026 at 6:04 PM
The #HTML Elements Time Forgot: "These obsolete tags represent experiments in web development—some more successful than others. They're a reminder that the web platform we use today is the result of decades of trial, error, and evolution." www.htmhell.dev/adventcalend...
Pausing a #CSS animation with getAnimations(): "When you call getAnimations(), you can get the currentTime of the animation’s timeline, or the playback state of the animation (playState), or in our case, actually pause the animation with pause()." #JavaScript cassidoo.co/post/pause-c...
Pausing a CSS animation with getAnimations()
When your CSS animations need a break, you can work with the output of the getAnimations() method!
cassidoo.co
January 8, 2026 at 10:00 PM
Pausing a #CSS animation with getAnimations(): "When you call getAnimations(), you can get the currentTime of the animation’s timeline, or the playback state of the animation (playState), or in our case, actually pause the animation with pause()." #JavaScript cassidoo.co/post/pause-c...
Styling by Language: "Japanese text usually needs more line height to breathe. Kanji often appear denser and more detailed than Latin letters. Western fonts can feel too “light” next to Japanese text. This is where the lang attribute becomes your best friend." #CSS www.htmhell.dev/adventcalend...
Styling by Language: Using the lang Attribute for Multilingual Design - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 8, 2026 at 8:03 PM
Styling by Language: "Japanese text usually needs more line height to breathe. Kanji often appear denser and more detailed than Latin letters. Western fonts can feel too “light” next to Japanese text. This is where the lang attribute becomes your best friend." #CSS www.htmhell.dev/adventcalend...
!important and #CSS Custom Properties: "The `!important` part doesn't become part of the value, the whole declaration is treated as !important;" frontendmasters.com/blog/importa...
!important and CSS Custom Properties
The `!important` part doesn't become part of the value, the whole declaration is treated as !important;
frontendmasters.com
January 8, 2026 at 6:05 PM
!important and #CSS Custom Properties: "The `!important` part doesn't become part of the value, the whole declaration is treated as !important;" frontendmasters.com/blog/importa...
Semantics beyond the tag name: "To actually write semantic #HTML, we need to know what elements mean beyond just what we infer from their tag names and how to use them. So, how do we find that out?" www.htmhell.dev/adventcalend...
Semantics beyond the tag name - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 7, 2026 at 10:01 PM
Semantics beyond the tag name: "To actually write semantic #HTML, we need to know what elements mean beyond just what we infer from their tag names and how to use them. So, how do we find that out?" www.htmhell.dev/adventcalend...
The what, how, and why of CSS clamp(): "clamp() lets you assign a value to a CSS property between a minimum and a maximum range, and uses a preferred value in that range. It’s really helpful for responsive layouts and typography!" cassidoo.co/post/css-cla...
The what, how, and why of CSS clamp()
The CSS clamp() function is a clean way to make your apps and sites responsive. Here's how!
cassidoo.co
January 7, 2026 at 8:01 PM
The what, how, and why of CSS clamp(): "clamp() lets you assign a value to a CSS property between a minimum and a maximum range, and uses a preferred value in that range. It’s really helpful for responsive layouts and typography!" cassidoo.co/post/css-cla...
Forms are a badly designed part of #HTML: "Although the newly standardized form elements and features all point into the right direction, they are incomplete and unfinished. The fact that this is still the case after more than ten years is alarming." www.htmhell.dev/adventcalend...
Forms are a badly designed part of HTML - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
January 7, 2026 at 6:01 PM
Forms are a badly designed part of #HTML: "Although the newly standardized form elements and features all point into the right direction, they are incomplete and unfinished. The fact that this is still the case after more than ten years is alarming." www.htmhell.dev/adventcalend...
text-decoration-inset is Like Padding for Text Decorations: "It solves a problem that we’ve had since the beginning of the web, which is that text decorations such as underlines extend beyond the first and last characters, resulting in vertical misalignment." #CSS css-tricks.com/text-decorat...
text-decoration-inset is Like Padding for Text Decorations | CSS-Tricks
The text-decoration-inset property solves a problem that we’ve had since the beginning of the web, which is that text decorations such as underlines extend beyond the first and last characters,…
css-tricks.com
January 6, 2026 at 10:00 PM
text-decoration-inset is Like Padding for Text Decorations: "It solves a problem that we’ve had since the beginning of the web, which is that text decorations such as underlines extend beyond the first and last characters, resulting in vertical misalignment." #CSS css-tricks.com/text-decorat...