Desafio de Recapitulação

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

Desafio

Fácil

Você recebeu uma página HTML para o perfil de um usuário. Sua tarefa é aplicar os 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, exiba a lista de navegação e oculte o botão do menu.

2. Tipografia mobile-first

Crie uma variável CSS --body-font-size: 16px e aplique-a ao body. Esse será o tamanho base da fonte em telas pequenas.

3. Imagens mobile-first

Use a tag <picture> para fornecer diferentes tamanhos de imagem para telas de dispositivos móveis e telas 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á-la em telas maiores.
Mantenha a imagem de perfil responsiva: width: 100% e max-width: 250px permitem que ela diminua em telas estreitas. Em telas largas, ela permanece com 250px; a fonte maior apenas a deixa mais nítida.

4. Formulários mobile-first

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

A página deve ter uma aparência limpa, legível e fácil de usar tanto em telas de dispositivos móveis quanto em telas de desktop. Aplique espaçamento, alinhamento e dimensões responsivas para que tudo fique 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>

Todas as lições de Frontend Prático

1Variáveis

Variáveis Usando Variáveis CSS Variáveis para Design Tokens Variáveis Locais Desafio de Revisão

4Esportes Radicais

Variáveis Mobile-First Tematização

7Desafios Finais

Cartão de Perfil Grade de Galeria de Chocolates Sete Maravilhas Novas Sete Maravilhas

2Estratégia Mobile-First

O que significa “mobile-first”Tipografia Mobile-First Navegação Mobile-First Imagens Mobile-First Formulários Mobile-FirstDesafio de Recapitulação

5Componentes de UI

Menu dropdown Abas Badges Tooltips Banners de notificação Desafio de recapitulação

3Temas e Estilos Visuais

Temas em CSS Fundamentos do Modo Escuro/Claro Cores de Destaque e Realce Temas de Tipografia Desafio de Recapitulação

6Padrões Responsivos

Layout Holy Grail Layout de Grid de Cards Layout Sidebar + Conteúdo Layout de Tela Dividida Header / Footer Sticky Desafio de Revisão

Pratique por conta própria: Playground de Web