Étape finale

Remise finale
  • Groupe 1 et 2: dimanche le 18 19 mai avant 23h59
  • Groupe 3: vendredi le 23 mai avant 13h30
Corrigez, ajustez le projet

Corrigez, ajustez en fonction de la rencontre avec l'enseignante aux cours 14 et au cours 15.

Consultez le wiki cours 14 et 15 pour les corrections et ajustement généraux en plus des conseils individuels que vous aurez reçus.

Intégration de vos pages respectives

Vous pouvez vous aider pour la finition mais le plus gros de l'intégration des pages attitrées doit avoir été fait individuellement d'abord.

N'oubliez pas de styliser mobile first. Par la suite, ajouter les styles pour plus grands écrans via des @media queries. N'oubliez pas de faire un commit et un push vers GitHub après chaque modification importante. Vous devez aussi faire un pull avant de commencer à travailler sur votre projet à chaque jour, afin d'être certain d'avoir la version la plus récente du projet. Ajout d'une animation

Ajoutez une animation CSS à un élément de votre choix (ou vous pouvez ajouter un élément qui n'était pas inclu dans votre design de base). L'animation doit être effectuée en minimum 4 étapes. Elle doit s’intègrer harmonieusement au design, sans détourner l’attention de l’utilisateur. Elle doit fonctionner aussi bien sur mobile que sur ordinateur (desktop).

Transitions

Les effets de survol des éléments interactifs (liens, boutons etc) doivent tous inclure une transition CSS fluide, aussi bien à l’entrée qu’à la sortie du survol.

Les commentaires CSS
  1. Vous devez commenter l’ensemble de votre code CSS afin de démontrer votre compréhension.
  2. Ajoutez également des séparateurs visuels (sous forme de commentaires) pour organiser vos styles en sections claires et structurées.
IMPORTANT: Les commentaires sont rédigés vous même et non pas par un outil tierce d'intelligence articifielle. Il est possible que je vous pose des questions sur votre code, vous devez être à même de me répondre clairement et sur le champ.

Exemple d'un niveau commentaires CSS auquel je m'attends:

/*--------------------------------------------------------- # SECTION : Styles généraux ---------------------------------------------------------*/ body{ ... } /* Conteneur en flex permettant d'aligner le contenu sur une ligne (row) et donc l'espace restant sera divisé entre chaque élément enfant du .container */ .container { display: flex; justify-content: space-between; } /* Titre principal de la page avec une transition d'agrandissement d'échelle au survol */ h1 { font-size: 1.3rem; transition: transform 0.3s ease; } h1:hover { transform: scale(1.1); } /*---------------------------------------------------------- # SECTION : En-tête (nav, log etc) ----------------------------------------------------------*/ header{ ... } /*---------------------------------------------------------- # SECTION : Héros ----------------------------------------------------------*/ section.hero{ ... } /*---------------------------------------------------------------- # ADAPTATION PAR MEDIA QUERIES (Responsiveness) pour grands écrans Car ce qui précède les media queries est stylisé pour mobile en premier (mobile first). ----------------------------------------------------------------*/ /* Styles d'exception pour les écrans d'une largeur de minimum 778px et plus */ @media screen and (min-width: 778px) { /* Adapter la taille fixe du titre principal qui était de 1.3rem et le changer pour 4vw qui équivaut à 4% de la largeur du viewport (de la fenêtre) . */ h1{ font-size: 4vw; } } Critères d'évaluation INDIVIDUEL
  • L'étudiant a contribué de manière active et équitable à l'ensemble du projet d'équipe. Les commits Git en témoignent, et une évaluation par les pairs viendra également appuyer cette participation.
D'ÉQUIPE
  • Respects des consignes et échéanciers à toutes les étapes du projet.
  • Le site respecte la maquette Figma, à l’exception de certaines améliorations que vous avez choisies d’apporter. Celles-ci doivent être clairement commentées et expliquées dans le code.
  • Des améliorations et des corrections ont été apportées à la suite de nos rencontres en classe lors des cours 14 et 15. Vous devez aussi avoir consulté le wiki cours 14 et 15 pour ajuster et corriger votre travail en fonction des Conseils pour tous.
  • Les commits Git sont fréquents et bien nommés. Les deux étudiants font des commits individuellement et c'est visibile sur l'historique de Github.
  • Unité visuelle et structurelle : les quatre pages suivent une même logique de mise en page, assurant une navigation fluide et une apparence uniforme.
  • Le site est responsive. Il s’adapte à tous les formats d’écran : mobile et bureau (desktop).
  • Le site est entièrement fonctionnel et permet une navigation fluide d’une page à l’autre.
  • L’animation est bien réalisée, comportant au minimum quatre étapes. Elle s’intègre harmonieusement au design, sans détourner l’attention de l’utilisateur. Elle fonctionne aussi bien sur mobile que sur ordinateur (desktop).
  • Les effets de survol des éléments interactifs (liens, boutons, etc.) incluent une transition CSS fluide, aussi bien à l’entrée qu’à la sortie du survol.
  • Le code est bien commenté (HTML et CSS) mais, en particulier le CSS, conformément aux consignes. Les commentaires démontrent la compréhension des techniques utilisées et sont rédigés par l’étudiant lui-même, sans l’aide d’un outil d’intelligence artificielle tiers.
Remise
  • Groupe 1 et 2: dimanche le 18 19 mai avant 23h59
  • Groupe 3: vendredi le 23 mai avant 13h30

Instructions de remise

  1. Remplir l'évaluation par les pairs: Remplir le formulaire ici
  2. Faire un dernier commit et push git.
  3. Compresser (.zip) et remettre le dossier du projet dans Teams/Devoir.