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 its 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 agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to 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 all the rules applied for them don't have to be validated against any media queries.
• Mobile-first designs are more likely to be usable on larger devices (will just appear more stretched, but still usable). However, the reverse is not the case.