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.
Learn computer science online with interactive lessons and exercises.
The home of creative coding — download the Java-based Processing IDE, p5.js (the JavaScript port), or Python Mode. The original visual coding environment, active since 2001.
Daniel Shiffman’s wildly entertaining tutorials covering creative coding with p5.js, Java Processing, and JavaScript. Lectures, challenges, and live streams — learning disguised as fun.
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.
Run Java and/or Python3 (or 70+ other languages) instantly in the browser — no install, no account. See TNT’s cheat sheet for a guided first run.
Run and debug Python3 and/or Java in the browser with a built-in step-through debugger — no setup required. See TNT’s cheat sheet for a guided first run.
If you have a specific coding problem, someone else has already asked it here. The answer is almost always on the first page.
Generate the hashed password line for Apache .htpasswd files — used to protect folders like TNT’s answer-key directory with HTTP Basic Auth. No command line needed.
Professor X’s four-session guide to hacking any web page with DevTools — HTML structure, CSS appearance, JavaScript behavior, and Bootstrap classes. Zero real-world consequences.
Advanced DevTools training — Chrome Local Overrides and Snippets. When your changes need to survive the refresh, this is the guide. Companion to the Danger Room.
Free browser-based pixel art and sprite editor. Create animated game sprites, export as PNG sprite sheets or GIFs. See TNT’s cheat sheet for a guided first run — includes a full “Build the Slime” tutorial.
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.
A searchable gallery of classroom moments, student designs, and visual references — live search, Bootstrap modals, and teacher-annotated blurbs.
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.
Capture vocabulary gold during class. Auto-saves as you type, grows on demand, and prints a clean submission for the teacher.
Blaze a free-form trail through TNT, log every breadcrumb, and lead classmates to your discovery using the TRAIL framework. Includes a built-in JavaScript primer explaining how the app works — rare in any JS app.
TNT’s 10-step guide to finding, sizing, coloring, and placing FA icons — with a live icon explorer and quick-reference card.
When to write .md and when to write .txt — a side-by-side comparison with examples. Companion to the TNT markdown development workflow.
TNT’s “Dear Abby” for coding problems — 41+ real interactions with GitHub Copilot, annotated for students learning the S.P.A.R.K. method.
The same CS concept seen in multiple languages — p5.js, Java, Python 3. Each language is a lens on the same idea, with language philosophy paragraphs, Tier 3 workshop programs, and classroom-ready PDF lesson plans.
Six principles for students with elevated software and AI access — GitHub Copilot, VS Code, Python, Magic School, and more. With great power comes great responsibility. Includes a digital acknowledgment modal.