Back to Essentials
Web Computing Essentials — TNT 2026

Before You Ship

Quality checks for every page, organized by the team member responsible. Run the list before you go live.

Click any item to expand it. Use the jump nav to reach a section.

Pre-Flight Checks

Overall Structure & Features — Applies to Every Page
Document Structure

Every well-formed HTML5 page starts with these four elements, properly nested and indented:

  • <!DOCTYPE html> — the doctype declaration, first line, always
  • <html lang="en"> — the root element with a language attribute
  • <head> — metadata, links, scripts
  • <body> — everything the user sees

Use lowercase for all element names and attribute names. <body>, not <BODY>.

Uniform indentation is non-negotiable. It visualizes parent/child/sibling relationships and makes the code readable to anyone who opens it.

HTML Comments

Comments make your code speak for itself. Every TNT page should have:

  • Header comment block (between <!DOCTYPE> and <head>):
    • Coder initials
    • Date created / last updated
    • Site name
    • File name
    • Purpose / general documentation
  • Organizational comments throughout the body:
    • Mark the end of large code blocks, especially <div>s: <!-- /.container -->
    • Explain why something was done a particular way
    • Attribute sources of copied or adapted code
Meaningful Identifier Names

class and id names should be self-documenting. A reader should understand an element’s purpose from its name alone.

  • Self-documenting — hero-title is better than ht1
  • Consistent casing — pick camelCase or kebab-case and stick with it
  • Avoid reserved words — Bootstrap already uses classes like invisible, active, show, fade. Using them as your own class names causes collisions.
Semantic Markup

Use HTML elements that describe what they mean, not just how they look. Semantic markup improves accessibility, SEO, and readability.

Structural elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

Content elements: <ul>, <ol>, <blockquote>, <figure>, <figcaption>, <details>, <summary>

Ask yourself: “Is there a more descriptive tag than <div> for this?” Often the answer is yes.

Date Stamp & Validation

Add a last-updated date stamp to every page — typically in the <footer>. At TNT we set var lastUpdate in a script block and populate it with JavaScript on page load.

Every TNT page must validate:

Build in the validation requirement from the start — not as an afterthought. It is much easier to fix one validation error than twenty.

Accessibility Basics

Accessibility means your page works for everyone — including people who use screen readers, keyboard-only navigation, or have visual impairments. It is not optional; it is professional practice.

  • Color contrast — text must have sufficient contrast against its background. Minimum ratio is 4.5:1 for normal text. Check with the WebAIM Contrast Checker
  • All images must have a meaningful alt attribute. Decorative-only images use alt=""
  • Keyboard navigation — every interactive element (links, buttons, inputs) must be reachable and operable with the Tab key alone
  • aria-label attributes on <nav>, icon-only buttons, and ambiguous links tell screen readers what they do
  • Focus styles — never use outline: none without providing a custom visible focus indicator
  • Semantic HTML is the single biggest accessibility win. A <button> is keyboard-accessible by default; a styled <div> is not.
Student Privacy — What Goes on a Live Page

Pages published to a live website are indexed by search engines. Once crawled, content can persist in caches and third-party archives long after the page is taken down. Protect yourself before you ship.

  • Use initials or first name + last initial only — e.g. “KLP” or “Kevin P.” in your header comment block. Never publish a full name.
  • No school name in page content — site branding (e.g. “TNT | CS Innovations Studio”) is fine; naming your specific school is not needed and adds unnecessary identifying detail.
  • No home address, phone number, personal email, or social media handles anywhere in the page — including hidden comments.
  • No photos of yourself or classmates without explicit permission from your teacher and parent/guardian.
  • Review your page as a stranger would see it. Ask: “Could someone identify me from this content?” If yes, edit before publishing.

This is not optional. It is a condition of publishing to TNT.

══════════════════════════════════════ -->

Body Content

Cross-cutting — HTML structure, CSS style, Bootstrap layout
Responsiveness

Responsiveness is an essential, non-optional design goal. Your page must look good on a phone, a tablet, and a desktop. Bootstrap 5 assists greatly with its mobile-first grid system.

Test your page at multiple viewport widths using your browser’s developer tools (F12 → Toggle Device Toolbar). If it breaks below 576px, fix it before you ship.

Images
  • Every image must have an alt attribute — required for validation and accessibility
  • Size images with CSS only, not width and height HTML attributes
  • Use a meaningful id or class for programmatic or styling purposes
  • Consider wrapping in a <figure> tag for additional control and <figcaption> support
  • Use title attributes to convey additional context without cluttering the page (screen tips / tooltips)
Links
  • Avoid default browser underlining — use CSS to style links distinctively instead
  • Use CSS pseudo-classes (:hover, :focus, :visited) to make links more engaging
  • Always add a title attribute: it tells the user what the link does before they click
  • Use target="_blank" when linking off-site — keep your users on your page
  • Always add rel="noopener noreferrer" with target="_blank" for security
  • Copy/paste URLs; never type them from memory. Then double-check they work.
  • Use in-page anchor links (href="#sectionId") to connect related content without leaving the page
Lists
  • Ordered lists (<ol>) number themselves — never add your own numbering
  • Nested lists must be placed inside a specific <li> element, not floating between them. Violating this breaks validation.
  • Unordered list bullets can be replaced with custom CSS (list-style-image or styled pseudo-elements)
  • Navigation menus are often unstyled <ul>s nested in a <nav> tag — Bootstrap does this with .navbar-nav
  • Remember: people skim pages like billboards. Lists simplify dense content.
Tables
  • Follow basic HTML table anatomy: <table>, <thead>, <tbody>, <tr>, <th>, <td>
  • Tables are for tabular data, not page layout. Use Bootstrap’s grid for layout.
  • Bootstrap 5 provides excellent table styling utilities
<div>s
  • If you can implement a <div> without a class or id, question whether you needed it at all
  • Ask: “Can I use a semantic element here instead?” Usually yes.
  • Bootstrap relies heavily on <div>s with classes — that’s fine. Your own content divs should always be identifiable.
  • Close every <div> with a comment: </div><!-- /.container -->
Flair: Spans, Entities & Abbreviations
  • <span> elements styled with CSS classes add precise inline flair without breaking flow
  • HTML Entities — use curly quotes (&ldquo; &rdquo;), em-dashes (&mdash;), and other entities for typographic polish and to avoid characters that conflict with HTML syntax
  • <abbr> reduces page clutter: <abbr title="Document Object Model">DOM</abbr> provides a hover definition without expanding the visible text
General Layout
  • It would be unusual not to have the bulk of a page’s content centered in the browser and styled for a reasonable max-width
  • Showcase your content by using a muted background (color, pattern, or gradient) on the <html> or <body> so the content area feels elevated
  • Use predominantly sans-serif fonts; serif fonts are fine for accents only
  • Spell-check your content before publishing
Preformatted Content — the <pre> Tag

The <pre> tag renders text exactly as typed — preserving all spaces, line breaks, and indentation, using a monospace font. It is the correct tag for code examples, terminal output, and anything where exact layout matters.

  • Displaying CSS rule format examples
  • Showing song lyrics where line structure is meaningful
  • File trees or command output that must stay column-aligned

Never use <pre> just to indent text visually. It carries semantic meaning and will render the exact whitespace you type.

Navigation Conventions — Don’t Make Them Think

Users rely on conventions — patterns they’ve seen on thousands of other sites. Breaking conventions creates friction, even if the user can’t explain why the page feels wrong.

  • Logo top-left — and it links to the home page. Always.
  • Navigation top or left — deviating requires a compelling reason
  • Consistent labels — if a page is called “Home” in one nav, it’s “Home” in every nav. Never “Main Page” somewhere else.
  • Active page indicator — use aria-current="page" and a CSS style to show users where they are in the site
  • Breadcrumbs answer “how did I get here?” on deep-hierarchy sites — without requiring back-button archaeology

Source: Steve Krug, Don’t Make Me Think, Ch. 6 — Street Signs and Breadcrumbs

The Thing — HTML Coding

Coding: HTML

The Thing — write structure first
HTML Style Guide Essentials

The W3Schools HTML Style Guide is worth bookmarking. Key items:

  • Always quote attribute values: class="hero" not class=hero
  • Separate multiple attributes with a single space
  • No spaces around the = in an attribute: href="page.html" not href = "page.html"
  • Add blank lines between large or logically distinct code blocks for readability
  • Be consistent: if you use Bootstrap grid columns one way, use them that way everywhere
Classes, IDs & the title Attribute
  • An element can have only one class attribute. Multiple classes are space-separated within it: class="card mb-3 highlight"
  • An element’s id must be unique across the entire page
  • title can be a tag (in the <head>) or an attribute (in the body). Don’t confuse the two.
General Coding Discipline
  • When copy/pasting source code, remove everything you don’t use. Orphaned code is clutter.
  • Attribute sources in comments whenever you adapt someone else’s code
  • Pick a naming convention (camelCase, kebab-case) and stick with it throughout the project
  • When you copy/paste content, make sure you update what needs to change. Copied placeholder text in a live page is a classic novice mistake.
  • DWR! VSCode sometimes inserts an extra closing tag when pasting. Always check after a paste.
Relative Paths — From Localhost to Live

Relative paths describe a file’s location relative to the current file. They work on your local machine and on the live server — as long as the folder structure is identical on both.

  • images/logo.png — in the images subfolder of the current folder
  • ../images/logo.png — one folder up, then into images
  • ../../styles/main.css — two folders up, then into styles

A common stumble: paths work on localhost but break when deployed because absolute paths (C:\Users\...) were used. Always use relative paths.

Test every linked resource (images, stylesheets, scripts) after deploying — broken paths silently fail in the browser without always showing obvious errors.

Invisible Woman — CSS Coding

Coding: CSS

Invisible Woman — style after structure
CSS Over HTML Style Attributes

Use CSS for styling, not inline style attributes on HTML elements. Inline styles are limiting, hard to maintain, and difficult to override.

Exceptions exist — Bootstrap utility classes encourage some inline-style-like patterns, and occasionally a one-off override is unavoidable — but as a default: if you’re writing style="color:red" on ten elements, write a CSS class instead.

CSS Rule Format

Follow this standard format for CSS rules. It keeps stylesheets readable and consistent:

selector {
    property: value;
    property: value;
}

next-selector {
    property: value;
}
  • Multi-word property names are hyphenated: background-color, font-size
  • One-liners are acceptable for short rules: .hidden { display: none; }
  • Separate rules from each other with a blank line
Selector Strategy
  • There are a vast number of CSS selectors. Knowing the right one for the job is a superpower.
  • The wildcard reset (* { margin: 0; padding: 0; box-sizing: border-box; }) clears browser defaults so you start from a clean slate
  • During development, write styles in a <style> block on the page; port them to an external stylesheet later. Easier to iterate.
  • Free CSS starter templates from W3Schools can accelerate your projects
CSS Borders vs. <hr>

The <hr> tag draws a horizontal rule, but CSS border properties give you far more control — color, thickness, style, which sides. Consider using a border-top on a <section> or <div> instead.

This page uses this approach throughout: thin, low-opacity borders separate sections without the visual weight of a full-width line.

Human Torch — JavaScript Coding

Coding: JavaScript

Human Torch — behavior comes after structure & style
JavaScript Provides Behavior

JavaScript is the last layer: HTML gives structure, CSS gives style, JavaScript gives behavior. Write it after your HTML and CSS are solid. Don’t use JavaScript to do work that HTML or CSS can do on their own.

Bootstrap’s data-bs-* attributes handle many interactive behaviors (modals, collapses, dropdowns) without any JavaScript. Use them.

Script Placement
  • Bootstrap JS bundle: just before </body>
  • Your own <script> tags: also just before </body>, after Bootstrap
  • Variable declarations used across the page (like var lastUpdate): in a <script> block in the <head> is acceptable
  • External .js files: preferred over inline scripts for anything reused across multiple pages
Code Quality Checks
  • Open the browser console (F12) and check for errors before shipping
  • Eliminate commented-out dead code — leave only intentional documentation comments
  • Use const for values that won’t change; let for those that will. Avoid var in new code.
  • Test all interactive features (buttons, forms, toggles) at multiple screen sizes
  • If a function is only called once, consider whether it actually needs to be a function
Mr. Fantastic — Bootstrap 5 Coding

Coding: Bootstrap 5

Mr. Fantastic — flexible, responsive, professional
Grid Rules — Non-Negotiable

Bootstrap’s grid is the foundation of responsive layout. These rules must be followed or layouts break unpredictably:

  • Columns must always be inside a .row
  • Rows must always be inside a .container or .container-fluid
  • Never nest columns directly inside other columns without a new .row
  • Column breakpoints are cumulative upward — col-md-6 means half-width on medium screens and wider
  • Column widths in a row should add up to 12 (or fewer, using offset or auto classes)
Load Order — Bootstrap CSS Before Your Styles

Bootstrap’s CSS must be loaded before your own stylesheets.

Correct order in <head>:

  1. Bootstrap CSS <link>
  2. Font Awesome <link>
  3. Google Fonts <link>
  4. Your custom CSS <link>(s)
  5. Page-level <style> block (last, so it overrides everything above)

Bootstrap JS bundle goes at the very bottom of <body>, after all your own <script> tags.

Avoid Class Name Collisions

Bootstrap defines hundreds of class names. Using any of them as your own custom class names produces unexpected behavior — Bootstrap’s styles apply silently to your elements.

Common collision traps for students:

  • invisible — Bootstrap sets visibility: hidden (this famously broke a student’s modal heading)
  • active, disabled, show, fade
  • container, row, card, badge

The fix: prefix your custom classes with a project identifier. TNT uses tnt- as a prefix for all shared custom styles.

Utility Classes vs. Custom CSS

Before writing a CSS rule, ask: “Does Bootstrap already have a class for this?”

  • mt-3, pb-2, gap-4 for spacing
  • d-flex, align-items-center, justify-content-between for flex layouts
  • text-center, fw-bold, text-muted for typography utilities

Write custom CSS for brand colors, custom animations, and layouts Bootstrap cannot handle. Do not reinvent what Bootstrap already provides.

Test at All Breakpoints

Bootstrap breakpoints: xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).

Test at a minimum of three widths before shipping:

  • 375px — common phone width
  • 768px — tablet breakpoint
  • 1200px+ — desktop

Use Chrome DevTools (F12 → Toggle Device Toolbar). A page that only looks good at your monitor’s resolution is not a finished page.

Typography & Readability

Billboard 101 — Design for scanning, not reading
The Billboard Principle — Why This All Matters

People do not read web pages the way they read books. They scan — picking out headings, bold words, and bullet points as they move quickly down the page, like reading a billboard at 70 mph. Every typography and formatting decision you make should serve that reality.

This principle comes from usability consultant Steve Krug’s Don’t Make Me Think — required reading for anyone who builds for the web. The rules below exist because of it.

Headings

Headings organize content and let scanners find what they need instantly. Use them to:

  • Break text into logical, named sections
  • Signal hierarchy and importance

Rules:

  • Only one <h1> per page — the page title
  • Use headings in descending order: <h2>, <h3>, etc. Never skip a level
  • Headings must be in close proximity to the content they introduce — reduce the heading’s bottom margin and the following element’s top margin so they visually connect
  • Never use headings as a substitute for paragraphs or for decorative emphasis
Paragraphs

Effective paragraphs:

  • Focus on a single idea — split anything that covers two topics
  • Are short — a few sentences maximum
  • Target 45–80 characters per line for optimal readability. Use max-width in CSS to enforce this, not <br> tags.
  • Use &nbsp; (non-breaking space) to keep important content together — names, linked text, and book titles should not split across lines as the page resizes
  • Branch to detailed content with well-named hyperlinks for those who want more; keep the main text lean
  • Can often be replaced with a bulleted list — lists are faster to scan
Text Formatting

Formatting should guide the eye, not decorate the page. Apply it with restraint:

  • Bold (<b> or font-weight: bold) for genuinely important terms; not for decoration
  • Italic (<i> or font-style: italic) for titles, technical terms, or gentle emphasis
  • Font families:
    • Sans-serif (Arial, Inter, Helvetica) for body text — cleaner on screens
    • Serif (Times New Roman, Georgia) as an accent only — never for long body text on screen
    • Monospace (Courier, Consolas) for code, terminal output, and data tables where alignment matters
  • Use <abbr title="..."> to define acronyms on hover without cluttering the visible text
  • Never use underlining for emphasis — users interpret underlined text as a hyperlink. Use color, weight, or a :hover pseudo-class instead.
  • Keep the C.R.A.P. Rule in mind: Contrast, Repetition, Alignment, Proximity
  • Less is more. Overformatted text loses all emphasis. When everything is bold, nothing is.
Whitespace

Whitespace makes a page breathe. It creates visual separation between sections and prevents the page from feeling claustrophobic.

  • Use padding and margin to create whitespace — they are the most underused CSS properties in student work
  • Never use <br> tags to create whitespace. That’s what margin and padding are for.
  • Too little whitespace makes a page feel crowded and hard to scan
  • Too much whitespace makes a page feel empty and forces unnecessary scrolling
  • Use a muted background on <html> or <body> to make the content area feel elevated and focused
Alignment & Proximity

Alignment creates visual order. Left-aligned text is the most readable for body content because it produces a consistent left edge for the eye to return to. Centered text is appropriate for short headings and callouts — not for multi-line body paragraphs.

Proximity means things that belong together should look like they belong together — placed close, with clear visual separation from unrelated elements. A heading that floats equally far from the section above it and the content below it belongs to neither. Tighten the gap below the heading.

Both principles come from Gestalt psychology and are the foundation of every professional layout. Violating them is immediately noticeable, even to users who couldn’t explain why the page feels “off.”

Visual Hierarchy

Visual hierarchy means the most important element on the page looks the most important. The eye should be drawn to what matters first, then guided through the content in priority order.

Create hierarchy through:

  • Size — larger elements appear more important
  • Weight — bold text draws the eye before regular text
  • Color — high-contrast or accent colors signal importance
  • Position — top and left get noticed first in Western reading patterns
  • Whitespace — an element with more breathing room gets more attention

A page where everything is equally prominent is a page where nothing is prominent. If everything screams, nothing is heard.

Ask: “What is the single most important thing on this page? Does it look like it?”

Omit Needless Words (Krug Ch. 5)

Half the words on most web pages can be cut without losing any information. Krug calls this the single most important thing you can do for usability.

Cut these immediately:

  • Happy talk — “Welcome to our amazing website! We’re so excited to share this with you!” Nobody reads it.
  • Instructions nobody reads — if a button needs a paragraph of explanation to use, redesign the button
  • Introductory filler — “In this section we will be discussing...” Just start discussing it.
  • Redundant context — if the page heading says “Movie Clips,” every sub-heading doesn’t need to say “Movie Clip: [title]”

The goal: every word on the page should earn its place.

Source: Steve Krug, Don’t Make Me Think, Ch. 5

The Trunk Test (Krug Ch. 6)

Krug’s Trunk Test: imagine you were blindfolded, put in the trunk of a car, driven to some page deep inside a website, and dropped there. Could you answer these five questions instantly?

  1. What site is this? — the logo and brand must be unmistakably visible
  2. What page am I on? — the page title or heading must be clear and prominent
  3. What are the major sections of this site? — the navigation must be visible and consistent
  4. What are my options at this level? — local navigation must be evident
  5. How did I get here? — some indication of context (active nav item, breadcrumbs) should exist

Run this test on every page. If any question takes more than a second to answer, the page needs work.

Source: Steve Krug, Don’t Make Me Think, Ch. 6

Back to Top    Back to Essentials    Meet the Team