title
Google Chrome Developer Tools Crash Course

description
In this video we will be taking an intermediate look at the Google Developer Tools. You will learn how to do things such as... Inspect & Examine HTML/CSS Edit HTML/CSS Enable/Disabled styles Move & Delete Elements Console Logs & Other Commands Special Console Symbols Examine Network & Resources Use Snippets Workspaces & Permanent Changes View & Remove Browser Storage Perform Audits Add MailTag to your browser (it's free) ➜ https://goo.gl/qZf5Pj Thank you MailTag for sponsoring this video MIZUXE THEME FILES: http://www.traversymedia.com/downloads/mizuxe_bs4_theme.zip GIST WITH SANDBOX CODE: https://gist.github.com/bradtraversy/15261a79264528ddb9a380323697f0f7 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia COURSES & MORE INFO: http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'Google Chrome Developer Tools Crash Course', 'heatmap': [{'end': 405.084, 'start': 361.562, 'weight': 0.716}, {'end': 1914.275, 'start': 1782.336, 'weight': 0.874}, {'end': 2034.978, 'start': 2002.132, 'weight': 0.87}], 'summary': 'A crash course on google chrome dev tools covering its importance in web development and debugging, website testing, element inspection, css customization with bootstrap, javascript console commands, ajax requests, browser storage analysis, and website audit and optimization.', 'chapters': [{'end': 101.065, 'segs': [{'end': 56.143, 'src': 'embed', 'start': 23.31, 'weight': 0, 'content': [{'end': 29.353, 'text': "but not all of it, and if you're a web developer, i highly suggest using google chrome, at least for development.", 'start': 23.31, 'duration': 6.043}, {'end': 35.236, 'text': "what you use to browse web pages and so on doesn't really matter, But for development I'd suggest Chrome.", 'start': 29.353, 'duration': 5.883}, {'end': 37.737, 'text': 'Second to that, I would say Firefox.', 'start': 35.616, 'duration': 2.121}, {'end': 40.257, 'text': 'Now, Chrome Tools is very powerful.', 'start': 38.397, 'duration': 1.86}, {'end': 46.84, 'text': "There's a lot of real advanced stuff that you can do, especially when it comes to debugging in JavaScript.", 'start': 40.298, 'duration': 6.542}, {'end': 56.143, 'text': "I'm not going to get into the real advanced tasks in debugging because I don't want to focus too much on pieces of code rather than DevTools themselves.", 'start': 47.3, 'duration': 8.843}], 'summary': 'Google chrome is recommended for web development, followed by firefox. chrome tools are powerful for debugging javascript.', 'duration': 32.833, 'max_score': 23.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag23310.jpg'}, {'end': 101.065, 'src': 'embed', 'start': 62.403, 'weight': 1, 'content': [{'end': 64.784, 'text': "Alright, so with that said, let's go ahead and get started.", 'start': 62.403, 'duration': 2.381}, {'end': 68.505, 'text': "I want to give a huge shout out to today's sponsor, MailTag.", 'start': 64.804, 'duration': 3.701}, {'end': 73.027, 'text': 'MailTag is a Chrome extension that allows you to track your emails in real time for free.', 'start': 68.585, 'duration': 4.442}, {'end': 80.35, 'text': 'It also lets you track other cool things like link clicks, email reopens, and even the device that was used to open your emails.', 'start': 73.387, 'duration': 6.963}, {'end': 83.891, 'text': 'Be sure to check out MailTag by clicking the link in the description below.', 'start': 80.71, 'duration': 3.181}, {'end': 92.9, 'text': "Alright guys, so the website that we're going to be working with for the first part of this crash course is from the Bootstrap for Udemy course.", 'start': 84.636, 'duration': 8.264}, {'end': 94.181, 'text': "It's the Mazooks theme.", 'start': 92.981, 'duration': 1.2}, {'end': 97.863, 'text': "It's just a one-page theme that uses Bootstrap.", 'start': 94.822, 'duration': 3.041}, {'end': 101.065, 'text': 'You can see the menu items just take you to that part of the theme.', 'start': 97.903, 'duration': 3.162}], 'summary': 'Mailtag sponsors real-time email tracking for chrome, while the tutorial will use the mazooks theme from the bootstrap for udemy course.', 'duration': 38.662, 'max_score': 62.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag62403.jpg'}], 'start': 7.563, 'title': 'Google chrome dev tools', 'summary': 'Introduces the importance of google chrome dev tools in web development, highlighting its powerful features and recommending it for debugging in javascript. it also mentions a sponsor, mailtag, and the tutorial website.', 'chapters': [{'end': 101.065, 'start': 7.563, 'title': 'Google chrome dev tools', 'summary': 'Introduces the importance of google chrome dev tools in web development, highlighting its powerful features and recommending it for debugging in javascript. the chapter also mentions a sponsor, mailtag, and the website used for the tutorial.', 'duration': 93.502, 'highlights': ['Google Chrome Dev Tools is recommended for web development, especially for debugging in JavaScript. The chapter emphasizes the importance of using Google Chrome Dev Tools for web development, particularly for debugging in JavaScript, due to its powerful features.', 'MailTag, a Chrome extension for tracking emails, is mentioned as a sponsor. The chapter introduces MailTag as a sponsor, highlighting its features such as real-time email tracking and device usage tracking.', 'The tutorial will use the Mazooks theme from the Bootstrap for Udemy course for demonstration. The chapter mentions the Mazooks theme from the Bootstrap for Udemy course as the website to be used for the tutorial, indicating that it is a one-page theme using Bootstrap.']}], 'duration': 93.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag7563.jpg', 'highlights': ['Google Chrome Dev Tools is recommended for web development, especially for debugging in JavaScript.', 'MailTag, a Chrome extension for tracking emails, is mentioned as a sponsor.', 'The tutorial will use the Mazooks theme from the Bootstrap for Udemy course for demonstration.']}, {'end': 673.234, 'segs': [{'end': 148.195, 'src': 'embed', 'start': 101.625, 'weight': 0, 'content': [{'end': 104.107, 'text': "Alright, so I think it's just a good example to work with.", 'start': 101.625, 'duration': 2.482}, {'end': 110.11, 'text': "So to open our dev tools or Chrome tools, whatever you want to call them, there's a few different ways.", 'start': 104.247, 'duration': 5.863}, {'end': 111.47, 'text': 'We can go to the menu here.', 'start': 110.15, 'duration': 1.32}, {'end': 113.872, 'text': 'We can go to More Tools and then Developer Tools.', 'start': 111.511, 'duration': 2.361}, {'end': 115.773, 'text': 'And that will open them up.', 'start': 114.512, 'duration': 1.261}, {'end': 118.275, 'text': 'We can also toggle with F12.', 'start': 116.113, 'duration': 2.162}, {'end': 121.337, 'text': 'And we can also use Control-Shift-I.', 'start': 118.795, 'duration': 2.542}, {'end': 124.799, 'text': 'So those are some ways that we can open up the DevTools.', 'start': 122.277, 'duration': 2.522}, {'end': 126.91, 'text': "Now, there's a lot of different tabs here.", 'start': 125.41, 'duration': 1.5}, {'end': 128.311, 'text': "We're not going to go over all of them.", 'start': 126.95, 'duration': 1.361}, {'end': 131.972, 'text': "In fact, if you click over here and you go to More Tools, there's even more stuff.", 'start': 128.591, 'duration': 3.381}, {'end': 142.294, 'text': "But what we're going to really look at is elements, console, the JavaScript console, sources, network, and application.", 'start': 132.372, 'duration': 9.922}, {'end': 145.235, 'text': "We're not going to really work with memory management and stuff like that.", 'start': 142.334, 'duration': 2.901}, {'end': 148.195, 'text': "That's beyond this tutorial.", 'start': 145.275, 'duration': 2.92}], 'summary': 'Tutorial on opening and using chrome devtools, including different ways to open, tabs to focus on, and what to skip.', 'duration': 46.57, 'max_score': 101.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag101625.jpg'}, {'end': 217.564, 'src': 'embed', 'start': 188.466, 'weight': 1, 'content': [{'end': 192.49, 'text': "Before we look at the elements and inspection, let's click on this little icon right here.", 'start': 188.466, 'duration': 4.024}, {'end': 194.132, 'text': 'This is the device icon.', 'start': 192.55, 'duration': 1.582}, {'end': 200.988, 'text': 'This will allow us to look at our site on different devices and different sizes.', 'start': 195.342, 'duration': 5.646}, {'end': 207.774, 'text': "First I'm just going to choose responsive and basically this is 1024 by 1745.", 'start': 201.508, 'duration': 6.266}, {'end': 212.759, 'text': 'so this is like a laptop view.', 'start': 207.774, 'duration': 4.985}, {'end': 217.564, 'text': 'but if we want to go mobile, we can click right here and this will give us like a mobile view.', 'start': 212.759, 'duration': 4.805}], 'summary': 'Demonstration of website inspection for different devices and sizes.', 'duration': 29.098, 'max_score': 188.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag188466.jpg'}, {'end': 288.545, 'src': 'embed', 'start': 260.514, 'weight': 3, 'content': [{'end': 264.739, 'text': "And now we're going to look at the element inspector or the elements tab.", 'start': 260.514, 'duration': 4.225}, {'end': 268.241, 'text': 'now that all of this right here is the source code.', 'start': 265.319, 'duration': 2.922}, {'end': 274.846, 'text': 'this is the html and then down here we have the css for whatever is selected here.', 'start': 268.241, 'duration': 6.605}, {'end': 281.652, 'text': "notice that when i hover over an element, it kind of highlights in the browser and you'll see that it has some.", 'start': 274.846, 'duration': 6.806}, {'end': 283.913, 'text': "sometimes it'll have a green bar around it.", 'start': 281.652, 'duration': 2.261}, {'end': 286.115, 'text': "sometimes it'll have an orange bar around it.", 'start': 283.913, 'duration': 2.202}, {'end': 288.545, 'text': 'What this is is padding and margins.', 'start': 286.724, 'duration': 1.821}], 'summary': 'Demonstrating element inspector and css properties in source code.', 'duration': 28.031, 'max_score': 260.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag260514.jpg'}, {'end': 351.7, 'src': 'embed', 'start': 325.743, 'weight': 5, 'content': [{'end': 333.086, 'text': 'what we can do is click on this, this little icon here, this arrow in the box, and then we can go and we can select what we want.', 'start': 325.743, 'duration': 7.343}, {'end': 340.849, 'text': "So if we want to select this H1 right here, we can go ahead and click it and it'll bring it to us over here in the elements tab.", 'start': 333.126, 'duration': 7.723}, {'end': 347.759, 'text': "And while this is selected, down here it'll show us any CSS that pertains to that element.", 'start': 342.858, 'duration': 4.901}, {'end': 351.7, 'text': 'So notice that this H1 has a class of Display2.', 'start': 348.259, 'duration': 3.441}], 'summary': 'Select elements and view associated css using the icon and class display2.', 'duration': 25.957, 'max_score': 325.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag325743.jpg'}, {'end': 405.084, 'src': 'heatmap', 'start': 361.562, 'weight': 0.716, 'content': [{'end': 371.404, 'text': "So if we go down here, it'll actually give us the styles for PT5, MT5, Display2, H1 itself, anything that pertains to this selector right here.", 'start': 361.562, 'duration': 9.842}, {'end': 377.4, 'text': 'OK, not only that, but it shows us the file that it comes from and then the line number where the style is.', 'start': 372.236, 'duration': 5.164}, {'end': 379.782, 'text': "And if I click on this, it'll open that up.", 'start': 377.44, 'duration': 2.342}, {'end': 383.205, 'text': "It'll show us bootstrap CSS with that style.", 'start': 379.842, 'duration': 3.363}, {'end': 386.107, 'text': 'And then we can just close that up and go back to elements.', 'start': 383.745, 'duration': 2.362}, {'end': 390.051, 'text': 'And we have a checkbox next to these styles here.', 'start': 387.088, 'duration': 2.963}, {'end': 397.417, 'text': "So this padding top if I uncheck that, it's going to go ahead and remove that class from that or it's going to toggle it,", 'start': 390.071, 'duration': 7.346}, {'end': 399.518, 'text': 'that style from that element.', 'start': 397.417, 'duration': 2.101}, {'end': 405.084, 'text': 'Not only from that element, but anything that has the PT5 class.', 'start': 401.4, 'duration': 3.684}], 'summary': 'Transcript explains how to view and modify styles, with details on the file and line number, and the ability to toggle classes.', 'duration': 43.522, 'max_score': 361.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag361562.jpg'}, {'end': 653.37, 'src': 'embed', 'start': 627.044, 'weight': 4, 'content': [{'end': 631.665, 'text': 'so another thing we can do is we can see different states of elements.', 'start': 627.044, 'duration': 4.621}, {'end': 635.206, 'text': 'So see this button here? If I hover over it, it gets a gray background.', 'start': 631.685, 'duration': 3.521}, {'end': 637.326, 'text': 'If we want, we can select this.', 'start': 635.686, 'duration': 1.64}, {'end': 639.847, 'text': "Let's click Inspect and click the button.", 'start': 637.386, 'duration': 2.461}, {'end': 642.307, 'text': "And then we'll go over here and we'll right-click.", 'start': 640.307, 'duration': 2}, {'end': 644.487, 'text': "And let's check off Hover.", 'start': 642.647, 'duration': 1.84}, {'end': 647.888, 'text': "And then it'll display that as the hover state.", 'start': 644.968, 'duration': 2.92}, {'end': 652.049, 'text': "And you can see it adds a little dot here to tell you that it's in the hover state.", 'start': 648.708, 'duration': 3.341}, {'end': 653.37, 'text': "and it's not just hover.", 'start': 652.429, 'duration': 0.941}], 'summary': 'Demonstrating different states of elements using hover and inspect feature.', 'duration': 26.326, 'max_score': 627.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag627044.jpg'}], 'start': 101.625, 'title': 'Website testing with chrome devtools and element inspection', 'summary': 'Explains how to use chrome devtools to inspect and test websites, including opening the devtools, navigating through different tabs, and using the device icon to view sites on various devices and sizes. it also covers using the element inspector to view source code, css styles, and manipulate elements in the browser, showcasing various manipulations and states of elements.', 'chapters': [{'end': 260.494, 'start': 101.625, 'title': 'Using chrome devtools for website testing', 'summary': 'Explains how to use chrome devtools to inspect and test websites, including opening the devtools, navigating through different tabs, and using the device icon to view sites on various devices and sizes.', 'duration': 158.869, 'highlights': ['The tutorial covers opening Chrome DevTools through various methods, including using the menu, shortcut keys, and commands. It explains different ways to open Chrome DevTools, such as through the menu, shortcut keys like F12 and Control-Shift-I.', 'The chapter focuses on specific tabs in Chrome DevTools, including elements, console, JavaScript console, sources, network, and application. It mentions the specific tabs in Chrome DevTools that will be explored, such as elements, console, JavaScript console, sources, network, and application.', 'The use of the device icon in Chrome DevTools to view websites on different devices and sizes is demonstrated, with options for responsive, laptop, mobile, tablet, and actual device views. It demonstrates how the device icon in Chrome DevTools can be used to view websites on various devices and sizes, such as responsive, laptop, mobile, tablet, and actual devices.']}, {'end': 673.234, 'start': 260.514, 'title': 'Element inspector and css highlighting', 'summary': 'Covers using the element inspector to view source code, css styles, and manipulate elements in the browser, showcasing how to select and toggle classes, edit text and attributes, hide, delete, copy, and move elements, and view different states of elements.', 'duration': 412.72, 'highlights': ['Using the element inspector to view source code, CSS styles, and manipulate elements in the browser The transcript explains the process of using the element inspector to view the source code, CSS styles, and manipulate elements in the browser, providing a practical guide for web development.', 'Selecting and toggling classes, editing text and attributes, hiding, deleting, copying, and moving elements The chapter demonstrates the actions of selecting and toggling classes, editing text and attributes, hiding, deleting, copying, and moving elements, offering a comprehensive overview of element manipulation within the browser.', 'Viewing different states of elements and changing their states It highlights the ability to view different states of elements such as hover, active, focused, and visited, and the process of changing their states, providing insights into managing element states in web development.']}], 'duration': 571.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag101625.jpg', 'highlights': ['The tutorial covers opening Chrome DevTools through various methods, including using the menu, shortcut keys, and commands.', 'The use of the device icon in Chrome DevTools to view websites on different devices and sizes is demonstrated, with options for responsive, laptop, mobile, tablet, and actual device views.', 'The chapter focuses on specific tabs in Chrome DevTools, including elements, console, JavaScript console, sources, network, and application.', 'Using the element inspector to view source code, CSS styles, and manipulate elements in the browser.', 'Viewing different states of elements and changing their states.', 'Selecting and toggling classes, editing text and attributes, hiding, deleting, copying, and moving elements.']}, {'end': 1012.752, 'segs': [{'end': 744.766, 'src': 'embed', 'start': 699.646, 'weight': 1, 'content': [{'end': 705.27, 'text': "I know that sounds a little weird, but it's basically saying the navbar has a light background, so the text should be dark.", 'start': 699.646, 'duration': 5.624}, {'end': 709.533, 'text': "So what I'm going to do is change this to navbar-dark.", 'start': 705.81, 'duration': 3.723}, {'end': 713.352, 'text': "Enter, and now you'll see that the text is now gone.", 'start': 710.811, 'duration': 2.541}, {'end': 717.974, 'text': "It's not gone, but it's white because it thinks the navbar has a dark background.", 'start': 713.392, 'duration': 4.582}, {'end': 720.735, 'text': "So that's one way we can change and add classes.", 'start': 718.434, 'duration': 2.301}, {'end': 729.958, 'text': 'Another way is we can go down here, make sure you have the element selected, and we can go to this .cls, and we can add a new class here.', 'start': 721.475, 'duration': 8.483}, {'end': 732.279, 'text': 'We can also, as I showed you before, we can toggle.', 'start': 729.998, 'duration': 2.281}, {'end': 735.96, 'text': 'So for example, we can toggle that navbar dark class.', 'start': 732.719, 'duration': 3.241}, {'end': 739.722, 'text': "But let's go ahead and add a different background color to this.", 'start': 736.621, 'duration': 3.101}, {'end': 744.766, 'text': 'So Bootstrap has a class called BG info, which will give it a blue background.', 'start': 740.302, 'duration': 4.464}], 'summary': 'Demonstration of changing navbar class and adding new class to element in bootstrap.', 'duration': 45.12, 'max_score': 699.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag699646.jpg'}, {'end': 822.842, 'src': 'embed', 'start': 796.112, 'weight': 0, 'content': [{'end': 799.934, 'text': 'If we wanted to change up here, the nav bar class has a box shadow.', 'start': 796.112, 'duration': 3.822}, {'end': 802.075, 'text': 'We could go ahead and change that color.', 'start': 800.434, 'duration': 1.641}, {'end': 804.636, 'text': 'So if we wanted to make that like a red.', 'start': 802.955, 'duration': 1.681}, {'end': 811.279, 'text': 'And we also have an eyedropper tool, which if we click that, we can just pick colors in here.', 'start': 804.656, 'duration': 6.623}, {'end': 814.92, 'text': "Okay, we'll choose that black color, I guess.", 'start': 813.08, 'duration': 1.84}, {'end': 822.842, 'text': "And then to change numeric values, we can actually, let's see, go like that.", 'start': 816.261, 'duration': 6.581}], 'summary': 'Changing nav bar class to red, using eyedropper tool, adjusting numeric values.', 'duration': 26.73, 'max_score': 796.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag796112.jpg'}], 'start': 673.855, 'title': 'Css customization', 'summary': 'Covers modifying css styles, adding background colors with bootstrap, and using the css editor to change colors and styles, exemplifying the process using bootstrap 4 and specific classes and properties.', 'chapters': [{'end': 720.735, 'start': 673.855, 'title': 'Messing with css styles', 'summary': 'Explains how to modify css styles in a webpage, particularly focusing on changing the navbar class from navbar-light to navbar-dark to alter the text color based on the background, exemplifying the process using bootstrap 4.', 'duration': 46.88, 'highlights': ['Changing the class from navbar-light to navbar-dark alters the text color based on the background, with the former making the text dark due to the light background and the latter making the text white due to the dark background.', 'Demonstrating the process using Bootstrap 4, the chapter illustrates how to modify and add classes in the CSS to achieve desired styling effects.']}, {'end': 768.304, 'start': 721.475, 'title': 'Adding background color with bootstrap', 'summary': "Explains how to add a background color using bootstrap's .cls class and specifically highlights the process of adding a blue background to the navbar using the bg info class.", 'duration': 46.829, 'highlights': ["The chapter demonstrates adding a blue background to the navbar using Bootstrap's BG info class.", 'The transcript explains the process of typing and selecting classes from the connected CSS file, with the example of adding the BG info class.', 'It also mentions the option of toggling classes and adding new classes to the selected element.']}, {'end': 1012.752, 'start': 769.935, 'title': 'Css editing and styling', 'summary': 'Explains how to use the css editor to change colors, box shadows, and numeric values with an arrow tool and add new styles, and view specific styles and properties of elements, including the box model and background images.', 'duration': 242.817, 'highlights': ['The CSS editor allows changing colors, box shadows, and numeric values with an arrow tool, as well as adding new styles for specific elements like body and showcase, providing practical examples of how to use the editor.', 'It also enables viewing specific styles and properties of elements, including the box model, background images, and different styles like hover or active for buttons.', 'The editor offers a color picker to change colors and an eyedropper tool to pick colors, as well as the ability to search and filter specific styles and properties for elements.']}], 'duration': 338.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag673855.jpg', 'highlights': ['The CSS editor allows changing colors, box shadows, and numeric values with an arrow tool, as well as adding new styles for specific elements like body and showcase, providing practical examples of how to use the editor.', "The chapter demonstrates adding a blue background to the navbar using Bootstrap's BG info class.", 'Changing the class from navbar-light to navbar-dark alters the text color based on the background, with the former making the text dark due to the light background and the latter making the text white due to the dark background.']}, {'end': 1755.134, 'segs': [{'end': 1107.772, 'src': 'embed', 'start': 1081.359, 'weight': 1, 'content': [{'end': 1086.982, 'text': "What that'll do, if I click enter, it'll give us the last returned value from the last expression.", 'start': 1081.359, 'duration': 5.623}, {'end': 1090.224, 'text': 'Now this button here will clear the console.', 'start': 1088.163, 'duration': 2.061}, {'end': 1095.687, 'text': "And now if I do the money sign underscore, it's going to give us undefined because it cleared everything out.", 'start': 1090.844, 'duration': 4.843}, {'end': 1107.772, 'text': "Another symbol we have is money sign 0, 1, 2 and so on and what that does is it'll show us the last element selected with the inspector.", 'start': 1096.987, 'duration': 10.785}], 'summary': 'Using symbols like $ _ and $0,1,2 allows interaction with console in javascript', 'duration': 26.413, 'max_score': 1081.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1081359.jpg'}, {'end': 1208.326, 'src': 'embed', 'start': 1178.456, 'weight': 2, 'content': [{'end': 1192.559, 'text': "and we want to grab the h1 and let's say dot style, dot color equals red and then enter and that'll actually change it.", 'start': 1178.456, 'duration': 14.103}, {'end': 1198.082, 'text': 'to read now, document dot query selector is just vanilla JavaScript.', 'start': 1192.559, 'duration': 5.523}, {'end': 1203.544, 'text': 'now we can use the money sign as an alias for query selector.', 'start': 1198.082, 'duration': 5.462}, {'end': 1205.665, 'text': 'so we can essentially use jQuery.', 'start': 1203.544, 'duration': 2.121}, {'end': 1208.326, 'text': "it's not jQuery, but it's the same format.", 'start': 1205.665, 'duration': 2.661}], 'summary': 'Using vanilla javascript to select elements and mimic jquery functionalities.', 'duration': 29.87, 'max_score': 1178.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1178456.jpg'}, {'end': 1263.956, 'src': 'embed', 'start': 1236.983, 'weight': 4, 'content': [{'end': 1240.945, 'text': 'Control-Shift-J will just open the console up from nothing.', 'start': 1236.983, 'duration': 3.962}, {'end': 1246.288, 'text': 'To open up the console drawer, then you want to do..', 'start': 1241.425, 'duration': 4.863}, {'end': 1249.149, 'text': 'What the hell is it? Oh, just escape.', 'start': 1246.288, 'duration': 2.861}, {'end': 1251.69, 'text': "If I click escape, you'll see that this opens.", 'start': 1249.609, 'duration': 2.081}, {'end': 1253.011, 'text': "We get this what's new.", 'start': 1252.01, 'duration': 1.001}, {'end': 1253.971, 'text': "I'm going to close that out.", 'start': 1253.031, 'duration': 0.94}, {'end': 1259.234, 'text': 'And then we have the console down here, okay, in addition to the elements tab.', 'start': 1254.311, 'duration': 4.923}, {'end': 1261.495, 'text': "But I'm just going to go right back to the console.", 'start': 1259.834, 'duration': 1.661}, {'end': 1263.956, 'text': "All right, we'll get rid of that.", 'start': 1261.515, 'duration': 2.441}], 'summary': 'Demonstrating how to open the console using control-shift-j and the escape key.', 'duration': 26.973, 'max_score': 1236.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1236983.jpg'}, {'end': 1310.502, 'src': 'embed', 'start': 1283.82, 'weight': 9, 'content': [{'end': 1289.062, 'text': "That's how we just, if we want any output from our application, we use console log.", 'start': 1283.82, 'duration': 5.242}, {'end': 1292.443, 'text': 'Now, in my case, this is going to auto load.', 'start': 1289.542, 'duration': 2.901}, {'end': 1298.506, 'text': "I'm not going to even have to reload because I'm using a plugin here called live server for visual studio code.", 'start': 1292.503, 'duration': 6.003}, {'end': 1302.988, 'text': "So if you're not using that, you will have to, and you're following along, you will have to reload.", 'start': 1298.966, 'duration': 4.022}, {'end': 1306.227, 'text': "So that's just logging something to the console.", 'start': 1303.85, 'duration': 2.377}, {'end': 1310.502, 'text': 'all right now, the console also gives us errors.', 'start': 1306.84, 'duration': 3.662}], 'summary': 'Using live server plugin in visual studio code eliminates the need for manual reloading and allows for automatic console output.', 'duration': 26.682, 'max_score': 1283.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1283820.jpg'}, {'end': 1406.335, 'src': 'embed', 'start': 1347.023, 'weight': 0, 'content': [{'end': 1358.154, 'text': "So if we say console.error and we can say this is an error and save and you'll see it'll run and it looks just like an error.", 'start': 1347.023, 'duration': 11.131}, {'end': 1360.616, 'text': "It'll also show us the line that caused it.", 'start': 1358.234, 'duration': 2.382}, {'end': 1364.508, 'text': 'Alright, in addition to errors, we can do warnings.', 'start': 1361.527, 'duration': 2.981}, {'end': 1367.069, 'text': 'So console dot warn.', 'start': 1364.948, 'duration': 2.121}, {'end': 1374.152, 'text': "We'll say this is a warning and save.", 'start': 1368.89, 'duration': 5.262}, {'end': 1379.174, 'text': "And it basically does the same thing except it's yellow has a little exclamation mark instead of an x.", 'start': 1374.572, 'duration': 4.602}, {'end': 1383.582, 'text': "All right, so let's take a look at some other console commands.", 'start': 1381.021, 'duration': 2.561}, {'end': 1392.467, 'text': "We have the console.dir command, and that's basically going to show us a JavaScript representation of any DOM element.", 'start': 1383.622, 'duration': 8.845}, {'end': 1395.028, 'text': "So let's put in the actual document here.", 'start': 1392.947, 'duration': 2.081}, {'end': 1400.051, 'text': "and save and then we'll get this, this hash document.", 'start': 1396.589, 'duration': 3.462}, {'end': 1404.134, 'text': "but if we click on this arrow, it'll show us everything about the document.", 'start': 1400.051, 'duration': 4.083}, {'end': 1406.335, 'text': 'okay, and we can access any of this.', 'start': 1404.134, 'duration': 2.201}], 'summary': 'The console allows displaying errors, warnings, and dom elements in javascript.', 'duration': 59.312, 'max_score': 1347.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1347023.jpg'}, {'end': 1541.952, 'src': 'embed', 'start': 1504.947, 'weight': 5, 'content': [{'end': 1506.288, 'text': 'it says hide all.', 'start': 1504.947, 'duration': 1.341}, {'end': 1512.215, 'text': 'so we can filter the type of logs that are going to show down here and the types of errors and warnings and stuff.', 'start': 1506.288, 'duration': 5.927}, {'end': 1513.588, 'text': 'All right.', 'start': 1513.188, 'duration': 0.4}, {'end': 1519.29, 'text': "so another command we have is console.clear, and I'm sure you can guess what that does.", 'start': 1513.588, 'duration': 5.702}, {'end': 1521.59, 'text': 'It just clears the console for us.', 'start': 1519.85, 'duration': 1.74}, {'end': 1525.051, 'text': "All right, so let's go ahead and comment this stuff out.", 'start': 1522.651, 'duration': 2.4}, {'end': 1533.334, 'text': 'By the way, to do that, I do control forward slash, and then I want to show you that we can actually log stuff in groups.', 'start': 1526.032, 'duration': 7.302}, {'end': 1541.952, 'text': 'So if we say console.group, And we give this a name.', 'start': 1534.194, 'duration': 7.758}], 'summary': 'Transcript covers commands for filtering logs, clearing console, and logging in groups.', 'duration': 37.005, 'max_score': 1504.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1504947.jpg'}, {'end': 1627.654, 'src': 'embed', 'start': 1598.182, 'weight': 6, 'content': [{'end': 1599.483, 'text': 'Give this an identifier.', 'start': 1598.182, 'duration': 1.301}, {'end': 1601.124, 'text': "We'll just call it for loop.", 'start': 1599.523, 'duration': 1.601}, {'end': 1605.306, 'text': "And then down here we'll say console.time end.", 'start': 1602.105, 'duration': 3.201}, {'end': 1611.066, 'text': 'And also pass in for loop.', 'start': 1606.907, 'duration': 4.159}, {'end': 1613.267, 'text': 'And this can be anything, the for loop.', 'start': 1611.587, 'duration': 1.68}, {'end': 1615.468, 'text': "That's just what I'm calling it because that's what I'm going to do.", 'start': 1613.307, 'duration': 2.161}, {'end': 1618.01, 'text': "And then I'm just going to do a simple for loop here.", 'start': 1615.909, 'duration': 2.101}, {'end': 1625.713, 'text': "So we'll say var i equals 0 as long as i is less than, let's say, 2000.", 'start': 1618.41, 'duration': 7.303}, {'end': 1627.654, 'text': "And then we'll do i++.", 'start': 1625.713, 'duration': 1.941}], 'summary': 'Code includes a for loop running 2000 times.', 'duration': 29.472, 'max_score': 1598.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1598182.jpg'}, {'end': 1694.144, 'src': 'embed', 'start': 1662.81, 'weight': 10, 'content': [{'end': 1664.392, 'text': "So let's create a function here.", 'start': 1662.81, 'duration': 1.582}, {'end': 1665.853, 'text': "We'll call it greater than.", 'start': 1664.472, 'duration': 1.381}, {'end': 1673.399, 'text': "And it's going to take in two values, let's say x and y.", 'start': 1665.873, 'duration': 7.526}, {'end': 1676.081, 'text': "And we're going to say in here console.assert.", 'start': 1673.399, 'duration': 2.682}, {'end': 1686.637, 'text': 'So console assert and then the condition, which is going to be is X greater than Y.', 'start': 1679.611, 'duration': 7.026}, {'end': 1692.462, 'text': "And then it'll take a second parameter of an object and we're going to put a message in here.", 'start': 1686.637, 'duration': 5.825}, {'end': 1694.144, 'text': 'Actually, this needs to be Jason.', 'start': 1692.482, 'duration': 1.662}], 'summary': "Creating a 'greater than' function to compare two values.", 'duration': 31.334, 'max_score': 1662.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1662810.jpg'}], 'start': 1014.533, 'title': 'Javascript console commands', 'summary': 'Covers using the console in devtools to run javascript, access previous values, and manipulate elements, navigating between different tabs, opening the console drawer with shortcuts, introducing various console commands such as console.log, console.error, console.warn, and console.dir, and covering filtering logs, clearing the console, logging in groups, measuring time taken for a process, and running assertions with examples demonstrating their functionality.', 'chapters': [{'end': 1261.495, 'start': 1014.533, 'title': 'Devtools console and elements', 'summary': 'Covers using the console in devtools to run javascript, access previous values, and manipulate elements, as well as navigating between different tabs and opening the console drawer with shortcuts.', 'duration': 246.962, 'highlights': ['Using the console to execute JavaScript and access previous values The console allows execution of JavaScript code and access to previous values using symbols like $_, $0, $1, etc.', 'Manipulating element styles through the console The console can be used to manipulate element styles by using either document.querySelector or the $ alias to change CSS properties, providing practical examples of changing text color.', 'Opening the console from any tab and using shortcuts Shortcuts like Ctrl-Shift-J open the console from any tab, while pressing Escape opens the console drawer, providing convenient access to the console from different DevTools tabs.']}, {'end': 1479.863, 'start': 1261.515, 'title': 'Console commands in javascript', 'summary': 'Introduces various console commands in javascript, such as console.log for testing, console.error for throwing errors, console.warn for warnings, and console.dir for exploring dom elements, with examples and practical demonstrations.', 'duration': 218.348, 'highlights': ['The chapter introduces various console commands in JavaScript. It covers different console commands like log, error, warn, and dir.', 'The usage of console.log for testing and outputting from the application is emphasized. It demonstrates the use of console.log for testing and outputting from the application.', 'Practical demonstration of console.error for throwing errors is provided. It provides a practical demonstration of using console.error to throw errors.', 'Demonstration of console.warn for displaying warnings is included. It includes a demonstration of using console.warn to display warnings.', 'The usage of console.dir to explore DOM elements is explained with an example. It explains the usage of console.dir to explore DOM elements with a practical example.']}, {'end': 1755.134, 'start': 1481.024, 'title': 'Console commands and logging in javascript', 'summary': 'Covers various console commands in javascript, including filtering logs, clearing the console, logging in groups, measuring time taken for a process, and running assertions with examples demonstrating their functionality.', 'duration': 274.11, 'highlights': ['The chapter covers various console commands in JavaScript The main focus of the transcript, covering the different console commands and their functionalities.', 'Filtering logs, clearing the console, logging in groups, measuring time taken for a process, and running assertions Enumerates the specific console commands and functionalities discussed in the transcript.', 'Measuring time taken for a process Demonstrates the console.time functionality and provides an example of measuring the time taken for a for loop to run.', 'Running assertions with examples demonstrating their functionality Provides a detailed example of running assertions with a custom function and showcasing the assertion failure message with actual values.']}], 'duration': 740.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1014533.jpg', 'highlights': ['The chapter covers various console commands in JavaScript The main focus of the transcript, covering the different console commands and their functionalities.', 'Using the console to execute JavaScript and access previous values The console allows execution of JavaScript code and access to previous values using symbols like $_, $0, $1, etc.', 'Manipulating element styles through the console The console can be used to manipulate element styles by using either document.querySelector or the $ alias to change CSS properties, providing practical examples of changing text color.', 'The chapter introduces various console commands in JavaScript. It covers different console commands like log, error, warn, and dir.', 'Opening the console from any tab and using shortcuts Shortcuts like Ctrl-Shift-J open the console from any tab, while pressing Escape opens the console drawer, providing convenient access to the console from different DevTools tabs.', 'Filtering logs, clearing the console, logging in groups, measuring time taken for a process, and running assertions Enumerates the specific console commands and functionalities discussed in the transcript.', 'Measuring time taken for a process Demonstrates the console.time functionality and provides an example of measuring the time taken for a for loop to run.', 'Demonstration of console.error for throwing errors is provided. It provides a practical demonstration of using console.error to throw errors.', 'Demonstration of console.warn for displaying warnings is included. It includes a demonstration of using console.warn to display warnings.', 'The usage of console.log for testing and outputting from the application is emphasized. It demonstrates the use of console.log for testing and outputting from the application.', 'Running assertions with examples demonstrating their functionality Provides a detailed example of running assertions with a custom function and showcasing the assertion failure message with actual values.', 'The usage of console.dir to explore DOM elements is explained with an example. It explains the usage of console.dir to explore DOM elements with a practical example.']}, {'end': 2286.227, 'segs': [{'end': 1782.016, 'src': 'embed', 'start': 1755.134, 'weight': 5, 'content': [{'end': 1758.978, 'text': 'So we can run little assertions and tests with our console.', 'start': 1755.134, 'duration': 3.844}, {'end': 1765.786, 'text': "And if I were to put something that was greater than, like put 6, then nothing's going to happen.", 'start': 1761.055, 'duration': 4.731}, {'end': 1768.693, 'text': "It's not going to say passed or anything like that.", 'start': 1766.728, 'duration': 1.965}, {'end': 1769.996, 'text': "It's just nothing will happen.", 'start': 1768.773, 'duration': 1.223}, {'end': 1773.154, 'text': "All right, so I think that that's good enough.", 'start': 1771.394, 'duration': 1.76}, {'end': 1776.395, 'text': "I don't want to go too deep into this console stuff here.", 'start': 1773.194, 'duration': 3.201}, {'end': 1779.015, 'text': 'Now, you do have some settings here.', 'start': 1777.475, 'duration': 1.54}, {'end': 1782.016, 'text': 'You can choose to show timestamps with your logs.', 'start': 1779.055, 'duration': 2.961}], 'summary': 'Console tests can be run with assertions; settings include timestamp display.', 'duration': 26.882, 'max_score': 1755.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1755134.jpg'}, {'end': 1914.275, 'src': 'heatmap', 'start': 1782.336, 'weight': 0.874, 'content': [{'end': 1789.317, 'text': 'You can choose to log any AJAX requests, preserve the log, selected context only.', 'start': 1782.336, 'duration': 6.981}, {'end': 1797.899, 'text': 'You can hide networks, messages, user messages only, which will only show messages from console API methods.', 'start': 1789.717, 'duration': 8.182}, {'end': 1804.122, 'text': "so you do have some settings there, but i think that's going to be it for the console.", 'start': 1798.539, 'duration': 5.583}, {'end': 1806.704, 'text': "so let's move on to the sources tab.", 'start': 1804.122, 'duration': 2.582}, {'end': 1811.247, 'text': "so in sources, first thing i'll show you is that you can actually create snippets.", 'start': 1806.704, 'duration': 4.543}, {'end': 1814.649, 'text': 'so if i go to snippets here, let me just remove this one.', 'start': 1811.247, 'duration': 3.402}, {'end': 1817.71, 'text': 'but we can go ahead and click new snippet and you can name it.', 'start': 1814.649, 'duration': 3.061}, {'end': 1821.933, 'text': "let's call it log text.", 'start': 1817.71, 'duration': 4.223}, {'end': 1832.3, 'text': "and what i'm going to do is just have this console log and we'll just say hello world, all right, and then we can do control s to save.", 'start': 1821.933, 'duration': 10.367}, {'end': 1835.863, 'text': 'we can also right click and save okay and then to run it.', 'start': 1832.3, 'duration': 3.563}, {'end': 1841.809, 'text': "we can just go ahead and click run and now down here you'll see the console draw, pop up and it'll run.", 'start': 1835.863, 'duration': 5.946}, {'end': 1846.593, 'text': 'hello world, all right, so you can put whatever you want in these in these little snippets.', 'start': 1841.809, 'duration': 4.784}, {'end': 1848.235, 'text': "it's just like a little snippet manager.", 'start': 1846.593, 'duration': 1.642}, {'end': 1855.266, 'text': 'The cool thing about this sources tab is that we can actually make it so that we can edit our code and we can.', 'start': 1849.344, 'duration': 5.922}, {'end': 1857.547, 'text': 'we can use it kind of as a text editor.', 'start': 1855.266, 'duration': 2.281}, {'end': 1867.097, 'text': "So what I'm going to do is make this a little bigger and we need to go to sources and we're going to just right click here.", 'start': 1858.247, 'duration': 8.85}, {'end': 1876.723, 'text': "Now, I mean, if we go over here and we click index HTML, we can see the source code here, but we can't change it and save it and stuff like that.", 'start': 1868.138, 'duration': 8.585}, {'end': 1879.865, 'text': "So what we'll do is we're going to add a workspace.", 'start': 1877.243, 'duration': 2.622}, {'end': 1882.226, 'text': 'So we see add folder to workspace.', 'start': 1880.285, 'duration': 1.941}, {'end': 1891.692, 'text': "And then what I'm going to do is I'm going to select the folder that this this HTML file is in, which is going to be in my sandbox, I believe.", 'start': 1882.767, 'duration': 8.925}, {'end': 1896.807, 'text': 'Sandbox, and then DTSandbox.', 'start': 1893.385, 'duration': 3.422}, {'end': 1902.729, 'text': "And then it's going to come up with a pop-up that says DevTools requests full access to DTSandbox.", 'start': 1897.007, 'duration': 5.722}, {'end': 1904.03, 'text': "We're going to go ahead and allow it.", 'start': 1902.749, 'duration': 1.281}, {'end': 1907.492, 'text': 'And now we have it in here, and we can actually edit stuff.', 'start': 1904.45, 'duration': 3.042}, {'end': 1914.275, 'text': "So if we go ahead and change the H1, we'll say DevTools.", 'start': 1908.052, 'duration': 6.223}], 'summary': 'Devtools allows editing code, creating snippets, and running ajax requests. also, it provides a workspace for code editing and saving.', 'duration': 131.939, 'max_score': 1782.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1782336.jpg'}, {'end': 1832.3, 'src': 'embed', 'start': 1806.704, 'weight': 4, 'content': [{'end': 1811.247, 'text': "so in sources, first thing i'll show you is that you can actually create snippets.", 'start': 1806.704, 'duration': 4.543}, {'end': 1814.649, 'text': 'so if i go to snippets here, let me just remove this one.', 'start': 1811.247, 'duration': 3.402}, {'end': 1817.71, 'text': 'but we can go ahead and click new snippet and you can name it.', 'start': 1814.649, 'duration': 3.061}, {'end': 1821.933, 'text': "let's call it log text.", 'start': 1817.71, 'duration': 4.223}, {'end': 1832.3, 'text': "and what i'm going to do is just have this console log and we'll just say hello world, all right, and then we can do control s to save.", 'start': 1821.933, 'duration': 10.367}], 'summary': "Creating a snippet named 'log text' with console log 'hello world' can be done by clicking new snippet and using control s to save.", 'duration': 25.596, 'max_score': 1806.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1806704.jpg'}, {'end': 1876.723, 'src': 'embed', 'start': 1849.344, 'weight': 0, 'content': [{'end': 1855.266, 'text': 'The cool thing about this sources tab is that we can actually make it so that we can edit our code and we can.', 'start': 1849.344, 'duration': 5.922}, {'end': 1857.547, 'text': 'we can use it kind of as a text editor.', 'start': 1855.266, 'duration': 2.281}, {'end': 1867.097, 'text': "So what I'm going to do is make this a little bigger and we need to go to sources and we're going to just right click here.", 'start': 1858.247, 'duration': 8.85}, {'end': 1876.723, 'text': "Now, I mean, if we go over here and we click index HTML, we can see the source code here, but we can't change it and save it and stuff like that.", 'start': 1868.138, 'duration': 8.585}], 'summary': 'The sources tab allows editing code like a text editor, enabling changes to be made and saved.', 'duration': 27.379, 'max_score': 1849.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1849344.jpg'}, {'end': 2034.978, 'src': 'heatmap', 'start': 2002.132, 'weight': 0.87, 'content': [{'end': 2002.673, 'text': 'And there we go.', 'start': 2002.132, 'duration': 0.541}, {'end': 2006.614, 'text': 'Now we get a dark background and you can see it actually updated over here.', 'start': 2002.733, 'duration': 3.881}, {'end': 2008.655, 'text': 'We now have our link to our style sheet.', 'start': 2006.674, 'duration': 1.981}, {'end': 2010.516, 'text': 'It also created it over here.', 'start': 2008.775, 'duration': 1.741}, {'end': 2011.897, 'text': 'All right.', 'start': 2010.536, 'duration': 1.361}, {'end': 2014.518, 'text': "So now let's move on to the network tab.", 'start': 2011.917, 'duration': 2.601}, {'end': 2015.578, 'text': 'All right.', 'start': 2015.278, 'duration': 0.3}, {'end': 2016.919, 'text': 'Now the network tab.', 'start': 2015.678, 'duration': 1.241}, {'end': 2023.994, 'text': 'If I go ahead and reload, this is going to basically show us all of the files that are loading in this URL.', 'start': 2017.432, 'duration': 6.562}, {'end': 2026.135, 'text': 'So we have our index HTML file.', 'start': 2024.054, 'duration': 2.081}, {'end': 2028.096, 'text': 'We have our style.css.', 'start': 2026.195, 'duration': 1.901}, {'end': 2032.197, 'text': "And it's basically telling us that the index HTML gives us the size.", 'start': 2028.416, 'duration': 3.781}, {'end': 2034.978, 'text': 'It gives us the time that it takes to load.', 'start': 2033.037, 'duration': 1.941}], 'summary': 'Demonstration of loading files in network tab: index html file and style.css, displaying size and load time.', 'duration': 32.846, 'max_score': 2002.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2002132.jpg'}, {'end': 2032.197, 'src': 'embed', 'start': 2002.733, 'weight': 3, 'content': [{'end': 2006.614, 'text': 'Now we get a dark background and you can see it actually updated over here.', 'start': 2002.733, 'duration': 3.881}, {'end': 2008.655, 'text': 'We now have our link to our style sheet.', 'start': 2006.674, 'duration': 1.981}, {'end': 2010.516, 'text': 'It also created it over here.', 'start': 2008.775, 'duration': 1.741}, {'end': 2011.897, 'text': 'All right.', 'start': 2010.536, 'duration': 1.361}, {'end': 2014.518, 'text': "So now let's move on to the network tab.", 'start': 2011.917, 'duration': 2.601}, {'end': 2015.578, 'text': 'All right.', 'start': 2015.278, 'duration': 0.3}, {'end': 2016.919, 'text': 'Now the network tab.', 'start': 2015.678, 'duration': 1.241}, {'end': 2023.994, 'text': 'If I go ahead and reload, this is going to basically show us all of the files that are loading in this URL.', 'start': 2017.432, 'duration': 6.562}, {'end': 2026.135, 'text': 'So we have our index HTML file.', 'start': 2024.054, 'duration': 2.081}, {'end': 2028.096, 'text': 'We have our style.css.', 'start': 2026.195, 'duration': 1.901}, {'end': 2032.197, 'text': "And it's basically telling us that the index HTML gives us the size.", 'start': 2028.416, 'duration': 3.781}], 'summary': 'Demo of web page elements loading, including index html and style.css.', 'duration': 29.464, 'max_score': 2002.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2002733.jpg'}, {'end': 2174.134, 'src': 'embed', 'start': 2141.68, 'weight': 1, 'content': [{'end': 2151.698, 'text': "we want to select the button and let's say we want Query selector button and we want to add an event listener.", 'start': 2141.68, 'duration': 10.018}, {'end': 2155.561, 'text': 'We want to listen for a click.', 'start': 2151.718, 'duration': 3.843}, {'end': 2161.225, 'text': 'And then we want to call a function called get users.', 'start': 2158.082, 'duration': 3.143}, {'end': 2163.827, 'text': "Make sure we don't need that.", 'start': 2162.966, 'duration': 0.861}, {'end': 2168.05, 'text': "All right, so then we'll create a function called get users.", 'start': 2163.847, 'duration': 4.203}, {'end': 2171.572, 'text': "And then what this is going to do is it's going to fetch data.", 'start': 2168.63, 'duration': 2.942}, {'end': 2174.134, 'text': "It's going to fetch GitHub users.", 'start': 2171.632, 'duration': 2.502}], 'summary': 'Select button, add event listener for click, call get users function to fetch github users.', 'duration': 32.454, 'max_score': 2141.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2141680.jpg'}, {'end': 2291.049, 'src': 'embed', 'start': 2263.006, 'weight': 2, 'content': [{'end': 2269.53, 'text': 'so making a request to that url right there gives us the first 100 users of github And you can see it.', 'start': 2263.006, 'duration': 6.524}, {'end': 2273.074, 'text': 'gives us the username, the ID, the avatar URL.', 'start': 2269.53, 'duration': 3.544}, {'end': 2279.741, 'text': 'It gives us a bunch of other URLs like the followers, the gists, the repos that the user has.', 'start': 2273.134, 'duration': 6.607}, {'end': 2281.983, 'text': 'So that shows us the response.', 'start': 2280.321, 'duration': 1.662}, {'end': 2284.105, 'text': 'All right, same thing with preview.', 'start': 2282.744, 'duration': 1.361}, {'end': 2286.227, 'text': 'It just shows us in a different way.', 'start': 2284.125, 'duration': 2.102}, {'end': 2291.049, 'text': "Okay and we can do whatever we want with this data that's brought in,", 'start': 2287.468, 'duration': 3.581}], 'summary': 'Requesting url provides first 100 github users with usernames, ids, and avatar urls, along with other user information.', 'duration': 28.043, 'max_score': 2263.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2263006.jpg'}], 'start': 1755.134, 'title': 'Using devtools and fetching github users', 'summary': "Covers using devtools features such as console, snippets, text editor, and network tab, along with demonstrating ajax request to fetch github users using vanilla javascript, resulting in successful retrieval of the first 100 users' data upon button click.", 'chapters': [{'end': 2108.258, 'start': 1755.134, 'title': 'Devtools: console, snippets, text editor, network tab', 'summary': 'Discusses using the console for running assertions and tests, creating and running snippets, utilizing the sources tab as a text editor, and exploring the network tab for analyzing loaded files and resources.', 'duration': 353.124, 'highlights': ['The chapter discusses using the console for running assertions and tests. The console can be used for running assertions and tests, such as putting in values to observe the outcome.', 'The chapter explains creating and running snippets in the sources tab. The sources tab allows the creation and running of snippets, providing the ability to execute custom code and observe the output in the console.', 'The chapter explores using the sources tab as a text editor by adding a workspace and editing code. By adding a workspace and granting access to a folder, the sources tab can be used as a text editor to modify and save code, with changes reflected in the corresponding files.', 'The chapter discusses utilizing the network tab for analyzing loaded files and resources. The network tab enables the analysis of loaded files, resources, and requests, providing details such as file size, loading time, resource types, request methods, status, and content preview.']}, {'end': 2286.227, 'start': 2109.079, 'title': 'Adding ajax request and fetching github users', 'summary': "Demonstrates adding an ajax request to fetch github users using a vanilla javascript xhr request to api.github.com, resulting in the successful retrieval of the first 100 users' data upon button click.", 'duration': 177.148, 'highlights': ['Demonstrating the process of adding an AJAX request and event listener to fetch GitHub users using a vanilla JavaScript XHR request to api.github.com The speaker explains the steps to add an event listener and a function called get users to fetch data from api.github.com, showcasing the process of setting up an AJAX request.', "Successful retrieval of the first 100 users' data from api.github.com upon button click Upon clicking the button, the speaker demonstrates the successful retrieval of the first 100 users' data from api.github.com, displaying their usernames, IDs, avatar URLs, and additional URLs such as followers, gists, and repos."]}], 'duration': 531.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag1755134.jpg', 'highlights': ['The chapter explores using the sources tab as a text editor by adding a workspace and editing code. By adding a workspace and granting access to a folder, the sources tab can be used as a text editor to modify and save code, with changes reflected in the corresponding files.', 'Demonstrating the process of adding an AJAX request and event listener to fetch GitHub users using a vanilla JavaScript XHR request to api.github.com The speaker explains the steps to add an event listener and a function called get users to fetch data from api.github.com, showcasing the process of setting up an AJAX request.', "Successful retrieval of the first 100 users' data from api.github.com upon button click Upon clicking the button, the speaker demonstrates the successful retrieval of the first 100 users' data from api.github.com, displaying their usernames, IDs, avatar URLs, and additional URLs such as followers, gists, and repos.", 'The chapter discusses utilizing the network tab for analyzing loaded files and resources. The network tab enables the analysis of loaded files, resources, and requests, providing details such as file size, loading time, resource types, request methods, status, and content preview.', 'The chapter explains creating and running snippets in the sources tab. The sources tab allows the creation and running of snippets, providing the ability to execute custom code and observe the output in the console.', 'The chapter discusses using the console for running assertions and tests. The console can be used for running assertions and tests, such as putting in values to observe the outcome.']}, {'end': 2735.614, 'segs': [{'end': 2370.342, 'src': 'embed', 'start': 2287.468, 'weight': 0, 'content': [{'end': 2291.049, 'text': "Okay and we can do whatever we want with this data that's brought in,", 'start': 2287.468, 'duration': 3.581}, {'end': 2299.891, 'text': 'but the point of me doing this is to just show you that any AJAX requests that are made are going to get added to this network tab and we can view those requests.', 'start': 2291.049, 'duration': 8.842}, {'end': 2312.555, 'text': 'Okay, this XHR here, this stands for XML HTTP request, which is part of the browser that allows us to make asynchronous AJAX calls.', 'start': 2301.932, 'duration': 10.623}, {'end': 2317.702, 'text': 'Or I should say asynchronous JavaScript calls or Ajax calls, same thing.', 'start': 2313.86, 'duration': 3.842}, {'end': 2323.265, 'text': 'Now notice the load time here, 16 milliseconds.', 'start': 2318.842, 'duration': 4.423}, {'end': 2328.107, 'text': "If I reload it, it'll change a little bit from time to time.", 'start': 2323.565, 'duration': 4.542}, {'end': 2338.192, 'text': "But let's go ahead and let's uncomment our little loop here, this console time loop thing, just because I want to run that loop.", 'start': 2329.027, 'duration': 9.165}, {'end': 2340.034, 'text': "and let's save.", 'start': 2338.772, 'duration': 1.262}, {'end': 2347.442, 'text': "and now, when we reload, you'll see that it's 123 milliseconds, because this loop took up some time,", 'start': 2340.034, 'duration': 7.408}, {'end': 2350.385, 'text': "because we're taking and we're logging out to the console.", 'start': 2347.442, 'duration': 2.943}, {'end': 2354.43, 'text': "let's change this to, let's say, 20 000 and save.", 'start': 2350.385, 'duration': 4.045}, {'end': 2362.257, 'text': "and now let's look at the network time and now we get 1.08 seconds, All right.", 'start': 2354.43, 'duration': 7.827}, {'end': 2366.259, 'text': 'And you can see up here that the graph is much different.', 'start': 2362.597, 'duration': 3.662}, {'end': 2370.342, 'text': "It's now up, you know, in between 1000 and 1200.", 'start': 2366.279, 'duration': 4.063}], 'summary': 'Demonstrating impact of javascript calls on load time, from 16ms to 1.08s.', 'duration': 82.874, 'max_score': 2287.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2287468.jpg'}, {'end': 2448.541, 'src': 'embed', 'start': 2394.131, 'weight': 2, 'content': [{'end': 2404.421, 'text': "so if we go ahead and we open up, close that up and we reload the network, you'll see that this took not bad, it took 189 milliseconds to load.", 'start': 2394.131, 'duration': 10.29}, {'end': 2405.963, 'text': 'DOM content loaded took 51 milliseconds.', 'start': 2404.441, 'duration': 1.522}, {'end': 2416.422, 'text': 'So a lot of this stuff was added from images.', 'start': 2413.021, 'duration': 3.401}, {'end': 2420.603, 'text': 'So when you have large images, that really slows your site down.', 'start': 2417.082, 'duration': 3.521}, {'end': 2424.544, 'text': 'It loaded all the CSS files, all the JavaScript.', 'start': 2421.723, 'duration': 2.821}, {'end': 2429.665, 'text': 'So we have the Bootstrap JavaScript, Popper, and jQuery, which are dependencies of JavaScript.', 'start': 2424.604, 'duration': 5.061}, {'end': 2434.786, 'text': 'So it has to take all of this stuff into account when loading your site.', 'start': 2430.125, 'duration': 4.661}, {'end': 2436.529, 'text': 'All right.', 'start': 2436.229, 'duration': 0.3}, {'end': 2444.137, 'text': "So when you, if you have an image heavy site, it's good to compress your images or resize them and optimize them before you know,", 'start': 2436.569, 'duration': 7.568}, {'end': 2446.339, 'text': 'before uploading them to your website.', 'start': 2444.137, 'duration': 2.202}, {'end': 2448.541, 'text': "But I think that's it.", 'start': 2447.58, 'duration': 0.961}], 'summary': "The website took 189 milliseconds to load, with dom content loaded in 51 milliseconds. large images can slow down the site, and it's recommended to compress, resize, and optimize images before uploading them.", 'duration': 54.41, 'max_score': 2394.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2394131.jpg'}, {'end': 2500.15, 'src': 'embed', 'start': 2471.209, 'weight': 5, 'content': [{'end': 2475.572, 'text': 'You can clear your site data, but we can look at local storage, session storage.', 'start': 2471.209, 'duration': 4.363}, {'end': 2482.216, 'text': 'IndexedDB and WebSQL are basically like client-side in-browser databases.', 'start': 2476.472, 'duration': 5.744}, {'end': 2484.037, 'text': 'And then we have our cookies.', 'start': 2482.816, 'duration': 1.221}, {'end': 2487.16, 'text': 'We also have cache storage, application cache.', 'start': 2484.497, 'duration': 2.663}, {'end': 2491.383, 'text': "So what I'm going to do is I'm going to go over to our file here and to our script tags.", 'start': 2487.62, 'duration': 3.763}, {'end': 2496.748, 'text': "And I'm going to add a local storage value through JavaScript and HTML5.", 'start': 2491.864, 'duration': 4.884}, {'end': 2500.15, 'text': 'So to do that, we can say local storage.', 'start': 2497.348, 'duration': 2.802}], 'summary': 'Overview of various client-side data storage options including local storage and adding a value using javascript and html5.', 'duration': 28.941, 'max_score': 2471.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2471209.jpg'}, {'end': 2580.188, 'src': 'embed', 'start': 2550.534, 'weight': 7, 'content': [{'end': 2557.818, 'text': 'now the difference between local storage and session storage is that local storage will stay on in your browser.', 'start': 2550.534, 'duration': 7.284}, {'end': 2560.499, 'text': "it'll stay on your machine until it's cleared.", 'start': 2557.818, 'duration': 2.681}, {'end': 2562.8, 'text': 'okay, and I can clear it from the JavaScript.', 'start': 2560.499, 'duration': 2.301}, {'end': 2564.681, 'text': 'or you can clear it from here.', 'start': 2562.8, 'duration': 1.881}, {'end': 2580.188, 'text': "so to clear it from JavaScript, we can say oops, we can say local storage dot and then we can say clear and we'll pass in here name, all right.", 'start': 2564.681, 'duration': 15.507}], 'summary': 'Local storage stays in the browser until cleared, can be cleared from javascript.', 'duration': 29.654, 'max_score': 2550.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2550534.jpg'}, {'end': 2726.068, 'src': 'embed', 'start': 2699.058, 'weight': 8, 'content': [{'end': 2702.139, 'text': "You can add an expiration, but I'm not going to go through that.", 'start': 2699.058, 'duration': 3.081}, {'end': 2704.06, 'text': "I don't want this to be a tutorial on cookies.", 'start': 2702.179, 'duration': 1.881}, {'end': 2709.822, 'text': "I'm just trying to show you that you can track and you can see your cookies from this domain here.", 'start': 2704.42, 'duration': 5.402}, {'end': 2710.843, 'text': 'All right.', 'start': 2709.842, 'duration': 1.001}, {'end': 2715.725, 'text': 'And of course, you can go ahead and you can clear these out.', 'start': 2712.824, 'duration': 2.901}, {'end': 2723.907, 'text': 'You can go one by one like that or you can just go to clear storage and select what you want cleared and then just go ahead and clear everything.', 'start': 2716.623, 'duration': 7.284}, {'end': 2726.068, 'text': "And you'll see that everything is gone.", 'start': 2724.367, 'duration': 1.701}], 'summary': 'Demonstrates how to track and clear cookies from a domain.', 'duration': 27.01, 'max_score': 2699.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2699058.jpg'}], 'start': 2287.468, 'title': 'Analyzing ajax requests and browser storage', 'summary': 'Discusses the impact of code and file quantity on load time, with examples of load times ranging from 16 milliseconds to 1.08 seconds. it also covers different types of browser storage and demonstrates data management using javascript with html5.', 'chapters': [{'end': 2448.541, 'start': 2287.468, 'title': 'Analyzing ajax requests and load time', 'summary': 'Discusses analyzing ajax requests and load time, showing how certain code and file additions affect load time, with examples of load times ranging from 16 milliseconds to 1.08 seconds, emphasizing the impact of code and file quantity on load time.', 'duration': 161.073, 'highlights': ['Load time example with loop: 1.08 seconds When a loop was added, the load time increased to 1.08 seconds, highlighting the impact of code quantity on load time.', 'Load time example without loop: 123 milliseconds The load time was 123 milliseconds without the loop, indicating the significant impact of code quantity on load time.', 'Effect of image size on load time: 189 milliseconds Large images contributed to a load time of 189 milliseconds, demonstrating the impact of image size on website loading speed.', 'Importance of image optimization: Compress or resize images before upload Emphasizes the importance of compressing or resizing images before uploading them to the website to improve loading speed.', 'Explanation of XHR and asynchronous AJAX calls Provides an explanation of XHR and asynchronous AJAX calls, and their role in making asynchronous JavaScript calls.']}, {'end': 2735.614, 'start': 2448.741, 'title': 'Browser storage and management', 'summary': 'Covers the different types of browser storage including local storage, session storage, and cookies, demonstrating how to add, retrieve, and clear data using javascript with html5.', 'duration': 286.873, 'highlights': ['The chapter covers the different types of browser storage including local storage, session storage, and cookies The speaker explains the different ways to store data inside a browser, including local storage, session storage, and cookies, as well as cache storage and application cache.', 'Demonstrates how to add, retrieve, and clear data using JavaScript with HTML5 The speaker demonstrates the process of adding a local storage value through JavaScript and HTML5, showing how to set an item, retrieve it, and clear it using both JavaScript and the browser interface.', 'Session storage goes away when the browser is closed or when the session ends The speaker explains the difference between local storage and session storage, highlighting that session storage data will be removed when the browser is closed or when the session ends.', 'Creating and tracking cookies in the browser The speaker demonstrates how to create a cookie using JavaScript, and explains that cookies can be tracked and managed from the browser interface, with the option to clear them individually or all at once.']}], 'duration': 448.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2287468.jpg', 'highlights': ['Load time example with loop: 1.08 seconds When a loop was added, the load time increased to 1.08 seconds, highlighting the impact of code quantity on load time.', 'Load time example without loop: 123 milliseconds The load time was 123 milliseconds without the loop, indicating the significant impact of code quantity on load time.', 'Effect of image size on load time: 189 milliseconds Large images contributed to a load time of 189 milliseconds, demonstrating the impact of image size on website loading speed.', 'Importance of image optimization: Compress or resize images before upload Emphasizes the importance of compressing or resizing images before uploading them to the website to improve loading speed.', 'Explanation of XHR and asynchronous AJAX calls Provides an explanation of XHR and asynchronous AJAX calls, and their role in making asynchronous JavaScript calls.', 'The chapter covers the different types of browser storage including local storage, session storage, and cookies The speaker explains the different ways to store data inside a browser, including local storage, session storage, and cookies, as well as cache storage and application cache.', 'Demonstrates how to add, retrieve, and clear data using JavaScript with HTML5 The speaker demonstrates the process of adding a local storage value through JavaScript and HTML5, showing how to set an item, retrieve it, and clear it using both JavaScript and the browser interface.', 'Session storage goes away when the browser is closed or when the session ends The speaker explains the difference between local storage and session storage, highlighting that session storage data will be removed when the browser is closed or when the session ends.', 'Creating and tracking cookies in the browser The speaker demonstrates how to create a cookie using JavaScript, and explains that cookies can be tracked and managed from the browser interface, with the option to clear them individually or all at once.']}, {'end': 3078.113, 'segs': [{'end': 2813.822, 'src': 'embed', 'start': 2784.522, 'weight': 0, 'content': [{'end': 2788.925, 'text': "And I'm going to choose all of these except for the Progressive Web App and click Run Audit.", 'start': 2784.522, 'duration': 4.403}, {'end': 2794.749, 'text': "Alright, and this may take a few minutes, so I'm going to go ahead and pause the video until this is done.", 'start': 2789.545, 'duration': 5.204}, {'end': 2801.773, 'text': 'Alright, so we get the results back for this website uploaded at codeskillit.com.', 'start': 2794.769, 'duration': 7.004}, {'end': 2805.136, 'text': "So we got 88 for performance, which isn't bad.", 'start': 2801.813, 'duration': 3.323}, {'end': 2809.399, 'text': 'Accessibility was 86, best practices 77.', 'start': 2805.756, 'duration': 3.643}, {'end': 2813.822, 'text': 'And I can tell you that a lot of this performance and best practices is going to come from the images,', 'start': 2809.399, 'duration': 4.423}], 'summary': 'Website audit results: performance 88, accessibility 86, best practices 77.', 'duration': 29.3, 'max_score': 2784.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2784522.jpg'}, {'end': 2876.454, 'src': 'embed', 'start': 2828.858, 'weight': 1, 'content': [{'end': 2834.445, 'text': 'And what this means is first meaningful paint measures when the primary content of a page is visible.', 'start': 2828.858, 'duration': 5.587}, {'end': 2835.506, 'text': 'all right.', 'start': 2835.186, 'duration': 0.32}, {'end': 2838.988, 'text': 'the first interactive was 4.1 seconds.', 'start': 2835.506, 'duration': 3.482}, {'end': 2846.711, 'text': 'this is the first point at which necessary scripts of the page have loaded and the cpu is idle enough to handle most user input.', 'start': 2838.988, 'duration': 7.723}, {'end': 2849.912, 'text': 'so this is like when the site is completely ready.', 'start': 2846.711, 'duration': 3.201}, {'end': 2857.125, 'text': "this is when it's basically loaded enough for the the you know the user to view the whole page, which isn't too bad.", 'start': 2849.912, 'duration': 7.213}, {'end': 2859.206, 'text': "now opportunities, you'll see.", 'start': 2857.125, 'duration': 2.081}, {'end': 2861.847, 'text': 'serve images as web p.', 'start': 2859.206, 'duration': 2.641}, {'end': 2870.631, 'text': 'so basically, this is telling us to compress our images with lossy or lossless prop, properly size images.', 'start': 2861.847, 'duration': 8.784}, {'end': 2876.454, 'text': 'you have optimized images, so you can see that this all has to do with these images,', 'start': 2870.631, 'duration': 5.823}], 'summary': 'First interactive time was 4.1 seconds, with focus on optimizing images for faster page loading.', 'duration': 47.596, 'max_score': 2828.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2828858.jpg'}, {'end': 2958.041, 'src': 'embed', 'start': 2905.612, 'weight': 4, 'content': [{'end': 2914.498, 'text': "i didn't use a lot of area attributes in in the course that we built this theme because i didn't want to add more.", 'start': 2905.612, 'duration': 8.886}, {'end': 2922.504, 'text': "i mean it was a nine hour course and i wanted to focus on classes and stuff, so we didn't really focus on adding accessibility options.", 'start': 2914.498, 'duration': 8.006}, {'end': 2924.825, 'text': "um, let's see color.", 'start': 2922.504, 'duration': 2.321}, {'end': 2926.787, 'text': 'color contrast is satisfactory.', 'start': 2924.825, 'duration': 1.962}, {'end': 2931.925, 'text': 'six past audits elements used attributes correctly.', 'start': 2928.733, 'duration': 3.192}, {'end': 2937.517, 'text': 'The area attributes that we did use do follow best practices.', 'start': 2933.376, 'duration': 4.141}, {'end': 2939.357, 'text': 'Elements describe contents well.', 'start': 2937.637, 'duration': 1.72}, {'end': 2941.198, 'text': 'Elements are well structured.', 'start': 2939.877, 'duration': 1.321}, {'end': 2943.158, 'text': 'Page specifies valid language.', 'start': 2941.278, 'duration': 1.88}, {'end': 2945.138, 'text': 'Meta tags are used properly.', 'start': 2943.638, 'duration': 1.5}, {'end': 2947.739, 'text': 'Okay, so best practices.', 'start': 2945.158, 'duration': 2.581}, {'end': 2949.059, 'text': 'We had three failed audits.', 'start': 2947.779, 'duration': 1.28}, {'end': 2951.42, 'text': 'Does not use HTTPS.', 'start': 2949.559, 'duration': 1.861}, {'end': 2954, 'text': "Obviously, that's fine.", 'start': 2951.98, 'duration': 2.02}, {'end': 2958.041, 'text': 'Does not use HTTP2 for all of its resources.', 'start': 2954.74, 'duration': 3.301}], 'summary': 'Course theme has satisfactory color contrast, 6 past audits elements used attributes correctly, 3 failed audits for not using https or http2.', 'duration': 52.429, 'max_score': 2905.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2905612.jpg'}], 'start': 2736.914, 'title': 'Website audit and optimization', 'summary': 'Covers the process of performing a website audit using chrome tools, including performance, accessibility, and best practices ratings, and recommendations for image optimization and page speed. it also discusses potential savings of 68-73%, satisfactory color contrast, and various best practices followed, with a few failed audits on security measures and uncompressed images.', 'chapters': [{'end': 2876.454, 'start': 2736.914, 'title': 'Website audit performance and recommendations', 'summary': 'Discusses the process of performing a website audit using chrome tools, including the ratings received for performance, accessibility, and best practices, and recommendations for image optimization and page speed.', 'duration': 139.54, 'highlights': ['The website received ratings of 88 for performance, 86 for accessibility, and 77 for best practices. The website performance was rated at 88, accessibility at 86, and best practices at 77, indicating areas for improvement.', 'The first meaningful paint was 2.2 seconds, and the first interactive was 4.1 seconds, indicating the loading times for primary content and necessary scripts. The first meaningful paint occurred at 2.2 seconds, while the first interactive time was 4.1 seconds, showcasing the loading times for primary content and necessary scripts.', 'The audit revealed the need to compress images with lossy or lossless properties, properly size images, and optimize images. The audit identified the necessity to compress images with lossy or lossless properties, properly size images, and optimize images to improve website performance.']}, {'end': 3078.113, 'start': 2876.454, 'title': 'Website audit and optimization', 'summary': 'Discusses the results of a website audit, revealing potential savings of 68-73%, satisfactory color contrast, and various best practices followed, with only a few failed audits on security measures and uncompressed images.', 'duration': 201.659, 'highlights': ['Potential savings over here of 68, 73 The website audit reveals a potential savings of 68-73%, indicating significant optimization opportunities.', 'Satisfactory color contrast, six past audits elements used attributes correctly The color contrast is satisfactory, and six past audits confirm the correct usage of attributes, demonstrating adherence to accessibility standards.', 'Various best practices followed, with only a few failed audits on security measures and uncompressed images The website follows various best practices, with a few failed audits on security measures and uncompressed images, indicating areas for improvement.']}], 'duration': 341.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x4q86IjJFag/pics/x4q86IjJFag2736914.jpg', 'highlights': ['The website received ratings of 88 for performance, 86 for accessibility, and 77 for best practices, indicating areas for improvement.', 'The first meaningful paint occurred at 2.2 seconds, while the first interactive time was 4.1 seconds, showcasing the loading times for primary content and necessary scripts.', 'The audit revealed the need to compress images with lossy or lossless properties, properly size images, and optimize images to improve website performance.', 'The website audit reveals a potential savings of 68-73%, indicating significant optimization opportunities.', 'The color contrast is satisfactory, and six past audits confirm the correct usage of attributes, demonstrating adherence to accessibility standards.', 'The website follows various best practices, with a few failed audits on security measures and uncompressed images, indicating areas for improvement.']}], 'highlights': ['Google Chrome Dev Tools is recommended for web development, especially for debugging in JavaScript.', 'The tutorial covers opening Chrome DevTools through various methods, including using the menu, shortcut keys, and commands.', 'The use of the device icon in Chrome DevTools to view websites on different devices and sizes is demonstrated, with options for responsive, laptop, mobile, tablet, and actual device views.', 'The chapter covers various console commands in JavaScript The main focus of the transcript, covering the different console commands and their functionalities.', 'The chapter explores using the sources tab as a text editor by adding a workspace and editing code.', 'The chapter discusses utilizing the network tab for analyzing loaded files and resources.', 'Load time example with loop: 1.08 seconds When a loop was added, the load time increased to 1.08 seconds, highlighting the impact of code quantity on load time.', 'The website received ratings of 88 for performance, 86 for accessibility, and 77 for best practices, indicating areas for improvement.']}