INFO 202: Web Development Fundamentals and Agile Methodologies

Comprehensive vocabulary flashcards covering Web Development concepts from INFO 202, including HTML5 structure and forms, CSS fundamentals and Bootstrap, JavaScript syntax and DOM manipulation, debugging techniques, and Agile/Scrum methodologies.

HTML5 Form Validation Attributes

Built-in attributes used to validate form input without custom scripts, including 'required' (mandatory field), 'min' and 'max' (numerical bounds), 'maxlength' (character limit), and 'pattern' (regular expression format).

disabled vs. readonly Attributes

Form attributes where 'disabled' makes an input field non-editable and unsubmittable, whereas 'readonly' prevents editing but still allows the input value to be submitted with the form.

JavaScript Form Validation Approaches

The two primary methods to validate form data in JavaScript: Conditional Logic (using if-else statements) and Regular Expressions (Regex, using pattern matching for emails, usernames, and passwords).

Document Object Model (DOM)

A hierarchical tree structure where each HTML tag becomes a node, serving as the foundation of modern web interactivity and enabling over 90% of dynamic behavior on websites.

querySelector() vs. querySelectorAll()

DOM selection methods where querySelector() returns only the first element matching a specified CSS selector, while querySelectorAll() returns a NodeList of all matching elements.

textContent vs. innerHTML

DOM manipulation properties where textContent retrieves or sets plain text, whereas innerHTML retrieves or sets HTML markup within a string, including tags, spacing, and line breaks.

classList Property

A DOM element property returning the CSS class names of an element that provides methods including .add() to add tokens, .remove() to remove tokens, and .toggle() to switch tokens on and off.

addEventListener()

A method used to attach an event handler to a DOM element, directing JavaScript to listen for specific events (such as 'click', 'mouseenter', 'mouseleave', or 'keydown') and execute a specified function.

event.preventDefault()

A method of the Event object that cancels the event if it is cancelable, preventing default browser behavior (such as form submission or link redirection) from taking place.

event.stopPropagation()

A method of the Event object that prevents further propagation of an event during event flow, stopping event bubbling up the DOM hierarchy.

Testing vs. Debugging

Testing identifies defects or errors to verify that software meets technical and user requirements (performed before debugging by insiders or outsiders); debugging is the process of analyzing and removing those defects (performed after testing strictly by insiders).

console.table()

A browser debugging console method used to display arrays and objects formatted clearly in a tabular layout.

Breakpoints

Debugging tools that pause code execution at specific lines, allowing developers to inspect program state, examine variable values, and pinpoint where and why errors occur.

try…catch…finally Statement

An exception-handling construct where code in the try block runs first; if an exception occurs, code in the catch block executes, and the finally block always runs before control flow exits.

Control Flow

The mechanism that alters the default top-to-bottom execution order of code, answering 'Should I run this?' (conditionals) and 'How many times?' (loops).

Strict Equality Operator (===)

A comparison operator that evaluates whether two operands have identical values and identical data types without performing implicit type coercion.

Logical Operators

Symbols used to combine or modify Boolean values: AND (&&, returns true only if all inputs are true), OR (||, returns true if at least one input is true), and NOT (!, reverses truth value).

Switch Statement

A control flow mechanism that evaluates a single expression once, matching it against case clauses to run associated code, using 'break' to prevent fall-through and an optional 'default' clause for unmatched values.

for Loop vs. while Loop

A for loop repeats a code block a predetermined number of times based on initialization, condition, and update expressions; a while loop checks its condition first and runs repeatedly as long as that condition remains true.

JavaScript

A lightweight, cross-platform, single-threaded programming language executed directly in client-side web browsers to build dynamic, interactive content.

var vs. let vs. const

JavaScript variable declarations where 'var' is function-scoped or globally-scoped, while 'let' and 'const' are block-scoped and cannot be redeclared in the same scope ('const' additionally prevents reassignment).

Primitive Data Types (JavaScript)

Immutable data types representing single values, categorized into numeric types (Number, BigInt) and non-numeric types (String, Boolean, Null, Undefined, and Symbol).

Parameters vs. Arguments

In functions, parameters are placeholder variable names defined in the function declaration, while arguments are the actual values supplied when invoking the function.

Template Literals

A string syntax wrapped in backticks (`) that supports string interpolation via ${expression}, offering a readable alternative to standard concatenation using the + operator.

Bootstrap

A popular open-source front-end framework designed for rapid development of responsive, mobile-first websites with pre-built grid layouts and reusable UI components.

Bootstrap Containers

The foundational layout element in Bootstrap required for the grid system; includes .container (which provides a responsive fixed max-width) and .container-fluid (which spans width 100% across all breakpoints).

Bootstrap Grid System

A responsive layout structure built using flexbox (Flexible Box Layout module) consisting of containers, rows, and columns to align and structure content.

Bootstrap Cards

Flexible and extensible content containers in Bootstrap that support headers, footers, images, and various content arrangements.

CSS (Cascading Style Sheets)

A stylesheet language released in 1996 (three years after HTML in 1993) designed to separate presentation from content, improving maintainability and design flexibility.

CSS Rule Anatomy

The structure of a CSS statement comprising a selector (targeting HTML elements) and a declaration block enclosed in curly braces containing property-value pairs.

CSS Implementation Types

The three methods of applying styles: Inline CSS (inside HTML elements via style attributes), Internal CSS (inside

Simple CSS Selectors

Four primary selector types: Universal Selector (*, matches all elements), Element Selector (matches by tag name), Class Selector (.classname), and ID Selector (#idname).

Absolute vs. Relative CSS Units

CSS sizing units where absolute units have fixed dimensions (px, cm, mm, in, pt, pc), while relative units depend on viewport dimensions or parent font sizes (em, rem, %, vw, vh, vmin, vmax).

CSS Box Model

A layout model where browser assigns a rectangular box to each element composed of four areas: Content area (center), Padding area (spacing around content), Border area (outer fencing), and Margin area (space outside border).

CSS Positioning Methods

Layout rules including static (default normal flow), relative (offset relative to normal position), absolute (removed from flow, placed relative to nearest non-static ancestor), fixed (fixed relative to viewport), and sticky (toggles between relative and fixed based on scroll threshold).

Block-Level Elements

HTML elements that consume the full available width, start on a new line, and have top and bottom margins (e.g.,

,

,

,

---

).

Inline Elements

HTML elements that occupy only the space required for their content, do not start on a new line, allow adjacent inline elements, and lack top and bottom margins (e.g., , ,
, ).

Semantic HTML Elements

HTML5 tags that convey structural meaning to both developers and browsers, including

,

,

,

,

, ,

, and

.

and

Semantic elements where

encapsulates self-contained content (images, charts, code snippets) and

supplies a description placed above or below that content.

HTML Lists

Markup used to organize content: Unordered Lists (

, marked with bullets), Ordered Lists (
, marked with numbers or letters), and Description Lists (

, containing terms and descriptions).

HTML Table Elements

Tags used to represent tabular data:

initializes the table, defines a table row,

specifies a header cell, and	defines an individual data cell.

HTML Forms

Elements defined by

tags that collect user input via interactive controls (inputs, checkboxes, radio buttons, submit buttons), utilized by over 85% of websites.

Waterfall Methodology

A traditional, sequential software development model moving through distinct linear phases: Requirements Gathering, Design, Development, Quality Assurance, and Implementation.

Agile Methodology

An iterative development approach prioritizing flexibility, collaboration in cross-functional teams, rapid delivery of working software increments, and continuous adaptation to changing requirements.

Scrum Roles

The three defined roles in a Scrum team: Product Owner (prioritizes backlog based on business needs), Scrum Master (coaches process and team), and Development Team (software and QA engineers who build increments).

Product Backlog vs. Sprint Backlog

The Product Backlog is a dynamic master list of requirements, fixes, and features maintained by the Product Owner; the Sprint Backlog is the subset of items selected by the development team for the current sprint cycle.

Scrum Ceremonies

Scheduled Scrum team meetings consisting of Backlog Refinement, Sprint Planning, the Sprint (typically 2 weeks long), Daily Scrum/Standup, Sprint Review (demo), and Sprint Retrospective (team reflection).

HTML (HyperText Markup Language)

A static markup language that annotates text using tags to define document structure and content display within a web browser.

HTML Document Structure

The standard hierarchy of a webpage comprising (HTML5 version declaration), (root element), (metadata container), and (visible content container).

HTML Element Anatomy

The complete structural unit comprising an opening tag with optional attributes and values, inner content, and a closing tag.

HTML Comments

Undisplayed annotations embedded within HTML source code using the syntax, used to document code structure and maintenance details.