Descriptif

Focus: maîtrise du CSS

Les élèves ont acquis les premières bases du code lors du cours précédent. Ce cours devra approfondir leur maîtrise du CSS, et surtout des modules Flexbox et Grid. Réalisation de mises en page utilisant ces différents modules.

Animation, blend modes

Permettre de s’amuser avec ces fonctionnalités, permettant des effets visuels intéressants.

Objectif: leur donner envie d’aller plus loin, d’expérimenter, de se faire plaisir…

Apprentissage de Git

Ce cours devra également introduire les élèves à l’utilisation du système de versionnement Git.

Il est souhaitable de créer une organisation sur Github afin de rassembler les projets des élèves. Exemples / convention de nommage :

• https://github.com/eracom-id492
• https://github.com/eracom-id491

Format du cours

Format conseillé: Une période de théorie, une période de mise en pratique. Préférer des briefs courts, pouvant être accomplis en une leçon (“un cours, un site web”).

Permettre aux élèves de développer une routine de publication.

Proposer quelques exercices en binôme afin d’exploiter les possibilités de Git.

Liens avec autres cours

• En parallèle avec Design d’interfaces 3 - Maquettes
• Classes plein-temps: complémentaire avec le cours “Projet interface (site web)”
• Classes FPC: en parallèle avec Développement d’interfaces 3 (Interactions)

Un programme possible

• Introduction à Git
• Formulaires, les balises Input, comment les styler (thème transversal avec Design d’interfaces)
• Audio
• Video
• Generated content avec ::after, ::before
• CSS For Print (prélude aux Media Queries)
• Media Queries et Feature Queries
• Tables HTML, comment les styler (sélecteurs nth-of-type)
• CSS Grid Layout
• Minmax(), responsive design patterns
• Flexbox
• SVG
• CSS Shapes
• CSS Transforms
• CSS Animations (keyframes)
• Accessibilité

Exemples de structure de cours:

• https://eracom-id412.github.io/eedev2/ classe ID412, printemps 2023, cours de M. Schmalstieg
• https://code.eracom-pedagogique.ch/eedev2-id311/ classe ID311, automne 2022, cours de M. Schmalstieg

📚 Ressources

• Support de cours CSS : https://cours-web.ch/css/
• Support de cours Git : https://cours-web.ch/git/
• Github Education : https://education.github.com/
• Github Classrooms : https://classroom.github.com/classrooms

Structure globale des cours

Pour situer ce cours dans le contexte de la formation:

• Structure des cours Développement.