Objectifs du jour

Intégrer une page simple en se basant sur une maquette figma.
Versioner vos lignes de codes sur Github
Mettre en ligne votre site via FTP

Objectifs du semestre

Les objectifs sont séparés en deux catégories :

Les objectifs indispensables, que chaque élève doit maîtriser
Les objectifs avancés, qui sont un plus mais ne doivent pas obligatoirement être maîtrisés en deuxième année

Objectifs indispensables

Sujet	Objectifs	Connaissances
Environnement de développement	Utiliser l’environnement de développement pour développer un site	Visual Studio Code Ligne de commande GIT NPM
Intégration depuis Figma	Intégrer un site depuis une maquette Figma	Mesurer Copier les attributs CSS Exporter les images
SMACSS	Organiser son code selon la méthode SMACSS	Séparation des déclarations dans base, layout, modules Découpage d’un site en modules Nomenclature correcte des classes
CSS Grid	Mettre en place une grille simble en utilisant la propriété CSS Grid pour créer une structure de site responsive	display: grid, grid-template-columns/rows, grid-column-start/end, grid-row-start/end, gap
Media queries	Adapter les éléments selon la largeur de la fenêtre	Min-width, max-width
Flexbox	Utiliser flexbox pour aligner des éléments	flex-direction, justify-content, align-items, flex-wrap
Position	Fixer un élément à la fenêtre Superposer deux éléments	position fixed, absolute, relative
Transitions	Ajouter des effets au survol Rendre ces effets fluides	:hover, transition, transform

Objectifs avancés

Sujet	Objectifs	Connaissances
CSS Grid	Utiliser les fonctionnalités avancées de CSS Grid	offset, order, nesting, container-fluid
Flexbox	Utiliser les propriétés avancées de flexbox pour des alignements plus complexes	order, flex-grow, flex-shrink, gap, align-self, align-content
Position	Intégrer des éléments complexes grâce aux positions	z-index
Transitions	Ajouter des effets au survol complexes
Animation	Ajouter des animations	Keyframes, animation
SCSS	Utiliser SCSS pour simplifier le développement CSS	variables, nesting, mixin, fonctions, boucles, extend
JavaScript	Écouter un événement et modifier le dom	notion d’objet, eventlistener, variables, classlist, boucles, fonctions
Plugin JavaScript	Installer un plugin avec NPM Utiliser le plugin