Forum | tutorial pengembangan web terbaru
 

Materialize tutorial



Terwujud adalah perpustakaan komponen UI yang dibuat dengan CSS, JavaScript, dan HTML. Terwujud komponen 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 terwujud online

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

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

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">      
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>             
  </head>
  <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>