CATALOGUE Code & Data Formation XHTML/CSS Maîtriser Materialize CSS - Le framework pour le Material Design

Intervertir des colonnes avec Materialize CSS

Retour à la formation
Chapitre 1 Leçon 5
Précédent
Suivant

Découvrez comment intervertir les colonnes en fonction de la taille de l'écran avec Materialize CSS.

Détails de la leçon

Description de la leçon

Cette leçon traite de la manière d'utiliser Materialize CSS pour intervertir des colonnes en fonction de la taille de l'écran. La méthode décrite repose sur l'utilisation des classes Push et Pull pour réorganiser les éléments HTML, notamment les logos et les liens vers les réseaux sociaux. La vidéo fournit des exemples pratiques et une explication détaillée des concepts. Avec l'augmentation constante de l'utilisation des appareils mobiles, il est crucial de rendre les sites web aussi responsive que possible. Vous apprendrez à adapter votre code HTML pour qu'il soit d'abord optimisé pour les mobiles avant d'utiliser les classes Push-Pull pour les grands écrans.

Objectifs de cette leçon

Les objectifs de cette vidéo sont les suivants :

  • Comprendre l'importance du responsive design.
  • Apprendre à utiliser les classes Push et Pull de Materialize CSS.
  • Acquérir des compétences pour améliorer l'affichage des sites sur différentes tailles d'écran.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :

  • Des connaissances de base en HTML et CSS.
  • Une compréhension des principes de Materialize CSS est un plus.

Métiers concernés

Les concepts et techniques abordés dans cette vidéo sont particulièrement utiles pour :

  • Les développeurs front-end
  • Les web designers
  • Les UI/UX designers

Alternatives et ressources

En plus de Materialize CSS, d'autres frameworks comme Bootstrap et Foundation peuvent être utilisés pour gérer les colonnes et améliorer le responsive design.

Questions & Réponses

On utilise la classe push-m4 pour déplacer une colonne de 4 éléments vers la droite.
Il est conseillé de placer dans le HTML les éléments dans l'ordre où ils doivent apparaître sur un écran mobile, puis d'utiliser les classes push-pull pour réorganiser pour les grands écrans.
Le responsive design permet d'assurer que les sites web sont accessibles et bien présentés sur différents appareils, améliorant ainsi l'expérience utilisateur.