Créer une page réactive « à venir »

J'ai récemment relevé un défi Frontend Mentor : créer une page de destination réactive "Coming Soon" pour un détaillant de mode. Le dossier prévoyait un formulaire d'abonnement par courrier électronique, une image d'arrière-plan captivante et une réactivité transparente sur ordinateur et mobile. Cet article détaille mon approche, mes décisions clés et mes stratégies de résolution de problèmes.

Phase 1 : Déconstruction du projet

Avant de coder, j'ai minutieusement analysé les exigences du projet :

• Une section héros présentant le logo et le message « Coming Soon ».
• Un formulaire d'abonnement par e-mail pour les inscriptions des utilisateurs.
• Une mise en page responsive avec une image d'arrière-plan s'adaptant dynamiquement à la taille de l'écran.
• Validation de base des e-mails pour garantir une saisie précise des e-mails.

Phase 2 : Structure HTML

J'ai donné la priorité à une structure HTML propre et sémantique avec un minimum de divs. La mise en page comprenait deux sections clés :

1. Section Détails : Hébergement du logo, du titre, de la description et du formulaire de saisie par e-mail.
2. Section Image : Affichage de l'image d'arrière-plan.

Ma structure HTML :

<code class="language-html"><div class="coming-soon-container">
  <!-- Details Section -->
  <div class="details">
    <!-- Logo, Heading, Description, Form -->
  </div>
  <!-- Image Section -->
  <div class="image-container">
    <img src="..." alt="Coming Soon Image">
  </div>
</div></code>

Phase 3 : Style CSS et réactivité

Flexbox a joué un rôle déterminant dans la création d'une mise en page visuellement attrayante et réactive. Il a rationalisé la disposition des éléments à la fois horizontalement (ordinateur de bureau) et verticalement (mobile).

Initialement, le .coming-soon-container était utilisé display: flex pour une disposition de bureau côte à côte. Une requête média (@media (max-width: 768px)) a changé le flex-direction en column-reverse pour mobile, en plaçant l'image sous les détails.

CSS Flexbox :

<code class="language-css">.coming-soon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .coming-soon-container {
    flex-direction: column-reverse;
  }
}</code>

Phase 4 : saisie d'e-mail et conception d'icônes de flèche

Le formulaire e-mail a été conçu pour une esthétique épurée et moderne. Le champ de saisie et le bouton d'envoi (une icône en forme de flèche) ont été conçus pour un attrait visuel.

CSS pour la saisie et l'icône :

<code class="language-css">.input-container {
  position: relative;
  width: 385px;
}

/* ... (input and span styles) ... */</code>

Phase 5 : Image de héros réactive

La propriété object-fit garantissait que l'image du héros était mise à l'échelle de manière réactive et sans distorsion.

CSS pour le conteneur d'images :

<code class="language-css">.image-container {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}</code>

Phase 6 : Validation des e-mails JavaScript

La validation des e-mails côté client a été implémentée à l'aide de JavaScript pour vérifier le format des e-mails. Une expression régulière a vérifié l'entrée par rapport à un modèle de courrier électronique standard.

Fonction de validation JavaScript :

<code class="language-javascript">function validateEmail() {
  // ... (validation logic) ...
}</code>

Conclusion

Ce projet de page "Coming Soon" a perfectionné mes compétences en matière de conception réactive et de validation de formulaires. L'utilisation de Flexbox pour la mise en page, le style personnalisé et les principes axés sur le mobile a abouti à une conception épurée et fonctionnelle. Je recommande fortement les défis de Frontend Mentor pour perfectionner les compétences en développement frontend. Le code complet est disponible sur GitHub : GitHub Link

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!