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
#CSS Animations That Leverage the Parent-Child Relationship: "When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage." css-tricks.com/css-animatio...
CSS Animations That Leverage the Parent-Child Relationship | CSS-Tricks
When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage.
css-tricks.com
November 11, 2025 at 8:02 PM
#CSS Animations That Leverage the Parent-Child Relationship: "When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage." css-tricks.com/css-animatio...
The Two Button Problem: "When you've got two buttons with two different looks (and no cursor), how do you know which one you're about to activate? You'll need to be careful with the #design." frontendmasters.com/blog/the-two...
The Two Button Problem
When you've got two buttons with two different looks (and no cursor), how do you know which one you're about to activate? You'll need to be careful with the design.
frontendmasters.com
November 11, 2025 at 6:02 PM
The Two Button Problem: "When you've got two buttons with two different looks (and no cursor), how do you know which one you're about to activate? You'll need to be careful with the #design." frontendmasters.com/blog/the-two...
Counting columns: a couple neat things you can do: "Using a bit of algebra to solve a common — and less common — layout problem" #CSS noahliebman.net/2025/10/coun...
Noah Liebman | Counting columns: a couple neat things you can do
Using a bit of algebra to solve a common — and less common — layout problem
noahliebman.net
November 10, 2025 at 8:02 PM
Counting columns: a couple neat things you can do: "Using a bit of algebra to solve a common — and less common — layout problem" #CSS noahliebman.net/2025/10/coun...
Header & footer elements change their roles when they're inside of sectioning content: "The header element loses its banner role and depending on the browser gets generic or sectionheader assigned, which has an effect on assistive technologies." #a11y www.stefanjudis.com/today-i-lear...
Header & footer elements change their roles when they're inside of sectioning content
`header` and `footer` elements lose their ARIA roles when they're included in sectioning content.
www.stefanjudis.com
November 10, 2025 at 6:03 PM
Header & footer elements change their roles when they're inside of sectioning content: "The header element loses its banner role and depending on the browser gets generic or sectionheader assigned, which has an effect on assistive technologies." #a11y www.stefanjudis.com/today-i-lear...
The #CSS Reset, again: "Apparently you are not a real CSS dev if you don't maintain your own CSS reset. Challenge accepted! Not a typical reset, but for sure a bunch of opinions." pawelgrzybek.com/the-css-rese...
pawelgrzybek.com
Hi, I’m Paweł, a software developer from Poland, now living in Northampton, UK. I do stuff on the web, write about it, and listen to funky and jazz records after hours.
pawelgrzybek.com
November 7, 2025 at 8:02 PM
The #CSS Reset, again: "Apparently you are not a real CSS dev if you don't maintain your own CSS reset. Challenge accepted! Not a typical reset, but for sure a bunch of opinions." pawelgrzybek.com/the-css-rese...
Page headings don’t belong in the header: "As a rule of thumb I keep the page’s out of the
out of the . It keeps the hierarchy clear, the landmarks consistent, and the experience smoother for everyone." #a11y #HTML www.tempertemper.net/blog/page-he...
Page headings don’t belong in the header
I have a habit of thinking pretty deeply about semantics and structure, and have been considering the main page heading and where it should live.
www.tempertemper.net
November 7, 2025 at 6:04 PM
Page headings don’t belong in the header: "As a rule of thumb I keep the page’s out of the
out of the . It keeps the hierarchy clear, the landmarks consistent, and the experience smoother for everyone." #a11y #HTML www.tempertemper.net/blog/page-he...
Masonry: Watching a #CSS Feature Evolve: "What can CSS Masonry discussions teach us about the development of new CSS features? What is the CSSWG’s role? What influence do browsers have? What can learn from the way past features evolved?" css-tricks.com/masonry-watc...
Masonry: Watching a CSS Feature Evolve | CSS-Tricks
What can CSS Masonry discussions teach us about the development of new CSS features? What is the CSSWG’s role? What influence do browsers have? What can learn from the way past features evolved?
css-tricks.com
November 6, 2025 at 8:02 PM
Masonry: Watching a #CSS Feature Evolve: "What can CSS Masonry discussions teach us about the development of new CSS features? What is the CSSWG’s role? What influence do browsers have? What can learn from the way past features evolved?" css-tricks.com/masonry-watc...
Essential Visually Hidden CSS Techniques for Web Accessibility: "Fix vanishing focus indicators & conflicting sr-only classes. Learn the 3-state visibility model that transforms CSS hacks into logical accessibility decisions." #a11y www.a11y-collective.com/blog/visuall...
Essential Visually Hidden CSS Techniques for Web Accessibility
Fix vanishing focus indicators & conflicting sr-only classes. Learn the 3-state visibility model that transforms CSS hacks into logical accessibility decisions.
www.a11y-collective.com
November 6, 2025 at 6:02 PM
Essential Visually Hidden CSS Techniques for Web Accessibility: "Fix vanishing focus indicators & conflicting sr-only classes. Learn the 3-state visibility model that transforms CSS hacks into logical accessibility decisions." #a11y www.a11y-collective.com/blog/visuall...
#CSS "field-sizing: content allows form controls to adjust in size to fit their contents. So far, I've thought the new property is only about expanding textarea elements, but apparently it works for other input elements, too." www.stefanjudis.com/today-i-lear...
field-sizing isn't only about growing textareas
The new field-sizing CSS property allows inputs, selects and textareas to grow depending on their content.
www.stefanjudis.com
November 5, 2025 at 8:01 PM
#CSS "field-sizing: content allows form controls to adjust in size to fit their contents. So far, I've thought the new property is only about expanding textarea elements, but apparently it works for other input elements, too." www.stefanjudis.com/today-i-lear...
Why Every Search Needs an Announced Empty State: "Screen reader users deserve the same clarity everyone else gets. The phrase 'no results' may seem trivial, but it closes the feedback loop." #a11y buttondown.com/access-abili...
Why Every Search Needs an Announced Empty State
Turquoise background with a white search functio,n with a finger poised over the magnification icon to execute the search We’ve all done it; Run a search and...
buttondown.com
November 5, 2025 at 6:04 PM
Why Every Search Needs an Announced Empty State: "Screen reader users deserve the same clarity everyone else gets. The phrase 'no results' may seem trivial, but it closes the feedback loop." #a11y buttondown.com/access-abili...
We Completely Missed width/height: stretch: "stretch does the same thing as declaring 100%, but ignores padding. In short, if you’ve ever wanted 100% to actually mean 100% (when using padding), stretch is what you’re looking for." #CSS css-tricks.com/we-completel...
We Completely Missed width/height: stretch | CSS-Tricks
The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space.
css-tricks.com
November 4, 2025 at 8:02 PM
We Completely Missed width/height: stretch: "stretch does the same thing as declaring 100%, but ignores padding. In short, if you’ve ever wanted 100% to actually mean 100% (when using padding), stretch is what you’re looking for." #CSS css-tricks.com/we-completel...
The new progress() function in #CSS: "Imagine a responsive hero image that becomes more transparent as the viewport gets narrower, helping text readability on small screens or a card that scales up slightly as the viewport grows, adding a subtle polish." www.amitmerchant.com/the-progress...
The new progress() function in CSS
Imagine a responsive hero image that becomes more transparent as the viewport gets narrower, helping text readability on small screens or a card that scales up slightly as the viewport grows, adding…
www.amitmerchant.com
November 4, 2025 at 6:03 PM
The new progress() function in #CSS: "Imagine a responsive hero image that becomes more transparent as the viewport gets narrower, helping text readability on small screens or a card that scales up slightly as the viewport grows, adding a subtle polish." www.amitmerchant.com/the-progress...
Common misconceptions about screen readers: "Screen readers are familiar to many in digital, but how they work in practice can be less clear. In this post, we shed some light on the topic." #a11y tetralogical.com/blog/2025/10...
Common misconceptions about screen readers - TetraLogical
Screen readers are familiar to many in digital, but how they work in practice can be less clear. In this post, we shed some light on the topic.
tetralogical.com
November 3, 2025 at 8:02 PM
Common misconceptions about screen readers: "Screen readers are familiar to many in digital, but how they work in practice can be less clear. In this post, we shed some light on the topic." #a11y tetralogical.com/blog/2025/10...
For Your Convenience, This #CSS Will Self-Destruct: "The more I ask myself questions like, "what could go wrong here if #JavaScript fails to fully load, has a error, or takes a while to load?," the more I find my sites are usable when those things inevitably happen." scottjehl.com//posts/this-...
For Your Convenience, This CSS Will Self-Destruct | Scott Jehl, Web Designer/Developer
A general defensive website delivery pattern for applying visual effects with less risk
scottjehl.com
November 3, 2025 at 6:02 PM
For Your Convenience, This #CSS Will Self-Destruct: "The more I ask myself questions like, "what could go wrong here if #JavaScript fails to fully load, has a error, or takes a while to load?," the more I find my sites are usable when those things inevitably happen." scottjehl.com//posts/this-...
Make Navigation Accessible with aria-current: "Learn when 'you are here' needs aria-current. Simple examples for navigation, breadcrumbs, and multi-step processes. Give screen readers navigation context." #a11y www.a11y-collective.com/blog/aria-cu...
Make Navigation Accessible with aria-current
Learn when 'you are here' needs aria-current. Simple examples for navigation, breadcrumbs, and multi-step processes. Give screen readers navigation context.
www.a11y-collective.com
October 31, 2025 at 7:02 PM
Make Navigation Accessible with aria-current: "Learn when 'you are here' needs aria-current. Simple examples for navigation, breadcrumbs, and multi-step processes. Give screen readers navigation context." #a11y www.a11y-collective.com/blog/aria-cu...
#CSS Grid: A helpful mental model and the power of grid lines: "If you struggle to wrap your head around Grid, you’re not alone. There’s a lot of stuff to learn. Let’s see if we can unpack and explore it together, and make grid a little more comfortable to use." webkit.org/blog/17474/c...
CSS Grid: A helpful mental model and the power of grid lines
Grid is a powerful, flexible tool that brings complex layouts to life.
webkit.org
October 31, 2025 at 5:03 PM
#CSS Grid: A helpful mental model and the power of grid lines: "If you struggle to wrap your head around Grid, you’re not alone. There’s a lot of stuff to learn. Let’s see if we can unpack and explore it together, and make grid a little more comfortable to use." webkit.org/blog/17474/c...
Implicit labels aren't: "If a
Implicit labels aren't
In HTML, you can associate a <label> with its field using the [for] attribute, with the ID of the corresponding field as its value. <label for="season">What's your favorite season?</label> <input…
gomakethings.com
October 30, 2025 at 7:04 PM
Implicit labels aren't: "If a
#HTML Tables: Beyond Rows and Columns: "This article explains the best way to use semantic table markup to present web content in accessible rows and columns." #a11y www.tpgi.com/tables-beyon...
Tables: Beyond Rows and Columns - TPGi — a Vispero company
This article explains the best way to use semantic table markup to present web content in accessible rows and columns.
www.tpgi.com
October 30, 2025 at 5:04 PM
#HTML Tables: Beyond Rows and Columns: "This article explains the best way to use semantic table markup to present web content in accessible rows and columns." #a11y www.tpgi.com/tables-beyon...
When to Use Modal vs Dialog Components: "Confused about modal vs dialog components? Discover implementation patterns, accessibility guidelines, and best practices for creating user-friendly interfaces." #a11y www.a11y-collective.com/blog/modal-v...
When to Use Modal vs Dialog Components
Confused about modal vs dialog components? Discover implementation patterns, accessibility guidelines, and best practices for creating user-friendly interfaces.
www.a11y-collective.com
October 29, 2025 at 7:05 PM
When to Use Modal vs Dialog Components: "Confused about modal vs dialog components? Discover implementation patterns, accessibility guidelines, and best practices for creating user-friendly interfaces." #a11y www.a11y-collective.com/blog/modal-v...
#HTML’s Best Kept Secret: The output Tag: "Most devs have never touched
Accessible form validation with examples and code: "By designing error messages with inclusion in mind, you open your website to a broader variety of users. You’re building a map that demonstrates to your users that you care about their experience." #a11y blog.pope.tech/2025/09/30/a...
Accessible form validation with examples and code - Pope Tech Blog
An accessible form validation design with code.
blog.pope.tech
October 28, 2025 at 7:05 PM
Accessible form validation with examples and code: "By designing error messages with inclusion in mind, you open your website to a broader variety of users. You’re building a map that demonstrates to your users that you care about their experience." #a11y blog.pope.tech/2025/09/30/a...
Keyframe animations have a special role in the #CSS cascade: "Properties defined in CSS keyframe animations overrule other non-important CSS properties." www.stefanjudis.com/today-i-lear...
Keyframe animations have a special role in the CSS cascade
Properties defined in CSS keyframe animations overrule other non-important CSS properties.
www.stefanjudis.com
October 28, 2025 at 5:06 PM
Keyframe animations have a special role in the #CSS cascade: "Properties defined in CSS keyframe animations overrule other non-important CSS properties." www.stefanjudis.com/today-i-lear...
#CSS Counters in Action: "CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations." frontendmasters.com/blog/css-cou...
CSS Counters in Action
CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations.
frontendmasters.com
October 27, 2025 at 7:04 PM
#CSS Counters in Action: "CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations." frontendmasters.com/blog/css-cou...
Simplify: "Honestly, I feel like web devs are constantly being gaslit into thinking complex over-engineered solutions are the only option. When the discourse is dominated by people invested in frameworks, all our default thinking will involve frameworks." adactio.com/journal/22178
Simplify
Reminding myself just how much you can do with CSS these days.
adactio.com
October 27, 2025 at 5:05 PM
Simplify: "Honestly, I feel like web devs are constantly being gaslit into thinking complex over-engineered solutions are the only option. When the discourse is dominated by people invested in frameworks, all our default thinking will involve frameworks." adactio.com/journal/22178
What using a screen reader taught me about real web accessibility: "These aren’t just accessibility concepts; they’re fundamental Web development skills that improve code quality across the board." #a11y blog.logrocket.com/what-using-a...
What using a screen reader taught me about real web accessibility - LogRocket Blog
Read one developer's detailed account of using a screen reader to learn more about a11y and build more accessible websites.
blog.logrocket.com
October 24, 2025 at 7:05 PM
What using a screen reader taught me about real web accessibility: "These aren’t just accessibility concepts; they’re fundamental Web development skills that improve code quality across the board." #a11y blog.logrocket.com/what-using-a...
English
300
Connect Bluesky
Enter your Bluesky handle and app password to unlock posting, likes, and your Following feed.
Need an app password? Open Bluesky, go to Settings > App passwords, and create a new one.
Connect with Bluesky
Sign in with your Bluesky account to unlock posting, likes, and your Following feed.