Forum | Latest web development tutorials
 

Materialize Tutorial



Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.


Audience

This tutorial is meant for professionals who would like to learn the basics of Material Design Lite and how to use it to create faster, beautiful, and responsive websites. This tutorial explains all the fundamental concepts of Material Design Lite.


Prerequisites

Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Document Object Model (DOM), and any text editor. In addition, it will help if you know how web-based applications work.


Execute Materialize Online

For most of the examples given in this tutorial, you will find a Try-it option. Use this option to execute your Materialize 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 -

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