Full Stack Web Development CSS3 & Responsive Design Syllabus

With content-box sizing, what is the total rendered width of an element with width:200px, padding:20px, border:5px?

250px. Total = 200 + (20×2 padding) + (5×2 border) = 200 + 40 + 10 = 250px.

What are the main values of the CSS display property?

block, inline, inline-block, flex, grid, none, and table-related values. block takes full width and stacks; inline flows in text; inline-block flows but accepts width/height.

What are the five values of the position property and their key behavior?

static (default, normal flow), relative (offset from its normal spot), absolute (positioned relative to nearest positioned ancestor), fixed (relative to viewport), sticky (toggles between relative and fixed at a scroll threshold).

What does z-index control, and on which elements does it work?

z-index controls stacking order along the z-axis (higher is in front). It only applies to positioned elements (position other than static) and flex/grid items.

What is a containing block for an absolutely positioned element?

The nearest ancestor with a position value other than static; if none exists, it is the initial containing block (the viewport/<html>).

In Flexbox, what is the difference between justify-content and align-items?

justify-content aligns items along the main axis; align-items aligns items along the cross axis (perpendicular to the main axis).

What does flex-direction control, and what are its values?

It sets the main axis direction: row (default, left-to-right), row-reverse, column (top-to-bottom), and column-reverse.

What three sub-properties does the flex shorthand combine?

flex-grow, flex-shrink, and flex-basis. For example, flex: 1 1 0 means grow=1, shrink=1, basis=0.

What does flex-grow do versus flex-shrink?

flex-grow sets how much an item expands to fill extra free space; flex-shrink sets how much it contracts when there isn't enough space.

How do you allow flex items to wrap onto multiple lines?

Set flex-wrap: wrap on the flex container (default is nowrap). align-content then controls spacing of the wrapped lines on the cross axis.

How do you define columns and rows in CSS Grid?

With grid-template-columns and grid-template-rows on the container, e.g. grid-template-columns: 1fr 2fr 1fr defines three columns sized by fractional units.

What is the fr unit in CSS Grid?

A fractional unit representing a share of the available free space in the grid container after fixed-size tracks are allocated.

What does the repeat() function with auto-fit/auto-fill do in Grid?

It creates a repeating track pattern, e.g. repeat(auto-fit, minmax(200px, 1fr)) makes as many columns as fit, each at least 200px, creating responsive grids without media queries.

What is the difference between grid-template-columns gap and the gap property?

gap (formerly grid-gap) sets spacing between grid tracks (rows and columns), e.g. gap: 10px 20px sets 10px row gap and 20px column gap. It also works in Flexbox.

How were layouts traditionally built with the float property?

Elements were floated left/right so other content wrapped around them; multi-column layouts used floats plus clearfix hacks. This is legacy; Flexbox and Grid are preferred today.

What problem does the clearfix technique solve?

A floated child is removed from normal flow, so its parent collapses to zero height. Clearfix (e.g. ::after { content:''; display:block; clear:both; }) forces the parent to contain its floats.

What does the clear property do?

It prevents an element from sitting next to floated elements; clear: left, right, or both pushes the element below the respective floats.

What is the basic syntax of a CSS media query?

@media media-type and (feature) { rules }, e.g. @media screen and (max-width: 768px) { ... } applies rules only when the condition matches.

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

min-width applies styles when the viewport is at least that wide (mobile-first); max-width applies when the viewport is at most that wide (desktop-first).

What is a breakpoint in responsive design?

A viewport width (defined in a media query) at which the layout changes to better fit the screen size, e.g. switching from a single column to multiple columns.

What is the mobile-first approach to CSS?

Writing base styles for the smallest screens first, then using min-width media queries to progressively add styles/enhancements for larger screens. It encourages performance and content prioritization.

Why is the viewport meta tag essential for responsive design?

<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to match the layout width to the device width instead of zooming out a desktop-width page.

What does the CSS clamp() function do?

clamp(min, preferred, max) returns the preferred value bounded between min and max. It's used for fluid responsive sizing, e.g. font-size: clamp(1rem, 2.5vw, 2rem).

What do the min() and max() CSS functions do?

min() returns the smallest of its comma-separated values; max() returns the largest. They allow responsive values without media queries, e.g. width: min(90%, 1200px).

What is the calc() function used for in CSS?

It performs arithmetic to compute a value, mixing units, e.g. width: calc(100% - 80px). Operators are + - * /, and +/- require spaces around them.

What three things must a CSS transition specify, and what is the shorthand order?

The property, duration, timing-function, and optional delay. Shorthand: transition: property duration timing-function delay, e.g. transition: all 0.3s ease-in-out 0s.

How do you create a CSS @keyframes animation and apply it?

Define @keyframes name { from/0% {...} to/100% {...} } then apply with the animation property (animation: name duration timing-function delay iteration-count direction).

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

A transition animates between two states triggered by a change (e.g. :hover) and needs a trigger; an animation uses @keyframes, can have multiple steps, runs automatically, and can loop.

How do you declare and use a CSS custom property (variable)?

Declare it with a double-dash name (e.g. :root { --main-color: #333; }) and use it with var(--main-color). var() accepts an optional fallback: var(--x, blue).

What is the difference between a CSS framework (e.g. Bootstrap, Tailwind) and a CSS methodology (e.g. BEM)?

A framework is prewritten CSS/components you import; a methodology is a naming/organization convention for writing maintainable CSS. BEM (Block__Element--Modifier) is a naming methodology; Tailwind is a utility-first framework.

What is a CSS preprocessor and what does it add over plain CSS?

A tool (Sass/SCSS, Less, Stylus) that compiles an extended syntax into CSS, adding features like variables, nesting, mixins, functions, and partials/imports for reuse and maintainability.