I will attempt to keep adding all of the useful links I find to this post rather than have them scattered across various notes and tabs.

Layout and components

every-layout.dev
component.gallery
csslayout.io – patterns
every-layout.dev – css components
web.dev – building a sidenav component
css-tricks.com – styling comment threads
web.dev – lazy loading images
web.dev – building a multi-select component
height.app – context menus
css-tricks.com – add to calendar button
ishadeed.com – position sticky css grid (admin layout)
ishadeed.com – building real-life components
dev.to – css only components
freecodecamp.org – recreate Medium's article layout with css grid
freecodecamp.org – back-to-top button and page progress-bar
smashingmagazine.com – complex web tables
css-tricks.com – perfect table of contents
adamsilver.io – where to put buttons on forms
uxdesign.cc – designing text fields
matuzo.at – html boilerplate
codeburst.io – how to create horizontal scrolling containers
web.dev – common UX patterns
benmyers.dev – description lists
smashingmagazine.com – complete guide to accessible front-end components

CSS

simplecss.org
smolcss.dev
moderncss.dev
bansal.io – pattern css
patterns.helloyes.dev maintainablecss.com
simonhearne.com – preventing layout shifts with webfonts
daily-dev-tips.com – css attribute selectors
speckyboy.com – creative hyperlinks
egghead.io – dark mode with css variables, calc and hsl
csswizardry.com – writing tidy code
csswizardry.com – your logo is an image not an h1
fvsch.com – base stylesheet
moderncss.dev – custom select styles
moderncss.dev – popular website heroes created with css grid
css-tricks.com – your css reset needs text size adjust
css-tricks.com – block links
css-tricks.com – consistent fluidly scaling type and spacing
joshwcomeau.com – full bleed
ishadeed.com – aligning content with different wrappers
ishadeed.com – tiny enhancements in css
ishadeed.com – defensive css/
ishadeed.com – fit-content
ishadeed.com – conditional border radius
fluid-typography.netlify.app
calibreapp.com – css performance

CSS Resets

joshwcomeau.com – custom css reset

Buttons

getcssscan.com – css button examples
css-tricks.com – a complete guide to links and buttons
web.dev – building a split button component
fvsch.com – styling buttons

Gradients

larsenwork.com – better gradients (easing gradients)
css-houdini.rocks – corners gradient
joshwcomeau.com – beautiful gradients

Shadows

joshwcomeau.com – designing shadows
joshwcomeau.com – shadow palette
getcssscan.com – css box shadow examples

Icons

iconic.app lucide.dev iconoir.com
remixicon.com
heroicons.com
tablericons.com
feathericons.com
icons.radix-ui.com
phosphoricons.com

Fonts

fontpair.co

Javascript

gomakethings.com – automatically expand textarea as the user types

Django

snyk.io – Django security tips
openfolder.sh – Django speed tutorial
rockandnull.com – custom user model
engineertodeveloper.com – dynamic formsets
spookylukey.github.io – Django views the right way
valentinog.com – how to handle multiple Django sites
mattsegal.dev – how to make your project easy to move
untangled.dev – retrieving related data in Django
chris-lamb.co.uk – GeoDjango and the UK postcode database
openfolder.sh – keeping logic out of templates and views
levelup.gitconnected.com – optimising Django queries
pythoncircle.com – adding an email subscription feature
stackoverflow.com – how to automatically login a user after registration
mattlayman.com – secure apps
medium.com – performance problems in the Django ORM
rajasimon.io – Django Channels for real-time updates
levelup.gitconnected.com – What I learned from building a Django appointment scheduler for my school
djangodoctor.medium.com – CharField or TextField

Working with APIs

dev.to – how to populate your database from an external API
medium.com – how to seed a Django API with data from an external API

Django general advice and tips

rajasimon – Django project structure
brntn – six things I do every time I start a Django project
reddit – multi-tenancy discussion

Django project tutorials

engineertodeveloper – how to build a photo gallery
dev.to – how to build an email newsletter subscription service
freedjango.com – generate a QR code

Django uploading files

djangocentral.com – uploading images
soshace.com – upload multiple images
dev.to – upload multiple images simultaneously using dropzone.js

Database design

simeongriggs.dev – designing a more complete recipe website

HTMX

htmx.org – file upload/
github.com/spookylukey/django-htmx-patterns
blog.benoitblanchon.fr – modal form
justdjango.com – dynamic forms
andytwoods.com – modal popup
rockandnull.com – freedom for html input elements using htmx
saaspegasus.com – htmx and alpine.js
betterprogramming.pub – full page reloads with django and htmx

Email

mattlayman.com – testing email designs

Examples and inspiration

dannpetty.com/

Misc

ubiq.co – preventing image hotlinking with nginx
marcysutton.com – links vs buttons in modern web applications
uigoodies.com
copybook.me
technology.blog.gov.uk – why the gov.uk design system team changed the input type for numbers
dev.to – productive tools for web development
blog.datawrapper.de – which colour scale to use in data vis
devhints.io
pexels.com – nice photos
logoipsum.com – placeholder logos
colorpalettes.colorion.co – colour palettes
ahrefs.com – meta tags

Updated on 10 Nov 2022

When researching how to implement dark mode on my site I found this excellent explanation of a css variable method.

The principle is simple – you set colour variables, then provide an alternate 'dark mode' set of colours with a data-theme on the html root element:

:root {
  --bg-colour: white;
}

[data-theme="dark"] {
  --bg-colour: black;
}

Then you set the data-theme with javascript (with a toggle, a button, or whatever you like):

...
document.documentElement.setAttribute('data-theme', 'dark');

Read Ananya Neogi's article for a very clear explanation of the method: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

I added a few extra touches too, like dimming images a little using the css brightness filter.

If you want to go beyond just switching colours you can add custom css on dark-mode elements using [data-theme='your-data-theme-name']:

[data-theme='dark'] ::selection {
  color: var(--bg-color);
  background: #fff2a8;
}

You can definitely go down a rabbit hole when it comes to light / dark mode stuff but this approach seemed pretty simple and scalable.