Quizzes – EduHub

Question 1

What is the difference between CSS Grid and Flexbox?

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

Question 2

How do you create a keyframe animation?

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

Question 3

What does "will-change" property do?

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

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 JavaScript Using flexbox or grid with auto-fill, minmax, and clamp() Using viewport meta only 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 Holds content Container queries

Question 7

What is a CSS preprocessor and name two examples?

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

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 Same translate is a property transform is a property, translate() is a function of transform

Question 10

What is "cascade" in CSS?

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

Question 11

How do you optimize CSS for performance?

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

Question 12

What is "CSS Houdini"?

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

Question 13

How do you create a sticky footer with CSS Grid?

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

Question 14

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

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

Question 15

How do you implement dark mode in CSS?

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

Question 16

What is "isolation: isolate" used for?

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

Question 17

How can you create a CSS-only tooltip?

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

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?

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

Question 20

How do you debug CSS layout issues?

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