Lesson 5 of 5

Responsive Design and Good Practices

3 min read

Building Pages for Every Screen

People visit websites on phones, tablets, and large monitors. Responsive design means a page adjusts itself so it looks good on any screen size.

The Viewport Meta Tag

Responsive design starts with one line in the <head>. It tells mobile browsers to use the device's real width instead of pretending to be a desktop.

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

Relative Units

Fixed pixel sizes do not adapt well. Relative units scale with their context:

% — a percentage of the parent element.
rem — relative to the root font size.
vw and vh — a percentage of the viewport width or height.

Media Queries

A media query applies CSS only when a condition about the screen is met. This lets you change the layout at different widths.

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

Here the container fills the screen on small devices, but becomes a centred fixed width once the screen is at least 768 pixels wide.

Flexbox for Layout

Flexbox is a modern CSS layout tool that arranges items in a row or column and handles spacing automatically.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Good Practices Checklist

Always include the alt attribute on images for accessibility.
Use semantic tags like <header>, <nav>, <main>, and <footer> to describe page regions.
Keep HTML, CSS, and JavaScript in separate files.
Use clear, descriptive class names.
Test your page on a real phone, not just a desktop browser.

A common modern approach is mobile-first design: write your base styles for small screens, then use media queries to enhance the layout for larger screens.