Question 1. How do you implement responsive design?

• Media Queries → Apply styles for different breakpoints.
• Flexible Units → Use %, em, rem, vw/vh for scalable layouts.
• Fluid Images → max-width: 100% to adapt images to container size.
• Modern Layouts → CSS Grid/Flexbox for flexible structure.

Question 2. Difference between CSS variables and SCSS variables?

CSS Variables (-var)

• Native to browsers, live at runtime.
• Can be updated dynamically with JavaScript.

:root {
  --main-color: blue;
}
.btn {
  background: var(--main-color);
}

SCSS Variables ($var)

• Exist only at compile time (preprocessing).
• Cannot be changed dynamically after build.

$main-color: blue;
.btn {
  background: $main-color;
}

👉 CSS vars = runtime & dynamic, SCSS vars = build-time & static.

Question 3. Difference between transitions and animations?

• Transitions

  • Define changes between two states.
  • Triggered by user interaction (hover, click).
  • Example: transition: all 0.3s ease;.

• Animations

  • Use keyframes for multiple intermediate states.
  • Run automatically or loop infinitely.
  • Example:

  @keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
  }