Cours 6¶
Lundi 23 février / mercredi 25 février
Utilisation de l'IA générative ou d'agent IA interdits à cette phase dans la session: vous devez solidifier les bases d'abord !
Pratique et renforcement Flexbox¶
Simultanément: rencontres individuelles pour la rétroaction de votre Atelier sur les compostants Flexbox réutilisables (portfolio) (remise au 23, 25 février)
👩🏻💻 Exercice Flexbox: UI Dashboard
👩🏻💻 Exercice Flexbox: Page de résultats de recherche
Info
Rappel concernant les exercices : il est primordial de compléter tous les exercices afin de développer les compétences visées dans ce cours. La première évaluation sommative est le Projet 1 — pour y être évalué adéquatement, vous devez avoir participé activement à toutes les activités d'apprentissage précédentes.
Par ailleurs, tel que précisé au plan de cours, la complétion de l'ensemble des exercices de la session vous permet d'obtenir la note maximale de 10/10, ce qui représente 10 % de la note finale.
Figma Auto Layout et variables¶
Figma Auto Layout et correspondance avec Flexbox¶
Mise en place de la maquette avec des règles d’auto-layout qui correspondent à des propriétés CSS spécifiques sous le concept de Flexbox.
📚 Contenu de cours Figma Auto Layout (flexbox)
Les variables dans Figma¶
Comment créer un système de variables dans Figma pour les couleurs, les typographies et les espacements, et comment les utiliser dans une maquette.
📚 Contenu de cours Figma: variables
Figma Dev Mode¶
Dev Mode¶
Dev Mode : lecture de l'intention du designer généré par Figma à partir d’une maquette avec des règles d’auto-layout, et analyse critique du code auto-généré.
📚 Contenu de cours Figma Dev Mode
Utilisation du Dev Mode de Figma à l'intérieur de VSCode¶
Export d'images et d'icônes dans Figma¶
Export d'images à partir d'une maquette Figma
De Dev Mode à décision professionnelle¶
👩🏫 Exposé 1a: L'intégrateur à l'ère de l'IA: Télécharger le PPT
Lancement du projet-1: Assemblage d’interface (35%)¶
Objectif¶
Intégrer une maquette Figma en HTML/CSS en utilisant les bonnes pratiques d’intégration et en appliquant les concepts de Flexbox.
👩🏻💻 Instructions PROJET 1: ASSSEMBLAGE D'INTERFACE
DEVOIR pour le prochain cours (lundi 9 ou merc. 11 mars)¶
Le prochain cours est dans 2 semaines, puisque la semaine prochaine est la semaine de rattrapage.
- Terminer les 2 exercices pratiques de renforcement Flexbox et remettre les 2 liens des CodePen dans le devoir TEAMS attitré avant le cours 7 (9/11 mars):
- UI Dashboard
- Page de résultats de recherche
- Débuter le projet 1 (vous recevrez votre maquette Figma attitrée dans une conversation TEAMS le 27 février):
- création du repo GitHub personnel pour le projet 1
- lecture des consignes complètes du projet 1
- lecture du brief du client qui vous est attitré
- analyse de la maquette qui vous est attitrée (via le Dev Mode de Figma)
- planification de l’intégration (architecture HTML, composants réutilisables, nomenclature des classes, système de tokens (variables))
- début de l’intégration (HTML/CSS) du projet