Mewujudkan Tutorial

Materialize adalah pustaka komponen UI yang dibuat dengan CSS, JavaScript, dan HTML. Komponen materialize UI membantu dalam membangun halaman web dan aplikasi web yang menarik, konsisten, dan fungsional, sambil mengikuti prinsip desain web modern seperti portabilitas browser, kemandirian perangkat, dan degradasi yang anggun. Ini membantu dalam membuat situs web yang lebih cepat, indah, dan responsif. Ini terinspirasi dari Desain Material Google.

Tutorial ini ditujukan untuk para profesional yang ingin mempelajari dasar-dasar Materialize dan cara menggunakannya untuk membuat halaman web dan aplikasi yang lebih cepat, indah, dan responsif. Tutorial ini menjelaskan semua konsep dasar dari Materialize.

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

Untuk sebagian besar contoh yang diberikan dalam tutorial ini, Anda akan menemukan file Try-itpilihan. Gunakan opsi ini untuk menjalankan program Materialize Anda di tempat dan nikmati pembelajaran Anda. Coba contoh berikut menggunakanTry-it pilihan yang tersedia di sudut 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>