How do you make a website responsive, and what is the difference between a media query and a container query?

The foundations come before any query:

• <meta name="viewport" content="width=device-width, initial-scale=1"> — without it, mobile browsers pretend to be 980px wide.
• Fluid units — percentages, fr, rem, and clamp() for type that scales between a floor and a ceiling.
• max-width: 100% on images and embedded media.
• Layout primitives that reflow on their own, such as grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) and flex-wrap.

Media queries respond to the viewport. They are the right tool for page-level decisions — how many columns the page skeleton has, whether the navigation collapses.

Container queries respond to the size of an element's own container:

.card-wrap { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

This is what media queries could never do: the same card component now lays out correctly whether it sits in a wide main column or a narrow sidebar, without knowing anything about the page. For component libraries and design systems, container queries are the correct tool and media queries are a workaround.