Sites listed here are not necessarily an endorsement; this is an aggregation of various resources I have come across the web or have been suggested. If there is an issue with a listed resource, let me know.
Accessibility
An introduction to web accessibility requirements. Not a complete list, but good to start with.
An easy to read cheatsheet on web accessibility.
A site that will evaluate the contrast ratio of your chosen text and background colour and tells you if it passes AA or AAA guidelines. If it fails, the site will tell you the closest accessible colour combination.
You can check browser compatability for various features here.
Collections & Lessons
The MDN documentation for HTML, CSS, and Javascript.
Good site to use as a reference or to learn various coding bits.
Screnshots of sites from the 90s to 00s. Great for inspiration.
Although no longer actively maintained, this is a good library for mobile design inspiration.
Massive collection of design resources and tools. Some links are broken or defunct, though.
An article with links to dozens of tools for SVG generation and manipulation.
Now dead, but contains many useful articles and insights on CSS and web design.
Microsoft's free beginner web development curriculum, which features 24 lessons.
Various free courses on topics such as CSS, accessibility, privacy, and more.
A free 30-day curriculum for getting a handle on JavaScript.
A simple browser game that will teach you the basics of flexbox.
Multiplayer game in which you complete CSS challenges to generate a score. A fun way to practice.
Youtube
A channel all about frontend development, with great video tutorials on how to achieve certain effects.
Has some nice little video tutorials, as well as an introduction to web development series.
A bit more general coding related, along with coding news and humour sprinkled here and there.
Formatting & Processing
A preprocessor that extends CSS with variables, mixins, and more. I use this for almost all my CSS work.
An "opinionated code formatter" that supports a variety of different languages.
A tool that'll automatically add vendor prefixes into your CSS for wide browser support.
Page that will minify your CSS for you. Also has API access.
Frameworks
Popular framework primarily for mobile responsive design. I also used parts of Bootstrap (v5.3) to create this site.
Utility-first; doesn't have pre-defined components like Bootstrap does and instead you build everything with classes.
A very tiny, lightweight framework.
A CSS framework in NES style.
A CSS framework in the style of Windows 98.
A CSS framework in the style of Windows XP.
A CSS framework in the style of Windows 7.
Stylesheets for creating sci-fi inspired UI. They have a mixin mixer that allows you to preview shapes and borders.
Javascript
Popular JavaScript library, also used by Bootstrap.
Addendum to the above, a library of neat interactions and effects, such as making divs draggable.
A JavaScript animation library that works with CSS properties, SVGs, DOM attributes, and JS objects.
Small library for creating 3 dimensional text, SVGs, and images.
Web component for creating drawings and patterns with CSS.
For grid layouts; especially useful for making galleries.
A library for making mobile-friendly interactive maps.
An open source framework for making HTML5 browser games.
A visual novel engine using PhaserJS that renders an HTML5 visual novel in-browser out of yaml files.
Designwork
Thousands of free to use photos; I use this site for most of my site backgrounds.
Like the above; more free to use stock photos for backgrounds and the like.
Has free and public domain images that can be used in projects. Note that rawpixel retains copyright on free images.
An app that allows you to generate all sorts of shapes and blobs and save them as either SVG or PNG.
Tiling patterns that can be used as backgrounds.
Addendum to the above, dozens of tiling patterns turned transparent.
A collection of tiling SVG backgrounds. I use a few backgrounds from here on this site.
A bunch of CSS pattern backgrounds under MIT license.
Huge icon library with thousands of icons. There are free and paid icon kits. I use it on this site.
Another expansive icon library under MIT license.
A few thousand textures that can be used either on 3D models or on sites.
Massive collection of old web style gifs.
Colours
A site that lets you generate palettes and preview them in action.
Another site where you can preview your chosen colours live on a page.
Enter a single colour and the site will generate a variety of palettes for you.
Colour palette generator where you can individually adjust hue, saturation, and lightness shifts.
Easy colour palette generator, as well as having thousands of premade palettes in their gallery.
Fonts
Good old Google Fonts. A collection of free fonts that can be used commercially.
Adobe's free font library. These can also be used commercially. Some may require a Creative Cloud subscription.
More free fonts. Their webfont generator is especially useful for converting fonts to woff/woff2.
Generate font pairings based on contrast/similarity. Uses Google Fonts.
Collection of font pairings from across the web.
A site that'll take whatever font you drop in it and give you an analysis.
Some reading on typography, choosing fonts, using them, etc.
Elements & Effects
Open-source elements under MIT license. Includes buttons, cards, and more.
Buttons, box shadows, forms, and palettes from around the web.
A bunch of animated button effects. MIT license.
93 box shadow examples from around the web. I like to peruse and edit these often.
65 checkbox examples from around the web.
92 button examples from around the web.
A lot of useful code snippets for Javascript, CSS, and more.
A big inspiration library for all sorts of elements. Code is copyrighted to their owners, as this site just links to other sites that have interesting elements.
Tools & Generators
CSS animations library with a wide array of effects that can be edited on-site.
Classic clip path generator with a handful of presets you can load and edit.
Another clip path generator.
Border-radius generator for fun shapes and curves, using percentages.
Easy tool for making gradients that also has a maximum browser compatibility setting for its output.
A generator for box shadows that previews the shadows at three different elevations.
Pixel-by-pixel tiling background generator; note that the canvas is rather small.
Generator for neumorphic design.
A tool to create annotated interactive images.
Generates favicon files out of a chosen image along with other icons such as iOS/Android.
A huge collection of generators, recourses, and tools alongside a reference to CSS functions/properties/etc.
A collection of tools mostly for generating custom borders and shapes through masks and clip paths.
An app that has a variety of tools from triangles to gradients to even fake data generation.
Another collection of various tools from lorem ipsum to CSS to minifiers. Link goes to their CSS background pattern generator, which I particularly like.
Has a background pattern and gradient generator, but more interestingly, a converter for images that uses dithering to reduce their file size.
Pure CSS background patterns. Allows you to adjust colour, opacity, and spacing of the patterns.
Neocities-Related
Neocities' own tutorials on HTML, CSS, Javascript, and more.
A simple blogging engine for Neocities where posts are written in HTML.
Create your own interactable gif pet that you can embed on your site.
A simple embed live chat for your Neocities site.
Some navigation snippets and layout templates intended for Neocities.
A comment widget that uses google sheets as a database; easy to use and edit.
Stack Overflow
Has an answer on converting PNGs to SVGs with free online tools and then using the fill property to colour them.
Ways to modify plain CSS colour variables like the darken() and lighten() function in SCSS. The solution suggests using color-mix(), but I've mostly used the old answer where the variables are in HSL.
Has a variety of different solutions to making a cut corner in CSS, ranging from clip-paths to masks to pseudo-elements.
