Cours 6¶
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
Figma Auto Layout et vabiables¶
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
Notez que vous recevrez votre maquette Figma attitrée dans une conversation TEAMS au plus tard le 27 février en fin de journée.
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 :
- UI Dashboard
- Page de résultats de recherche
- Débuter le projet 1 (vous recevrez votre maquette Figma attitrée dans une conversation TEAMS au plus tard le 27 février en fin de journée) :
- 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
Semaine de rattrapage (2–8 mars)
Travail autonome intensif : c’est votre responsabilité de planifier votre temps et de faire des progrès significatifs sur le projet 1. Profitez des ressources disponibles, des rencontres individuelles en classe et de l'aide des tuteurs pour obtenir du soutien.