NEU CSI Vendor Dashboard Code Walkthrough

Vocabulary flashcards covering the HTML, CSS, and JavaScript concepts discussed in the NEU CSI Vendor Dashboard walkthrough.

HTML

The structure layer of a web application that defines what elements exist on the page.

CSS

The appearance layer of a web application that defines how elements look, located inside "

JavaScript

The behavior layer of a web application that defines what happens during user interaction, located inside "

meta charset="UTF-8"

A tag that ensures text encoding for accented characters and emoji to render correctly.

meta name="viewport"

A critical tag for mobile devices that tells phones to render at device width rather than a defaulting to a "$980\,px$" desktop view, enabling responsive layouts.

class

A reusable style hook in HTML where many elements can share the same name.

id

A unique name used to find a specific element from JavaScript; only one per page is permitted.

aria-live="polite"

An accessibility hint for screen readers that announces changes to the text out loud when they occur.

template

Inert HTML that is parsed by the browser but not rendered; it acts as a "stamp" that JavaScript can clone and fill with data.

:root

A CSS pseudo-class that represents the whole document, used to define reusable custom properties or variables.

box-sizing: border-box

A CSS setting that includes padding and borders within an element's specified width rather than adding them to the total width.

Flexbox

A layout primitive used for aligning children in a row, allowing them to wrap onto new lines with specified gaps.

1fr

A unit used in CSS Grid representing "one fraction" of the available space.

Media query

A technique used in responsive design to apply CSS rules only when the screen is at least a specified width.

clamp(1.5rem, 4vw, 2rem)

A CSS function for fluid font size that ensures text is never smaller than "$1.5\,rem$" and never larger than "$2\,rem$" based on viewport width.

:focus-visible

A CSS pseudo-class that draws an outline only for keyboard users navigating with the Tab key, not for mouse clicks.

Set

A JavaScript collection of unique values; it provides efficient methods like ".has()", ".add()", and ".delete()".

DOM (Document Object Model)

The live, in-memory tree representation of a web page that can be manipulated by JavaScript.

dataset

An object property used to access "data-*" attributes, which are standard ways to store custom information on HTML elements.

Template literals

Backtick strings in JavaScript that allow for variable interpolation using the "$${…}" syntax.

textContent

A property used to set text that treats input as plain text; it is safer than innerHTML as it prevents injection risks.

scrollHeight

A JavaScript property representing the full height of an element's content, including the part that is not currently visible.

requestAnimationFrame

A method that defers a check or action until after the browser has completed a layout pass, ensuring measurements like height are accurate.

localeCompare

A JavaScript method for human-friendly alphabetical comparison that handles cases and accents better than standard string operators.

Debouncing

A performance pattern that uses "setTimeout" and "clearTimeout" to ensure a script only runs once the user has paused an action, such as typing.

fetch

An asynchronous JavaScript function used to make HTTP requests for external resources, such as a JSON file.

DOMContentLoaded

An event that fires once the HTML is fully parsed, used to trigger initial setup scripts like building filters and loading data.