Matière: formulaires, CSS units, responsive, bases JS

Consigne

<aside> 💻

Page d’inscription

• Une page qui s’inscrit dans un site existant (sans navigation)
  • Doit présenter un formulaire d’inscription complet
  • Doit proposer du contenu et un habillage cohérent
• Une autre page de succès (après envoi du formulaire)
• Le sujet est libre (suggestion: envoi de jeu sur epicgamejam.com) </aside>

→ Choisissez un site existant et proposez le formulaire qui permet de créer le contenu que vous voyez (peut être un événement, un post, etc). Vous ne devez pas avoir accès à ce formulaire, je veux que vous l’inventiez selon vos observations!

💡 Idée de sujet → le formulaire d’envoi d’un jeu sur epicgamejam.com

→ Créer une page attrayante qui présente un formulaire pour s’inscrire à un événement ou pour la création d’un contenu ou autre chose (à me faire valider).

→ Le design de la page doit être réalisé sur Figma avant de passer au développement HTML & CSS.

Votre projet doit être crédible, visuellement travaillé, fonctionnel et sera publié en ligne.

→ Tous les labels des champs sont bien reliés

→ Le formulaire doit envoyer un email via un des services:

• formsubmit.co
• forminit.com
• web3forms.com

→ La page de succès s’affiche après l’envoi

→ Le formulaire doit guider l’utilisateur·rice dans la complétion du formulaire

<aside> 👮‍♂️

REQUIERT validation avant de passer à la suite. Venez me voir quand vous avez choisi et pris des notes sur votre sujet.

Je veux voir:

• Site choisi
• Liste des champs qui composent le formulaire (déduits par rapport à la présentation du contenu)
• Intention globale (design, tonalité) → Zoning / wireframe lo-fi </aside>

🖌️ Étape 1 — Maquette Figma

• Crée une maquette de la page comportant :
  • Une introduction (header) qui présente le contexte de la page
  • Un formulaire complet et soigné
  • Un footer qui met en avant des éléments en rapport avec le sujet choisi
  • Ne faites pas la navigation (c’est celle du site existant)
• La maquette peut être au format desktop ou mobile. Vous pouvez choisir dans quel format vous réalisez la maquette. Pas besoin de faire le design de tous les formats.
• Soignez la hiérarchie visuelle, la typographie et l’équilibre des blocs.

<aside> 👮‍♂️

REQUIERT validation avant de passer à la suite. Venez me voir quand vous avez terminé. La version retouchée suite aux retours doit être rendue sur Teams.

</aside>

💻 Étape 2 — Intégration HTML & CSS

• Développez la page HTML & CSS :
  • Responsive (flexbox fluide).
  • Utilisation des flexbox.
  • Respect des marges, alignements, contrastes.
  • Utilisation d’icônes (ex. Font Awesome ou autre) et images libres de droit.