Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS & SMACSS
0 j'aime253 vues
La formation de Sandy Ludosky enseigne les bonnes pratiques CSS en utilisant les méthodologies BEM, OOCSS et SMACSS. Le cursus couvre l'histoire du CSS, ainsi que des techniques pour organiser le code de manière modulaire et réutilisable. Destinée à un public intermédiaire à avancé, la formation inclut des travaux pratiques et des projets axés sur la création d'une architecture CSS efficace.
Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS & SMACSS
- 1. Formation Apprendre les bonnes pratiques de CSS avec BEM, OOCSS & SMACSS Une formation Sandy LUDOSKY
- 2. Cursus CSS
- 3. Une formation Plan de la formation Introduction 1. Histoire du CSS : des origines au CSS moderne 2. La méthodologie BEM 3. Organiser le CSS avec BEM 4. L’approche architecturale avec SMACSS 5. Architecture CSS modulaire et scalable avec SMACSS 6. Créer des objets de style avec OOCSS 7. Utilitaires CSS avec OOCSS, Bootstrap 5 et Sass Conclusion
- 4. Une formation Niveau intermédiaire à avancé Développeurs professionnels Intégrateurs web Public concerné
- 8. Présentation des projets de la formation Une formation Sandy LUDOSKY
- 9. Une formation Projets Démos, travaux pratiques & projets 1. Organiser le CSS avec BEM 2. Créer une architecture CSS avec SMACSS 3. Créer des utilitaires CSS avec OOCSS, Bootstrap 5 et Sass
- 10. Une formation Présentation des outils Visual Studio Code Node / Npm /Git Navigateur moderne
- 11. Ressources et outils Une formation Sandy LUDOSKY
- 13. Node.js & npm
- 14. Git
- 15. Une formation Les fichiers téléchargeables 📁 Version de démarrage Version finale Ressources
- 16. Découvrir l’anatomie d’un projet web Une formation Sandy LUDOSKY
- 17. Anatomie d’un projet web source : Open source vecteur créé par pch.vector - fr.freepik.com (tiny developpers)
- 18. source : Codeur vecteur créé par upklyak - fr.freepik.com Anatomie d’un projet web
- 19. source : Agence photo créé par rawpixel.com - fr.freepik.com Anatomie d’un projet web
- 20. Photo by Ярослав Алексеенко on Unsplash Photo by Brett Jordan on Unsplash Anatomie d’un projet web
- 21. Connaitre l’histoire du CSS Une formation Sandy LUDOSKY
- 22. Une formation Histoire du CSS CSS = Cascading Stylesheet 1994 : débuts CSS 1996 : premières spécifications CSS1
- 23. Une formation CSS 1.0 => CSS 2.0 => CSS 2.1 CSS 3 Histoire du CSS
- 24. Mise en forme et habillage page web Métiers du web et numérique Photo by Campaign Creators on Unsplash Histoire du CSS
- 25. Photo by UX Indonesia on Unsplash Histoire du CSS
- 26. Photo by Alex Kotliarskyi on Unsplash Histoire du CSS
- 27. Photo by Ярослав Алексеенко on Unsplash Photo by Brett Jordan on Unsplash Histoire du CSS
- 28. Librement inspiré par Jonathan Snoovvk =) Histoire du CSS
- 29. Apercevoir les différents styles de CSS Une formation Sandy LUDOSKY
- 30. Une formation Les styles de CSS CSS = Cascading Stylesheet 1994 : débuts CSS 1996 : premières spécifications CSS1
- 31. Une formation Les langages préprocesseurs
- 32. Une formation La grille CSS & Flexbox Modèle de disposition en grille Les styles de CSS
- 33. Une formation Les solutions CSS moderne Librairie HTML & CSS front open-source Librairies : Bootstrap 5, Material UI … Librairies : ReactJS, NextJS ⚛
- 34. Découvrir les méthodologies CSS Une formation Sandy LUDOSKY
- 35. Une formation SOOCS SUITCSS Atomique SMACSS BEM OOCSS Les standards et solutions
- 36. Découvrir la convention BEM et ses composantes Une formation Sandy LUDOSKY
- 41. Une formation Blocs Eléments Modifiers .menu menu__item--is-active La convention BEM
- 42. Une formation Blocs Eléments Modifiers .menu menu__item--is-open Décovrir la convention BEM La convention BEM
- 43. Savoir l'utilité de BEM Une formation Sandy LUDOSKY
- 44. Une formation CSS organisé et structuré CSS modulaire => plus lisible CSS réutilisable => scalable et maintenable Pourquoi BEM ?
- 45. Maitriser la syntaxe et les règles de nommages strictes Une formation Sandy LUDOSKY
- 46. Une formation BEM Bloc Element Modifier Syntaxe et règles de nommage
- 47. Une formation Bloc .menu Syntaxe et règles de nommage
- 48. Une formation Bloc Element .menu menu__item Syntaxe et règles de nommage
- 49. Une formation Bloc Element Modifier .menu menu__item .menu menu__item--is-active Syntaxe et règles de nommage
- 50. Voir en image un exemple BEM Une formation Sandy LUDOSKY
- 51. Une formation Bloc Element Modifier .menu menu__item .menu menu__item--is-active Exemple BEM en images
- 53. Home About Contact .menu .menu__item .menu__item .menu__item
- 54. Home About Contact .menu .menu__item–is-active .menu__item .menu__item
- 55. Télécharger et découvrir le projet de démarrage Une formation Sandy LUDOSKY
- 56. Une formation Télécharger projet démarrage npm install Créer une organisation CSS avec BEM
- 57. Créer une organisation CSS avec BEM Une formation Sandy LUDOSKY
- 58. Une formation Définir les blocs Mettre en forme les éléments Personnaliser les états des éléments Créer une organisation CSS avec BEM
- 60. Mettre en forme le menu de navigation Une formation Sandy LUDOSKY
- 61. Mettre en forme le header L'entête de page Une formation Sandy LUDOSKY
- 62. Mettre en forme la section main Une formation Sandy LUDOSKY
- 63. Mettre en forme la sidebar Une formation Sandy LUDOSKY
- 64. Mettre en forme le footer Le pied de page Une formation Sandy LUDOSKY
- 65. Introduction à SMACSS Une formation Sandy LUDOSKY
- 66. Scalable and Modular Architecture for CSS guide : ensemble de règles organisation : 5 catégories ebook : 112 pages auteur : Jonathan Snook
- 67. Une formation Architecture CSS modulaire et scalable Code plus propre et plus lisible Meilleure maintenabilité Principes et bénéfices
- 68. Structurer un projet en cinq catégories avec SMACSS Une formation Sandy LUDOSKY
- 69. Une formation Les 5 catégories d’un projet SMACSS 1. Base 2. Layout (mise en page) 3. Module 4. State 5. Theme
- 70. Suivre le guide Ebook Une formation Sandy LUDOSKY
- 71. Les 5 catégories d’un projet SMACSS http://smacss.com/book/ auteur : Jonathan Snook
- 72. Une formation Les 5 catégories d’un projet SMACSS Objectifs projet : organiser CSS 1. base 2. layout 3. module 4. state 5. theme
- 73. Télécharger le projet de démarrage et découvrir les objectifs du projet Une formation Sandy LUDOSKY
- 74. Une formation Télécharger projet démarrage npm install Télécharger le projet
- 75. Une formation Objectifs : architecture CSS en 5 catégories 1. base 2. layout 3. module 4. state 5. theme Les objectifs du projet
- 76. Définir un style de base avec des valeurs par défaut Une formation Sandy LUDOSKY
- 77. Une formation Télécharger projet démarrage npm install Le projet de démarrage
- 78. Une formation Objectifs : architecture CSS en 5 catégories 1. base 2. layout 3. module 4. state 5. theme Les objectifs du projet
- 79. Définir du style de base avec des valeurs par défaut source : http://smacss.com/book/type-base
- 80. Diviser la mise en page en sections Bloc nav Une formation Sandy LUDOSKY
- 81. Une formation Télécharger projet démarrage npm install Le projet de démarrage
- 82. Une formation Objectifs : architecture CSS en 5 catégories 1. base 2. layout 3. module 4. state 5. theme Les objectifs du projet
- 83. Diviser la mise en page en sections source : http://smacss.com/book/type-layout
- 84. Diviser la mise en page en sections Bloc header Une formation Sandy LUDOSKY
- 85. Diviser la mise en page en sections Bloc main et aside Une formation Sandy LUDOSKY
- 86. Diviser la mise en page en sections Bloc footer Une formation Sandy LUDOSKY
- 87. Créer des modules de styles réutilisables Une formation Sandy LUDOSKY
- 88. Une formation Télécharger projet démarrage npm install Le projet de démarrage
- 89. Une formation Objectifs : architecture CSS en 5 catégories 1. base 2. layout 3. module 4. state 5. theme Les objectifs du projet
- 90. Créer des modules de styles réutilisables source : http://smacss.com/book/type-module
- 91. Personnaliser et varier les styles avec l'état Une formation Sandy LUDOSKY
- 92. Une formation Télécharger projet démarrage npm install Le projet de démarrage
- 93. Une formation Objectifs : architecture CSS en 5 catégories 1. base 2. layout 3. module 4. state 5. theme Les objectifs du projet
- 94. Personnaliser et varier les styles avec l'état source : http://smacss.com/book/type-state
- 95. Créer plusieurs options d’affichage Une formation Sandy LUDOSKY
- 96. Une formation Télécharger projet démarrage npm install Le projet de démarrage
- 97. Une formation Objectifs : architecture CSS en 5 catégories 1. base 2. layout 3. module 4. state 5. theme Les objectifs du projet
- 98. Créer plusieurs options d'affichage source : http://smacss.com/book/type-theme
- 99. Créer des objets de style réutilisables avec l'approche OOCSS Une formation Sandy LUDOSKY
- 100. Une formation CSSOO = CSS orienté objet auteur : Nicole Sullivan Créer des objets de style réutilisables avec l'approche OOCSS
- 101. Expliquer le concept les caractéristiques et bénéfices Une formation Sandy LUDOSKY
- 102. Une formation déstructuré atomique sémantique visuelle Séparation CSS de HTML (DOM)
- 103. Une formation réutilisables modulaires combinables Créer des objets de styles
- 104. Une formation scalable maintenable Créer une collection d’utilitaires
- 105. Une formation Bootstrap 5 (utilitaires) Material UI Foundation 6 Exemples
- 106. Expliquer le concept usage et exemple Une formation Sandy LUDOSKY
- 110. Une formation Usage et exemple <h2 class="bg-1 clr-3 mr-10">
- 111. Télécharger le projet de démarrage et découvrir les objectifs du projet Une formation Sandy LUDOSKY
- 112. Une formation Télécharger le projet de démarrage npm install
- 113. Une formation http://oocss.org/ 1. mettre en page avec un template 2. définir un système de grille 3. créer des utilitaires (mise en forme, couleur ….) Objectifs : créer des objets de styles
- 114. Utiliser un modèle de mise en page Une formation Sandy LUDOSKY
- 115. Une formation http://oocss.org/ 1. mettre en page avec un template 2. définir un système de grille 3. créer des utilitaires (mise en forme, couleur ….) Objectifs : créer des objets de styles
- 116. Créer un conteneur Exercice Une formation Sandy LUDOSKY
- 117. Mettre en forme avec un système de grille Une formation Sandy LUDOSKY
- 118. Une formation http://oocss.org/ 1. mettre en page avec un template 2. définir un système de grille 3. créer des utilitaires (mise en forme, couleur ….) Objectifs : créer des objets de styles
- 119. Personnaliser avec des classes utilitaires Une formation Sandy LUDOSKY
- 120. Une formation http://oocss.org/ 1. mettre en page avec un template 2. définir un système de grille 3. créer des utilitaires (mise en forme, couleur ….) Objectifs : créer des objets de styles
- 121. Personnaliser avec des classes utilitaires Bootstrap 5 Une formation Sandy LUDOSKY
- 123. Une formation Bilan Avantages des méthodologies CSS architecture ordonnée maintenable scalable