Material Design Lite Tutorial
This tutorial is designed for professionals who aspire to learn the basics of Material Design Lite and how to use it to create faster, beautiful, and responsive websites. The tutorial explains all the fundamental concepts of Material Design Lite.
Execute Material Design Lite Online
For most of the examples given in this tutorial, you will find a Try-it option. Use this option to execute your Material Design Lite programs on the spot and enjoy your learning.
Try the following example using the Try-it option available at the top right corner of the following sample code box -
<html> <head> <title>The Material Design Lite Example</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer"> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">Material Design</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">Features</a> <a class = "mdl-navigation__link" href = "">About Us</a> <a class = "mdl-navigation__link" href = "">Log Out</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "page-content" style = "padding-left:100px;">Hello World!</div> </main> </div> </body> </html>