Accueil Formations Apprendre CSS 3

Création de la Page Contacts sur un Site Web

Retour à la formation
Chapitre 51 Leçon 1
Précédent
Suivant

Apprenez comment structurer et développer une page de contacts efficace incluant des éléments tels qu'un formulaire et une carte Google Map.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons vous guider à travers le processus de création et de personnalisation d'une page de contacts pour un site web. Nous commencerons par la configuration de la bannière et des deux colonnes de contenu, l'une contenant un formulaire de contact et l'autre des informations supplémentaires telles qu'un Google Map et des détails sur les cours de cuisine.

Vous apprendrez à ajuster et à styliser les différents éléments du formulaire, y compris les champs de texte, les labels, et les champs de confirmation comme les cases à cocher pour l'acceptation des politiques de confidentialité. De plus, nous aborderons l'insertion d'un iframe Google Map, les optimisations nécessaires pour s'assurer que le contenu se présente correctement dans toutes les configurations d'affichage et proportions de colonnes flexibles.

Objectifs de cette leçon

À la fin de cette vidéo, vous serez capable de :
- Structurer une page de contacts
- Créer et styliser un formulaire de contact
- Insérer et personnaliser une carte Google Map
- Assurer la conformité avec les réglementations RGPD

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devriez avoir des compétences de base en HTML et CSS, ainsi qu'une connaissance intermédiaire en développement web.

Métiers concernés

Les compétences acquises dans cette vidéo sont applicables aux métiers de développeur web, intégrateur, et designer UX/UI.

Alternatives et ressources

En alternative à Google Map, vous pouvez utiliser d'autres services de cartographie comme OpenStreetMap.
Pour le formulaire, des services tiers comme Typeform ou Google Forms peuvent être envisagés.

Questions & Réponses

Vous pouvez utiliser une classe CSS wrap appliquée à la div contenant les éléments, et définir des propriétés de flexbox pour centrer les éléments horizontalement et verticalement.
Réinitialiser la taille d'un élément inline-block permet de s'assurer qu'il épouse les dimensions de son contenu sans héritage de tailles indésirables, et ainsi, d'améliorer la précision de l'affichage.
Respecter les règles de RGPD est crucial pour protéger les données des utilisateurs, garantir leur consentement éclairé, et éviter des sanctions légales. Un formulaire doit informer les utilisateurs de l'usage de leurs données et obtenir leur accord.