Desafío de repaso

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 11 de 35.

Desafío

Fácil

Se te proporciona una página HTML para el perfil de un usuario. Tu tarea es aplicar principios de diseño orientado a dispositivos móviles para que la página sea totalmente adaptable. Sigue estas instrucciones:

1. Navegación orientada a dispositivos móviles

En pantallas más grandes, muestra la lista de navegación y oculta el botón de menú.

2. Tipografía orientada a dispositivos móviles

Crea una variable CSS --body-font-size: 16px y aplícala al cuerpo. Este será el tamaño de fuente base para pantallas pequeñas.

3. Imágenes orientadas a dispositivos móviles

Usa la etiqueta <picture> para proporcionar diferentes tamaños de imagen para dispositivos móviles y pantallas más grandes.
Usa la etiqueta <source> con srcset apuntando a una imagen más grande, por ejemplo: https://upload.wikimedia.org/wikipedia/commons/1/1f/Woman_1.jpg.
Añade media="(min-width: 768px)" para aplicarlo en pantallas más grandes.
Asegúrate de que la imagen de perfil se ajuste correctamente según el ancho de la pantalla.

4. Formularios orientados a dispositivos móviles

Establece el ancho de todos los campos de entrada y del botón de envío en 100%, para que ocupen todo el ancho y sean fáciles de tocar.

La página debe verse limpia, legible y fácil de usar tanto en pantallas móviles como de escritorio. Aplica espaciado, alineación y tamaños adaptables para que todo se vea equilibrado.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Profile</title>
  <style>
    :root {
      --primary-font: Arial, sans-serif;
      --heading-font: 'Helvetica', sans-serif;
      --h1-size: 2rem;
      --h2-size: 1.5rem;
      --primary-color: #4a90e2;
      --secondary-color: #f0f4f8;
    }

    body {
      font-family: var(--primary-font);
      margin: 0;
      padding: 20px;
      background-color: var(--secondary-color);
    }

    h1 {
      font-family: var(--heading-font);
      font-size: var(--h1-size);
      color: var(--primary-color);
      margin-bottom: 5px;
    }

    h2 {
      font-family: var(--heading-font);
      font-size: var(--h2-size);
      color: #333;
      margin-top: 0;
    }

    nav {
      margin-bottom: 20px;
    }

    .menu-button {
      display: block;
      padding: 10px 15px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .nav-list {
      display: none;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .nav-list li {
      margin-bottom: 10px;
    }

    .nav-list li a {
      text-decoration: none;
      color: var(--primary-color);
    }

    .profile-img {
      width: 100%;
      max-width: 250px;
      border-radius: 50%;
      margin-bottom: 20px;
      display: block;
    }

    section p {
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    input, textarea, button {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1rem;
    }

    button {
      background-color: var(--primary-color);
      color: white;
      cursor: pointer;
    }

    /* Media queries for larger screens */
    @media (min-width: 768px) {
      .nav-list {
        gap: 20px;
      }

      .nav-list li {
        margin-bottom: 0;
      }

      form {
        max-width: 500px;
      }
    }
  </style>
</head>
<body>
  <nav>
    <button class="menu-button">Menu</button>
    <ul class="nav-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <header>
    <h1>Jane Doe</h1>
    <h2>Web Developer & Designer</h2>
  </header>

  <section>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Woman_1.jpg/250px-Woman_1.jpg" alt="Profile Image" class="profile-img">
  </section>

  <section>
    <p>Welcome to my profile! I specialize in creating mobile-first, responsive websites that look great on any device. My focus is on performance, accessibility, and clean design.</p>
  </section>

  <section>
    <form>
      <input type="text" placeholder="Your Name">
      <input type="email" placeholder="Your Email">
      <textarea placeholder="Your Message"></textarea>
      <button type="submit">Send Message</button>
    </form>
  </section>
</body>
</html>