Learning
![Screenshot of Divjoy React Generator website](https://toolkit.addy.codes/wp-content/uploads/screenshots/divjoy-react-generator.png)
Divjoy React Generator
React codebase generator. Build SaaS projects 10x faster with Divjoy handling all the integration details. From routing to React hooks, you'll have everything...
![Screenshot of Educational Sensational Inspirational Foundational website](https://toolkit.addy.codes/wp-content/uploads/screenshots/educational-sensational-inspirational-foundational.png)
Educational Sensational Inspirational Foundational
A historical record of foundational web development blog posts.
![Screenshot of Knights of the Flexbox Table website](https://toolkit.addy.codes/wp-content/uploads/screenshots/knights-of-the-flexbox-table.png)
Knights of the Flexbox Table
Welcome to the Knights of the Flexbox table. A game where you can help Sir Frederic Flexbox and his friends to uncover the treasures hidden in the Tailwind CSS...
![Screenshot of Flavio Copes Handbooks website](https://toolkit.addy.codes/wp-content/uploads/screenshots/flavio-copes-handbooks.png)
Flavio Copes Handbooks
Free handbooks for for learning to code with HTML, CSS, JavaScript, SQL, Go, Svelte, PHP, React, Command Line, Next.js, Express, Node.js, Swift, Python and C!
![Screenshot of Free Books for Designers website](https://toolkit.addy.codes/wp-content/uploads/screenshots/free-books-for-designers.png)
Free Books for Designers
Free eBooks to help you develop creative and design skills.
![Screenshot of C3 CSS website](https://toolkit.addy.codes/wp-content/uploads/screenshots/c3-css.png)
C3 CSS
A methodology to help you write human-friendly CSS. C3 (Component, Child, Context) is a methodology for writing CSS, centred around a selector naming...
![Screenshot of Complete Guide to Media Queries website](https://toolkit.addy.codes/wp-content/uploads/screenshots/complete-guide-to-media-queries.png)
Complete Guide to Media Queries
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device...
![Screenshot of HTML Dog website](https://toolkit.addy.codes/wp-content/uploads/screenshots/html-dog.png)
HTML Dog
HTML tutorials "and stuff". Everything HTML, CSS, and JavaScript, the most common languages used in making web pages.
![Screenshot of Build your own React website](https://toolkit.addy.codes/wp-content/uploads/screenshots/build-your-own-react.png)
Build your own React
Rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features.
![Screenshot of The Typing of the RegEX website](https://toolkit.addy.codes/wp-content/uploads/screenshots/the-typing-of-the-regex.png)
The Typing of the RegEX
Do you dare to discover the horrors that await! Test your RegEX skills with this challenging game.
![Screenshot of Web Browser Engineering website](https://toolkit.addy.codes/wp-content/uploads/screenshots/web-browser-engineering.png)
Web Browser Engineering
Web browsers are ubiquitous, but how do they work? This book explains, building a basic but complete web browser, from networking to JavaScript, in a thousand...
![Screenshot of CodinGame website](https://toolkit.addy.codes/wp-content/uploads/screenshots/codingame.png)
CodinGame
Improve your programming skills while having fun and building up profiles for recruitment.
![Screenshot of Oh My Git! website](https://toolkit.addy.codes/wp-content/uploads/screenshots/oh-my-git.png)
Oh My Git!
An open source game about learning Git! Oh My Git! is an open source game that introduces players to the popular version control system "Git". It is highly...
![Screenshot of The Cursed Computer Iceberg website](https://toolkit.addy.codes/wp-content/uploads/screenshots/the-cursed-computer-iceberg.png)
The Cursed Computer Iceberg
This is not a hall of shame. The intent is to awaken you to many of the peculiarities and weirdness of computers. Hopefully, after reading these articles, you...
![Screenshot of Guess CSS! website](https://toolkit.addy.codes/wp-content/uploads/screenshots/guess-css.png)
Guess CSS!
Do you think you know CSS? Here’s a game to test your knowledge!
![Screenshot of HTTP Status Codes website](https://toolkit.addy.codes/wp-content/uploads/screenshots/http-status-codes.png)
HTTP Status Codes
httpstatuses.com is an easy to reference database of HTTP Status Codes with their definitions and helpful code references all in one place.
![Screenshot of Can I Include? website](https://toolkit.addy.codes/wp-content/uploads/screenshots/can-i-include.png)
Can I Include?
Check if a chosen HTML tag can be nested inside another HTML tag according to the spec.
![Screenshot of CUBE CSS website](https://toolkit.addy.codes/wp-content/uploads/screenshots/cube-css.png)
CUBE CSS
CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium that you’re working...
![Screenshot of Cheat website](https://toolkit.addy.codes/wp-content/uploads/screenshots/cheat.png)
Cheat
cheat allows you to create and view interactive cheatsheets on the command-line. It was designed to help remind *nix system administrators of options for...
![Screenshot of Regex Crossword website](https://toolkit.addy.codes/wp-content/uploads/screenshots/regex-crossword.png)
Regex Crossword
A fun spin practicing regex. Build your skills by playing Regex Crossword.
![Screenshot of Flexbox Defense website](https://toolkit.addy.codes/wp-content/uploads/screenshots/flexbox-defense.png)
Flexbox Defense
Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!
![Screenshot of Learn Eleventy From Scratch website](https://toolkit.addy.codes/wp-content/uploads/screenshots/learn-eleventy-from-scratch.png)
Learn Eleventy From Scratch
In this Eleventy (opens new window)course, we go from a completely empty directory to a full-blown marketing site for a design agency, and along the way, we...
![Screenshot of Learn CSS Grid website](https://toolkit.addy.codes/wp-content/uploads/screenshots/learn-css-grid.png)
Learn CSS Grid
Learn CSS Grid with Wes Bos in 25 "pretty good" videos. From fundamentals to real world in about 4 hours.
![Screenshot of Explain Shell website](https://toolkit.addy.codes/wp-content/uploads/screenshots/explain-shell.png)
Explain Shell
Write down a command-line command to see the help text that matches each argument.
![Screenshot of Cloudflare TV website](https://toolkit.addy.codes/wp-content/uploads/screenshots/cloudflare-tv.png)
Cloudflare TV
A 24x7 live stream video channel focused on general and technical topics related to building a better Internet.
![Screenshot of Lightning-Fast Web Performance website](/wp-content/themes/toolkit/images/noimage.png)
Lightning-Fast Web Performance
A free online lecture course by Scott Jehl. Learn to analyze site performance, fix issues, monitor for regressions, and deliver fast, responsive designs from...
![Screenshot of CSS Hell website](https://toolkit.addy.codes/wp-content/uploads/screenshots/css-hell.png)
CSS Hell
Collection of common CSS mistakes, and how to fix them.
![Screenshot of Shift Nudge UI Checklist website](https://toolkit.addy.codes/wp-content/uploads/screenshots/shift-nudge-ui-checklist.png)
Shift Nudge UI Checklist
101 UI Checklist items available as a free Notion template.
![Screenshot of Learn Git Branching website](https://toolkit.addy.codes/wp-content/uploads/screenshots/learn-git-branching.png)
Learn Git Branching
"Learn Git Branching" is the most visual and interactive way to learn Git on the web; you'll be challenged with exciting levels, given step-by-step...
![Screenshot of Design Vault website](https://toolkit.addy.codes/wp-content/uploads/screenshots/design-vault.png)
Design Vault
Design Vault is a curated library of screenshots & interaction patterns from the world's best digital products. Gain insights, explore trends and understand...
![Screenshot of Can’t Unsee website](https://toolkit.addy.codes/wp-content/uploads/screenshots/cant-unsee.png)
Can’t Unsee
Can't Unsee is a test of your attention to detail in UI design. Choose the "correct" version with an eye for pixel perfection. How high can you score?
![Screenshot of RegExr website](https://toolkit.addy.codes/wp-content/uploads/screenshots/regexr.png)
RegExr
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
![Screenshot of Ethical Design Handbook website](https://toolkit.addy.codes/wp-content/uploads/screenshots/ethical-design-handbook.png)
Ethical Design Handbook
A practical handbook on ethical design for digital products. With practical techniques to make honest interfaces work for digital products.
![Screenshot of Talk Python Podcast website](https://toolkit.addy.codes/wp-content/uploads/screenshots/talk-python-podcast.png)
Talk Python Podcast
A podcast on Python and related technologies. Learn python from start to finish.
![Screenshot of Rico’s Cheatsheets website](https://toolkit.addy.codes/wp-content/uploads/screenshots/ricos-cheatsheets.png)
Rico’s Cheatsheets
Handy cheat sheets for a huge array of web technologies.
![Screenshot of Interneting is Hard website](https://toolkit.addy.codes/wp-content/uploads/screenshots/interneting-is-hard.png)
Interneting is Hard
Friendly web development tutorials for complete beginners.
![Screenshot of HTML Elements Reference website](https://toolkit.addy.codes/wp-content/uploads/screenshots/html-elements-reference.png)
HTML Elements Reference
Handy guide to every HTML element there is. Replace your divs with more semantic markup.
![Screenshot of Operator Lookup website](https://toolkit.addy.codes/wp-content/uploads/screenshots/operator-lookup.png)
Operator Lookup
Enter a JavaScript operator to learn more about it.
![Screenshot of 1 LOC website](https://toolkit.addy.codes/wp-content/uploads/screenshots/1-loc.png)
1 LOC
JavaScript Utilities in single line of code, no more!
![Screenshot of Design Systems Checklist website](https://toolkit.addy.codes/wp-content/uploads/screenshots/design-systems-checklist.png)
Design Systems Checklist
An open-source checklist to help you plan, build and grow your design system.
![Screenshot of Flexbox Cheatsheet website](https://toolkit.addy.codes/wp-content/uploads/screenshots/flexbox-cheatsheet.png)
Flexbox Cheatsheet
A simple visual cheat sheet for Flexbox.
![Screenshot of Webbed Briefs website](https://toolkit.addy.codes/wp-content/uploads/screenshots/webbed-briefs.png)
Webbed Briefs
Brief videos about the web, its technologies, and how to make the most of them.
![Screenshot of 30 Seconds of Interviews website](https://toolkit.addy.codes/wp-content/uploads/screenshots/30-seconds-of-interviews.png)
30 Seconds of Interviews
A curated collection of common interview questions to help you prepare for your next interview.
![Screenshot of Flexbox Zombies website](https://toolkit.addy.codes/wp-content/uploads/screenshots/flexbox-zombies.png)
Flexbox Zombies
Dead tired of looking up Flexbox? Flexbox is incredibly powerful. But it's also crazy hard to learn well. So we all end up depending on a cheat sheet and some...
![Screenshot of CSS Diner website](https://toolkit.addy.codes/wp-content/uploads/screenshots/css-diner.png)
CSS Diner
A valuable (and fun!) interactive challenge to help learn CSS selectors.
![Screenshot of freeCodeCamp website](https://toolkit.addy.codes/wp-content/uploads/screenshots/freecodecamp.png)
freeCodeCamp
Learn to code — for free. Build projects. Earn certifications.
![Screenshot of Sass Cheatsheet website](https://toolkit.addy.codes/wp-content/uploads/screenshots/sass-cheatsheet.png)
Sass Cheatsheet
Handy cheat sheet for writing CSS with Sass.
![Screenshot of Modern CSS Solutions website](https://toolkit.addy.codes/wp-content/uploads/screenshots/modern-css-solutions.png)
Modern CSS Solutions
Modern CSS solutions for old CSS problems by Stephanie Eckles.
![Screenshot of Front-line PHP website](https://toolkit.addy.codes/wp-content/uploads/screenshots/front-line-php.png)
Front-line PHP
Building modern applications with PHP 8 eBook by Spatie.
![Screenshot of Every Layout website](https://toolkit.addy.codes/wp-content/uploads/screenshots/every-layout-2.png)
Every Layout
Relearn CSS layout. Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
![Screenshot of CSS Layout website](https://toolkit.addy.codes/wp-content/uploads/screenshots/css-layout.png)
CSS Layout
Popular layouts and patterns made with CSS.
![Screenshot of Checklist Design website](https://toolkit.addy.codes/wp-content/uploads/screenshots/checklist-design-2.png)
Checklist Design
A collection of the best design practices compiled in to handy checklists.
![Screenshot of Fiverr Learn website](https://toolkit.addy.codes/wp-content/uploads/screenshots/fiverr-learn.png)
Fiverr Learn
On-demand online courses to learn skills for freelancing.
![Screenshot of Web Skills website](https://toolkit.addy.codes/wp-content/uploads/screenshots/web-skills.png)
Web Skills
Web development learning roadmap with resource links.
![Screenshot of Jamstack Explorers website](https://toolkit.addy.codes/wp-content/uploads/screenshots/jamstack-explorers.png)
Jamstack Explorers
Free Jamstack courses from Netlify.
![Screenshot of Josh W Comeau website](https://toolkit.addy.codes/wp-content/uploads/screenshots/josh-w-comeau.png)
Josh W Comeau
Development blog focusing on React, animation, CSS and JavaScript. Great learning resource with interactive articles.
![Screenshot of DEV Community website](https://toolkit.addy.codes/wp-content/uploads/screenshots/dev-community.png)
DEV Community
Beginner-friendly community blogging platform.
![Screenshot of Land-book website](https://toolkit.addy.codes/wp-content/uploads/screenshots/land-book.png)
Land-book
Landing page inspiration gallery.
![Screenshot of Frontend Practice website](https://toolkit.addy.codes/wp-content/uploads/screenshots/frontend-practice.png)
Frontend Practice
A collection of real websites to recreate for practice with hints and tips.
![Screenshot of The Design of Forms in Government Departments website](https://toolkit.addy.codes/wp-content/uploads/screenshots/the-design-of-forms-in-government-departments.png)
The Design of Forms in Government Departments
A digitally remastered book first published in 1962 on the design of forms in the UK Government.
![Screenshot of Flavio Copes website](https://toolkit.addy.codes/wp-content/uploads/screenshots/flavio-copes.png)
Flavio Copes
Software engineer content creator covering huge array of disciplines with lots of free content.
![Screenshot of Refactoring UI website](https://toolkit.addy.codes/wp-content/uploads/screenshots/refactoring-ui.png)
Refactoring UI
Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
![Screenshot of Website Launch Checklist website](https://toolkit.addy.codes/wp-content/uploads/screenshots/website-launch-checklist.png)
Website Launch Checklist
Launch your next web project with complete confidence!
![Screenshot of SkillWise Online Design Courses website](https://toolkit.addy.codes/wp-content/uploads/screenshots/skillwise-online-design-courses.png)
SkillWise Online Design Courses
Get awesome deals on online design courses from SkillWise.
![Screenshot of SkillWise Online Development Courses website](https://toolkit.addy.codes/wp-content/uploads/screenshots/skillwise-development-online-courses.png)
SkillWise Online Development Courses
Get awesome deals on web & app development courses online.
![Screenshot of Screen Size Map website](https://toolkit.addy.codes/wp-content/uploads/screenshots/screen-size-map.png)
Screen Size Map
An interactive map of screen sizes for responsive and adaptive design.
![Screenshot of Codepip website](https://toolkit.addy.codes/wp-content/uploads/screenshots/codepip.png)
Codepip
Learn to code by playing games.
![Screenshot of Open Source Guide website](https://toolkit.addy.codes/wp-content/uploads/screenshots/open-source-guide.png)
Open Source Guide
Open source software is made by people just like you. Learn how to launch and grow your project.
![Screenshot of Every Layout website](https://toolkit.addy.codes/wp-content/uploads/screenshots/every-layout.png)
Every Layout
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of...
![Screenshot of RandomAPI website](https://toolkit.addy.codes/wp-content/uploads/screenshots/randomapi.png)
RandomAPI
Easily generate fake data for populating your mockups and testing your applications.
![Screenshot of Flexbox Froggy website](https://toolkit.addy.codes/wp-content/uploads/screenshots/flexbox-froggy.png)
Flexbox Froggy
Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!
![Screenshot of Grid Garden website](https://toolkit.addy.codes/wp-content/uploads/screenshots/grid-garden.png)
Grid Garden
Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.
![Screenshot of CSS Grid Generator website](https://toolkit.addy.codes/wp-content/uploads/screenshots/css-grid-generator.png)
CSS Grid Generator
You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.
![Screenshot of CSS-Tricks website](https://toolkit.addy.codes/wp-content/uploads/screenshots/css-tricks.png)
CSS-Tricks
These days CSS-Tricks is really about building websites and all that entails, mostly from a front-end perspective. We have staff writers (see below) and loads...
![Screenshot of MDN Web Docs website](https://toolkit.addy.codes/wp-content/uploads/screenshots/mdn-web-docs.png)
MDN Web Docs
Mozilla Developer Network. Resources for developers, by developers.
![Screenshot of Modern JavaScript website](https://toolkit.addy.codes/wp-content/uploads/screenshots/modern-javascript.png)
Modern JavaScript
How it's done now. From the basics to advanced topics with simple, but detailed explanations.
![Screenshot of CodeFactor website](https://toolkit.addy.codes/wp-content/uploads/screenshots/codefactor.png)
CodeFactor
Automated code review for Git.
![Screenshot of CodePen Challenges website](https://toolkit.addy.codes/wp-content/uploads/2023/02/codepen.io_challenges__utm_sourcetoolkit.addy_.codes_.png)
CodePen Challenges
Challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on....
![Screenshot of Daily UI website](https://toolkit.addy.codes/wp-content/uploads/screenshots/daily-ui.png)
Daily UI
Daily UI is a series of daily design challenges design inspiration and neat surprise rewards.
![Screenshot of Archetype website](https://toolkit.addy.codes/wp-content/uploads/screenshots/archetype.png)
Archetype
Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser. These styles are all...
![Screenshot of Typogui.de website](https://toolkit.addy.codes/wp-content/uploads/screenshots/typogui-de.png)
Typogui.de
A pocket guide to master every day’s typographic adventures.
![Screenshot of The A11Y Project website](https://toolkit.addy.codes/wp-content/uploads/screenshots/the-a11y-project.png)
The A11Y Project
A community-driven effort to make web accessibility easier.
![Screenshot of Low Vision website](https://toolkit.addy.codes/wp-content/uploads/screenshots/low-vision.png)
Low Vision
Test your website with simulated vision impairments.
![Screenshot of Accessibility Guidelines website](https://toolkit.addy.codes/wp-content/uploads/screenshots/accessibility-guidelines.png)
Accessibility Guidelines
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or...
![Screenshot of JavaScript 30 website](https://toolkit.addy.codes/wp-content/uploads/screenshots/javascript-30.png)
JavaScript 30
Build 30 things in 30 days using vanilla JavaScript with this free course from Wes Bos. Designed for beginner to Intermediate developers and designers who want...
![Screenshot of PHP: The Right Way website](https://toolkit.addy.codes/wp-content/uploads/screenshots/php-the-right-way.png)
PHP: The Right Way
PHP: The Right Way is an easy-to-read, quick reference for PHP popular coding standards, links to authoritative tutorials around the web and what the...
![Screenshot of HEAD website](https://toolkit.addy.codes/wp-content/uploads/screenshots/head.png)
HEAD
A free guide to HTML5
elements.![Screenshot of What The Flexbox?! website](https://toolkit.addy.codes/wp-content/uploads/screenshots/what-the-flexbox.png)
What The Flexbox?!
A simple, free 20 video course that will help you master CSS Flexbox! Created by Wes Bos.
![Screenshot of CodeNewbie Podcast website](https://toolkit.addy.codes/wp-content/uploads/screenshots/codenewbie-podcast.png)
CodeNewbie Podcast
Stories from people on their coding journey.
![Screenshot of Glitch website](https://toolkit.addy.codes/wp-content/uploads/screenshots/glitch.png)
Glitch
Glitch is a friendly community for for developers of all skill levels to create, share and experiment and with tools and code using an intuitive cloud IDE.
![Screenshot of Mindful Design website](https://toolkit.addy.codes/wp-content/uploads/screenshots/mindful-design.png)
Mindful Design
Mindful Design presents a responsible deep dive into the areas of cognitive psychology and neuroscience that can most improve design. If you want to start...
![Screenshot of How DNS works website](https://toolkit.addy.codes/wp-content/uploads/screenshots/how-dns-works.png)
How DNS works
How DNS Works by DNSimple is a cute, engaging comic exploring the inner workings of the global domain name system.
But wait, there's more! 🧰✨
Check out the sidebar menu (or tap the in the bottom right on mobiles) to search and browse by tag.