Quizzes – EduHub

Question 1

What is the difference between CSS Grid and Flexbox?

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

Question 2

How do you create a keyframe animation?

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

Question 3

What does "will-change" property do?

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

Question 4

What is CSS specificity and how is it calculated?

Importance flag Browser specific 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 JavaScript Using viewport meta only Using flexbox or grid with auto-fill, minmax, and clamp() Not possible

Question 6

What is the purpose of "contain" property?

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

Question 7

What is a CSS preprocessor and name two examples?

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

Question 8

How do you create a parallax scrolling effect?

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

Question 9

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

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

Question 10

What is "cascade" in CSS?

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

Question 11

How do you optimize CSS for performance?

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

Question 12

What is "CSS Houdini"?

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

Question 13

How do you create a sticky footer with CSS Grid?

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

Question 14

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

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

Question 15

How do you implement dark mode in CSS?

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

Question 16

What is "isolation: isolate" used for?

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

Question 17

How can you create a CSS-only tooltip?

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

Question 18

What is the "currentColor" keyword?

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

Question 19

What does "backface-visibility: hidden" do?

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

Question 20

How do you debug CSS layout issues?

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