Front-end Web Development CSS Syllabus

What does `flex-wrap` do, and what is its default?

`flex-wrap` controls whether flex items stay on one line or wrap onto multiple lines. The default is `nowrap` (single line); `wrap` allows wrapping top-to-bottom, and `wrap-reverse` wraps bottom-to-top.

What property turns an element into a grid container, and what defines its columns and rows?

`display: grid` (or `inline-grid`) creates a grid container. `grid-template-columns` and `grid-template-rows` define the sizes of the explicit columns and rows.

What is the `fr` unit in CSS Grid?

The `fr` unit represents a fraction of the remaining free space in the grid container. For example, `grid-template-columns: 1fr 2fr` splits available space so the second column is twice as wide as the first.

What does `repeat(3, 1fr)` mean in a grid template, and what does `minmax()` do?

`repeat(3, 1fr)` is shorthand for `1fr 1fr 1fr`, defining three equal columns. `minmax(min, max)` defines a track that is at least `min` and at most `max`, e.g. `minmax(100px, 1fr)`.

What is the difference between `gap`, `row-gap`, and `column-gap` in grid and flex layouts?

`gap` is shorthand setting the spacing between tracks/items; `row-gap` sets spacing between rows and `column-gap` between columns. `gap: 10px 20px` means a 10px row gap and 20px column gap.

How do you place an item to span specific grid lines using `grid-column` and `grid-row`?

Use `grid-column: start / end` and `grid-row: start / end` with line numbers, e.g. `grid-column: 1 / 3` spans from line 1 to line 3 (two columns). You can also use `span n`, e.g. `grid-column: span 2`.

In CSS Grid, what is the difference between the explicit and implicit grid?

The explicit grid is defined by `grid-template-rows/columns`. The implicit grid is auto-generated when items are placed outside the explicit grid; its track sizes come from `grid-auto-rows`/`grid-auto-columns` and flow direction from `grid-auto-flow`.

What are the five values of the CSS `position` property?

`static` (default, normal flow), `relative` (offset from its normal position), `absolute` (positioned relative to the nearest positioned ancestor), `fixed` (positioned relative to the viewport), and `sticky` (toggles between relative and fixed based on scroll).

How does `position: absolute` determine its containing block?

An absolutely positioned element is placed relative to its nearest ancestor whose `position` is not `static` (i.e. `relative`, `absolute`, `fixed`, or `sticky`). If no such ancestor exists, it is positioned relative to the initial containing block (viewport).

How does `position: relative` differ from `position: absolute` regarding document flow?

A `relative` element stays in the normal flow and reserves its original space; the `top/left/etc.` offsets shift it visually without affecting other elements. An `absolute` element is removed from normal flow, so it no longer reserves space and other elements ignore it.

What is the difference between `position: fixed` and `position: sticky`?

`fixed` removes the element from flow and pins it to the viewport so it stays put during scrolling. `sticky` keeps the element in flow and behaves like `relative` until a scroll threshold (set via `top`, etc.) is crossed, then it sticks like `fixed` within its containing block.

What does the `z-index` property control, and what is required for it to take effect?

`z-index` controls the stacking order of overlapping elements along the z-axis (higher values appear in front). It only applies to positioned elements (`position` not `static`) or flex/grid items, and operates within stacking contexts.

What is a stacking context in CSS?

A stacking context is a three-dimensional conceptual layer in which elements are stacked. It is created by the root element, positioned elements with a `z-index`, `opacity` less than 1, `transform`, `filter`, `will-change`, and others. `z-index` values only compete within the same stacking context.

What is the difference between a CSS transition and a CSS animation?

A transition interpolates a property between two states triggered by a change (e.g. `:hover`), requiring a trigger and only running once per change. An animation uses `@keyframes` to define multiple intermediate states, can run automatically, loop, and play without a trigger.

What four properties does the `transition` shorthand combine?

`transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`. Example: `transition: opacity 0.3s ease-in 0.1s`.

What are the common values of a transition/animation timing function?

`linear`, `ease` (default), `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`, plus custom `cubic-bezier(x1, y1, x2, y2)` and `steps(n, jump)` functions.

What does the CSS `cubic-bezier()` timing function define?

It defines a custom acceleration curve from two control points $$P_1 = (x_1, y_1), \quad P_2 = (x_2, y_2)$$ with the curve fixed between $(0,0)$ and $(1,1)$. The $x$ values must lie in $[0, 1]$, while $y$ values may exceed that range to create overshoot/bounce effects.

How do you define a CSS animation sequence, and how is it referenced?

Define the sequence with a `@keyframes name { ... }` block using `from`/`to` or percentage stops (e.g. `0% { } 50% { } 100% { }`). Reference it on an element with `animation-name: name` (or the `animation` shorthand).

What properties control how many times a CSS animation repeats and its direction?

`animation-iteration-count` sets the repeat count (a number or `infinite`). `animation-direction` sets play direction: `normal`, `reverse`, `alternate`, or `alternate-reverse`.

What does `animation-fill-mode` control?

It defines what styles apply before the animation starts and after it ends. Values: `none` (default), `forwards` (retain final keyframe), `backwards` (apply first keyframe during delay), and `both`.

What is the difference between the `transform` properties `translate`, `scale`, and `rotate`?

`translate(x, y)` moves an element, `scale(sx, sy)` resizes it (1 = original size), and `rotate(angle)` spins it around its transform origin, e.g. `rotate(45deg)`. They do not affect document flow and are GPU-accelerated.

Why are `transform` and `opacity` preferred for animations over properties like `width` or `top`?

`transform` and `opacity` can be composited by the GPU without triggering layout (reflow) or repaint of other elements, producing smoother, higher-performance animations. Animating `width`, `top`, or `margin` forces layout recalculation, which is costly.

What is a media query, and what is its basic syntax?

A media query applies CSS conditionally based on device characteristics. Syntax: `@media media-type and (feature: value) { rules }`, e.g. `@media screen and (max-width: 600px) { ... }`.

What is the difference between `min-width` and `max-width` media queries in responsive design?

`min-width` applies styles when the viewport is at least the given width (mobile-first, scaling up). `max-width` applies styles when the viewport is at most the given width (desktop-first, scaling down).

What is the mobile-first approach to responsive design?

Base styles are written for the smallest screens first, then progressively enhanced for larger viewports using `min-width` media queries. This keeps the default styles lightweight and ensures content works on constrained devices.

What does the viewport meta tag do for responsive design?

`<meta name="viewport" content="width=device-width, initial-scale=1">` sets the layout viewport to the device width and the initial zoom to 1, allowing media queries and responsive layouts to render correctly on mobile devices instead of a scaled-down desktop view.

What is the difference between relative units `em` and `rem`?

`em` is relative to the font-size of the element itself (or its parent for font-size), so it compounds through nesting. `rem` is relative only to the root element's (`<html>`) font-size, avoiding compounding.

What do the viewport units `vw` and `vh` represent?

`1vw` equals 1% of the viewport's width and `1vh` equals 1% of the viewport's height. So `width: 50vw` is half the viewport width. Related units include `vmin` and `vmax` (1% of the smaller/larger viewport dimension).

How does the CSS `clamp()` function support responsive sizing?

`clamp(min, preferred, max)` returns the preferred value but never below `min` or above `max`: $$\text{clamp} = \max(\text{min}, \min(\text{preferred}, \text{max}))$$ It is commonly used for fluid typography, e.g. `font-size: clamp(1rem, 2.5vw, 2rem)`.

What is the difference between `display: none` and `visibility: hidden`?

`display: none` removes the element entirely from the layout, so it occupies no space and is not rendered. `visibility: hidden` hides the element visually but it still occupies its space in the layout.