Quick answer: This Materialize CSS tutorial takes you from an empty folder to a working, responsive, component-styled page in one afternoon — no build tools, no npm, no framework. You will set up Materialize 1.0.0, learn the 12-column grid, use the eight components that cover 90% of real projects, and finish with a complete starter page you can copy. Every step has copy-paste code, and the full component library deep-dives live in the rest of this series.
Why learn Materialize CSS in 2026?
Materialize is the CSS framework that implements Google’s Material Design with plain HTML, CSS and JavaScript — no React required. In 2026 it remains the fastest way for students and jQuery-era developers to ship a professional-looking site: include two CDN files, add class names, done. Teams on Angular get the same design language through Angular Material, and the skills transfer directly. If you are choosing between frameworks, our honest comparison of Materialize vs Bootstrap covers when each wins; this tutorial is for when you have chosen Materialize.
Step 1 — Setup in 60 seconds (CDN method)
Create index.html and paste this complete skeleton. It is the only setup Materialize needs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Materialize Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- your content goes here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>Two rules that save beginners hours: the CSS link goes in <head>, and the JS script goes at the end of <body>. Materialize 1.0.0 is the current stable version — any tutorial telling you to call $(".button-collapse").sideNav() is jQuery-era (0.97.x) and will not work. In 1.0.0, all components initialize through the M object: M.AutoInit().
Step 2 — The 12-column grid (the concept that matters most)
Every layout question in Materialize is a grid question. The page is 12 columns wide; you wrap content in <div class="row">, and each piece of content declares how many columns it takes. Responsive prefixes change the count per device size:
| Prefix | Applies at | Typical use |
|---|---|---|
s | ≥ 0px (all sizes) | Mobile default — always set this one |
m | ≥ 600px | Tablets |
l | ≥ 992px | Laptops and desktops |
xl | ≥ 1200px | Large desktops |
The pattern every layout uses:
<div class="row">
<div class="col s12 m6 l3">Full width on mobile, half on tablet, quarter on desktop</div>
<div class="col s12 m6 l3">Second card</div>
<div class="col s12 m6 l3">Third card</div>
<div class="col s12 m6 l3">Fourth card</div>
</div>Read it aloud: “s12 m6 l3” means twelve columns (full width) on small screens, six on medium, three on large — four across on desktop, stacked on a phone. Our grid system guide with copy-paste examples goes deeper, including offsets, pull/push and nesting.
Step 3 — The eight components that cover 90% of projects
| Component | One-line recipe | Deep dive in this series |
|---|---|---|
| Navbar | nav > div.nav-wrapper with brand left/right | Navbar in Materialize CSS |
| Sidenav | ul.sidenav + trigger with data-target | Sidenav on the right |
| Cards | div.card > div.card-content | Card animations |
| Buttons | btn + color + waves-effect | Raised button customization |
| Forms | input-field wrappers give floating labels | Login and register forms |
| Dropdown | ul.dropdown-content + trigger button | Nested dropdowns |
| Slider | div.slider with full-width class | Full-width autoplay slider |
| Toast | M.toast({html: 'Saved!'}) | Covered below — one line, no markup |
Initialize all of them with one call placed after the script tag:
<script>
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
});
</script>Step 4 — Colors, shadows and spacing (the polish layer)
- Colors:
class="blue"orclass="blue darken-2"— Materialize ships every Material color in shades 1–4 plus lighten/darken variants. Working with colors shows the full palette system. - Shadows:
z-depth-1throughz-depth-5. Cards getz-depth-1by default; hover-lift usesz-depth-2. - Spacing: Materialize has no spacing utilities — use small custom CSS or the
sectionandcontainerclasses for page rhythm. - Typography: wrap page content in
<div class="container">for centered, responsive margins — the single most forgotten class by beginners.
Step 5 — Your first complete page (copy-paste starter)
Put it all together. This starter has a navbar, sidenav, hero, card grid and footer, and it works as-is:
<nav>
<div class="nav-wrapper blue darken-2">
<a href="#" class="brand-logo">My Site</a>
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="container">
<div class="section">
<h4>Welcome</h4>
<p>Built with Materialize CSS 1.0.0 in one afternoon.</p>
</div>
<div class="row">
<div class="col s12 m6 l4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card One</span>
<p>Responsive by default thanks to the grid.</p>
</div>
</div>
</div>
<div class="col s12 m6 l4"><div class="card"><div class="card-content"><span class="card-title">Card Two</span></div></div></div>
<div class="col s12 m6 l4"><div class="card"><div class="card-content"><span class="card-title">Card Three</span></div></div></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() { M.AutoInit(); });
</script>Save, open in a browser, resize the window — the cards stack on mobile, sit three-across on desktop, and the hamburger menu appears under 992px. That behavior is the framework working, not your CSS.
Where to go next in this series
Work through the deep-dives in this order: the grid system (layouts), navbar and sidenav (navigation), cards and buttons (content), then forms (input), and responsive tables for data-heavy pages. Each is a 5-minute read with copy-paste code.
If you would rather learn this with an instructor reviewing your code live, Ampersand Academy teaches Materialize CSS and front-end development one-to-one, building real pages instead of toy examples.
Frequently asked questions
Is Materialize CSS still used in 2026?
Yes. While newer utility frameworks dominate headlines, Materialize remains widely deployed, is the design system behind Angular Material, and is still the fastest no-build-tool path to a Material Design site. For students and maintenance work it is a practical, in-demand skill.
How long does it take to learn Materialize CSS?
One afternoon for the core: grid, the eight main components and initialization. Productive fluency, including forms, modals and responsive debugging, takes about a week of practice.
Do I need JavaScript to use Materialize?
For pure CSS styling like grids, colors, cards and buttons, no. Interactive components such as sidenav, dropdowns, modals and sliders need the Materialize JavaScript file and M.AutoInit() initialization.
What is the difference between Materialize and Bootstrap?
Materialize implements Google’s Material Design with elevation shadows and ripple effects; Bootstrap is a neutral, utility-oriented framework. Materialize wins for Material Design products; Bootstrap wins for maximum third-party templates.
Which version of Materialize should I use?
Version 1.0.0 is the current stable release. Avoid jQuery-era tutorials written for 0.97.x — their initialization code like $(‘.button-collapse’).sideNav() fails on 1.0.0, which uses M.AutoInit().