CSS Mastery: The Ultimate Frontend Interview Challenge Quiz

1. Understanding Display Property Variants

   Given an element with 'display: inline-block', which of the following statements best describes its behavior compared to 'display: inline' and 'display: block'?

   1. A. It behaves exactly like 'inline', with width and height determined by content and cannot be changed manually.
   2. B. It behaves like 'block', always taking up the full available width and stacking vertically.
   3. C. It is displayed inline with other elements, but its width and height properties can be set explicitly.
   4. D. It is hidden and removed from the document flow.
   5. E. It floats to the right or left, leaving text to wrap around it automatically.

2. Flexbox Fundamentals in Complex Layouts

   If you want a container to automatically arrange its child elements in a single row, allow items to 'stretch' to fill available space, and easily realign them with a single property, which CSS layout module should you use?

   1. A. Floatbox
   2. B. Flexbox
   3. C. Static Layout
   4. D. CSS Table
   5. E. Inline Flow

3. Deep Dive into CSS Grid Terminology

   In CSS Grid, what do you call the explicit named section in a grid where you can place multiple items, defined using the 'grid-template-areas' property?

   1. A. Grid tracks
   2. B. Grid lines
   3. C. Grid areas
   4. D. Grid blocks
   5. E. Grid nodes

4. Crafting Animations with Keyframes

   Which syntax correctly defines a CSS animation that transitions the 'opacity' property from 0 to 1 over the course of the animation using keyframes?

   1. A. @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
   2. B. @keyframe fadeIn { start {opacity: 0;} end {opacity: 1;} }
   3. C. animation-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
   4. D. keyframes fadeIn { 0 {opacity: 0;} 1 {opacity: 1;} }
   5. E. @keyframes fadeIn { from: opacity(0); to: opacity(1); }

5. Precision with CSS Position Property

   Which positioning value allows you to move an element relative to its normal static position, without removing it from the document flow and still reserving its original space?

   1. A. absolute
   2. B. sticky
   3. C. static
   4. D. relative
   5. E. inherited