[ Trillo ]
[ Le Projet ]
Maîtriser Flexbox
Une interface de réservation d'hôtel construite entièrement avec Flexbox. Le projet couvre aussi les variables CSS natives, les animations, les transitions, et les icônes SVG — le tout sans framework.
Contexte
Formation "Advanced CSS and Sass" par Jonas Schmedtmann (Udemy)
Objectif
Maîtriser Flexbox pour des layouts flexibles et responsive
[ Le Défi ]
Un layout flexible qui s'adapte
L'interface se divise en trois zones — sidebar, header, et contenu principal — qui doivent se réorganiser complètement entre desktop et mobile. La navigation passe du sidebar au header, les colonnes deviennent des lignes, le tout avec un minimum de media queries grâce à flex-wrap et flex-direction.
[ Solution ]
Flexbox + CSS Variables
Flexbox permet de réorganiser complètement le layout entre desktop et mobile en changeant simplement flex-direction. La navigation passe du sidebar vertical au header horizontal sans restructurer le HTML.
Les variables CSS natives permettent de centraliser les couleurs et valeurs réutilisables, avec l'avantage de pouvoir être modifiées dynamiquement en JavaScript.
Les icônes SVG utilisent currentColor pour hériter automatiquement de la couleur du parent — au survol, l'icône change de couleur sans CSS additionnel.
[ Résultat ]
Flexbox vs Grid — quand utiliser quoi
Ce projet m'a appris que Flexbox excelle pour les layouts unidimensionnels et les composants qui doivent se réorganiser facilement. Combiné avec CSS Variables natives, ça donne un code maintenable et flexible sans dépendre d'un préprocesseur pour les variables.
Flexbox
- flex-direction
- flex-wrap
- justify/align
- order
CSS Moderne
- Variables CSS natives
- Animations CSS
- Transitions
- currentColor
Optimisation
- SVG sprites
- Build NPM
- Autoprefixer
[ Crédits ]
Ce projet a été réalisé dans le cadre du cours Advanced CSS and Sass: Flexbox, Grid, Animations and More! par Jonas Schmedtmann. Le design original et le concept sont de Jonas — j'ai effectué l'intégration complète en suivant la formation.