title
Build A CMS Admin Bootstrap Theme From Scratch

description
In this video we will build the UI for a CMS (content management system) admin area. It will feature a dashboard, pages, posts, users and login page. We will look at almost all of the Bootstrap css components as well as some JavaScript such as the modal. CODE DOWNLOAD: http://www.traversymedia.com/downloads/adminstrap_theme.zip SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH: http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia

detail
{'title': 'Build A CMS Admin Bootstrap Theme From Scratch', 'heatmap': [{'end': 513.703, 'start': 365.668, 'weight': 0.727}, {'end': 1001.179, 'start': 907.612, 'weight': 0.81}, {'end': 1168.049, 'start': 1095.425, 'weight': 0.702}, {'end': 1899.017, 'start': 1859.082, 'weight': 0.789}, {'end': 2273.455, 'start': 2225.492, 'weight': 0.704}], 'summary': "Tutorial series 'build a cms admin bootstrap theme from scratch' consists of 7 chapters focused on building a custom admin theme using bootstrap for a content management system, featuring beginner-friendly demonstrations of dashboard creation, web development simplification, frontend design, website functionality improvement, and dashboard styling, resulting in a comprehensive admin theme with specific quantities like 203 users, 12 pages, 33 posts, and 12,334 visitors.", 'chapters': [{'end': 73.509, 'segs': [{'end': 73.509, 'src': 'embed', 'start': 0.689, 'weight': 0, 'content': [{'end': 6.271, 'text': "Hey guys, in this video we're going to build a custom admin theme using Bootstrap.", 'start': 0.689, 'duration': 5.582}, {'end': 14.213, 'text': "This would be something that you'd have for CMS, a content management system, to manage your website pages and blog posts, things like that.", 'start': 6.311, 'duration': 7.902}, {'end': 17.514, 'text': 'Now, of course, this is just the front end.', 'start': 15.134, 'duration': 2.38}, {'end': 20.735, 'text': "I guess it's the front end of the back end.", 'start': 18.715, 'duration': 2.02}, {'end': 22.156, 'text': "It's just the UI.", 'start': 21.255, 'duration': 0.901}, {'end': 24.036, 'text': "We're not going to have any functionality.", 'start': 22.196, 'duration': 1.84}, {'end': 27.937, 'text': "We're not going to use a back end server side language or anything.", 'start': 24.056, 'duration': 3.881}, {'end': 29.358, 'text': "We're just creating the UI.", 'start': 27.977, 'duration': 1.381}, {'end': 40.74, 'text': "Maybe somewhere down the road we can add some backend functionality to it, but for now it's just a UI video to help people learn Bootstrap,", 'start': 30.038, 'duration': 10.702}, {'end': 41.641, 'text': 'mostly beginners.', 'start': 40.74, 'duration': 0.901}, {'end': 48.402, 'text': "I just released a crash course, a beginner's crash course on Bootstrap, and this is kind of a follow-up to that,", 'start': 42.361, 'duration': 6.041}, {'end': 51.703, 'text': 'so we can take those skills and create something with them.', 'start': 48.402, 'duration': 3.301}, {'end': 56.144, 'text': "Alright. and for you back-end developers, don't worry,", 'start': 52.743, 'duration': 3.401}, {'end': 65.747, 'text': "we're going to get back to Node.js and other back-end programming languages and step away from the UI for a little while.", 'start': 56.144, 'duration': 9.603}, {'end': 71.168, 'text': 'But I just wanted to get some beginner videos and some front-end developer videos out there.', 'start': 65.787, 'duration': 5.381}, {'end': 73.509, 'text': "Alright, so this is what we'll be building.", 'start': 71.188, 'duration': 2.321}], 'summary': 'Building a custom admin theme using bootstrap for cms, aimed at beginners.', 'duration': 72.82, 'max_score': 0.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo689.jpg'}], 'start': 0.689, 'title': 'Building custom admin theme with bootstrap', 'summary': 'Covers building a custom admin theme using bootstrap for a content management system, mainly targeting beginners and focusing on the ui, with plans to potentially add backend functionality in the future.', 'chapters': [{'end': 73.509, 'start': 0.689, 'title': 'Building custom admin theme with bootstrap', 'summary': 'Covers building a custom admin theme using bootstrap for a content management system, mainly targeting beginners and focusing on the ui, with plans to potentially add backend functionality in the future.', 'duration': 72.82, 'highlights': ['The video focuses on building a custom admin theme using Bootstrap for a content management system, targeting beginners to help them learn Bootstrap.', 'It emphasizes that the tutorial is solely for creating the front-end UI without any backend functionality at present, but leaves room for potential backend integration in the future.', "The presenter mentions that the video is a follow-up to a recently released beginner's crash course on Bootstrap, aiming to apply the learned skills to create a practical project.", "It's mentioned that the tutorial is meant to provide beginner and front-end developer videos, with the assurance of returning to back-end programming in the future."]}], 'duration': 72.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo689.jpg', 'highlights': ['The video focuses on building a custom admin theme using Bootstrap for a content management system, targeting beginners to help them learn Bootstrap.', "The presenter mentions that the video is a follow-up to a recently released beginner's crash course on Bootstrap, aiming to apply the learned skills to create a practical project.", 'It emphasizes that the tutorial is solely for creating the front-end UI without any backend functionality at present, but leaves room for potential backend integration in the future.', "It's mentioned that the tutorial is meant to provide beginner and front-end developer videos, with the assurance of returning to back-end programming in the future."]}, {'end': 306.567, 'segs': [{'end': 186.779, 'src': 'embed', 'start': 73.569, 'weight': 0, 'content': [{'end': 81.751, 'text': "It's not the best looking dashboard you've ever seen, but I think that it's a good example for beginners to get into Bootstrap.", 'start': 73.569, 'duration': 8.182}, {'end': 83.832, 'text': "So, let's start at the top here.", 'start': 82.351, 'duration': 1.481}, {'end': 89.494, 'text': "We have a navbar, and there's going to be four main parts to this theme.", 'start': 83.872, 'duration': 5.622}, {'end': 93.056, 'text': 'We have the dashboard, pages, posts, and users.', 'start': 89.534, 'duration': 3.522}, {'end': 97.758, 'text': 'Over here, we have just a welcome message and then a logout.', 'start': 94.456, 'duration': 3.302}, {'end': 105.081, 'text': "Now, if I click logout, it'll actually take us to login.html, which is a basic login page that we'll create.", 'start': 97.818, 'duration': 7.263}, {'end': 112.567, 'text': "All right, and obviously there's no back-end functionality, but when we click login, it just redirects us back to the dashboard.", 'start': 105.721, 'duration': 6.846}, {'end': 115.769, 'text': 'Okay, so under that we have this heading area.', 'start': 112.587, 'duration': 3.182}, {'end': 123.795, 'text': "Create content is a drop-down where we can go to add page, add post, add user, which we'll get to those pages in a minute.", 'start': 116.89, 'duration': 6.905}, {'end': 125.597, 'text': 'Then we have a breadcrumb here.', 'start': 124.236, 'duration': 1.361}, {'end': 130.441, 'text': "Then we're using the grid system for a sidebar and then a main area.", 'start': 125.617, 'duration': 4.824}, {'end': 136.124, 'text': 'On the sidebar we just have another, we have a list group for the pages post users.', 'start': 131.181, 'duration': 4.943}, {'end': 140.567, 'text': 'And we have some icons, some bootstrap glyphicons.', 'start': 136.765, 'duration': 3.802}, {'end': 147.612, 'text': "Now, when I build front ends and I use icons, I like to use font awesome, but I didn't want to use any extra libraries,", 'start': 141.048, 'duration': 6.564}, {'end': 149.653, 'text': 'so we just stuck with the bootstrap icons.', 'start': 147.612, 'duration': 2.041}, {'end': 156.918, 'text': 'And these also have some badges here to tell us the number of users and posts and so on.', 'start': 150.694, 'duration': 6.224}, {'end': 162.884, 'text': 'And then here we just have some progress bars for the hosting, the disk space used, and the bandwidth used.', 'start': 157.458, 'duration': 5.426}, {'end': 169.451, 'text': 'On this side we have an overview with some wells for users, pages, posts, and visits.', 'start': 163.605, 'duration': 5.846}, {'end': 172.474, 'text': "So we're using icons here as well.", 'start': 170.372, 'duration': 2.102}, {'end': 175.798, 'text': 'It just tells us the number of each resource.', 'start': 173.455, 'duration': 2.343}, {'end': 181.376, 'text': 'and then we just have the latest users that have registered to the site in a table uh.', 'start': 176.894, 'duration': 4.482}, {'end': 186.779, 'text': 'with the name email and join date and then just a simple footer so pretty simple uh.', 'start': 181.376, 'duration': 5.403}], 'summary': 'Example bootstrap dashboard with navbar, pages, posts, users, and basic functionality.', 'duration': 113.21, 'max_score': 73.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo73569.jpg'}, {'end': 284.929, 'src': 'embed', 'start': 236.09, 'weight': 6, 'content': [{'end': 243.115, 'text': "this is the ck editor and it's really easy to implement we're just including a cdn and then just adding uh.", 'start': 236.09, 'duration': 7.025}, {'end': 248.858, 'text': "a little bit of javascript right now i'm so we have a professional looking editor uh.", 'start': 243.115, 'duration': 5.743}, {'end': 253.601, 'text': 'published checkbox and then some meta tags, description boxes.', 'start': 248.858, 'duration': 4.743}, {'end': 257.163, 'text': "all right, the form actually isn't going to do anything if you submit it again.", 'start': 253.601, 'duration': 3.562}, {'end': 258.004, 'text': "it's just the ui.", 'start': 257.163, 'duration': 0.841}, {'end': 265.792, 'text': "Now I didn't add an add post or add user because those are very similar and I don't want this to take too long.", 'start': 258.704, 'duration': 7.088}, {'end': 269.996, 'text': "so I did cut some corners and you guys can add that later on if you'd like.", 'start': 265.792, 'duration': 4.204}, {'end': 272.158, 'text': 'Same thing with the edit page.', 'start': 270.937, 'duration': 1.221}, {'end': 281.747, 'text': "If we go to pages and click edit, it'll take us to a page like this, which basically has the same, the same ui as the, the modal,", 'start': 272.339, 'duration': 9.408}, {'end': 284.929, 'text': 'the same fields and stuff already filled in.', 'start': 281.747, 'duration': 3.182}], 'summary': 'Demonstration of implementing ck editor with professional looking editor, published checkbox, and meta tags.', 'duration': 48.839, 'max_score': 236.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo236090.jpg'}], 'start': 73.569, 'title': 'Bootstrap dashboard and content creation', 'summary': 'Demonstrates a beginner-friendly bootstrap dashboard with sections for pages, posts, and users, along with a login functionality. it also provides an overview of dashboard content creation utilizing grid system, icons, progress bars, and an editor, with a focus on pages, posts, and users.', 'chapters': [{'end': 115.769, 'start': 73.569, 'title': 'Bootstrap dashboard example', 'summary': 'Demonstrates a beginner-friendly bootstrap dashboard with a navbar, dashboard, pages, posts, and users sections, along with a login functionality that redirects to the dashboard.', 'duration': 42.2, 'highlights': ['The dashboard includes a navbar and four main sections: dashboard, pages, posts, and users.', 'The login functionality redirects users back to the dashboard upon successful login.', 'The example serves as a good starting point for beginners to learn Bootstrap.']}, {'end': 306.567, 'start': 116.89, 'title': 'Dashboard content overview', 'summary': 'Provides an overview of a dashboard content creation system, including the use of grid system, icons, progress bars, and an editor, with a focus on pages, posts, and users.', 'duration': 189.677, 'highlights': ['The dashboard includes a grid system for a sidebar and main area, with list groups for pages, posts, and users, and the use of bootstrap glyphicons and badges to display the number of users and posts.', 'Progress bars are used to display the hosting, disk space used, and bandwidth used on the dashboard.', 'The overview section utilizes icons to display the number of resources such as users, pages, posts, and visits, and presents the latest registered users in a table format.', 'The system employs a modal for adding pages, featuring a professional-looking editor powered by CKEditor, along with options for checkbox, meta tags, and description boxes.', 'The forms for adding pages, posts, and users are similar, with an option to edit pages and posts using a unified UI for each resource.', 'The use of font awesome for icons is preferred, but due to the avoidance of extra libraries, bootstrap icons are utilized.']}], 'duration': 232.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo73569.jpg', 'highlights': ['The dashboard includes a navbar and four main sections: dashboard, pages, posts, and users.', 'The example serves as a good starting point for beginners to learn Bootstrap.', 'The login functionality redirects users back to the dashboard upon successful login.', 'The overview section utilizes icons to display the number of resources such as users, pages, posts, and visits, and presents the latest registered users in a table format.', 'Progress bars are used to display the hosting, disk space used, and bandwidth used on the dashboard.', 'The dashboard includes a grid system for a sidebar and main area, with list groups for pages, posts, and users, and the use of bootstrap glyphicons and badges to display the number of users and posts.', 'The system employs a modal for adding pages, featuring a professional-looking editor powered by CKEditor, along with options for checkbox, meta tags, and description boxes.', 'The forms for adding pages, posts, and users are similar, with an option to edit pages and posts using a unified UI for each resource.', 'The use of font awesome for icons is preferred, but due to the avoidance of extra libraries, bootstrap icons are utilized.']}, {'end': 890.907, 'segs': [{'end': 339.511, 'src': 'embed', 'start': 306.567, 'weight': 0, 'content': [{'end': 309.709, 'text': "Yeah, so let's go ahead and get started.", 'start': 306.567, 'duration': 3.142}, {'end': 320.116, 'text': "what we're gonna do is create I'm just gonna create a folder on my desktop and we're gonna call this admin strap underscore theme.", 'start': 309.709, 'duration': 10.407}, {'end': 328.722, 'text': "Okay, and we're gonna create our index HTML, which is gonna be the dashboard.", 'start': 320.116, 'duration': 8.606}, {'end': 334.288, 'text': 'and Okay, and we need to grab Bootstrap.', 'start': 328.722, 'duration': 5.566}, {'end': 339.511, 'text': "I'm just going to download it, download the compiled files.", 'start': 335.528, 'duration': 3.983}], 'summary': 'Creating admin strap theme folder and dashboard index html, downloading bootstrap files.', 'duration': 32.944, 'max_score': 306.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo306567.jpg'}, {'end': 520.169, 'src': 'heatmap', 'start': 365.668, 'weight': 6, 'content': [{'end': 367.488, 'text': "Let's see.", 'start': 365.668, 'duration': 1.82}, {'end': 376.81, 'text': "Downloads Where is it? Where is it? Oh, it's downloading to my desktop for some reason.", 'start': 367.548, 'duration': 9.262}, {'end': 377.65, 'text': 'All right.', 'start': 377.41, 'duration': 0.24}, {'end': 381.091, 'text': "So let's grab the bootstrap files from the zip we just downloaded.", 'start': 377.73, 'duration': 3.361}, {'end': 383.492, 'text': "So we'll bring those over.", 'start': 382.351, 'duration': 1.141}, {'end': 385.592, 'text': 'All right.', 'start': 383.512, 'duration': 2.08}, {'end': 387.272, 'text': "And let's open up.", 'start': 386.332, 'duration': 0.94}, {'end': 389.513, 'text': "I'm going to be using Atom for my editor.", 'start': 387.633, 'duration': 1.88}, {'end': 395.037, 'text': "I'm just going to add that folder as a project.", 'start': 392.114, 'duration': 2.923}, {'end': 400.403, 'text': "Let's see, admin strap theme.", 'start': 395.057, 'duration': 5.346}, {'end': 403.746, 'text': "Alright, let's open up index.html.", 'start': 401.684, 'duration': 2.062}, {'end': 406.529, 'text': "Okay, let's get started here.", 'start': 405.188, 'duration': 1.341}, {'end': 415.885, 'text': "Now Rather than type everything out, we're going to do a little bit of copying and pasting just to kind of move along.", 'start': 406.549, 'duration': 9.336}, {'end': 421.207, 'text': "So what I'm going to do is go to getbootstrap.com and then get started.", 'start': 416.546, 'duration': 4.661}, {'end': 423.227, 'text': "And then let's click on examples.", 'start': 421.347, 'duration': 1.88}, {'end': 427.688, 'text': "And then we're going to grab this starter template right here, which just has a nav bar.", 'start': 423.927, 'duration': 3.761}, {'end': 431.089, 'text': "And we'll do a control U to look at the source.", 'start': 428.608, 'duration': 2.481}, {'end': 436.53, 'text': "And then I'm just going to grab everything here, copy it, and we're going to paste it in index.", 'start': 431.709, 'duration': 4.821}, {'end': 445.056, 'text': "Okay, and we're just gonna go through and just get rid of things that we don't need Alright, so we want this stuff the doc type.", 'start': 437.55, 'duration': 7.506}, {'end': 448.658, 'text': "I'm gonna get rid of Let's see.", 'start': 445.616, 'duration': 3.042}, {'end': 449.799, 'text': "Let's get rid of this comment.", 'start': 448.678, 'duration': 1.121}, {'end': 452.941, 'text': "We'll get rid of the description, The icon.", 'start': 449.839, 'duration': 3.102}, {'end': 455.603, 'text': "I don't need that stuff.", 'start': 452.941, 'duration': 2.662}, {'end': 456.564, 'text': 'Alright, the title.', 'start': 455.603, 'duration': 0.961}, {'end': 460.426, 'text': "let's change that to admin area.", 'start': 456.564, 'duration': 3.862}, {'end': 470.666, 'text': 'I will say admin area and then dashboard, and Okay, now for linking the bootstrap CSS.', 'start': 460.426, 'duration': 10.24}, {'end': 472.486, 'text': "let's see we don't need the dist.", 'start': 470.666, 'duration': 1.82}, {'end': 475.328, 'text': "It's going to basically just be in the CSS folder.", 'start': 472.767, 'duration': 2.561}, {'end': 479.029, 'text': 'Alright, and then we can get rid of this stuff.', 'start': 476.968, 'duration': 2.061}, {'end': 482.451, 'text': "I don't need the IE 10 viewport hack or all that stuff.", 'start': 479.069, 'duration': 3.382}, {'end': 483.511, 'text': "So let's get rid of this.", 'start': 482.491, 'duration': 1.02}, {'end': 488.293, 'text': 'Okay, I want this to be as simple as possible.', 'start': 483.531, 'duration': 4.762}, {'end': 491.698, 'text': "Alright, so let's see.", 'start': 490.458, 'duration': 1.24}, {'end': 493.399, 'text': "The navbar, we're going to leave that.", 'start': 491.718, 'duration': 1.681}, {'end': 496.359, 'text': "Let's see, we have a container here.", 'start': 493.419, 'duration': 2.94}, {'end': 501.341, 'text': "Let's just get rid of this for now.", 'start': 499.86, 'duration': 1.481}, {'end': 503.021, 'text': 'Just want the navbar.', 'start': 501.941, 'duration': 1.08}, {'end': 508.763, 'text': "And then for the JavaScript, we're linking to jQuery here, which we want to keep.", 'start': 503.441, 'duration': 5.322}, {'end': 513.703, 'text': "I don't want this right here.", 'start': 510.503, 'duration': 3.2}, {'end': 518.126, 'text': "Okay, we're just going to use that Google CDN for jQuery.", 'start': 514.943, 'duration': 3.183}, {'end': 520.169, 'text': "And then here, let's fix this path.", 'start': 518.568, 'duration': 1.601}], 'summary': 'Setting up a bootstrap file and making edits to index.html for a project using atom editor.', 'duration': 28.451, 'max_score': 365.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo365668.jpg'}, {'end': 693.56, 'src': 'embed', 'start': 637.53, 'weight': 3, 'content': [{'end': 640.852, 'text': 'I mean, you can make an account page, I guess, or profile page if you want.', 'start': 637.53, 'duration': 3.322}, {'end': 643.775, 'text': 'And then this one is going to be the logout.', 'start': 641.773, 'duration': 2.002}, {'end': 645.977, 'text': "And that's going to go to login.html.", 'start': 644.235, 'duration': 1.742}, {'end': 649.539, 'text': 'Okay, and then we can get rid of these.', 'start': 647.077, 'duration': 2.462}, {'end': 651.541, 'text': "Alright, so let's take a look at that.", 'start': 649.559, 'duration': 1.982}, {'end': 654.159, 'text': 'Okay, good.', 'start': 653.519, 'duration': 0.64}, {'end': 661.84, 'text': 'Now, this nav bar is going to be smaller than usual, so we need to add some CSS.', 'start': 656.94, 'duration': 4.9}, {'end': 664.121, 'text': "So we're going to create a custom style sheet.", 'start': 661.9, 'duration': 2.221}, {'end': 668.662, 'text': "And while we're in here, the CSS folder, let's get rid of some of this we really don't need.", 'start': 664.681, 'duration': 3.981}, {'end': 670.922, 'text': "So let's see.", 'start': 669.982, 'duration': 0.94}, {'end': 675.163, 'text': 'All we need is bootstrap.min.css.', 'start': 672.702, 'duration': 2.461}, {'end': 678.003, 'text': "Okay, so we'll delete everything else.", 'start': 675.343, 'duration': 2.66}, {'end': 681.484, 'text': "And then we're just going to create a style.css.", 'start': 678.923, 'duration': 2.561}, {'end': 686.595, 'text': "That'll be where we put all of our custom styles.", 'start': 684.273, 'duration': 2.322}, {'end': 691.558, 'text': "In the JS folder, let's also get rid of bootstrap.js and npm.js.", 'start': 687.215, 'duration': 4.343}, {'end': 693.56, 'text': 'Clean it up a little bit.', 'start': 692.599, 'duration': 0.961}], 'summary': 'Creating a profile page, custom css, and cleaning up unnecessary files.', 'duration': 56.03, 'max_score': 637.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo637530.jpg'}, {'end': 849.931, 'src': 'embed', 'start': 801.447, 'weight': 7, 'content': [{'end': 808.152, 'text': "So let's go ahead and put this, make sure you put it below the bootstrap so that it takes priority.", 'start': 801.447, 'duration': 6.705}, {'end': 817.84, 'text': "Okay, let's see.", 'start': 808.172, 'duration': 9.668}, {'end': 826.666, 'text': 'Oh, you know what? This should just be navbar.', 'start': 822.401, 'duration': 4.265}, {'end': 832.037, 'text': 'there we go.', 'start': 830.936, 'duration': 1.101}, {'end': 836.08, 'text': "okay, so now it's smaller than the usual navbar.", 'start': 832.037, 'duration': 4.043}, {'end': 844.487, 'text': "now, as far as the colors, we're actually going to use a website that will generate a color scheme for us.", 'start': 836.08, 'duration': 8.407}, {'end': 846.308, 'text': 'so this is the URL right here.', 'start': 844.487, 'duration': 1.821}, {'end': 849.931, 'text': "it's work.smarchal.com.", 'start': 846.308, 'duration': 3.623}], 'summary': 'Using a website for color scheme generation, making the navbar smaller below the bootstrap.', 'duration': 48.484, 'max_score': 801.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo801447.jpg'}], 'start': 306.567, 'title': 'Simplifying web development', 'summary': 'Covers creating an admin dashboard with bootstrap and simplifying css and javascript by removing unnecessary elements, linking to jquery via google cdn, customizing the navbar, creating a custom style sheet, and using a website to generate a color scheme.', 'chapters': [{'end': 436.53, 'start': 306.567, 'title': 'Creating admin dashboard with bootstrap', 'summary': 'Covers creating an admin dashboard with bootstrap, including creating a folder, downloading and integrating bootstrap, and using a starter template for the dashboard.', 'duration': 129.963, 'highlights': ["Creating folder 'admin_strap_theme' on desktop and index.html for dashboard The speaker creates a folder 'admin_strap_theme' on the desktop and an index.html file for the dashboard.", 'Downloading and integrating Bootstrap for the dashboard Instructions for downloading and integrating Bootstrap for the dashboard are provided, emphasizing simplicity for beginners.', 'Using a starter template for the dashboard The speaker demonstrates using a starter template from getbootstrap.com for the dashboard, involving copying and pasting the code for efficiency.']}, {'end': 890.907, 'start': 437.55, 'title': 'Web development: simplifying css and javascript', 'summary': 'Focuses on simplifying the css and javascript components by removing unnecessary elements, linking to jquery via google cdn, customizing the navbar, creating a custom style sheet, and using a website to generate a color scheme.', 'duration': 453.357, 'highlights': ['The chapter emphasizes the removal of unnecessary elements from the CSS and JavaScript components, such as getting rid of comments, descriptions, icons, and unused scripts, to simplify the codebase and improve performance.', 'The use of Google CDN for jQuery is highlighted as a preferred method for linking jQuery, indicating a commitment to leveraging external resources for improved efficiency.', "Customization of the navbar through CSS is explained in detail, including specific style modifications such as setting minimum height, overriding default styles with 'important', and removing rounded corners to achieve the desired appearance.", 'The decision to create a custom style sheet for housing all custom styles is underscored, promoting a structured approach to managing CSS and ensuring separation of concerns within the codebase.', 'The utilization of a website for generating a color scheme is mentioned, demonstrating a practical approach to design decisions and the adoption of external tools for enhancing visual appeal.']}], 'duration': 584.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo306567.jpg', 'highlights': ["Creating folder 'admin_strap_theme' on desktop and index.html for dashboard", 'Downloading and integrating Bootstrap for the dashboard', 'Using a starter template for the dashboard', 'The chapter emphasizes the removal of unnecessary elements from the CSS and JavaScript components', 'Customization of the navbar through CSS is explained in detail', 'The decision to create a custom style sheet for housing all custom styles is underscored', 'The use of Google CDN for jQuery is highlighted as a preferred method for linking jQuery', 'The utilization of a website for generating a color scheme is mentioned']}, {'end': 1837.614, 'segs': [{'end': 1001.179, 'src': 'heatmap', 'start': 907.612, 'weight': 0.81, 'content': [{'end': 912.473, 'text': "that hexadecimal value right there, and let's see the hover.", 'start': 907.612, 'duration': 4.861}, {'end': 921.589, 'text': "I don't want that to be purple, so that's gonna be that right there.", 'start': 912.473, 'duration': 9.116}, {'end': 926.693, 'text': "choose, okay, so that's good.", 'start': 921.589, 'duration': 5.104}, {'end': 931.777, 'text': "so what we'll do now is go down and it gives you the SAS or less or whatever.", 'start': 926.693, 'duration': 5.084}, {'end': 942.381, 'text': "we just want the standard CSS and we're just going to grab this and Notice that it has the media query as well for smaller screen sizes.", 'start': 931.777, 'duration': 10.604}, {'end': 943.402, 'text': "So let's copy that.", 'start': 942.501, 'duration': 0.901}, {'end': 946.644, 'text': "And then we're going to go and paste that right here.", 'start': 944.302, 'duration': 2.342}, {'end': 949.205, 'text': 'Media queries I want to keep at the bottom.', 'start': 947.404, 'duration': 1.801}, {'end': 951.846, 'text': 'So all of our other CSS will go above it.', 'start': 949.665, 'duration': 2.181}, {'end': 954.128, 'text': "And let's see what that looks like.", 'start': 952.907, 'duration': 1.221}, {'end': 956.749, 'text': "Now notice that it's for navbar default.", 'start': 954.188, 'duration': 2.561}, {'end': 959.37, 'text': "So let's save that and go back.", 'start': 957.85, 'duration': 1.52}, {'end': 961.592, 'text': 'And we have navbar inverse.', 'start': 959.811, 'duration': 1.781}, {'end': 963.593, 'text': "We're just going to change that to default.", 'start': 961.632, 'duration': 1.961}, {'end': 965.834, 'text': "All right, so let's see.", 'start': 964.493, 'duration': 1.341}, {'end': 966.875, 'text': 'Hopefully that works.', 'start': 965.895, 'duration': 0.98}, {'end': 968.817, 'text': 'And there we go.', 'start': 968.136, 'duration': 0.681}, {'end': 971.199, 'text': 'So now we have our reddish-orangey color.', 'start': 968.837, 'duration': 2.362}, {'end': 978.484, 'text': 'Now I want to be able to apply this color to things like panels and other areas.', 'start': 973.04, 'duration': 5.444}, {'end': 980.146, 'text': "So we're going to create a class.", 'start': 978.564, 'duration': 1.582}, {'end': 987.271, 'text': "Okay, we're going to create a class called MainColor-BG.", 'start': 983.268, 'duration': 4.003}, {'end': 1001.179, 'text': "Okay, and then we're going to put, let's see, this background color here and the border color.", 'start': 991.357, 'duration': 9.822}], 'summary': 'Applying standard css with media query for smaller screens, changing navbar color to reddish-orange, creating maincolor-bg class.', 'duration': 93.567, 'max_score': 907.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo907612.jpg'}, {'end': 987.271, 'src': 'embed', 'start': 957.85, 'weight': 5, 'content': [{'end': 959.37, 'text': "So let's save that and go back.", 'start': 957.85, 'duration': 1.52}, {'end': 961.592, 'text': 'And we have navbar inverse.', 'start': 959.811, 'duration': 1.781}, {'end': 963.593, 'text': "We're just going to change that to default.", 'start': 961.632, 'duration': 1.961}, {'end': 965.834, 'text': "All right, so let's see.", 'start': 964.493, 'duration': 1.341}, {'end': 966.875, 'text': 'Hopefully that works.', 'start': 965.895, 'duration': 0.98}, {'end': 968.817, 'text': 'And there we go.', 'start': 968.136, 'duration': 0.681}, {'end': 971.199, 'text': 'So now we have our reddish-orangey color.', 'start': 968.837, 'duration': 2.362}, {'end': 978.484, 'text': 'Now I want to be able to apply this color to things like panels and other areas.', 'start': 973.04, 'duration': 5.444}, {'end': 980.146, 'text': "So we're going to create a class.", 'start': 978.564, 'duration': 1.582}, {'end': 987.271, 'text': "Okay, we're going to create a class called MainColor-BG.", 'start': 983.268, 'duration': 4.003}], 'summary': 'Changed navbar color to default and created maincolor-bg class.', 'duration': 29.421, 'max_score': 957.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo957850.jpg'}, {'end': 1086.641, 'src': 'embed', 'start': 1034.733, 'weight': 8, 'content': [{'end': 1038.615, 'text': "So we're going to use a header tag and I'm going to give this an ID of header as well.", 'start': 1034.733, 'duration': 3.882}, {'end': 1048.759, 'text': "Okay, and let's put in a container here because we want everything pushed to the middle.", 'start': 1038.635, 'duration': 10.124}, {'end': 1058.147, 'text': 'Okay, excuse me.', 'start': 1056.766, 'duration': 1.381}, {'end': 1061.25, 'text': "Now we're going to use the grid system here, so let's put a row.", 'start': 1058.448, 'duration': 2.802}, {'end': 1069.177, 'text': "And in that row, we're going to have two columns.", 'start': 1066.695, 'duration': 2.482}, {'end': 1073.521, 'text': "We're going to do call MD 10.", 'start': 1069.197, 'duration': 4.324}, {'end': 1075.323, 'text': 'Okay, one 10 column.', 'start': 1073.521, 'duration': 1.802}, {'end': 1086.641, 'text': 'And also call MD 2.', 'start': 1079.606, 'duration': 7.035}], 'summary': 'Creating a web layout with a header tag and grid system, using 10 and 2 column structure.', 'duration': 51.908, 'max_score': 1034.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1034733.jpg'}, {'end': 1200.548, 'src': 'heatmap', 'start': 1095.425, 'weight': 1, 'content': [{'end': 1097.166, 'text': "And let's say dashboard.", 'start': 1095.425, 'duration': 1.741}, {'end': 1102.369, 'text': "And I'm also going to put some small tags for some subtext.", 'start': 1097.186, 'duration': 5.183}, {'end': 1109.872, 'text': "So we'll just say manage your site.", 'start': 1105.77, 'duration': 4.102}, {'end': 1113.694, 'text': "Okay, so let's save that.", 'start': 1111.653, 'duration': 2.041}, {'end': 1119.657, 'text': "Now I want to have an icon here, a dashboard icon, so let's go to Get Bootstrap.", 'start': 1115.515, 'duration': 4.142}, {'end': 1125.321, 'text': "And we'll go to Components and Glyphicons.", 'start': 1121.819, 'duration': 3.502}, {'end': 1128.503, 'text': 'And then I want the gear, which is right here.', 'start': 1126.041, 'duration': 2.462}, {'end': 1129.343, 'text': "It's COG.", 'start': 1128.543, 'duration': 0.8}, {'end': 1135.752, 'text': 'Now when we want to use an icon, We want to just put it in a span tag like this.', 'start': 1129.383, 'duration': 6.369}, {'end': 1136.833, 'text': "So let's copy that.", 'start': 1135.832, 'duration': 1.001}, {'end': 1140.014, 'text': "And we're going to put this, make sure it's inside the H1.", 'start': 1137.413, 'duration': 2.601}, {'end': 1142.515, 'text': "And make sure there's a space after it.", 'start': 1140.854, 'duration': 1.661}, {'end': 1145.476, 'text': "And then we're going to change this to COG.", 'start': 1143.115, 'duration': 2.361}, {'end': 1148.377, 'text': 'OK, save that.', 'start': 1145.496, 'duration': 2.881}, {'end': 1151.938, 'text': 'And there we go.', 'start': 1151.298, 'duration': 0.64}, {'end': 1153.319, 'text': 'So now we have our dashboard icon.', 'start': 1151.958, 'duration': 1.361}, {'end': 1160.346, 'text': "now, on the other side, we're going to have that create content drop down.", 'start': 1155.123, 'duration': 5.223}, {'end': 1168.049, 'text': "so let's go to get bootstrap and go to drop downs and we're going to grab this right here.", 'start': 1160.346, 'duration': 7.703}, {'end': 1172.391, 'text': "save us some time and we're going to paste that right in there.", 'start': 1168.049, 'duration': 4.342}, {'end': 1181.996, 'text': "all right, and let's change this text right here to create content.", 'start': 1172.391, 'duration': 9.605}, {'end': 1200.548, 'text': "And let's see, as far as the links we're going to have add page, add post, add user.", 'start': 1186.617, 'duration': 13.931}], 'summary': 'Creating dashboard icon and content dropdown for site management.', 'duration': 45.425, 'max_score': 1095.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1095425.jpg'}, {'end': 1271.014, 'src': 'embed', 'start': 1227.138, 'weight': 2, 'content': [{'end': 1232.442, 'text': "so let's go to style css and let's let's put a comment in here.", 'start': 1227.138, 'duration': 5.304}, {'end': 1238.72, 'text': "we'll just say, header Should probably comment up here to the nav bar.", 'start': 1232.442, 'duration': 6.278}, {'end': 1250.724, 'text': "And here we'll just say custom.", 'start': 1248.783, 'duration': 1.941}, {'end': 1256.586, 'text': 'Okay, so for the header, remember it has an ID of header.', 'start': 1253.285, 'duration': 3.301}, {'end': 1266.029, 'text': "And we're going to give it a background of 333, 333.", 'start': 1259.384, 'duration': 6.645}, {'end': 1268.893, 'text': "And that's almost a black, a really dark gray.", 'start': 1266.03, 'duration': 2.863}, {'end': 1271.014, 'text': 'So we need to make the color of the text white.', 'start': 1268.953, 'duration': 2.061}], 'summary': 'Styling the header with dark gray background and white text.', 'duration': 43.876, 'max_score': 1227.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1227138.jpg'}, {'end': 1356.833, 'src': 'embed', 'start': 1314.279, 'weight': 3, 'content': [{'end': 1316.24, 'text': 'Okay, it looks pretty good.', 'start': 1314.279, 'duration': 1.961}, {'end': 1322.352, 'text': "So the next thing we're going to do is the breadcrumb, which is really easy.", 'start': 1318.089, 'duration': 4.263}, {'end': 1323.693, 'text': "We're going to go under the header.", 'start': 1322.392, 'duration': 1.301}, {'end': 1328.737, 'text': "I'm going to use a HTML5 section tag for this.", 'start': 1325.835, 'duration': 2.902}, {'end': 1333.661, 'text': "We'll say ID breadcrumb.", 'start': 1329.818, 'duration': 3.843}, {'end': 1340.486, 'text': "And let's see.", 'start': 1339.485, 'duration': 1.001}, {'end': 1341.427, 'text': 'So this is really easy.', 'start': 1340.506, 'duration': 0.921}, {'end': 1342.828, 'text': "We're going to put a container.", 'start': 1341.447, 'duration': 1.381}, {'end': 1356.833, 'text': "And it's going to actually be an OL, an ordered list tag, with the class of breadcrumb.", 'start': 1351.691, 'duration': 5.142}], 'summary': 'Creating a breadcrumb using html5 section tag and ol with class breadcrumb.', 'duration': 42.554, 'max_score': 1314.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1314279.jpg'}, {'end': 1533.601, 'src': 'embed', 'start': 1490.268, 'weight': 0, 'content': [{'end': 1510.993, 'text': "So let's do div class whoops Div class and we'll say call md3 for the sidebar And div class Call MD 9.", 'start': 1490.268, 'duration': 20.725}, {'end': 1520.481, 'text': 'That will be the main area.', 'start': 1510.993, 'duration': 9.488}, {'end': 1522.483, 'text': "We'll start with the sidebar.", 'start': 1521.322, 'duration': 1.161}, {'end': 1523.564, 'text': "We're going to have a list group.", 'start': 1522.503, 'duration': 1.061}, {'end': 1527.427, 'text': "For a list group, let's see.", 'start': 1525.585, 'duration': 1.842}, {'end': 1528.588, 'text': "Let's go to Get Bootstrap.", 'start': 1527.447, 'duration': 1.141}, {'end': 1533.601, 'text': "go to list group and we don't want this one.", 'start': 1530.12, 'duration': 3.481}], 'summary': 'Creating a webpage layout with a 3-column sidebar and a 9-column main area, incorporating a list group from bootstrap.', 'duration': 43.333, 'max_score': 1490.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1490268.jpg'}, {'end': 1680.647, 'src': 'embed', 'start': 1644.586, 'weight': 6, 'content': [{'end': 1652.502, 'text': "list dash alt Alright and Font Awesome has much better icons, but, like I said, I didn't want to use an extra library.", 'start': 1644.586, 'duration': 7.916}, {'end': 1657.205, 'text': "For Posts, let's paste that in, and we're going to use Pencil.", 'start': 1653.363, 'duration': 3.842}, {'end': 1664.63, 'text': "For Users, we're going to use, I think it's just User.", 'start': 1659.807, 'duration': 4.823}, {'end': 1666.992, 'text': "So let's take a look at that.", 'start': 1665.731, 'duration': 1.261}, {'end': 1669.793, 'text': 'Okay, so now we have our icons.', 'start': 1667.012, 'duration': 2.781}, {'end': 1671.935, 'text': 'Now for the badges.', 'start': 1670.474, 'duration': 1.461}, {'end': 1678.946, 'text': "We're going to put that after the text.", 'start': 1674.363, 'duration': 4.583}, {'end': 1680.647, 'text': "Dashboard doesn't get one.", 'start': 1679.266, 'duration': 1.381}], 'summary': 'Using font awesome for icons, pencil for posts, and user for users. dashboard has no icon.', 'duration': 36.061, 'max_score': 1644.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1644586.jpg'}, {'end': 1745.641, 'src': 'embed', 'start': 1713.391, 'weight': 7, 'content': [{'end': 1721.765, 'text': "Alright, so that is our side menu and Now, under that, we're going to have our progress bars for the disk space and bandwidth.", 'start': 1713.391, 'duration': 8.374}, {'end': 1726.129, 'text': "So let's go directly under the list group.", 'start': 1723.186, 'duration': 2.943}, {'end': 1729.471, 'text': 'And this is going to be in a well.', 'start': 1728.01, 'duration': 1.461}, {'end': 1738.518, 'text': 'Okay, a well is just that gray background with a border and some padding.', 'start': 1729.491, 'duration': 9.027}, {'end': 1742.721, 'text': "Now, for the progress bar, let's go ahead and grab that.", 'start': 1739.959, 'duration': 2.762}, {'end': 1745.641, 'text': 'So progress bars.', 'start': 1744.301, 'duration': 1.34}], 'summary': 'Creating progress bars for disk space and bandwidth in the side menu.', 'duration': 32.25, 'max_score': 1713.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1713391.jpg'}], 'start': 892.768, 'title': 'Frontend web design', 'summary': 'Covers standard css application, grid system usage, and html5 section structuring. it also includes styling dropdowns, headers, and breadcrumbs, as well as creating a dashboard layout with a sidebar, list group, icons, badges, and progress bars.', 'chapters': [{'end': 1153.319, 'start': 892.768, 'title': 'Css styling and html structure', 'summary': 'Covers applying standard css for navbar and creating a class for color, along with structuring header using grid system and adding dashboard icon.', 'duration': 260.551, 'highlights': ['The chapter covers applying standard CSS for navbar and creating a class for color, along with structuring header using grid system and adding dashboard icon.', 'Creating a class called MainColor-BG to apply a specific background color and border color, and making the color white.', 'Structuring the header using the grid system with a row and two columns, and adding an H1 tag for the heading and a span tag for the dashboard icon.']}, {'end': 1449.813, 'start': 1155.123, 'title': 'Styling dropdowns, header, breadcrumb, and main area', 'summary': 'Covers creating a content dropdown, styling the header, adding a breadcrumb, and structuring the main area using html5 sections. the dropdown is styled with a dark gray background and white text, the breadcrumb is added with a dark gray background and the main area is structured using html5 sections.', 'duration': 294.69, 'highlights': ['Creating a content dropdown The chapter demonstrates creating a content dropdown with links for add page, add post, and add user, and intends to further style the dropdown.', 'Styling the header The header is styled with a background color of #333333, white text, a padding bottom of 10 pixels, and a margin bottom of 15 pixels.', 'Adding a breadcrumb A breadcrumb is added using an ordered list tag with the class of breadcrumb, and styled with a background color of #CCCCCC and dark gray text.', 'Structuring the main area The main area is structured using HTML5 sections, and the chapter emphasizes breaking everything up into sections for better organization.']}, {'end': 1837.614, 'start': 1450.533, 'title': 'Creating dashboard layout with sidebar', 'summary': 'Demonstrates the process of creating a dashboard layout with a sidebar, including adding a list group with links, customizing the appearance with icons and badges, and incorporating progress bars for disk space and bandwidth usage.', 'duration': 387.081, 'highlights': ['The chapter demonstrates the process of creating a dashboard layout with a sidebar, including adding a list group with links, customizing the appearance with icons and badges, and incorporating progress bars for disk space and bandwidth usage.', 'The sidebar is created with a list group containing links for dashboard, pages, posts, and users, with corresponding HTML file links and custom classes for styling, providing a user-friendly navigation interface.', 'Icons and badges are added to the sidebar for visual representation, with icons such as COG, list-alt, pencil, and user, and badges displaying the number of pages and users, enhancing the aesthetic appeal and functionality of the dashboard.', "Progress bars for disk space and bandwidth usage are implemented with appropriate percentage values, accompanied by labels specifying 'disk space used' and 'bandwidth used,' offering a clear visualization of resource utilization.", 'The process involves utilizing well and progress bar components from Bootstrap, ensuring a visually appealing and structured presentation of the disk space and bandwidth usage information.']}], 'duration': 944.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo892768.jpg', 'highlights': ['The chapter covers creating a dashboard layout with a sidebar and list group - 3', 'Creating a content dropdown with links for add page, add post, and add user - 2', 'Styling the header with a background color of #333333 and white text - 2', 'Adding a breadcrumb using an ordered list tag with the class of breadcrumb - 2', 'Structuring the main area using HTML5 sections for better organization - 2', 'Creating a class called MainColor-BG to apply a specific background color and border color - 1', 'Adding icons and badges to the sidebar for visual representation - 1', 'Implementing progress bars for disk space and bandwidth usage - 1', 'Creating a class for color and structuring header using grid system - 1']}, {'end': 2151.411, 'segs': [{'end': 1942.686, 'src': 'heatmap', 'start': 1859.082, 'weight': 0, 'content': [{'end': 1861.102, 'text': 'So we want to be in this call MD9.', 'start': 1859.082, 'duration': 2.02}, {'end': 1865.224, 'text': "Now we're going to put the boxes in a panel.", 'start': 1861.422, 'duration': 3.802}, {'end': 1869.325, 'text': "So let's go back to our documentation and click on panels.", 'start': 1865.704, 'duration': 3.621}, {'end': 1874.107, 'text': 'And we want this right here, okay, with a heading.', 'start': 1870.906, 'duration': 3.201}, {'end': 1875.427, 'text': "So we're going to grab this.", 'start': 1874.167, 'duration': 1.26}, {'end': 1881.509, 'text': "And we'll go ahead and paste that in.", 'start': 1880.028, 'duration': 1.481}, {'end': 1887.374, 'text': "OK, so let's see what that looks like.", 'start': 1885.954, 'duration': 1.42}, {'end': 1894.316, 'text': 'All right, now for the panel, I want the heading to have the same color here.', 'start': 1887.394, 'duration': 6.922}, {'end': 1896.116, 'text': 'Remember, we have that class we can use.', 'start': 1894.336, 'duration': 1.78}, {'end': 1899.017, 'text': 'So we want to put that on the panel heading.', 'start': 1896.736, 'duration': 2.281}, {'end': 1902.177, 'text': "That's going to be main color BG.", 'start': 1899.977, 'duration': 2.2}, {'end': 1906.038, 'text': 'And as simple as that changes the color.', 'start': 1903.157, 'duration': 2.881}, {'end': 1908.638, 'text': 'Now that text should be white.', 'start': 1906.598, 'duration': 2.04}, {'end': 1911.019, 'text': "Let's see.", 'start': 1910.479, 'duration': 0.54}, {'end': 1915.729, 'text': "So let's see.", 'start': 1914.148, 'duration': 1.581}, {'end': 1917.991, 'text': 'Maybe we need to put an important on here as well.', 'start': 1915.749, 'duration': 2.242}, {'end': 1921.793, 'text': 'There we go.', 'start': 1921.373, 'duration': 0.42}, {'end': 1926.316, 'text': "Okay So in the panel, let's first of all change this title.", 'start': 1922.454, 'duration': 3.862}, {'end': 1928.257, 'text': "We'll say website overview.", 'start': 1926.356, 'duration': 1.901}, {'end': 1938.003, 'text': "And we're going to have in the body here, we're going to have four three column divs.", 'start': 1931.219, 'duration': 6.784}, {'end': 1942.686, 'text': "Okay So let's say div class call MD3.", 'start': 1938.424, 'duration': 4.262}], 'summary': 'Setting up a panel with a heading and color changes in a call md9.', 'duration': 105.052, 'max_score': 1859.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1859082.jpg'}, {'end': 2012.191, 'src': 'embed', 'start': 1975.397, 'weight': 2, 'content': [{'end': 1983.643, 'text': "On this well, let's also Actually, I don't think we need to add any more classes there.", 'start': 1975.397, 'duration': 8.246}, {'end': 1985.124, 'text': "Let's put in our H2.", 'start': 1984.144, 'duration': 0.98}, {'end': 1991.274, 'text': "And in this H2, we'll have the icon.", 'start': 1988.832, 'duration': 2.442}, {'end': 1994.657, 'text': 'This is going to be for users.', 'start': 1991.775, 'duration': 2.882}, {'end': 1997.779, 'text': "So let's see.", 'start': 1996.338, 'duration': 1.441}, {'end': 2000.862, 'text': "Let's grab this span right here.", 'start': 1998.48, 'duration': 2.382}, {'end': 2003.464, 'text': 'This is the icon for the user.', 'start': 2000.882, 'duration': 2.582}, {'end': 2005.005, 'text': 'Copy that.', 'start': 2004.325, 'duration': 0.68}, {'end': 2008.348, 'text': "And we're going to put that right inside the H2.", 'start': 2006.006, 'duration': 2.342}, {'end': 2009.889, 'text': 'All right.', 'start': 2008.368, 'duration': 1.521}, {'end': 2012.191, 'text': "And then let's see.", 'start': 2009.969, 'duration': 2.222}], 'summary': 'Adding user icon to h2 element for web design.', 'duration': 36.794, 'max_score': 1975.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1975397.jpg'}, {'end': 2092.145, 'src': 'embed', 'start': 2051.148, 'weight': 1, 'content': [{'end': 2057.632, 'text': "Okay, we'll add that to all of the wells.", 'start': 2051.148, 'duration': 6.484}, {'end': 2063.678, 'text': "Okay, and then we're going to change the content.", 'start': 2060.956, 'duration': 2.722}, {'end': 2067.38, 'text': 'This is going to be for pages.', 'start': 2064.739, 'duration': 2.641}, {'end': 2071.284, 'text': 'So pages had the icon list alt.', 'start': 2068.862, 'duration': 2.422}, {'end': 2077.215, 'text': 'And pages we have, I think, 12.', 'start': 2073.871, 'duration': 3.344}, {'end': 2079.036, 'text': 'And then we just want to change this text.', 'start': 2077.215, 'duration': 1.821}, {'end': 2088.563, 'text': 'Okay, this next one will be posts, which have, what did that have? Pencil for the class, for the icon.', 'start': 2079.956, 'duration': 8.607}, {'end': 2092.145, 'text': "33 posts, and then we'll change this text.", 'start': 2088.583, 'duration': 3.562}], 'summary': 'Content changes for pages and posts: 12 icon lists for pages, 33 posts with pencil icon.', 'duration': 40.997, 'max_score': 2051.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2051148.jpg'}], 'start': 1837.634, 'title': 'Website design and user interface', 'summary': 'Covers the process of website designing, including creating layout elements and using specific classes for colors. it also focuses on adding user details and icons, incorporating quantities such as 203 users, and updating icons and text for different sections along with specific quantities like 12 pages, 33 posts, and 12,334 visitors.', 'chapters': [{'end': 1975.097, 'start': 1837.634, 'title': 'Website designing process', 'summary': 'Discusses the process of designing a website, including creating sidebar and main column, using panels and divs with specific classes to achieve desired colors and layout.', 'duration': 137.463, 'highlights': ['The chapter discusses the process of designing a website, including creating sidebar and main column, using panels and divs with specific classes to achieve desired colors and layout.', 'The panel heading is set to have the main color background, and the text color is changed to white, resulting in a visually appealing design.', 'The main column is designed using the call MD9 class, and the panel is customized to have a heading with the same color as the background, achieving a cohesive design.', 'The process involves using specific classes and divs to create a visually appealing and well-structured website layout.']}, {'end': 2051.128, 'start': 1975.397, 'title': 'Adding user details and icons', 'summary': 'Focuses on adding user details and icons to a web page, including the addition of an icon for users, displaying the number of users (203), and centering the content within a box.', 'duration': 75.731, 'highlights': ['The chapter focuses on adding an icon for users and displaying the number of users (203).', 'Instructions given to center the content within a box by adding a specific class.', "The process involves putting the number of users (203) inside an H2 tag and adding an H4 tag for 'users'."]}, {'end': 2151.411, 'start': 2051.148, 'title': 'Updating icons and text', 'summary': 'Discusses updating icons and text for different sections like pages, posts, and visitors, with specific quantities like 12 pages, 33 posts, and 12,334 visitors, and also includes centering the content using a style sheet.', 'duration': 100.263, 'highlights': ['The chapter discusses updating icons and text for different sections like pages, posts, and visitors, with specific quantities like 12 pages, 33 posts, and 12,334 visitors.', "It includes centering the content using a style sheet with a class called dash box and applying 'text align center' to it."]}], 'duration': 313.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo1837634.jpg', 'highlights': ['The process involves using specific classes and divs to create a visually appealing and well-structured website layout.', 'The chapter discusses updating icons and text for different sections like pages, posts, and visitors, with specific quantities like 12 pages, 33 posts, and 12,334 visitors.', 'The chapter focuses on adding an icon for users and displaying the number of users (203).', 'The panel heading is set to have the main color background, and the text color is changed to white, resulting in a visually appealing design.', 'The main column is designed using the call MD9 class, and the panel is customized to have a heading with the same color as the background, achieving a cohesive design.']}, {'end': 2652.591, 'segs': [{'end': 2273.455, 'src': 'heatmap', 'start': 2151.951, 'weight': 2, 'content': [{'end': 2153.252, 'text': 'So that takes care of that.', 'start': 2151.951, 'duration': 1.301}, {'end': 2164.395, 'text': "Now the next thing we're going to do is the users down below the latest users, which is going to be a table and it's going to be inside of a panel.", 'start': 2154.052, 'duration': 10.343}, {'end': 2166.296, 'text': "So let's grab that panel code again.", 'start': 2164.475, 'duration': 1.821}, {'end': 2175.96, 'text': 'and we want to make sure we put this in the right place, which is going to be under the first panel.', 'start': 2169.839, 'duration': 6.121}, {'end': 2178.421, 'text': 'so that starts here and ends here.', 'start': 2175.96, 'duration': 2.461}, {'end': 2189.983, 'text': 'okay, and we should probably put a comment up here.', 'start': 2178.421, 'duration': 11.562}, {'end': 2198.064, 'text': "let's put, just say, website overview.", 'start': 2189.983, 'duration': 8.081}, {'end': 2200.736, 'text': 'All right.', 'start': 2200.416, 'duration': 0.32}, {'end': 2203.159, 'text': "so latest users, let's paste in that panel.", 'start': 2200.736, 'duration': 2.423}, {'end': 2218.735, 'text': "Okay, now in the body is where we're going to put our table.", 'start': 2203.179, 'duration': 15.556}, {'end': 2222.459, 'text': "Now I'm going to paste the table in just to save some time.", 'start': 2219.536, 'duration': 2.923}, {'end': 2227.232, 'text': 'Okay, so paste that in.', 'start': 2225.492, 'duration': 1.74}, {'end': 2230.873, 'text': 'Now a table by default is going to look pretty ugly.', 'start': 2228.013, 'duration': 2.86}, {'end': 2235.594, 'text': 'So all we need to do is add a couple classes to our table tag.', 'start': 2231.793, 'duration': 3.801}, {'end': 2238.815, 'text': 'We want a table.', 'start': 2237.895, 'duration': 0.92}, {'end': 2242.676, 'text': 'We want table striped.', 'start': 2239.695, 'duration': 2.981}, {'end': 2247.217, 'text': "And let's also do table hover.", 'start': 2244.296, 'duration': 2.921}, {'end': 2251.278, 'text': 'And there we go.', 'start': 2250.677, 'duration': 0.601}, {'end': 2253.378, 'text': "It's as easy as that.", 'start': 2252.418, 'duration': 0.96}, {'end': 2256.983, 'text': 'So our dashboard is pretty much complete.', 'start': 2254.821, 'duration': 2.162}, {'end': 2260.185, 'text': 'All we need to do is add the modal for the add page.', 'start': 2257.083, 'duration': 3.102}, {'end': 2273.455, 'text': "All right, now what we'll do, let's see, let's go up to where our dropdown is, which is right here.", 'start': 2261.046, 'duration': 12.409}], 'summary': 'Adding a table with specific classes to the dashboard completes the task.', 'duration': 121.504, 'max_score': 2151.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2151951.jpg'}, {'end': 2412.87, 'src': 'embed', 'start': 2376.96, 'weight': 1, 'content': [{'end': 2382.903, 'text': "we need to change that to add page all right, and then let's just test it out.", 'start': 2376.96, 'duration': 5.943}, {'end': 2385.224, 'text': "so we'll save it and it should open.", 'start': 2382.903, 'duration': 2.321}, {'end': 2392.729, 'text': 'okay, good, so now we just need to basically edit the content all right.', 'start': 2385.224, 'duration': 7.505}, {'end': 2407.265, 'text': "so let's Let's go to the right here, modal title, and we're going to change that to add page.", 'start': 2392.729, 'duration': 14.536}, {'end': 2409.507, 'text': 'All right.', 'start': 2407.285, 'duration': 2.222}, {'end': 2412.87, 'text': 'And in the body, you are going to have a form.', 'start': 2410.127, 'duration': 2.743}], 'summary': 'Editing content to add a page with a form.', 'duration': 35.91, 'max_score': 2376.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2376960.jpg'}, {'end': 2557.795, 'src': 'embed', 'start': 2520.407, 'weight': 0, 'content': [{'end': 2522.669, 'text': 'Yep, so this tells us how to implement it.', 'start': 2520.407, 'duration': 2.262}, {'end': 2527.031, 'text': "We're going to grab this script tag and we're going to put that in the head.", 'start': 2523.189, 'duration': 3.842}, {'end': 2534.456, 'text': "Okay, I'm just going to add right here http colon.", 'start': 2527.051, 'duration': 7.405}, {'end': 2547.005, 'text': "Okay, and then all we have to do is we're going to add a name attribute to our text area where we want to implement the editor.", 'start': 2534.476, 'duration': 12.529}, {'end': 2554.194, 'text': 'which is going to be page body.', 'start': 2549.472, 'duration': 4.722}, {'end': 2555.174, 'text': "It's going to be right here.", 'start': 2554.214, 'duration': 0.96}, {'end': 2557.795, 'text': 'Oh, I already have it there.', 'start': 2555.194, 'duration': 2.601}], 'summary': 'Implementing a script tag in the head with a name attribute for the text area.', 'duration': 37.388, 'max_score': 2520.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2520407.jpg'}, {'end': 2652.591, 'src': 'embed', 'start': 2582.305, 'weight': 3, 'content': [{'end': 2594.036, 'text': 'okay now, um, i also forgot to mention this is completely responsive if we go down to the size of a mobile device, which is probably right there.', 'start': 2582.305, 'duration': 11.731}, {'end': 2595.758, 'text': 'okay, click on that.', 'start': 2594.036, 'duration': 1.722}, {'end': 2597.839, 'text': 'you can see we get the whole menu.', 'start': 2595.758, 'duration': 2.081}, {'end': 2599.601, 'text': 'we have our create content.', 'start': 2597.839, 'duration': 1.762}, {'end': 2600.782, 'text': 'we click add page.', 'start': 2599.601, 'duration': 1.181}, {'end': 2602.504, 'text': 'you can see the modal fits right in there.', 'start': 2600.782, 'duration': 1.722}, {'end': 2608.669, 'text': 'Okay, we have our list group, the progress bars, overview and users.', 'start': 2603.985, 'duration': 4.684}, {'end': 2613.653, 'text': 'Oh, one thing we forgot was the footer, which is really simple.', 'start': 2609.449, 'duration': 4.204}, {'end': 2615.674, 'text': "So let's put that down at the bottom here.", 'start': 2613.733, 'duration': 1.941}, {'end': 2623.681, 'text': "Okay, let's just give that an ID of footer.", 'start': 2615.695, 'duration': 7.986}, {'end': 2634.999, 'text': "All right, and then inside the footer, all we're going to have is All we're going to have is a paragraph.", 'start': 2623.741, 'duration': 11.258}, {'end': 2644.025, 'text': "And we're going to say copyright admin strap.", 'start': 2638.821, 'duration': 5.204}, {'end': 2652.591, 'text': "And then we're going to put ampersand copy semicolon 2017.", 'start': 2646.427, 'duration': 6.164}], 'summary': 'Responsive design with modal, list group, progress bars, and footer implemented for mobile devices.', 'duration': 70.286, 'max_score': 2582.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2582305.jpg'}], 'start': 2151.951, 'title': 'Improving website functionality', 'summary': 'Involves adding a table for the latest users and implementing table features, modal for adding a page, ck editor, and ensuring responsiveness to improve the visual presentation and user interface, with the addition of a footer.', 'chapters': [{'end': 2230.873, 'start': 2151.951, 'title': 'Adding table for latest users', 'summary': 'Involves adding a table for the latest users under a panel in the website overview, aiming to improve the visual presentation and provide a user-friendly interface.', 'duration': 78.922, 'highlights': ['Placing a panel code to display the latest users under the website overview', 'Incorporating a table in the body for the latest users to enhance the visual appearance and user experience']}, {'end': 2652.591, 'start': 2231.793, 'title': 'Implementing table features and modal for adding page', 'summary': 'Discusses implementing table features such as table striping and hovering, as well as creating a modal for adding a page. it also covers implementing the ck editor and ensuring responsiveness, with the addition of a footer.', 'duration': 420.798, 'highlights': ['Implementing table features: table striped and table hover. The speaker demonstrates adding classes to the table tag to incorporate table striped and table hover features.', "Creating modal for adding page with form and buttons. The process of creating a modal for adding a page is detailed, including adding a form with various input fields and buttons, such as 'save changes' and 'submit'.", 'Implementing CK editor for text area. The process of implementing the CK editor is explained, including adding a script tag in the head and a one-liner script at the bottom of the page.', "Ensuring responsiveness and demonstrating modal fit for mobile devices. The speaker mentions the responsive nature of the content, and demonstrates the modal's fit for mobile devices, ensuring a seamless user experience.", 'Addition of a footer with copyright information. The addition of a simple footer with copyright information is mentioned, providing completeness to the web page.']}], 'duration': 500.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2151951.jpg', 'highlights': ['Implementing CK editor for text area. The process of implementing the CK editor is explained, including adding a script tag in the head and a one-liner script at the bottom of the page.', "Creating modal for adding page with form and buttons. The process of creating a modal for adding a page is detailed, including adding a form with various input fields and buttons, such as 'save changes' and 'submit'.", 'Implementing table features: table striped and table hover. The speaker demonstrates adding classes to the table tag to incorporate table striped and table hover features.', "Ensuring responsiveness and demonstrating modal fit for mobile devices. The speaker mentions the responsive nature of the content, and demonstrates the modal's fit for mobile devices, ensuring a seamless user experience.", 'Placing a panel code to display the latest users under the website overview', 'Incorporating a table in the body for the latest users to enhance the visual appearance and user experience', 'Addition of a footer with copyright information. The addition of a simple footer with copyright information is mentioned, providing completeness to the web page.']}, {'end': 3646.5, 'segs': [{'end': 2704.571, 'src': 'embed', 'start': 2652.591, 'weight': 0, 'content': [{'end': 2654.592, 'text': 'I actually want to put this above the modal.', 'start': 2652.591, 'duration': 2.001}, {'end': 2655.933, 'text': 'The modal should be at the bottom.', 'start': 2654.633, 'duration': 1.3}, {'end': 2659.496, 'text': "So let's just cut that and paste that here.", 'start': 2656.074, 'duration': 3.422}, {'end': 2666.124, 'text': "All right, and then as far as the styling, that's going to be very simple.", 'start': 2661.101, 'duration': 5.023}, {'end': 2688.437, 'text': "We're going to have background, dark gray, color white, text align, center.", 'start': 2666.144, 'duration': 22.293}, {'end': 2701.229, 'text': 'having 30 and margin top 30.', 'start': 2691.141, 'duration': 10.088}, {'end': 2703.27, 'text': 'and there we go.', 'start': 2701.229, 'duration': 2.041}, {'end': 2704.571, 'text': 'so our dashboard is done.', 'start': 2703.27, 'duration': 1.301}], 'summary': 'The dashboard is complete with the modal now at the bottom and simple styling.', 'duration': 51.98, 'max_score': 2652.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2652591.jpg'}, {'end': 2967.996, 'src': 'embed', 'start': 2938.617, 'weight': 1, 'content': [{'end': 2941.219, 'text': 'So, in our columns we have the page title.', 'start': 2938.617, 'duration': 2.602}, {'end': 2950.323, 'text': "we have, whether it's published or not, which is an icon which is either going to be OK for a check or remove for an X.", 'start': 2941.219, 'duration': 9.104}, {'end': 2955.224, 'text': 'Then we just have the date, create date, and then our buttons.', 'start': 2951.701, 'duration': 3.523}, {'end': 2956.485, 'text': 'We have an edit button.', 'start': 2955.424, 'duration': 1.061}, {'end': 2961.73, 'text': "It's actually a link that's formatted as a button, button default.", 'start': 2956.886, 'duration': 4.844}, {'end': 2965.794, 'text': 'And then the delete button has button danger, which makes it red.', 'start': 2961.81, 'duration': 3.984}, {'end': 2967.996, 'text': 'All right, and that should be it.', 'start': 2965.814, 'duration': 2.182}], 'summary': 'The column displays page title, publication status (ok or x), creation date, and buttons for editing and deleting entries.', 'duration': 29.379, 'max_score': 2938.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2938617.jpg'}, {'end': 3041.759, 'src': 'embed', 'start': 3001.294, 'weight': 2, 'content': [{'end': 3007.837, 'text': "So we're going to copy what we have in pages, everything, and then go to posts, paste that in.", 'start': 3001.294, 'duration': 6.543}, {'end': 3014.058, 'text': "and all we really have to do is we'll change the title.", 'start': 3008.975, 'duration': 5.083}, {'end': 3018.44, 'text': "we're going to change the active class in the navbar.", 'start': 3014.058, 'duration': 4.382}, {'end': 3020.3, 'text': 'take it off that and put it here.', 'start': 3018.44, 'duration': 1.86}, {'end': 3026.003, 'text': "okay, we're going to change the title.", 'start': 3020.3, 'duration': 5.703}, {'end': 3033.587, 'text': "that'll be posts, say manage blog posts.", 'start': 3026.003, 'duration': 7.584}, {'end': 3041.759, 'text': "we're going to change the breadcrumb just to say post right there.", 'start': 3033.587, 'duration': 8.172}], 'summary': 'Copying content from pages to posts, updating title and navbar class, managing blog posts, and adjusting breadcrumb.', 'duration': 40.465, 'max_score': 3001.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo3001294.jpg'}, {'end': 3132.607, 'src': 'embed', 'start': 3076.894, 'weight': 4, 'content': [{'end': 3079.556, 'text': 'Okay, we do have to change this right here, the panel heading.', 'start': 3076.894, 'duration': 2.662}, {'end': 3085.079, 'text': "And that's good.", 'start': 3084.438, 'duration': 0.641}, {'end': 3089.281, 'text': 'So now for the users, same idea.', 'start': 3086.66, 'duration': 2.621}, {'end': 3095.845, 'text': "Let's copy everything we have in pages and go to users, paste that in.", 'start': 3089.301, 'duration': 6.544}, {'end': 3100.548, 'text': "Okay, we're going to change the title.", 'start': 3095.865, 'duration': 4.683}, {'end': 3105.718, 'text': "We're going to remove the active class.", 'start': 3103.797, 'duration': 1.921}, {'end': 3109.299, 'text': 'Put it on this one.', 'start': 3108.359, 'duration': 0.94}, {'end': 3114.201, 'text': "Okay, let's see the title right here.", 'start': 3109.319, 'duration': 4.882}, {'end': 3121.403, 'text': 'Manage site users.', 'start': 3119.702, 'duration': 1.701}, {'end': 3124.344, 'text': "Let's see the breadcrumb.", 'start': 3123.124, 'duration': 1.22}, {'end': 3132.607, 'text': 'Panel title.', 'start': 3131.847, 'duration': 0.76}], 'summary': 'Updating panel and user pages with new content and modifications', 'duration': 55.713, 'max_score': 3076.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo3076894.jpg'}, {'end': 3624.301, 'src': 'embed', 'start': 3586.48, 'weight': 3, 'content': [{'end': 3591.046, 'text': "So we'll say call MD offset four.", 'start': 3586.48, 'duration': 4.566}, {'end': 3594.985, 'text': "OK, so now if we reload, now it's in the middle.", 'start': 3592.762, 'duration': 2.223}, {'end': 3596.567, 'text': 'All right.', 'start': 3596.166, 'duration': 0.401}, {'end': 3599.891, 'text': 'And then I just want to push this down a little bit.', 'start': 3597.828, 'duration': 2.063}, {'end': 3603.014, 'text': 'So this form has an ID of login.', 'start': 3600.551, 'duration': 2.463}, {'end': 3612.145, 'text': "So let's go ahead and just say login margin top 30 pixels.", 'start': 3603.815, 'duration': 8.33}, {'end': 3616.477, 'text': 'and there we go.', 'start': 3615.837, 'duration': 0.64}, {'end': 3617.998, 'text': 'so now we have our login page.', 'start': 3616.477, 'duration': 1.521}, {'end': 3620.279, 'text': "okay, so that's it.", 'start': 3617.998, 'duration': 2.281}, {'end': 3624.301, 'text': 'we created a an admin theme for a cms.', 'start': 3620.279, 'duration': 4.022}], 'summary': 'Created an admin theme for a cms, adjusting login form and offsetting content.', 'duration': 37.821, 'max_score': 3586.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo3586480.jpg'}], 'start': 2652.591, 'title': 'Dashboard styling, page management, and admin theme creation', 'summary': 'Covers dashboard styling with css properties, page creation for site management, and admin theme development for website backend, resulting in completion of necessary pages for the theme.', 'chapters': [{'end': 3076.094, 'start': 2652.591, 'title': 'Dashboard styling and page management', 'summary': 'Describes the process of styling the dashboard with specific css properties and creating pages for managing site pages, posts, and users, including adding filters and tables with edit and delete functionality.', 'duration': 423.503, 'highlights': ['The dashboard styling is 90% complete with specific CSS properties such as background color, text color, and alignment, as well as margin values.', 'The process of creating pages for managing site pages, posts, and users involves creating new HTML files and copying existing content with specific changes to titles, active classes, and breadcrumbs.', 'The management pages include filters and tables with specific columns for page title, published status, creation date, and buttons for edit and delete functionality.', 'The edit and delete buttons for each page are formatted as links and buttons with specific classes, and the delete functionality is not yet implemented.']}, {'end': 3646.5, 'start': 3076.894, 'title': 'Admin theme creation', 'summary': 'Involves creating an admin theme for a website backend, including updating the panel heading, managing site users, editing pages, and creating a login page, resulting in the completion of all necessary pages for the theme.', 'duration': 569.606, 'highlights': ['The chapter involves creating an admin theme for a website backend, including updating the panel heading, managing site users, editing pages, and creating a login page, resulting in the completion of all necessary pages for the theme.', 'The user updates the panel heading, manages site users, and edits pages, completing all necessary pages for the admin theme.', 'The user updates the panel heading and manages site users by copying content from pages to users, modifying titles, and removing the active class, resulting in a cohesive admin theme for the website backend.']}], 'duration': 993.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pXbEcGUtHgo/pics/pXbEcGUtHgo2652591.jpg', 'highlights': ['The dashboard styling is 90% complete with specific CSS properties such as background color, text color, and alignment, as well as margin values.', 'The management pages include filters and tables with specific columns for page title, published status, creation date, and buttons for edit and delete functionality.', 'The process of creating pages for managing site pages, posts, and users involves creating new HTML files and copying existing content with specific changes to titles, active classes, and breadcrumbs.', 'The chapter involves creating an admin theme for a website backend, including updating the panel heading, managing site users, editing pages, and creating a login page, resulting in the completion of all necessary pages for the theme.', 'The user updates the panel heading, manages site users, and edits pages, completing all necessary pages for the admin theme.', 'The user updates the panel heading and manages site users by copying content from pages to users, modifying titles, and removing the active class, resulting in a cohesive admin theme for the website backend.', 'The edit and delete buttons for each page are formatted as links and buttons with specific classes, and the delete functionality is not yet implemented.']}], 'highlights': ['The dashboard styling is 90% complete with specific CSS properties such as background color, text color, and alignment, as well as margin values.', 'The process involves using specific classes and divs to create a visually appealing and well-structured website layout.', 'The chapter discusses updating icons and text for different sections like pages, posts, and visitors, with specific quantities like 12 pages, 33 posts, and 12,334 visitors.', 'The video focuses on building a custom admin theme using Bootstrap for a content management system, targeting beginners to help them learn Bootstrap.', "The presenter mentions that the video is a follow-up to a recently released beginner's crash course on Bootstrap, aiming to apply the learned skills to create a practical project."]}