CSS { In Real Life } | Cool Tools
I knew of most of these front-end development tools (like Utopia, obviously), but some were new to me.
Link tags: resource
108
Generative AI: What You Need To Know
Generative AI: What You Need To Know is a free resource that will help you develop an AI-bullshit detector.
You can read all the cards on one page, print them out, or print to PDF.
WPDS - Accessibility | Resources
I didn’t know the Washington Post had a design system or that the system has this good section on accessibility.
Accessibility for designer: where do I start? by Stéphanie Walter - UX Researcher & Designer.
Stéphanie has gathered a goldmine of goodies:
Articles, resources, checklists, tools, plugins and books to design accessible products
Learn Privacy
Stuart has written this fantastic concise practical guide to privacy for developers and designers. A must-read!
Learn HTML
This is a great step-by-step guide to HTML by Estelle.
12 Days of Web
All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.
An Interactive Guide to Flexbox in CSS
This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!
Lean Web Club
New from Mr. Vanilla JS himself, Chris Ferdinandi:
A learning space for people who hate the complexity of modern web development.
It’ll be $29 a month or $299 a year (giving you two months worth for free).
Color and Contrast.com
A lovely website (or web book?) dedicated entirely to colour contrast, complete with interactive illustrative widgets.
A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.
Start at the beginning: the importance of learning the basics - localghost
I’d recommend going in the order HTML, CSS, JS. That way, you can build something in HTML, add CSS to it as you learn it, and finally soup it up with your new-found JS knowledge.
Excellent advice for anyone new to web develoment.
Once you start getting into interactive website territory, with API calls and fancy stuff, that’s where you need JavaScript (JS) knowledge. More specifically, vanilla JS: plain JS with no additional frameworks or plugins. The JS that your browser understands without having to do any pre-processing. It makes working with frameworks a whole lot easier, and it’ll help you to know when not to use a framework (and avoid making users download massive JS bundles when all you need is a tiny bit of code).
Can I include a tag to a tag? Based on HTML Spec WHATWG
A neat little tool when you need a reminder about what elements can go in other elements.
Tiny Helpers
A very comprehensive collection of standalone little tools for web design and development—tools that do one thing.
Learn CSS
This is a great (free!) course on learning CSS from the basics up. Nicely-pitched explanations with plenty of examples.
Library: Accessibility resources, guides, communities, and more
A very comprehensive directory of accessibility resources.
A Complete Guide To Accessible Front-End Components — Smashing Magazine
Vitaly has rounded up a whole load of accessibility posts. I think I’ve linked to most of them at some point, but it’s great to have them all gathered together in one place.
Responsible Web Applications
An excellent collection of advice and examples for making websites responsive and accessibile (responsive + accessible = responsible).
Operator Lookup - Search JavaScript operators · Josh W Comeau
Operators in JavaScript—handy! I didn’t know about most of these.
AddyOsmani.com - Preload late-discovered Hero images faster
Did you know there’s an imagesrcset attribute you can put on link rel="preload" as="image" (along with an imagesizes attribute)?
I didn’t. (Until Amber pointed this out.)
Service Workers | Go Make Things
Chris Ferdinandi blogs every day about the power of vanilla JavaScript. For over a week now, his daily posts have been about service workers. The cumulative result is this excellent collection of resources.