title
Custom Bootstrap Theme With Sass

description
In this video we will build a completely custom Twitter Bootstrap theme with the Sass Pre-compiler. We will use other technologies such as... Bootstrap-sass Koala NPM Bower Live-Server Font-Awesome Theme Files - https://github.com/bradtraversy/bizlight_theme

detail
{'title': 'Custom Bootstrap Theme With Sass', 'heatmap': [{'end': 507.553, 'start': 347.346, 'weight': 1}, {'end': 696.437, 'start': 578.893, 'weight': 0.962}, {'end': 773.085, 'start': 730.953, 'weight': 0.728}, {'end': 1047.203, 'start': 845.904, 'weight': 0.729}, {'end': 2476.307, 'start': 2427.507, 'weight': 0.765}], 'summary': 'Learn to build a custom bootstrap theme with sass, covering website layout, setting up koala, node.js, and bootstrap, customizing project themes, implementing font awesome and social media icons, customizing icons, styling, website design, creating a showcase, building clean code, web development, and website customization for about, services, and contact pages.', 'chapters': [{'end': 182.262, 'segs': [{'end': 76.902, 'src': 'embed', 'start': 0.75, 'weight': 0, 'content': [{'end': 9.299, 'text': "Hey guys, in this video we're going to build a custom bootstrap theme and we're going to be using Sass which is a CSS precompiler.", 'start': 0.75, 'duration': 8.549}, {'end': 20.792, 'text': "Now this is a project based video so I'm not going to go too much into tutorial content and really explaining the syntax and methodology and all that.", 'start': 10.24, 'duration': 10.552}, {'end': 23.936, 'text': "If you follow along it's actually really easy.", 'start': 21.573, 'duration': 2.363}, {'end': 29.002, 'text': 'We will be using quite a few different technologies but just very simple stuff.', 'start': 24.356, 'duration': 4.646}, {'end': 31.125, 'text': "So this is what we'll be building.", 'start': 29.663, 'duration': 1.462}, {'end': 41.837, 'text': "This is a bootstrap template and the idea is that we're using SAS so that we can have variables where we can just simply change a color,", 'start': 32.086, 'duration': 9.751}, {'end': 48.061, 'text': 'change a value in the SAS file and everything all the main colors will change.', 'start': 41.837, 'duration': 6.224}, {'end': 50.202, 'text': 'we can easily change font sizes.', 'start': 48.061, 'duration': 2.141}, {'end': 52.383, 'text': 'just makes things very, very customizable.', 'start': 50.202, 'duration': 2.181}, {'end': 61.149, 'text': 'Alright, so we just have a nav bar with some icons up here, some links, a main showcase area with a stock photo in the background.', 'start': 52.403, 'duration': 8.746}, {'end': 65.632, 'text': 'We have this area here with some icons from Font Awesome.', 'start': 62.288, 'duration': 3.344}, {'end': 71.317, 'text': 'Right here we have an image and then we have a bootstrap accordion menu.', 'start': 66.653, 'duration': 4.664}, {'end': 76.902, 'text': 'Then we have a newsletter subscribe form down here and a footer.', 'start': 72.438, 'duration': 4.464}], 'summary': 'Building a custom bootstrap theme using sass for easy customization and incorporating various technologies in a project-based video.', 'duration': 76.152, 'max_score': 0.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk750.jpg'}, {'end': 182.262, 'src': 'embed', 'start': 101.72, 'weight': 5, 'content': [{'end': 108.085, 'text': "so it's not the the greatest template in the world, but it's something to build and i think it looks pretty decent.", 'start': 101.72, 'duration': 6.365}, {'end': 109.302, 'text': 'All right.', 'start': 108.902, 'duration': 0.4}, {'end': 114.425, 'text': 'so this is the SAS website, saslang.com.', 'start': 109.302, 'duration': 5.123}, {'end': 118.167, 'text': 'Shows us pretty much everything that it offers, variables.', 'start': 115.106, 'duration': 3.061}, {'end': 124.231, 'text': "You can see here we're setting a primary color using a hexadecimal value.", 'start': 118.648, 'duration': 5.583}, {'end': 127.312, 'text': 'And then we can use that in our styles.', 'start': 124.651, 'duration': 2.661}, {'end': 132.836, 'text': 'OK, right here you can see that variables need to start with a dollar sign.', 'start': 127.993, 'duration': 4.843}, {'end': 134.957, 'text': 'We can also nest styles.', 'start': 133.556, 'duration': 1.401}, {'end': 136.777, 'text': 'So you can see we have a nav here.', 'start': 135.237, 'duration': 1.54}, {'end': 141.939, 'text': 'And then we can add ULs or whatever we want to style inside of that nav.', 'start': 137.217, 'duration': 4.722}, {'end': 146.441, 'text': 'So we can essentially structure the CSS just like our HTML.', 'start': 142.74, 'duration': 3.701}, {'end': 149.91, 'text': 'Partials, we can include partials.', 'start': 148.069, 'duration': 1.841}, {'end': 152.191, 'text': 'We can import other SAS files.', 'start': 150.09, 'duration': 2.101}, {'end': 156.292, 'text': 'You can see that they use a SCSS extension.', 'start': 153.091, 'duration': 3.201}, {'end': 159.274, 'text': 'Mixins, which are like functions.', 'start': 157.413, 'duration': 1.861}, {'end': 162.415, 'text': 'We can extend and inherit classes.', 'start': 160.394, 'duration': 2.021}, {'end': 164.816, 'text': 'And we can use operators.', 'start': 163.435, 'duration': 1.381}, {'end': 167.917, 'text': 'And you can even have if statements and things like that.', 'start': 165.656, 'duration': 2.261}, {'end': 169.598, 'text': "But we're not going to get too deep into it.", 'start': 167.977, 'duration': 1.621}, {'end': 179.76, 'text': 'Now, SAS has to be compiled into regular CSS so that you can use it in your theme or in your website.', 'start': 171.713, 'duration': 8.047}, {'end': 182.262, 'text': "And there's a lot of different ways to do that.", 'start': 180.4, 'duration': 1.862}], 'summary': 'Sas website saslang.com offers variables, mixins, and scss extension for structuring css like html.', 'duration': 80.542, 'max_score': 101.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk101720.jpg'}], 'start': 0.75, 'title': 'Customizing bootstrap themes and website layout', 'summary': 'Covers building a custom bootstrap theme using sass, focusing on project-based learning. it also discusses a customizable website layout with various components like navigation bar, showcase area, font awesome icons, and more. additionally, it introduces the features of the sas website, including the use of variables, nesting styles, mixins, and compilation into regular css.', 'chapters': [{'end': 50.202, 'start': 0.75, 'title': 'Custom bootstrap theme with sass', 'summary': 'Covers building a custom bootstrap theme using sass, a css precompiler, for easy customization of colors and font sizes, with a focus on project-based learning and minimal tutorial content.', 'duration': 49.452, 'highlights': ['The chapter covers building a custom bootstrap theme using Sass, a CSS precompiler, for easy customization of colors and font sizes.', 'The video is project-based, focusing less on tutorial content and more on practical application, making it easy to follow along.', 'Using Sass allows for the creation of variables to easily change colors and font sizes in the template.']}, {'end': 101.72, 'start': 50.202, 'title': 'Customizable website layout', 'summary': 'Discusses a customizable website layout with a navigation bar, main showcase area, font awesome icons, image, bootstrap accordion menu, newsletter subscribe form, and footer, as well as simple inner pages and services pages with panels, list groups, and contact forms.', 'duration': 51.518, 'highlights': ['The website layout includes a navigation bar, main showcase area, Font Awesome icons, image, bootstrap accordion menu, newsletter subscribe form, and a footer.', 'The inner pages feature a title bar with the page name, a panel with content, and a list group.', 'The services pages contain panels with various services and simple contact forms.', 'The email form is present on every page for easy access.', 'The layout is highly customizable, offering flexibility for different content and elements.']}, {'end': 182.262, 'start': 101.72, 'title': 'Introduction to sas website', 'summary': 'Introduces the features of the sas website, including the use of variables, nesting styles, partials, mixins, extending and inheriting classes, operators, and compilation into regular css.', 'duration': 80.542, 'highlights': ['The SAS website offers features such as variables, nesting styles, partials, mixins, extending and inheriting classes, operators, and compilation into regular CSS.', 'Variables in SAS need to start with a dollar sign and can be used to set primary colors using hexadecimal values.', 'SAS allows nesting styles, enabling the structuring of CSS similar to HTML.', 'The use of mixins in SAS is compared to functions, and SAS also allows the use of operators and if statements.']}], 'duration': 181.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk750.jpg', 'highlights': ['The chapter covers building a custom bootstrap theme using Sass for easy customization of colors and font sizes.', 'The video is project-based, focusing on practical application, making it easy to follow along.', 'Using Sass allows for the creation of variables to easily change colors and font sizes in the template.', 'The website layout includes a navigation bar, main showcase area, Font Awesome icons, image, bootstrap accordion menu, newsletter subscribe form, and a footer.', 'The layout is highly customizable, offering flexibility for different content and elements.', 'The SAS website offers features such as variables, nesting styles, partials, mixins, extending and inheriting classes, operators, and compilation into regular CSS.', 'Variables in SAS can be used to set primary colors using hexadecimal values.', 'SAS allows nesting styles, enabling the structuring of CSS similar to HTML.', 'The use of mixins in SAS is compared to functions, and SAS also allows the use of operators and if statements.']}, {'end': 888.485, 'segs': [{'end': 273.337, 'src': 'embed', 'start': 200.116, 'weight': 0, 'content': [{'end': 210.343, 'text': "And then we also want to install Node.js, because we're going to use a couple things from the NPM from Node package modules, including Bower,", 'start': 200.116, 'duration': 10.227}, {'end': 213.886, 'text': 'which is a client-side package manager.', 'start': 210.343, 'duration': 3.543}, {'end': 217.248, 'text': "So we'll use Bower to install Bootstrap and Font Awesome.", 'start': 214.026, 'duration': 3.222}, {'end': 220.23, 'text': 'All right, so I already have Node.js installed.', 'start': 218.029, 'duration': 2.201}, {'end': 222.652, 'text': "If you don't, just go ahead and download it and install it.", 'start': 220.27, 'duration': 2.382}, {'end': 226.555, 'text': "I don't have Koala installed, so I'm going to just go ahead and download that.", 'start': 223.493, 'duration': 3.062}, {'end': 233.009, 'text': 'Okay, go ahead and click the download.', 'start': 231.288, 'duration': 1.721}, {'end': 239.114, 'text': "And let's save this into downloads.", 'start': 234.731, 'duration': 4.383}, {'end': 242.717, 'text': "It's a really small program.", 'start': 241.436, 'duration': 1.281}, {'end': 245.74, 'text': "All right, so we'll just run that and install it.", 'start': 243.718, 'duration': 2.022}, {'end': 253.126, 'text': "Okay, let's just click next and next.", 'start': 245.76, 'duration': 7.366}, {'end': 260.232, 'text': 'Close that up.', 'start': 259.531, 'duration': 0.701}, {'end': 268.252, 'text': "All right, so that's all set.", 'start': 267.031, 'duration': 1.221}, {'end': 273.337, 'text': "We can keep that checked and click Finish, and it'll launch Koala for us.", 'start': 268.693, 'duration': 4.644}], 'summary': 'Installing node.js and bower for bootstrap and font awesome, then installing koala for compiling.', 'duration': 73.221, 'max_score': 200.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk200116.jpg'}, {'end': 507.553, 'src': 'heatmap', 'start': 347.346, 'weight': 1, 'content': [{'end': 354.453, 'text': 'So we want to say NPM install dash G, which means you want to install it globally so that you can access it from anywhere.', 'start': 347.346, 'duration': 7.107}, {'end': 355.414, 'text': 'All right.', 'start': 354.473, 'duration': 0.941}, {'end': 356.816, 'text': 'And then we want to say Bauer.', 'start': 355.494, 'duration': 1.322}, {'end': 367.596, 'text': 'All right, so now that we have bower installed, we can install bootstrap sass.', 'start': 363.291, 'duration': 4.305}, {'end': 375.944, 'text': 'So we want to say bower install bootstrap dash sass.', 'start': 368.236, 'duration': 7.708}, {'end': 379.148, 'text': 'And then we want to add dash dash save.', 'start': 377.005, 'duration': 2.143}, {'end': 385.39, 'text': "And what that's going to do is it's going to create a folder called Bower Components.", 'start': 380.948, 'duration': 4.442}, {'end': 391.092, 'text': 'And if we look in there, we have our Bootstrap SAS folder, which has everything we need for Bootstrap.', 'start': 386.07, 'duration': 5.022}, {'end': 397.355, 'text': 'It also installs jQuery because in order to use the Bootstrap JavaScript, you need to have jQuery.', 'start': 391.553, 'duration': 5.802}, {'end': 400.536, 'text': 'So it handles that dependency for you, which is really nice.', 'start': 397.755, 'duration': 2.781}, {'end': 404.158, 'text': "So we don't have to worry about installing jQuery separately.", 'start': 400.576, 'duration': 3.582}, {'end': 415.282, 'text': "So now what we want to do is go back outside of the Bower components, right in the theme folder, and we're going to create a folder called sass,", 'start': 405.339, 'duration': 9.943}, {'end': 422.544, 'text': 'which is where all of our SCSS files will go, and then also a folder called stylesheets,', 'start': 415.282, 'duration': 7.262}, {'end': 429.046, 'text': 'which is where the compiled CSS will go that we actually use that we include in our index HTML file.', 'start': 422.544, 'duration': 6.502}, {'end': 435.803, 'text': "All right, now inside the SAS folder, we're going to create a file.", 'start': 429.841, 'duration': 5.962}, {'end': 439.624, 'text': "And we're going to call this app.scss.", 'start': 436.023, 'duration': 3.601}, {'end': 446.886, 'text': 'This is basically where we want to connect all of our SAS files together, where we want to import them.', 'start': 440.304, 'duration': 6.582}, {'end': 449.907, 'text': "Now I'm going to open up my editor.", 'start': 448.086, 'duration': 1.821}, {'end': 452.828, 'text': "And I'm using Atom, which I would recommend.", 'start': 449.967, 'duration': 2.861}, {'end': 453.428, 'text': "It's free.", 'start': 452.888, 'duration': 0.54}, {'end': 454.028, 'text': "It's really nice.", 'start': 453.468, 'duration': 0.56}, {'end': 455.029, 'text': 'It has a lot of features.', 'start': 454.048, 'duration': 0.981}, {'end': 456.389, 'text': "It's nice and clean.", 'start': 455.569, 'duration': 0.82}, {'end': 459.61, 'text': "We're going to add that folder to our project.", 'start': 456.409, 'duration': 3.201}, {'end': 464.333, 'text': "Okay, so I'm going to just open up the BizLite theme.", 'start': 461.892, 'duration': 2.441}, {'end': 473.658, 'text': "Okay, now if we look in Bower Components and then Bootstrap SAS and then Assets, you'll see we have the style sheets.", 'start': 465.714, 'duration': 7.944}, {'end': 480.662, 'text': 'If we look inside there, we have this main Bootstrap, underscore Bootstrap dot SCSS.', 'start': 474.378, 'duration': 6.284}, {'end': 489.106, 'text': 'And basically what this does, it imports all the different features of Bootstrap because each feature has its own SCSS file.', 'start': 481.562, 'duration': 7.544}, {'end': 497.589, 'text': "If we look in this folder here, You'll see alert, badges, carousel, navbar, they all have their own SCSS file.", 'start': 489.646, 'duration': 7.943}, {'end': 500.51, 'text': 'And then that main bootstrap file connects them all.', 'start': 498.07, 'duration': 2.44}, {'end': 507.553, 'text': 'So what we want to do is import that main bootstrap file into our app.scss file.', 'start': 501.031, 'duration': 6.522}], 'summary': 'Installing bootstrap sas using bower, creating scss files, and importing into app.scss.', 'duration': 160.207, 'max_score': 347.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk347346.jpg'}, {'end': 429.046, 'src': 'embed', 'start': 397.755, 'weight': 3, 'content': [{'end': 400.536, 'text': 'So it handles that dependency for you, which is really nice.', 'start': 397.755, 'duration': 2.781}, {'end': 404.158, 'text': "So we don't have to worry about installing jQuery separately.", 'start': 400.576, 'duration': 3.582}, {'end': 415.282, 'text': "So now what we want to do is go back outside of the Bower components, right in the theme folder, and we're going to create a folder called sass,", 'start': 405.339, 'duration': 9.943}, {'end': 422.544, 'text': 'which is where all of our SCSS files will go, and then also a folder called stylesheets,', 'start': 415.282, 'duration': 7.262}, {'end': 429.046, 'text': 'which is where the compiled CSS will go that we actually use that we include in our index HTML file.', 'start': 422.544, 'duration': 6.502}], 'summary': 'Using bower to manage dependencies and organize scss and css files in a theme folder.', 'duration': 31.291, 'max_score': 397.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk397755.jpg'}, {'end': 696.437, 'src': 'heatmap', 'start': 578.893, 'weight': 0.962, 'content': [{'end': 583.937, 'text': "Now, right now, we're not getting, this isn't compiling because we haven't added the project to Koala.", 'start': 578.893, 'duration': 5.044}, {'end': 585.598, 'text': "So we're going to do that now.", 'start': 584.397, 'duration': 1.201}, {'end': 593.125, 'text': "So in Koala, we're going to click the plus sign, and we're going to navigate to our projects folder.", 'start': 586.199, 'duration': 6.926}, {'end': 604.737, 'text': 'And where is it? BizLite Theme, and then SAS, and then click OK.', 'start': 595.987, 'duration': 8.75}, {'end': 606.098, 'text': 'All right.', 'start': 605.758, 'duration': 0.34}, {'end': 610.879, 'text': "Now, if we click on that, you'll see that it's checked to auto-compile.", 'start': 606.158, 'duration': 4.721}, {'end': 611.88, 'text': "So that's good.", 'start': 610.939, 'duration': 0.941}, {'end': 612.62, 'text': "That's what we want.", 'start': 611.9, 'duration': 0.72}, {'end': 615.021, 'text': 'And it should have compiled.', 'start': 613.38, 'duration': 1.641}, {'end': 616.001, 'text': "So let's take a look.", 'start': 615.081, 'duration': 0.92}, {'end': 622.243, 'text': 'If we look in CSS, in the CSS folder, we now have app.css.', 'start': 616.941, 'duration': 5.302}, {'end': 627.065, 'text': "And if we take a look at that, you'll see that includes Bootstrap, includes everything.", 'start': 622.963, 'duration': 4.102}, {'end': 628.525, 'text': 'All right.', 'start': 628.225, 'duration': 0.3}, {'end': 630.326, 'text': "It's actually a pretty big file.", 'start': 628.605, 'duration': 1.721}, {'end': 633.953, 'text': 'So it includes all of that.', 'start': 631.952, 'duration': 2.001}, {'end': 640.614, 'text': "If we look in here, everything that's in all of these files right here, it includes.", 'start': 635.453, 'duration': 5.161}, {'end': 642.095, 'text': "So that's good.", 'start': 641.555, 'duration': 0.54}, {'end': 642.855, 'text': "That's what we want.", 'start': 642.135, 'duration': 0.72}, {'end': 648.777, 'text': 'So now what we want to do is create an index.html in our root.', 'start': 645.056, 'duration': 3.721}, {'end': 653.078, 'text': "Let's say new file, index.html.", 'start': 648.797, 'duration': 4.281}, {'end': 656.999, 'text': "And we'll just add some basic HTML here.", 'start': 654.678, 'duration': 2.321}, {'end': 664.777, 'text': "Actually, you know what we'll do is we'll copy some code from the Get Bootstrap website.", 'start': 658.982, 'duration': 5.795}, {'end': 667.886, 'text': "So let's go to Get Bootstrap.", 'start': 665.74, 'duration': 2.146}, {'end': 672.428, 'text': 'and Getting Started and then Examples.', 'start': 670.007, 'duration': 2.421}, {'end': 675.289, 'text': 'You can see we have this Starter Template.', 'start': 673.508, 'duration': 1.781}, {'end': 678.03, 'text': "I'm going to click on that and then do a Control-U.", 'start': 675.549, 'duration': 2.481}, {'end': 686.233, 'text': "Then we'll just copy everything that's here and we'll paste it in our index.html.", 'start': 679.07, 'duration': 7.163}, {'end': 688.054, 'text': 'Now we can get rid of a lot of this stuff.', 'start': 686.313, 'duration': 1.741}, {'end': 692.615, 'text': "Let's get rid of this icon, description, author.", 'start': 689.094, 'duration': 3.521}, {'end': 696.437, 'text': "We're going to keep the viewport because this is going to be a responsive theme.", 'start': 693.336, 'duration': 3.101}], 'summary': 'Adding project to koala, auto-compiling checked, app.css created with bootstrap, index.html created using get bootstrap website code.', 'duration': 117.544, 'max_score': 578.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk578893.jpg'}, {'end': 773.085, 'src': 'heatmap', 'start': 730.953, 'weight': 0.728, 'content': [{'end': 735.337, 'text': "And let's see, we have that in CSS.", 'start': 730.953, 'duration': 4.384}, {'end': 738.621, 'text': 'All right, you know what? I created a folder called style sheets.', 'start': 735.558, 'duration': 3.063}, {'end': 745.687, 'text': "We actually don't need that since it compiled it into the CSS folder.", 'start': 739.261, 'duration': 6.426}, {'end': 750.792, 'text': 'So CSS slash app dot CSS.', 'start': 747.269, 'duration': 3.523}, {'end': 754.181, 'text': "All right, so let's see.", 'start': 752.301, 'duration': 1.88}, {'end': 758.902, 'text': "Down here, we're going to get rid of all these script includes as well.", 'start': 754.241, 'duration': 4.661}, {'end': 760.783, 'text': "So let's save that.", 'start': 759.823, 'duration': 0.96}, {'end': 768.604, 'text': "And we'll go and try to open up that index HTML with Chrome.", 'start': 762.543, 'duration': 6.061}, {'end': 770.585, 'text': 'And there we go.', 'start': 770.065, 'duration': 0.52}, {'end': 773.085, 'text': 'So you can see that the CSS is being included.', 'start': 770.645, 'duration': 2.44}], 'summary': 'Css file compiled into folder, script includes removed, css successfully included in index html.', 'duration': 42.132, 'max_score': 730.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk730953.jpg'}, {'end': 862.388, 'src': 'embed', 'start': 803.208, 'weight': 4, 'content': [{'end': 811.293, 'text': 'We have in Bootstrap SAS all of these SCSS files that are being imported into this one Bootstrap SCSS file.', 'start': 803.208, 'duration': 8.085}, {'end': 822.36, 'text': "And then what we're doing is we're importing that into our app.css file right here, as well as the Compass version.", 'start': 812.054, 'duration': 10.306}, {'end': 828.985, 'text': "And then we're compiling it using Koala into app.css.", 'start': 823.061, 'duration': 5.924}, {'end': 832.247, 'text': "And then we're just including that in our HTML right here.", 'start': 829.025, 'duration': 3.222}, {'end': 835.862, 'text': "so that's what we've done so far hopefully uh.", 'start': 833.061, 'duration': 2.801}, {'end': 838.062, 'text': "that's not confusing now.", 'start': 835.862, 'duration': 2.2}, {'end': 845.904, 'text': "right now we're loading this index html file right from the file system and that's fine if you want to keep doing that, but uh.", 'start': 838.062, 'duration': 7.842}, {'end': 850.965, 'text': 'what i want to do is install a dev server using npm and uh.', 'start': 845.904, 'duration': 5.061}, {'end': 862.388, 'text': "actually run it in a server so i'm gonna go to my command line and we're gonna say npm install dash g for global and then Live Server.", 'start': 850.965, 'duration': 11.423}], 'summary': 'Using sass files, importing into app.css, compiling with koala, and setting up live server using npm.', 'duration': 59.18, 'max_score': 803.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk803208.jpg'}], 'start': 182.542, 'title': 'Setting up koala, node.js, and bootstrap for sas file compilation', 'summary': 'Discusses setting up koala, a gui tool for compiling sas files, and installing node.js, along with using bower to install bootstrap and font awesome. it also covers setting up bootstrap for the biz light theme, including installing bootstrap sass using bower, creating scss files, compiling with koala, and running a live server on a specific port.', 'chapters': [{'end': 273.337, 'start': 182.542, 'title': 'Setting up koala and node.js for sas file compilation', 'summary': 'Discusses setting up koala, a gui tool for compiling sas files, and installing node.js, along with using bower to install bootstrap and font awesome.', 'duration': 90.795, 'highlights': ['Installing Koala and Node.js Installing Koala and Node.js is essential for compiling SAS files and using client-side package manager Bower to install Bootstrap and Font Awesome.', 'Downloading and installing Koala The process of downloading and installing Koala is outlined, involving simple steps and a small program size.', 'Installing Node.js The importance of installing Node.js for utilizing NPM and Bower to manage client-side packages is emphasized.']}, {'end': 888.485, 'start': 274.217, 'title': 'Setting up bootstrap for biz light theme', 'summary': 'Covers setting up bootstrap for the biz light theme, including installing bootstrap sass using bower, creating scss files, compiling with koala, and running a live server on a specific port.', 'duration': 614.268, 'highlights': ['Installing Bootstrap Sass with Bower The speaker discusses the process of installing Bootstrap Sass using Bower, a package manager, as a modern approach to setting up Bootstrap, highlighting the convenience of handling dependencies and the inclusion of jQuery.', 'Compiling SCSS Files with Koala The chapter explains the process of compiling SCSS files into app.css using Koala, emphasizing the generation of a single combined CSS file from multiple SCSS files.', 'Running Live Server with npm The speaker mentions the installation and use of Live Server with npm, specifying a custom port for running the server and providing an alternative to viewing the index.html file directly from the file system.']}], 'duration': 705.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk182542.jpg', 'highlights': ['Installing Koala and Node.js is essential for compiling SAS files and using client-side package manager Bower to install Bootstrap and Font Awesome.', 'The process of downloading and installing Koala is outlined, involving simple steps and a small program size.', 'Installing Node.js is important for utilizing NPM and Bower to manage client-side packages.', 'Installing Bootstrap Sass using Bower is a modern approach, highlighting the convenience of handling dependencies and the inclusion of jQuery.', 'The chapter explains the process of compiling SCSS files into app.css using Koala, emphasizing the generation of a single combined CSS file from multiple SCSS files.', 'The speaker mentions the installation and use of Live Server with npm, specifying a custom port for running the server and providing an alternative to viewing the index.html file directly from the file system.']}, {'end': 1194.522, 'segs': [{'end': 919.869, 'src': 'embed', 'start': 888.485, 'weight': 6, 'content': [{'end': 893.767, 'text': "So now you can see I'm on my local host on the loopback address here and port 8000.", 'start': 888.485, 'duration': 5.282}, {'end': 902.69, 'text': "And now if I go and I change something, let's see, we'll just, let's change this project name right here.", 'start': 893.767, 'duration': 8.923}, {'end': 910.103, 'text': "We're going to change it to BizLite theme and save it.", 'start': 903.559, 'duration': 6.544}, {'end': 912.605, 'text': "And you'll see that it should reload.", 'start': 910.824, 'duration': 1.781}, {'end': 913.705, 'text': 'There it goes.', 'start': 913.225, 'duration': 0.48}, {'end': 919.869, 'text': 'Okay, so it reloads without me having to actually click the reload button, which is nice.', 'start': 913.825, 'duration': 6.044}], 'summary': 'Demonstrated automatic reload feature on localhost:8000 after changing project name to bizlite theme.', 'duration': 31.384, 'max_score': 888.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk888485.jpg'}, {'end': 975.594, 'src': 'embed', 'start': 946.369, 'weight': 7, 'content': [{'end': 953.437, 'text': "anything that is a variable is in this in this file Now, I don't want to edit this file directly.", 'start': 946.369, 'duration': 7.068}, {'end': 955.879, 'text': 'What I want to do is copy everything in it.', 'start': 954.057, 'duration': 1.822}, {'end': 958.861, 'text': 'So just copy everything.', 'start': 957.26, 'duration': 1.601}, {'end': 965.586, 'text': "And then we're going to go into our SAS folder and create a new file.", 'start': 960.122, 'duration': 5.464}, {'end': 970.891, 'text': "And I'm going to call it customvariables.scss.", 'start': 965.666, 'duration': 5.225}, {'end': 975.594, 'text': "Actually, underscore customvariables, since it's a partial.", 'start': 971.591, 'duration': 4.003}], 'summary': 'Create a new customvariables.scss file in the sas folder and copy everything from the existing file into it.', 'duration': 29.225, 'max_score': 946.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk946369.jpg'}, {'end': 1165.887, 'src': 'embed', 'start': 1004.537, 'weight': 0, 'content': [{'end': 1013.291, 'text': 'Now we should be able to change stuff from here in the custom variables file, and it should change on our site, on our theme.', 'start': 1004.537, 'duration': 8.754}, {'end': 1015.435, 'text': "So let's look for the navbar area.", 'start': 1013.372, 'duration': 2.063}, {'end': 1021.525, 'text': "It's well commented, so you should be able to find it.", 'start': 1018.163, 'duration': 3.362}, {'end': 1024.768, 'text': "Let's see, nav tabs.", 'start': 1022.866, 'duration': 1.902}, {'end': 1027.069, 'text': 'Right here, nav bar.', 'start': 1025.968, 'duration': 1.101}, {'end': 1030.632, 'text': "Okay, we're using the nav bar default class.", 'start': 1027.089, 'duration': 3.543}, {'end': 1033.834, 'text': 'If you were using nav bar inverse, you would use these ones.', 'start': 1031.071, 'duration': 2.763}, {'end': 1037.695, 'text': "So let's go and change the height of the nav bar.", 'start': 1034.894, 'duration': 2.801}, {'end': 1041.598, 'text': "I want it a little bigger, so I'm going to change it from 50 to 70.", 'start': 1037.715, 'duration': 3.883}, {'end': 1047.203, 'text': 'All right, so if you look at it up here, once I save it, it should reload.', 'start': 1041.598, 'duration': 5.605}, {'end': 1051.391, 'text': "and you can see that now it's bigger.", 'start': 1049.97, 'duration': 1.421}, {'end': 1060.159, 'text': "So we can edit this file, edit the variables here, and it'll reflect in our theme.", 'start': 1052.332, 'duration': 7.827}, {'end': 1068.366, 'text': "Now I want to have a variable up at the top that's going to be the main color of the template.", 'start': 1061.42, 'duration': 6.946}, {'end': 1074.511, 'text': "So let's put an area here for custom, and we're going to say main color.", 'start': 1068.506, 'duration': 6.005}, {'end': 1081.656, 'text': 'All right, and the main color I want is that light blue color, which is a hexadecimal of 1A8C97.', 'start': 1075.694, 'duration': 5.962}, {'end': 1088.059, 'text': "Okay, that's going to be our main color.", 'start': 1081.676, 'duration': 6.383}, {'end': 1091.18, 'text': 'Now we want to implement that in a few different places.', 'start': 1088.499, 'duration': 2.681}, {'end': 1093.121, 'text': 'One is going to be the nav bar.', 'start': 1091.34, 'duration': 1.781}, {'end': 1098.923, 'text': 'All right, so if we go down to where we just were, the nav bar.', 'start': 1093.141, 'duration': 5.782}, {'end': 1103.565, 'text': "Let's see, I want to put this.", 'start': 1101.824, 'duration': 1.741}, {'end': 1111.259, 'text': 'right here navbar default bg, which right now is this value, which is this light gray.', 'start': 1105.655, 'duration': 5.604}, {'end': 1115.242, 'text': "so I'm gonna replace this with main color.", 'start': 1111.259, 'duration': 3.983}, {'end': 1118.624, 'text': "okay, and we'll save that.", 'start': 1115.242, 'duration': 3.382}, {'end': 1123.587, 'text': "let it reload and now it's that bluish, greenish color.", 'start': 1118.624, 'duration': 4.963}, {'end': 1128.05, 'text': 'now, if you look at the text, the text is not what we want.', 'start': 1123.587, 'duration': 4.463}, {'end': 1131.533, 'text': 'we want that to be white.', 'start': 1128.05, 'duration': 3.483}, {'end': 1136.106, 'text': "so let's change Right here, navbar links.", 'start': 1131.533, 'duration': 4.573}, {'end': 1140.331, 'text': "we're going to change this to FFF, which is white.", 'start': 1136.106, 'duration': 4.225}, {'end': 1148.681, 'text': 'Same thing here, here, and that should do it.', 'start': 1141.412, 'duration': 7.269}, {'end': 1153.626, 'text': "So let's save it, let it reload, and now we have white text.", 'start': 1148.741, 'duration': 4.885}, {'end': 1155.521, 'text': 'I also want to hover.', 'start': 1154.42, 'duration': 1.101}, {'end': 1158.402, 'text': 'When we hover over it, I want it to have this color background.', 'start': 1155.581, 'duration': 2.821}, {'end': 1165.887, 'text': 'Now, another really nice feature of SAS is that you can actually use percentages for the color.', 'start': 1158.883, 'duration': 7.004}], 'summary': 'Customizing navbar height, color, and text in theme using custom variables file.', 'duration': 161.35, 'max_score': 1004.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1004537.jpg'}], 'start': 888.485, 'title': 'Customizing project themes', 'summary': 'Discusses setting up sas variables and auto-reloading, customizing navbar height in a theme from 50 to 70, and template main color customization to a light blue hexadecimal value of 1a8c97, using sas percentages for color.', 'chapters': [{'end': 1003.977, 'start': 888.485, 'title': 'Setting up sas variables and auto-reloading', 'summary': 'Discusses setting up sas variables for a project by copying the existing variables file into a new file, importing it into the main scss file, and demonstrates automatic reloading of changes made in the project.', 'duration': 115.492, 'highlights': ['Demonstrating automatic reloading of changes The project demonstrates automatic reloading of changes made, such as the project name, without the need to manually click the reload button.', "Setting up a new SAS file for variables The process involves copying the existing SAS variables file into a new file, naming it 'customvariables.scss', and importing it into the main 'app.scss' file."]}, {'end': 1060.159, 'start': 1004.537, 'title': 'Customizing navbar height in theme', 'summary': 'Demonstrates how to customize the navbar height in a theme using custom variables, increasing it from 50 to 70, which is well-commented and reflects changes in real-time.', 'duration': 55.622, 'highlights': ['Demonstrates changing navbar height from 50 to 70, reflecting real-time changes on the site.', 'Emphasizes the use of custom variables file to edit the navbar, ensuring changes are reflected in the theme.', 'Highlights the well-commented nature of the custom variables file, aiding in easy identification of the navbar area.']}, {'end': 1194.522, 'start': 1061.42, 'title': 'Template main color customization', 'summary': 'Covers the customization of the main color of a template to a light blue hexadecimal value of 1a8c97, implementing it in the navigation bar background, text, and hover feature using sas percentages for color.', 'duration': 133.102, 'highlights': ['The main color of the template is customized to a light blue hexadecimal value of 1A8C97. The main color of the template is set to the hexadecimal value 1A8C97, which creates a bluish-greenish color.', 'The navigation bar background is changed to the main color, resulting in a bluish-greenish color. The navbar default background is changed to the main color, resulting in a bluish-greenish color for the navigation bar background.', 'The text color in the navigation bar is changed to white. The text color in the navigation bar is changed to white, creating a high contrast with the bluish-greenish background.', 'SAS percentages for color are used to implement a hover feature with a darkened background. SAS percentages for color allow for the implementation of a hover feature with a darkened background, creating a visually appealing effect when hovering over the navigation bar.']}], 'duration': 306.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk888485.jpg', 'highlights': ['Demonstrates changing navbar height from 50 to 70, reflecting real-time changes on the site.', 'The main color of the template is customized to a light blue hexadecimal value of 1A8C97.', 'The text color in the navigation bar is changed to white.', 'SAS percentages for color are used to implement a hover feature with a darkened background.', 'Emphasizes the use of custom variables file to edit the navbar, ensuring changes are reflected in the theme.', 'The navigation bar background is changed to the main color, resulting in a bluish-greenish color.', 'Demonstrating automatic reloading of changes The project demonstrates automatic reloading of changes made, such as the project name, without the need to manually click the reload button.', "Setting up a new SAS file for variables The process involves copying the existing SAS variables file into a new file, naming it 'customvariables.scss', and importing it into the main 'app.scss' file.", 'Highlights the well-commented nature of the custom variables file, aiding in easy identification of the navbar area.']}, {'end': 1507.429, 'segs': [{'end': 1288.221, 'src': 'embed', 'start': 1260.425, 'weight': 1, 'content': [{'end': 1263.407, 'text': "okay, that'll open up.", 'start': 1260.425, 'duration': 2.982}, {'end': 1269.83, 'text': 'and then, if we look in our bower components, we now have font awesome inside the bower components.', 'start': 1263.407, 'duration': 6.423}, {'end': 1278.055, 'text': "So there is a folder called SCSS and inside there there's a fontawesome.scss.", 'start': 1270.61, 'duration': 7.445}, {'end': 1282.457, 'text': 'And just like with Bootstrap, it includes all of these other SAS files.', 'start': 1278.455, 'duration': 4.002}, {'end': 1287.32, 'text': 'So we just need to import this one into our main SCSS file.', 'start': 1282.997, 'duration': 4.323}, {'end': 1288.221, 'text': "So let's do that.", 'start': 1287.38, 'duration': 0.841}], 'summary': "Font awesome added to project's bower components for scss integration.", 'duration': 27.796, 'max_score': 1260.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1260425.jpg'}, {'end': 1386.226, 'src': 'embed', 'start': 1333.73, 'weight': 0, 'content': [{'end': 1339.972, 'text': "and what we're going to do is go in the font awesome inside the bower components and grab the fonts folder,", 'start': 1333.73, 'duration': 6.242}, {'end': 1349.273, 'text': "copy it and then we're going to bring it into into our main project, into the root, and we're going to paste it in all right,", 'start': 1339.972, 'duration': 9.301}, {'end': 1351.514, 'text': "because that's where it's going to look.", 'start': 1349.273, 'duration': 2.241}, {'end': 1355.995, 'text': "so now we're going to add our social icons up here.", 'start': 1351.514, 'duration': 4.481}, {'end': 1357.455, 'text': "so let's go ahead and open up.", 'start': 1355.995, 'duration': 1.46}, {'end': 1368.919, 'text': "we'll go back to the index.html page and I'm going to copy this URL right here and we'll paste that in like that.", 'start': 1359.575, 'duration': 9.344}, {'end': 1376.522, 'text': "and then we're going to add a class here called navbar-write and that'll float it over to the right,", 'start': 1368.919, 'duration': 7.603}, {'end': 1386.226, 'text': "and then we're going to get rid of this active class here and let's actually get rid of all but one here and the link will go to http.", 'start': 1376.522, 'duration': 9.704}], 'summary': 'Adding font awesome icons and configuring social icons on the webpage.', 'duration': 52.496, 'max_score': 1333.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1333730.jpg'}, {'end': 1507.429, 'src': 'embed', 'start': 1464.072, 'weight': 3, 'content': [{'end': 1475.081, 'text': "okay. so pretty much an icon for whatever you need, and we're looking at these brand icons right here, for instance.", 'start': 1464.072, 'duration': 11.009}, {'end': 1477.909, 'text': 'Facebook is right here.', 'start': 1475.081, 'duration': 2.828}, {'end': 1482.632, 'text': "You can also use Facebook Square, Facebook Official, there's a lot of them.", 'start': 1477.929, 'duration': 4.703}, {'end': 1485.655, 'text': "Alright, so let's go ahead and finish this up.", 'start': 1483.773, 'duration': 1.882}, {'end': 1502.568, 'text': "So we have Google+, FA Google-Plus, and let's do LinkedIn, so FA-LinkedIn, and let's save that.", 'start': 1485.775, 'duration': 16.793}, {'end': 1506.268, 'text': "That's not right.", 'start': 1505.607, 'duration': 0.661}, {'end': 1507.429, 'text': 'There we go.', 'start': 1507.008, 'duration': 0.421}], 'summary': 'Discussing various brand icons including facebook, google+, and linkedin.', 'duration': 43.357, 'max_score': 1464.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1464072.jpg'}], 'start': 1197.684, 'title': 'Implementing font awesome and adding social media icons', 'summary': "Covers the implementation of font awesome using scss, including installation, importing, and adding icons to the project, with a mention of using bower for installation and the folder structure. it also covers adding social media icons to a website by using font awesome icons and creating links for twitter, facebook, google+, and linkedin, with the class 'navbar-write' applied to float the icons to the right.", 'chapters': [{'end': 1357.455, 'start': 1197.684, 'title': 'Implementing font awesome and scss', 'summary': 'Covers the implementation of font awesome using scss, including installation, importing, and adding icons to the project, with a mention of using bower for installation and the folder structure.', 'duration': 159.771, 'highlights': ["The chapter demonstrates the installation of Font Awesome using Bower, including the use of 'bower install font awesome' command and the resulting inclusion of the Font Awesome folder within the project's bower components.", 'The implementation involves importing the fontawesome.scss file into the main SCSS file, similar to the process of importing SAS files for Bootstrap, showcasing the integration of Font Awesome with SCSS.', 'The process also involves copying the fonts folder from the Font Awesome directory within bower components and pasting it into the root project directory, enabling the display of icons within the project.', 'The chapter highlights the use of live server with port 8000 for running the server, showcasing practical application of the implementation.', 'The use of SAS for Font Awesome is mentioned, emphasizing the utilization of SAS for both Bootstrap and Font Awesome in the project, showcasing the consistency in the development environment.']}, {'end': 1507.429, 'start': 1359.575, 'title': 'Adding social media icons to website', 'summary': "Covers adding social media icons to a website by using font awesome icons and creating links for twitter, facebook, google+, and linkedin, with the class 'navbar-write' applied to float the icons to the right.", 'duration': 147.854, 'highlights': ['Using font awesome icons and creating links for Twitter, Facebook, Google+, and LinkedIn.', "Applying the class 'navbar-write' to float the icons to the right.", 'Accessing a variety of brand icons from the font awesome site, such as Facebook, Google+, and LinkedIn.']}], 'duration': 309.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1197684.jpg', 'highlights': ["The chapter demonstrates the installation of Font Awesome using Bower, including the use of 'bower install font awesome' command and the resulting inclusion of the Font Awesome folder within the project's bower components.", 'The implementation involves importing the fontawesome.scss file into the main SCSS file, similar to the process of importing SAS files for Bootstrap, showcasing the integration of Font Awesome with SCSS.', 'The process also involves copying the fonts folder from the Font Awesome directory within bower components and pasting it into the root project directory, enabling the display of icons within the project.', 'Using font awesome icons and creating links for Twitter, Facebook, Google+, and LinkedIn.', "Applying the class 'navbar-write' to float the icons to the right."]}, {'end': 1993.234, 'segs': [{'end': 1565.094, 'src': 'embed', 'start': 1507.449, 'weight': 1, 'content': [{'end': 1509.511, 'text': 'So now we have our icons.', 'start': 1507.449, 'duration': 2.062}, {'end': 1515.576, 'text': "Now up to this point, we've only edited the variables.", 'start': 1512.473, 'duration': 3.103}, {'end': 1517.998, 'text': "We haven't created any of our custom styles.", 'start': 1515.656, 'duration': 2.342}, {'end': 1522.562, 'text': "So we're going to create another SCSS file in the SAS folder.", 'start': 1518.538, 'duration': 4.024}, {'end': 1529.127, 'text': "And we're going to call it underscore custom dot SCSS.", 'start': 1523.162, 'duration': 5.965}, {'end': 1533.691, 'text': 'And then we just want to import that in here, but at the bottom.', 'start': 1530.548, 'duration': 3.143}, {'end': 1539.06, 'text': 'So we want to say import custom.', 'start': 1535.689, 'duration': 3.371}, {'end': 1543.723, 'text': 'Alright, so this is where any custom styles we have will go.', 'start': 1540.842, 'duration': 2.881}, {'end': 1547.085, 'text': "Now let's put in the navbar.", 'start': 1544.344, 'duration': 2.741}, {'end': 1551.807, 'text': 'And what I want to do is I want these icons to be a little bigger.', 'start': 1548.786, 'duration': 3.021}, {'end': 1553.748, 'text': 'Now we can use nesting.', 'start': 1552.368, 'duration': 1.38}, {'end': 1557.73, 'text': 'Normally we would have to do like navbar and then .', 'start': 1553.888, 'duration': 3.842}, {'end': 1559.171, 'text': 'fa if we wanted to do that.', 'start': 1557.73, 'duration': 1.441}, {'end': 1562.693, 'text': 'But with SAS we can actually include that in here.', 'start': 1559.871, 'duration': 2.822}, {'end': 1565.094, 'text': 'We can nest it just like we would HTML.', 'start': 1562.753, 'duration': 2.341}], 'summary': 'Creating custom styles in scss including importing custom file and implementing nesting for html elements.', 'duration': 57.645, 'max_score': 1507.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1507449.jpg'}, {'end': 1644.242, 'src': 'embed', 'start': 1597.538, 'weight': 0, 'content': [{'end': 1599.859, 'text': "We'll give it a class of showcase.", 'start': 1597.538, 'duration': 2.321}, {'end': 1605.881, 'text': 'And inside the showcase, we want a container.', 'start': 1603.56, 'duration': 2.321}, {'end': 1615.445, 'text': "And inside the container, let's put an H1.", 'start': 1605.901, 'duration': 9.544}, {'end': 1620.747, 'text': 'And this is going to say got ideas.', 'start': 1617.306, 'duration': 3.441}, {'end': 1624.03, 'text': "And then we'll have a paragraph.", 'start': 1622.529, 'duration': 1.501}, {'end': 1631.154, 'text': "And let's give that paragraph a class of lead, which is a bootstrap class.", 'start': 1626.051, 'duration': 5.103}, {'end': 1635.257, 'text': "And I'm going to grab some dummy text and just paste that in here.", 'start': 1632.135, 'duration': 3.122}, {'end': 1644.242, 'text': 'All right, so just a couple sentences of dummy text.', 'start': 1635.277, 'duration': 8.965}], 'summary': 'Creating a showcase with container, h1, and lead paragraph.', 'duration': 46.704, 'max_score': 1597.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1597538.jpg'}, {'end': 1716.895, 'src': 'embed', 'start': 1669.619, 'weight': 3, 'content': [{'end': 1680.84, 'text': "and then we want to add a class of btn and btn primary and that'll just say read more", 'start': 1669.619, 'duration': 11.221}, {'end': 1683.982, 'text': "So let's save that.", 'start': 1682.841, 'duration': 1.141}, {'end': 1687.944, 'text': "Okay, so that's what it looks like.", 'start': 1684.002, 'duration': 3.942}, {'end': 1695.698, 'text': "Now we want our background image So let's see.", 'start': 1689.305, 'duration': 6.393}, {'end': 1697.039, 'text': 'Free stock photos.', 'start': 1695.798, 'duration': 1.241}, {'end': 1703.142, 'text': "I'm going to go to this pexels.com and let's see.", 'start': 1698.04, 'duration': 5.102}, {'end': 1706.444, 'text': 'The image that I want is here somewhere.', 'start': 1703.943, 'duration': 2.501}, {'end': 1710.086, 'text': "Let's search for business.", 'start': 1707.905, 'duration': 2.181}, {'end': 1715.414, 'text': 'Right here.', 'start': 1715.054, 'duration': 0.36}, {'end': 1716.895, 'text': "This is the image that I'm going to use.", 'start': 1715.534, 'duration': 1.361}], 'summary': 'Adding a read more button with a background image from pexels.com.', 'duration': 47.276, 'max_score': 1669.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1669619.jpg'}, {'end': 1949.766, 'src': 'embed', 'start': 1919.293, 'weight': 4, 'content': [{'end': 1924.194, 'text': "obviously I don't want that to be that color blue when the rest of the template is going to be this color blue.", 'start': 1919.293, 'duration': 4.901}, {'end': 1929.73, 'text': "So let's go to our custom variables and we want to go.", 'start': 1926.167, 'duration': 3.563}, {'end': 1932.032, 'text': "let's find the buttons.", 'start': 1929.73, 'duration': 2.302}, {'end': 1938.597, 'text': "Let's see.", 'start': 1937.756, 'duration': 0.841}, {'end': 1939.337, 'text': 'All right.', 'start': 1938.977, 'duration': 0.36}, {'end': 1940.218, 'text': "So it's a button.", 'start': 1939.438, 'duration': 0.78}, {'end': 1941.299, 'text': "It's a primary button.", 'start': 1940.238, 'duration': 1.061}, {'end': 1944.822, 'text': "So this right here, that's the text color, which is white.", 'start': 1941.339, 'duration': 3.483}, {'end': 1946.063, 'text': 'We want the background.', 'start': 1944.882, 'duration': 1.181}, {'end': 1947.384, 'text': 'All right.', 'start': 1947.084, 'duration': 0.3}, {'end': 1949.766, 'text': "So it's set to this brand primary.", 'start': 1947.424, 'duration': 2.342}], 'summary': 'Adjusting the color of the primary button to brand primary.', 'duration': 30.473, 'max_score': 1919.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1919293.jpg'}], 'start': 1507.449, 'title': 'Customizing icons, styling, and website design', 'summary': 'Covers creating custom scss styles for icons, increasing icon size using nesting in scss, designing the showcase area in html, using bootstrap classes, and generating dummy text. it also details the process of customizing a website design, including adding a background image, adjusting size and position, modifying text and button styles, and making the design changes visible on the front end.', 'chapters': [{'end': 1669.619, 'start': 1507.449, 'title': 'Customizing icons and styling with scss', 'summary': 'Covers creating custom scss styles for icons, increasing icon size using nesting in scss, and designing the showcase area in html, including using bootstrap classes and generating dummy text.', 'duration': 162.17, 'highlights': ['Creating custom SCSS styles for icons The chapter covers creating custom SCSS styles for icons.', 'Increasing icon size using nesting in SCSS The tutorial demonstrates using nesting in SCSS to increase the icon size to 18 pixels.', 'Designing the showcase area in HTML with bootstrap classes and generating dummy text The section explains designing the showcase area in HTML using bootstrap classes and generating dummy text from lipsum.com.']}, {'end': 1993.234, 'start': 1669.619, 'title': 'Customizing website design', 'summary': 'Details the process of customizing a website design, including adding a background image, adjusting size and position, modifying text and button styles, and making the design changes visible on the front end.', 'duration': 323.615, 'highlights': ['Adding a background image and adjusting its size and position The process involves selecting and downloading a specific image, saving it in a designated folder, and using custom SCSS to set the background URL and make adjustments for size and position.', 'Modifying text and button styles The changes include setting the font size for specific elements, adjusting the background color and opacity for the container, and customizing the color and opacity of the buttons.']}], 'duration': 485.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1507449.jpg', 'highlights': ['Designing the showcase area in HTML with bootstrap classes and generating dummy text', 'Creating custom SCSS styles for icons', 'Increasing icon size using nesting in SCSS to 18 pixels', 'Adding a background image and adjusting its size and position', 'Modifying text and button styles']}, {'end': 2546.208, 'segs': [{'end': 2111.544, 'src': 'embed', 'start': 1993.234, 'weight': 0, 'content': [{'end': 1994.175, 'text': "Okay, so that's better.", 'start': 1993.234, 'duration': 0.941}, {'end': 1997.177, 'text': "So that's pretty much the showcase.", 'start': 1995.416, 'duration': 1.761}, {'end': 2001.5, 'text': 'Next thing we want is the area down here with the icons.', 'start': 1997.997, 'duration': 3.503}, {'end': 2006.544, 'text': "It'll have a bluish-greenish background or whatever the main color is.", 'start': 2002.361, 'duration': 4.183}, {'end': 2021.274, 'text': "So let's go back to index.html and let's see, we're going to put a div and let's give this a class of section-a.", 'start': 2007.184, 'duration': 14.09}, {'end': 2025.96, 'text': 'All right.', 'start': 2025.58, 'duration': 0.38}, {'end': 2027.642, 'text': "And then we're going to have a container.", 'start': 2026.04, 'duration': 1.602}, {'end': 2035.988, 'text': "And we're going to use the grid system here.", 'start': 2033.506, 'duration': 2.482}, {'end': 2038.23, 'text': "So let's create a row class.", 'start': 2036.288, 'duration': 1.942}, {'end': 2046.196, 'text': "And then we're going to have three divs that will be four columns each.", 'start': 2042.193, 'duration': 4.003}, {'end': 2049.978, 'text': 'So div class call MD4.', 'start': 2046.276, 'duration': 3.702}, {'end': 2057.989, 'text': "Okay, and we're going to have three of these.", 'start': 2054.949, 'duration': 3.04}, {'end': 2069.772, 'text': "And this is going to have an icon, so let's put an I tag here, and we'll say class equals FA.", 'start': 2061.79, 'duration': 7.982}, {'end': 2075.893, 'text': 'This is going to be the HTML5 icon, so FA-HTML5.', 'start': 2071.612, 'duration': 4.281}, {'end': 2082.315, 'text': "Okay, and then under that, we're going to have an H3.", 'start': 2075.913, 'duration': 6.402}, {'end': 2090.29, 'text': 'And the heading is going to be clean and simple code.', 'start': 2085.246, 'duration': 5.044}, {'end': 2100.096, 'text': "Okay, and then we'll have a paragraph, which is just going to have a couple sentences of dummy text.", 'start': 2090.31, 'duration': 9.786}, {'end': 2101.217, 'text': "So let's paste that in.", 'start': 2100.136, 'duration': 1.081}, {'end': 2107.041, 'text': "All right, so I'm going to copy the icon, the heading, and the paragraph.", 'start': 2101.237, 'duration': 5.804}, {'end': 2111.544, 'text': "All right, and we're going to paste that in these two as well.", 'start': 2108.882, 'duration': 2.662}], 'summary': 'Creating a showcase with three sections, each containing an icon, heading, and paragraph, using a grid system with three divs of four columns each.', 'duration': 118.31, 'max_score': 1993.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1993234.jpg'}, {'end': 2301.823, 'src': 'embed', 'start': 2274.77, 'weight': 4, 'content': [{'end': 2278.611, 'text': "If it's dark, it'll give a white text, and we can check to see if it's light.", 'start': 2274.77, 'duration': 3.841}, {'end': 2283.413, 'text': "If it's light, it'll be a dark text, which is really cool, really helpful.", 'start': 2278.751, 'duration': 4.662}, {'end': 2293.478, 'text': "So what we'll do is we're going to create inside the SAS folder a file called underscore functions dot SCSS.", 'start': 2284.833, 'duration': 8.645}, {'end': 2297.521, 'text': "All right, and we're going to create a simple function here.", 'start': 2294.699, 'duration': 2.822}, {'end': 2301.823, 'text': 'We actually have to have an at symbol right here.', 'start': 2299.622, 'duration': 2.201}], 'summary': 'Creating a function in sas folder to handle text color based on light/dark background.', 'duration': 27.053, 'max_score': 2274.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2274770.jpg'}, {'end': 2476.307, 'src': 'heatmap', 'start': 2427.507, 'weight': 0.765, 'content': [{'end': 2432.029, 'text': "alright, so let's go ahead and save that and then let this reload.", 'start': 2427.507, 'duration': 4.522}, {'end': 2436.952, 'text': "okay, so let's see that didn't work.", 'start': 2432.029, 'duration': 4.923}, {'end': 2439.513, 'text': 'oh, you know what we need to add an important flag here.', 'start': 2436.952, 'duration': 2.561}, {'end': 2444.922, 'text': "Okay, then we'll save it.", 'start': 2443.882, 'duration': 1.04}, {'end': 2448.023, 'text': 'Okay, so now it has a dark color.', 'start': 2446.143, 'duration': 1.88}, {'end': 2459.546, 'text': 'Now if we go and change it back to the bluish greenish color and save, let it reload, the text is white.', 'start': 2448.063, 'duration': 11.483}, {'end': 2464.287, 'text': "Okay, so it's basically a smart style sheet.", 'start': 2460.106, 'duration': 4.181}, {'end': 2465.408, 'text': 'Okay, it adapts.', 'start': 2464.527, 'duration': 0.881}, {'end': 2466.188, 'text': "It's dynamic.", 'start': 2465.508, 'duration': 0.68}, {'end': 2468.997, 'text': "So let's continue on.", 'start': 2467.615, 'duration': 1.382}, {'end': 2473.323, 'text': "Down below here, we're going to have another area.", 'start': 2469.838, 'duration': 3.485}, {'end': 2476.307, 'text': "If we look at the final product, it's going to be this right here.", 'start': 2473.343, 'duration': 2.964}], 'summary': 'The transcript involves making technical adjustments to a smart style sheet for dynamic adaptability.', 'duration': 48.8, 'max_score': 2427.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2427507.jpg'}, {'end': 2504.491, 'src': 'embed', 'start': 2476.347, 'weight': 5, 'content': [{'end': 2481.794, 'text': "We have an image, and then we're going to use this accordion from Bootstrap.", 'start': 2476.347, 'duration': 5.447}, {'end': 2489.559, 'text': "now, in order to use this, we need to include JavaScript, our bootstrap JavaScript file, which I don't think we included yet.", 'start': 2482.535, 'duration': 7.024}, {'end': 2493.401, 'text': "so let's take a look in index.html down at the bottom.", 'start': 2489.559, 'duration': 3.842}, {'end': 2497.183, 'text': 'here we need a script tag source.', 'start': 2493.401, 'duration': 3.782}, {'end': 2504.491, 'text': 'Okay, now we need to include jQuery as well,', 'start': 2500.93, 'duration': 3.561}], 'summary': 'Using bootstrap accordion and including javascript and jquery in index.html', 'duration': 28.144, 'max_score': 2476.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2476347.jpg'}], 'start': 1993.234, 'title': 'Creating showcase and building clean code', 'summary': 'Explains creating a showcase with icons in html, utilizing the grid system to display three divs with html5 icons, and covers creating clean and simple code, customizing icons and text color, and including bootstrap javascript and jquery for an accordion feature.', 'chapters': [{'end': 2075.893, 'start': 1993.234, 'title': 'Creating showcase with icons in html', 'summary': 'Explains the process of creating a showcase with icons in html, including adding a bluish-greenish background and utilizing the grid system to display three divs with html5 icons.', 'duration': 82.659, 'highlights': ['The process of creating a showcase with icons in HTML is explained, including adding a bluish-greenish background and utilizing the grid system to display three divs with HTML5 icons. Creating showcase with icons, adding bluish-greenish background, utilizing grid system, displaying three divs with HTML5 icons', 'The showcase will have a bluish-greenish background or whatever the main color is, and the code will involve creating a div with a class of section-a, followed by a container and a row class. Showcase with bluish-greenish background, creating div with class of section-a, container and row class', 'The grid system will be used to create three divs, each with four columns, and they will contain HTML5 icons represented by the I tag with the class FA-HTML5. Utilizing grid system, creating three divs with four columns, containing HTML5 icons represented by I tag with class FA-HTML5']}, {'end': 2546.208, 'start': 2075.913, 'title': 'Building clean and simple code', 'summary': 'Covers creating clean and simple code, customizing icons and text color based on background, and including bootstrap javascript and jquery for an accordion feature.', 'duration': 470.295, 'highlights': ['Creating clean and simple code with H3 headings and customized icons.', 'Customizing text color based on background using a dynamic function in the SCSS file.', 'Including Bootstrap JavaScript and jQuery for an accordion feature.']}], 'duration': 552.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk1993234.jpg', 'highlights': ['Utilizing grid system, creating three divs with four columns, containing HTML5 icons represented by I tag with class FA-HTML5', 'Creating showcase with bluish-greenish background, utilizing grid system, displaying three divs with HTML5 icons', 'The process of creating a showcase with icons in HTML is explained, including adding a bluish-greenish background and utilizing the grid system to display three divs with HTML5 icons', 'Creating clean and simple code with H3 headings and customized icons', 'Customizing text color based on background using a dynamic function in the SCSS file', 'Including Bootstrap JavaScript and jQuery for an accordion feature', 'The showcase will have a bluish-greenish background or whatever the main color is, and the code will involve creating a div with a class of section-a, followed by a container and a row class', 'The grid system will be used to create three divs, each with four columns, and they will contain HTML5 icons represented by the I tag with the class FA-HTML5', 'Showcase with bluish-greenish background, creating div with class of section-a, container and row class']}, {'end': 2915.862, 'segs': [{'end': 2615.299, 'src': 'embed', 'start': 2546.228, 'weight': 0, 'content': [{'end': 2550.391, 'text': 'Let me just check this real quick.', 'start': 2546.228, 'duration': 4.163}, {'end': 2552.513, 'text': "And then it's going to be in assets.", 'start': 2550.972, 'duration': 1.541}, {'end': 2562.068, 'text': 'slash javascripts, slash bootstrap.js.', 'start': 2554.523, 'duration': 7.545}, {'end': 2568.693, 'text': "alright, so let's save that and that should also give us the responsive menu.", 'start': 2562.068, 'duration': 6.625}, {'end': 2578.86, 'text': 'if we go ahead and we make this smaller, we have this little button here and now we have all of our links in this mobile menu.', 'start': 2568.693, 'duration': 10.167}, {'end': 2580.821, 'text': "alright, so let's continue on down here.", 'start': 2578.86, 'duration': 1.961}, {'end': 2583.295, 'text': "Let's see.", 'start': 2582.815, 'duration': 0.48}, {'end': 2591.698, 'text': "so after section a we're going to put in section B.", 'start': 2583.295, 'duration': 8.403}, {'end': 2601.362, 'text': "Actually, I'm going to just copy this, Paste that and we'll change this to section B, and this is going to use the grid system as well.", 'start': 2591.698, 'duration': 9.664}, {'end': 2603.202, 'text': "It's going to have two, not three.", 'start': 2601.362, 'duration': 1.84}, {'end': 2615.299, 'text': "so we'll get rid of this last one, this column D4, All right, and then we're going to change these two column D6, both of these.", 'start': 2603.202, 'duration': 12.097}], 'summary': 'Updating assets to enable responsive menu and adjusting grid system for section b.', 'duration': 69.071, 'max_score': 2546.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2546228.jpg'}, {'end': 2723.719, 'src': 'embed', 'start': 2670.04, 'weight': 1, 'content': [{'end': 2672.02, 'text': 'All right.', 'start': 2670.04, 'duration': 1.98}, {'end': 2675.462, 'text': "So let's go ahead and insert that right in here.", 'start': 2672.741, 'duration': 2.721}, {'end': 2689.593, 'text': "So img source, and that's going to be in the img folder slash cpu dot jpeg.", 'start': 2677.927, 'duration': 11.666}, {'end': 2693.274, 'text': "Okay, let's save that, take a look.", 'start': 2689.613, 'duration': 3.661}, {'end': 2700.618, 'text': 'Alright, now we want to actually make this the 100% width of its container.', 'start': 2694.935, 'duration': 5.683}, {'end': 2709.296, 'text': "So we can go to our custom CSS, our SCSS, and let's add down here, .", 'start': 2702.469, 'duration': 6.827}, {'end': 2723.399, 'text': 'section-b, and then the image inside of that we want width 100%.', 'start': 2709.296, 'duration': 14.103}, {'end': 2723.719, 'text': 'All right.', 'start': 2723.399, 'duration': 0.32}], 'summary': "Insert image 'cpu.jpeg' from 'img' folder, set 100% width.", 'duration': 53.679, 'max_score': 2670.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2670040.jpg'}, {'end': 2797.802, 'src': 'embed', 'start': 2763.894, 'weight': 3, 'content': [{'end': 2768.675, 'text': "Okay, so on this side, we're going to have our collapsible accordion.", 'start': 2763.894, 'duration': 4.781}, {'end': 2780.999, 'text': "Now that's a lot of code to write, so I'm going to just go to getbootstrap.com, and we're going to go to JavaScript and then collapse,", 'start': 2769.175, 'duration': 11.824}, {'end': 2783.179, 'text': 'and we want this accordion example right here.', 'start': 2780.999, 'duration': 2.18}, {'end': 2785.48, 'text': "I'm just going to grab everything in here.", 'start': 2783.199, 'duration': 2.281}, {'end': 2797.802, 'text': "So we'll copy that, bring it over to index.html, and we're going to paste it right in here in this call MD6.", 'start': 2788.999, 'duration': 8.803}], 'summary': 'Implementing a collapsible accordion from getbootstrap.com in the code.', 'duration': 33.908, 'max_score': 2763.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2763894.jpg'}], 'start': 2546.228, 'title': 'Web development and website design', 'summary': "Covers the implementation of a responsive menu using bootstrap.js, modifying grid system columns, inserting and styling images, adjusting width and background color using custom css, and implementing a collapsible accordion from bootstrap's library.", 'chapters': [{'end': 2615.299, 'start': 2546.228, 'title': 'Web development update', 'summary': 'Covers the implementation of a responsive menu using bootstrap.js and the modification of grid system columns from three to two in section b.', 'duration': 69.071, 'highlights': ['The implementation of a responsive menu using Bootstrap.js is demonstrated, allowing for easy navigation on smaller screens.', 'The modification of the grid system in section B is explained, with the columns being changed from three to two for improved layout.', 'The process of checking and locating the necessary file for the changes is briefly mentioned at the beginning of the chapter.']}, {'end': 2915.862, 'start': 2616.159, 'title': 'Website design: image insertion, styling, and bootstrap usage', 'summary': "Covers the process of inserting and styling an image, using custom css to adjust the width and background color, and implementing a collapsible accordion from bootstrap's library.", 'duration': 299.703, 'highlights': ['The process of inserting and styling an image, using custom CSS to adjust the width and background color The speaker guides through the process of inserting an image from Pexels, saving it as CPU.jpg, inserting it into the HTML, and then using custom CSS to set the image width to 100% and change the background color to a grayish tone with padding of 30 pixels on the top and bottom.', "Implementing a collapsible accordion from Bootstrap's library The speaker demonstrates the use of Bootstrap's collapsible accordion by copying the code from getbootstrap.com, pasting it into the index.html file, and then adjusting the CSS to set the main color as the background for the accordion headings."]}], 'duration': 369.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2546228.jpg', 'highlights': ['The implementation of a responsive menu using Bootstrap.js is demonstrated, allowing for easy navigation on smaller screens.', 'The process of inserting and styling an image, using custom CSS to adjust the width and background color.', 'The modification of the grid system in section B is explained, with the columns being changed from three to two for improved layout.', "Implementing a collapsible accordion from Bootstrap's library."]}, {'end': 3857.926, 'segs': [{'end': 3029.302, 'src': 'embed', 'start': 2979.835, 'weight': 1, 'content': [{'end': 2983.896, 'text': "And we'll say subscribe to our newsletter.", 'start': 2979.835, 'duration': 4.061}, {'end': 2989.918, 'text': "Okay, we'll put a line break.", 'start': 2983.916, 'duration': 6.002}, {'end': 2995.759, 'text': "And I'm gonna just grab a paragraph of dummy text.", 'start': 2992.518, 'duration': 3.241}, {'end': 3001.861, 'text': "Okay, then we'll put an HR.", 'start': 3000.061, 'duration': 1.8}, {'end': 3005.042, 'text': "And then we're gonna have our form.", 'start': 3003.742, 'duration': 1.3}, {'end': 3025.579, 'text': "Okay, form will have an input, give it a type of text, and let's give it a class of form control, and also input dash LG.", 'start': 3009.807, 'duration': 15.772}, {'end': 3026.7, 'text': "That'll make it a little bigger.", 'start': 3025.619, 'duration': 1.081}, {'end': 3029.302, 'text': "All right, and then we'll give it a placeholder.", 'start': 3026.72, 'duration': 2.582}], 'summary': 'A website layout is being described, with a newsletter subscription and form with specific attributes.', 'duration': 49.467, 'max_score': 2979.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2979835.jpg'}, {'end': 3345.649, 'src': 'embed', 'start': 3300.147, 'weight': 2, 'content': [{'end': 3312.66, 'text': 'we want a file called services html, contact dot html, All right now in the index page.', 'start': 3300.147, 'duration': 12.513}, {'end': 3315.823, 'text': "let's fix the menu so that we can navigate to these pages.", 'start': 3312.66, 'duration': 3.163}, {'end': 3332.22, 'text': "So home is going to go to index, about, we'll go to about.html, contact, and let's also add the services.", 'start': 3316.604, 'duration': 15.616}, {'end': 3345.649, 'text': "All right, so now what we're going to do is copy everything in here.", 'start': 3342.867, 'duration': 2.782}], 'summary': 'Updating website to include pages like services, contact, and about', 'duration': 45.502, 'max_score': 3300.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk3300147.jpg'}, {'end': 3825.131, 'src': 'embed', 'start': 3791.149, 'weight': 0, 'content': [{'end': 3792.45, 'text': "So let's go ahead and save that.", 'start': 3791.149, 'duration': 1.301}, {'end': 3799.093, 'text': 'and click on contact, and there we go alright.', 'start': 3794.05, 'duration': 5.043}, {'end': 3801.855, 'text': 'so our theme is now complete.', 'start': 3799.093, 'duration': 2.762}, {'end': 3812.742, 'text': "and what's really nice about this is now, if we go to our variables and we want to change the main color,", 'start': 3801.855, 'duration': 10.887}, {'end': 3816.504, 'text': 'say we want to change it to that light color, save it.', 'start': 3812.742, 'duration': 3.762}, {'end': 3824.11, 'text': "You'll see that now it looks completely different and the text is also dynamic.", 'start': 3818.885, 'duration': 5.225}, {'end': 3825.131, 'text': "so it's the right color.", 'start': 3824.11, 'duration': 1.021}], 'summary': 'Completed theme customization with dynamic color changes.', 'duration': 33.982, 'max_score': 3791.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk3791149.jpg'}], 'start': 2915.862, 'title': 'Website development and customization', 'summary': 'Covers the process of duplicating and customizing website pages for about, services, and contact, detailing the html and scss coding processes, resulting in a fully customizable theme that can be easily updated and modified.', 'chapters': [{'end': 3082.965, 'start': 2915.862, 'title': 'Newsletter section update', 'summary': 'Covers updating the newsletter section in index.html by adding a subscribe form with an input field for email and a submit button, making use of bootstrap classes to style the form.', 'duration': 167.103, 'highlights': ['The chapter covers updating the newsletter section in index.html by adding a subscribe form with an input field for email and a submit button, making use of Bootstrap classes to style the form.', 'The newsletter section is adjusted to be eight columns wide and pushed to the middle by adding an offset of two columns.', 'The form input for email is styled using the classes form-control and input-lg from Bootstrap.']}, {'end': 3268.89, 'start': 3084.206, 'title': 'Styling the web page', 'summary': 'Covers styling the web page including adding padding and margin, aligning elements, setting background and text color, and darkening the button color by 10%.', 'duration': 184.684, 'highlights': ['Adding padding of 60 pixels and setting margin top to 40 pixels for section C to increase spacing.', 'Aligning all elements to the center for section C to ensure a centered layout.', 'Darkening the button color by 10% using the SCSS darken function to improve its visibility against the background.', "Adding a copyright paragraph with a copyright symbol and the text '2016 BizLite theme' to the footer for a simple footer design."]}, {'end': 3650.554, 'start': 3268.95, 'title': 'Web page development process', 'summary': 'Describes the process of creating an index page and inner pages, including about, services, and contact, by detailing the html and scss coding processes, and adding navigation and styling, resulting in the completion of the about page.', 'duration': 381.604, 'highlights': ['Creating inner pages including about, services, and contact, and fixing the menu for navigation. Creation of inner pages and navigation setup.', 'Detailing the HTML coding process for the About page, including the structure, layout, and content. Description of HTML coding for the About page.', 'Styling the title bar and main div using custom SCSS for the About page. Custom styling of the title bar and main div using SCSS.']}, {'end': 3857.926, 'start': 3650.774, 'title': 'Website development and customization', 'summary': 'Covers the process of duplicating and customizing website pages for about, services, and contact, with a focus on changing titles, adding content, and creating forms, resulting in a fully customizable theme that can be easily updated and modified by changing variables.', 'duration': 207.152, 'highlights': ['The process of duplicating and customizing website pages for About, Services, and Contact, focusing on changing titles, adding content, and creating forms, results in a fully customizable theme.', "The theme's main color can be easily changed by modifying variables, dynamically altering the appearance of the website.", 'The customization allows for easy and dynamic changes to the appearance and content of the website, providing flexibility for future modifications.', 'The chapter also emphasizes the simplicity and user-friendliness of the process, ensuring that viewers can easily replicate the steps for their own projects.', 'The tutorial concludes with an invitation to view the uploaded code on GitHub, with a request for engagement through subscription, likes, and comments.']}], 'duration': 942.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pB7EwxwSfVk/pics/pB7EwxwSfVk2915862.jpg', 'highlights': ['The process of duplicating and customizing website pages for About, Services, and Contact, focusing on changing titles, adding content, and creating forms, results in a fully customizable theme.', 'The chapter covers updating the newsletter section in index.html by adding a subscribe form with an input field for email and a submit button, making use of Bootstrap classes to style the form.', 'Creating inner pages including about, services, and contact, and fixing the menu for navigation. Creation of inner pages and navigation setup.', "The theme's main color can be easily changed by modifying variables, dynamically altering the appearance of the website."]}], 'highlights': ['The chapter covers building a custom bootstrap theme using Sass for easy customization of colors and font sizes.', 'Installing Koala and Node.js is essential for compiling SAS files and using client-side package manager Bower to install Bootstrap and Font Awesome.', 'Demonstrates changing navbar height from 50 to 70, reflecting real-time changes on the site.', "The chapter demonstrates the installation of Font Awesome using Bower, including the use of 'bower install font awesome' command and the resulting inclusion of the Font Awesome folder within the project's bower components.", 'Designing the showcase area in HTML with bootstrap classes and generating dummy text', 'Utilizing grid system, creating three divs with four columns, containing HTML5 icons represented by I tag with class FA-HTML5', 'The implementation of a responsive menu using Bootstrap.js is demonstrated, allowing for easy navigation on smaller screens.', 'The process of duplicating and customizing website pages for About, Services, and Contact, focusing on changing titles, adding content, and creating forms, results in a fully customizable theme.']}