Full Stack Web Development CSS3 & Responsive Design Flashcards

24 sample cards from the CSS3 & Responsive Design deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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).

13. 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.

14. 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.

15. 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.

16. 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).

17. 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).

18. 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.

19. 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.

20. 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).

21. 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.

22. 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).

23. 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.

24. 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.

What this deck covers

CSS3 & Responsive Design flashcards FAQ