What Is Materialize & Why Use It?

Brad Traversy
A free video tutorial from Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
4.7 instructor rating • 13 courses • 231,790 students

Learn more from the full course

Materialize CSS From Scratch With 5 Projects

Master HTML 5 & the Materialize CSS framework by building 5 real world responsive material design based themes

10:25:31 of on-demand video • Updated February 2018

  • Learn to correctly structure HTML 5 documents with semantic tags and attributes
  • Learn and create amazing high quality Materialize themes and UIs from scratch
  • Learn the Materialize utilities, classes, components & JS widgets using a custom sandbox environment
  • Learn some custom JavaScript/JQuery to make your themes more interactive
English [Auto] Hey guys this video we're going to talk about what materialize CSSA is and why you'd want to learn and use it. So materializes a modern UI framework or a front end framework that's strongly based on Google's material design concept which I'll talk about in the next slide. It's similar to frameworks like bootstrap and foundation and as many of you know I do have a course on bootstrap 4 which is a great framework it's the most popular by far but materialize is getting up there in popularity because of its clean look and its interactive components materialize uses much more motion and user and interactivity than other frameworks. And that's one of the principles of material design. It's also extremely customizable as far as colors and look you don't just have like a set of five or six colors you can use just about any color along with different scales of lightening or darkening. So you're not stuck with a framework where everyone can tell exactly what it is. It allows you to be very creative and unique in your themes and interfaces. All right so what is material design. It is a design language or scheme that was created by Google back in 2014. It makes very liberal use of grid layouts responsive animations shadows and a bunch of bunch of other concepts that you'll notice throughout the course. It's based on an expandable paper and ink looks so it's supposed to sort of reflect physical surfaces and edges with shadows and almost 3-D real life look. And if you look at most of the Google based you guys like G-mail the new YouTube style Google Drive they all use material design concepts. All right. So let's talk a little bit about why you would want to learn materialize why you'd want to use it. So I would say that the the overall reason to use materialize or learn it is that it gives you a tool for being able to quickly create beautiful Web sites and application interfaces without having to have a lot of design skill. A lot of us are just developers and we don't really have that knack or that eye for design and materialize gives us the option to create nice interfaces without hiring a designer. Now we are getting some new features of CSSA like the grid and you'll hear some developers say things like well why use a framework now with CSSA grid available and that that statement actually really baffles me. For two reasons One is because the SS grid is very new and it isn't compatible with every browser. And the more important reason is because materialize and other frameworks like bootstrap are much much more than just a grid. Yes you could use siestas grid for making columns but that said. What about the nav bar buttons pagination styling the cards the colors the javascript widgets the grid system is just a tiny part of this framework and materialize allows you to not have to worry about styling all your individual elements yourself and making everything responsive on your own which is just invaluable. OK it's 100 percent responsive by design so you don't have to write your own media queries. You also get tons of CSSA and Javascript components with things like animations and transitions. So comparing CSSA grid to a framework like materialize is is basically just apples to oranges. All right so let's talk a little bit about versions. This can be a complicated issue with any course. We as instructors have to always be aware of updates and breaking changes. So in this course we're going to be using the version of materialized that's available at the official site of materialise CSSA dot com which is right now version zero point one hundred point two. Now 1.0 is in Alpha at next stop materialized dot com and as soon as that's released and put on the main site the course will be updated accordingly. OK now if you go and look at the Alpha docs there is not many changes in terms of class names and features and stuff like that. So you don't have to worry about everything changing into something that's unrecognizable to what you've learned. And for the changes that do happen the course will be updated. This course will always use whatever is offered and recommended by the official Web site. All right guys so that's it. In the next video we're going to jump in and set up our text editor which will be visual studio code. But of course you can use whatever you want. So I will see you in the next lecture.