En PC la página de la Barberia Alura se mira bien, pero como optimizo para celular?

Hola, espero estes muy bien!. Finalizando el curso Cristian se encarga de explicar todo eso a detalle. Básicamente se trata de los media queries. Estos te permiten adaptar tus tamaños de fuentes, imágenes, listas y cualquier otro elemento de tu página en función del tamaño de pantalla de dispositivo móvil que estes observando. A través del F12 en el navegador, o zona de inspección, podrás visualizar tu pagina desde diferentes dispositivos móviles y ahí podrás ir ajustando la página en función a cada una de estas pantallas.

EJEMPLO

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diseño Responsive</title>
<style>
  /* Estilos para dispositivos de pantalla grande */
  @media only screen and (min-width: 768px) {
    /* Añade estilos para pantallas grandes aquí */
    body {
      font-size: 18px;
    }
  }

  /* Estilos para dispositivos de pantalla mediana */
  @media only screen and (max-width: 767px) {
    /* Añade estilos para pantallas medianas aquí */
    body {
      font-size: 16px;
    }
  }

  /* Estilos para dispositivos de pantalla pequeña */
  @media only screen and (max-width: 480px) {
    /* Añade estilos para pantallas pequeñas aquí */
    body {
      font-size: 14px;
    }
  }
</style>
</head>
<body>
  <h1>Diseño Responsive</h1>
  <p>Este es un ejemplo básico de un diseño responsive en HTML.</p>
</body>
</html>

Cuando sigas avanzando en el curso vas a entender mejor todo.