This is a great tutorial—I just love the interactive parts that really help make things click.
Tuesday, September 14th, 2021
Saturday, January 16th, 2021
An excellent collection of advice and examples for making websites responsive and accessibile (responsive + accessible = responsible).
Monday, December 14th, 2020
This is a truly wonderful web page! It’s an explanation from first principles of how cameras and lenses work.
Then you realise that every post ever published on this personal site is equally in-depth and uses the same content-first progressive enhancement approach.
Thursday, August 20th, 2020
Saturday, July 18th, 2020
I’ve always been a fan of using the first few milliseconds of a user’s attention getting what I have to share with them — in front of them. Then worrying setting up the interaction layer while the user can start processing what they’re seeing.
Sunday, June 28th, 2020
I linked to the first of Ethan’s short videos on accessibility last week, but it’s well worth checking out all five:
Friday, June 12th, 2020
A really great one-page guide to HTML from Bruce. I like his performance-focused intro:
If your site is based on good HTML, it will load fast. Browsers incrementally render HTML—that is, they will display a partially downloaded web page to the user while the browser awaits the remaining files from the server.
Friday, March 6th, 2020
A cute walkthrough for flexbox and grid.
Tuesday, December 3rd, 2019
Wednesday, November 20th, 2019
Tuesday, July 30th, 2019
What a wonderfully in-depth and clear tutorial from Cassie on how she created the animation for her nifty SVG logo!
Also: Cassie is on the indie web now, writing on her own website—yay!
Monday, June 17th, 2019
This really is a most excellent introduction to React. Complete with cheat sheet!
Saturday, November 17th, 2018
Thursday, July 19th, 2018
(Caveat: because everything’s happening in
script elements in the browser, what’s outlined here will only do client-side rendering.)
Thursday, June 21st, 2018
Monday, February 26th, 2018
A good hands-on introduction to service workers from Mariko.
Tuesday, October 3rd, 2017
A ten-part tutorial on CSS Grid from Mozilla.
Monday, September 25th, 2017
Here’s a great free curriculum for teaching HTML and CSS.
Sunday, July 2nd, 2017
This is a really great screencast on getting started with React. I think it works well for a few reasons:
- Sarah and Chris aren’t necessarily experts yet in React—that’s good; it means they know from experience what “gotchas” people will encounter.
- They use a practical use-case (a comment form) that’s suited to the technology.
- By doing it all in CodePen, they avoid the disheartening slog of installation and build tools—compare it to this introduction to React.
- They make mistakes. There’s so much to be learned from people sharing “Oh, I thought it would work like that, but it actually works like this.”
There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.
Tuesday, April 18th, 2017
A step-by-step guide to building progressive web apps. It covers promises, service workers, fetch, and cache, but seeing as it’s from Google, it also pushes the app-shell model.
This is a handy resource but I strongly disagree with some of the advice in the section on architectures (the same bit that gets all swoonsome for app shells):
Start by forgetting everything you know about conventional web design, and instead imagine designing a native app.
Avoid overly “web-like” design.
What a horribly limiting vision for the web! After all that talk about being progressive and responsive, we’re told to pretend we’re imitating native apps on one device type.
What’s really disgusting is the way that the Chrome team are withholding the “add to home screen” prompt from anyone who dares to make progressive web apps that are actually, y’know …webby.