1. #1

   Juniorlayoutbox-model

   What is the CSS box model?

   Every element is a box of content, padding, border, and margin. box-sizing controls whether width includes padding and border.

2. #2

   Juniorselectorsspecificity

   How does CSS specificity work?

   Specificity ranks selectors by inline > ID > class/attribute/pseudo-class > element. Higher specificity wins; ties go to the later rule.

3. #3

   Juniorlayoutflexbox

   What is Flexbox and when should you use it?

   Flexbox is a one-dimensional layout model for distributing space and aligning items along a row or column, ideal for components and toolbars.

4. #4

   Mid-levellayoutgrid

   What is CSS Grid and how does it differ from Flexbox?

   Grid is a two-dimensional layout system controlling rows and columns simultaneously; Flexbox is one-dimensional. They complement each other.

5. #5

   Mid-levellayoutpositioning

   What are the CSS position values and how do they behave?

   static is default; relative offsets from its normal spot; absolute positions to the nearest positioned ancestor; fixed to the viewport; sticky toggles between relative and fixed.

6. #6

   Mid-levelresponsivemedia-queries

   How do you build responsive layouts in CSS?

   Use a mobile-first approach with fluid units, flexible Grid/Flex layouts, and media or container queries to adapt at breakpoints.

7. #7

   Mid-levelselectorspseudo

   What is the difference between pseudo-classes and pseudo-elements?

   Pseudo-classes (:hover, :nth-child) target an element in a particular state; pseudo-elements (::before, ::first-line) style a generated or sub-part of an element.

8. #8

   Mid-levelunitsresponsive

   What is the difference between em, rem, %, vw/vh, and px?

   px is absolute; em is relative to the element’s font-size; rem to the root; % to the parent; vw/vh to the viewport dimensions.

9. #9

   Seniorz-indexstacking

   What is a stacking context and why does z-index sometimes not work?

   A stacking context is a self-contained layer; z-index only compares elements within the same context, so a child can’t escape its parent’s stacking order.

10. #10

    Seniorperformancerendering

    How do you write performant CSS animations?

    Animate only transform and opacity, which the compositor handles on the GPU without layout or paint; avoid animating width, top, or box-shadow.