Cours 3¶
Utilisation de l'IA générative interdite à cette phase dans la session: vous devez solidifier les bases
Bloc0: REMISE de l'exercice de 🍽️Menu de restaurant¶
- Si ce n'est pas fait, svp le remettre maintenant.
- Si vous avez eu de la difficiulté avec le git, n'hésitez pas à me le faire savoir, nous allons trouver une solution ensemble.
Tutorat cette session¶
| NOM | PLAGE HORAIRE | LIEU | DATES |
|---|---|---|---|
| Alexis Guilbault | Trou horaire – Mardi 12h30-14h10 | En personne au Centre d’aide C-1612 | 3 février au 27 avril inclus. |
| Olivier Laliberté | Mercredi soir – 19h-20h15 | En ligne sur TEAMS : canal Tutorat de l'équipe TIM-Programme TIM | 4 février au 28 avril inclus. |
| Iryna Lysenko | Dimanche soir – 18h-19h15 | En ligne sur TEAMS : canal Tutorat de l'équipe TIM-Programme TIM | 8 février au 3 mai inclus. |
Bloc1: RETOUR sur Atelier: Schéma de navigation du cours2¶
👩🏻💻 Activité : Schéma de navigation - GitHub Classroom
C'était un exercice en équipe. Un des membres de votre équipe doit ouvrir le dossier de l'exercice dans VS Code et ouvrir le fichier du schéma .drawio.
On va faire un tour de table pour analyser chaque schéma de navigation. et en discuter ensemble.
Bloc2: ACTIVITÉ - Analyse de la qualité du code CSS spaghetti¶
Exercice individuel
Étape 1¶
Tip
Que les fichiers de l'exercice proviennent de GitHub Classroom ou d'un lien direct comme ci-bas, je vous demande de toujours télécharger et classer vos fichiers d'exercice et d'atelier au même endroit. Cet endroit doit être accessible en tout temps et sur n'importe quel poste de travail. Par exemple :
- votre disque dur exerne
- votre clé USB
- votre OneDrive
Étape 2¶
Ouvrez le fichier téléchargé dans VS Code pour l'analyser.
Étape 3¶
Cliquez ici pour accéder au questionnaire
Bloc3: EXPOSÉ - Pourquoi l'architecture CSS est importante¶
👩🏫 Exposé 3a: Pourquoi l'architedcture CSS compte: Télécharger le PPT
Bloc4: DÉMO LIVE - Composant VS utilitaire¶
- card-composant.html
- card-utilitaires.html
Bloc5: ATELIER - Identifier composants/utilitaires¶
Étape 1¶
Tip
Que les fichiers de l'exercice proviennent de GitHub Classroom ou d'un lien direct comme ci-bas, je vous demande de toujours télécharger et classer vos fichiers d'exercice et d'atelier au même endroit. Cet endroit doit être accessible en tout temps et sur n'importe quel poste de travail. Par exemple :
- votre disque dur exerne
- votre clé USB
- votre OneDrive
Étape 2¶
Ouvrez le fichier téléchargé dans VS Code pour l'analyser.
Étape 3 - Consignes¶
Analysez la page c3-composant-utilitaire.html et identifiez :
- Les COMPOSANTS réutilisables (éléments qui se répètent identiquement)
- Les UTILITAIRES potentiels (styles ponctuels qu'on pourrait réutiliser ailleurs)
- La nomenclature que vous proposez pour chaque composant
Créez un tableau sur Miocrosoft Whiteboard avec 3 colonnes :
| Composant | Éléments concernés | Classes proposées |
|---|---|---|
| Card projet | articles de projets | .project-card, .project-card__image, etc. |
Étape 4 - Remise¶
- Éditez le fichier remise.md pour y ajouter le lien vers votre Whiteboard et vos noms
- Faire un commit et push de vos modifications sur GitHub Classroom.
Bloc6: EXPOSÉ - Nomenclature cohérente¶
👩🏫 Exposé 3b: Nomenclature cohérente: Télécharger le PPT
Bloc7: EXPOSÉ - Les variables CSS¶
👩🏫 Exposé 3c: Les variables CSS
Bloc8: EXERCICE - Renommer code mal structuré (code spaghetti)¶
Étape 1¶
Tip
Que les fichiers de l'exercice proviennent de GitHub Classroom ou d'un lien direct comme ci-bas, je vous demande de toujours télécharger et classer vos fichiers d'exercice et d'atelier au même endroit. Cet endroit doit être accessible en tout temps et sur n'importe quel poste de travail. Par exemple :
- votre disque dur exerne
- votre clé USB
- votre OneDrive
Étape 2¶
Ouvrez le fichier téléchargé dans VS Code.
Étape 3 - Consignes¶
Les consignes sont dans le README.md de l'exercice.
Étape 4 - Remise¶
Faire un commit et push de vos modifications sur GitHub Classroom.
BLOC 9 : ATELIER - Portfolio: Créer un système CSS documenté¶
Étape 1¶
Tip
Que les fichiers de l'exercice proviennent de GitHub Classroom ou d'un lien direct comme ci-bas, je vous demande de toujours télécharger et classer vos fichiers d'exercice et d'atelier au même endroit. Cet endroit doit être accessible en tout temps et sur n'importe quel poste de travail. Par exemple :
- votre disque dur exerne
- votre clé USB
- votre OneDrive
Étape 2¶
Ouvrez le fichier téléchargé dans VS Code.
Étape 3 - Consignes¶
Les consignes sont dans le README.md de l'exercice.
Étape 4 - Remise¶
Faire un commit et push de vos modifications sur GitHub Classroom.
DEVOIRS¶
Devoirs à compléter et remettre pour le prochain cours¶
Terminer et remettre les exercices non complétés en classe: