Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?

These two approaches are not mutually exclusive. Making a website responsive means that some elements will respond by adapting their size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries — for example, making the font size smaller on smaller devices.

@media (min-width: 768px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .my-class {
    font-size: 12px;
  }
}

A mobile-first strategy is also responsive; however, it assumes that we should default to and define all the styles for mobile devices, and only add specific responsive rules for other devices later. Following the previous example:

.my-class {
  font-size: 12px;
}

@media (min-width: 768px) {
  .my-class {
    font-size: 24px;
  }
}

A mobile-first strategy has the following main advantages:

• It's more performant on mobile devices, since the rules applied to them don't have to be validated against any media queries.
• Mobile-first designs are more likely to be usable on larger devices (they will just appear more stretched, but still usable). However, the reverse is not the case.