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
The End of CSS Basics: After over ten years of sharing front-end links every week, the time has come for me to shut down Friday Front-End. Thanks for subscribing! spaceninja.com/blog/2026/th...
The End of Friday Front-End
After over ten years of sharing front-end links every week, the time has come for me to shut down Friday Front-End. Thanks for subscribing!
spaceninja.com
May 1, 2026 at 5:03 PM
The End of CSS Basics: After over ten years of sharing front-end links every week, the time has come for me to shut down Friday Front-End. Thanks for subscribing! spaceninja.com/blog/2026/th...
#CSS Grid for Beginners: "Learn how to use CSS grid for building layouts, step-by-step, with this beginner friendly tutorial." www.youtube.com/watch?v=RKWv...
CSS Grid for Beginners (mini course)
Learn how to use CSS grid for building layouts, step-by-step, with this beginner friendly tutorial.
💥 Want to learn how to build a website from scratch? Check out my course:…
www.youtube.com
May 1, 2026 at 2:04 PM
#CSS Grid for Beginners: "Learn how to use CSS grid for building layouts, step-by-step, with this beginner friendly tutorial." www.youtube.com/watch?v=RKWv...
New #CSS Multi-Column Layout Features: "The new column-height and column-wrap CSS multi-column layout properties enable us to wrap additional content into a new row." css-tricks.com/css-multi-co...
New CSS Multi-Column Layout Features in Chrome | CSS-Tricks
Chrome 145 introduces the column-height and column-wrap CSS multi-column layout properties, enabling us to wrap the additional content into a new row.
css-tricks.com
April 30, 2026 at 2:07 PM
New #CSS Multi-Column Layout Features: "The new column-height and column-wrap CSS multi-column layout properties enable us to wrap additional content into a new row." css-tricks.com/css-multi-co...
Your options for preloading images with #JavaScript: "There are a number of ways to preload an image on demand with JavaScript — each with their own strengths & drawbacks. Let's explore them." macarthur.me/posts/preloa...
Your options for preloading images with JavaScript
There are a number of ways to preload an image on demand with JavaScript — each with their own strengths & drawbacks. Let's explore them.
macarthur.me
April 29, 2026 at 5:05 PM
Your options for preloading images with #JavaScript: "There are a number of ways to preload an image on demand with JavaScript — each with their own strengths & drawbacks. Let's explore them." macarthur.me/posts/preloa...
Hiding Content Has No Effect on Accessible Name or Description Calculation: "By design, hiding content using display:none or the hidden attribute does not stop the content from being used to provide a name/description." #a11y html5accessibility.com/stuff/2026/0...
old advice – Hiding Content Has No Effect on Accessible Name or Description Calculation – HTML Accessibility
html5accessibility.com
April 29, 2026 at 2:05 PM
Hiding Content Has No Effect on Accessible Name or Description Calculation: "By design, hiding content using display:none or the hidden attribute does not stop the content from being used to provide a name/description." #a11y html5accessibility.com/stuff/2026/0...
Let’s Get Puzzled! "We can make puzzle pieces in #CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside." frontendmasters.com/blog/creatin...
Let’s Get Puzzled!
We can make puzzle pieces in CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside.
frontendmasters.com
April 28, 2026 at 5:03 PM
Let’s Get Puzzled! "We can make puzzle pieces in #CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside." frontendmasters.com/blog/creatin...
Alternatives to the !important Keyword: "Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain to your future self." #CSS css-tricks.com/alternatives...
Alternatives to the !important Keyword | CSS-Tricks
Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain…
css-tricks.com
April 28, 2026 at 2:04 PM
Alternatives to the !important Keyword: "Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain to your future self." #CSS css-tricks.com/alternatives...
Making emojis and icons screen reader accessible: "Learn how emojis and icons are often not traditional images that need special considerations to be screen reader accessible." #a11y blog.pope.tech/2026/04/01/m...
Making emojis and icons screen reader accessible - Pope Tech Resources
Learn how emojis and icons are often not traditional images that need special considerations to be screen reader accessible.
blog.pope.tech
April 27, 2026 at 5:03 PM
Making emojis and icons screen reader accessible: "Learn how emojis and icons are often not traditional images that need special considerations to be screen reader accessible." #a11y blog.pope.tech/2026/04/01/m...
CSS Flexbox for beginners (mini course): "Hey folks, in this video I'm going to show you how to get started with Flexbox as a beginner. Flexbox is a really powerful #CSS feature that lets you size and align groups of elements." www.youtube.com/watch?v=lVvP...
CSS Flexbox for beginners (mini course)
Learn the basics of CSS flexbox for building layouts with this beginners tutorial.
🟢 Responsive Design for Beginners -- Learn how to build a website from scratch --…
www.youtube.com
April 27, 2026 at 2:02 PM
CSS Flexbox for beginners (mini course): "Hey folks, in this video I'm going to show you how to get started with Flexbox as a beginner. Flexbox is a really powerful #CSS feature that lets you size and align groups of elements." www.youtube.com/watch?v=lVvP...
font-family Doesn’t Fall Back the Way You Think: "A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume." #CSS csswizardry.com/2026/04/font...
font-family Doesn’t Fall Back the Way You Think – CSS Wizardry
A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume.
csswizardry.com
April 24, 2026 at 5:03 PM
font-family Doesn’t Fall Back the Way You Think: "A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume." #CSS csswizardry.com/2026/04/font...
Screen readers are not testing tools: "Testing with assistive technologies is an important part of any accessibility review. However, especially when auditing against WCAG, they should not be the primary tools to use for testing. Here’s why." #a11y yatil.net/blog/screen-...
Screen readers are not testing tools · Eric Eggert
Testing with assistive technologies is an important part of any accessibility review. However, especially when auditing against the Web …
yatil.net
April 23, 2026 at 5:03 PM
Screen readers are not testing tools: "Testing with assistive technologies is an important part of any accessibility review. However, especially when auditing against WCAG, they should not be the primary tools to use for testing. Here’s why." #a11y yatil.net/blog/screen-...
Selecting a Date Range in #CSS: "A clever approach for selecting multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting... even in the JavaScript." css-tricks.com/selecting-a-...
Selecting a Date Range in CSS | CSS-Tricks
A clever approach for selecting multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting... even in the JavaScript.
css-tricks.com
April 22, 2026 at 5:03 PM
Selecting a Date Range in #CSS: "A clever approach for selecting multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting... even in the JavaScript." css-tricks.com/selecting-a-...
Did you know some ARIA roles remove child semantics? "Some ARIA roles replace native HTML structure and remove child semantics. Learn how this works, why it happens, and when child roles must be explicitly defined." #a11y www.maxdesign.com.au/articles/ari...
Did you know some ARIA roles remove child semantics? - Max Design
Some ARIA roles replace native HTML structure and remove child semantics. Learn how this works, why it happens, and when child roles must be explicitly defined.
www.maxdesign.com.au
April 21, 2026 at 5:03 PM
Did you know some ARIA roles remove child semantics? "Some ARIA roles replace native HTML structure and remove child semantics. Learn how this works, why it happens, and when child roles must be explicitly defined." #a11y www.maxdesign.com.au/articles/ari...
#CSS position: sticky now sticks to the nearest scroller on a per axis basis! "If you’ve ever tried to build a table with sticky header and sticky first column, you know only one would stick. A recent change allows sticky elements to track different axes." www.bram.us/2026/03/30/c...
CSS position: sticky now sticks to the nearest scroller on a per axis basis!
If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the…
www.bram.us
April 20, 2026 at 5:05 PM
#CSS position: sticky now sticks to the nearest scroller on a per axis basis! "If you’ve ever tried to build a table with sticky header and sticky first column, you know only one would stick. A recent change allows sticky elements to track different axes." www.bram.us/2026/03/30/c...
A guide to accessible focus indicators: "Have you ever lost your mouse cursor on your screen? This is what it is like when keyboard users don’t have focus indicators. Focus indicators aren’t just a feature, but a necessity for those who navigate with keyboards." #a11y blog.pope.tech/2026/03/04/a...
A guide to accessible focus indicators - Pope Tech Resources
Learn what focus indicators are and how to design accessible focus indicators.
blog.pope.tech
April 17, 2026 at 5:02 PM
A guide to accessible focus indicators: "Have you ever lost your mouse cursor on your screen? This is what it is like when keyboard users don’t have focus indicators. Focus indicators aren’t just a feature, but a necessity for those who navigate with keyboards." #a11y blog.pope.tech/2026/03/04/a...
Highlighting Footnotes: "A short piece on using #CSS to highlight the active footnote of a document." kittygiraudel.com/2026/03/18/h...
Highlighting Footnotes
A short piece on using CSS to highlight the active footnote of a document.
kittygiraudel.com
April 16, 2026 at 5:03 PM
Highlighting Footnotes: "A short piece on using #CSS to highlight the active footnote of a document." kittygiraudel.com/2026/03/18/h...
Chris’ Corner: Even Grids: "It’s always interesting observing multiple people attack the same problem. Sometimes they aren’t even aware of each other." #CSS blog.codepen.io/2026/03/23/c...
Chris’ Corner: Even Grids
It’s always interesting observing multiple people attack the same problem. Sometimes they aren’t even aware of each other. Like how Isaac Newton invented calculus in the mid 1660’…
blog.codepen.io
April 15, 2026 at 5:03 PM
Chris’ Corner: Even Grids: "It’s always interesting observing multiple people attack the same problem. Sometimes they aren’t even aware of each other." #CSS blog.codepen.io/2026/03/23/c...
The Color System I Wish I Understood Sooner: "Does your system for naming colors always feel like it falls short? This two-layer approach solves so many problems!" #CSS theadminbar.com/semantics-an...
The Color System I Wish I Understood Sooner
Does your system for naming colors always feel like it falls short? This two-layer approach solves so many problems!
theadminbar.com
April 14, 2026 at 5:03 PM
The Color System I Wish I Understood Sooner: "Does your system for naming colors always feel like it falls short? This two-layer approach solves so many problems!" #CSS theadminbar.com/semantics-an...
Folded corner with #CSS: "She wanted to have this hover effect where the corner of the picture would fold over, as if peeling off a sticker from a flat surface." kittygiraudel.com/2026/03/05/f...
Folded corner with CSS
A technical walkthrough of creating a folding corner effect with CSS.
kittygiraudel.com
April 13, 2026 at 5:04 PM
Folded corner with #CSS: "She wanted to have this hover effect where the corner of the picture would fold over, as if peeling off a sticker from a flat surface." kittygiraudel.com/2026/03/05/f...
CSS position property explained: "How the #CSS position property works, with static, relative, absolute, fixed, and sticky elements." www.youtube.com/watch?v=xLHg...
CSS position property explained (static, relative, absolute, fixed, sticky)
How the CSS position property works, with static, relative, absolute, fixed, and sticky elements.
🟢 Responsive Design for Beginners -- Learn how to build a website from scratch --…
www.youtube.com
April 10, 2026 at 5:06 PM
CSS position property explained: "How the #CSS position property works, with static, relative, absolute, fixed, and sticky elements." www.youtube.com/watch?v=xLHg...
"Put aria-hidden='true' on decorative SVGs, or they'll be announced by some screen readers." #a11y www.matuzo.at/blog/2026/pu...
Put aria-hidden=true on decorative SVGs - Manuel Matuzovic
I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.
www.matuzo.at
April 9, 2026 at 5:02 PM
"Put aria-hidden='true' on decorative SVGs, or they'll be announced by some screen readers." #a11y www.matuzo.at/blog/2026/pu...
Designing for people with low vision: "Low vision affects millions, yet it's often overlooked. Design choices from how we emphasise content to where we position controls, can empower people to customise their experience or create unnecessary barriers." #a11y tetralogical.com/blog/2026/03...
Designing for people with low vision - TetraLogical
img.headings { width:50%; min-width:400px; max-width:100%; } @media (max-width: 400px) { img.headings { min-width: 100%; } } Low vision affects millions of people worldwide, yet it's often overlooked…
tetralogical.com
April 8, 2026 at 5:02 PM
Designing for people with low vision: "Low vision affects millions, yet it's often overlooked. Design choices from how we emphasise content to where we position controls, can empower people to customise their experience or create unnecessary barriers." #a11y tetralogical.com/blog/2026/03...
A Guide to the #CSS Backdrop-Filter Property: "A concise guide to CSS backdrop-filter for glassmorphism and translucent overlays — how it works, why order matters, and an interactive CodePen playground." www.alwaystwisted.com/articles/bey...
A Guide to the CSS Backdrop-Filter Property
A concise guide to CSS backdrop-filter for glassmorphism and translucent overlays — how it works, why order matters, and an interactive CodePen playground.
www.alwaystwisted.com
April 7, 2026 at 5:02 PM
A Guide to the #CSS Backdrop-Filter Property: "A concise guide to CSS backdrop-filter for glassmorphism and translucent overlays — how it works, why order matters, and an interactive CodePen playground." www.alwaystwisted.com/articles/bey...
More Easy Light-Dark Mode Switching: light-dark() is about to support images! #CSS www.bram.us/2026/03/19/m...
More Easy Light-Dark Mode Switching: light-dark() is about to support images!
CSS light-dark() is being extended to support images.
www.bram.us
April 6, 2026 at 5:03 PM
More Easy Light-Dark Mode Switching: light-dark() is about to support images! #CSS www.bram.us/2026/03/19/m...
There Is No “Wrong” in #CSS: "Wrong CSS doesn't exist — here's why. From backwards-compatibility to platform responsibility, find out why CSS advice is context, not law." www.sitepoint.com/there-is-no-...
There Is No “Wrong” in CSS
Wrong CSS doesn't exist — here's why. From backwards-compatibility to platform responsibility, find out why CSS advice is context, not law.
www.sitepoint.com
April 3, 2026 at 5:02 PM
There Is No “Wrong” in #CSS: "Wrong CSS doesn't exist — here's why. From backwards-compatibility to platform responsibility, find out why CSS advice is context, not law." www.sitepoint.com/there-is-no-...