Menu
CoddyTech
Empezar a aprender

Desafío de repaso

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

challenge icon

Desafío

Fácil

Se te proporciona una página HTML para el perfil de una persona usuaria. Tu tarea es aplicar principios de diseño mobile-first para que la página sea totalmente adaptable. Sigue estas instrucciones:

1. Navegación mobile-first

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

2. Tipografía mobile-first

  • 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 mobile-first

  • Usa la etiqueta <picture> para proporcionar distintos tamaños de imagen para pantallas móviles y más grandes.
  • Usa la etiqueta <source> con srcset que apunte 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 aplicarla en pantallas más grandes.
  • Mantén la imagen del perfil adaptable: su width: 100% y max-width: 250px hacen que se reduzca en pantallas estrechas. En pantallas anchas se mantiene en 250px; la fuente de mayor tamaño solo hace que se vea más nítida.

4. Formularios mobile-first

  • 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 quede 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>

Todas las lecciones de Frontend Práctico

1Variables

VariablesUso de variables CSSVariables para Design TokensVariables localesDesafío de repaso

4Deportes extremos

VariablesMobile-FirstTematización

7Desafíos finales

Tarjeta de perfilCuadrícula de galería de chocolatesSiete maravillasNuevas siete maravillas

2Estrategia Mobile-First

Qué significa “mobile-first”Tipografía Mobile-FirstNavegación Mobile-FirstImágenes Mobile-FirstFormularios Mobile-FirstDesafío de repaso

5Componentes de UI

Menú desplegablePestañasBadgesTooltipsBanners de notificaciónDesafío de repaso

3Tematización y estilos visuales

Tematización en CSSConceptos básicos del modo oscuro/claroColores de acento y resaltadoTematización de la tipografíaDesafío de repaso

6Patrones responsivos

Diseño Holy GrailDiseño de cuadrícula de tarjetasDiseño de barra lateral + contenidoDiseño de pantalla divididaHeader y Footer stickyDesafío de repaso

Practica por tu cuenta: Playground de Web