Vuetify Tutorial #1 - What is Vuetify?

Key Takeaways

hey guys and welcome to your very first lesson in beautify alright now so first of all what is beautify exactly well in a nutshell beautify is a user interface component library and it's based around Google's material design philosophy now if you're not sure what material design is then just open up any kind of Google app or google website and you're going to notice they all have a similar look and feel they have similar UI components things like the buttons or the menus or any kind of dropdowns they're all similar so this is Google's material design philosophy they're made like this to give a good user experience and to make the website look nice and clean so that's what beautified does for our view applications it gives us all of these different UI components like buttons toolbars pop-ups and a grid system to adhere to this material design philosophy to make our web apps look pretty nice so you can think of it as a bit like materialized CSS if you've ever used that library but only this time it's not only CSS classes but it's specifically built for V UJS and use these components as well as classes alright than my friends so in this series we're going to be creating a user interface using beautify for a view project which looks something like this and it's going to be a mini project manager so right here we can see we have different projects listed color coordinated based on the status complete overdue or ongoing we can also order these by person or by project name and you can see a little tooltip right there as well we have a menu at the top but also we have a menu to the side which we can open up to add a new project we're going to be using a pop-up and we can add a different due date using this calendar as well so all this is quite nice we can go to the dashboard which is this thing projects which is my projects so not everyone's but just my projects and we can see more details right there we can also see the team right here using some different thumbnails and avatars and yeah that's pretty much it in a nutshell this is what we're going to be creating in this course now I will also briefly show you how to store all of this data in an OC called fire store database but I want to stress that this series will not be focusing on any kind of data logic structure or authentication the idea behind this course is to learn beautify so I will implement some basic functionalities such as adding projects retrieving data an ordering data but that won't be my focus beautifying will be the focus of this series but once we don't create in this UI you should be then able to go in and add your own data logic and authentication etc okay now all of the course files for this series can be found on this github repository right here it's called beautify playlist now I want to stress something right here because I think a lot of people land on the repositories and they look down here and they say well there's only a readme where's all the code now the reason you don't see anything is that I do a different branch for every single lesson in the series so each lesson has different code corresponding to that lesson so if you want to see lesson a code select a lesson a branch and you're gonna see that code right here okay now I will also be using a vs code as my editor you don't have to but if you want to follow along just go to code up visual studio comm and you can download that for free right here it's really cool and I can't recommend it enough or rather than gang so just a couple of things you should know before you start this playlist the first one obviously being view J s if you're a complete beginner in view then this is not the place to start you want to check out my complete beginners series on here for view GS instead the link to that is going to be down below and also I do have a udemy course on view GS which goes into more depth and uses firebase as well so if you want to check that out I'll leave the link to that down below as well the second thing is the view CLI version 3 now you don't need to be really familiar with this but that is what I will be using in this course so if you want to brush up your knowledge in this I do also have a view see a live version 3 playlist on this channel so that link is gonna be down below as well so there we've got my friends that is your introduction to beautify I really hope you enjoy this series and if you do like the videos my friends please do not forget to share subscribe and like and I'm gonna see you in the very next one [Music]