Quizzes – EduHub

Question 1

What is the difference between CSS Grid and Flexbox?

Same Grid is older Grid is 2D, Flexbox is 1D Flexbox is 2D, Grid is 1D

Question 2

How do you create a keyframe animation?

@animation keyframes @keyframes name { from {} to {} } keyframes {} @keyframe name {}

Question 3

What does "will-change" property do?

Forces property change Prevents changes Deprecated Hints to browser about which properties will change to optimize performance

Question 4

What is CSS specificity and how is it calculated?

Browser specific Importance flag Order of styles Weight that determines which rule applies; calculated as inline > ID > class > element

Question 5

How do you implement a responsive design without media queries?

Using flexbox or grid with auto-fill, minmax, and clamp() Using JavaScript Using viewport meta only Not possible

Question 6

What is the purpose of "contain" property?

Holds content Container queries Improves performance by isolating a subtree from the rest of the page Contains an element

Question 7

What is a CSS preprocessor and name two examples?

JavaScript, Python jQuery, React HTML, XML Sass, Less (or Stylus)

Question 8

How do you create a parallax scrolling effect?

Using transform: translateZ Using background-attachment: fixed on background images Using scroll-snap Using perspective

Question 9

What is the difference between "transform" and "translate"?

Same transform is a property, translate() is a function of transform translate is a property transform moves, translate rotates

Question 10

What is "cascade" in CSS?

The order of styles combining and overriding based on origin, importance, specificity Animation Grid system Waterfall effect

Question 11

How do you optimize CSS for performance?

Minify CSS, use fewer selectors, avoid @import, use CSS containment Use only IDs Write all styles inline Use more !important

Question 12

What is "CSS Houdini"?

A CSS validator A browser A new framework APIs that allow developers to extend CSS with JavaScript

Question 13

How do you create a sticky footer with CSS Grid?

Using position: fixed Using flexbox only Using grid with min-height: 100vh and footer in last row Using margin-top: auto

Question 14

What is the difference between "rem" and "em"?

rem is relative to root font-size, em relative to parent rem is for margins em is absolute Same

Question 15

How do you implement dark mode in CSS?

Using @media light Using JavaScript only Using dark class Using prefers-color-scheme media query

Question 16

What is "isolation: isolate" used for?

Isolates from JS Creates a new stacking context Hides element Prevents click events

Question 17

How can you create a CSS-only tooltip?

Using :hover on parent to show a pseudo-element Using JavaScript Using <abbr> Using title attribute

Question 18

What is the "currentColor" keyword?

Current window Current border Refers to the current value of color property Current time

Question 19

What does "backface-visibility: hidden" do?

Applies blur Makes element invisible Hides the back face of a 3D transformed element Hides front face

Question 20

How do you debug CSS layout issues?

Delete CSS Restart browser Use browser devtools, outline, or border Guess