title
Materialize CSS Crash Course [Part 1]

description
In this video we will dive into Materialize CSS and create a cheat sheet with all of the main HTML/CSS components such as navbars, cards, collections, progress bars, helper classes, buttons and more. Materialize is a responsive framework based on Google's Material Design. We will look at the JavaScript widgets in a separate video. CODE: Sandbox/Cheatsheet Download http://www.traversymedia.com/downloads/materialize_sandbox.zip WATCH PART 2: https://www.youtube.com/watch?v=ZpduVPHZ5Aw SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/in/bradtraversy

detail
{'title': 'Materialize CSS Crash Course [Part 1]', 'heatmap': [{'end': 980.336, 'start': 940.147, 'weight': 1}], 'summary': 'Provides a comprehensive crash course on materialize css, covering its features, customization, css effects, responsive design, html icon collection, pagination, components, forms, preloaders, circular preloaders, and the materialize grid system.', 'chapters': [{'end': 249.257, 'segs': [{'end': 36.366, 'src': 'embed', 'start': 7.338, 'weight': 5, 'content': [{'end': 10.461, 'text': 'Hey guys, welcome to the Materialize CSS Crash Course.', 'start': 7.338, 'duration': 3.123}, {'end': 14.105, 'text': 'This is going to be similar to my Bootstrap and Foundation Crash Course,', 'start': 10.481, 'duration': 3.624}, {'end': 24.134, 'text': "where we go through and we look at the framework and we basically manually type out the elements and really look at the class names and study what's available with this framework.", 'start': 14.105, 'duration': 10.029}, {'end': 34.004, 'text': "So Materialize CSS is basically like a responsive front-end framework like bootstrap, and it's based off of Google's material design,", 'start': 24.675, 'duration': 9.329}, {'end': 36.366, 'text': 'which is a whole new can of worms.', 'start': 34.004, 'duration': 2.362}], 'summary': "Materialize css is a responsive front-end framework based on google's material design.", 'duration': 29.028, 'max_score': 7.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ7338.jpg'}, {'end': 69.357, 'src': 'embed', 'start': 44.473, 'weight': 0, 'content': [{'end': 54.183, 'text': "it was created back in 2014, I believe, And it's what Google is trying to use for all their UIs, all their user interfaces and elements and stuff.", 'start': 44.473, 'duration': 9.71}, {'end': 56.046, 'text': "So we're not going to get too much into that.", 'start': 54.263, 'duration': 1.783}, {'end': 58.909, 'text': "That's something that I'll bring up in a later video.", 'start': 56.086, 'duration': 2.823}, {'end': 62.373, 'text': "But we're going to really just dive into this materialized CSS.", 'start': 59.369, 'duration': 3.004}, {'end': 63.154, 'text': 'I really like it.', 'start': 62.413, 'duration': 0.741}, {'end': 64.015, 'text': 'I like the look of it.', 'start': 63.174, 'duration': 0.841}, {'end': 69.357, 'text': 'I think it looks a little better than Bootstrap, and it has some really cool components.', 'start': 64.375, 'duration': 4.982}], 'summary': 'Materialized css, created in 2014, favored over bootstrap for ui, with cool components.', 'duration': 24.884, 'max_score': 44.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ44473.jpg'}, {'end': 116.002, 'src': 'embed', 'start': 82.603, 'weight': 1, 'content': [{'end': 84.866, 'text': 'This video is sponsored by DevMountain.', 'start': 82.603, 'duration': 2.263}, {'end': 89.151, 'text': "If you're interested in learning web development, iOS or UX design,", 'start': 84.986, 'duration': 4.165}, {'end': 94.758, 'text': 'DevMountain is a 12-week design and development boot camp intended to get you a full-time job in the industry.', 'start': 89.151, 'duration': 5.607}, {'end': 98.742, 'text': 'To learn more, visit devmountain.com or click the link in the description below.', 'start': 95.118, 'duration': 3.624}, {'end': 102.527, 'text': 'all right guys, i went ahead and shut the mini cam off because it was getting.', 'start': 99.543, 'duration': 2.984}, {'end': 108.013, 'text': "it was getting in the way of some of the markups, so we're just going to do without it for this video now.", 'start': 102.527, 'duration': 5.486}, {'end': 116.002, 'text': 'this is the documentation or the official website, materialize, css.com, and if we go to get started,', 'start': 108.013, 'duration': 7.989}], 'summary': 'Devmountain offers 12-week boot camp for web development, ios, and ux design to secure full-time job in the industry.', 'duration': 33.399, 'max_score': 82.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ82603.jpg'}], 'start': 7.338, 'title': 'Materialize css crash course', 'summary': "Covers a crash course on materialize css, a responsive front-end framework based on google's material design, created in 2014 with potential javascript widgets, and sponsored by devmountain. it also discusses setting up materialize css using the cdn method, including copying html setup code, replacing local css and javascript with cdn links, and the plan to focus on look and design rather than coding intricacies.", 'chapters': [{'end': 102.527, 'start': 7.338, 'title': 'Materialize css crash course', 'summary': "Covers a crash course on materialize css, a responsive front-end framework based on google's material design, created in 2014 with potential javascript widgets, and sponsored by devmountain.", 'duration': 95.189, 'highlights': ["Materialize CSS is a responsive front-end framework like bootstrap, based off of Google's material design, created in 2014 for all Google UIs and user interfaces.", 'The chapter may be a two-parter, as it also aims to explore the JavaScript widgets of Materialize CSS.', 'The video is sponsored by DevMountain, a 12-week design and development boot camp aimed at securing full-time jobs in the industry.']}, {'end': 249.257, 'start': 102.527, 'title': 'Setting up materialize css', 'summary': 'Discusses setting up materialize css using the cdn method, including copying html setup code, replacing local css and javascript with cdn links, and the plan to focus on look and design rather than coding intricacies.', 'duration': 146.73, 'highlights': ['The chapter discusses using the CDN method to set up Materialize CSS instead of building from source or using SAS, highlighting the focus on look and design over code compilation. CDN method, SAS, look and design emphasis', 'The transcript includes copying the HTML setup code provided on the official website for Materialize CSS and pasting it into a text editor, emphasizing the practical steps for setup. HTML setup code, practical steps', 'It emphasizes the decision to use the CDN method over local CSS and JavaScript files, illustrating the preference for remote file inclusion for Materialize CSS setup. Preference for CDN over local files']}], 'duration': 241.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ7338.jpg', 'highlights': ["Materialize CSS is a responsive front-end framework like bootstrap, based off of Google's material design, created in 2014 for all Google UIs and user interfaces.", 'The video is sponsored by DevMountain, a 12-week design and development boot camp aimed at securing full-time jobs in the industry.', 'The chapter may be a two-parter, as it also aims to explore the JavaScript widgets of Materialize CSS.', 'The chapter discusses using the CDN method to set up Materialize CSS instead of building from source or using SAS, highlighting the focus on look and design over code compilation.', 'It emphasizes the decision to use the CDN method over local CSS and JavaScript files, illustrating the preference for remote file inclusion for Materialize CSS setup.', 'The transcript includes copying the HTML setup code provided on the official website for Materialize CSS and pasting it into a text editor, emphasizing the practical steps for setup.']}, {'end': 1283.692, 'segs': [{'end': 301.512, 'src': 'embed', 'start': 272.93, 'weight': 0, 'content': [{'end': 274.772, 'text': "Let's go ahead and go back to our editor here.", 'start': 272.93, 'duration': 1.842}, {'end': 277.334, 'text': "And I'm just going to add a title in the head real quick.", 'start': 275.052, 'duration': 2.282}, {'end': 284.181, 'text': "So let's say title, and I'll just say Materialize Sandbox.", 'start': 277.414, 'duration': 6.767}, {'end': 287.405, 'text': 'Okay And in the body here..', 'start': 285.082, 'duration': 2.323}, {'end': 291.742, 'text': "We're first going to put a div with the class of container.", 'start': 288.959, 'duration': 2.783}, {'end': 293.243, 'text': "I'm using Emmet.", 'start': 291.762, 'duration': 1.481}, {'end': 298.449, 'text': "You'll see if I do div.container and then tab, it's going to give us a class of container.", 'start': 293.424, 'duration': 5.025}, {'end': 301.512, 'text': 'If I put number sign container, it would give us an ID.', 'start': 298.489, 'duration': 3.023}], 'summary': 'Using emmet to add a title and div with a class in the editor', 'duration': 28.582, 'max_score': 272.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ272930.jpg'}, {'end': 393.08, 'src': 'embed', 'start': 344.266, 'weight': 1, 'content': [{'end': 347.067, 'text': 'And if we save that and we go to our browser,', 'start': 344.266, 'duration': 2.801}, {'end': 353.468, 'text': "you'll see we have the div with color class and it has this red background that spans across the whole thing.", 'start': 347.067, 'duration': 6.401}, {'end': 361.45, 'text': "Now, if you have, let's say, a color that's dark and you want to change the text color, you can easily do that as well.", 'start': 354.168, 'duration': 7.282}, {'end': 366.15, 'text': "So to do that, let's go ahead and say white-text.", 'start': 362.43, 'duration': 3.72}, {'end': 370.311, 'text': "And if we save that and take a look, you'll see now the text is white.", 'start': 367.051, 'duration': 3.26}, {'end': 372.012, 'text': "It doesn't have to be white or black.", 'start': 370.471, 'duration': 1.541}, {'end': 373.432, 'text': 'It can be absolutely any color.', 'start': 372.052, 'duration': 1.38}, {'end': 377.494, 'text': 'Okay, now as far as the colors that are available.', 'start': 374.853, 'duration': 2.641}, {'end': 382.356, 'text': "if you go to CSS color and go down here, you'll see all the different.", 'start': 377.494, 'duration': 4.862}, {'end': 383.536, 'text': "you'll see the color palettes.", 'start': 382.356, 'duration': 1.18}, {'end': 389.238, 'text': 'Not only can you use a bunch of different colors, but you can also lighten them and you can darken them.', 'start': 384.057, 'duration': 5.181}, {'end': 393.08, 'text': 'Okay, so for instance, we can do lighten one through lighten five.', 'start': 389.439, 'duration': 3.641}], 'summary': 'Demonstrating css color manipulation and options for lightening and darkening colors.', 'duration': 48.814, 'max_score': 344.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ344266.jpg'}, {'end': 547.057, 'src': 'embed', 'start': 519.177, 'weight': 2, 'content': [{'end': 524.821, 'text': "And then we're going to add to the class, we're going to add waves-effect.", 'start': 519.177, 'duration': 5.644}, {'end': 527.543, 'text': "And let's see what that does.", 'start': 526.422, 'duration': 1.121}, {'end': 533.35, 'text': "So now when I click it, you'll see that we get this kind of wave effect.", 'start': 529.028, 'duration': 4.322}, {'end': 536.772, 'text': "Now what's really nice is when we click in the middle, you'll see it kind of shoots outward.", 'start': 533.39, 'duration': 3.382}, {'end': 539.233, 'text': 'If I click over here, it goes to the left.', 'start': 537.192, 'duration': 2.041}, {'end': 540.914, 'text': 'If I go over here, it goes to the right.', 'start': 539.353, 'duration': 1.561}, {'end': 547.057, 'text': "So it depends on where you click it as to the effect that it's going to give you, which is really cool.", 'start': 541.294, 'duration': 5.763}], 'summary': 'Adding waves-effect class creates wave effect on click and direction varies based on click position.', 'duration': 27.88, 'max_score': 519.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ519177.jpg'}, {'end': 683.543, 'src': 'embed', 'start': 654.189, 'weight': 4, 'content': [{'end': 668.423, 'text': "Alright, so let's make this one blue, make this one green, purple, I think we can do black, and let's do yellow.", 'start': 654.189, 'duration': 14.234}, {'end': 675.499, 'text': 'Now where yellow is a really light color and by default the text is going to be white, you may want to do black text.', 'start': 669.976, 'duration': 5.523}, {'end': 678.861, 'text': 'And of course we can do lighten and darken.', 'start': 676.68, 'duration': 2.181}, {'end': 681.302, 'text': "Let's say lighten 2 for the purple.", 'start': 678.881, 'duration': 2.421}, {'end': 683.543, 'text': "And let's take a look.", 'start': 682.663, 'duration': 0.88}], 'summary': 'Options for colors include blue, green, purple, black, and yellow. text color can be adjusted, and lighten/darken effects can be applied.', 'duration': 29.354, 'max_score': 654.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ654189.jpg'}, {'end': 906.546, 'src': 'embed', 'start': 878.425, 'weight': 7, 'content': [{'end': 888.913, 'text': 'So this would be good for something like a UI for a blog post backend, where you have options to publish the post or edit or attach a file,', 'start': 878.425, 'duration': 10.488}, {'end': 889.653, 'text': 'things like that.', 'start': 888.913, 'duration': 0.74}, {'end': 892.355, 'text': "So underneath this, we're going to put a UL.", 'start': 890.294, 'duration': 2.061}, {'end': 896.779, 'text': "And let's put an LI with an A tag.", 'start': 893.856, 'duration': 2.923}, {'end': 900.141, 'text': "And we'll give this a class of BTN.", 'start': 897.279, 'duration': 2.862}, {'end': 901.642, 'text': "Actually, we'll just take one of these.", 'start': 900.381, 'duration': 1.261}, {'end': 906.546, 'text': "We'll take this floating button and just put it right in there.", 'start': 901.722, 'duration': 4.824}], 'summary': 'Ui for blog post backend with publish, edit, attach file options.', 'duration': 28.121, 'max_score': 878.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ878425.jpg'}, {'end': 1004.88, 'src': 'heatmap', 'start': 940.147, 'weight': 8, 'content': [{'end': 946.09, 'text': "And for the icon, let's do publish, which is like a pencil or something, I think.", 'start': 940.147, 'duration': 5.943}, {'end': 950.833, 'text': "And then for this one, let's do red or let's do orange.", 'start': 946.57, 'duration': 4.263}, {'end': 954.715, 'text': "And for the icon, let's do attach file.", 'start': 952.594, 'duration': 2.121}, {'end': 959.038, 'text': "All right, and let's save and see what we get with this.", 'start': 957.037, 'duration': 2.001}, {'end': 962.92, 'text': 'Okay, so down here you see the pencil icon.', 'start': 959.058, 'duration': 3.862}, {'end': 964.621, 'text': 'If I go and I hover over it, look at that.', 'start': 962.96, 'duration': 1.661}, {'end': 969.628, 'text': 'that is pretty cool.', 'start': 965.905, 'duration': 3.723}, {'end': 974.311, 'text': 'all right now, in addition to these buttons, we have flat buttons.', 'start': 969.628, 'duration': 4.683}, {'end': 980.336, 'text': "so let's see, let's go back here and go right here and put a comment.", 'start': 974.311, 'duration': 6.025}, {'end': 990.089, 'text': "we'll say flat button And that's going to be an A tag and we'll give it a class of waves effect.", 'start': 980.336, 'duration': 9.753}, {'end': 994.072, 'text': "Let's give it a class of waves dash teal.", 'start': 990.749, 'duration': 3.323}, {'end': 998.014, 'text': "And let's give it a class of BTN dash flat.", 'start': 995.052, 'duration': 2.962}, {'end': 1001.197, 'text': "And we'll just say button.", 'start': 1000.096, 'duration': 1.101}, {'end': 1003.979, 'text': 'All right.', 'start': 1003.579, 'duration': 0.4}, {'end': 1004.88, 'text': 'so what that does?', 'start': 1003.979, 'duration': 0.901}], 'summary': 'Discussion about icons and buttons customization in the ui interface.', 'duration': 35.252, 'max_score': 940.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ940147.jpg'}], 'start': 249.917, 'title': 'Customizing materialize css features', 'summary': 'Explores using atom live server to edit html files and demonstrates customizing buttons, icons, and helper classes in materialize css, including adding icons, changing colors, and implementing hover functionality.', 'chapters': [{'end': 683.543, 'start': 249.917, 'title': 'Using atom live server for materialize css', 'summary': 'Demonstrates using atom live server to view and edit html files, utilizing materialize css features including color classes with lighten and darken options, and adding click effects and customizations to buttons.', 'duration': 433.626, 'highlights': ['The chapter demonstrates using Atom Live Server to view and edit HTML files, showcasing the process of adding a title and a div with the class of container, and highlighting the use of color classes with lighten and darken options.', 'The chapter highlights the process of adding click effects and customizations to buttons, including the addition of waves-effect and waves-light classes, adjusting button size using btn-large class, and the ability to use any color with options to lighten and darken.']}, {'end': 906.546, 'start': 684.424, 'title': 'Customizable buttons and icons', 'summary': 'Demonstrates the customization of buttons and icons using materialized design, including adding icons to buttons, changing button colors, creating floating buttons, and implementing a fixed action button with hover functionality.', 'duration': 222.122, 'highlights': ['The chapter demonstrates the customization of buttons and icons using materialized design The tutorial showcases the versatility and customization options available for buttons and icons using materialized design.', 'Adding icons to buttons and customizing their colors The tutorial explains how to add icons to buttons using material design and customize their colors, such as changing a button to brown.', 'Creating floating buttons with icons The chapter illustrates the creation of floating buttons with icons, such as a red floating button with a plus icon, demonstrating the visual effects of the implementation.', 'Implementing a fixed action button with hover functionality The tutorial introduces the concept of a fixed action button and demonstrates its hover functionality, allowing additional buttons to appear upon hovering, offering practical usage scenarios like UI for a blog post backend.']}, {'end': 1283.692, 'start': 908.484, 'title': 'Styling buttons and helper classes', 'summary': 'Covers the process of styling buttons with different colors and icons and exploring helper classes for alignment, floating, and hiding content based on screen size, demonstrating the use of various classes and their effects.', 'duration': 375.208, 'highlights': ['Styling Buttons The chapter demonstrates the process of styling buttons with different colors (yellow, blue, green, red, orange) and icons (add, insert chart, format quote, publish, attach file), showcasing the use of flat buttons with effects like waves and teal.', 'Helper Classes for Alignment and Floating The transcript showcases the use of helper classes for alignment (left, center, right) and floating (left float, right float) with the necessity of clearing floats, providing a practical demonstration of their application in web development.', "Hiding Content based on Screen Size The chapter illustrates the usage of classes to hide content based on screen size, including 'hidden for all devices', 'hidden for mobile devices', 'hidden for tablets', and 'hidden for desktop big screens', emphasizing the importance of responsive design in web development."]}], 'duration': 1033.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ249917.jpg', 'highlights': ['The chapter demonstrates using Atom Live Server to view and edit HTML files, showcasing the process of adding a title and a div with the class of container, and highlighting the use of color classes with lighten and darken options.', 'The chapter highlights the process of adding click effects and customizations to buttons, including the addition of waves-effect and waves-light classes, adjusting button size using btn-large class, and the ability to use any color with options to lighten and darken.', 'The chapter demonstrates the customization of buttons and icons using materialized design The tutorial showcases the versatility and customization options available for buttons and icons using materialized design.', 'Adding icons to buttons and customizing their colors The tutorial explains how to add icons to buttons using material design and customize their colors, such as changing a button to brown.', 'Creating floating buttons with icons The chapter illustrates the creation of floating buttons with icons, such as a red floating button with a plus icon, demonstrating the visual effects of the implementation.', 'Implementing a fixed action button with hover functionality The tutorial introduces the concept of a fixed action button and demonstrates its hover functionality, allowing additional buttons to appear upon hovering, offering practical usage scenarios like UI for a blog post backend.', 'Styling Buttons The chapter demonstrates the process of styling buttons with different colors (yellow, blue, green, red, orange) and icons (add, insert chart, format quote, publish, attach file), showcasing the use of flat buttons with effects like waves and teal.', 'Helper Classes for Alignment and Floating The transcript showcases the use of helper classes for alignment (left, center, right) and floating (left float, right float) with the necessity of clearing floats, providing a practical demonstration of their application in web development.', "Hiding Content based on Screen Size The chapter illustrates the usage of classes to hide content based on screen size, including 'hidden for all devices', 'hidden for mobile devices', 'hidden for tablets', and 'hidden for desktop big screens', emphasizing the importance of responsive design in web development."]}, {'end': 1986.844, 'segs': [{'end': 1312.909, 'src': 'embed', 'start': 1283.692, 'weight': 3, 'content': [{'end': 1285.393, 'text': "because it's gonna be really crammed in there.", 'start': 1283.692, 'duration': 1.701}, {'end': 1286.392, 'text': 'All right.', 'start': 1286.112, 'duration': 0.28}, {'end': 1287.773, 'text': 'So that can be very helpful.', 'start': 1286.432, 'duration': 1.341}, {'end': 1291.656, 'text': 'Another thing we can do is truncate text.', 'start': 1289.334, 'duration': 2.322}, {'end': 1296.198, 'text': "So let's say we have a paragraph and I'm just going to put some dummy text in.", 'start': 1292.136, 'duration': 4.062}, {'end': 1301.462, 'text': "If you're using Adam, you can type in lorem tab and it'll give you all this sample content.", 'start': 1296.639, 'duration': 4.823}, {'end': 1308.726, 'text': "And if we were to look at this as is, you'll see we have actually, you know what, let's make this a, let's do an H four.", 'start': 1302.102, 'duration': 6.624}, {'end': 1312.909, 'text': 'It can be on any element.', 'start': 1311.708, 'duration': 1.201}], 'summary': 'Discussed methods like truncating text and using lorem tab for sample content.', 'duration': 29.217, 'max_score': 1283.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ1283692.jpg'}, {'end': 1386.363, 'src': 'embed', 'start': 1325.811, 'weight': 0, 'content': [{'end': 1330.676, 'text': "Okay, so it's going to truncate it down to one line and then just put these, uh, these dots at the end.", 'start': 1325.811, 'duration': 4.865}, {'end': 1333.138, 'text': 'And this is really good for things like blogs,', 'start': 1331.136, 'duration': 2.002}, {'end': 1339.564, 'text': 'where you want to just show just a portion of the article or the blog post until they click on a button, and then that takes them to the rest.', 'start': 1333.138, 'duration': 6.426}, {'end': 1343.301, 'text': 'Okay, we also have some effects we can do.', 'start': 1340.779, 'duration': 2.522}, {'end': 1344.623, 'text': 'Let me just put a comment here.', 'start': 1343.321, 'duration': 1.302}, {'end': 1352.79, 'text': "All right, so let's look at some effects.", 'start': 1344.643, 'duration': 8.147}, {'end': 1358.416, 'text': "Now, these can be used on any element, but I'm going to use a div.", 'start': 1354.332, 'duration': 4.084}, {'end': 1359.797, 'text': 'So first we have hoverable.', 'start': 1358.476, 'duration': 1.321}, {'end': 1371.415, 'text': "So let's put a div and let's see, we're going to make it red and give it white text.", 'start': 1364.051, 'duration': 7.364}, {'end': 1374.357, 'text': "And then we're going to put a class of hoverable.", 'start': 1372.275, 'duration': 2.082}, {'end': 1379.879, 'text': 'All right.', 'start': 1379.559, 'duration': 0.32}, {'end': 1386.363, 'text': "And if we look at that, you'll see if I go over it, it kind of gets this shadow and kind of pops off the page.", 'start': 1380.04, 'duration': 6.323}], 'summary': 'Demonstrating truncation, effects, and hoverable class for web elements.', 'duration': 60.552, 'max_score': 1325.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ1325811.jpg'}, {'end': 1473.746, 'src': 'embed', 'start': 1420.727, 'weight': 1, 'content': [{'end': 1422.268, 'text': "I don't even have to do anything to it.", 'start': 1420.727, 'duration': 1.541}, {'end': 1426.63, 'text': "Now this doesn't look very good, but if you were to put this on a button, that let's say,", 'start': 1422.848, 'duration': 3.782}, {'end': 1430.813, 'text': "you want it to drive a user's attention to maybe a buy now button or something.", 'start': 1426.63, 'duration': 4.183}, {'end': 1431.533, 'text': 'you could do that.', 'start': 1430.813, 'duration': 0.72}, {'end': 1432.473, 'text': 'All right.', 'start': 1432.173, 'duration': 0.3}, {'end': 1433.794, 'text': "I don't want that to keep going.", 'start': 1432.553, 'duration': 1.241}, {'end': 1436.736, 'text': "So I'm just going to put a underscore before the pulse.", 'start': 1433.834, 'duration': 2.902}, {'end': 1440.838, 'text': "Next thing we'll look at is shadows.", 'start': 1439.397, 'duration': 1.441}, {'end': 1449.34, 'text': 'Okay, material design has kind of a lot of shadows in its elements.', 'start': 1444.872, 'duration': 4.468}, {'end': 1452.626, 'text': "And there's basically five different depths we can do.", 'start': 1450.101, 'duration': 2.525}, {'end': 1456.753, 'text': "So let's say we want class and let's do z-depth-1.", 'start': 1452.766, 'duration': 3.987}, {'end': 1463.382, 'text': "We'll do the same thing here, and we'll save that.", 'start': 1459.841, 'duration': 3.541}, {'end': 1470.285, 'text': "And now if we take a look, you'll see that this div now has a shadow behind it with the depth of one.", 'start': 1464.002, 'duration': 6.283}, {'end': 1473.746, 'text': "Now we can actually do one through five, so I'm going to copy that.", 'start': 1470.805, 'duration': 2.941}], 'summary': 'Demonstration of adding attention-grabbing effects to ui elements, including shadows and depths.', 'duration': 53.019, 'max_score': 1420.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ1420727.jpg'}], 'start': 1283.692, 'title': 'Css effects, text manipulation, and responsive web design', 'summary': "Covers css effects such as text truncation, hover effects, pulsating elements, and shadow application, along with responsive design features including text and image responsiveness, customizable navigation menus, and collapsible mobile menus, showcasing the framework's flexibility and responsiveness.", 'chapters': [{'end': 1530.738, 'start': 1283.692, 'title': 'Css effects and text manipulation', 'summary': 'Covers css effects including truncating text, creating hoverable and pulsating elements, applying shadows with different depths, and using flow text to make text more prominent and bigger.', 'duration': 247.046, 'highlights': ['Applying different levels of shadow depth using z-depth class, ranging from 1 to 5, with noticeable differences in the shadow effect. The chapter explains how to apply different levels of shadow depth using the z-depth class, ranging from 1 to 5, with noticeable differences in the shadow effect.', 'Creating hoverable elements with a shadow effect and pulsating elements that attract user attention, suitable for emphasizing buttons or specific content. The chapter demonstrates how to create hoverable elements with a shadow effect and pulsating elements that attract user attention, suitable for emphasizing buttons or specific content.', "Truncating text to one line with 'class truncate,' useful for displaying a portion of content, such as in blogs, before prompting the user to read more. The chapter showcases how to truncate text to one line using 'class truncate,' which is useful for displaying a portion of content, such as in blogs, before prompting the user to read more.", 'Using flow text to make text more prominent and bigger, enhancing its visibility and impact on the page. The chapter illustrates the use of flow text to make text more prominent and bigger, thereby enhancing its visibility and impact on the page.']}, {'end': 1986.844, 'start': 1530.938, 'title': 'Responsive web design and navigation', 'summary': "Highlights the responsive design features of a web framework, including responsive text and images, customizable navigation menus, and collapsible mobile menus, demonstrating the framework's flexibility and responsiveness.", 'duration': 455.906, 'highlights': ['The framework offers responsive text and images, adjusting to screen size and providing a user-friendly experience. The text and images within the framework are responsive, dynamically adjusting to the screen size, enhancing user experience.', 'Customizable navigation menus allow for flexible design and color options, with the ability to create collapsible mobile menus for improved user accessibility. The framework allows customization of navigation menus, including color options, and enables the creation of collapsible mobile menus for improved user accessibility.', 'The framework supports the addition of icons, buttons, and a search bar within the navigation, enhancing the visual and functional aspects of the menus. Icons, buttons, and a search bar can be seamlessly integrated into the navigation, enhancing both visual and functional aspects of the menus.']}], 'duration': 703.152, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ1283692.jpg', 'highlights': ['The framework offers responsive text and images, adjusting to screen size and providing a user-friendly experience.', 'Customizable navigation menus allow for flexible design and color options, with the ability to create collapsible mobile menus for improved user accessibility.', 'The framework supports the addition of icons, buttons, and a search bar within the navigation, enhancing the visual and functional aspects of the menus.', 'Applying different levels of shadow depth using z-depth class, ranging from 1 to 5, with noticeable differences in the shadow effect.', 'Creating hoverable elements with a shadow effect and pulsating elements that attract user attention, suitable for emphasizing buttons or specific content.', "Truncating text to one line with 'class truncate,' useful for displaying a portion of content, such as in blogs, before prompting the user to read more.", 'Using flow text to make text more prominent and bigger, enhancing its visibility and impact on the page.']}, {'end': 2407.803, 'segs': [{'end': 2080.473, 'src': 'embed', 'start': 1987.505, 'weight': 0, 'content': [{'end': 1988.445, 'text': "We'll go down here.", 'start': 1987.505, 'duration': 0.94}, {'end': 1993.029, 'text': "And let's put in some script tags.", 'start': 1990.047, 'duration': 2.982}, {'end': 1996.512, 'text': 'And just paste that in.', 'start': 1995.411, 'duration': 1.101}, {'end': 1999.674, 'text': 'All right, and that should work, hopefully.', 'start': 1997.272, 'duration': 2.402}, {'end': 2003.957, 'text': "Reload, and let's go down to our menu.", 'start': 2001.936, 'duration': 2.021}, {'end': 2004.798, 'text': 'There we go.', 'start': 2004.398, 'duration': 0.4}, {'end': 2010.082, 'text': 'So we get this cool sidebar that opens, which I actually like better than the actual dropdown.', 'start': 2004.898, 'duration': 5.184}, {'end': 2013.736, 'text': "All right, so that's enough for the navs.", 'start': 2012.096, 'duration': 1.64}, {'end': 2015.597, 'text': 'You can see we have a lot of different options here.', 'start': 2013.756, 'duration': 1.841}, {'end': 2017.697, 'text': "And that's not even all of them.", 'start': 2016.677, 'duration': 1.02}, {'end': 2024.059, 'text': "But the next thing we're going to look at are lists, which are actually called collections in Materialize.", 'start': 2018.197, 'duration': 5.862}, {'end': 2026.839, 'text': "They're called list groups in Bootstrap.", 'start': 2024.759, 'duration': 2.08}, {'end': 2031.76, 'text': 'So I want to open up another container after all these navs.', 'start': 2027.58, 'duration': 4.18}, {'end': 2037.902, 'text': "So we'll say div class container.", 'start': 2034.221, 'duration': 3.681}, {'end': 2045.39, 'text': "And let's do collection slash list.", 'start': 2040.149, 'duration': 5.241}, {'end': 2046.95, 'text': 'All right.', 'start': 2046.71, 'duration': 0.24}, {'end': 2048.891, 'text': "I'm actually going to put an H1 here as well.", 'start': 2046.97, 'duration': 1.921}, {'end': 2053.011, 'text': 'Collections list.', 'start': 2051.71, 'duration': 1.301}, {'end': 2055.172, 'text': 'All right.', 'start': 2054.871, 'duration': 0.301}, {'end': 2060.253, 'text': 'So basically, we just want a UL and we want to give it a class of collection.', 'start': 2055.891, 'duration': 4.362}, {'end': 2067.474, 'text': "And then inside there, we're going to have allies that are going to have a class of collection dash item.", 'start': 2061.753, 'duration': 5.721}, {'end': 2071.17, 'text': "Okay, and we'll just say item 1.", 'start': 2068.55, 'duration': 2.62}, {'end': 2072.251, 'text': "And then we'll copy that.", 'start': 2071.17, 'duration': 1.081}, {'end': 2075.772, 'text': "And we'll put a couple more.", 'start': 2074.751, 'duration': 1.021}, {'end': 2079.112, 'text': "Let's say item 2, 3, and 4.", 'start': 2075.831, 'duration': 3.281}, {'end': 2080.473, 'text': "Alright, let's see what that looks like.", 'start': 2079.112, 'duration': 1.361}], 'summary': 'Creating a navigation bar and list collections using materialize and bootstrap.', 'duration': 92.968, 'max_score': 1987.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ1987505.jpg'}, {'end': 2190.052, 'src': 'embed', 'start': 2160.804, 'weight': 3, 'content': [{'end': 2170.549, 'text': "And then what we would do is we would make the first one right here, we would make this the header by putting in, let's say, an H4.", 'start': 2160.804, 'duration': 9.745}, {'end': 2173.851, 'text': "And we'll say header.", 'start': 2172.83, 'duration': 1.021}, {'end': 2175.832, 'text': 'All right.', 'start': 2173.911, 'duration': 1.921}, {'end': 2178.273, 'text': "And then we'll change that to 1, 2, and 3.", 'start': 2175.872, 'duration': 2.401}, {'end': 2181.754, 'text': "Okay And then that's what it would look like.", 'start': 2178.273, 'duration': 3.481}, {'end': 2182.675, 'text': 'So this is the header.', 'start': 2181.814, 'duration': 0.861}, {'end': 2187.03, 'text': 'Another thing we could do is an icon list.', 'start': 2185.089, 'duration': 1.941}, {'end': 2190.052, 'text': "Now, this is actually a lot of markups, so I'm going to paste this in.", 'start': 2187.11, 'duration': 2.942}], 'summary': 'Creating headers and icon lists using markups.', 'duration': 29.248, 'max_score': 2160.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2160804.jpg'}, {'end': 2283.886, 'src': 'embed', 'start': 2247.055, 'weight': 8, 'content': [{'end': 2254.7, 'text': "And then each li, we're going to give a class of waves-effect.", 'start': 2247.055, 'duration': 7.645}, {'end': 2257.013, 'text': 'All right.', 'start': 2256.673, 'duration': 0.34}, {'end': 2259.014, 'text': "Now, let's see.", 'start': 2257.173, 'duration': 1.841}, {'end': 2261.795, 'text': "I'm just going to paste these in.", 'start': 2259.034, 'duration': 2.761}, {'end': 2265.457, 'text': 'Now, usually, one of these would be disabled.', 'start': 2262.276, 'duration': 3.181}, {'end': 2271.44, 'text': "For instance, if we're on page one, the previous button is going to be disabled.", 'start': 2266.098, 'duration': 5.342}, {'end': 2272.561, 'text': "So let's go right here.", 'start': 2271.5, 'duration': 1.061}, {'end': 2277.283, 'text': "And let's say li class disabled.", 'start': 2273.881, 'duration': 3.402}, {'end': 2279.644, 'text': "And we'll have a link in here.", 'start': 2278.463, 'duration': 1.181}, {'end': 2282.105, 'text': "So we'll say a.", 'start': 2280.084, 'duration': 2.021}, {'end': 2282.785, 'text': "And let's see.", 'start': 2282.105, 'duration': 0.68}, {'end': 2283.886, 'text': 'No class here.', 'start': 2283.086, 'duration': 0.8}], 'summary': 'Adding waves-effect class to each li, one li disabled based on page. no other classes added.', 'duration': 36.831, 'max_score': 2247.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2247055.jpg'}], 'start': 1987.505, 'title': 'Materialize, html icon collection, pagination, and breadcrumbs', 'summary': 'Covers creating materialize collections and lists, html icon collection, pagination, and breadcrumbs. it emphasizes similarities to bootstrap, customization of styles, displaying images, and implementing pagination with specific classes.', 'chapters': [{'end': 2190.052, 'start': 1987.505, 'title': 'Materialize collections and lists', 'summary': 'Demonstrates the process of creating collections and lists using materialize, including the use of ul, list items, links, headers, and icon lists, with an emphasis on the similarities to bootstrap and the ability to customize styles for menus and headers.', 'duration': 202.547, 'highlights': ['The chapter illustrates the creation of collections and lists using Materialize, resembling the list groups in Bootstrap, and demonstrates the use of UL, list items, links, headers, and icon lists.', "It highlights the customization options for menus and headers within the collections, showcasing the ability to add darker background on hover and utilize headers with classes like 'with-header'.", 'The demonstration emphasizes the similarities between Materialize collections and Bootstrap list groups, providing a practical understanding for web developers and designers.', 'The tutorial outlines the process of creating collections and lists in a step-by-step manner, ensuring a comprehensive understanding of the markup and structure required for different types of content.']}, {'end': 2246.455, 'start': 2192.194, 'title': 'Html icon collection and pagination', 'summary': 'Covers creating an html icon collection with ul and li elements, displaying an image with span and paragraph, and then moving on to pagination with ul elements, demonstrating the appearance of a mobile list and introducing the concept of pagination.', 'duration': 54.261, 'highlights': ['The chapter covers creating an HTML icon collection with UL and LI elements, displaying an image with span and paragraph, and then moving on to pagination with UL elements, demonstrating the appearance of a mobile list and introducing the concept of pagination.']}, {'end': 2407.803, 'start': 2247.055, 'title': 'Pagination and breadcrumbs in web development', 'summary': "Covers the implementation of pagination and breadcrumbs in web development, including creating buttons with specific classes like 'waves-effect' and 'disabled', and the significance of breadcrumbs in showing a directory structure of pages.", 'duration': 160.748, 'highlights': ["Creating disabled pagination buttons with 'waves-effect' class", 'Implementing active pagination link with specific class and number', "Adding next pagination button with 'waves-effect' class and a specific icon", 'Explaining the significance of breadcrumbs in showing a directory structure of pages']}], 'duration': 420.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ1987505.jpg', 'highlights': ['The tutorial outlines the process of creating collections and lists in a step-by-step manner, ensuring a comprehensive understanding of the markup and structure required for different types of content.', 'The chapter illustrates the creation of collections and lists using Materialize, resembling the list groups in Bootstrap, and demonstrates the use of UL, list items, links, headers, and icon lists.', 'The demonstration emphasizes the similarities between Materialize collections and Bootstrap list groups, providing a practical understanding for web developers and designers.', 'Explaining the significance of breadcrumbs in showing a directory structure of pages', "Adding next pagination button with 'waves-effect' class and a specific icon", 'Implementing active pagination link with specific class and number', "Creating disabled pagination buttons with 'waves-effect' class", 'The chapter covers creating an HTML icon collection with UL and LI elements, displaying an image with span and paragraph, and then moving on to pagination with UL elements, demonstrating the appearance of a mobile list and introducing the concept of pagination.', "It highlights the customization options for menus and headers within the collections, showcasing the ability to add darker background on hover and utilize headers with classes like 'with-header'."]}, {'end': 2922.287, 'segs': [{'end': 2441.289, 'src': 'embed', 'start': 2408.363, 'weight': 4, 'content': [{'end': 2409.524, 'text': 'So that would be a nav.', 'start': 2408.363, 'duration': 1.161}, {'end': 2417.629, 'text': "And in here we'd have a div with the class of navwrapper, just like the navigation menus do.", 'start': 2410.545, 'duration': 7.084}, {'end': 2420.37, 'text': "And then let's do div.", 'start': 2418.809, 'duration': 1.561}, {'end': 2423.072, 'text': "And I'm going to use a grid system class here.", 'start': 2420.51, 'duration': 2.562}, {'end': 2425.353, 'text': "I'm going to say call and then s12.", 'start': 2423.092, 'duration': 2.261}, {'end': 2427.654, 'text': 'Oops, it should be .s12.', 'start': 2425.493, 'duration': 2.161}, {'end': 2435.644, 'text': "And then in here, let's put a link with the class of breadcrumb.", 'start': 2431.28, 'duration': 4.364}, {'end': 2441.289, 'text': "And then this will be, let's say, first.", 'start': 2439.308, 'duration': 1.981}], 'summary': 'Creating a navigation menu with a grid system and a breadcrumb link.', 'duration': 32.926, 'max_score': 2408.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2408363.jpg'}, {'end': 2508.924, 'src': 'embed', 'start': 2480.58, 'weight': 0, 'content': [{'end': 2482.864, 'text': 'So these cards they have.', 'start': 2480.58, 'duration': 2.284}, {'end': 2490.858, 'text': 'I mean they can be very basic with just, you know, some text with a border, or they can have headers and footers and links and all kinds of stuff.', 'start': 2482.864, 'duration': 7.994}, {'end': 2495.494, 'text': 'So this has a class of card, and you can give it a color class if you want.', 'start': 2491.531, 'duration': 3.963}, {'end': 2497.495, 'text': "This one's blue-gray, and it's darkened.", 'start': 2495.534, 'duration': 1.961}, {'end': 2504.22, 'text': 'And then inside the card class, we can have a card content class, which, of course, you can add classes to.', 'start': 2498.016, 'duration': 6.204}, {'end': 2506.662, 'text': 'And then here we have the card title.', 'start': 2504.821, 'duration': 1.841}, {'end': 2508.924, 'text': "It's in a span with the class of card title.", 'start': 2506.682, 'duration': 2.242}], 'summary': 'Transcript discusses the customization options for cards, including color classes and content structure.', 'duration': 28.344, 'max_score': 2480.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2480580.jpg'}, {'end': 2580.309, 'src': 'embed', 'start': 2553.653, 'weight': 1, 'content': [{'end': 2561.495, 'text': 'This is an image card, which basically just has an image and then the title and then the content and then the actions.', 'start': 2553.653, 'duration': 7.842}, {'end': 2563.116, 'text': "So let's look at that.", 'start': 2562.196, 'duration': 0.92}, {'end': 2566.517, 'text': 'Okay, that looks pretty nice as well.', 'start': 2563.136, 'duration': 3.381}, {'end': 2570.838, 'text': 'I mean, I think this stuff looks better than Bootstrap.', 'start': 2566.537, 'duration': 4.301}, {'end': 2578.708, 'text': 'Is it a little more complicated as far as the markup? Yeah, a little bit, but this stuff is pretty quick.', 'start': 2572.765, 'duration': 5.943}, {'end': 2580.309, 'text': "You'll learn it pretty quick.", 'start': 2579.229, 'duration': 1.08}], 'summary': 'Comparison of image card design to bootstrap; slightly more complex markup but quick to learn.', 'duration': 26.656, 'max_score': 2553.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2553653.jpg'}, {'end': 2706.914, 'src': 'embed', 'start': 2677.752, 'weight': 3, 'content': [{'end': 2679.512, 'text': 'All right.', 'start': 2677.752, 'duration': 1.76}, {'end': 2680.893, 'text': "Let's put an H1 as well.", 'start': 2679.552, 'duration': 1.341}, {'end': 2686.595, 'text': 'All right.', 'start': 2686.415, 'duration': 0.18}, {'end': 2690.717, 'text': "So for forms, let's open up a form tag.", 'start': 2686.815, 'duration': 3.902}, {'end': 2692.677, 'text': "We don't need an action.", 'start': 2691.817, 'duration': 0.86}, {'end': 2693.918, 'text': "We're not actually submitting it.", 'start': 2692.717, 'duration': 1.201}, {'end': 2696.129, 'text': "And we're going to have a div.", 'start': 2695.049, 'duration': 1.08}, {'end': 2699.311, 'text': 'And this is going to have a class of input field.', 'start': 2696.85, 'duration': 2.461}, {'end': 2704.533, 'text': "And if you're used to Bootstrap, you can kind of think of this as form group, the class of form group.", 'start': 2699.891, 'duration': 4.642}, {'end': 2706.914, 'text': "And then we're going to put an input.", 'start': 2705.333, 'duration': 1.581}], 'summary': 'Creating a form with an input field and a div.', 'duration': 29.162, 'max_score': 2677.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2677752.jpg'}], 'start': 2408.363, 'title': 'Materialize css components, forms, and preloaders', 'summary': 'Covers the usage and markup of different materialize css components including navigation, cards, image cards, horizontal cards, and card panels, along with forms such as cards, chips, form fields, and text areas, and preloaders with determinate progress bars.', 'chapters': [{'end': 2630.189, 'start': 2408.363, 'title': 'Materialize css components', 'summary': 'Covers the usage and markup of different materialize css components including navigation, cards, image cards, horizontal cards, and card panels.', 'duration': 221.826, 'highlights': ['The chapter covers the usage and markup of different Materialize CSS components including navigation, cards, image cards, horizontal cards, and card panels.', 'The cards in Materialize CSS can be basic with text and a border or more complex with headers, footers, links, and other elements.', 'The image cards in Materialize CSS consist of an image, title, content, and actions, presenting a visually appealing design.', 'Materialize CSS offers horizontal cards that display the image on the side rather than the top, providing a distinct layout option.', 'Card panels in Materialize CSS are simple and can have a color added to them for customization.']}, {'end': 2922.287, 'start': 2630.65, 'title': 'Materialize css forms & preloaders', 'summary': 'Introduces materialize css forms and preloaders, including the use of cards, chips for tags, form fields with client-side validation, and text areas, as well as preloaders with determinate progress bars.', 'duration': 291.637, 'highlights': ['Materialize CSS forms with client-side validation Materialize CSS provides form fields with built-in client-side validation, such as validating email format and providing visual feedback with green and red lines, improving user experience.', 'Materialize CSS chips for tags Materialize CSS utilizes chips, similar to tags, which offer a convenient way to display and manage tags, enhancing the user interface for blog posts and other content.', 'Materialize CSS preloaders with determinate progress bars Materialize CSS preloaders feature determinate progress bars that can be customized with a specific percentage width, providing a visual representation of progress or loading status.', 'Materialize CSS forms and text areas Materialize CSS offers aesthetically pleasing forms and text areas with interactive features such as label shrinking and color change on input focus, enhancing the visual appeal and user experience.']}], 'duration': 513.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2408363.jpg', 'highlights': ['The chapter covers the usage and markup of different Materialize CSS components including navigation, cards, image cards, horizontal cards, and card panels.', 'Materialize CSS forms with client-side validation Materialize CSS provides form fields with built-in client-side validation, such as validating email format and providing visual feedback with green and red lines, improving user experience.', 'Materialize CSS chips for tags Materialize CSS utilizes chips, similar to tags, which offer a convenient way to display and manage tags, enhancing the user interface for blog posts and other content.', 'Materialize CSS preloaders with determinate progress bars Materialize CSS preloaders feature determinate progress bars that can be customized with a specific percentage width, providing a visual representation of progress or loading status.', 'The cards in Materialize CSS can be basic with text and a border or more complex with headers, footers, links, and other elements.']}, {'end': 3366.725, 'segs': [{'end': 3041.769, 'src': 'embed', 'start': 3003.404, 'weight': 2, 'content': [{'end': 3006.365, 'text': "so let's create a div here and i'm going to give it a class of row.", 'start': 3003.404, 'duration': 2.961}, {'end': 3013.827, 'text': "you guys have seen that before, if you're familiar with bootstrap or pretty much any framework with a grid, and then the way that we do this is,", 'start': 3006.365, 'duration': 7.462}, {'end': 3019.929, 'text': "we'll have a div with the class of call and then also the class of, let's say, s1.", 'start': 3013.827, 'duration': 6.102}, {'end': 3026.711, 'text': "so that's going to be a one column row, all right, and then in here i'm just going to put a card so that i can give it a background.", 'start': 3019.929, 'duration': 6.782}, {'end': 3034.563, 'text': "so let's say div and we'll give it a class of card panel And let's also give it a class of gray.", 'start': 3026.711, 'duration': 7.852}, {'end': 3037.125, 'text': "Okay And then I'll just put a one in here.", 'start': 3035.444, 'duration': 1.681}, {'end': 3041.769, 'text': "So this is a one column div and it's a 12, it's a, it's 12 column base.", 'start': 3037.485, 'duration': 4.284}], 'summary': 'Creating a one-column div with a background, using class row, call s1, card panel, and gray.', 'duration': 38.365, 'max_score': 3003.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ3003404.jpg'}, {'end': 3100.383, 'src': 'embed', 'start': 3072.619, 'weight': 0, 'content': [{'end': 3079.984, 'text': "We just need call and then s and the number of rows that it's going to take up, or the number of columns.", 'start': 3072.619, 'duration': 7.365}, {'end': 3082.966, 'text': "So let's do another one under it.", 'start': 3081.164, 'duration': 1.802}, {'end': 3085.047, 'text': "We'll do div with the class of row.", 'start': 3083.206, 'duration': 1.841}, {'end': 3090.219, 'text': "And let's do an 8 column and a 4 column.", 'start': 3086.898, 'duration': 3.321}, {'end': 3094.101, 'text': "That's pretty common, you know, if you have a main area and then you have a sidebar.", 'start': 3090.239, 'duration': 3.862}, {'end': 3100.383, 'text': "So we'll say div and we'll give this a class of call and also S8.", 'start': 3094.681, 'duration': 5.702}], 'summary': 'Using html to create a layout with 8 and 4 columns for main and sidebar.', 'duration': 27.764, 'max_score': 3072.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ3072619.jpg'}, {'end': 3197.912, 'src': 'embed', 'start': 3129.229, 'weight': 4, 'content': [{'end': 3136.411, 'text': "So I'm just going to copy this, and then we'll just change that to 4, 4, and then we'll paste in one more.", 'start': 3129.229, 'duration': 7.182}, {'end': 3140.972, 'text': 'Okay, as long as it equals 12, and there we go.', 'start': 3136.431, 'duration': 4.541}, {'end': 3143.233, 'text': 'Okay, and you can do any combination that you want.', 'start': 3140.992, 'duration': 2.241}, {'end': 3146.456, 'text': 'Now we can also offset columns.', 'start': 3144.454, 'duration': 2.002}, {'end': 3152.521, 'text': "So let's go right here and we'll say offsetting.", 'start': 3147.196, 'duration': 5.325}, {'end': 3156.164, 'text': "So I'm going to do a div with the class of row.", 'start': 3153.922, 'duration': 2.242}, {'end': 3161.869, 'text': "And in this row, let's do div with the class of call and S12.", 'start': 3157.105, 'duration': 4.764}, {'end': 3166.293, 'text': "And see, we'll just grab one of these panels.", 'start': 3164.391, 'duration': 1.902}, {'end': 3176.545, 'text': 'So this right here will say this div is 12 columns.', 'start': 3170.103, 'duration': 6.442}, {'end': 3186.549, 'text': "And then under it, let's actually just copy it.", 'start': 3183.167, 'duration': 3.382}, {'end': 3191.17, 'text': "And then under it, we're going to put a 6 column div.", 'start': 3187.949, 'duration': 3.221}, {'end': 3193.871, 'text': "So we'll change that to 6.", 'start': 3191.23, 'duration': 2.641}, {'end': 3196.292, 'text': 'And I want this to be offset by 6.', 'start': 3193.871, 'duration': 2.421}, {'end': 3197.912, 'text': 'So it should be pushed over.', 'start': 3196.292, 'duration': 1.62}], 'summary': 'Demonstrating layout adjustments in web development with columns and offsets.', 'duration': 68.683, 'max_score': 3129.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ3129229.jpg'}], 'start': 2922.287, 'title': 'Creating circular preloaders and understanding materialize grid system', 'summary': 'Covers the creation of circular preloaders using specific classes and options, resulting in a spinner graphic with animation. it also introduces the materialize grid system, featuring a 12-column layout, facilitating various column combinations, offsets, and order changes, while offering visually appealing ui and javascript widgets.', 'chapters': [{'end': 2973.637, 'start': 2922.287, 'title': 'Creating circular preloaders', 'summary': 'Discusses creating circular preloaders with specific classes and options, resulting in a spinner graphic with animation.', 'duration': 51.35, 'highlights': ["The chapter demonstrates creating circular preloaders with the class 'big' and 'active', allowing for customization of the spinner color and resulting in a spinner graphic.", "The process involves pasting specific markup and changing the class to 'indeterminate', resulting in a preloader with animation."]}, {'end': 3366.725, 'start': 2974.317, 'title': 'Understanding materialize grid system', 'summary': 'Introduces materialize grid system, which consists of a 12-column layout, allows for easy creation of different column combinations, offsets, and order changes, and promises a unique and visually appealing ui, also hinting at the availability of javascript widgets.', 'duration': 392.408, 'highlights': ['Materialize grid system consists of a 12-column layout, allowing for the creation of different column combinations. The Materialize grid system follows a 12-column layout, enabling the creation of various column combinations for flexible UI design.', 'The grid system allows for offsets and order changes, providing flexibility in positioning and layout composition. Utilizing offsets and order changes within the grid system provides flexibility in positioning and composition of the layout.', 'The presenter suggests that Materialize offers a visually appealing and unique UI, potentially surpassing Bootstrap in aesthetics. The presenter expresses a preference for Materialize over Bootstrap, deeming it visually appealing and unique.', 'The chapter hints at the availability of JavaScript widgets like sliders, collapse menus, and modals, indicating potential future discussions on these features. The chapter hints at the availability of JavaScript widgets like sliders, collapse menus, and modals within Materialize, suggesting potential future discussions on these features.']}], 'duration': 444.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nqT8c5OFjEQ/pics/nqT8c5OFjEQ2922287.jpg', 'highlights': ["The chapter demonstrates creating circular preloaders with the class 'big' and 'active', allowing for customization of the spinner color and resulting in a spinner graphic.", "The process involves pasting specific markup and changing the class to 'indeterminate', resulting in a preloader with animation.", 'Materialize grid system consists of a 12-column layout, allowing for the creation of different column combinations.', 'The grid system allows for offsets and order changes, providing flexibility in positioning and layout composition.', 'The presenter suggests that Materialize offers a visually appealing and unique UI, potentially surpassing Bootstrap in aesthetics.', 'The chapter hints at the availability of JavaScript widgets like sliders, collapse menus, and modals, indicating potential future discussions on these features.']}], 'highlights': ["Materialize CSS is a responsive front-end framework like bootstrap, based off of Google's material design, created in 2014 for all Google UIs and user interfaces.", 'The framework offers responsive text and images, adjusting to screen size and providing a user-friendly experience.', 'The chapter covers the usage and markup of different Materialize CSS components including navigation, cards, image cards, horizontal cards, and card panels.', 'The tutorial outlines the process of creating collections and lists in a step-by-step manner, ensuring a comprehensive understanding of the markup and structure required for different types of content.', 'The chapter may be a two-parter, as it also aims to explore the JavaScript widgets of Materialize CSS.', 'The chapter demonstrates using Atom Live Server to view and edit HTML files, showcasing the process of adding a title and a div with the class of container, and highlighting the use of color classes with lighten and darken options.', 'The chapter highlights the process of adding click effects and customizations to buttons, including the addition of waves-effect and waves-light classes, adjusting button size using btn-large class, and the ability to use any color with options to lighten and darken.', 'The chapter discusses using the CDN method to set up Materialize CSS instead of building from source or using SAS, highlighting the focus on look and design over code compilation.', 'The chapter demonstrates the customization of buttons and icons using materialized design The tutorial showcases the versatility and customization options available for buttons and icons using materialized design.', 'The chapter demonstrates the customization of buttons and icons using materialized design The tutorial showcases the versatility and customization options available for buttons and icons using materialized design.', 'The chapter illustrates the creation of floating buttons with icons, such as a red floating button with a plus icon, demonstrating the visual effects of the implementation.', "The chapter demonstrates creating circular preloaders with the class 'big' and 'active', allowing for customization of the spinner color and resulting in a spinner graphic.", "The chapter illustrates the usage of classes to hide content based on screen size, including 'hidden for all devices', 'hidden for mobile devices', 'hidden for tablets', and 'hidden for desktop big screens', emphasizing the importance of responsive design in web development."]}