Quizzes – EduHub

Question 1

What is the difference between CSS Grid and Flexbox?

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

Question 2

How do you create a keyframe animation?

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

Question 3

What does "will-change" property do?

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

Question 4

What is CSS specificity and how is it calculated?

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

Question 5

How do you implement a responsive design without media queries?

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

Question 6

What is the purpose of "contain" property?

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

Question 7

What is a CSS preprocessor and name two examples?

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

Question 8

How do you create a parallax scrolling effect?

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

Question 9

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

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

Question 10

What is "cascade" in CSS?

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

Question 11

How do you optimize CSS for performance?

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

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 position: fixed Using grid with min-height: 100vh and footer in last row Using flexbox only

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 JavaScript only Using @media light

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 time Current border Refers to the current value of color property

Question 19

What does "backface-visibility: hidden" do?

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

Question 20

How do you debug CSS layout issues?

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