Objectif: Le sujet qui vous a été attribué doit être présenté de manière à expliquer avec des exemples.
Mettez en pratique vos connaissances en matière de prompting AI pour générer un résultat dont vous pouvez être fiers·ères et qui répond à l’objectif.
Ces mini-pages seront à consulter et comprendre par tout le monde! Nous prendrons le temps d’expérimenter avec tout ça et répondre aux questions éventuelles. Une éval de type QCM sera ensuite effectuée afin de vérifier votre compréhension de ces divers sujets.
<aside> ⏰
Mini-page mise en ligne à l’adresse prenom-nom.alwaysdata.net/css-ai
📆 Rendu 23 mars 08:30 dernier délai
</aside>
| # | Sujets |
|---|---|
| 1 | Styliser le texte avec précision: |
| letter-spacing / word-spacing / ::first-letter / ::first-line / text-decoration | |
| 2 | Gérer le flux et les débordements de texte: |
| white-space / text-overflow / -webkit-line-clamp / overflow / hyphens | |
| 3 | Jouer avec les styles de texte: |
| text-shadow / line-height / writing-mode / text-orientation / text-align-last / text-transform | |
| 4 | Explorer les pseudo-classes CSS: |
| :first-child, :last-child, :first-of-type, :last-of-type, :nth-child, :empty, :active, :focus, :target | |
| 5 | Cibler les éléments avec les combinateurs: |
| Combinateurs CSS (+~,> ) | |
| 6 | Interactions et sélections en CSS: |
| cursor / user-select / ::selection / pointer-events | |
| 7 | Créer des listes et utiliser les Variable Fonts: |
| list-style / ::marker / Les Variable Fonts | |
| 8 | Créer des effets graphiques avancés: |
| mix-blend-mode / background-blend-mode / backdrop-filter / filter | |
| 9 | Animer et transformer en CSS: |
| transform / transition / animation / @keyframes | |
| 10 | Manipuler la visibilité en CSS: |
| opacity / visibility / clip-path / object-position / object-fit | |
| 11 | Maîtriser le défilement et les barres de défilement: |
| scroll-snap / scroll-behavior / scrollbar-color | |
| 12 | Utiliser les variables CSS: |
| Variables CSS |
pointer-events mérite d’être plus clairscroll-snap-type: x proximity , changez l’élément .snap-chip avec flex: 0 0 80%; pour voir l’effet