freeCodeCamp Responsive Web Design Syllabus

Rank these by specificity from lowest to highest: p, .card, #main, inline style attribute.

p (type, 0-0-1) < .card (class, 0-1-0) < #main (ID, 1-0-0) < inline style (beats any selector). Ties are broken by source order — the later rule wins.

What do the CSS combinators (space), >, +, and ~ select?

A B (space): any B descendant of A; A > B: B that is a direct child of A; A + B: B that is the immediately adjacent next sibling of A; A ~ B: any B that is a later sibling of A.

What is the difference between a pseudo-class and a pseudo-element in CSS?

A pseudo-class (single colon, e.g., :hover, :first-child, :not()) selects elements in a particular state or position. A pseudo-element (double colon, e.g., ::before, ::after, ::first-line) styles a specific part of an element or generates content.

List the four layers of the CSS box model from innermost to outermost.

Content, padding (space between content and border), border, and margin (space outside the border separating the element from neighbors).

How does box-sizing: border-box change width calculation compared to the default content-box?

With content-box (default), rendered width $=$ width $+$ padding $+$ border. With border-box, the declared width already includes padding and border, so the content area shrinks: content width $=$ width $-$ padding $-$ border. This makes layouts predictable.

What is margin collapsing?

When the vertical margins of adjacent block elements (or a parent and its first/last child) meet, they combine into a single margin equal to the larger of the two, rather than adding together. It applies only to vertical margins, not horizontal ones.

What is the classic CSS technique to horizontally center a block element?

Give it a defined width (or max-width) and set margin: 0 auto; — the auto left and right margins split the remaining space equally.

What are the syntaxes for defining colors in CSS with rgb, hsl, and hex, including alpha?

Hex: #RRGGBB (or #RRGGBBAA with alpha), each channel 00–FF. rgb(r, g, b) with each channel $0\text{–}255$, or rgba(r, g, b, a) with $a \in [0, 1]$. hsl(h, s%, l%) with hue $h \in [0^{\circ}, 360^{\circ}]$, saturation and lightness as percentages; hsla adds alpha.

In the HSL color model, what do hue values of $0^{\circ}$, $120^{\circ}$, and $240^{\circ}$ represent, and what do 100% and 50% lightness give?

$0^{\circ}$ = red, $120^{\circ}$ = green, $240^{\circ}$ = blue on the color wheel. Lightness 100% is white, 0% is black, and 50% is the pure hue.

What is the difference between linear-gradient and radial-gradient in CSS?

linear-gradient(direction, color1, color2, ...) transitions colors along a straight line (e.g., 90deg or to right); radial-gradient radiates colors outward from a center point in a circular or elliptical shape. Both are used as background-image values.

What do background-size: cover and background-size: contain do?

cover scales the background image to completely fill the container (cropping overflow if aspect ratios differ); contain scales it so the whole image fits inside the container (possibly leaving empty space).

What is a font stack in the CSS font-family property and why include a generic family last?

A comma-separated list of fonts, e.g., font-family: "Open Sans", Arial, sans-serif;. The browser uses the first available font; the generic family (serif, sans-serif, monospace) at the end guarantees a fallback if none of the named fonts load.

What is the difference between serif and sans-serif typefaces?

Serif fonts have small decorative strokes (serifs) at the ends of letterforms (e.g., Times New Roman), traditionally used for print body text; sans-serif fonts lack these strokes (e.g., Arial, Helvetica) and are common for screen text.

In typography CSS, what do line-height, letter-spacing, and text-transform control?

line-height sets the vertical space of each line of text (commonly a unitless multiplier like 1.5 of the font size); letter-spacing adjusts space between characters; text-transform changes casing (uppercase, lowercase, capitalize) without altering the HTML.

What does display: flex do, and along which two axes does a flex container operate?

It turns an element into a flex container whose direct children become flex items laid out along the main axis (set by flex-direction: row, row-reverse, column, or column-reverse) and the perpendicular cross axis.

In Flexbox, what do justify-content and align-items control?

justify-content distributes items along the main axis (flex-start, center, space-between, space-around, space-evenly); align-items aligns items along the cross axis (stretch, flex-start, center, baseline).

What does flex-wrap do, and what is the shorthand that combines it with flex-direction?

flex-wrap: wrap allows flex items to break onto multiple lines when they overflow (default nowrap keeps one line). flex-flow is the shorthand: flex-flow: <direction> <wrap>, e.g., flex-flow: row wrap.

What three properties does the flex shorthand on a flex item combine, and what does each do?

flex: <grow> <shrink> <basis>. flex-grow sets the proportion of extra space the item takes; flex-shrink sets how much it shrinks when space is short; flex-basis sets its initial main-axis size before growing/shrinking. flex: 1 equals 1 1 0.

How do the order and align-self properties affect an individual flex item?

order changes the visual position of an item relative to siblings (default 0; lower values come first) without changing the HTML. align-self overrides the container's align-items for that single item on the cross axis.

How can Flexbox perfectly center an element both horizontally and vertically?

On the parent: display: flex; justify-content: center; align-items: center; — centering on the main and cross axes simultaneously.

How do you define a CSS Grid with 3 equal-width columns, and what does the fr unit mean?

display: grid; grid-template-columns: 1fr 1fr 1fr; (or repeat(3, 1fr)). The fr unit is a fraction of the free space in the grid container — 1fr 2fr gives the second track twice the free space of the first. gap (or row-gap/column-gap) sets spacing between tracks.

In CSS Grid, how do you place an item to span from column line 1 to column line 3?

grid-column: 1 / 3; (start line / end line) — spanning 2 tracks. Equivalently grid-column: 1 / span 2. grid-row works the same way for rows; note lines are numbered from 1, and an $n$-column grid has $n+1$ vertical lines.

What do grid-template-areas and the grid-area property let you do?

grid-template-areas defines a named visual map of the layout using strings (e.g., "header header" "sidebar main"), and each item is assigned with grid-area: header; — placing items by name instead of line numbers. A . denotes an empty cell.

What does grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) achieve?

A responsive grid without media queries: the browser creates as many columns as fit, each at least 200px and growing up to 1fr to share leftover space. auto-fit is similar but collapses empty tracks so existing items stretch to fill the row.

What is the syntax of a CSS media query that applies styles only on screens 768px wide or narrower, and what is mobile-first design?

@media (max-width: 768px) { ... }. Mobile-first design writes base styles for small screens and uses @media (min-width: ...) queries to progressively add styles for larger screens (the breakpoints).

Contrast the relative units em and rem in CSS.

1em equals the font size of the element's parent (for font-size) or the element itself (for other properties), so em values compound when nested. 1rem always equals the root (<html>) font size — by default $1\,\mathrm{rem} = 16\,\mathrm{px}$ — making rem predictable for consistent scaling.

What do the viewport units vw, vh, vmin, and vmax represent?

1vw $= 1\%$ of the viewport width; 1vh $= 1\%$ of the viewport height; 1vmin $= 1\%$ of the smaller viewport dimension; 1vmax $= 1\%$ of the larger. So an element with width: 50vw always spans half the viewport width.

What CSS rule makes an image responsive so it scales down with its container but never overflows?

img { max-width: 100%; height: auto; } — the image shrinks to fit narrow containers while height: auto preserves its aspect ratio, and it never renders larger than its natural size.

What do the srcset attribute and the <picture> element provide for responsive images?

srcset (with sizes) lists multiple resolutions of the same image so the browser downloads the size appropriate for the display — resolution switching. <picture> with <source media="..."> serves different images per condition (art direction), falling back to the inner <img>.

In the freeCodeCamp Survey Form project, which required form controls must be present and how are they identified?

A text input (#name), an email input with validation (#email), a number input with min and max (#number), a <select> dropdown (#dropdown), at least two radio buttons sharing a name, at least three checkboxes with value attributes, a <textarea>, and a submit button (#submit), under an <h1 id="title"> and <p id="description">, all inside one <form>.