What Is Materialize & Why Use It?
A free video tutorial from Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
27 courses
574,185 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, in this video, we're going to talk about what materialized access is and why you'd want to learn and use it. So materializes is 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 four, which is a great framework. It's the most popular by far. But Materialise is getting up there in popularity because of its clean look and its interactive components materialize uses much more emotion 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 lightning 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 look. So it's supposed to sort of reflect physical surfaces and edges with shadows and almost a 3D real life look. And if you look at most of the Google based uses, like Gmail, 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 materialise, why you'd want to use it. So I would say that the the the overall reason to use, materialise or learn it is that it gives you a tool for being able to quickly create beautiful websites 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 success like the grid, and you'll hear some developers say things like, well, why use a framework now with CSFs Grid available? And that that statement actually really baffles me for two reasons. One is because CSFs Grid is very new and it isn't compatible with every browser. And the more important reason is because materialise and other frameworks like Bootstrap are much, much more than just a grid. Yes, you could use this grid for making columns, but that's it. 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 materialise 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 success in JavaScript components with things like animations and transitions. So comparing Cyesis 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 materialize that's available at the official site of materialize X.com, which is right now version zero point one hundred point two. Now one point zero is in Alpha at NextG materialise dotcom. 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's 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 website. 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.