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

• Dim - https://jsfiddle.net/dimitri_bouteille/awzvq6uh/ ⭐
• L4rks - https://codesandbox.io/s/divine-monad-l32vi ⭐
• MalikH - https://webdevproformation.github.io/grafikart-challenges/flex.html ⭐ (autofill)
• Bowser65 - https://codesandbox.io/s/grafikart-challenge-1-whp3t
• Roman R - https://codepen.io/romanryckebusch/pen/abvjJxw?editors=1100 (autofill, A11Y)
• Bokad - https://jsfiddle.net/veq0Lf6y/
• BaptouFou - https://repl.it/repls/WorthwhileSeashellIrc
• Yann - https://codepen.io/yann-marec/pen/VwvBbYB
• HugoWit - https://jsfiddle.net/Hugowit/6qud1yrp/8/
• Choulss (grid+flex) - https://codesandbox.io/s/heuristic-cherry-4t3xk?file=/style.css (bonne gestion du format tablette)
• PhiSyX - https://jsfiddle.net/PhiSyX/Lrzyvepd/ (bonne gestion du format tablette)
• Gwen.L - https://codepen.io/gwenlacosse/pen/oNjMbzW (template area)
• Papa Mouhamadou DIOP - https://codesandbox.io/s/bold-water-xvj6i
• stephcache - https://jsfiddle.net/stephcache/6rasvc5e/24/
• JeanBon - https://codepen.io/felixdorn/pen/QWjBgqQ
• Guillaume ASTIER - https://codesandbox.io/embed/spooky-challenge-grafikart-css-1-kp3pi?fontsize=14&hidenavigation=1&theme=dark&view=preview
• Voltra - https://codesandbox.io/s/grille-flex-pzpy0?file=/main.css
• Glioburd - https://codesandbox.io/s/grid-form-ufi2z (grid-area, fullscreen : https://ufi2z.csb.app/)
• Chewbathra - https://codesandbox.io/s/wonderful-panini-f1clh ⭐
• Taro - https://codesandbox.io/s/vigorous-williamson-mlzwi?file=/style.css
• akbak - https://codesandbox.io/s/xenodochial-cerf-3f0z0
• Florian - https://jsfiddle.net/7sbvw8an/2/
• Matteo - https://codesandbox.io/s/funny-morning-pkq3i (template area)
• itsadeki - https://codesandbox.io/s/challenge-css-grille-gnic0
• AnttonDev - https://codesandbox.io/s/grafikartchallenge-by-anttondev-yi8ss
• Ugo.P - https://codepen.io/Ugo_P/pen/BaoOoJW
• georges - https://jsfiddle.net/dan_georges/opds19wm/ (template area)
• Tatal - https://jsfiddle.net/ametthey/gL7qy5us/68/ (template area)
• Grafikart - https://github.com/Grafikart/Challenges/tree/master/CSS/1-Grilles/solution

Flex

• Norem - https://codepen.io/Norem/pen/GRpGbVO
• Vscool - https://codesandbox.io/s/fragrant-brook-8evnd?file=/index.html
• Couapy - https://codesandbox.io/s/nervous-shannon-vih2g?file=/style.css
• Jayson - https://codepen.io/burke9/pen/pojZyoy
• Jordan L. - https://codesandbox.io/s/challenge-grafikart-formulaire-responsive-wsk8v
• whiskey92 - https://codepen.io/jl92000/pen/pojZZzW
• m-vann - https://codesandbox.io/s/m-vann-u6rcu?file=/index.html
• ARNOLD - https://codepen.io/arnold2020/pen/gOajazR
• Jayson Mourier - https://codepen.io/burke9/pen/pojZyoy
• Roger Carter - https://codesandbox.io/s/eloquent-fog-wl3ji?file=/index.html
• Jam83 - https://codesandbox.io/s/agitated-dew-8gnl4?file=/index.html (avec position absolute)
• celtak - https://codepen.io/Celtak/pen/WNQKQrZ
• Darth_Judge - https://codesandbox.io/s/loving-star-mpnsd
• jam83 - https://codesandbox.io/s/agitated-dew-8gnl4
• stevar - https://jsfiddle.net/stevar/ck3sq2Lw/2/#&togetherjs=6fJUkr3Ulj (pb d'alignement de champs & tabulation)
• Nicolas41 - https://codesandbox.io/s/tender-pine-1thci

Float

• Farouk - https://jsfiddle.net/Roukfa/t8epz9o0/8/

Framework CSS

• rherault - https://codepen.io/romaixn/pen/vYNrPag (tailwind)
• Amiega - https://codepen.io/fdfd/pen/KKdeEvB
• Art29 - https://codesandbox.io/s/challengeform-fr1v9 (bootstrap)
• olivier49 - https://codepen.io/olivier49/pen/WNQKjwv
• JulienKit - https://codesandbox.io/s/julienkit-grafikart-challenge-css-mai-2020-b4tiq (bootstrap)
• Maxime - https://codesandbox.io/s/morning-mountain-qcvdx?file=/index.html (bootstrap)
• Quentin Geeraert - https://codesandbox.io/s/grafikart-challenge-b84xt?file=/index.html (bootstrap)