Materialize Tutorial #1 - Introduction

Key Takeaways

hey gang and welcome to your first step in becoming a web mock-up ninja with materialized CSS all right there so what is material I CSS well basically it's just a responsive CSS framework that enables us to quickly create great-looking websites and it's based on material design concepts by Google so whenever you see one of those Google websites like with the Google documentation or firebase or something like that a lot of the time it's based on these material design concepts and that's what materialise is based on as well it's a library that lets us create websites based on Google's design concepts so it's a bit like bootstrap I suppose in that it comes with things like buttons colors layouts and all that jazz but at this time those layouts and components and much more tightly coupled with Google's design philosophy where's bootstrap isn't so some of the different UI components that it comes with our buttons nav bars farm imports and other controls colors the shadows grid layouts and Lowe's other things as well this can all be achieved with a few different classes in materialized CSS and it also comes with some JavaScript goodness which is more kind of interactive components things like low bar menus parallax's modal's or pop-ups image zooms tabs are much much more as well so the first half of this playlist will all be about learning some of these different components isolated on their own and then in the second half of the playlist will be putting everything together that we've learned along with some new stuff as well to create a website that looks something like this thing right here so this is a fully responsive website built with materialized and I've only had to write about two or three CSS rules of my own here no this is not me this is a stock image I'm gonna leave the link to this when we come to use it it's from unsplash but anyway all this is using materialized so we have our different images right here and they zoom in when you click on them we have parallaxes tabs and we also have a form at the bottom as well with a date picker and other cool stuff as well as a little footer and like I said fall it responsive so if I make this a little bit smaller then we're going to see this go into a more responsive design and at the very top we'll see this has gone to a mobile slide-out menu as well so in the second half of the series we're going to be looking at how to create this website pretty quickly using materialized now in this course I'm going to be using a Visual Studio code so you can download that if you want to follow along from code Visual Studio comm a really cool free editor the link to that is going to be down below and also as always I'm going to be providing you with all of the course files for this series you want to go to this repo right here materialise playlist the link is going to be down below as well and in order to get the code for a specific lesson very important this you have to choose the appropriate branch right here so if you want the lesson 10 code for example go to lesson 10 and then you'll find that code right here okay so there's your whirlwind introduction to materialise I really hope you enjoy this series and if you do my friends please please do not forget to share or like the videos and I'm gonna see you in the very next one