Responsive design

Most students in India browse on a phone. Write the phone layout first, then add media queries for wider screens. This needs less code than the other way round.

Without this tag in the HTML head, a phone shows a zoomed-out desktop page.

<meta name="viewport" content="width=device-width, initial-scale=1">

.layout {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

Handy habits

• Images: max-width: 100%; height: auto; stops them overflowing.
• Fluid headings: font-size: clamp(1.5rem, 5vw, 3rem);
• Make tap targets at least about 44px tall.
• Test using the device toolbar in your browser's developer tools, then on a real phone.