A collection of awesome DevEd.
DevEd is "developer education" and as part of DevRel can encompass documentation sites, community hubs, blogs, tutorials, articles, courses, talks, games, showcases, webinars, workshops, platforms, universities/academies, visual essays, interactive playgrounds, and more. Whatever helps educate developers on a technology or product.
Curated through the DevEd Test Kitchen by "Chef" Kamran to spotlight and showcase the awesome DevEd everyone is cooking up around us.
Donations to the pantry are welcome. "Awesome" is subjective but in general, awesome DevEd is typically "effortful" (not "just" a tutorial/article/how-to), unique in nature, has had evidence-backed impact, or pushes the boundaries of what it means to be "content" such as incorporating gamification, interactivity, or creative production techniques. This is what I refer to as "umami-flavored" content that leaves a really good taste in your mouth. Notably it does not need to depend on the creator being "known" or considered a "celebrity chef". Anyone can cook Awesome DevEd.
- Academies & Universities
- Blogs
- Books
- Conference Talks
- Courses
- Documentation
- Games
- Learning Experience Platforms (LXPs)
- Podcasts
- Reference Sites
- Visual Essays
Part of "Higher DevEd," these are platforms that train and upskill developers (mostly external)
- Algolia Academy - Training, certifications, live events covering Algolia and integrating with different use cases like front-end, search, and UX
- Hashicorp Developer - Includes courses and certifications
- JetBrains Academy - Learn languages, skills, build apps, and more with over 30+ tracks and 2,000+ tech topics through their platform Hyperskill
- JFrog Academy - Training on using JFrog products, focused on upskilling developers using JFrog products
- LaunchDarkly Academy - LaunchDarkly's academy with a solid space theme featuring self-paced learning and virtual labs/workshops
- Learn Chef - Chef's learning site, cited as their top lead generator
- Learn Cypress - Custom learning site built with Next.js by the Cypress team (source)
- Learn MongoDB - Self-paced courses, get certifications, and learn MongoDB. Cited 15% of their revenue is derived from leads with the University/Learn site as their first-touch.
- Redis University - Instructor-led courses, certifications. Cited as creating highly-qualified leads.
- Storybook Tutorials - Self-paced peer-reviewed learning courses built by the Chroma UI team. (source)
- Twilio's Segment Academy - Web-based lessons that you can also get dripped via email. Example of a lead magnet.
- Amelia Wattenberger - Amelia is a data visualization and experience engineer with a blog that features awesome interactive samples and visual essays
- GitHub README Project - The ReadME Project amplifies the voices of the open source community: the maintainers, developers, and teams whose contributions move the world forward every day.
- LogRocket - Attracts millions of developers with over 3,000+ articles on frontend topics.
- Twilio - Over 2,000+ tutorials since 2008 on ways to integrate and use Twilio products.
- Beautiful Racket - Online book on language-oriented programming using Racket by Matthew Butterick
- Practical Typography - Online book on typography by Matthew Butterick
- Select Star SQL - Interactive book that teaches SQL using a Texas Death Row dataset by Zi Chong Kao
- Drawing the Invisible: React Explained in 5 Visual Metaphors - An amazing visual talk by Maggie Appleton that explains React just like it says.
- Stop Drawing Dead Fish - An incredible talk by Bret Victor about the essence of digital art.
- Wat - Widely shared talk on the quirks of JavaScript and Ruby by Gary Bernhardt.
- Epic React - Code-along interactive course and workshops that teach React fundamentals. 19 hours of course material plus 10 hours of conversations with React experts.
- Hack Yourself First - A website made by Troy Hunt that showcases 50+ sloppy security practices as part of his security course.
- Learn Git Branching - Gamified interactive Git course that emphasizes branching.
- Serverless Visually Explained - See and interact with serverless concepts with animated examples, code snippets, and demos.
- Svelte Tutorial - Interactive step-by-step tutorial to learn Svelte
- TypeScript Training - Interactive and self-paced course on learning TypeScript with annotated code snippets and formatting specifically designed for the TS compiler.
- Web Audio School - Interactive WebAudio tutorials.
- CryptoZombies - Learn Solidify and Ethereum blockchain development by creating learning games
- Execute Program - Interactive courses on TypeScript, Modern JavaScript, SQL, regular expressions, and more. Each course is made up of hundreds of interactive code examples running live in your browser.
- NodeGuardians - Learn web3 in a gamified RPG-like experience with campaigns, quests, skill trees, and character management
- Code.org - Every student in every school should have the opportunity to learn computer science.
- Codecademy - Learn to code interactively, for free.
- Educative - Self-paced developer education platform
- FreeCodeCamp - Non-profit site where anyone can contribute educational content, get certifications, and find jobs.
- Pluralsight - The professional tech upskilling platform
- Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests
- CourseMaker - SaaS product for creating, hosting, and selling technical courses
- CourseMaker/gatsby-theme-coursemaker - Gatsby.js Theme from CourseMaker designed for individual creators that sell courses
- Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests
- Hashicorp Docs - All-in-one dev hub w/ built-in bookmarks, progress, self-paced tutorials with videos, certifications, and more.
- React Docs (beta) - Includes interactive labs and challenges
- Medusa - Redesigned and treated as a product (see
- Nivo - D3 viz library with interactive visualizations as the docs
- Stripe Docs - Interactive and example-rich developer documentation for the popular payment platform
- Twilio Docs - Interactive and example-rich developer documentation for the popular communication platform. (Also see: Games > JavaScript > TwilioQuest)
- Code Hike - Easily build code tutorials with MDX and React.
- Docusaurus - Docusaurus is a static-site generator. It builds a single-page application with fast client-side navigation, leveraging the full power of React to make your site interactive.
- Smooth DOC - A ready-to-use Gatsby theme to build docs for all your projects. Smooth DOC makes documentation easy.
- Shiki - Embed code samples with VSCode-powered syntax highlighting.
- Shiki Twoslash - The power of Shiki, plus TypeScript compiler annotations.
- Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests
Thanks to https://github.com/yrgo/awesome-educational-games for tracking games specifically
- CSS Diner - It's a little game to help you learn CSS selectors.
- CSS Grid Garden - A game for learning CSS grid layout.
- Flexbox Defense - Unlike other tower defense games, you must position your towers using CSS!
- Flexbox Froggy - A game for learning CSS flexbox.
- Flexbox with Webflow - Learn and master flexbox in 28 interactive levels—without writing code.
- Ably Serverless Websockets Quest - Learn Serverless Websockets through an ADND multiplayer game (source)
- Ably Space Invaders - Multiplayer Space Invaders game built with Phaser and Ably APIs. (source)
- Ably Tower Defense - Demo showing Ably's real-time API in action with a multiplayer Tower Defense game
- Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests
- Open Vim - Interactive Vim tutorial.
- Vim Adventures - Learning Vim while playing a game.
- Vim Genius - Increase your speed and improve your muscle memory with Vim Genius.
- Bashcrawl - Learn Linux commands by playing a simple text adventure .
- SQL Murder Mystery - Solve a crime while practicing database skills.
- Screeps - The world's first MMO strategy sandbox game for programmers.
- Untrusted - Learn while playing a JavaScript adventure game.
- TwilioQuest - Go on a quest to learn web development how to build a web app with JavaScript and Twilio.
- WarriorJS - Using JavaScript, program a warrior to climb a tall tower, fight monsters and rescue captives.
- BOX-256 - Program a fictional CPU with assembly to output graphics.
- Clips the Game - A demanding logic game based on the clips rule engine.
- Code Avengers - Learn to build websites, apps and games in a fun and effective way.
- CodeCombat - An engaging coding game for learning programming.
- CodinGame - A challenge-based training platform where you can play with the hottest programming topics.
- Cube Composer - A puzzle game inspired by functional programming.
- Deadlock Empire - Solve puzzles with concurrency.
- Mimo - Learn how to become a developer on mobile.
- Programming Games Wiki - A long-standing catalogue of programming games through the years.
- RegexOne - Learn Regular Expressions with simple, interactive exercises.
- ReturnTrue - A game were you learn about booleans, return true to win.
- Swift Playgrounds - Learn to code on your iPad in a seriously fun way.
- XSS game - A game about tricking people into running code in their browsers.
- CryptoZombies - Learn Solidity and Ethereum blockchain development by creating learning games
- NodeGuardians - Learn web3 in a gamified RPG-like experience with campaigns, quests, skill trees, and character management
LXPs are "next-gen" Learning Management Systems (LMS) that are designed learner-first (designed for a better learning experience) instead of author-first (ease of authoring).
- Appsembler - B2B SaaS LXP built on top of Open EdX, designed for developer education (powers Chef, Redis, etc.)
- Tutor - Self-managed Docker version of Open EdX
- Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests
- Corecursive: Coding Stories - Like This American Life but for software developers
- CSS Reference - Complete reference of CSS properties with examples.
- HTML Reference - Complete reference of CSS properties with examples.
- Flexbox Cheatsheet - Turns static W3C spec of CSS Flexbox Level 1 into interactive examples.
- Illustrated.dev - Illustrated explanations of web development, technology & a little bit of anthropology.
- Microfrontend.dev - Learn about the microfrontend architecture pattern and practices, and when / when not to consider it.
- MDN - The Mozilla Developer Network. Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
- Microsoft Docs - Formerly MSDN. Documenting the Microsoft (and surrounding) ecosystems since 1992.
- StackOverflow - The top Q&A programming site.
- Advanced animation patterns with Framer Motion - Maxime Heckel
- Build your own React - Rodrigo Pombo
- CSS Cascade - Amanda Wattenbrger. The cascade is a river, and has a kayaker that paddles downriver as you scroll through the article.
- Cubic Bézier: from math to motion - Maxime Heckel. Features interactive animations that showcase different types of curves.
- Dark Mode by Local Sunlight - Chris Nicholas
- How do arrays work? - Nanda
- How to remember things - Nicky Case
- Lights and Shadows - Bartosz Ciechanowski
- Making things move - Varun Vachhar
- Moving along a curved path in CSS with layered animation - Tobias Ahlin
- Noise in Creative Coding - Varun Vachhar
- Rebuilding Babel: The Tokenizer - Nanda Syahrasyad. Features a custom widget to step through the tokenization process, which displays interim results.
- Tasks, microtasks, queues and schedules - Jake Archibald. Features an animated step-by-step diagram that got tons of love for in the comments. Not a "full" dataviz essay but interactive visual is umami.
- Up and Down the Ladder of Abstraction - Bret Victor. Takes an example of designing a control system for a simple car simulation, and references it throughout the essay with visuals and interactive widgets accompanying the narrative.
- Which Blend Mode - Chris Nicholas. Featuring interactive examples to show the varying results of different blend modes.
- Amelia Wattenberger - Amelia is a data visualization and experience engineer with a blog that features awesome interactive samples and visual essays.
- Explorable Explanations - Combining learning and play, the site is a hub of interactive and visual essays around topics, not only limited to data viz and programming.
- Maggie Appleton - Makes visual essays about UX, programming, and anthropology.
- Pudding.cool - Data viz magazine featuring many different visual essays.
- Worrydream - Bret Victor. Unique web-based site design, visual essays, and interactive demos.