Search Resources
Links by Tag
  • 3D
  • Accessibility
  • Animation
  • Audio
  • Backgrounds
  • Blogs
  • Books
  • Branding
  • Business
  • Career
  • CMS
  • Code
    • CSS Generators
    • Frameworks
    • HTML/CSS
    • JavaScript
    • Open Source
    • PHP
  • Challenges
  • Colour
  • Community
  • Copywriting
  • Developer Tools
  • Domains & Hosting
  • eCommerce
  • Email
  • Featured
  • Fun
  • Icons
  • Illustrations
  • Inspiration
    • Design Systems
  • Learning
  • Marketing
  • Mockups
  • Photography
  • Placeholders
  • Podcasts
  • Productivity
  • Security
  • Self Hosted
  • SEO
  • Services
    • Analytics
    • Social
  • Software
  • Templates
  • Test & Optimise
    • Accessibility Testing
    • Browser Testing
    • Code Quality
    • Speed Testing
  • Typography
  • UI Kits
  • UX Design
  • Video
  • WordPress
Toolkit
  • About
  • Suggest
Screenshot of Piccalilli website
Visit Link
http://piccalil.li/

Piccalilli

Filed under Accessibility, Blogs, Challenges, Code, Frameworks, HTML/CSS, Inspiration, JavaScript, Learning

A pickle jar full of curated CSS links to slick websites, animations, illustrations, and algorithms, brought to you by Andy Bell.

From Free

Report a problem with this link

Welcome to Toolkit! 🧰

Toolkit is a curated collection of tools & resources for people who make websites. Follow on Twitter for a fresh link daily or browse the site to discover the growing collection.


More from Learning

View all Learning  
Screenshot of Web Browser Engineering website
Visit Link
https://browser.engineering/

Web Browser Engineering

Filed under Books, Learning

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 lines of Python.

Free
Screenshot of Oh My Git! website
Visit Link
https://ohmygit.org/

Oh My Git!

Filed under Fun, Learning

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 interactive, and aims at building intuition for operations like "merging" or "rebasing" branches. Players are guided through the features of Git step by step – each level tells a little story where the player can use their new-found powers to solve problems or help others.

Free
Screenshot of CUBE CSS website
Visit Link
https://cube.fyi/

CUBE CSS

Filed under HTML/CSS, Learning

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 in—often the browser—rather than against it.

Free
Screenshot of Cheat website
Visit Link
https://github.com/cheat/cheat

Cheat

Filed under Developer Tools, Learning

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 commands that they use frequently, but not frequently enough to remember.

Free
Screenshot of Regex Crossword website
Visit Link
https://regexcrossword.com/

Regex Crossword

Filed under Fun, Learning

A fun spin practicing regex. Build your skills by playing Regex Crossword.

Free
Screenshot of Flexbox Defense website
Visit Link
http://www.flexboxdefense.com/

Flexbox Defense

Filed under Fun, Learning

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!

Free
Screenshot of Learn Eleventy From Scratch website
Visit Link
https://learneleventyfromscratch.com/

Learn Eleventy From Scratch

Filed under Learning

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 dive really deep into Eleventy and front-end development best practices.

Free
Screenshot of Learn CSS Grid website
Visit Link
https://cssgrid.io/

Learn CSS Grid

Filed under Learning

Learn CSS Grid with Wes Bos in 25 "pretty good" videos. From fundamentals to real world in about 4 hours.

Free
Screenshot of Explain Shell website
Visit Link
https://explainshell.com/

Explain Shell

Filed under Developer Tools, Learning

Write down a command-line command to see the help text that matches each argument.

Free
Screenshot of Cloudflare TV website
Visit Link
https://cloudflare.tv/live

Cloudflare TV

Filed under Learning

A 24x7 live stream video channel focused on general and technical topics related to building a better Internet.

Free
Screenshot of Lightning-Fast Web Performance website
Visit Link
https://scottjehl.com/lfwp/

Lightning-Fast Web Performance

Filed under Learning, Speed Testing

A free online lecture course by Scott Jehl. Learn to analyze site performance, fix issues, monitor for regressions, and deliver fast, responsive designs from the start.

Free
Screenshot of CSS Hell website
Visit Link
https://csshell.dev/

CSS Hell

Filed under HTML/CSS, Learning

Collection of common CSS mistakes, and how to fix them.

Free

Toolkit by Addy Codes is a curated collection of tools and resources for people who make websites.

Join the Newsletter

The very best new website building resources sent to your inbox once at most once a fortnight.

Your subscription could not be saved. Please try again.
Please check your email to confirm your subscription. It's worth it!
© Adam Greenough 2022. All rights reserved. Made with ☕️ in the UK. Proudly hosted with 100% renewable energy 🍃 via Krystal Hosting (affiliate).
Freelance Web Developer About Privacy Submit