Gerçekleştirici Eğitim

Materialize, CSS, JavaScript ve HTML ile oluşturulan bir UI bileşen kütüphanesidir. Kullanıcı arayüzü bileşenleri, tarayıcı taşınabilirliği, cihaz bağımsızlığı ve zarif bozulma gibi modern web tasarım ilkelerine bağlı kalırken, çekici, tutarlı ve işlevsel web sayfaları ve web uygulamaları oluşturmaya yardımcı olur. Daha hızlı, güzel ve duyarlı web siteleri oluşturmanıza yardımcı olur. Google Materyal Tasarımı'ndan esinlenmiştir.

seyirci

Bu eğitici, Materialize'nin temellerini ve daha hızlı, güzel ve duyarlı web sayfaları ve uygulamaları oluşturmak için nasıl kullanılacağını öğrenmek isteyen profesyoneller içindir. Bu eğitimde Materialize'in tüm temel kavramları açıklanmaktadır.

Ön şartlar

Bu eğiticiye devam etmeden önce HTML, CSS, JavaScript, Belge Nesne Modeli (DOM) ve herhangi bir metin düzenleyici hakkında temel bilgiye sahip olmalısınız. Ayrıca, web tabanlı uygulamaların nasıl çalıştığını biliyorsanız yardımcı olacaktır.

Çevrimiçi Gerçekleştir

Bu öğreticide verilen örneklerin çoğu için bir Dene seçeneği bulacaksınız. Materyalizasyon programlarınızı yerinde yürütmek ve öğrenmenizin tadını çıkarmak için bu seçeneği kullanın. Aşağıdaki örnek kod kutusunun sağ üst köşesinde bulunan Dene seçeneğini kullanarak aşağıdaki örneği deneyin .

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