Front End Study Hall

🎨 Front End Study Hall (sometimes abbreviated as FrESH) is an HTML and CSS focused IndieWeb popup meeting focused on markup, styling, design, layout, and accessibility in a loose format where participants come to learn and teach.

Planned

View upcoming online Front End Study Hall pop-ups and RSVP!

https://events.indieweb.org/tag/fresh

To-Study List!

Ideas for the next FrESH? Add below or message Joe Crawford:

Sustainable Web Design Aesthetics -- Such as System Font Stacks, Tiny SVG Icons https://wsg-facts.netlify.app/ - Morgan M
What are buttons good for anyway? Jeremy Cherfas
Via capjamesg transition for the click on the image on https://www.tate.org.uk/art/artworks/blake-the-good-and-evil-angels-n05057 might be worth looking at
Via capjamesg 2024-10-10: would like to discuss making hamburger menus
- gRegor Morrill just the other day saw this CSS-only version https://codepen.io/ahaywood/pen/OJXLKEX, via video walkthrough: https://youtu.be/x_VYl7zz1XY
An animated cookie monster eating a line (via HWC)
improving the gallery "tag" in mediawiki - suggested by gRegor Morrill
Subgrid! suggested by capjamesg
fit-content suggested by capjamesg
Idea: FrESH session for making your own /linktree or /links page from Tantek Çelik
From Tantek Çelik https://www.adavanzo.com/articles/2025/the-systemic-failure-of-implementing-css-principles
From Tantek Çelik https://www.adavanzo.com/articles/2025/css-class-seriously-sprawling
Interesting new SVG Editor in development: GodSVG https://www.godsvg.com/
On the joy and whimsy of making websites from Sara Joy https://slides.sarajoy.dev/whimsica11y-sotb2025/
Avoid "fake" bold and italic. https://adrianroselli.com/2025/03/dont-use-fake-bold-or-italic-in-social-media.html
James would love to know when you would use subgrid
Open question: Can you do a dark mode toggle in only HTML/CSS that persists between pages?
Revisiting image maps via Paul Watson
scripting @media query https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting !
lh line height units: https://webkit.org/blog/16831/line-height-units/
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#line_height_units
XHTML encoding https://rambo.codes/posts/2025-05-12-cracking-the-dave-and-busters-anomaly
The future of web development (cheeky)
Suggested topic from Tantek Çelik: an "eco mode" theme (and switching UI!) in addition to light/dark, see:
- recent IWC DUS session: Sustainable Web Sites and watch the recording for background.
- result of the IWC DUS session, Joschi Kuphal's demo (worth watching the video, linked at top of that page, for visual and charts!)
  - with example of page with light/dark/eco-mode switcher at bottom: https://jkphl.is/ecomode/index-2.php
- more recently, an independently developed freely usable more-sustainable SVG icons set: https://github.com/codewordcreative/susty-icons/tree/main?tab=readme-ov-file#a-work-in-progress-before-initial-release
- existing background on wiki: green computing
Painting with the Web from Matthias Ott at Beyond Tellerrand
What happens to a CSS animation when a tab is closed? What rules define the behavior?
interpolate-size: allow-keywords
https://stackoverflow.com/questions/27433399/same-color-text-looking-different-color/79646300
https://cybercultural.com/p/web-design-1997/
is there a way to randomize the order of display of an set of display of elements without JavaScript? https://thoughts.uncountable.uk/displaying-static-html-randomly/
That One Time a CSS Variable Took Down Production https://dev.to/abhinavshinoy90/that-one-time-a-css-variable-took-down-production-mnn
Ana Rodrigues presentation from CSS Day is terrific! Many great pointers to tools to understand existing CSS on a project: https://noti.st/anarodrigues/abfj0M/slides https://noti.st/anarodrigues/abfj0M/refactoring-css https://front-end.social/@anarodrigues/114648051248841464
https://www.canidev.tools/
https://css-tricks.com/color-everything-in-css/
really lovely and interesting shapes with conic-gradients, no JavaScript, no SVG filters: https://codepen.io/hexagoncircle/pen/wBBwmqo
terrific accessibility bookmarklet! https://sa11y.netlify.app/bookmarklet/
linter for css compatibility https://github.com/anandthakker/doiuse (via pierre)
Tantek Çelik had a question in indieweb chat: "are people creating new projects and using Bootstrap?"
https://specifishity.com ~ using, uh, sea creatures and ocean things to describe rules about CSS selector specificity differences?
A Friendly Introduction to SVG https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/
https://dev.to/alvaromontoro/interview-with-ben-evans-3o3b
https://github.com/TetraLogical/screen-reader-HTML-support
svgs can be written to contain javascript which can execute malicious code https://arstechnica.com/security/2025/08/adult-sites-use-malicious-svg-files-to-rack-up-likes-on-facebook/
Details/summary lightboxes in pure HTML + CSS
https://piccalil.li/guest-authoring/
https://gradient.style https://nerdy.dev/gradient.style-is-out-of-beta
Lightweight HTML editor designed to be fun and work on mobile and export to Codeberg https://wwwobble.org
View Transitions: What Could Possibly Go Wrong https://vtbag.dev/tips/view-transition-fails-and-fixes/
Apple has a private CSS property to add Liquid Glass effects to web content
The “Most Hated” CSS Feature: cos() and sin()
Primarium is a groundbreaking educational effort by TypeTogether to document different models of handwriting that are taught to primary school students around the world.
Single color gradients
<output> tag, use cases
CSS to ape the look of ancient MacOS
UX so bad that it's illegal
Adam Argyle - 25 new & rad feature of CSS
Annotating designs using common language (accessibility-wise)
Simplify some very nice short snippets of CSS for formatting images in-page
Crafting Generative CSS Worlds
DOCTYPE magazine
Springs and Bounces in Native CSS The magic of the linear() timing function
Chrome only demo page for corner-shape
SVGs that feel like GIFs, asciinema svg-term-cli
TAC CSS Methodology
MathML and interop "MathML Core"
3D stacked text https://frontendmasters.com/blog/how-to-create-3d-images-in-css-with-the-layered-pattern/
Pausing a CSS animation with getAnimations()
Validators! What can they and what can't they tell us? (came up in context of RSS <guid isPermalink> conversation)
That Time I Tried Explaining HTML and CSS to My 5-Year Old Niece (via Jeff Bridgforth)
ReliCSS - detect CSS hacks (underscore hack, vendor prefixes) (does not detect Tantek Çelik’s box-model hack).
“Form validation could be an interesting topic to explore in FrESH!” capjamesg
The Secret Life of Custom Elements Brian Kardell
Not All Browser APIs Are "Web" APIs
Respecting the No-JS Choice: Making Your Site Work for Everyone
suggested topic: favicons via link rel=icon, quirks, strategies, and lessons learned https://en.wikipedia.org/wiki/Favicon see also 88x31
possible discussion topic / example to dig into and learn from: accessible flowchart in SVG! https://www.ashleysheridan.co.uk/blog/Creating+Accessible+Flowcharts cc: [KevinMarks]
The Incredible Overcomplexity of the Shadcn Radio Button suggested by Kevin Marks
text-scale meta tag
Why does HTML think "chucknorris" is a color (in a bgcolor attribute) (2011 stack overflow question) via CodePen
Styling ::search-text and Other Highlight-y Pseudo-Elements
geolocation tag (Chrome only for now)
Performance-Optimized Video Embeds with Zero JavaScript css and details element
The CSS Selection: The state of real-world CSS usage, 2026 edition via Murray
How an accessibility designer adds keyboard shortcuts to a web app
How to Create a CSS-only Elastic Text Effect
autocapitalize attribute
Sprites on the Web
(color cycling animation technique in the blog Unsung)
x86 CPU made in CSS (Chrome only)
Customizable select that is also a shooting gallery game, no JS (Chrome only)
Let's break some WCAG rules - Elise Kristiansen - NDC London 2026
Web Haptics via capjamesg
add more…

FAQ

When?

Every two weeks or so, see events.indieweb.org/tag/fresh and subscribe to the iCal feed

Do you talk about things like React?

Frameworks like React, with complex dependency needs tend to be ill suited to FrESH. FrESH has talked about JavaScript libraries related to DOM manipulation (jQuery), server-communication (HTMX), visualization (D3.js) and similar "drop-in" scripts. Meetings contain folks with strong opinions about frameworks, libraries, tools, editors, tutorials. For questions and suggestions, reach out in discuss and mention FrESH, or to Joe Crawford directly.

How do I get notified of new FrESH events?

Follow the “fresh” tag on events.indieweb.org as an iCal feed: events.indieweb.org/ics/tag/fresh/

Do I have to turn on my camera? My Mic?

No. But participation is encouraged! Each FrESH includes a Notes real time wiki page called an etherpad. These pages get archived to indieweb dot org.

Some commonly discussed topics?

accessibility or a11y, CSS, HTML, RSS, audio, SVG, blogroll, fonts, design concepts, getting started

Meetings

During Front End Study Hall the group takes collective notes using etherpad. These are archived below.

2026

2025

2024

Front End Study Hall (FrESH)
	Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend
2026	01-15 • 01-29 • 02-12 • 02-24
2025	01-02 • 01-16 • 01-30 • 02-13 • 02-25 • 03-11 • 03-27 • 04-08 • 04-24 • 05-08 • 05-20 • 06-03 • 06-17 • 07-01 • 07-17 • 07-31 • 08-12 • 08-28 • 09-18 • 09-30 • 10-14 • 10-30 • 11-13 • 11-25 • 12-11 • 12-30
2024	04-24 • 05-07 • 05-23 • 06-06 • 06-18 • 07-02 • 07-16 • 08-01 • 08-27 • 09-12 • 09-26 • 10-10 • 10-24 • 11-07 • 11-21 • 12-05 • 12-17