Documents

Contrat pédagogique

HTML

Visual Studio code

Titres et paragraphes

EX0 : Première page Web (V1)

EX01 : Première page Web (v2)

EX02 : Insérez une image

EX03 : Insérez un lien

EX04 : Tableaux

Les commentaires

EX05 - Navigation

Les formulaires

Les balises sémantiques

CSS

01 - Introduction

02 - Comment et où ajouter le CSS

03 - Ordre de priorité

EX01 - Rainbow Cupcake

04 - Les commentaires

05 - Les sélecteurs

EX02 - Rainbow cupcake V2

06 - Les sélecteurs d’ “états”

07 - L’inspecteur

08 - Les couleurs

EX03 - Rainbow cupcake V3

09 - Les variables CSS

10 - La propriété display (block et inline)

11 - Tailles et unités

EX04 - Poupées russes

12 - La propriété text-align

13 - La propriété font-size

14 - La propriété font-family

15 - Les fonds (couleurs et images)

16 - Les bordures

EX05 - Galerie d'art

17 - Le modèle de boite

Centrer un élément (V1)

Autres propriétés de textes

EX06 : Modèles de boite

EX06-bis : Modèles de boite (2)

18 - La propriété display (inline-block)

19 - La propriété position et sous-propriétés

EX07 - Absolution

20 - La propriété display (flex) et sous-propriétés (1)

EX08 - Flex - Zalando

EX09 - Flex - Zalando (2)

20bis - La propriété display (flex) et sous-propriétés (2)

EX10 - Flexbox Froggy

EX11 - Monsieur Parfait

21 - Les sélecteurs avancés

22 - Le responsive

EX12 - Card responsive

EX13 - Grilles (sans display:grid)

23 - La propriété display:grid

EX14 - Grilles (V2 avec display:grid)

23bis - La propriété display:grid (suite)

EX15 - Grille (V3)

EX - Grid Garden

EX - Grid Attack

24 - Les fonds (dégradés)

25 - La propriété opacity

26 - La propriété border-radius

27 - La propriété transform

28 - La propriété transition

EX - Transitions et transformations

29 - Animations et keyframes

EX - Animations

30 - Les frameworks

31 - Les pré-processeurs

32 - Conclusion

EX16 - Exemple d’examen : Beautyness

EX17 - Exemple d’examen : Une crème dans ta face

Idées et outils

Gestion de “containers” en display:grid

Exercices supplémentaires

Cette maquette figma contient plusieurs “planches” de design. Vous pouvez les intégrer en tout ou partie. Il n’est pas requis de connaître figma sur le bout des doigts pour réaliser ces exercices mais vous pencher sur l’outil vous permettra plus aisément de retrouver les espaces, tailles, images et informations.

https://www.figma.com/file/puzgJ2AAAZGidAoK6j7xOz/IFAPME---Maquettes-d'exercices?type=design&node-id=0%3A1&mode=design&t=TEWooQEkntBptZiW-1

Archives

EX05 - Navigation (1)