A growing list of resources that I like and use: Tools and inspiration for making websites.
85 and counting
- 0to255 - A most useful color picker
- calcolor.co | Calculate colors. Share palettes. - Versatile color tool that creates palettes and blend steps
- colors.lol – Overly descriptive color palettes - Not only overly descriptive but very zany tangy color palettes
- Eva Design System: Deep learning color generator - Create a semantic color palette for succes, info, warning and danger
- Hex Colors – HTML Color Codes - Several useful color tools, including: color inspiration, palette generator, random color
- Palettes | Flat UI Colors 🎨 - 280 handpicked colors ready for COPY
- Toptal Color Blind Filter - What are color blind anomalies?
- UI Gradient Generator: Make Beautiful CSS Gradients [ - A gradient generator that helps you avoid a gray area in de middle
- Animista - CSS animations on demand
- Autoprefixer CSS online - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes
- brumm.af/shadows - Tool to create beautifully smooth box-shadows
- Code My UI: Web Design & UI Inspiration with Code Snippets - Pure CSS Only Code Snippets
- Cooltipz.css - Cool customisable tooltips made from pure CSS
- CSS :has() Interactive Guide - An extensive guide to CSS :has() selector
- CSS Grid Generator - A tool to help you generate the CSS for grids
- CSS Section Separator Generator | wweb.dev -
- CSS3 Patterns Gallery - CSS background patterns to add to your stylesheet, tileable and adjustable.
- CSSFX – Beautifully simple click-to-copy CSS effects - A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use.
- CSSJanus - Tool to help you with the CSS of rtl & ltr styling
- cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com - Tool to help you create smooth transitions and animations
- Fancy Border Radius Generator - Make all kinds of shapes using only border-radius
- Flexy Boxes — CSS flexbox playground and code generation tool - flexbox playground and code generator
- google webfonts helper - A Hassle-Free Way to Self-Host Google Fonts
- Right-to-left Styling - Extensive documentation with good, clear examples
- The Shapes of CSS | CSS-Tricks - A whole list with wonderful shapes made in CSS, from the basics to the complex
- UI Gradient Generator: Make Beautiful CSS Gradients [ - A gradient generator that helps you avoid a gray area in de middle
- UI Interactions | Raphael Fabeni - Open source click and copy user interface interactions.
- You Might Not Need JavaScript - You can build so many functional UI components without the additional dependancy
- CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code. - A complete collection of web safe CSS font stacks.
- Fonts In Use – Type at work in the real world. - An independent archive of typography, good for inspiration.
- System fonts | Butterick’s Practical Typography - A delicious website on fonts. This page is specifically on system fonts.
General
- All – Tiny Helpers - A nice list of resources for making websites (like this one but dedicated just to that)
- Command line interface for WordPress | WP-CLI - Working on WordPress without opening your browser
- Favicon & App Icon Generator - Generates all the different size icons and the CSS
- How to write better alt-text descriptions for accessibility | The Big Hack -
- JSONLint – The JSON Validator - JSONLint is a validator and reformatter for JSON, a lightweight data-interchange format.
- No More Google - Privacy-friendly alternatives to Google that don't track you
- Resilient Web Design—Introduction - A history book on the evolution of the web with suggestions for the future
- Website Carbon Calculator - How is your website impacting the planet?
- Build a Better Mobile Input - A nice tool which helps you configure a few key input attributes, that can make web forms much easier to use on mobile devices.
- CSS Section Separator Generator | wweb.dev -
- HTML Symbols - A very vast, searchable collection of HTML symbols
- HTML Symbols, Entities, Characters and Codes — HTML Arrows - A delightful reference for HTML Symbols, Entities and ASCII Character Codes
- Remove/Replace line breaks online - Extremely convenient tool with which to remove or replace line breaks
- Right-to-left Styling - Extensive documentation with good, clear examples
- Unicode – Compart - A searchable collection of unicode characters
- W3: form input purposes - Giving a form input field a standardized input purpose, can help browsers auto-fill the form
- You Might Not Need JavaScript - You can build so many functional UI components without the additional dependancy
- 5k Tartan Patterns | Tartanify.com - Tileable Tratan background images
- Blobmaker - Create SVG blobs in any color, download and use
- CSS Section Separator Generator | wweb.dev -
- CSS3 Patterns Gallery - CSS background patterns to add to your stylesheet, tileable and adjustable.
- Doka.Photo - Free online image editor I actually like, for when I just need a quick edit and don't want to open software for it
- Favicon & App Icon Generator - Generates all the different size icons and the CSS
- Forge Icons - 300 right mix of SVG icons for use in e-commerce, travel, social media, app design and much more.
- Get Waves – Create SVG waves for your next design - Waves in any color you like, download and use
- Gratisography – Free High-Resolution Photos - FREE USE-AS-YOU-PLEASE PICTURES THAT STAND OUT! Truly unique. Usually whimsy 😉 Always free.
- Hero Patterns | Free repeatable SVG background patterns for your web projects - A collection of repeatable SVG background patterns for you to use on your web projects.
- hero-generator - Helps you create a nice header for your website (not intended for use with WordPress)
- How to write good alt text for screen readers - What is alt text, why does it matter, and how to avoid some common mistakes
- JPEG.rocks: Privacy-aware JPEG optimizer -
- Line Awesome — Free Beautiful Icon Font - Swap Font Awesome for modern line icons in one line of code.
- More than 1000 free icons EOS Icons -
- Noise Texture Generator v2.1 - Create a tileable background image with noise
- Openverse - Openly licensed images, audio and more
- Panelle.js – free comic book layout maker -
- particles.js – A lightweight JavaScript library for creating particles - A tool to help you create animated and interactive particles for your website
- Phosphor Icons - Phosphor is a flexible icon family for interfaces, diagrams, presentations
- SVG Backgrounds – Customize and apply backgrounds fast - SVG backgrounds that are easy to customize
- UI Gradient Generator: Make Beautiful CSS Gradients [ - A gradient generator that helps you avoid a gray area in de middle
- Unconventional Stock Image Sources CSS-Tricks - Compatible with GPL
- Unsplash - Beautiful free images and pictures, often good for inspiration too
- VISIWIG | Visuals for busy designers - click + paste graphics: icons, patterns, textures
- You Might Not Need JavaScript - You can build so many functional UI components without the additional dependancy
- You Might Not Need jQuery - Please take a moment to consider if you actually need jQuery as a dependency.
Places to Learn
- CSS :has() Interactive Guide - An extensive guide to CSS :has() selector
- CSS Diner – Where we feast on CSS Selectors! - Learn the nitty gritty of CSS selectors and practice using them
- DesignCourse - Youtube Channel
- Front-end Developer Handbook 2019 – Learn the entire JavaScript, CSS and HTML development practice! - This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.
- Select Star SQL - This is a free interactive book which aims to be the best place on the internet for learning SQL.
- The SQL Murder Mystery - Practice SQL skills
- veltman/clmystery: A command-line murder mystery - Learn more about the command line
- Privacyverklaring generator - Stap voor stap een Privacyverklaring opstellen
- Test voor moderne Internetstandaarden zoals IPv6, DNSSEC, HTTPS, DMARC, STARTTLS en DANE. - Is your internet up to date?
- Blind Text Generator - Lorem Ipsum Generator with different texts to draw from
- Professional Lorem Ipsum Generator for Typographers - Many options, including different languages
- Right-to-left Styling - Extensive documentation with good, clear examples
- Veggie Ipsum - The Vegetarian Lorem Ipsum Generator
Website Analytics
- Fathom, simple analytics for bloggers - Privacy-respecting website analytics, paid service
- How to create a website visitor counter in html | Tutorial – IONOS - Make your own little website counter
- Matomo: Ethical Analytics, Powerful Insights - Free self-hosted and paid cloud service website analytics
- Open Web Analytics Demo and Examples - Open source, self hosted website analytics
- Simple Analytics – Simple, clean, and privacy-friendly analytics - Privacy-respecting website analytics, paid service
WordPress
- Gutenberg Theme Development – A Guide for WordPress Developers -
- Learn WordPress - Workshops and Lesson Plans
- wpnom - Key WordPress FUNCTIONS, features, filters, tips and tricks