Coding Challenge #2 : Grille & flex

L'objectif de cet exercice est de réfléchir sur la structure à adopter pour créer un formulaire en gardant une structure simple et facilement extensible.

Scénario

Le designer vous a fourni une maquette pour un formulaire sur le logiciel Figma : https://www.figma.com/file/CgKcMZLE29Nzqx4vNhlbnL/ChallengeForm?node-id=0%3A1 . Le designer n'a en revanche pas fourni de direction pour la partie responsive et vous devez improviser l'affichage sur les différents périphériques.

  • On se concentre ici sur la structure du formulaire plus que sur le style des éléments.
  • L'intégration doit être responsive.
  • L'utilisation de framework est autorisée.

https://youtu.be/Uw3jh-8pwuM

Vos solutions

Encore bravo à tous ceux qui ont participés. Pour cet exercice on a plusieurs solutions possibles mais les critères importants sont :

  • Le code HTML doit rester simple et extensible (pouvoir rajouter des champs facilement plus tard par exemple, et éviter une structure trop en lien avec le design).
  • Faire en sorte que la tabulation sélectionne les champs dans le bon ordre.
  • Faire en sorte que le responsive gère un maximum de cas (ne pas oublier les tablettes).
  • Gérer convenablement les espaces entre les champs quelquesoit la résolution.

https://youtu.be/zqKHaiB3A3c

Grille

Flex

Float

Framework CSS