Forum | tutorial pengembangan web terbaru
 

Material Design Lite tutorial


Desain Material Lite, MDL adalah perpustakaan komponen UI yang dibuat dengan CSS, JavaScript, dan HTML. komponen MDL UI membantu dalam membangun halaman web yang menarik, konsisten, dan fungsional dan aplikasi web saat mengikuti prinsip-prinsip desain web modern seperti portabilitas peramban, perangkat kemerdekaan, dan degradasi anggun. Ini membantu dalam menciptakan lebih cepat, indah, dan responsif website. Hal ini terinspirasi dari desain Bahan Google.


Hadirin

Tutorial ini dimaksudkan untuk para profesional yang ingin mempelajari dasar-dasar Desain Material Lite dan bagaimana menggunakannya untuk membuat lebih cepat, indah, dan website responsif. Tutorial ini menjelaskan semua konsep dasar Desain Material Lite.


Prasyarat

Sebelum melanjutkan dengan tutorial ini, Anda harus memiliki pemahaman dasar tentang HTML, CSS, JavaScript, Document Object Model (DOM), dan editor teks. Selain itu, akan membantu jika Anda tahu bagaimana aplikasi berbasis web bekerja.


Mengeksekusi Material Desain Lite online

Untuk sebagian besar dari contoh yang diberikan dalam tutorial ini, Anda akan menemukan pilihan Try-itu. Gunakan opsi ini untuk menjalankan program Desain Material Lite Anda di tempat dan menikmati belajar Anda.

Coba contoh berikut menggunakan pilihan Try-hal yang tersedia di pojok kanan atas kotak kode contoh berikut -

<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>