DevAcademy

1. What does a media query with (max-width: 480px) do?

Applies its styles only on screens narrower than 480pxApplies its styles only on screens wider than 480pxSets the element’s width to 480pxDisables the element below 480px

2. What does "mobile-first" mean?

Only supporting mobile devicesWriting base styles for small screens first, then adding complexity with min-width queriesTesting only on mobile browsersUsing larger font sizes

3. Why is the viewport meta tag important for responsive design?

It loads CSS fasterWithout it, mobile browsers render at a zoomed-out desktop width, breaking media queriesIt is only needed for imagesIt replaces the need for media queries

4. How do you reference a CSS variable in a declaration?

$variablevar(--variable)@variable#variable

5. Where are global CSS variables conventionally defined?

Inside every selectorOn :rootIn the <head> onlyInside @media

6. What is a key advantage of CSS variables over Sass variables?

They compile to smaller file sizesThey are live at runtime and can be changed dynamically, e.g. with JavaScriptThey work in older browsers that don’t support SassThey require no fallback values

7. Which property makes a CSS value change animate smoothly instead of instantly?

animationtransitiontransformease

8. What does the timing-function part of a transition control?

How long it lastsThe speed curve, e.g. ease or linearWhich property animatesThe delay before starting

9. Why are transform and opacity often preferred for animations?

They are the only properties CSS allows animatingThey can be animated efficiently without triggering expensive layout recalculationsThey require less CSS to writeThey work only with JavaScript

10. What is the main difference between a transition and an animation?

There is no differenceAnimations can have multiple steps and run automatically/repeat, transitions animate only between two statesTransitions only work on colorsAnimations require JavaScript

11. Which at-rule defines the steps of a CSS animation?

@media@keyframes@supports@font-face

12. Which media feature should wrap non-essential animations for accessibility?

prefers-color-schemeprefers-reduced-motionprefers-contrastorientation

13. Which transform function moves an element without affecting layout?

margintranslate()paddingtop

14. What does transform-origin control?

The animation durationThe pivot point transforms are calculated fromThe element’s colorWhether the transform is visible

15. Why is transform preferred over animating top/width for movement?

It requires less CSS syntaxIt doesn’t trigger layout reflow, so it animates more smoothlytop and width cannot be changed at alltransform works only in Chrome

16. Which value makes a box-shadow appear inside the element instead of outside?

spreadinsetinnerreverse

17. Which property adds a shadow to text glyphs specifically?

box-shadowtext-shadowfilter: shadowoutline

18. Which property applies effects like blur() or grayscale() to an element?

transformfiltershadoweffect

19. Which function creates a gradient that radiates outward from a center point?

linear-gradient()radial-gradient()conic-gradient()circle-gradient()

20. Which function sweeps colors around a center point like a color wheel?

linear-gradient()radial-gradient()conic-gradient()spin-gradient()

21. How are gradients typically applied to an element?

With the color propertyWith background-image (or the background shorthand)With border propertyWith the gradient property

22. What does calc() allow that plain CSS values do not?

Combining different units in a single math expressionAdding colors togetherRunning JavaScript in CSSLoading external files

23. What does clamp(min, preferred, max) do?

Always uses the preferred valuePicks a value that scales but stays within the min/max boundsRounds the preferred value to the nearest integerIgnores the min and max values

24. Which function is commonly used for fluid font sizes that scale with viewport width?

calc()min()clamp()max()

25. In BEM, what does the double underscore (__) represent?

A modifierAn element belonging to a blockA new blockA media query

26. Why is box-sizing: border-box commonly included in a CSS reset?

It removes all bordersIt makes width/height calculations include padding and border, avoiding surprisesIt disables marginsIt is required for Flexbox to work

27. What matters most when choosing a CSS naming convention?

Using the newest convention availableApplying it consistently across the projectUsing as many classes as possibleAvoiding classes entirely

CSS Advanced Practice

Quick Quiz