Vuetify: Make a VueJS app look good, even if you're bad at design (Building a VueJS app Part 3)
In this tutorial we're going to take a functional but ugly app and turn it into a beautiful app -- or, at the very least, one that's less ugly -- using Vuetify, a Material Design library for VueJS.
0:00 Start
1:00 Why Vuetify?
4:36 Installing Vuetify
11:00 Fixing the Video List
34:10 Fixing the Video Watch page
Specifically, we're going to cover creating a navbar, improving button style and interaction (such as @mousedown events), using the inbuilt style classes (including color), using a bootstrap-style rows/columns layout, and using a cards layout.
Previous video in series: https://www.youtube.com/watch?v=9xF89Q2052g
Next video in series: https://youtu.be/WOv3w2tSp-Y
Playlist: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn
*** Github links ***
* Installing Vuetify: https://github.com/jeffreybiles/vue-screencasts/commit/7dc25a58a1142d0d3489dd7ca35612d8be9f3c21
* Making nice buttons and header: https://github.com/jeffreybiles/vue-screencasts/commit/db7084454c5a6b22489b330b47ec30778f37c45a
* Turning videos into cards: https://github.com/jeffreybiles/vue-screencasts/commit/2e4496fb7ccdb56997e8ff201870bf51d126534e
* Vuetifying the video watch page: https://github.com/jeffreybiles/vue-screencasts/commit/8d6f0cc2336a66b16e70a010c066377d9f52dd76
I hope you enjoy, and please continue to like/comment/subscribe! Your comments so far have been both helpful and encouraging!
*** Find me online! ***
Twitter: https://twitter.com/VueScreencasts
Website coming soon.
#Vuetify #VueJS #Tutorial #UIFrameworks #Vue #2019 #Javascript
Видео Vuetify: Make a VueJS app look good, even if you're bad at design (Building a VueJS app Part 3) канала Jeffrey Codes
0:00 Start
1:00 Why Vuetify?
4:36 Installing Vuetify
11:00 Fixing the Video List
34:10 Fixing the Video Watch page
Specifically, we're going to cover creating a navbar, improving button style and interaction (such as @mousedown events), using the inbuilt style classes (including color), using a bootstrap-style rows/columns layout, and using a cards layout.
Previous video in series: https://www.youtube.com/watch?v=9xF89Q2052g
Next video in series: https://youtu.be/WOv3w2tSp-Y
Playlist: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn
*** Github links ***
* Installing Vuetify: https://github.com/jeffreybiles/vue-screencasts/commit/7dc25a58a1142d0d3489dd7ca35612d8be9f3c21
* Making nice buttons and header: https://github.com/jeffreybiles/vue-screencasts/commit/db7084454c5a6b22489b330b47ec30778f37c45a
* Turning videos into cards: https://github.com/jeffreybiles/vue-screencasts/commit/2e4496fb7ccdb56997e8ff201870bf51d126534e
* Vuetifying the video watch page: https://github.com/jeffreybiles/vue-screencasts/commit/8d6f0cc2336a66b16e70a010c066377d9f52dd76
I hope you enjoy, and please continue to like/comment/subscribe! Your comments so far have been both helpful and encouraging!
*** Find me online! ***
Twitter: https://twitter.com/VueScreencasts
Website coming soon.
#Vuetify #VueJS #Tutorial #UIFrameworks #Vue #2019 #Javascript
Видео Vuetify: Make a VueJS app look good, even if you're bad at design (Building a VueJS app Part 3) канала Jeffrey Codes
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Query Parameters - goto, link tags, and multiple searchParams [Intro to SvelteKit 1.0, part 7]](https://i.ytimg.com/vi/n00qRGPfyCc/default.jpg)
![SparkCasts 11: Refactoring to a Component](https://i.ytimg.com/vi/_lEIN8zvH3s/default.jpg)
![27 client side pagination part 2 next andprevious page buttons and changing pageSize](https://i.ytimg.com/vi/IxOXRo9itzY/default.jpg)
![42 object instantiation](https://i.ytimg.com/vi/tobyo5NBZTE/default.jpg)
![HEAD PONG (handofpong.com)](https://i.ytimg.com/vi/_wvJyhW-dPc/default.jpg)
![21- sort arrows component](https://i.ytimg.com/vi/n00DBJDqlcE/default.jpg)
![Markdown and Syntax Highlighting in VueJS, compatible with Nuxt and SSR](https://i.ytimg.com/vi/THT5FefYZCo/default.jpg)
![Ember Sparks 9: Ember.computed](https://i.ytimg.com/vi/f59zXZxiTlk/default.jpg)
![22 highlight selected sort](https://i.ytimg.com/vi/_wnSHAJWb8c/default.jpg)
![sparkcasts 15- debugging someone else's rubygem](https://i.ytimg.com/vi/dOYq0VfbDMU/default.jpg)
![46 bar chart ember cli chart](https://i.ytimg.com/vi/VsIW6J4fuTw/default.jpg)
![24 Handlebars Subexpressions](https://i.ytimg.com/vi/F9eob2xJeRI/default.jpg)
![Reusable Components with Props [Intro to SvelteKit 1.0, part 8]](https://i.ytimg.com/vi/7h6slC4HcpI/default.jpg)
![Is our app secure enough? (Building a VueJS app part 9.1)](https://i.ytimg.com/vi/-uyz77h2nV8/default.jpg)
![35 CRUD pt 2](https://i.ytimg.com/vi/PPL--AtBz98/default.jpg)
![Ember Sparks 3: metaprogramming with defineProperty](https://i.ytimg.com/vi/p33vk9ykc3s/default.jpg)
![Catching Monsters [Intro to SvelteKit 1.0, part 14]](https://i.ytimg.com/vi/zgrQO58oPfk/default.jpg)
![Functions and Types in Typescript -- TypeScript: The Vue Parts, Part 5](https://i.ytimg.com/vi/SFYihaugWQs/default.jpg)
![23 query params](https://i.ytimg.com/vi/X-MumVC3XBU/default.jpg)
![Each loops and objects [Intro to SvelteKit 1.0, part 3]](https://i.ytimg.com/vi/i2F1YcjALfo/default.jpg)
![Upgrading our Video Creation and Editing Form (Building a VueJS App Part 22)](https://i.ytimg.com/vi/Xrf0oivs3kQ/default.jpg)