Dans cette formation en ligne et en vidéo vous allez apprendre à utiliser le Framework CSS "Materialize CSS", qui vous permet de développer des sites en Material Design.
Le Material Design est un ensemble de règles créées par les ingénieurs de Google autour du Design de leurs applications. Une attention particulière a été porté aux formes, couleurs, boutons, texte et animations, afin de créer un Design attrayant, fonctionnel et ergonomique. Utiliser Material Design est la garantie d'offrir une bonne expérience utilisateur (UX) aux internautes qui vont visiter votre site.
Afin de rendre ce cours pédagogique et de vous faire apprendre le plus rapidement possible, j'ai créé une série de "Bac à Sable" que vous allez pouvoir télécharger gratuitement(évidemment). Ces terrains d’entraînements sont là pour vous faire suivre le cours avec moi, et pouvoir directement tester toutes les propriétés et concepts de Materialize afin d'apprendre au plus vite et dans les meilleures conditions.
Enfin, on finira cette formation par la création d'un site avec Materialize.
Je n'ai pas mis de licence particulière à ce site et vous pourrez donc l'utiliser comme bon vous semble en plus de l'entrainement qu'il vous aura procuré lors de sa construction au cours de la dernière section.
Maintenant penchons nous un peu plus sur Materialize CSS.
Comme tous les Frameworks CSS il repose sur trois piliers :
- Un système de classes
Nous allons voir ensemble que l'on peut ajouter toutes sortes de propriétés CSS liées au positionnement, aux couleurs, aux formes, avec des classes dans notre HTML. Cela rend les fichiers CSS beaucoup moins volumineux, donc des sites plus rapides. Et cela vous permet de coder plus rapidement, car une classe équivaut souvent à plusieurs propriétés CSS réunies. - Le système de Grille,
Un système de rangé composé de 12 colonnes permet de positionner facilement ses éléments. Ce système permet également de rendre des sites très facilement "responsives", c'est à dire qu'il vont s'adapter à tous les écrans, ce qui est crucial en 2019, notamment pour le référencement de vos sites. - Les Widgets JavaScript,
Les Widgets sont des gadjets et des animations très utiles pour améliorer l'expérience utilisateur et pour démarquer votre site des autres. Materialize en propose de très sympathiques.
Quels sont les avantages d'utiliser Materialize CSS ?
- Ne pas utiliser Bootstrap : trop de sites se ressemblent à force d'utiliser ce Framework à outrance.
- Les règles de Material Design vous apporteront de la nouveauté au niveau des couleurs, des composants, des animations et j'en passe.
Ce Framework est très agréable. - Comme tout Framework CSS, il peut vous faire gagner beaucoup de temps, vous servir pour créer des Templates, ou être utilisé avec des Frameworks JS tels que React, Angular, afin de construire des interfaces rapidement.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Bon tuto !
Table des matières de cette formation Materialize CSS (durée : 3h44m)
-
Introduction
- Introduction gratuit 00:03:08
- Éditeur de texte et extensions gratuit 00:02:51
- Installation et déroulement de la formation 00:04:15
-
Materialize : Partie CSS
- Bac à sable CSS gratuit 00:03:37
- Couleurs 00:04:57
- Le système de Grille 00:11:05
- Alignement 00:03:07
- Les médias 00:03:11
- Les effets 00:05:37
- Les Tableaux 00:02:36
-
Materialize : Les Composants
- Les boutons gratuit 00:03:55
- Les Icônes 00:02:24
- Les Floating boutons 00:09:19
- Les cartes partie 1 00:06:54
- Les Cartes partie 2 00:10:02
- Les collections 00:02:53
- Barre de navigation 00:10:33
- Preloader 00:03:34
- Footer et pagination 00:07:53
-
Materialize : JavaScript
- Carousel gratuit 00:07:37
- Effet Accordéon 00:04:49
- Bouton Dropdown 00:03:15
- Effet Discovery 00:07:15
- Fenetres modales 00:06:12
- Effet parallax 00:02:39
- ScrollSpy 00:02:48
- Toast et tooltips 00:05:24
- Effet vagues 00:02:02
-
Materialize : Les formulaires
- Les formulaires "autocomplete" 00:04:15
- Range, boxes et boutons Radios 00:07:05
- Switch et Select 00:03:44
- Les Inputs 00:06:15
-
Le Projet
- Vue d'ensemble 00:02:10
- Mise en place du dossier et des CDN 00:04:33
- Création de la navigation 00:04:35
- Création du Header 00:05:36
- Section Photos 00:05:59
- Section Parallax 00:01:57
- Section Services 00:09:05
- Section fil de lecture partie 1 00:05:26
- Section fil de lecture partie 2 00:04:46
- Contact et footer 00:08:38
- Les médias quéries 00:06:03
- Conclusion 00:00:47
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Excellent tuto sur materialize , j'adore le rendu final du site en plus on peut le modifier selon notre envie en suivant le cours de A a Z . Merci Enzo pour ton enseignement . je continue de suite sur un autre cours de Enzo ;) .
-
Je n'en suis qu'à la moitié du tuto mais très bon comme tous les autres publiés par Enzo. En plus de cela Enzo est très réactif sur les questions et apporte toujours la bonne réponse. Materialize futur successeur de Bootstrap ? Peut être lorsque Materialize aura plus de maturité.... Voir très probablement d'où l'intérêt d'apprendre au plus vite... Et comme les tutos le concernant sont assez rares autant profiter de cette excellente formation...
-
Tutoriel clair et complet.
-
Avec quelle version de logiciel ce tuto est-il compatible ?Materialize CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés