Materialize CSS Crash Course [Part 2] - JavaScript Widgets

In this second part of the Materialize crash course, we will look at the JavaScipt widgets included in the framework.

Carousel
Slider
Modals
Tooltips & Toasts
Lightbox / Material Boxed
Tap Target
Sidenav & Dropdown

CODE: Sandbox/Cheatsheet Download

SPONSORS:

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:

FOLLOW TRAVERSY MEDIA:

[TraversyMedia]

NOTE: Just to let you guys know, I did not realize that I started putting the markup above the opening body tag. Dumb mistake. I fixed it in the downloadable file. Sorry about that, it was early ;)

[nodehash]

Contents ( with timestamps)
:

00:00 - Intro / Part 1 review
01:10 - HTML Setup / CDN Links (CSS JS)
02:06 - Carousel
06:42 - Carousel Full Slider
08:27 - Collapsables
11:33 - Toasts
14:28 - Tooltips
16:46 - Dropdowns
18:00 - Material Boxed
19:54 - Slider
22:42 - Modals
26:38 - Sidenav
30:30 - Tabs
33:20 - Tap Target

[sachinsaini]

You can support him by disabling your adblocker when watching his videos. It would be like appreciation for his great work.

[sumantkanala]

Nice of you to release a lot of videos mentioning these new up-to date frameworks! Keep them coming. We'll watch them all! Thank you

[tarmac]

I've watched so damn poor quality ads alongside with your great content just to appreciate you. And there must be many like me. Just so you know, people do take a suffering watching your content so you continue to make awesome content.

[tysonlin]

For those who follow the instruction as is, and modal doesn't work, add class "modal-trigger" to your buttons. So the buttons will be like:

<!-- MODAL TRIGGERS -->
<a href="#modal1" class="btn modal-trigger waves-effect">Modal 1</a>
<a href="#modal2" class="btn modal-trigger waves-effect red">Modal 2</a>

Great videos as always, Brad! :)

[Acousticsoul]

Again, I cannot thank you enough for these two tutorials. I feel incredibly empowered to create a brand new website using Materialize now.

[tarikomercehajic]

I'm seriously thinking about using Materialize for my future projects instead of Bootstrap. I really like what I see here.

[sachinsaini]

Well there are not too many channels on youtube which offer this type of high level material and he also shares the code. what else we want. I am going to get placed in campus placements soon and i will donate my second paycheck(whole) to you as you are the one who has helped me to get a good hold over web dev

[kabuyedennis]

Brad the Machine. lol man thanks a bunch for this channel i've never seen somebody so selfless man thanks alot. much love from Africa

[drewconroy]

I just finished your "Materialize CSS From Scratch With 5 Projects" tutorial on Udemy. You did another great job. I am not sure if its the "right" thing to do, using two front end frameworks on the same project. But I think Materialize and Bootstrap make a nice combo... (If anyone else reads this you really should check out his course on Udemy)

[camcardow]

You're easily my favorite Udemy instructor and I've bought a couple of your courses. Pretty sure I'm going to buy more.

[MindBodyMeditate]

I love your Bostonian accent and your tutorials man. Keep up the great work

[HarishST]

Another Great Video! After The Part 1 Video I watched this whole video in less than 10 minutes. You're A Great Teacher Man! Kudos

[tedshapera]

Thanks for the great intro and for helping us all to keep current with new technologies.

[fayhen]

0:00 - Intro/Setup
2:05 - Carousel
6:10 - Carousel - Full width slider
8:25 - Collapsible
11:30 - Toasts
14:25 - Tooltips
16:41 - Dropdown
18:04 - Material boxed
19:47 - Slider
22:36 - Modal
26:25 - Side nav
30:25 - Tabs
33:16 - Tap target

[poltakmarasi]

Thank you Brad for sharing Materialize crash course. I like your video tutorials.
I think Materialize is a fantastic framework, easy to use and offer a lot of styling.

[md.sharif]

Nice one. Eagerly waiting for the next.

[seralistair]

Thank-you for all the content you provide. Really enjoying this series!

[glenbambrick]

Great stuff Brad, your JavaScript Udemy course brought me here, only a 1/4 way through and decided to look at Materialize first as its used in the task list project. JQuery no longer a dependency and some changes now that 1.0.0 is around but easily adaptable from learning from your content. I have been able to implement everything with some help from the materialize docs. I highly recommend Brad's Udemy course for learning and for reference.