Desafio de Recapitulação

Parte da seção Practical Frontend do Journey de HTML da Coddy. Lição 11 de 35.

Desafio

Fácil

Você recebeu uma página HTML para um perfil de usuário. Sua tarefa é aplicar princípios de design mobile-first para tornar a página totalmente responsiva. Siga estas instruções:

1. Navegação Mobile-First

Em telas maiores, mostre a lista de navegação e esconda o botão de menu.

2. Tipografia Mobile-First

Crie uma variável CSS --body-font-size: 16px e aplique-a ao corpo (body). Este será o tamanho de fonte base para telas pequenas.

3. Imagens Mobile-First

Use a tag <picture> para fornecer diferentes tamanhos de imagem para telas móveis e maiores.
Use a tag <source> com srcset apontando para uma imagem maior, por exemplo: https://upload.wikimedia.org/wikipedia/commons/1/1f/Woman_1.jpg.
Adicione media="(min-width: 768px)" para aplicá-lo em telas maiores.
Certifique-se de que a imagem de perfil redimensione adequadamente dependendo da largura da tela.

4. Formulários Mobile-First

Defina a largura de todos os campos de entrada e do botão de envio para 100%, para que ocupem a largura total e sejam fáceis de tocar.

A página deve parecer limpa, legível e amigável ao usuário tanto em telas móveis quanto em desktops. Aplique espaçamento, alinhamento e dimensionamento responsivo para que tudo pareça equilibrado.

Experimente você mesmo

<!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>