01
Sélection et prévision
Premièrement, nous avons sélectionné nos outils de travail , par exemple Visual Studio Code et GitHub. Ensuite, choisir les balises HTML requises et les typographies nécessaires.
Olivier Georges
000%
Boxotel est un projet d’intégration Web basé sur une refonte du site de l’hôtel Boxotel. Ce projet était un apprentissage pour collaborer en équipe simultanément pendant le projet.
Intégrateur - En équipe - Projet scolaire - 2025
Tester le projet
Le projet Boxotel était un projet de fin de session dans le cadre du cours de conception Web IV . Dans ce projet, nous devions intégrer la maquette Figma en HTML, CSS et JavaScript en un temps de remise précis. Le but final était de tester nos compétences et nos capacités d’intégration .
Intégrateur Web avec Yoan Robitaille. J’ai intégré la page de chaque chambre, la page des services disponibles et le menu déroulant du site. Yoan Robitaille a créé la refonte du site et a fait l’intégration de la page d’accueil, ainsi que la liste de chambres disponibles.
Dans ce projet, l’IA a été utilisée de façon très minime. Son utilisation était limitée à nous aider à débugger des problèmes que nous n’arrivions pas à régler. Aucun segment de code fourni par l’IA n’a été utilisé.
Premièrement, nous avons sélectionné nos outils de travail , par exemple Visual Studio Code et GitHub. Ensuite, choisir les balises HTML requises et les typographies nécessaires.
Deuxièmement, l’objectif est de construire notre hiérarchie de fichiers et de dossiers. Le but est d’organiser et préparer notre espace de travail .
Troisièmement, nous commençons par l'intégration de la maquette en HTML , puis nous ajoutons tous nos médias, icônes, liens, typographies etc.
Quatrièmement, l’intégration du CSS et les détails visuels finaux . L’idée est d’intégrer tout le CSS, afin de donner vie au site et de le rendre agréable visuellement .
Dernièrement, l’ajout du JavaScript , cette étape est nécessaire pour donner de l’interactivité au site. Nous avons ajouté un storytelling , des scrollys , des animations et des swipers etc.
Créer un menu séparé caché en plus du menu régulier pour assurer la fonctionnalité interactive.
Nous avons établi des limites sur quels fichiers nous avions le droit de travailler chacun.
Nous devions trouver des points de repère pour mettre nos menus et dynamiser ceux-ci, dépendant de leur position.
En conclusion, le projet Boxotel nous a permis de mettre en pratique les apprentissages enseignés pendant l’année, notamment en HTML, CSS et JavaScript . Le travail en équipe m’a aussi appris à mieux communiquer, partager mes idées , mes problèmes et mieux collaborer en équipe. Ce projet représente donc un bon apprentissage et récapitulatif des compétences que j’ai développées durant ma technique.
Retourner aux projets
Projet Boxotel (projet en équipe)
J’ai utilisé l’IA de façon très minime, seulement pour m’aider à déboguer des problèmes que je n’arrivais pas à régler. Aucun segment de code fourni par l’IA n’a été utilisé dans le projet.
Ma contribution personnelle comprend l’intégration des pages des chambres, de la page des services et du menu déroulant. Cette déclaration porte sur mon propre usage de l’IA.
Pour préparer cette fiche, j’ai utilisé Claude (Anthropic) afin de :
Rédiger et corriger les textes de présentation à partir de mes notes.
Créer la mise en scène du site sur une tablette à partir de nos captures.
Écrire les textes alternatifs (alt) des images pour l’accessibilité.
Ajuster l’affichage de la page sur mobile.
J’ai vérifié et ajusté tout ce qu’elle a produit.
Refonte du site, intégration de la page d’accueil et de la liste des chambres : Yoan Robitaille
Intégration des pages des chambres, de la page des services et du menu déroulant : Olivier Georges
Marque et contenu d’origine : Boxotel