SportTim
Par George Lozanov
Projet scolaire
Figma
VS Code
HTML
CSS
JavaScript
Moodboard
Pour commencer le projet, j’ai créé un moodboard qui rassemble les couleurs, typographies et inspirations pour le site MMA. Cela m’a permis de définir l’ambiance générale et de guider mes choix graphiques tout au long du projet.
Wireframe
Ensuite, selon le gabarit de wireframe donné par la professeure sur Figma, cela m’a permis de réfléchir sur la structure pour organiser les sections, la navigation et l’emplacement des contenus avant de passer à la maquette.
Maquette
Par après,j’ai transformé le wireframe en maquette complète sur Figma, en appliquant les couleurs et typographies définies dans le moodboard. Cette étape vise a préparé l’intégration du site final.
Code HTML,CSS et JS
J’ai développé la page d’accueil plus les deux autres pages en HTML, en respectant la structure prévue dans le wireframe. Ensuite, avec le CSS, j’ai appliqué les couleurs, polices et styles du moodboard et maquette pour que le site soit agréable et cohérent visuellement avec le sport MMA. Pour finir, j’ai ajouté des interactions avec JavaScript comme la modale pour chaque membre de l’équipe pour qu’ils soient cliquables.
Site complet
Le site final est fonctionnel, avec toutes les sections, couleurs et interactions prévues. Les trois pages sont navigables facilement. Voici une petite vidéo pour montrer le site final.
Défis Techniques
Le défis que j’ai rencontré était de mettre du texte avec un fond sur l’image en le survolant. En cherchant la solution sur Google j’ai trouvé un site intéressant sur le CSS qui faisait exactement ce que je voulais.
Déclaration d’utilisation d’une intelligence artificielle
Pour la rédaction de ce travail, j’ai utilisé une intelligence artificielle de manière responsable, conformément aux principes présentés dans les 10 commandements d’utilisation de l’IA (Agence TIM, https://adonato.dectim.ca/agencetim/chat-gpt-10-commandements-dutilisation/). L’outil m’a aidé à corriger l’orthographe et la syntaxe, à clarifier certaines phrases et à structurer mes idées, mais le contenu final a été entièrement formulé et développé par moi. Toutes les informations générées ont été croisées avec des sources fiables et l’usage de l’outil respecte les consignes et limites définies par le cours. La conversation complète est consultable ici : [https://chatgpt.com/share/69e68ab8-54cc-83ea-a0bf-0db52ae1cabd].