CIW Web Design flashcards
CIW Web Design · Build recall with a focused review session.
33 cards. Read the term and the definition here. The deck at the top of this page is optional.
- Document Object Model
- A tree representation of an HTML page that scripts traverse and modify; each element, attribute, and text node is an object with properties and methods.
- Semantic HTML
- Choosing elements by meaning, such as <nav> for navigation or <article> for self-contained content, rather than by appearance, which improves accessibility and search indexing.
- CSS specificity
- A four-part weight (inline, ID, class, element) that decides which conflicting declaration wins; higher weight overrides lower regardless of source order.
- Box model
- The layout model in which each element is a content box surrounded by padding, border, and margin; rendered size sums these layers unless box-sizing is border-box.
- Media query
- A CSS at-rule that applies rules only when a condition on viewport width, height, orientation, or resolution is true, forming the basis of responsive breakpoints.
- Mobile-first design
- A strategy that writes base styles for small screens and adds complexity with min-width media queries as space grows, keeping the default payload lean.
- Flexbox
- A one-dimensional layout mode distributing space along a main axis with justify-content and aligning on the cross axis with align-items.
- CSS Grid
- A two-dimensional layout mode defining rows and columns with grid-template, then placing items by line numbers, named areas, or automatic flow.
- Viewport meta tag
- A <meta name="viewport" content="width=device-width, initial-scale=1"> declaration that makes mobile browsers scale the layout to the device width instead of a virtual 980px canvas.
- Alt text
- The alt attribute value describing an image's purpose for users who cannot see it; empty alt marks decorative images for skipping.
- Contrast ratio
- The luminance ratio between foreground and background text colors; WCAG AA requires 4.5:1 for normal text and 3:1 for large text.
- Progressive enhancement
- Building a working baseline of semantic HTML and CSS, then layering scripts and advanced features so the page remains usable when they fail.
- Graceful degradation
- Designing for modern browsers first and adding fallbacks so older or limited clients lose features rather than breaking entirely; the inverse of progressive enhancement.
- Relative vs absolute URL
- A relative URL resolves against the current document's base location, while an absolute URL states the full scheme and host and works from any page.
- HTTP status 404
- Server response meaning the requested resource was not found; a 301 signals permanent redirect and 302 a temporary one, both relevant to URL changes.
- Cascading order
- The sequence deciding conflicts: origin and importance, then specificity, then source order; author styles beat user-agent defaults, and !important reverses origin priority.
- rem unit
- A length equal to the root element's font size, so changing html font-size scales all rem-based spacing and type proportionally.
- em unit
- A length relative to the current element's computed font size; nested em values compound, which makes them powerful for components but harder to predict.
- Form label association
- Linking a <label> to an input via matching for and id attributes so screen readers announce the field name and clicking the label focuses the control.
- Tab order
- The sequence in which keyboard focus moves through focusable elements; it follows DOM order, and positive tabindex values disrupt it and should be avoided.
- Skip navigation link
- A first-focus link letting keyboard users jump past repeated navigation to main content, typically hidden until it receives focus.
- ARIA landmark role
- An attribute such as role="navigation" that names a region for assistive technology, used when no native semantic element conveys the same meaning.
- Responsive image srcset
- An attribute listing image candidates with width or density descriptors so the browser selects the smallest file suited to viewport and device pixel ratio.
- Web font loading
- Using @font-face with formats like WOFF2 and font-display settings to control whether text renders immediately or waits for the downloaded typeface.
- Color hex notation
- A six-digit hexadecimal value #RRGGBB where each pair sets red, green, and blue from 00 to FF; three-digit shorthand doubles each digit.
- z-index stacking
- A property ordering positioned elements along the depth axis; it only applies to positioned or flex/grid items and is scoped within a stacking context.
- Pseudo-class vs pseudo-element
- Pseudo-classes like :hover select an element in a state; pseudo-elements like ::before create or style a sub-part and use double colons.
- DOCTYPE declaration
- The first line <!DOCTYPE html> that triggers standards mode in browsers; omitting it can invoke quirks mode with legacy box calculations.
- Block vs inline element
- Block elements start on a new line and accept width and height; inline elements flow within text and ignore vertical margins and explicit height.
- Wireframe
- A low-fidelity layout sketch showing placement of headers, navigation, content blocks, and calls to action without color or final typography.
- Site map
- A hierarchical inventory of a site's pages and sections used in planning navigation structure; an XML sitemap instead lists URLs for crawlers.
- Call to action
- A prominent element such as a button or link directing users toward a desired step, ideally with specific wording rather than generic labels.
- Above the fold
- The portion of a page visible without scrolling on a typical viewport; key identity and primary navigation are conventionally placed there.