Vous souhaitez apprendre à utiliser la technologie du CSS moderne Grid ? Ce cours répond parfaitement à vos besoins. Nous allons passer en revu les différentes propriétés CSS liées à Grid. Tout d'abord nous apprendrons ce qu'est un conteneur et ce que sont les contenus. Ainsi nous pourrons comprendre comment il peut être facile de les manipuler en utilisant efficacement la technologie Grid du CSS3. Nous apprendrons ensemble à définir des colonnes ainsi que des lignes afin de faciliter la mise en page de nos différents items. Nous pourrons facilement donner une valeur de largeur à nos colonnes ainsi qu'une hauteur à nos lignes et ainsi définir une véritable grille où nous pourrons définir l'emplacement du header, de la nav, de l'article, du footer ou de toute autre boîte que nous aurons définie en HTML. Nous verrons également que grâce à la technologie Grid, nous allons pouvoir déplacer très facilement nos différents nos items sur l'écran sans toucher à aucun moment le code HTML. A la fin de cette formation, vous serez parfaitement opérationnel pour mettre ne page n'importe quel site web en utilisant la technologie moderne CSS Grid.

1. Une formation
Carl BRISON
Formation
CSS GRID
Maîtriser le Responsive

2. Cursus Développeur Front : HTML & CSS

3. Une formation
Introduction
1. Fonctionnement
2. Les propriétés du conteneur
3. Les propriétés des contenus
4. Alignement des contenus
5. Propriétés complémentaires
6. Application de toute la puissance de Grid
7. Apprendre à travailler efficacement
8. Six exercices pour devenir un Pro
Conclusion
Plan de la formation

4. Une formation
Public concerné
Toute personne désireuse d’apprendre
à concevoir un site internet
Etudiants débutants en développement web

5. Une formation
Connaissances requises
Connaître les langages HTML et CSS
Les bases sont fournies dans le tuto intitulé
HTML et CSS, le Guide du Débutant
Un niveau avancé est fourni dans le tuto intitulé
HTML et CSS, le Niveau avancé

6. Une formation
Livre conseillé

8. Présentation des projets
de la formation
Une formation
Carl BRISON

9. Carl BRISON
Une formation
Fonctionnement de Grid

10. Carl BRISON
Une formation
Le display

11. Carl BRISON
Une formation
Présentation du conteneur

12. Carl BRISON
Une formation
Gestion des colonnes

13. Carl BRISON
Une formation
Gestion des lignes

14. Carl BRISON
Une formation
Hauteur automatique
pour une ligne

15. Carl BRISON
Une formation
Gestion des gouttières
entre les lignes et les colonnes

16. Carl BRISON
Une formation
Compter en fraction

17. Carl BRISON
Une formation
Mise en place de répétitions

18. Carl BRISON
Une formation
Les lignes de grilles
liées aux colonnes

19. Carl BRISON
Une formation
Les lignes de grilles
liées aux lignes

20. Carl BRISON
Une formation
Manipulation des lignes de grille

21. Carl BRISON
Une formation
Propriétés CSS raccourcies

22. Carl BRISON
Une formation
Présentation de l'alignement
des contenus

23. Carl BRISON
Une formation
Déplacement de la grille
selon l'axe horizontal

24. Carl BRISON
Une formation
Déplacement de la grille
selon l'axe vertical

25. Carl BRISON
Une formation
Déplacement de tous
les contenus

26. Carl BRISON
Une formation
Déplacement
d'un contenu particulier

27. Carl BRISON
Une formation
Inverser l'ordre des affichages

28. Carl BRISON
Une formation
Création d'une colonne virtuelle

29. Carl BRISON
Une formation
Création d'une ligne virtuelle

30. Carl BRISON
Une formation
Création d'une mise en page web

31. Carl BRISON
Une formation
Mise en place des zones

32. Carl BRISON
Une formation
Gestion de la hauteur
des contenus

33. Carl BRISON
Une formation
Ordonner l'affichage
des contenus

34. Carl BRISON
Une formation
Mobile ou desktop first

35. Carl BRISON
Une formation
Définir un point de rupture

36. Carl BRISON
Une formation
Exercice 1 :
Mise en place du HTML

37. Carl BRISON
Une formation
Exercice 1 :
Mise en place de la structure mobile

38. Carl BRISON
Une formation
Exercice 1 :
Mise en place de la structure desktop

39. Carl BRISON
Une formation
Exercice 2 :
Mise en place du HTML

40. Carl BRISON
Une formation
Exercice 2 :
Mise en place de la structure mobile

41. Carl BRISON
Une formation
Exercice 2 :
Mise en place de la structure desktop

42. Carl BRISON
Une formation
Exercice 3 :
Mise en place du HTML

43. Carl BRISON
Une formation
Exercice 3 :
Mise en place de la structure mobile

44. Carl BRISON
Une formation
Exercice 3 :
Mise en place de la structure tablette

45. Carl BRISON
Une formation
Exercice 3 :
Mise en place de la structure desktop

46. Carl BRISON
Une formation
Exercice 3 :
Développement de la zone section

47. Carl BRISON
Une formation
Exercice 4 :
Mise en place du HTML

48. Carl BRISON
Une formation
Exercice 4 :
Mise en place de la structure desktop

49. Carl BRISON
Une formation
Exercice 4 :
Mise en place de la structure mobile

50. Carl BRISON
Une formation
Exercice 5 :
Mise en place du HTML

51. Carl BRISON
Une formation
Exercice 5 :
Mise en place de la structure desktop

52. Carl BRISON
Une formation
Exercice 5 :
Mise en place de la structure tablette

53. Carl BRISON
Une formation
Exercice 5 :
Mise en place de la structure mobile

54. Carl BRISON
Une formation
Exercice 6 :
Mise en place du HTML

55. Carl BRISON
Une formation
Exercice 6 :
Desktop first, structure desktop

56. Carl BRISON
Une formation
Exercice 6 :
Desktop first, structure tablette et mobile

57. Carl BRISON
Une formation
Exercice 6 :
Mobile first, structure mobile

58. Carl BRISON
Une formation
Exercice 6 :
Mobile first, structure tablette et desktop

59. Une formation
Carl BRISON
Conclusion
CSS GRID
Maîtriser le Responsive

60. Une formation
Manipulation du conteneur et des contenus
Alignement des contenus
Editions de lignes et de colonnes
Définition de zones CSS
Manipulation du desktop et mobile first
Manipulation des medias queries
Bilan

61. Cursus Développeur Front : HTML & CSS