title
Build 5 Projects With HTML, CSS & JavaScript

description
Sharpen your JavaScript, CSS, DOM skills by building 5 projects in one video Full Course : https://www.udemy.com/course/50-projects-50-days/?referralCode=684EE5F9DE1745B6428B $12.99 Coupon Code: MONTH2021 (Replace with current month) GitHub Repo: https://github.com/bradtraversy/50projects50days Timestamps: 0:00 - Intro 2:23 - Project 1 - Blurry Loading 15:31 - Project 2 - Vertical Slider 41:23 - Project 3 - Random Choice Picker 1:01:44 - Project 4 - Live User Filter 1:28:50 - Project 5 - Content Placeholder

detail
{'title': 'Build 5 Projects With HTML, CSS & JavaScript', 'heatmap': [{'end': 267.928, 'start': 198.303, 'weight': 0.746}, {'end': 1202.477, 'start': 1062.967, 'weight': 0.721}, {'end': 2068.777, 'start': 1931.699, 'weight': 0.721}, {'end': 3003.709, 'start': 2862.716, 'weight': 1}, {'end': 3132.95, 'start': 3060.314, 'weight': 0.717}, {'end': 3335.724, 'start': 3263.518, 'weight': 0.872}, {'end': 5130.322, 'start': 5059.39, 'weight': 0.882}], 'summary': "Learn to build 5 mini projects with html, css, and javascript as part of the '50 projects in 50 days' course on udemy. the projects cover creating visual effects, a vertical slider, javascript slider, random choice picker, tags, random selection, live user filter, fetching user data, and building user interface.", 'chapters': [{'end': 87.003, 'segs': [{'end': 58.358, 'src': 'embed', 'start': 29.3, 'weight': 0, 'content': [{'end': 33.721, 'text': "So if you're interested, I'll have a link to that course in the description with a promo code.", 'start': 29.3, 'duration': 4.421}, {'end': 36.463, 'text': 'So I just want to go through the five projects real quick.', 'start': 34.261, 'duration': 2.202}, {'end': 39.165, 'text': 'So the first one is going to be this blurry loading page.', 'start': 36.503, 'duration': 2.662}, {'end': 48.111, 'text': "So if I reload, you'll see that the image starts off blurry and this percentage goes from zero to 100 and the the image comes in clearly.", 'start': 39.605, 'duration': 8.506}, {'end': 49.392, 'text': "So that's the first one.", 'start': 48.531, 'duration': 0.861}, {'end': 51.793, 'text': 'The second one is going to be this vertical slider.', 'start': 49.432, 'duration': 2.361}, {'end': 58.358, 'text': 'So we have an image on this side, some text on the left, and we can just scroll through and we can go the other way as well.', 'start': 51.813, 'duration': 6.545}], 'summary': 'Web development course with 5 projects including blurry loading page and vertical slider', 'duration': 29.058, 'max_score': 29.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V2429300.jpg'}, {'end': 95.106, 'src': 'embed', 'start': 69.811, 'weight': 2, 'content': [{'end': 74.937, 'text': "And if we hit enter, it's going to do this little effect down here and it's going to randomly pick one of those choices.", 'start': 69.811, 'duration': 5.126}, {'end': 77.759, 'text': 'Next, we have a live user filter.', 'start': 75.698, 'duration': 2.061}, {'end': 79.56, 'text': 'So we have a list of users here.', 'start': 77.779, 'duration': 1.781}, {'end': 87.003, 'text': "Obviously, you could replace this with anything and then we can just start to type and we'll filter down Edna and you can see it filters that user.", 'start': 79.62, 'duration': 7.383}, {'end': 92.065, 'text': 'And then the last one is going to be this content placeholder project where, when we come to the page,', 'start': 87.563, 'duration': 4.502}, {'end': 95.106, 'text': 'we have this cool little effect until the data sets in.', 'start': 92.065, 'duration': 3.041}], 'summary': 'Demonstrating features: random selection, live user filter, and content placeholder project.', 'duration': 25.295, 'max_score': 69.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V2469811.jpg'}], 'start': 7.253, 'title': 'Mini projects with html, css & javascript', 'summary': "Discusses the plan to upload five mini projects using html, css, and javascript, as part of the '50 projects in 50 days' course on udemy.", 'chapters': [{'end': 87.003, 'start': 7.253, 'title': 'Mini projects with html, css & javascript', 'summary': "Discusses the announcement of a temporary break from making youtube videos and the plan to upload five mini projects using html, css, and javascript, which are part of the '50 projects in 50 days' course on udemy.", 'duration': 79.75, 'highlights': ['Announcement of a temporary break from making YouTube videos. The speaker announced a temporary break from making YouTube videos for the next few weeks.', "Plan to upload five mini projects using HTML, CSS, and JavaScript. The speaker plans to upload five mini projects using HTML, CSS, and JavaScript, which are part of the '50 projects in 50 days' course on Udemy.", 'Description of the five mini projects: blurry loading page, vertical slider, random choice picker, live user filter. The speaker describes the five mini projects, including a blurry loading page, vertical slider, random choice picker, and live user filter.']}], 'duration': 79.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V247253.jpg', 'highlights': ["Plan to upload five mini projects using HTML, CSS, and JavaScript, which are part of the '50 projects in 50 days' course on Udemy.", 'Description of the five mini projects: blurry loading page, vertical slider, random choice picker, live user filter.', 'Announcement of a temporary break from making YouTube videos for the next few weeks.']}, {'end': 1014.353, 'segs': [{'end': 267.928, 'src': 'heatmap', 'start': 198.303, 'weight': 0.746, 'content': [{'end': 205.61, 'text': "So we're going to get started on the blurry loading project and the HTML is going to be really simple is actually only two lines in the body.", 'start': 198.303, 'duration': 7.307}, {'end': 207.973, 'text': "But let's add a title here.", 'start': 205.971, 'duration': 2.002}, {'end': 211.416, 'text': "So we'll call this blurry loading.", 'start': 207.993, 'duration': 3.423}, {'end': 215.78, 'text': "And then down here, let's get rid of the H1.", 'start': 212.857, 'duration': 2.923}, {'end': 217.662, 'text': 'And this is going to be a section.', 'start': 215.9, 'duration': 1.762}, {'end': 219.704, 'text': "I'm going to give this a class of BG.", 'start': 217.702, 'duration': 2.002}, {'end': 222.347, 'text': 'So this is going to be the background image that we blur.', 'start': 219.764, 'duration': 2.583}, {'end': 229.171, 'text': "And then we'll have around the text, we'll have a class of loading dash text.", 'start': 223.207, 'duration': 5.964}, {'end': 232.413, 'text': 'And we just want to put in here 0%.', 'start': 229.451, 'duration': 2.962}, {'end': 237.077, 'text': 'And that should do it as far as the HTML goes.', 'start': 232.413, 'duration': 4.664}, {'end': 239.678, 'text': "So let's jump into our style sheet.", 'start': 237.717, 'duration': 1.961}, {'end': 242.22, 'text': "And there's not too much we have to do here either.", 'start': 240.319, 'duration': 1.901}, {'end': 243.701, 'text': "I'm going to change the font.", 'start': 242.24, 'duration': 1.461}, {'end': 248.724, 'text': 'So I just want this to be googleapis.com slash CSS.', 'start': 244.361, 'duration': 4.363}, {'end': 252.307, 'text': 'And we want to use a font family.', 'start': 249.945, 'duration': 2.362}, {'end': 256.031, 'text': "I'm going to use a family of Ubuntu.", 'start': 253.828, 'duration': 2.203}, {'end': 260.878, 'text': 'I can spell family correctly.', 'start': 259.435, 'duration': 1.443}, {'end': 267.928, 'text': "And then let's change down here, change Roboto to Ubuntu.", 'start': 262.761, 'duration': 5.167}], 'summary': 'Developing a simple html project for blurry loading with minimal lines of code and specific css changes.', 'duration': 69.625, 'max_score': 198.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V24198303.jpg'}, {'end': 687.209, 'src': 'embed', 'start': 658.743, 'weight': 0, 'content': [{'end': 667.195, 'text': "And this is going to be tricky because The opacity value isn't going to be the load value because that goes from zero to 100.", 'start': 658.743, 'duration': 8.452}, {'end': 669.577, 'text': 'Opacity goes from zero to one.', 'start': 667.195, 'duration': 2.382}, {'end': 675.901, 'text': "Right So it's going to start it or actually in our case, we want it to start full, you know, fully opaque.", 'start': 670.297, 'duration': 5.604}, {'end': 677.823, 'text': 'So one and we want it to go to zero.', 'start': 675.961, 'duration': 1.862}, {'end': 687.209, 'text': 'So we have to map a range of numbers that is basically zero to 100 to going from one to zero in the same amount of time.', 'start': 678.523, 'duration': 8.686}], 'summary': 'Map range of 0-100 to 1-0 for opacity transition.', 'duration': 28.466, 'max_score': 658.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V24658743.jpg'}, {'end': 851.925, 'src': 'embed', 'start': 823.815, 'weight': 3, 'content': [{'end': 827.975, 'text': "If I set in the CSS, that's the max blur I want to do.", 'start': 823.815, 'duration': 4.16}, {'end': 830.496, 'text': "I don't want to set this to, you know, 100 like that.", 'start': 828.055, 'duration': 2.441}, {'end': 839.539, 'text': "So we have to map the zero to 100 to 30 to zero because we're going to start blurred.", 'start': 832.476, 'duration': 7.063}, {'end': 843.881, 'text': 'So we want to start at 30 pixels and bring it down to zero when the load is done.', 'start': 839.559, 'duration': 4.322}, {'end': 847.563, 'text': "So let's take the BG, the background, and let's take style.", 'start': 844.361, 'duration': 3.202}, {'end': 851.925, 'text': 'We want to do style dot filter.', 'start': 849.103, 'duration': 2.822}], 'summary': 'Mapping the blur from 0 to 100 to 30 to 0 for css background', 'duration': 28.11, 'max_score': 823.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V24823815.jpg'}, {'end': 898.722, 'src': 'embed', 'start': 875.196, 'weight': 1, 'content': [{'end': 883.881, 'text': 'And then we want the blur to go from 30 to zero in that same amount of time that that load goes from zero to 100.', 'start': 875.196, 'duration': 8.685}, {'end': 884.841, 'text': "So let's save that.", 'start': 883.881, 'duration': 0.96}, {'end': 891.85, 'text': 'And Oh, I forgot pixels.', 'start': 888.043, 'duration': 3.807}, {'end': 893.212, 'text': 'So we have to have the number.', 'start': 891.95, 'duration': 1.262}, {'end': 894.675, 'text': 'You have to have PX in here.', 'start': 893.332, 'duration': 1.343}, {'end': 898.722, 'text': "So after this expression, we'll do PX and there we go.", 'start': 894.735, 'duration': 3.987}], 'summary': 'Adjust blur from 30 to 0 in sync with load 0 to 100.', 'duration': 23.526, 'max_score': 875.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V24875196.jpg'}, {'end': 962.215, 'src': 'embed', 'start': 936.6, 'weight': 2, 'content': [{'end': 942.504, 'text': 'Basically, we have an image on the side and we have some text on this side and this could be any kind of content you want.', 'start': 936.6, 'duration': 5.904}, {'end': 944.485, 'text': 'And then these two arrows here.', 'start': 942.904, 'duration': 1.581}, {'end': 949.468, 'text': "if I click the up, what's going to happen is one side goes up, one side goes down,", 'start': 944.485, 'duration': 4.983}, {'end': 953.69, 'text': 'but it brings into place the correct text area and the correct image.', 'start': 949.468, 'duration': 4.222}, {'end': 956.012, 'text': 'So go up again, up again.', 'start': 953.97, 'duration': 2.042}, {'end': 957.412, 'text': 'So we have four different sides.', 'start': 956.092, 'duration': 1.32}, {'end': 959.774, 'text': 'If I click up again, it just goes back to the beginning.', 'start': 957.452, 'duration': 2.322}, {'end': 962.215, 'text': 'same with down.', 'start': 960.214, 'duration': 2.001}], 'summary': 'Interactive interface with four sides, controlled by up and down arrows.', 'duration': 25.615, 'max_score': 936.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V24936600.jpg'}, {'end': 1004.451, 'src': 'embed', 'start': 976.405, 'weight': 5, 'content': [{'end': 979.687, 'text': 'this is this is made for, you know, a desktop laptop, etc.', 'start': 976.405, 'duration': 3.282}, {'end': 985.589, 'text': 'If you wanted to, you could go on and try to maybe switch the orientation on smaller screens.', 'start': 980.987, 'duration': 4.602}, {'end': 987.489, 'text': "But we're going to go ahead and build this out.", 'start': 986.049, 'duration': 1.44}, {'end': 989.47, 'text': "I think it's a really cool looking project.", 'start': 987.509, 'duration': 1.961}, {'end': 990.99, 'text': "So let's get started.", 'start': 989.89, 'duration': 1.1}, {'end': 997.312, 'text': "OK, so we're going to get started on our vertical slider and I have my browser window.", 'start': 991.01, 'duration': 6.302}, {'end': 1004.451, 'text': "quite wide because this isn't really responsive just because of the orientation of the how the slider is.", 'start': 998.41, 'duration': 6.041}], 'summary': 'Creating a non-responsive vertical slider project for desktop and laptop screens.', 'duration': 28.046, 'max_score': 976.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V24976405.jpg'}], 'start': 87.563, 'title': 'Creating visual effects with projects', 'summary': 'Introduces a project starter repository with five projects using html, css, and javascript. it covers creating a blurry loading image effect, styling background images, mapping opacity and blur values, and implementing javascript to increment load percentage.', 'chapters': [{'end': 274.21, 'start': 87.563, 'title': '50 projects in 50 days', 'summary': 'Introduces a project starter repository containing five projects using html, css and javascript, with the first project focusing on creating a blurry loading image effect, utilizing a stack overflow function to map the image blur from 30 pixels to 0 as it loads from 0 to 100.', 'duration': 186.647, 'highlights': ['The chapter introduces a project starter repository containing five projects using HTML, CSS and JavaScript It includes a GitHub repository for the 50 projects in 50 days and a project starter with basic HTML, CSS, and JavaScript setup.', 'The first project focuses on creating a blurry loading image effect It involves starting with a blurred image at 0% and gradually transitioning to 100% focus, utilizing a stack overflow function to map the image blur from 30 pixels to 0 as it loads from 0 to 100.']}, {'end': 703.481, 'start': 274.25, 'title': 'Styling background image and loading text', 'summary': 'Covers styling the background image with a url, setting its position, size, blur, and opacity, while also implementing javascript to increment the load percentage and adjust the text and opacity accordingly.', 'duration': 429.231, 'highlights': ['Styling the background image with a URL, setting its position, size, blur, and opacity The speaker demonstrates setting the background image with a URL, adjusting its position using center center, setting its size to cover the entire viewport, and applying a blur filter with dynamic adjustments of top, left, width, height, and opacity.', 'Implementing JavaScript to increment the load percentage and adjust the text and opacity The tutorial involves initializing a load value from 0 to 100, using a function to increment the value at a 30-millisecond interval, stopping the increment at 100, and dynamically updating the text and opacity values based on the load percentage.']}, {'end': 1014.353, 'start': 703.541, 'title': 'Mapping opacity and blur', 'summary': 'Discusses mapping the opacity and blur values from 0 to 100 to 1 to 0 and 30 to 0 respectively, using a function called scale, allowing for a smooth transition effect on the web page elements.', 'duration': 310.812, 'highlights': ["The function 'scale' is used to map the opacity and blur values from 0 to 100 to 1 to 0 and 30 to 0 respectively, enabling a smooth transition effect. The function 'scale' is applied to map the opacity and blur values, ensuring that the transition occurs smoothly as the load progresses from 0 to 100, resulting in the opacity transitioning from 1 to 0 and the blur transitioning from 30 to 0.", "The vertical slider project involves transitioning between different sides using arrows, allowing for the selection of different text areas and images. The project entails building a vertical slider that facilitates transitioning between different sides using arrows, enabling the selection of various text areas and images based on the user's interaction.", 'The vertical slider project is designed for desktop and laptop screens, with limited responsiveness for smaller screens due to its orientation. The vertical slider project is tailored for desktop and laptop screens, with limited responsiveness on smaller screens due to its specific orientation, focusing on providing an optimal user experience for larger devices.']}], 'duration': 926.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V2487563.jpg', 'highlights': ['The chapter introduces a project starter repository containing five projects using HTML, CSS and JavaScript.', 'The first project focuses on creating a blurry loading image effect, gradually transitioning from 0% to 100% focus.', 'Styling the background image with a URL, position, size, blur, and opacity is demonstrated.', 'Implementing JavaScript to increment the load percentage and adjust the text and opacity is covered.', "The function 'scale' is used to map the opacity and blur values from 0 to 100 to 1 to 0 and 30 to 0, enabling a smooth transition effect.", 'The vertical slider project involves transitioning between different sides using arrows, allowing for the selection of different text areas and images.', 'The vertical slider project is designed for desktop and laptop screens, with limited responsiveness for smaller screens due to its orientation.']}, {'end': 1826.257, 'segs': [{'end': 1202.477, 'src': 'heatmap', 'start': 1043.76, 'weight': 0, 'content': [{'end': 1047.222, 'text': 'First we have the left dash slide.', 'start': 1043.76, 'duration': 3.462}, {'end': 1051.103, 'text': 'So this is going to be you know the text area.', 'start': 1047.882, 'duration': 3.221}, {'end': 1055.486, 'text': "So we'll have an each one in a paragraph and then the right slide.", 'start': 1051.123, 'duration': 4.363}, {'end': 1058.984, 'text': "And I'll fill this fill these in a little bit.", 'start': 1056.482, 'duration': 2.502}, {'end': 1062.726, 'text': 'But the right slide is going to be the images.', 'start': 1059.484, 'duration': 3.242}, {'end': 1065.669, 'text': "Right So they're just basically just going to be digital background images.", 'start': 1062.967, 'duration': 2.702}, {'end': 1068.11, 'text': 'And then underneath that, we want our buttons.', 'start': 1066.289, 'duration': 1.821}, {'end': 1071.933, 'text': "So let's say action dash buttons.", 'start': 1068.591, 'duration': 3.342}, {'end': 1078.958, 'text': 'And our first button here is going to have a class of down dash button.', 'start': 1073.454, 'duration': 5.504}, {'end': 1083.53, 'text': "And I'm going to use a font awesome icon, so F-A-S.", 'start': 1080.649, 'duration': 2.881}, {'end': 1088.131, 'text': 'And we want F-A dash arrow dash down.', 'start': 1083.79, 'duration': 4.341}, {'end': 1091.152, 'text': "So I'll go ahead and save that.", 'start': 1088.151, 'duration': 3.001}, {'end': 1095.973, 'text': 'Wait, is that right? No, F-A-S space arrow down.', 'start': 1091.732, 'duration': 4.241}, {'end': 1105.596, 'text': "And then for the up arrow, we'll just take this button, copy it down, and we'll change this to up and change this icon to up.", 'start': 1096.073, 'duration': 9.523}, {'end': 1107.737, 'text': 'And now we have our buttons.', 'start': 1106.677, 'duration': 1.06}, {'end': 1117.248, 'text': "So for the left side, let's go into that div and we're just going to have a bunch of divs with an H1.", 'start': 1108.524, 'duration': 8.724}, {'end': 1119.769, 'text': "So for this H1, we'll say nature.", 'start': 1117.968, 'duration': 1.801}, {'end': 1131.973, 'text': 'flower and a paragraph say all in pink and then each div is going to have an inline style with a background color.', 'start': 1121.824, 'duration': 10.149}, {'end': 1135.416, 'text': 'So that way, when you want to add new slides or new divs,', 'start': 1132.333, 'duration': 3.083}, {'end': 1140.08, 'text': 'you just throw the background color in here rather than creating a whole separate class for it.', 'start': 1135.416, 'duration': 4.664}, {'end': 1146.966, 'text': "So let's say background color and we'll make it FD three five five five.", 'start': 1140.86, 'duration': 6.106}, {'end': 1154.321, 'text': "So if I save it, we're going to see that now we're going to have three more of these, which I'm just going to paste in because it's the same thing.", 'start': 1148.393, 'duration': 5.928}, {'end': 1156.144, 'text': "It's just different colors and content.", 'start': 1154.361, 'duration': 1.783}, {'end': 1159.608, 'text': 'So if I save that, you can see what we have here.', 'start': 1156.845, 'duration': 2.763}, {'end': 1165.338, 'text': 'Now for the right slide is going to be just a bunch of background images.', 'start': 1160.717, 'duration': 4.621}, {'end': 1173.24, 'text': "So I'm going to grab that and I'm just using links to unsplash images just to stock images.", 'start': 1165.738, 'duration': 7.502}, {'end': 1177.961, 'text': 'So you can see we have a div with a background image URL and we have for these.', 'start': 1173.26, 'duration': 4.701}, {'end': 1179.121, 'text': 'Now, if I save,', 'start': 1178.461, 'duration': 0.66}, {'end': 1186.762, 'text': "we're not going to see these right now because we don't have any content within the div and there's no height or width applied to to the element.", 'start': 1179.121, 'duration': 7.641}, {'end': 1189.023, 'text': "So we're not going to see the images just yet.", 'start': 1187.303, 'duration': 1.72}, {'end': 1195.395, 'text': 'Now one thing I want to mention is because of the way this slides one side goes up one side goes down.', 'start': 1189.693, 'duration': 5.702}, {'end': 1202.477, 'text': 'We have this first div this nature flower is actually going to go with the last image div here.', 'start': 1196.095, 'duration': 6.382}], 'summary': 'Creating a web design layout with text, images, and buttons for left and right slides.', 'duration': 76.009, 'max_score': 1043.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V241043760.jpg'}, {'end': 1673.266, 'src': 'embed', 'start': 1646.419, 'weight': 2, 'content': [{'end': 1651.902, 'text': "Actually, let's let's position it first so we can use transform.", 'start': 1646.419, 'duration': 5.483}, {'end': 1659.839, 'text': 'and then translate on the X axis, because what I want to do is move this button over this way to the left.', 'start': 1653.416, 'duration': 6.423}, {'end': 1665.902, 'text': "So if we put a positive number in here, I'm going to just do 100 percent of of the element.", 'start': 1660.499, 'duration': 5.403}, {'end': 1669.344, 'text': "It's going to move it over to the left, which I don't want.", 'start': 1666.602, 'duration': 2.742}, {'end': 1670.484, 'text': 'I want it over to the right.', 'start': 1669.364, 'duration': 1.12}, {'end': 1673.266, 'text': "So that's going to be I'm sorry, that's going to move it to the right.", 'start': 1670.564, 'duration': 2.702}], 'summary': 'Using transform to translate button by 100% on x axis to the right.', 'duration': 26.847, 'max_score': 1646.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V241646419.jpg'}], 'start': 1015.413, 'title': 'Creating a vertical slider with html and css', 'summary': 'Discusses creating a vertical slider with html and css, involving font awesome icons for buttons, background images for the right slide, and styling techniques for the left slide. it also covers the css styling for the slider container, including setting font family, height, width, positioning, and styling for left and right slides, as well as creating and styling action buttons.', 'chapters': [{'end': 1234.514, 'start': 1015.413, 'title': 'Creating a vertical slider with html and css', 'summary': 'Discusses creating a vertical slider with html and css, involving the use of font awesome icons for buttons, background images for the right slide, and styling techniques for the left slide.', 'duration': 219.101, 'highlights': ['The chapter discusses creating a vertical slider with HTML and CSS, involving the use of font awesome icons for buttons, background images for the right slide, and styling techniques for the left slide. The tutorial covers the process of creating a vertical slider with HTML and CSS, utilizing font awesome icons for buttons and background images for the right slide, as well as applying styling techniques for the left slide.', 'The left slide contains text areas with H1 and paragraph elements, each styled with background colors, exemplifying a nature theme. The left slide features text areas with H1 and paragraph elements, styled with background colors to represent a nature theme, providing a visually appealing design.', 'The right slide comprises background images sourced from links to unsplash images, demonstrating the use of stock images for visual content. The right slide consists of background images sourced from links to unsplash images, showcasing the utilization of stock images to enhance the visual content of the slider.']}, {'end': 1826.257, 'start': 1234.955, 'title': 'Css styling for slider container', 'summary': 'Covers the css styling for a slider container, including setting font family, height, width, positioning, and styling for left and right slides, as well as creating and styling action buttons.', 'duration': 591.302, 'highlights': ['Setting font family to open sans and adjusting size for various elements. The speaker uses open sans as the font family and adjusts the size of different elements, such as setting the font size to 40 pixels for specific parts.', 'Setting the height and width of the slider container to 100 viewport heights and widths. The speaker sets the height and width of the slider container to 100 viewport heights and widths, ensuring it takes up the entire viewport.', 'Styling the left and right slides, including positioning, height, and width adjustments. The speaker styles the left and right slides, setting their height to 100 percent, adjusting their width, and positioning them absolutely within the container.', 'Creating and styling action buttons with specific positioning and appearance properties. The speaker creates and styles action buttons, positioning them absolutely within the slider container, adjusting their appearance, and setting a Z index to ensure they are always on top.']}], 'duration': 810.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V241015413.jpg', 'highlights': ['The chapter discusses creating a vertical slider with HTML and CSS, involving font awesome icons for buttons, background images for the right slide, and styling techniques for the left slide.', 'The left slide contains text areas with H1 and paragraph elements, each styled with background colors, exemplifying a nature theme.', 'The right slide comprises background images sourced from links to unsplash images, demonstrating the use of stock images for visual content.', 'Setting the height and width of the slider container to 100 viewport heights and widths.', 'Styling the left and right slides, including positioning, height, and width adjustments.', 'Creating and styling action buttons with specific positioning and appearance properties.']}, {'end': 2876.067, 'segs': [{'end': 2068.777, 'src': 'heatmap', 'start': 1931.699, 'weight': 0.721, 'content': [{'end': 1933.04, 'text': 'Right OK.', 'start': 1931.699, 'duration': 1.341}, {'end': 1935.482, 'text': 'So basically all those did with the background images.', 'start': 1933.12, 'duration': 2.362}, {'end': 1941.609, 'text': 'So here we want a query selector, all the days that will give us all the elements, but we just need the length.', 'start': 1936.246, 'duration': 5.363}, {'end': 1947.952, 'text': "So we'll use the length property here and that will give us it will give us four in this case.", 'start': 1941.909, 'duration': 6.043}, {'end': 1956.015, 'text': 'If I console log slides length and I go over here and open this up, you can see that we get four.', 'start': 1948.012, 'duration': 8.003}, {'end': 1961.278, 'text': "OK, so you'll be able to add more or less slides if you want.", 'start': 1956.816, 'duration': 4.462}, {'end': 1968.89, 'text': 'Now we want to have an active slide index because basically these are positioned to be like on top of each other.', 'start': 1962.506, 'duration': 6.384}, {'end': 1972.712, 'text': 'We need to know which index is basically in view.', 'start': 1968.95, 'duration': 3.762}, {'end': 1977.375, 'text': "So let's say active slide index.", 'start': 1972.852, 'duration': 4.523}, {'end': 1981.117, 'text': "Make sure you let here and we'll set that to zero to start with.", 'start': 1977.555, 'duration': 3.562}, {'end': 1983.999, 'text': "And let's take the slide left.", 'start': 1981.958, 'duration': 2.041}, {'end': 1989.883, 'text': "OK And then we're going to add a style and we want to apply the top.", 'start': 1984.019, 'duration': 5.864}, {'end': 1995.052, 'text': 'and set that to a set of back ticks.', 'start': 1991.488, 'duration': 3.564}, {'end': 2001.838, 'text': 'and we want to do negative, because this is actually going to go up and the initial top value is going to be negative,', 'start': 1995.052, 'duration': 6.786}, {'end': 2011.967, 'text': 'and then put in our our expression syntax here and then some parentheses, and we want to take the slide length and subtract by one,', 'start': 2001.838, 'duration': 10.129}, {'end': 2015.869, 'text': 'because the length is going to be for.', 'start': 2011.967, 'duration': 3.902}, {'end': 2021.331, 'text': 'however, the index is zero base, so the index will be like zero.', 'start': 2015.869, 'duration': 5.462}, {'end': 2024.752, 'text': "one, two, three, even though there's four total, it starts at zero.", 'start': 2021.331, 'duration': 3.421}, {'end': 2030.714, 'text': 'so we want to get the last index, which in this case would be three, which would be the fourth slide.', 'start': 2024.752, 'duration': 5.962}, {'end': 2035.097, 'text': "OK, because arrays are node lists, they're zero based.", 'start': 2031.554, 'duration': 3.543}, {'end': 2044.143, 'text': 'And then we want to multiply that by 100 because it takes up 100 percent or 100 viewport heights.', 'start': 2035.757, 'duration': 8.386}, {'end': 2045.944, 'text': "So let's add here VH.", 'start': 2044.323, 'duration': 1.621}, {'end': 2046.905, 'text': 'All right.', 'start': 2046.584, 'duration': 0.321}, {'end': 2052.447, 'text': 'Now, if I save that and I go back, notice that this has moved to the correct position.', 'start': 2046.985, 'duration': 5.462}, {'end': 2056.15, 'text': 'So Flying Eagle actually goes with this image here.', 'start': 2053.069, 'duration': 3.081}, {'end': 2062.016, 'text': 'Now we just want to add functionality so we can, you know, flick these up and down.', 'start': 2057.475, 'duration': 4.541}, {'end': 2068.777, 'text': 'One side will go up, one side will go down, and it should bring the correct slides into place.', 'start': 2063.295, 'duration': 5.482}], 'summary': 'The script discusses selecting elements, setting slide length, and applying styles based on index, resulting in a total of four slides with a 100vh height.', 'duration': 137.078, 'max_score': 1931.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V241931699.jpg'}, {'end': 2101.982, 'src': 'embed', 'start': 2073.237, 'weight': 4, 'content': [{'end': 2075.438, 'text': "Let's add an event listener for a click.", 'start': 2073.237, 'duration': 2.201}, {'end': 2084.281, 'text': "And when that happens, we're going to run we'll call this function change slide.", 'start': 2077.958, 'duration': 6.323}, {'end': 2088.13, 'text': 'And we can will pass in an argument of up.', 'start': 2085.228, 'duration': 2.902}, {'end': 2094.876, 'text': "OK And I'm going to copy this down and then this one's going to call down and this is going to be on the down button.", 'start': 2089.452, 'duration': 5.424}, {'end': 2099.94, 'text': "So let's change this here to down button.", 'start': 2096.358, 'duration': 3.582}, {'end': 2101.982, 'text': "So they're both going to call the same function.", 'start': 2100.321, 'duration': 1.661}], 'summary': 'Add event listeners for click to change slide up and down.', 'duration': 28.745, 'max_score': 2073.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V242073237.jpg'}, {'end': 2158.783, 'src': 'embed', 'start': 2131.185, 'weight': 0, 'content': [{'end': 2135.527, 'text': 'In fact, we can console log just so you can see what that gives us.', 'start': 2131.185, 'duration': 4.342}, {'end': 2138.299, 'text': 'slider height.', 'start': 2137.458, 'duration': 0.841}, {'end': 2142.385, 'text': 'And if I go over here and I click the up button, we get 666.', 'start': 2138.359, 'duration': 4.026}, {'end': 2147.013, 'text': "Is that a bad sign? Let's click up again.", 'start': 2142.385, 'duration': 4.628}, {'end': 2151.62, 'text': "577 So it's based on whatever, you know, whatever the height is here.", 'start': 2147.033, 'duration': 4.587}, {'end': 2155.28, 'text': "And it's going to be completely dynamic.", 'start': 2153.158, 'duration': 2.122}, {'end': 2158.783, 'text': "Doesn't matter how, you know, high or small it is.", 'start': 2155.3, 'duration': 3.483}], 'summary': "The slider's height is dynamic, with a range of 577 to 666.", 'duration': 27.598, 'max_score': 2131.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V242131185.jpg'}, {'end': 2218.234, 'src': 'embed', 'start': 2185.1, 'weight': 6, 'content': [{'end': 2199.932, 'text': "So let's say, if the active slide index happens to be greater than the last, the last index in the slide which we can get with slide length,", 'start': 2185.1, 'duration': 14.832}, {'end': 2206.77, 'text': 'slide That slide length, but we want to take away one from that.', 'start': 2199.932, 'duration': 6.838}, {'end': 2213.873, 'text': "So if that's true, then we'll set the active slide index to zero to back to the beginning.", 'start': 2206.93, 'duration': 6.943}, {'end': 2216.774, 'text': "So basically, if we get to the end, we're going to go back to the beginning.", 'start': 2214.153, 'duration': 2.621}, {'end': 2218.234, 'text': 'All right.', 'start': 2217.974, 'duration': 0.26}], 'summary': 'Code sets active slide index to zero if it exceeds last slide index.', 'duration': 33.134, 'max_score': 2185.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V242185100.jpg'}, {'end': 2390.691, 'src': 'embed', 'start': 2362.399, 'weight': 7, 'content': [{'end': 2364.78, 'text': 'And when we get to the end, it just goes back to the beginning.', 'start': 2362.399, 'duration': 2.381}, {'end': 2370.845, 'text': "OK, so now we want the same for this side, because right now we're just switching the images.", 'start': 2366.641, 'duration': 4.204}, {'end': 2372.206, 'text': 'This is staying the same.', 'start': 2370.865, 'duration': 1.341}, {'end': 2378.172, 'text': "So let's grab this here and paste that in.", 'start': 2373.167, 'duration': 5.005}, {'end': 2383.176, 'text': 'And then we want to say slide left and change the the.', 'start': 2378.352, 'duration': 4.824}, {'end': 2386.891, 'text': 'transform value, translate why.', 'start': 2384.85, 'duration': 2.041}, {'end': 2390.691, 'text': 'And we just want to make this positive because we want it to go the other way.', 'start': 2387.391, 'duration': 3.3}], 'summary': 'Demonstration of applying slide left transition effect on images.', 'duration': 28.292, 'max_score': 2362.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V242362399.jpg'}, {'end': 2838.884, 'src': 'embed', 'start': 2799.84, 'weight': 1, 'content': [{'end': 2809.728, 'text': "and then let's make the font size a little bigger 16 pixels and then that should be good for the text area.", 'start': 2799.84, 'duration': 9.888}, {'end': 2810.909, 'text': 'now for the tags.', 'start': 2809.728, 'duration': 1.181}, {'end': 2818.636, 'text': "so we have spans with the class of tag And we're gonna add a background color.", 'start': 2810.909, 'duration': 7.727}, {'end': 2827.14, 'text': 'So background color is gonna be F0932B.', 'start': 2821.417, 'duration': 5.723}, {'end': 2829.2, 'text': "It's gonna be the background.", 'start': 2827.16, 'duration': 2.04}, {'end': 2831.982, 'text': 'And the color of the text is gonna be white.', 'start': 2829.401, 'duration': 2.581}, {'end': 2838.884, 'text': "And we're gonna add a border radius of three pixels.", 'start': 2833.342, 'duration': 5.542}], 'summary': 'Set font size to 16px and add background color f0932b for tags.', 'duration': 39.044, 'max_score': 2799.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V242799840.jpg'}], 'start': 1828.319, 'title': 'Implementing javascript slider and random choice picker', 'summary': 'Covers the implementation of a javascript slider, including selecting elements, determining the number of slides, and setting up the active slide index and initial styles. it also details the functionality to move slides up and down, with dynamic height adjustment and smooth transitions, resulting in seamless slide movement and transition effects. additionally, the chapter demonstrates creating a random choice picker with a cool slider effect, allowing users to input and select from multiple choices, and then applying css styling to the interface.', 'chapters': [{'end': 2046.905, 'start': 1828.319, 'title': 'Javascript slider implementation', 'summary': 'Discusses the process of implementing a javascript slider, including selecting elements, determining the number of slides, and setting up the active slide index and initial styles.', 'duration': 218.586, 'highlights': ['The process of selecting elements for the JavaScript slider, including the slider container, right and left slides, up and down buttons, and the length of the slides. Selected elements include slider container, right and left slides, up and down buttons, and the length of the slides.', 'Determining the number of slides by using querySelector.all and obtaining the length property, resulting in a total of four slides. The length of the slides is determined to be four using querySelector.all and the length property.', 'Setting up the active slide index to zero and applying initial styles using JavaScript, including positioning the slide and calculating the last index based on zero-based arrays. The active slide index is initialized to zero, and initial styles are applied to position the slide and calculate the last index based on zero-based arrays.']}, {'end': 2466.164, 'start': 2046.985, 'title': 'Implementing slide movement functionality', 'summary': 'Details the implementation of functionality to move slides up and down, with dynamic height adjustment and smooth transitions, resulting in seamless slide movement and transition effects.', 'duration': 419.179, 'highlights': ['Implemented functionality to move slides up and down based on the button clicked, resulting in seamless slide transitions.', 'Dynamically adjusted slide height for smooth slide movement, ensuring a seamless transition effect.', 'Added smooth transition effects using CSS for left and right slides, enhancing the user experience.']}, {'end': 2876.067, 'start': 2466.284, 'title': 'Creating a random choice picker', 'summary': 'Demonstrates creating a random choice picker with a cool slider effect, allowing users to input and select from multiple choices, and then applying css styling to the interface.', 'duration': 409.783, 'highlights': ['Creating a random choice picker with a cool slider effect The project demonstrates the creation of a random choice picker with a visually appealing slider effect.', 'Allowing users to input and select from multiple choices Users can input multiple choices separated by commas and then select one at random.', 'Applying CSS styling to the interface CSS styling is applied to the interface, including background colors, fonts, and layout adjustments.']}], 'duration': 1047.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V241828319.jpg', 'highlights': ['Implemented functionality to move slides up and down based on the button clicked, resulting in seamless slide transitions.', 'Dynamically adjusted slide height for smooth slide movement, ensuring a seamless transition effect.', 'Added smooth transition effects using CSS for left and right slides, enhancing the user experience.', 'Creating a random choice picker with a cool slider effect The project demonstrates the creation of a random choice picker with a visually appealing slider effect.', 'Allowing users to input and select from multiple choices Users can input multiple choices separated by commas and then select one at random.', 'Applying CSS styling to the interface CSS styling is applied to the interface, including background colors, fonts, and layout adjustments.', 'The process of selecting elements for the JavaScript slider, including the slider container, right and left slides, up and down buttons, and the length of the slides. Selected elements include slider container, right and left slides, up and down buttons, and the length of the slides.', 'Determining the number of slides by using querySelector.all and obtaining the length property, resulting in a total of four slides. The length of the slides is determined to be four using querySelector.all and the length property.', 'Setting up the active slide index to zero and applying initial styles using JavaScript, including positioning the slide and calculating the last index based on zero-based arrays. The active slide index is initialized to zero, and initial styles are applied to position the slide and calculate the last index based on zero-based arrays.']}, {'end': 3703.565, 'segs': [{'end': 3132.95, 'src': 'heatmap', 'start': 3060.314, 'weight': 0.717, 'content': [{'end': 3063.995, 'text': 'Whoops What happens? Spit is not a function.', 'start': 3060.314, 'duration': 3.681}, {'end': 3065.876, 'text': 'So split.', 'start': 3065.216, 'duration': 0.66}, {'end': 3066.816, 'text': 'I put a one.', 'start': 3065.896, 'duration': 0.92}, {'end': 3071.238, 'text': 'You can see we have an array with one value of one, which is a string.', 'start': 3067.156, 'duration': 4.082}, {'end': 3075.022, 'text': "If I put a two, it's going to just be an array with a 12.", 'start': 3071.838, 'duration': 3.184}, {'end': 3081.108, 'text': 'But if I put a comma and then a two, then we have an array with two values, one and two.', 'start': 3075.022, 'duration': 6.086}, {'end': 3083.09, 'text': "So it's going to split it by the comma.", 'start': 3081.468, 'duration': 1.622}, {'end': 3086.173, 'text': "Now, I don't want to be able to have space like that.", 'start': 3083.671, 'duration': 2.502}, {'end': 3090.057, 'text': "So what we'll do is add on to this dot filter.", 'start': 3086.674, 'duration': 3.383}, {'end': 3099.13, 'text': 'And filter is also a high order array method that allows you to return certain things based on a conditional.', 'start': 3091.665, 'duration': 7.465}, {'end': 3106.575, 'text': "So we'll say for each tag, let's say tag dot trim, which will just trim off any white space.", 'start': 3099.59, 'duration': 6.985}, {'end': 3112.379, 'text': "If that is not equal to an empty string, then we'll return that.", 'start': 3106.775, 'duration': 5.604}, {'end': 3115.761, 'text': 'And then we just want a map which will just manipulate the array.', 'start': 3112.559, 'duration': 3.202}, {'end': 3122.705, 'text': 'So for each tag, we want to return an array with the tag, but we want to trim.', 'start': 3116.421, 'duration': 6.284}, {'end': 3125.086, 'text': "So we're just saying it can't be an empty string.", 'start': 3123.165, 'duration': 1.921}, {'end': 3127.587, 'text': "Also, we're going to trim any white space.", 'start': 3125.246, 'duration': 2.341}, {'end': 3132.95, 'text': "So now if I save that and I do one space, you can see that it's not actually added.", 'start': 3127.627, 'duration': 5.323}], 'summary': 'Demonstration of using split, filter, and map array methods.', 'duration': 72.636, 'max_score': 3060.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V243060314.jpg'}, {'end': 3218.227, 'src': 'embed', 'start': 3190.089, 'weight': 1, 'content': [{'end': 3198.1, 'text': "so let's take the tag element and let's, classless dot, add class of tag.", 'start': 3190.089, 'duration': 8.011}, {'end': 3202.464, 'text': 'And then we want to set the the inner text of that.', 'start': 3199.601, 'duration': 2.863}, {'end': 3210.292, 'text': "So we'll take the tag element and set the inner text to whatever the tag is because we're looping through it here.", 'start': 3202.624, 'duration': 7.668}, {'end': 3213.475, 'text': "We get each one and we're going to put that as the inner text.", 'start': 3210.712, 'duration': 2.763}, {'end': 3218.227, 'text': 'And then finally we want to take the tags element So make sure you have the S here.', 'start': 3213.655, 'duration': 4.572}], 'summary': "Using the tag element, add class 'tag' and set inner text for looping through the tags.", 'duration': 28.138, 'max_score': 3190.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V243190089.jpg'}, {'end': 3335.724, 'src': 'heatmap', 'start': 3263.518, 'weight': 0.872, 'content': [{'end': 3266.039, 'text': 'Now we want the random select functionality.', 'start': 3263.518, 'duration': 2.521}, {'end': 3270.223, 'text': "So in our event listener let's check to see if we hit enter.", 'start': 3266.32, 'duration': 3.903}, {'end': 3279.71, 'text': "So we'll say if and then on this event object we have a key property and we're going to say if the key is equal to enter.", 'start': 3271.083, 'duration': 8.627}, {'end': 3281.745, 'text': 'All right.', 'start': 3281.465, 'duration': 0.28}, {'end': 3288.87, 'text': "Now, if we hit enter, we're going to call a function called random select, which you haven't created yet.", 'start': 3281.865, 'duration': 7.005}, {'end': 3290.771, 'text': 'I also want to clear the input.', 'start': 3288.95, 'duration': 1.821}, {'end': 3296.195, 'text': "So we're actually just going to wait a couple of milliseconds before we do that.", 'start': 3291.312, 'duration': 4.883}, {'end': 3308.703, 'text': 'So in the set time I will pass in an arrow function and we just want to wait 10 milliseconds and then clear the input value with E dot target dot value.', 'start': 3296.295, 'duration': 12.408}, {'end': 3310.665, 'text': "And we're just going to set that to nothing.", 'start': 3308.983, 'duration': 1.682}, {'end': 3311.97, 'text': 'All right.', 'start': 3311.53, 'duration': 0.44}, {'end': 3323.057, 'text': "so let's create random select down here function, random select, and for now we'll just console log one, two, three,", 'start': 3311.97, 'duration': 11.087}, {'end': 3329.02, 'text': 'and if I open up my console and you know I can type stuff down here and then enter,', 'start': 3323.057, 'duration': 5.963}, {'end': 3335.724, 'text': 'then you see it fires off that function and it also clears this up here now in the random select.', 'start': 3329.02, 'duration': 6.704}], 'summary': 'Implementing random select functionality triggered by hitting enter key, with input clearing delay of 10 milliseconds.', 'duration': 72.206, 'max_score': 3263.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V243263518.jpg'}, {'end': 3483.767, 'src': 'embed', 'start': 3430.987, 'weight': 0, 'content': [{'end': 3435.53, 'text': 'So all of these will be put into the node list which is similar to an array with an index.', 'start': 3430.987, 'duration': 4.543}, {'end': 3444.915, 'text': "So the index is going to be random and we'll use math dot floor to round down math dot random which will give us a random decimal.", 'start': 3436.07, 'duration': 8.845}, {'end': 3450.398, 'text': 'We just want to multiply that by the length of the tags array.', 'start': 3444.955, 'duration': 5.443}, {'end': 3454.382, 'text': 'Or not array, but nodeless, which is similar to an array.', 'start': 3451.318, 'duration': 3.064}, {'end': 3456.705, 'text': "So that'll give us a random tag.", 'start': 3454.962, 'duration': 1.743}, {'end': 3462.351, 'text': "I'm also going to create two more functions down here just to highlight and unhighlight.", 'start': 3456.725, 'duration': 5.626}, {'end': 3469.7, 'text': "So we'll call this highlight tag and it's going to take in a specific tag element.", 'start': 3462.712, 'duration': 6.988}, {'end': 3477.684, 'text': "And then we're going to take that tag element and we're going to just add a class, add a class with classless dot add.", 'start': 3470.819, 'duration': 6.865}, {'end': 3483.767, 'text': "And we're going to add the highlight class and then we want one to remove the highlight.", 'start': 3478.484, 'duration': 5.283}], 'summary': 'The code creates a random tag selection and highlights it using javascript functions.', 'duration': 52.78, 'max_score': 3430.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V243430987.jpg'}], 'start': 2876.567, 'title': 'Creating tags and random selection', 'summary': 'Discusses changing background color, creating tags, and implementing random selection functionality with html, using hexadecimal value 273c75 for background color and demonstrating tag creation and random selection after a specified number of iterations.', 'chapters': [{'end': 2950.438, 'start': 2876.567, 'title': 'Changing background color and creating tags', 'summary': 'Discusses changing background color using hexadecimal value two seven three c seven five and creating tags by typing in and splitting by a comma, with the addition of centering the h3 text.', 'duration': 73.871, 'highlights': ['The background color is changed to hexadecimal value two seven three C seven five for the highlighted class.', 'Creating tags by typing in and splitting by a comma is demonstrated.', 'Centering the H3 text in the CSS file is mentioned.']}, {'end': 3703.565, 'start': 2951.118, 'title': 'Creating tags and random selection', 'summary': 'Explains how to create tags by splitting text input at commas, adding them to an array, and displaying them in the html. it also demonstrates how to implement a random selection functionality that highlights a tag after a specified number of iterations.', 'duration': 752.447, 'highlights': ['The chapter explains how to create tags by splitting text input at commas, adding them to an array, and displaying them in the HTML. The transcript details the process of splitting text input at commas to create an array of tags and then displaying them in the HTML.', 'It demonstrates how to implement a random selection functionality that highlights a tag after a specified number of iterations. The transcript demonstrates the implementation of a random selection functionality that highlights a tag after a specified number of iterations, creating a cool little application to pick a random choice.']}], 'duration': 826.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V242876567.jpg', 'highlights': ['Creating tags by typing in and splitting by a comma is demonstrated.', 'The chapter explains how to create tags by splitting text input at commas, adding them to an array, and displaying them in the HTML.', 'It demonstrates how to implement a random selection functionality that highlights a tag after a specified number of iterations.']}, {'end': 4508.982, 'segs': [{'end': 3773.202, 'src': 'embed', 'start': 3745.76, 'weight': 0, 'content': [{'end': 3749.181, 'text': "and if i delete, it's going to just match whatever i put in here.", 'start': 3745.76, 'duration': 3.421}, {'end': 3749.401, 'text': 'all right.', 'start': 3749.181, 'duration': 0.22}, {'end': 3751.402, 'text': "so we're going to be dealing with the fetch api.", 'start': 3749.401, 'duration': 2.001}, {'end': 3758.265, 'text': 'we are going to use a sync await as opposed to the dot, then syntax for fetch, which returns a promise.', 'start': 3751.402, 'duration': 6.863}, {'end': 3764.627, 'text': "so we'll first create the ui style it with css, and then we'll fetch the data and we'll implement the filtering.", 'start': 3758.265, 'duration': 6.362}, {'end': 3765.314, 'text': 'All right.', 'start': 3764.994, 'duration': 0.32}, {'end': 3768.518, 'text': "so we're going to get started on the HTML and CSS for this project.", 'start': 3765.314, 'duration': 3.204}, {'end': 3773.202, 'text': "So let's jump into our index HTML here for the project starter.", 'start': 3768.638, 'duration': 4.564}], 'summary': 'Using fetch api with async await for data fetching and implementing filtering, starting with html and css.', 'duration': 27.442, 'max_score': 3745.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V243745760.jpg'}, {'end': 4051.801, 'src': 'embed', 'start': 4020.848, 'weight': 1, 'content': [{'end': 4033.997, 'text': "let's do three pixels for both of the offsets 10 pixels blur RGB for the color which is going to be black and then zero point three for the transparency.", 'start': 4020.848, 'duration': 13.149}, {'end': 4035.999, 'text': "Actually, it's two point two.", 'start': 4034.138, 'duration': 1.861}, {'end': 4041.743, 'text': "And why aren't we seeing that? Because I spell container wrong.", 'start': 4038.481, 'duration': 3.262}, {'end': 4043.684, 'text': 'There we go.', 'start': 4043.184, 'duration': 0.5}, {'end': 4046.867, 'text': 'So now you can see the border radius with the box shadow.', 'start': 4043.704, 'duration': 3.163}, {'end': 4051.801, 'text': "Let's also add overflow hidden.", 'start': 4048.2, 'duration': 3.601}], 'summary': 'Adding a box shadow with 3px offsets, 10px blur, black color, and 0.3 transparency. also fixing a typo and adding overflow hidden.', 'duration': 30.953, 'max_score': 4020.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244020848.jpg'}, {'end': 4397.734, 'src': 'embed', 'start': 4360.735, 'weight': 3, 'content': [{'end': 4364.276, 'text': "So for that, let's set margin left to take it away from the image.", 'start': 4360.735, 'duration': 3.541}, {'end': 4366.757, 'text': 'So margin left 10 pixels.', 'start': 4364.956, 'duration': 1.801}, {'end': 4368.137, 'text': "That'll push it over.", 'start': 4367.177, 'duration': 0.96}, {'end': 4373.519, 'text': "And then let's set on the H forms going to grab this.", 'start': 4368.877, 'duration': 4.642}, {'end': 4383.027, 'text': "So the H4 in there, I'm going to set margin zero zero 10 pixels.", 'start': 4376.323, 'duration': 6.704}, {'end': 4394.393, 'text': "And for the paragraph, let's just set the font size to 12 pixels.", 'start': 4384.387, 'duration': 10.006}, {'end': 4395.673, 'text': "We'll make that a little smaller.", 'start': 4394.433, 'duration': 1.24}, {'end': 4396.694, 'text': 'All right.', 'start': 4396.474, 'duration': 0.22}, {'end': 4397.734, 'text': "So that doesn't look too bad.", 'start': 4396.714, 'duration': 1.02}], 'summary': 'Styling adjustments made: margin-left set to 10px, h4 margin set to 0 0 10px, paragraph font size set to 12px.', 'duration': 36.999, 'max_score': 4360.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244360735.jpg'}, {'end': 4508.982, 'src': 'embed', 'start': 4484.783, 'weight': 2, 'content': [{'end': 4491.068, 'text': 'The loading, you know, the loading will show before any any of these users show right now.', 'start': 4484.783, 'duration': 6.285}, {'end': 4493.831, 'text': 'We just hard coded it in here just so we could see.', 'start': 4491.129, 'duration': 2.702}, {'end': 4499.316, 'text': "So now I'm just going to remove everything, all these allies, except for the loading.", 'start': 4494.231, 'duration': 5.085}, {'end': 4504.5, 'text': "So we'll get rid of those now that we know that those are styled correctly and save.", 'start': 4500.277, 'duration': 4.223}, {'end': 4508.982, 'text': 'OK, so our basically our UI here is is complete.', 'start': 4505.02, 'duration': 3.962}], 'summary': 'Loading screen added, ui completion verified.', 'duration': 24.199, 'max_score': 4484.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244484783.jpg'}], 'start': 3704.206, 'title': 'Live user filter implementation', 'summary': "Focuses on implementing a live user filter project using data from the random user api, allowing filtering by name or location, and demonstrates filtering by 'hour' and 'roman', resulting in a match for 'roman roberts'. it also covers the implementation of the ui and styling using html and css for dynamic filtering.", 'chapters': [{'end': 3743.512, 'start': 3704.206, 'title': 'Live user filter project', 'summary': "Focuses on creating a live user filter using data fetched from the random user api, allowing users to filter by name or location, with a demonstration of filtering by 'hour' and 'roman', resulting in a match for 'roman roberts'.", 'duration': 39.306, 'highlights': ['The project involves creating a live user filter using data fetched from the random user API.', "Users are able to filter by name or location, for example by typing 'hour' or 'Roman'.", "A demonstration of the filter shows a match for 'Roman Roberts' when searching for 'Roman'.", 'The system continues to filter as characters are deleted from the search input.']}, {'end': 4508.982, 'start': 3745.76, 'title': 'Live user filter html and css', 'summary': 'Covers the implementation of a live user filter using html and css, including creating the ui, styling the elements, and adding class properties for dynamic filtering.', 'duration': 763.222, 'highlights': ['The chapter covers the implementation of a live user filter using HTML and CSS. It involves creating the UI, styling the elements, and adding class properties for dynamic filtering.', 'Using CSS to style the header, input, user list, list items, and loading element. Includes setting background colors, font sizes, padding, and creating a rounded image with object-fit cover.', "Applying class properties for dynamic filtering of user list. Utilizing the 'hide' class to dynamically hide users based on filter matches."]}], 'duration': 804.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V243704206.jpg', 'highlights': ["Demonstration of filter shows a match for 'Roman Roberts' when searching for 'Roman'.", 'System continues to filter as characters are deleted from the search input.', 'Implementation of live user filter using HTML and CSS, including UI creation and dynamic filtering.', "Applying class properties for dynamic filtering of user list using the 'hide' class."]}, {'end': 5089.247, 'segs': [{'end': 4538.852, 'src': 'embed', 'start': 4509.022, 'weight': 1, 'content': [{'end': 4511.584, 'text': 'We just now need to make it function with JavaScript.', 'start': 4509.022, 'duration': 2.562}, {'end': 4513.065, 'text': "So we'll do that in the next video.", 'start': 4511.604, 'duration': 1.461}, {'end': 4519.909, 'text': 'OK, so now we want to fetch some data, some users from a third party API at random user dot me.', 'start': 4513.445, 'duration': 6.464}, {'end': 4522.549, 'text': 'So this API is pretty simple.', 'start': 4520.649, 'duration': 1.9}, {'end': 4524.09, 'text': "It's it's it's open.", 'start': 4522.689, 'duration': 1.401}, {'end': 4526.91, 'text': "So you don't need any kind of key or anything like that.", 'start': 4524.15, 'duration': 2.76}, {'end': 4528.45, 'text': "You don't need to sign up for anything.", 'start': 4526.95, 'duration': 1.5}, {'end': 4538.852, 'text': 'You simply make a request to random user, slash a random user, me slash API and you get I think you get one user by default,', 'start': 4528.871, 'duration': 9.981}], 'summary': 'Using javascript to fetch users from randomuser.me api.', 'duration': 29.83, 'max_score': 4509.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244509022.jpg'}, {'end': 4817.051, 'src': 'embed', 'start': 4783.904, 'weight': 2, 'content': [{'end': 4788.866, 'text': 'so we can use results here and then we can just grab that and we can loop through that.', 'start': 4783.904, 'duration': 4.962}, {'end': 4789.927, 'text': 'So for each.', 'start': 4788.946, 'duration': 0.981}, {'end': 4794.417, 'text': 'for each.', 'start': 4793.797, 'duration': 0.62}, {'end': 4799.064, 'text': "So say for each user, because that's what it is.", 'start': 4796.28, 'duration': 2.784}, {'end': 4806.936, 'text': "So each user, then let's go ahead and I just want to console log here user just to make sure we're getting this good.", 'start': 4799.165, 'duration': 7.771}, {'end': 4808.719, 'text': "So you can see it's logging all the users.", 'start': 4806.996, 'duration': 1.723}, {'end': 4817.051, 'text': "And let's construct an ally because right now in our HTML, we just have you know, we have the UL.", 'start': 4810.467, 'duration': 6.584}], 'summary': 'Loop through results to log all users.', 'duration': 33.147, 'max_score': 4783.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244783904.jpg'}, {'end': 4920.34, 'src': 'embed', 'start': 4889.207, 'weight': 0, 'content': [{'end': 4893.589, 'text': "Now we can access user dot picture and then there's different sizes.", 'start': 4889.207, 'duration': 4.382}, {'end': 4896.29, 'text': "I'm going to do large.", 'start': 4893.609, 'duration': 2.681}, {'end': 4901.012, 'text': 'so user picture large and you can see all this stuff if you make a request, you know,', 'start': 4896.29, 'duration': 4.722}, {'end': 4904.834, 'text': 'either in your browser or with something like postman or whatever.', 'start': 4901.012, 'duration': 3.822}, {'end': 4910.016, 'text': "The alt I'm going to use the the user's first name.", 'start': 4906.055, 'duration': 3.961}, {'end': 4913.198, 'text': 'So we have user dot name dot first.', 'start': 4910.157, 'duration': 3.041}, {'end': 4920.34, 'text': "And if you're wondering you know where I get this name dot first and stuff on this picture dot large every API is different.", 'start': 4914.018, 'duration': 6.322}], 'summary': "Access user's picture in large size using different methods, such as browser or postman.", 'duration': 31.133, 'max_score': 4889.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244889207.jpg'}, {'end': 5018.12, 'src': 'embed', 'start': 4988.065, 'weight': 6, 'content': [{'end': 4991.79, 'text': "And in user info, we're going to have the name, so it's going to be in an H4.", 'start': 4988.065, 'duration': 3.725}, {'end': 4996.832, 'text': "And that's going to be the first and last name.", 'start': 4995.051, 'duration': 1.781}, {'end': 5006.135, 'text': "So let's go ahead and get the user dot name dot first and then a space and then we'll get user dot name dot last.", 'start': 4996.892, 'duration': 9.243}, {'end': 5011.017, 'text': "And then underneath that, we'll have our paragraph and this is going to be the location.", 'start': 5007.076, 'duration': 3.941}, {'end': 5018.12, 'text': 'So with this particular API and the data it gives us, we have access to user dot location.', 'start': 5011.777, 'duration': 6.343}], 'summary': 'Creating user info with name (h4) and location (paragraph) using api data.', 'duration': 30.055, 'max_score': 4988.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244988065.jpg'}], 'start': 4509.022, 'title': 'Fetching user data', 'summary': 'Covers fetching user data from the random user api, allowing retrieval of one user with the option to set a query param for more, providing various fields including name, location, and age. it also discusses asynchronous data fetching in javascript, including initializing variables, using the fetch api to retrieve 50 users from a random user api, constructing and appending list items for each user to the dom, and accessing and displaying user information such as names, images, and locations.', 'chapters': [{'end': 4584.403, 'start': 4509.022, 'title': 'Fetching users from random user api', 'summary': 'Covers fetching user data from the random user api, which allows fetching a default of one user with the option to set a query param for more, providing various fields including name, location, age, and more.', 'duration': 75.381, 'highlights': ['The random user API allows fetching a default of one user or setting a query param to fetch as many as desired, such as 20 users at once.', 'The API provides various fields for each user, including name, location with a full address, age, phone number, username, and password.', 'No need for authentication or API key to access the open random user API.']}, {'end': 5089.247, 'start': 4584.423, 'title': 'Asynchronous data fetching in javascript', 'summary': 'Discusses how to fetch and display data from an api using asynchronous javascript, including initializing variables, using the fetch api to retrieve 50 users from a random user api, constructing and appending list items for each user to the dom, and accessing and displaying user information such as names, images, and locations.', 'duration': 504.824, 'highlights': ['The chapter discusses how to fetch and display data from a random user API using asynchronous JavaScript, including initializing variables, using the fetch API to retrieve 50 users, constructing and appending list items for each user to the DOM, and accessing and displaying user information such as names, images, and locations.', "The code initializes a variable called 'listItems' as an empty array, which is intended to store the data fetched from the API.", 'The fetch API is used to retrieve 50 users from the random user API, and the response is awaited to obtain the data.', "A loop is used to iterate through the data of 50 users fetched from the API, and for each user, a list item is constructed and added to the 'listItems' array.", 'The user information, including the image, name, and location, is accessed and displayed by constructing the list items and appending them to the HTML DOM.']}], 'duration': 580.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V244509022.jpg', 'highlights': ['The random user API allows fetching a default of one user or setting a query param to fetch as many as desired, such as 20 users at once.', 'The API provides various fields for each user, including name, location with a full address, age, phone number, username, and password.', 'No need for authentication or API key to access the open random user API.', 'The chapter discusses how to fetch and display data from a random user API using asynchronous JavaScript, including initializing variables, using the fetch API to retrieve 50 users, constructing and appending list items for each user to the DOM, and accessing and displaying user information such as names, images, and locations.', "The code initializes a variable called 'listItems' as an empty array, which is intended to store the data fetched from the API.", 'The fetch API is used to retrieve 50 users from the random user API, and the response is awaited to obtain the data.', "A loop is used to iterate through the data of 50 users fetched from the API, and for each user, a list item is constructed and added to the 'listItems' array.", 'The user information, including the image, name, and location, is accessed and displayed by constructing the list items and appending them to the HTML DOM.']}, {'end': 6658.682, 'segs': [{'end': 6209.006, 'src': 'embed', 'start': 6173.181, 'weight': 1, 'content': [{'end': 6174.882, 'text': 'And then we need a key frame for that.', 'start': 6173.181, 'duration': 1.701}, {'end': 6177.204, 'text': "So let's go down here and say key frames.", 'start': 6175.002, 'duration': 2.202}, {'end': 6180.447, 'text': 'We called it BG POS.', 'start': 6178.585, 'duration': 1.862}, {'end': 6186.863, 'text': 'And basically at zero percent, we want the background.', 'start': 6182.521, 'duration': 4.342}, {'end': 6194.886, 'text': 'We want the background position to be 50 percent zero and then at 100 percent.', 'start': 6186.883, 'duration': 8.003}, {'end': 6205.663, 'text': 'I want the background position to be negative one 50 percent and zero.', 'start': 6197.717, 'duration': 7.946}, {'end': 6209.006, 'text': "So we're just changing the position on the X axis.", 'start': 6205.743, 'duration': 3.263}], 'summary': "Creating key frame 'bg pos' to change background position on x axis.", 'duration': 35.825, 'max_score': 6173.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V246173181.jpg'}, {'end': 6517.941, 'src': 'embed', 'start': 6475.74, 'weight': 0, 'content': [{'end': 6476.701, 'text': "OK, that's the excerpt.", 'start': 6475.74, 'duration': 0.961}, {'end': 6479.782, 'text': 'Then we have the profile image.', 'start': 6476.781, 'duration': 3.001}, {'end': 6485.105, 'text': 'So the profile image in our HTML is going to be.', 'start': 6480.662, 'duration': 4.443}, {'end': 6488.246, 'text': 'This right here.', 'start': 6485.125, 'duration': 3.121}, {'end': 6491.608, 'text': "So, again, we'll replace that.", 'start': 6488.266, 'duration': 3.342}, {'end': 6497.976, 'text': 'And paste that in.', 'start': 6496.856, 'duration': 1.12}, {'end': 6502.798, 'text': 'OK, next we have the name dot inner HTML.', 'start': 6497.996, 'duration': 4.802}, {'end': 6505.918, 'text': 'Which we know is going to be John Doe.', 'start': 6504.198, 'duration': 1.72}, {'end': 6517.941, 'text': "And then we have the date dot inner HTML, which I'm going to set to October 8th, 2020, and we can get rid of both of those.", 'start': 6507.079, 'duration': 10.862}], 'summary': 'Updating profile image and information: john doe, october 8th, 2020.', 'duration': 42.201, 'max_score': 6475.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V246475740.jpg'}, {'end': 6618.787, 'src': 'embed', 'start': 6591.702, 'weight': 2, 'content': [{'end': 6605.605, 'text': "So we'll just copy that down and this will be BG dash texts or underscore text and we'll loop through and remove that class from all of them.", 'start': 6591.702, 'duration': 13.903}, {'end': 6608.185, 'text': "Now, this function isn't being called yet.", 'start': 6605.665, 'duration': 2.52}, {'end': 6612.726, 'text': "So what we'll do is go up here and I want to set a time out because I don't want to call it right away.", 'start': 6608.245, 'duration': 4.481}, {'end': 6616.847, 'text': 'I want to show this this placeholder for a second or two seconds.', 'start': 6612.746, 'duration': 4.101}, {'end': 6618.787, 'text': "So let's say get data.", 'start': 6617.387, 'duration': 1.4}], 'summary': 'Code is being modified to set a timeout for calling the function get data.', 'duration': 27.085, 'max_score': 6591.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V246591702.jpg'}], 'start': 5089.787, 'title': 'Building user interface', 'summary': 'Discusses adding event listeners for filtering data, filtering a user list and building content placeholder with html, css, and javascript, styling a card using css, and setting html content and removing classes using javascript.', 'chapters': [{'end': 5157.142, 'start': 5089.787, 'title': 'Adding event listener for filtering data', 'summary': 'Discusses adding an event listener to an input field for filtering data, capturing the typed input and calling a function to handle the filtered data.', 'duration': 67.355, 'highlights': ["Adding an event listener to the input field to capture typed input and call a function called 'filter data'.", 'The event listener is set to listen for any input, allowing real-time filtering of data.', "The function 'filter data' captures the search term (typed input) and logs it to the console for verification."]}, {'end': 5710.456, 'start': 5158.824, 'title': 'Filtering user list and building content placeholder', 'summary': 'Covers filtering a user list based on search input and building a content placeholder using html, css, and javascript, achieving a cool gradient animation and insertion of content from javascript.', 'duration': 551.632, 'highlights': ['The chapter covers filtering a user list based on search input Demonstrates filtering a user list based on search input, converting text to lowercase, and using the includes method to match and remove or add hide class based on the search term.', 'Building a content placeholder using HTML, CSS, and JavaScript Describes the approach to building a content placeholder, including creating a card with HTML and CSS, implementing a gradient animation with CSS, and inserting content from JavaScript, with the potential for fetching data from an API.']}, {'end': 6341.669, 'start': 5710.496, 'title': 'Styling a card with css', 'summary': 'Covers the process of styling a card using css, including setting background color, image dimensions, box shadow, border radius, and animations with key frames, with specific values and attributes mentioned throughout the process.', 'duration': 631.173, 'highlights': ['Setting background color and image dimensions The instructor sets the background color to hexadecimal ECF0F1 and the image width to 100% of its container.', 'Adding box shadow and border radius to the card The instructor adds a box shadow with a horizontal offset of 0, vertical offset of 2 pixels, blur of 10 pixels, and color set to RGBA black with an opacity of 0.2. Additionally, a border radius of 10 pixels is set for the card.', 'Styling card content and author information The instructor styles the card content with a white background color and 30 pixels padding, while for the author information, flexbox is used with specific dimensions and colors added.', 'Creating animations with key frames The instructor defines an animated background with a linear gradient, sets background size on the X and Y axis, and adds key frames for the background position to create a visual animation effect.']}, {'end': 6658.682, 'start': 6342.029, 'title': 'Setting html content and removing classes', 'summary': 'Demonstrates setting html content and removing classes from elements using javascript. it includes examples of replacing content with non-breaking spaces, setting inner html, and removing classes from node lists, with a timeout function to delay content insertion.', 'duration': 316.653, 'highlights': ['Setting HTML content and replacing elements The chapter shows how to set HTML content by replacing elements with non-breaking spaces and inserting desired text, such as header, excerpt, profile image, name, and date, in the HTML.', "Removing classes from node lists with JavaScript The demonstration includes removing classes, 'animated BG class' and 'animated BG text', from node lists using querySelectAll and forEach loop, providing a practical example of removing classes from multiple elements.", "Implementing a timeout function for delayed content insertion The chapter illustrates the usage of setTimeout function to delay the execution of the 'get data' function, showing a placeholder animation for two and a half seconds before inserting the content, providing a practical example of using timeouts in JavaScript."]}], 'duration': 1568.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JkeyKeK3V24/pics/JkeyKeK3V245089787.jpg', 'highlights': ['Demonstrates filtering a user list based on search input, converting text to lowercase, and using the includes method to match and remove or add hide class based on the search term.', 'Building a content placeholder using HTML, CSS, and JavaScript, including creating a card with HTML and CSS, implementing a gradient animation with CSS, and inserting content from JavaScript, with the potential for fetching data from an API.', "Adding an event listener to the input field to capture typed input and call a function called 'filter data', allowing real-time filtering of data.", 'Setting HTML content by replacing elements with non-breaking spaces and inserting desired text, such as header, excerpt, profile image, name, and date, in the HTML.']}], 'highlights': ["Learn to build 5 mini projects with html, css, and javascript as part of the '50 projects in 50 days' course on udemy.", 'The projects cover creating visual effects, a vertical slider, javascript slider, random choice picker, tags, random selection, live user filter, fetching user data, and building user interface.', "Plan to upload five mini projects using HTML, CSS, and JavaScript, which are part of the '50 projects in 50 days' course on Udemy.", 'Description of the five mini projects: blurry loading page, vertical slider, random choice picker, live user filter.', 'The chapter introduces a project starter repository containing five projects using HTML, CSS and JavaScript.', 'The first project focuses on creating a blurry loading image effect, gradually transitioning from 0% to 100% focus.', 'The vertical slider project involves transitioning between different sides using arrows, allowing for the selection of different text areas and images.', 'Creating a random choice picker with a cool slider effect The project demonstrates the creation of a random choice picker with a visually appealing slider effect.', 'Allowing users to input and select from multiple choices Users can input multiple choices separated by commas and then select one at random.', 'Creating tags by typing in and splitting by a comma is demonstrated.', 'The chapter explains how to create tags by splitting text input at commas, adding them to an array, and displaying them in the HTML.', "Demonstration of filter shows a match for 'Roman Roberts' when searching for 'Roman'.", 'Implementation of live user filter using HTML and CSS, including UI creation and dynamic filtering.', 'The random user API allows fetching a default of one user or setting a query param to fetch as many as desired, such as 20 users at once.', 'The API provides various fields for each user, including name, location with a full address, age, phone number, username, and password.', 'The chapter discusses how to fetch and display data from a random user API using asynchronous JavaScript, including initializing variables, using the fetch API to retrieve 50 users, constructing and appending list items for each user to the DOM, and accessing and displaying user information such as names, images, and locations.', 'Demonstrates filtering a user list based on search input, converting text to lowercase, and using the includes method to match and remove or add hide class based on the search term.', 'Building a content placeholder using HTML, CSS, and JavaScript, including creating a card with HTML and CSS, implementing a gradient animation with CSS, and inserting content from JavaScript, with the potential for fetching data from an API.', "Adding an event listener to the input field to capture typed input and call a function called 'filter data', allowing real-time filtering of data.", 'Setting HTML content by replacing elements with non-breaking spaces and inserting desired text, such as header, excerpt, profile image, name, and date, in the HTML.']}