Quizzes – EduHub

Question 1

What is the difference between CSS Grid and Flexbox?

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

Question 2

How do you create a keyframe animation?

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

Question 3

What does "will-change" property do?

Deprecated Prevents changes 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 Not possible Using viewport meta only Using flexbox or grid with auto-fill, minmax, and clamp()

Question 6

What is the purpose of "contain" property?

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

Question 7

What is a CSS preprocessor and name two examples?

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

Question 8

How do you create a parallax scrolling effect?

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

Question 9

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

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

Question 10

What is "cascade" in CSS?

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

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"?

APIs that allow developers to extend CSS with JavaScript A browser A CSS validator 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 flexbox only Using position: fixed 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 em is absolute Same rem is for margins

Question 15

How do you implement dark mode in CSS?

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

Question 16

What is "isolation: isolate" used for?

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

Question 17

How can you create a CSS-only tooltip?

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

Question 18

What is the "currentColor" keyword?

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

Question 19

What does "backface-visibility: hidden" do?

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

Question 20

How do you debug CSS layout issues?

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