Défi récapitulatif

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 11 sur 35.

Défi

Facile

On vous fournit une page HTML pour un profil utilisateur. Votre tâche consiste à appliquer les principes de conception mobile d’abord afin de rendre la page entièrement adaptative. Suivez ces instructions :

1. Navigation mobile d’abord

Sur les écrans plus grands, affichez la liste de navigation et masquez le bouton de menu.

2. Typographie mobile d’abord

Créez une variable CSS --body-font-size: 16px et appliquez-la au corps de la page. Ce sera la taille de police de base pour les petits écrans.

3. Images mobile d’abord

Utilisez la balise <picture> pour fournir différentes tailles d’image pour les appareils mobiles et les écrans plus grands.
Utilisez la balise <source> avec srcset pointant vers une image plus grande, par exemple : https://upload.wikimedia.org/wikipedia/commons/1/1f/Woman_1.jpg.
Ajoutez media="(min-width: 768px)" pour l’appliquer aux écrans plus grands.
Gardez l’image de profil adaptative : width: 100% et max-width: 250px lui permettent de rétrécir sur les écrans étroits. Sur les écrans larges, elle reste à 250px ; la source plus grande ne fait que la rendre plus nette.

4. Formulaires mobile d’abord

Définissez la largeur de tous les champs de saisie et du bouton d’envoi sur 100%, afin qu’ils occupent toute la largeur et soient faciles à toucher.

La page doit être épurée, lisible et conviviale sur les écrans mobiles comme sur les écrans d’ordinateur. Appliquez des espacements, un alignement et des dimensions adaptatives pour que l’ensemble soit harmonieux.

Essayez vous-même

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

Toutes les leçons de Front-end pratique

1Variables

Variables Utiliser les variables CSS Variables pour les Design Tokens Variables locales Défi récapitulatif

4Sports extrêmes

Variables Mobile-First Thématisation

7Défis finaux

Carte de profil Grille de galerie de chocolats Sept merveilles Sept nouvelles merveilles

2Stratégie Mobile-First

Ce que signifie « mobile-first »Typographie Mobile-First Navigation Mobile-First Images Mobile-First Formulaires Mobile-FirstDéfi récapitulatif

5Composants UI

Menu déroulant Onglets Badges Info-bulles Bannières de notification Défi récapitulatif

3Thèmes et styles visuels

Les thèmes en CSS Les bases du mode sombre/clair Couleurs d'accentuation et mise en évidence Thématisation de la typographie Défi récapitulatif

6Modèles Responsive

Mise en page Holy Grail Grille de cartes Mise en page Barre latérale + Contenu Mise en page Écran scindé En-tête / Pied de page Sticky Défi récapitulatif

Entraînez-vous par vous-même : Playground Web