Web Computing Essentials — TNT 2026

Fantastic Four Essentials

Everything you need to know to master each team member — organized, searchable, and growing.

Click any topic to expand it. Jump directly to a team member below.

The Thing

HTML — The Foundation

HTML Essentials

HTML provides the structure of a web page. It’s like the ‘Ben Grimm’ of the team — rock-solid, essential, and everything else is built on top of it.

The ‘markup’ is provided by tags like <body> and <blockquote>. Some tag names are obvious (like <title>), others are abbreviated (<a> is a hyperlink), and others are semantic — the word describes the role in the page structure, like <footer> or <table>.

Tags come in two basic types:

Paired tags come in open and closing pairs like bookends. Example: <p>My first paragraph.</p>. Together, the open tag, content, and close tag form an HTML element.
Empty tags have no closing tag and often use attributes for their purpose. Example: <img src="myPrettyPony.jpg" alt="pony">. Other examples: <br> (line break) and <hr> (horizontal rule).

Generally, everything on a webpage should be in a tag.

A complete alphabetic reference of all tags is at W3Schools.

Attributes

Attributes can influence how an element works and allow you to target it for styling (CSS) or behavior (JavaScript). Key features:

Written as an equation in the start tag: name="value"
Multiple attributes are separated by a space and can appear in any order

The most common attributes are id and class:

id — like a social security number for an element. Must be unique on the page. Lets you target a specific element from CSS or JavaScript.
class — allows you to target groups of elements for styling. Bootstrap uses classes to affect the page layout and appearance.

HTML Entities

HTML Entities are special codes that render symbols not found on the keyboard — like π or ° or &. They start with an ampersand (&), followed by an abbreviation or number, and end with a semicolon (;).

Examples: π renders π, ° renders °, & renders &.

There are hundreds of them at W3Schools.

Web Page Essentials

A webpage is an HTML file with an extension of .html or .htm.

Every page starts with a doctype that tells the browser which rules to follow. The modern HTML5 doctype is simply: <!DOCTYPE html>. (Much nicer than the old HTML 4 monster.)

Every page has this structure:

<html> — the top-level container
<head> — metadata: title, links to CSS, character set
<body> — everything the user sees

HTML Comments () document special features and explain decisions. Use them. Every TNT page should have a header comment block with date, file name, and purpose.

Every TNT page should validate at the W3C validator. Validation means your HTML grammar follows the doctype rules.

DOM Essentials

The Document Object Model (DOM) is an object-based way of understanding a web page and all its elements. The browser builds it automatically when it parses your HTML.

Think of the DOM as a family tree: <html> is the root, with <head> and <body> as siblings, and all other elements as children, grandchildren, and so on.

JavaScript uses the DOM to find, read, and change elements on the page — without reloading it. CSS uses the DOM relationships (parent, child, sibling) to apply styles based on nesting.

You can view the live DOM in any browser with Inspect (right-click → Inspect) or View Source (Ctrl+U). We call this “using your x-ray vision!”

Web Site Essentials

A website is a collection of HTML pages and other assets (images, scripts, styles, media) stored together in a single root folder.

Organization is critical so files can find each other using relative paths. The standard TNT structure:

images/ — all image files
scripts/ — JavaScript .js files
styles/ — CSS .css files
media/ — audio and video
HTML pages live in the root folder

The home page is always named index.html. When a browser loads https://www.technovicetools.com, it automatically serves the index page without being told which file to open.

Before You Ship — HTML Checklist

Quick HTML quality checks before you publish:

Header comment block: coder, date, file name, purpose
Consistent indentation showing parent/child relationships
All elements use lowercase tags and quoted attributes
Semantic markup used wherever possible (<header>, <main>, <nav>, <footer>)
All images have meaningful alt attributes
No visible content placed inside <head>
Page validates at the W3C validator

Full Checklist →

Invisible Woman

CSS — The Stylist

CSS Essentials

CSS is a language comprised of property:value pairs that control the look of elements on a webpage.

It works by targeting a web page element with a selector and then applying properties and their values. Example:

h1 { color: red; font-size: 2rem; }

Here h1 is the selector, color and font-size are properties, and red and 2rem are their values.

Selectors

A selector tells CSS which element(s) to style. The three most common:

Tag selector: targets every instance of an HTML tag. p { ... } styles every paragraph.
Class selector: targets all elements with a matching class attribute. Prefixed with a dot: .highlight { ... }
ID selector: targets the single element with a matching id. Prefixed with a hash: #mainNav { ... }

Selectors can be combined and nested to target elements based on their relationship in the DOM. W3Schools has a complete selector reference.

The Cascade & Specificity

The “C” in CSS stands for Cascading. When multiple rules target the same element, the browser follows a priority order:

More specific selectors win over less specific ones (ID > class > tag)
Later rules in the stylesheet override earlier ones when specificity is equal
Inline styles (written directly on the element) beat everything except !important

Understanding the cascade is how you stop CSS from behaving “magically” and start controlling it precisely.

Responsive Design & Media Queries

Responsive design means a page looks great on any device — phone, tablet, or desktop — without separate pages for each. CSS achieves this through media queries.

A media query applies a rule block only when a condition is true. Example:

@media (max-width: 576px) { .sidebar { display: none; } }

This hides the sidebar only on screens narrower than 576px. Bootstrap 5 is built entirely on media queries — you get responsive behavior by using its classes.

CSS Custom Properties (Variables)

CSS custom properties (also called CSS variables) let you define a value once and reuse it everywhere. They are declared in the :root selector and referenced with var().

:root { --tnt-red: #D81827; }
h1 { color: var(--tnt-red); }

Change the value in one place and it updates everywhere. Every TNT 2026 page uses this pattern in tnt-base-styles.css.

Before You Ship — CSS Checklist

Quick CSS quality checks before you publish:

CSS in external stylesheets or a <style> block — not scattered as inline style attributes
All rules follow the standard format: selector, braces, one property per line
Blank line between each rule block
Identifier names are meaningful and consistently cased
Images sized with CSS, not HTML width/height attributes
External stylesheet validates at the W3C CSS Validator

Full Checklist →

Human Torch

JavaScript — The Dynamo

JavaScript Essentials

JavaScript gives users the ability to interact with a page dynamically. While HTML builds the structure and CSS applies the style, JavaScript makes things happen.

JavaScript runs directly in the browser — no installation, no server needed. It is the only programming language that works natively in every web browser on earth.

It is added to a page in two ways:

Inline, inside a <script> tag in the HTML file
Externally, in a .js file linked with <script src="myScript.js"></script>

External files are preferred — they keep code organized and allow the same script to be reused across many pages.

Variables & Data Types

Variables store data. Modern JavaScript uses let and const:

let name = "TNT"; — value can change later
const PI = 3.14159; — value cannot change

The main data types are: string (text), number (integer or decimal), boolean (true / false), array (a list), and object (a collection of named properties).

Functions

A function is a named, reusable block of code. You define it once and call it as many times as you need.

function greet(name) { return "Hello, " + name + "!"; }

Functions can accept parameters (inputs) and return a result. They are the primary tool for organizing code into logical, manageable pieces.

DOM Manipulation

JavaScript’s superpower is its ability to find and change elements on the page after it loads. This is called DOM manipulation.

document.getElementById("myId") — find one element by its ID
document.querySelectorAll(".myClass") — find all elements matching a CSS selector
element.textContent = "New text" — change the text inside an element
element.classList.add("highlight") — add a CSS class to an element
element.style.color = "red" — apply an inline style directly

Events

An event is something that happens in the browser: a click, a key press, a mouse move, a page load. JavaScript listens for events and runs code in response.

The modern way to attach an event listener:

button.addEventListener("click", function() { alert("Clicked!"); });

Common events: click, keydown, mouseover, change, submit, load.

Before You Ship — JavaScript Checklist

Quick JavaScript quality checks before you publish:

Open the browser console (F12) — zero errors before shipping
All <script> tags placed just before </body> (except variable declarations in <head>)
All interactive features tested at multiple screen sizes
No dead code, commented-out experiments, or unused functions
Bootstrap data-bs-* attributes used for behaviors Bootstrap can handle natively

Full Checklist →

Mr. Fantastic

Bootstrap 5 — The Framework

Bootstrap 5 Essentials

Bootstrap 5 is a hybrid of CSS and JavaScript packaged into a framework. It uses both technologies to influence the look and feel of a site and to add polished behaviors — like transitions, dropdowns, and collapsing content.

You add Bootstrap to a page by linking its CSS in the <head> and its JS bundle before the closing </body> tag. From there, you control everything through classes on your HTML elements.

The Grid System

Bootstrap’s grid system divides the page into 12 invisible columns. You assign elements a column width using classes like col-md-6 (half-width on medium screens and up).

Every grid must be inside a .container (or .container-fluid), and columns must be inside a .row:

<div class="container">
  <div class="row">
    <div class="col-md-6">Left</div>
    <div class="col-md-6">Right</div>
  </div>
</div>

Bootstrap is mobile-first: a col-md-6 element stacks full-width on small screens and becomes half-width on medium screens and above.

Utility Classes

Bootstrap’s utility classes let you apply common CSS in a single word. No writing CSS needed for most layout tasks.

Spacing: mt-3 (margin-top), p-4 (padding), mb-2 (margin-bottom)
Text: text-center, fw-bold, text-muted
Display: d-flex, d-none, d-md-block
Color: bg-dark, text-white, border-danger

Numbers in spacing classes represent increments (1–5), not pixels. Bootstrap scales them proportionally.

Data Attributes — No JS Required

Many Bootstrap behaviors require zero extra JavaScript. You trigger them with special data-bs-* attributes on your HTML elements.

For example, this button opens a modal without writing a single line of JavaScript:

<button data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

Other behaviors controlled this way: collapse, dropdown, tooltip, offcanvas. Bootstrap’s own JS bundle handles everything under the hood.

Before You Ship — Bootstrap 5 Checklist

Quick Bootstrap quality checks before you publish:

All columns are inside a .row, and all rows are inside a .container
Page tested at xs (phone), md (tablet), and lg (desktop) breakpoints
No Bootstrap class names reused as your own identifiers (e.g. invisible, active, fade)
Bootstrap JS bundle loaded once, just before </body>
Bootstrap CSS loaded once, in <head>, before your custom styles

Full Checklist →

H.E.R.B.I.E.

p5.js & GitHub Copilot — Honorary Member

p5.js Essentials

p5.js is a JavaScript library for creative coding. It gives you a digital canvas and a simple set of drawing commands that make it easy to create animations, interactive art, and data visualizations.

Every p5.js sketch uses two core functions:

setup() — runs once when the sketch starts. Use it to create the canvas: createCanvas(400, 400);
draw() — runs continuously, many times per second. Every frame of your animation lives here.

p5.js is the creative coding library of choice in CS Innovations Studio. Visit p5js.org for the full reference.

GitHub Copilot Essentials

GitHub Copilot is an AI assistant built into Visual Studio Code that suggests code as you type and answers questions about your code in a chat panel.

At TNT we use it with the S.P.A.R.K. method:

Set a clear goal before you prompt
Prompt with context — the more specific, the better the suggestion
Analyze the response — never paste blindly
Refine — iterate until it’s right
Know & share what you built and why

Copilot is a collaborator, not a substitute. The goal is always to understand what you’re building.

More p5.js & Copilot essentials coming soon — this section grows with each project.

Mastered the essentials? Run the quality checklist before you go live.

Before You Ship — Webpage Checklist