Learn Resources
React Handbook
Modern approaches to architecture and feature development for production-ready React apps.
Adding Elegant Shadows with React to Invite Users to Scroll
An article from Qovery which shares how to improve scrolling UX.
SSSVG
An Interactive SVG Reference
Setting up a screen reader testing environment on your computer
A tutorial by Sara Soueidan
An Interactive Guide to Flexbox in CSS
Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed.
When life gives you lemons, write better error messages | by Jenni Nadler | Sep, 2022 | Wix UX
When it comes to error handling, it truly is a team sport
Type-Level TypeScript
Learn how to unleash the full potential of the Turing Complete type system of TypeScript!
Patterns.dev
Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.
The Modern Guide to Packaging your JavaScript library
This guide is written to provide at-a-glance suggestions that most libraries should follow
Software Engineering - The Soft Parts
Addy Osmani shares lessons learned in his first 10 years as a Senior Staff Engineering Manager on Google Chrome.
Growth.Design
Product tips in a comic book format you’ll love.
Modern Web
Guides, tools and libraries for modern web development.
Functional JavaScript: Traversing Trees with a Recursive Reduce
Trees come up a lot in web development. As in, more than you would expect. They pop up all over the place. But trees can be tricky. If you're like me, you know that there ought to be a way to process them neatly.
Patterns
A collection of code snippets to help you optimize your web projects.
Total TypeScript
Become the TypeScript Wizard at Your Company
Learning TypeScript
Enhance Your Web Development Skills Using Type-Safe JavaScript
What is DevRel?
If you've been hearing about DevRel and are confused what it means and how to get a job doing it, this website is for you.
Execute Program
Learn programming tools like JavaScript, TypeScript, SQL, and regular expressions fast. Interactive lessons with real code examples.
Diátaxis
A systematic framework for technical documentation authoring.
Errors Are Not Exceptions
Many language ecosystems use try/catch paradigms to represent both errors and exceptions. This is wrong.
Build strongly typed polymorphic components with React and TypeScript
Build strongly typed polymorphic components with React and TypeScript
Atomic 2.0
Revisiting the Atomic Design Method for Design Systems
shell.how
Explain shell commands using Fig
Grid by Example
Everything you need to learn CSS Grid Layout
React TypeScript Cheatsheets
Cheatsheets for experienced React developers getting started with TypeScript
Why SOLID principles are still the foundation for modern software architecture
While computing has changed a lot in the 20 years since the SOLID principles were conceived, they are still the best practices for designing software.
Types in JavaScript
Tips and tricks for working with types in JavaScript
Regex Learn
Learn RegEx step by step, from zero to advanced.
shell.how
Write down a command-line to see how it works
SHell Ninja
Learn the basics of the CLI through an interactive tutorial
SQLBolt
Welcome to SQLBolt, a series of interactive lessons and exercises designed to help you quickly learn SQL right in your browser.
Why Storing Files in the Database Is Considered Bad Practice
An article by Maxim Orlov
JavaScript Array Explorer
Find the array method you need without digging through the docs
DOM Events
Learn about the DOM Event system through exploration
Frontend Practice
Take your frontend skills to the next level by recreating real websites.
The True Meaning of Technical Debt 💸
"Know your enemy, know yourself, and in a hundred battles you will never be defeated"
Scripting with GitHub CLI
Take GitHub to the command line
CSS for JavaScript Developers
The all-new interactive learning experience designed to help JavaScript developers become confident with CSS
React Without Build Tools
Jim Nielsen explains how to set up a React environment with a simple HTML file
Build a Developer Blog with Gatsby
This course takes you from initializing a Gatsby site via CLI to utilizing the Gatsby Ecosystem to source MDX files from your system
useEffect.dev
A course to master React Hooks
Automatically Start Scripts On Launch In VSCode - DEV Community 👩💻👨💻
Automatically Start Scripts On Launch In VSCode
An Interactive Guide to CSS Transitions
CSS transitions and hover animations, an interactive guide
Mailbrew
Your favorite feeds, writers, and newsletters in a single email digest, and a beautiful web app.
Get characters of a string
Super tiny, quick tips, tricks and best practices of front-end development
Getting Deep into Shadows
Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects.
NOT THE PIPELINE
Can't hire underrepresented engineers? It's not the pipeline. Take the quiz, fix your interview.
Cross-platform Node.js Guide
📗 How to write cross-platform Node.js code
Storybook Tutorials
Learn to develop UIs with components and design systems
The Devil's Albatross
Nils Binder talks about a technique for spacing between two elements. Picture a header on a large screen with a logo in the upper left and nav in the upper right. Then a small screen, when they can no longer be on the same “row” and need to wrap, they don’t just wrap but are centered.
My Three Strikes Rule for Blogging
A simple way to decide when and what to write.
Shifting to a remote mindset
On moving away from the in-office default and considering how to achieve what you value.
Authentication
Some ways of combining security and usability for two-factor authentication on the web
Dynamic Static Typing In TypeScript
In this article, we look at some of the more advanced features of TypeScript, like union types, conditional types, template literal types, and generics.
7 behaviours to avoid in a software architecture role
An article by Daniel Watts providing suggestions on how to become a better software architect
The documentation system
The documentation system outlined here is a simple, comprehensive and nearly universally-applicable scheme. It is proven in practice across a wide variety of fields and applications.
The 3 CSS Methods for Adding Element Borders
This is episode #23 in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer.
Guide: How To Inspect Memory Usage in Node.js
Learn how to use a Node.js builtin method for investigating the memory usage of any given process
TypeScript: Low maintenance types
An article from Stefan Baumgartner about creating types which are easy to maintain
Developer Experience at Netlify
The Developer Experience organization at Netlify is quite unique. In this post, we talk through the structure of the organization, how we work, who we are, and some of our team strategies.
Tech Interview Handbook
Carefully curated content to help you ace your next technical interview
The Modern JavaScript Tutorial
How it's done now. From the basics to advanced topics with simple, but detailed explanations.
How to Section Your HTML
CSS-Tricks article on sectioning elements
Jamstack Explorers
Take free Jamstack courses and complete missions about React, Vue, Angular, Next.js and more! See your progress and earn rewards as you go. Get started today!
The System Design Primer
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
What should I build? 🔨
Select the technology you want to practice and a random project idea will show up
Developer Roadmaps
Step by step guides and paths to learn different tools or technologies
11ty Rocks!
A collection of Eleventy (11ty) starters, projects, plugins, and resources created by Stephanie Eckles (@5t3ph)
theheadless.dev
Learn Puppeteer & Playwright
basecs
Exploring the basics of computer science, every Monday, for a year.
Blogging For Devs
Learn to grow your blog as a developer without an existing audience
What The Flexbox?!
A simple 20 video course that will help you master CSS Flexbox
CSS Grid
Learn all about CSS Grid with Wes Bos in this free video series!
JavaScript 30
Build 30 things with vanilla JS in 30 days with 30 tutorials
Learn Next.js
A free video course for building static and server-side rendered applications with Next.js and React.
A11y Coffee
Pick your serving size of web accessibility information