Quizzes – EduHub

Question 1

What is the difference between CSS Grid and Flexbox?

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

Question 2

How do you create a keyframe animation?

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

Question 3

What does "will-change" property do?

Hints to browser about which properties will change to optimize performance Deprecated 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 Using JavaScript Using flexbox or grid with auto-fill, minmax, and clamp() Not possible

Question 6

What is the purpose of "contain" property?

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

Question 7

What is a CSS preprocessor and name two examples?

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

Question 8

How do you create a parallax scrolling effect?

Using perspective Using transform: translateZ 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 is a property, translate() is a function of transform transform moves, translate rotates Same

Question 10

What is "cascade" in CSS?

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

Question 11

How do you optimize CSS for performance?

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

Question 12

What is "CSS Houdini"?

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

Question 13

How do you create a sticky footer with CSS Grid?

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

Question 14

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

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

Question 15

How do you implement dark mode in CSS?

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

Question 16

What is "isolation: isolate" used for?

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

Question 17

How can you create a CSS-only tooltip?

Using :hover on parent to show a pseudo-element Using title attribute 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 Hides front face Applies blur

Question 20

How do you debug CSS layout issues?

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