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
#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:…
youtube.com
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
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
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
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
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
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
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 --…
youtube.com
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
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
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
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.
maxdesign.com.au
#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…
bram.us
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
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
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
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
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
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 --…
youtube.com
"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.
matuzo.at
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
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.
alwaystwisted.com
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.
bram.us
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.
sitepoint.com
View Transitions can swoop‽ "But hey, now we can add swoops to a native view transition and we learned a trick that can make motion blur view transitions. That's coo." #CSS nerdy.dev/swoop-there-...
View Transitions can swoop‽ · March 7, 2026
How to make View Transitions not always a straight line
nerdy.dev
How to implement an image gallery using Baseline features: "Image galleries are a common user interface pattern on the web. Learn how to create one using Baseline features." #HTML #CSS web.dev/articles/bas...
How to implement an image gallery using Baseline features | Articles | web.dev
Image galleries are a common user interface pattern on the web. Learn how to create one using Baseline features.
web.dev
Beyond border-radius: What The #CSS corner-shape Property Unlocks For Everyday UI: "The new corner-shape property finally opens the door to beveled, scooped, and squircle corners." www.smashingmagazine.com/2026/03/beyo...
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine
For years, developers have been hacking around the limitations of `border-radius`, using clip-path, SVG masks, and fragile workarounds just to get anything other than round corners. The new…
smashingmagazine.com
One #CSS Property That Makes Numbers Look Instantly Better: "When you’re working with fonts, especially for displaying numbers, there’s something called proportional spacing that can make a huge difference in how your numbers look when they’re animated." www.amitmerchant.com/one-css-prop...
One CSS Property That Makes Numbers Look Instantly Better
When you’re working with fonts, especially for displaying numbers, there’s something called proportional spacing that can make a huge difference in how your numbers look when they’re animated.
amitmerchant.com
You Don’t Know #HTML Tables: "This is a deep dive into HTML tables that cover its vocabulary and parts, Table Object Model, Cell headers, and the semantic value of table headers and footers." blog.frankmtaylor.com/2026/03/05/y...
You Don’t Know HTML Tables
This is a deep dive into HTML tables that cover its vocabulary & parts, Table Object Model, Cell headers, and the semantic value of table headers and footers
blog.frankmtaylor.com