FREELessons: 8Length: 45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 What Is Materialize?

In this first lesson I will explain the basics of the Materialize framework and show you where you can go for more information.

Useful Links

2.1 What Is Materialize?

Hello, and welcome back. In this lesson, I wanna give you a high level overview of what Materialize is. If you've ever used Bootstrap before, Materialize is very similar to the Bootstrap framework. It's basically a front-end CSS and JavaScript framework that helps you to get your website up and running a little more quickly. It gives you some sensible default styles for things like text, and buttons, and form elements, and things like that. It even gives you some really nice JavaScript components, some of which contain animation. And you can find a lot more about the Materialize framework if you go to And I want you to get really familiar with this website because this is a short course, so we don't have time to cover all of the ins and outs of this framework. There are going to be a lot of really cool features that Materialize offers that we're just not going to have time to cover. But I do wanna cover at least most of the features that you will be using on a semi regular basis if you choose to use the Materialize framework. So on the website, here on, there's an About link, a Getting Started link, and then under that we have a series of links that basically take us to the documentation for Materialize. So you can go to CSS and it will expand out. And you can see a list of topics that you can look through to find more information. For example, if we click on Color here, we can see a whole list of classes that we can use to change the color of a certain element. So, for example, if we use the red class on one of our elements, it will give that element a red background with black text. If you use the red class with the darken-1 class, it will give it a little bit of a darker shade of red for the background. And so you have these basic colors like red, pink, and purple, and then you have these lighten-1, lighten-2, darken-1, darken-2, these other classes that will brighten it up or darken it up depending on what you're looking for. So I want you to get familiar with all of the pages on this website, since we don't have time to cover all of the features. But again, this is where you'll go for most of your information, and we're going to be using for all of our code in this short course. Which means that we don't have to install Materialize locally, we can point to the CDN through CodePen. But if you do want to install this locally or to install this on your own website, you can go to the Getting Started link here. And here you can find the link to download Materialize. You can find a link for the Sass files if you're using Sass, and just below that are the CDN links. Now, on CodePen, it does provide you a quick-add, and we'll look at this in the next lesson, but it does give you a quick-add for the Materialize CSS files. But it does not give you a quick-add for the JavaScript files, and I'm not sure why that is, maybe they'll add it someday in the near future. But you can find a link for both the CSS and the JavaScript files here on this Getting Started page. And so those are the links that we're going to be using as we move forward. So again, I want to encourage you to get familiar with this website, because we're going to be going through a lot of this information very quickly. And this is where you can go for a deeper dive into what Materialize offers. So thank you for watching, and we'll get started in the next lesson.

Back to the top