Détails de la leçon
Description de la leçon
Nous allons commencer cette formation sur Materialize CSS en abordant le système de grilles qu'utilise le framework. En effet, à l'instar de tous les frameworks CSS du marché, Materialize implémente une grille de 12 cases, c'est-à-dire que la surface de notre page web est divisée en 12 éléments égaux. L'utilisation de cette grille garantit la responsivité de notre site internet et permet d'organiser le contenu selon nos besoins.
Nous illustrons ce principe par un exemple pratique où nous créons 12 div
numérotées de 1 à 12, puis appliquons des styles CSS pour mieux visualiser ces divisions. Nous explorons également la notion de conteneur pour la centration du contenu, et les lignes (row
) pour structurer les éléments les uns au-dessous des autres. Enfin, les tailles d'écran (S, M, L) sont décrites pour adapter notre mise en page aux différents périphériques.
Objectifs de cette leçon
Les objectifs de cette vidéo sont :
- Comprendre le fonctionnement du système de grilles de Materialize CSS
- Apprendre à créer des mises en page responsives
- Maîtriser l'usage des classes Container, Row, et Col
- Savoir adapter la mise en page aux différentes tailles d'écran.
Prérequis pour cette leçon
Pour suivre cette vidéo, il est nécessaire d'avoir :
- Des connaissances de base en HTML et CSS
- Une compréhension des concepts de responsive design
Métiers concernés
Les compétences abordées dans cette vidéo sont particulièrement utiles pour les :
- Développeurs Front-End
- Web Designers
- Intégrateurs Web
Alternatives et ressources
En plus de Materialize CSS, d'autres frameworks tels que Bootstrap, Foundation ou Bulma offrent également des solutions pour créer des grilles et des mises en page responsives.