$ ls ./resources

Free tools & code, no strings.

Everything below is free, or has a real free tier — the same list I actually use to build sites like this one. No affiliate links, no paywalled “secret” resources. If it's useful to you, that's the whole point.

find ./resources -name

drwxr-xr-x ./learn

$MDN Web Docsthe reference for HTML, CSS, and JS — start every lookup here $web.devGoogle's own guidance on performance, accessibility, and best practice $JavaScript.infothe best from-scratch JS course on the internet, still free $Can I Usebrowser support tables before you ship a new CSS feature $Frontend Masterspaid courses, but the free weekly newsletter alone is worth it

drwxr-xr-x ./frameworks

$Next.jswhat this site is built with — React with routing, SSR, and image optimization built in $Astroships zero JS by default — the right call for a mostly-static marketing site $SvelteKitless boilerplate than React, compiles away instead of shipping a runtime $Vitethe build tool most of the above run on — instant dev server, sane defaults

drwxr-xr-x ./styling

$Tailwind CSSutility classes instead of naming things — this whole site is built on it $shadcn/uicomponents you copy into your project and own, not a dependency $HeroUIa full accessible component library on top of Tailwind $Open PropsCSS custom properties for spacing, color, and easing — no build step needed

drwxr-xr-x ./animation

$anime.jslightweight, physics-based easing — what the charts on this page use $Framer Motiondeclarative animation for React, scroll-linked effects included $GSAPthe industry standard for anything complex — timelines, scroll-triggers, SVG $Motion Onea tiny Web Animations API wrapper for vanilla-JS projects

drwxr-xr-x ./type-and-color

$Google Fontsfree, hosted, optimized — the default answer for web type $Fontsharefree, higher-end display faces Google Fonts doesn't have $Coolorsgenerate and lock a palette in seconds $Realtime Colorspreview a palette on an actual mock page before committing $type-scale.compick a ratio, get a whole heading scale for free

drwxr-xr-x ./icons-and-art

$Lucidethe icon set used across this entire site — consistent stroke weight, MIT licensed $Heroiconsfrom the Tailwind team, solid and outline variants $unDrawfree illustrations, recolorable to match your brand $Phosphor Iconshuge icon family with six weights each

drwxr-xr-x ./images

$SquooshGoogle's in-browser image compressor — drag, drop, compare, download $TinyPNGbatch compression, what this site's own build script uses $Unsplashfree, high-res stock photography, no attribution required $Pexelssame idea as Unsplash, different library — check both

drwxr-xr-x ./hosting

$Vercelwhere this site is deployed — built for Next.js specifically $Netlifythe other default — forms and functions built in, framework-agnostic $Cloudflare Pagesgenerous free tier, fastest edge network of the three

drwxr-xr-x ./backend-and-forms

$SupabasePostgres, auth, and storage — an open-source Firebase alternative $Formspreepoint a plain HTML form at it, get email — no backend required $Resendtransactional email that developers don't hate configuring

drwxr-xr-x ./testing-and-audit

$PageSpeed InsightsLighthouse, run against your live URL instead of localhost $WAVEvisual accessibility audit — flags contrast and missing labels fast $Lighthousebuilt into Chrome DevTools — performance, SEO, and a11y scoring $Responsivelypreview every breakpoint side by side in one window

drwxr-xr-x ./design

$Figmathe industry default for UI design and client mockups $Excalidrawfast, hand-drawn-style wireframes and diagrams $Penpotopen-source Figma alternative, no account limits on the free tier

$ cat ./snippets/*

Three things I copy into every project.

reset.css

/* A sane, minimal reset — box-sizing, margins, and media defaults. */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body { line-height: 1.5; -webkit-font-smoothing: antialiased; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

#root, #__next { isolation: isolate; }

type-scale.css

/* Fluid type scale — one clamp() per step, no media queries. */
:root {
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.19rem + 0.32vw, 1.42rem);
  --step-2:  clamp(1.56rem, 1.47rem + 0.47vw, 1.80rem);
  --step-3:  clamp(1.95rem, 1.82rem + 0.68vw, 2.28rem);
  --step-4:  clamp(2.44rem, 2.25rem + 0.96vw, 2.88rem);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p  { font-size: var(--step-0); }
small { font-size: var(--step--1); }

scroll-reveal.js

// Fade sections in as they scroll into view — one shared observer,
// not one per element. Add class="reveal" to anything you want this on.
const io = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-visible");
        io.unobserve(entry.target);
      }
    }
  },
  { threshold: 0.1, rootMargin: "0px 0px -10% 0px" }
);

document.querySelectorAll(".reveal").forEach((el) => io.observe(el));

/* pair with:
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
*/