Resources
The right tool at the right moment changes everything.
Here’s everything we keep in our belt.
Helpful Sites & Tools
Ten years of coding adventures taught us which sites are worth bookmarking and which are worth ignoring. Click a category to expand it, then click any card to open the resource in a new tab.
The sites we visit most when we need to look something up or learn something new.
The go-to reference for HTML, CSS, JavaScript, PHP, Python, Java — with live “Try it Yourself” editors.
Mozilla’s authoritative documentation for web standards — deeper than W3Schools, great for the full picture.
The modern JavaScript tutorial — covers everything from basics to advanced topics with clear explanations.
Practical CSS articles, guides, and almanac. The Flexbox and Grid guides alone are worth the bookmark.
Full API reference for p5.js — every function, every parameter, with examples. Bookmark this one.
Official Bootstrap 5.3 documentation. Components, utilities, and the grid system explained with copy-paste examples.
Always validate your work. Sloppy HTML and CSS cause mysterious bugs — these tools catch them instantly.
Paste a URL or upload a file to check your HTML against the official W3C standard. Required before shipping.
The official CSS validator. Catches typos, invalid property values, and bad selectors in your stylesheets.
Check browser support for any HTML, CSS, or JavaScript feature. Essential before using anything newer or experimental.
You never get a second chance to make a first impression. These sites help you make a great one.
Free, open-source web fonts. Browse, preview, and grab the <link> tag for any font in seconds.
The icon library TNT uses throughout the 2026 site. Thousands of icons, one CDN link, zero images needed.
Downloadable SVG and PNG icons in a consistent flat style. The source for most of TNT’s custom icons.
A large collection of free PNG icons you can download quickly when you need visual assets for mockups and student projects.
Generate gorgeous color palettes in seconds. Hit the spacebar to keep cycling — it’s addictive.
Build color harmonies using color theory rules (complementary, triadic, etc.) — great for themed sites.
Sweet-themed lorem ipsum generator for mockups when you need playful placeholder text with personality.
Upload any image and get a complete favicon package in every size. Used for all TNT favicons.
AI accelerates development but only if you steer it. Our S.P.A.R.K. method keeps the student in charge — these resources help you understand the tool without becoming dependent on it.
The AI pair programmer built into VS Code. TNT uses this for S.P.A.R.K. development — prompt, analyze, refine.
Microsoft’s official learning resources for GitHub Copilot — how to prompt effectively, what it can and can’t do.
AI tools designed specifically for educators and students. Used at Trinity for exploring AI in a structured, educational context.
TNT’s “Dear Abby” for coding problems — real prompting interactions, annotated for students learning the S.P.A.R.K. method.
Sometimes you just want to try something quickly without setting up a whole project. These tools let you do exactly that.
TNT’s primary IDE. Free, extensible, and the home of GitHub Copilot. If you’re not using it, start now.
Browser-based HTML/CSS/JS playground. Great for testing ideas fast, sharing snippets, and exploring others’ work.
Official online editor for p5.js sketches. No install needed — write, run, and share Processing art instantly.
If you have a specific coding problem, someone else has already asked it here. The answer is almost always on the first page.
Resources we built ourselves — collected discoveries, documented gotchas, and things that made us say “Eureka!”
Our running log of “Danger Will Robinson!” bugs and “Eureka!” moments — real problems we hit, documented so you don’t have to.
TNT through the years — previous site versions showing how far we’ve come since 2015. A master class in evolution.
Every TNT app, organized into eleven categories. The best way to see what’s possible and find something to reverse-engineer.