Contexte de la mission
Dans le cadre de la formation Développeur Web / WordPress chez OpenClassrooms, j’ai accompagné les étudiants sur le projet Booki, qui consistait à transformer des maquettes Figma en un site web responsive à l’aide uniquement de HTML5 et CSS3.
L’entreprise fictive Booki propose un service de planification de vacances (hébergements + activités) et souhaitait une interface simple et ergonomique.
Mon rôle a été d’aider les étudiants à maîtriser les bases de l’intégration web, à analyser correctement une maquette et à coder de manière propre, conforme aux standards du web.
Description du projet
Le travail demandé consistait à :
- Analyser et interpréter les maquettes fournies pour desktop, tablette et mobile.
- Structurer le code HTML de manière sémantique et claire.
- Styliser avec CSS en respectant la charte graphique et les composants récurrents.
- Rendre le site responsive grâce aux media queries, pour un affichage optimal sur tous les écrans.
- Optimiser les ressources (images, formats, poids).
- Valider le code auprès du W3C et respecter les bonnes pratiques de lisibilité (code commenté, structuré, facile à maintenir).
Technologies et outils étudiés
- HTML5 / CSS3
- Figma (maquettes desktop, tablette, mobile)
- W3C Validator (validation du code)
- Chrome DevTools (tests et ajustements responsive)
Étapes guidées
- Analyse détaillée des maquettes Figma.
- Découpage des composants récurrents (cartes, filtres, boutons).
- Création de la structure HTML sémantique.
- Intégration CSS (typographies, couleurs, mises en page flexibles).
- Mise en place du responsive design (desktop → tablette → mobile).
- Optimisation des images et des performances.
- Validation du code via le W3C et corrections finales.
Points pédagogiques clés
- Maîtriser les bases : HTML et CSS comme fondations du développement web.
- Apprendre à lire et découper une maquette pour l’intégration.
- Mettre en place un responsive design robuste.
- Développer des pratiques de code propre et conforme (commentaires, indentation, normes).
- Sensibilisation à la sémantique web et aux standards de qualité.
Mon rôle : accompagner les étudiants dans l’acquisition des fondamentaux du développement front-end, leur transmettre les bonnes pratiques d’intégration, et les guider vers un code propre, conforme et maintenable.