title
Create a Website With Video Background | HTML & CSS

description
Create a beautiful, custom landing page for a Travel website using HTML, CSS and a little JavaScript Code: https://codepen.io/bradtraversy/pen/eYdMqvx Find a list of my latest Udemy courses at: https://traversymedia.com 💖 Support The Channel! http://www.patreon.com/traversymedia

detail
{'title': 'Create a Website With Video Background | HTML & CSS', 'heatmap': [{'end': 280.961, 'start': 168.059, 'weight': 0.718}, {'end': 339.665, 'start': 315.924, 'weight': 0.798}, {'end': 510.089, 'start': 485.502, 'weight': 0.897}, {'end': 935.101, 'start': 886.781, 'weight': 0.861}, {'end': 1629.535, 'start': 1605.272, 'weight': 0.753}, {'end': 1695.242, 'start': 1669.629, 'weight': 0.763}, {'end': 1863.116, 'start': 1837.641, 'weight': 0.703}, {'end': 2057.351, 'start': 2030.087, 'weight': 0.701}], 'summary': 'Learn to build a visually appealing travel landing page with video background, overlay, and responsive layout using html, css, and javascript. covers styling, flexbox, ui components, video overlay, dynamic navigation, and creating an interactive menu.', 'chapters': [{'end': 444.088, 'segs': [{'end': 34.932, 'src': 'embed', 'start': 7.216, 'weight': 1, 'content': [{'end': 15.32, 'text': "what's going on guys so i hope everybody had a happy new year and hopefully we have a better 2021 than we did 2020.", 'start': 7.216, 'duration': 8.104}, {'end': 20.343, 'text': 'so in this video i want to create a a really cool looking landing page for,', 'start': 15.32, 'duration': 5.023}, {'end': 28.287, 'text': "i guess like a travel agency travel website and we're basically just doing this part here which has a a really nice video background with an overlay,", 'start': 20.343, 'duration': 7.944}, {'end': 34.932, 'text': 'Some nice text, some social media icons down here with some effects on the buttons and icons.', 'start': 28.707, 'duration': 6.225}], 'summary': 'Creating a travel website landing page with video background, text, and social media icons.', 'duration': 27.716, 'max_score': 7.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA7216.jpg'}, {'end': 97.209, 'src': 'embed', 'start': 70.837, 'weight': 3, 'content': [{'end': 78.621, 'text': "But I'll have a code pen link in the description with all the code, with the video link, with the images and so on.", 'start': 70.837, 'duration': 7.784}, {'end': 82.503, 'text': "i'm going to jump into vs code and you can see i have a few things.", 'start': 79.201, 'duration': 3.302}, {'end': 84.443, 'text': 'i have the video, the mp4.', 'start': 82.503, 'duration': 1.94}, {'end': 85.924, 'text': 'i have the images.', 'start': 84.443, 'duration': 1.481}, {'end': 92.647, 'text': 'so we have the regular menu icon here, our menu image, the close image, and then we have the social media icon.', 'start': 85.924, 'duration': 6.723}, {'end': 97.209, 'text': "so i'm not using font awesome or anything you can if you want, but we're just going to be using images.", 'start': 92.647, 'duration': 4.562}], 'summary': 'The video contains code pen link, mp4 video, and images for menu and social media icons.', 'duration': 26.372, 'max_score': 70.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA70837.jpg'}, {'end': 280.961, 'src': 'heatmap', 'start': 168.059, 'weight': 0.718, 'content': [{'end': 174.201, 'text': "Actually let's save this and open it up so you can just open the index HTML in your file system or if you're using V.S.", 'start': 168.059, 'duration': 6.142}, {'end': 177.182, 'text': "code you can use live server which is what I'm doing.", 'start': 174.261, 'duration': 2.921}, {'end': 181.743, 'text': "So say open with live server and that's going to open it on my local host.", 'start': 177.322, 'duration': 4.421}, {'end': 182.834, 'text': 'All right.', 'start': 182.554, 'duration': 0.28}, {'end': 184.094, 'text': "So let's jump back in here.", 'start': 182.854, 'duration': 1.24}, {'end': 186.455, 'text': "And underneath the header, we're going to put the video.", 'start': 184.294, 'duration': 2.161}, {'end': 189.075, 'text': "So I'm going to use the HTML5 video tag.", 'start': 186.475, 'duration': 2.6}, {'end': 196.217, 'text': 'The source is going to be the location of the file, which is right in our route called explore dot MP4.', 'start': 189.536, 'duration': 6.681}, {'end': 198.718, 'text': "And then I'm going to add some attributes here.", 'start': 196.877, 'duration': 1.841}, {'end': 203.479, 'text': "So the first one is going to be muted to make sure that it's muted and you can use any video you want.", 'start': 198.958, 'duration': 4.521}, {'end': 204.739, 'text': "Doesn't have to be this video.", 'start': 203.599, 'duration': 1.14}, {'end': 208.801, 'text': "I'm going to say loop so that it keeps playing over and over and then autoplay.", 'start': 205.379, 'duration': 3.422}, {'end': 212.182, 'text': 'So it plays automatically when we visit the website.', 'start': 208.881, 'duration': 3.301}, {'end': 212.943, 'text': 'All right.', 'start': 212.723, 'duration': 0.22}, {'end': 214.443, 'text': "So it's going to look like this right now.", 'start': 212.963, 'duration': 1.48}, {'end': 219.506, 'text': "Now, under the video, we're going to have a div with the class of overlay.", 'start': 216.104, 'duration': 3.402}, {'end': 225.689, 'text': "And that's we're not going to put anything in here, but we're going to style it to have that bright overlay over the video.", 'start': 220.206, 'duration': 5.483}, {'end': 228.91, 'text': "And then underneath that, we'll have our text.", 'start': 226.389, 'duration': 2.521}, {'end': 233.273, 'text': "So I'll have a class of text and first is going to be an H2.", 'start': 229.191, 'duration': 4.082}, {'end': 235.94, 'text': "We'll say never stop.", 'start': 234.599, 'duration': 1.341}, {'end': 247.407, 'text': "and then in the H3 underneath we'll say exploring the world, and then I'm going to have a paragraph with just 20, 20 words of dummy text.", 'start': 235.94, 'duration': 11.467}, {'end': 254.912, 'text': "so we can do lorem 20, enter with Emmett and that'll give us this text here and underneath the paragraph we'll just have a link.", 'start': 247.407, 'duration': 7.505}, {'end': 261.176, 'text': "It's not actually going to go anywhere but we'll say explore and we're going to style that as a to look like a button.", 'start': 255.432, 'duration': 5.744}, {'end': 266.698, 'text': "Now, underneath the div with the class of text, we'll have a UL with the class of social.", 'start': 261.976, 'duration': 4.722}, {'end': 274.759, 'text': 'And these are going to be our social media icons, which will be in link, not links, LI tags and inside an image.', 'start': 267.558, 'duration': 7.201}, {'end': 280.961, 'text': 'So an IMG tag with a source of this one will be Facebook dot PNG.', 'start': 275.119, 'duration': 5.842}], 'summary': 'Creating a webpage with a video background and text overlay using html5 tags and styling', 'duration': 112.902, 'max_score': 168.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA168059.jpg'}, {'end': 247.407, 'src': 'embed', 'start': 216.104, 'weight': 4, 'content': [{'end': 219.506, 'text': "Now, under the video, we're going to have a div with the class of overlay.", 'start': 216.104, 'duration': 3.402}, {'end': 225.689, 'text': "And that's we're not going to put anything in here, but we're going to style it to have that bright overlay over the video.", 'start': 220.206, 'duration': 5.483}, {'end': 228.91, 'text': "And then underneath that, we'll have our text.", 'start': 226.389, 'duration': 2.521}, {'end': 233.273, 'text': "So I'll have a class of text and first is going to be an H2.", 'start': 229.191, 'duration': 4.082}, {'end': 235.94, 'text': "We'll say never stop.", 'start': 234.599, 'duration': 1.341}, {'end': 247.407, 'text': "and then in the H3 underneath we'll say exploring the world, and then I'm going to have a paragraph with just 20, 20 words of dummy text.", 'start': 235.94, 'duration': 11.467}], 'summary': "Create a video overlay with 'never stop' h2, 'exploring the world' h3, and a 20-word dummy text paragraph.", 'duration': 31.303, 'max_score': 216.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA216104.jpg'}, {'end': 350.948, 'src': 'heatmap', 'start': 315.924, 'weight': 0, 'content': [{'end': 319.487, 'text': 'You can say whatever you want here and of course you can create these pages if you want.', 'start': 315.924, 'duration': 3.563}, {'end': 334.284, 'text': "blog and contact all right so that's it for the html if i save that we check it out everything is just you know position static in the layout.", 'start': 321.618, 'duration': 12.666}, {'end': 339.665, 'text': 'So from top to bottom, we have the logo, the video, the text, the social media, the menu.', 'start': 334.324, 'duration': 5.341}, {'end': 341.786, 'text': 'So now we want to go ahead and style this.', 'start': 340.005, 'duration': 1.781}, {'end': 350.948, 'text': "I'm going to make this a little smaller so we can fit this on the screen and jump into our style sheet.", 'start': 341.926, 'duration': 9.022}], 'summary': 'Creating html layout with logo, video, text, social media, and menu for further styling.', 'duration': 35.024, 'max_score': 315.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA315924.jpg'}, {'end': 431.838, 'src': 'embed', 'start': 401.257, 'weight': 2, 'content': [{'end': 407.578, 'text': "okay, so we're importing the Poppins font with these weights and now we can continue on with our styling.", 'start': 401.257, 'duration': 6.321}, {'end': 412.95, 'text': "So I'm going to use the universal selector, which is an asterisk basically for a reset,", 'start': 408.268, 'duration': 4.682}, {'end': 417.212, 'text': 'saying I want to select everything and I want to zero out the margin and padding.', 'start': 412.95, 'duration': 4.262}, {'end': 419.233, 'text': 'So take take that off of everything.', 'start': 417.372, 'duration': 1.861}, {'end': 422.614, 'text': "If I save, you can see now there's no margin or padding on anything.", 'start': 419.273, 'duration': 3.341}, {'end': 431.838, 'text': "I also want to set the box sizing property to border box so that if we add any borders or padding, it doesn't affect the overall size of the element.", 'start': 423.415, 'duration': 8.423}], 'summary': 'Styling includes poppins font import, universal selector reset, and box sizing property adjustment.', 'duration': 30.581, 'max_score': 401.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA401257.jpg'}], 'start': 7.216, 'title': 'Building a travel landing page', 'summary': 'Covers creating a visually appealing travel landing page with video background, overlay, social media icons, and a responsive layout, along with html structure and styling using poppins font and universal selector.', 'chapters': [{'end': 214.443, 'start': 7.216, 'title': 'Building a cool travel landing page', 'summary': 'Covers building a visually appealing landing page for a travel website, featuring a video background, overlay, social media icons, and a responsive layout, with code and assets provided.', 'duration': 207.227, 'highlights': ['The video features a visually appealing landing page for a travel website, including a video background, overlay, social media icons, and a responsive layout. The landing page includes a video background, overlay, social media icons, and a responsive layout, providing a visually appealing design.', 'Code and assets such as the video link and images are provided, and the page is designed to be responsive. Code and assets, including the video link and images, are provided for building a responsive landing page.', 'The HTML and CSS structure for the landing page is explained, including the use of HTML5 video tag and attributes. The transcript explains the HTML and CSS structure for the landing page, featuring the use of HTML5 video tag and attributes.']}, {'end': 444.088, 'start': 216.104, 'title': 'Html structure and styling', 'summary': 'Covers the html structure for creating a video overlay with text, social media icons, and a menu, as well as the styling process, including the use of the poppins font and universal selector for resetting margins and padding.', 'duration': 227.984, 'highlights': ['The chapter covers the HTML structure for creating a video overlay with text, social media icons, and a menu.', 'The styling process includes the use of the Poppins font with various font weights and the universal selector for resetting margins and padding.', 'A div with the class of overlay is used to create a bright overlay over the video, followed by text elements such as H2, H3, paragraph, and a styled link.', 'The UL with the class of social contains social media icons in LI tags with corresponding images for Facebook, Twitter, and Instagram.', 'The menu section includes a UL with list items and links for home, news, destination, blog, and contact.']}], 'duration': 436.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA7216.jpg', 'highlights': ['The chapter covers the HTML structure for creating a video overlay with text, social media icons, and a menu.', 'The video features a visually appealing landing page for a travel website, including a video background, overlay, social media icons, and a responsive layout.', 'The styling process includes the use of the Poppins font with various font weights and the universal selector for resetting margins and padding.', 'Code and assets such as the video link and images are provided, and the page is designed to be responsive.', 'A div with the class of overlay is used to create a bright overlay over the video, followed by text elements such as H2, H3, paragraph, and a styled link.']}, {'end': 804.629, 'segs': [{'end': 510.089, 'src': 'heatmap', 'start': 468.51, 'weight': 1, 'content': [{'end': 475.795, 'text': "percent And then we also want the, let's say, minimum height to be 100 VH, which is a viewport height.", 'start': 468.51, 'duration': 7.285}, {'end': 485.462, 'text': "If I save that, you'll see that the showcase everything is positioned absolute except for the menu, which is behind everything.", 'start': 476.196, 'duration': 9.266}, {'end': 487.744, 'text': 'So just kind of ignore the menu for now.', 'start': 485.502, 'duration': 2.242}, {'end': 495.258, 'text': "In fact, we can go ahead and just for now, let's Let's display none for the menu.", 'start': 487.764, 'duration': 7.494}, {'end': 501.342, 'text': "And then I'm also going to just comment out the video because it's kind of messing with me, the movement.", 'start': 495.798, 'duration': 5.544}, {'end': 503.324, 'text': "So I'm going to comment that out.", 'start': 501.883, 'duration': 1.441}, {'end': 505.466, 'text': 'All right.', 'start': 505.125, 'duration': 0.341}, {'end': 510.089, 'text': 'So it should look like this now for the rest of the showcase here.', 'start': 505.606, 'duration': 4.483}], 'summary': 'Positioned elements at 100 vh height, hiding menu and video for showcase.', 'duration': 26.748, 'max_score': 468.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA468510.jpg'}, {'end': 546.848, 'src': 'embed', 'start': 518.659, 'weight': 2, 'content': [{'end': 525.262, 'text': "So padding 100 pixels, I'm going to display flex so that I can align some of these elements.", 'start': 518.659, 'duration': 6.603}, {'end': 528.503, 'text': 'Now, when I display flex automatically, it puts it into a row.', 'start': 525.422, 'duration': 3.081}, {'end': 532.444, 'text': 'We have in the showcase three main three main elements.', 'start': 529.083, 'duration': 3.361}, {'end': 535.965, 'text': 'We have the header, we have the text and we have social.', 'start': 532.544, 'duration': 3.421}, {'end': 537.465, 'text': 'So those are going to be in a row.', 'start': 536.105, 'duration': 1.36}, {'end': 546.848, 'text': "But we're going to be positioning the header and the social icons absolute so that they're not going to stay in this in this alignment.", 'start': 538.446, 'duration': 8.402}], 'summary': 'Using display flex to align elements, positioning header and social icons absolute.', 'duration': 28.189, 'max_score': 518.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA518659.jpg'}, {'end': 590.339, 'src': 'embed', 'start': 564.205, 'weight': 3, 'content': [{'end': 568.267, 'text': "So with flexbox we can do align items and we'll align it to the center.", 'start': 564.205, 'duration': 4.062}, {'end': 573.089, 'text': "Okay, so everything's in the middle Let's see what else we want to do here.", 'start': 568.287, 'duration': 4.802}, {'end': 581.794, 'text': "Let's set the background to of the showcase to a dark color and we'll set the color to white.", 'start': 573.129, 'duration': 8.665}, {'end': 585.442, 'text': "And then I'm also going to add a Z index.", 'start': 583.458, 'duration': 1.984}, {'end': 589.658, 'text': "and set that to two so that it's always in front of the menu.", 'start': 586.815, 'duration': 2.843}, {'end': 590.339, 'text': 'All right.', 'start': 590.098, 'duration': 0.241}], 'summary': 'Using flexbox to align items, set background color to dark, and adjust z-index for showcase.', 'duration': 26.134, 'max_score': 564.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA564205.jpg'}, {'end': 672.687, 'src': 'embed', 'start': 639.697, 'weight': 4, 'content': [{'end': 641.078, 'text': "We'll just do class toggle.", 'start': 639.697, 'duration': 1.381}, {'end': 643.478, 'text': 'All right.', 'start': 643.218, 'duration': 0.26}, {'end': 648.299, 'text': "So for the toggle, we're going to want to show the menu button.", 'start': 643.498, 'duration': 4.801}, {'end': 653.221, 'text': 'But first, I just want to make sure this is positioned relative within the header.', 'start': 648.94, 'duration': 4.281}, {'end': 658.042, 'text': "And then let's set a width and a height to we'll do 60 pixels.", 'start': 653.841, 'duration': 4.201}, {'end': 661.176, 'text': 'width and height.', 'start': 660.615, 'duration': 0.561}, {'end': 664.379, 'text': 'And then we want to add the background image.', 'start': 661.716, 'duration': 2.663}, {'end': 665.8, 'text': "So we'll just say background.", 'start': 664.479, 'duration': 1.321}, {'end': 667.562, 'text': 'You want to set it to a U.R.L.', 'start': 665.82, 'duration': 1.742}, {'end': 672.687, 'text': 'set it to the menu dot PNG by save that we can see it right here.', 'start': 668.062, 'duration': 4.625}], 'summary': 'Setting menu button with a 60-pixel width and height, and a background image.', 'duration': 32.99, 'max_score': 639.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA639697.jpg'}, {'end': 786.341, 'src': 'embed', 'start': 757.345, 'weight': 0, 'content': [{'end': 759.548, 'text': "I'm going to give it a really high Z index say 1000 and then for the display.", 'start': 757.345, 'duration': 2.203}, {'end': 769.315, 'text': 'So obviously we want, you know, the logo on this side, the menu button on this side.', 'start': 764.614, 'duration': 4.701}, {'end': 770.496, 'text': "So we're going to use flex.", 'start': 769.395, 'duration': 1.101}, {'end': 777.678, 'text': "As soon as I do display flex, it'll put them side by side now to align them vertically this way so that they match up.", 'start': 771.136, 'duration': 6.542}, {'end': 779.519, 'text': "We're going to use justify.", 'start': 778.058, 'duration': 1.461}, {'end': 781.619, 'text': "I'm sorry, align items.", 'start': 779.539, 'duration': 2.08}, {'end': 786.341, 'text': 'If it was a row, I mean, if it was a column, we would use justify content.', 'start': 782.8, 'duration': 3.541}], 'summary': 'Using a high z index of 1000 and flex display to align logo and menu button on a webpage.', 'duration': 28.996, 'max_score': 757.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA757345.jpg'}], 'start': 445.248, 'title': 'Showcase styling with flexbox', 'summary': 'Covers the positioning and styling of a showcase, setting it to span 100% width and 100 vh height, adjusting padding, and using flexbox for alignment. it also details the flexbox showcase styling including alignment, background, z-index, and positioning, with specific details on setting the z-index to 1000 for the header and aligning items using flex and justify content.', 'chapters': [{'end': 564.205, 'start': 445.248, 'title': 'Positioning and styling showcase', 'summary': 'Discusses positioning and styling the showcase, setting it to span a width of 100 percent and a minimum height of 100 vh, adjusting padding, and using flexbox to align elements within the showcase.', 'duration': 118.957, 'highlights': ['The showcase is positioned absolute with a width of 100 percent and a minimum height of 100 VH, excluding the menu.', 'The showcase is styled with a padding of 100 pixels and displayed using flexbox to align the header, text, and social elements in a row.', 'The header and social icons within the showcase are positioned absolute, and the justify content property is used to distribute space between the main elements.']}, {'end': 804.629, 'start': 564.205, 'title': 'Flexbox showcase styling', 'summary': 'Covers the styling of a showcase using flexbox, including alignment, background, z-index, and positioning, with specific details on setting the z-index to 1000 for the header and aligning items using flex and justify content.', 'duration': 240.424, 'highlights': ['The z-index is set to 1000 for the header to ensure it is on top.', 'The showcase is styled using flexbox, with items aligned using align items and justified content.', 'The background of the showcase is set to a dark color with white text.', 'The toggle button is positioned relative within the header and styled with a background image, size, and cursor.', 'The menu button is set to be always in front of the menu by setting its z-index to 2.', 'The remaining space between the logo and menu button is adjusted using space-between.']}], 'duration': 359.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA445248.jpg', 'highlights': ['The z-index is set to 1000 for the header to ensure it is on top.', 'The showcase is positioned absolute with a width of 100 percent and a minimum height of 100 VH, excluding the menu.', 'The showcase is styled with a padding of 100 pixels and displayed using flexbox to align the header, text, and social elements in a row.', 'The background of the showcase is set to a dark color with white text.', 'The toggle button is positioned relative within the header and styled with a background image, size, and cursor.']}, {'end': 1022.41, 'segs': [{'end': 935.101, 'src': 'heatmap', 'start': 843.892, 'weight': 0, 'content': [{'end': 849.353, 'text': "So if the toggle has a class of active, in fact, I'm going to I'm going to add that manually right now.", 'start': 843.892, 'duration': 5.461}, {'end': 855.154, 'text': "Later on, we're going to add it with JavaScript so that when we click, we have an event that adds a class of active.", 'start': 849.473, 'duration': 5.681}, {'end': 864.816, 'text': "But for now, I'm just going to put it in there, put that on the toggle, and then we'll go right below here and say toggle if it has a class of active.", 'start': 855.194, 'duration': 9.622}, {'end': 866.703, 'text': "Don't put a space here.", 'start': 865.663, 'duration': 1.04}, {'end': 874.047, 'text': "If you put a if you put a space like this, it means you're looking for an element inside of toggle with a class of active.", 'start': 866.764, 'duration': 7.283}, {'end': 878.068, 'text': "If we don't put a space, we're looking for the class of active on the toggle.", 'start': 874.527, 'duration': 3.541}, {'end': 881.35, 'text': 'OK, so big difference now in here.', 'start': 878.789, 'duration': 2.561}, {'end': 885.472, 'text': "I'm going to just copy these background properties.", 'start': 882.03, 'duration': 3.442}, {'end': 888.862, 'text': "And we're going to change this to our close button.", 'start': 886.781, 'duration': 2.081}, {'end': 891.343, 'text': "And then I'm also going to make it a little smaller.", 'start': 889.442, 'duration': 1.901}, {'end': 893.904, 'text': 'Make it 25 pixels and save.', 'start': 891.363, 'duration': 2.541}, {'end': 896.785, 'text': "And now notice that it's showing the close button.", 'start': 894.324, 'duration': 2.461}, {'end': 900.806, 'text': "Okay Now I'm going to take that active class off and save.", 'start': 897.445, 'duration': 3.361}, {'end': 902.667, 'text': "And now it's back to its original.", 'start': 900.886, 'duration': 1.781}, {'end': 904.348, 'text': 'All right.', 'start': 904.088, 'duration': 0.26}, {'end': 906.289, 'text': "So now let's do the video.", 'start': 904.388, 'duration': 1.901}, {'end': 908.129, 'text': "The menu is actually the last thing we're going to do.", 'start': 906.309, 'duration': 1.82}, {'end': 911.01, 'text': 'So, yeah, we can actually get rid of that for now.', 'start': 909.29, 'duration': 1.72}, {'end': 912.731, 'text': "So let's do the video.", 'start': 911.711, 'duration': 1.02}, {'end': 915.312, 'text': 'I have it commented out right now, uncommented.', 'start': 913.011, 'duration': 2.301}, {'end': 919.758, 'text': 'And we want the video to be completely full screen.', 'start': 916.817, 'duration': 2.941}, {'end': 929.46, 'text': "So let's target showcase video and we want to position that to be absolute.", 'start': 920.538, 'duration': 8.922}, {'end': 932.501, 'text': "And then I'm going to position it at the top left corner.", 'start': 929.94, 'duration': 2.561}, {'end': 935.101, 'text': 'So top zero left zero.', 'start': 932.561, 'duration': 2.54}], 'summary': 'Adding and removing classes to toggle and showcase video for web design.', 'duration': 47.451, 'max_score': 843.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA843892.jpg'}, {'end': 1022.41, 'src': 'embed', 'start': 916.817, 'weight': 3, 'content': [{'end': 919.758, 'text': 'And we want the video to be completely full screen.', 'start': 916.817, 'duration': 2.941}, {'end': 929.46, 'text': "So let's target showcase video and we want to position that to be absolute.", 'start': 920.538, 'duration': 8.922}, {'end': 932.501, 'text': "And then I'm going to position it at the top left corner.", 'start': 929.94, 'duration': 2.561}, {'end': 935.101, 'text': 'So top zero left zero.', 'start': 932.561, 'duration': 2.54}, {'end': 940.063, 'text': 'We want it to span a width of 100 percent as well as the height of 100 percent.', 'start': 935.142, 'duration': 4.921}, {'end': 949.479, 'text': "Now you can see we have the entire video showing which we want but we don't want this space above and below.", 'start': 941.71, 'duration': 7.769}, {'end': 952.643, 'text': "So we're going to use object fit and we want to cover.", 'start': 949.579, 'duration': 3.064}, {'end': 958.529, 'text': "OK so that's going to try to display the whole video but not have that space.", 'start': 953.503, 'duration': 5.026}, {'end': 959.751, 'text': "And that's what we want.", 'start': 959.01, 'duration': 0.741}, {'end': 960.909, 'text': 'All right.', 'start': 960.609, 'duration': 0.3}, {'end': 966.732, 'text': 'Now, the last thing I want to do is just add a little bit of opacity or take away some opacity.', 'start': 961.029, 'duration': 5.703}, {'end': 968.593, 'text': 'I should say one is default.', 'start': 966.772, 'duration': 1.821}, {'end': 970.234, 'text': "That means it's not translucent.", 'start': 968.633, 'duration': 1.601}, {'end': 971.075, 'text': "It's not see through.", 'start': 970.254, 'duration': 0.821}, {'end': 974.897, 'text': "So let's set it to zero point eight, which is just a little translucent.", 'start': 971.855, 'duration': 3.042}, {'end': 982.561, 'text': 'Now, the text is the header is on top of the video, but the text is actually behind it.', 'start': 975.757, 'duration': 6.804}, {'end': 985.163, 'text': 'And the reason for that is the header.', 'start': 983.261, 'duration': 1.902}, {'end': 987.504, 'text': 'We put that thousands the index on.', 'start': 985.203, 'duration': 2.301}, {'end': 990.406, 'text': 'Where is it? Right here.', 'start': 989.485, 'duration': 0.921}, {'end': 993.027, 'text': 'So that puts it on top for the text.', 'start': 990.986, 'duration': 2.041}, {'end': 997.71, 'text': "Before we do the overlay, I'm just going to add for the text.", 'start': 993.608, 'duration': 4.102}, {'end': 1009.398, 'text': "Let's let's just position this relative and let's set a Z index of something higher than two, because I believe we set the we set the showcase to two.", 'start': 998.551, 'duration': 10.847}, {'end': 1011.699, 'text': "So we'll set that to 10.", 'start': 1010.058, 'duration': 1.641}, {'end': 1014.601, 'text': 'And now the text is on top now for the overlay.', 'start': 1011.699, 'duration': 2.902}, {'end': 1022.41, 'text': 'So the overlay we just want to kind of place over everything just like we did with the video.', 'start': 1017.785, 'duration': 4.625}], 'summary': 'Position video full screen with 100% width and height, adjust opacity, and overlay text and video.', 'duration': 105.593, 'max_score': 916.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA916817.jpg'}], 'start': 804.649, 'title': 'Styling ui components', 'summary': 'Covers styling the logo, toggle button, and close button properties, with upcoming work on the video menu, as well as demonstrating full screen video styling using css for positioning, size adjustment, and overlay elements.', 'chapters': [{'end': 915.312, 'start': 804.649, 'title': 'Styling header and toggle button', 'summary': "Covers styling the logo, setting the cursor to a pointer, adding and removing the 'active' class for the toggle button, and adjusting the background properties for the close button, with a mention of the upcoming work on the video menu.", 'duration': 110.663, 'highlights': ["The 'active' class is manually added to the toggle button, to be later handled by JavaScript to trigger an event, demonstrating the practical application of JavaScript in styling elements.", 'The background properties are adjusted to create a close button, with a reduction in size to 25 pixels, showcasing the process of customizing elements for improved visual appeal.', "The process of searching for the 'active' class on the toggle button is explained, emphasizing the importance of syntax and its impact on selecting the correct element for styling.", 'The chapter concludes with a mention of upcoming work on the video menu, indicating the sequential order of tasks for styling different elements.']}, {'end': 1022.41, 'start': 916.817, 'title': 'Full screen video styling', 'summary': "Demonstrates how to style a video to be completely full screen, using css to position it at the top left corner, span a width and height of 100%, remove space above and below using 'object fit: cover', adjust opacity, and position text and overlay elements.", 'duration': 105.593, 'highlights': ['The video is styled to be completely full screen by positioning it at the top left corner and spanning a width and height of 100%.', "The 'object fit: cover' property is used to remove space above and below the video.", 'Opacity is adjusted to make the video slightly translucent with a value of 0.8.', 'Text is positioned on top of the video using a higher Z index, and the overlay is also placed over everything using similar positioning techniques.']}], 'duration': 217.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA804649.jpg', 'highlights': ['Demonstrates practical application of JavaScript in styling elements.', 'Adjusts background properties to create a close button, showcasing customization.', 'Emphasizes the importance of syntax in selecting the correct element for styling.', 'Styles the video to be completely full screen with specific positioning and sizing.', "Uses 'object fit: cover' property to remove space above and below the video.", 'Adjusts opacity to make the video slightly translucent with a value of 0.8.', 'Positions text on top of the video using a higher Z index.', 'Places overlay over everything using specific positioning techniques.']}, {'end': 1609.602, 'segs': [{'end': 1049.501, 'src': 'embed', 'start': 1022.43, 'weight': 4, 'content': [{'end': 1028.136, 'text': "So I'm going to copy all of this because we wanted to position absolute.", 'start': 1022.43, 'duration': 5.706}, {'end': 1037.986, 'text': 'We wanted to start at the top left span everything you know going vertical horizontal and then I want to add a background color.', 'start': 1028.596, 'duration': 9.39}, {'end': 1049.501, 'text': "So let's say background and we're going to use a hexadecimal value of 0 3 a 9 f 4 which is a light blue.", 'start': 1039.794, 'duration': 9.707}], 'summary': 'Position absolute, top-left alignment, light blue background color added.', 'duration': 27.071, 'max_score': 1022.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1022430.jpg'}, {'end': 1117.483, 'src': 'embed', 'start': 1068.328, 'weight': 0, 'content': [{'end': 1072.928, 'text': 'So we could do zero for red, green, blue, which gives us black, or we could use any color.', 'start': 1068.328, 'duration': 4.6}, {'end': 1075.109, 'text': 'And the alpha is the transparency.', 'start': 1073.389, 'duration': 1.72}, {'end': 1078.81, 'text': 'So I could do like 0.5 and now we can see through it.', 'start': 1075.169, 'duration': 3.641}, {'end': 1080.71, 'text': "It's black, but we can see through it.", 'start': 1078.87, 'duration': 1.84}, {'end': 1083.459, 'text': 'You can make it darker or whatever.', 'start': 1081.277, 'duration': 2.182}, {'end': 1094.331, 'text': "But what we're going to do is keep the hexadecimal value and then we're going to use the mix blend mode property and set that to overlay.", 'start': 1083.599, 'duration': 10.732}, {'end': 1096.639, 'text': 'And there we go.', 'start': 1095.879, 'duration': 0.76}, {'end': 1103.28, 'text': 'So now it blends in, it overlays the video and it looks really nice as that, you know, makes it pop.', 'start': 1096.679, 'duration': 6.601}, {'end': 1106.241, 'text': 'I mean, I think it looks better than this does.', 'start': 1103.7, 'duration': 2.541}, {'end': 1113.282, 'text': 'And of course, you could change change this color if you wanted, like black, for instance, you could do that.', 'start': 1107.201, 'duration': 6.081}, {'end': 1116.343, 'text': 'That looks kind of weird, but I think that that looks good.', 'start': 1113.322, 'duration': 3.021}, {'end': 1117.483, 'text': 'You can experiment with it.', 'start': 1116.363, 'duration': 1.12}], 'summary': 'Adjusting color transparency and blend mode for video overlay effect.', 'duration': 49.155, 'max_score': 1068.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1068328.jpg'}, {'end': 1174.162, 'src': 'embed', 'start': 1144.084, 'weight': 5, 'content': [{'end': 1149.285, 'text': "We're basically saying whatever the parent containers font size is, multiply it by five.", 'start': 1144.084, 'duration': 5.201}, {'end': 1152.226, 'text': 'And we have this nice big H2 here.', 'start': 1149.846, 'duration': 2.38}, {'end': 1155.207, 'text': 'So we also want the font weight.', 'start': 1153.066, 'duration': 2.141}, {'end': 1159.287, 'text': "I'm going to set that to 800 and I'll make it a little more bold.", 'start': 1155.227, 'duration': 4.06}, {'end': 1165.769, 'text': "And then let's set the line height to we'll do one M oops.", 'start': 1159.928, 'duration': 5.841}, {'end': 1174.162, 'text': "And then let's set the text transform property and set that to uppercase because I want it to be all uppercase.", 'start': 1167.651, 'duration': 6.511}], 'summary': 'Set h2 font size to 5 times parent container, weight to 800, line height to 1m, and text transform to uppercase.', 'duration': 30.078, 'max_score': 1144.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1144084.jpg'}, {'end': 1558.937, 'src': 'embed', 'start': 1528.698, 'weight': 6, 'content': [{'end': 1534.785, 'text': "So now if I hover over these icons you'll see those smoothly go up 15 pixels and you can mess with that if you want.", 'start': 1528.698, 'duration': 6.087}, {'end': 1536.412, 'text': 'All right.', 'start': 1536.052, 'duration': 0.36}, {'end': 1541.293, 'text': 'So I think I mean aside from the menu and a little bit of JavaScript.', 'start': 1536.512, 'duration': 4.781}, {'end': 1548.135, 'text': 'I just want to do a little bit of responsiveness here, because if we make this really small, you can see the text is way too big.', 'start': 1541.293, 'duration': 6.842}, {'end': 1551.155, 'text': "So we're just going to add a media query here.", 'start': 1548.255, 'duration': 2.9}, {'end': 1558.937, 'text': "Let's say at media and in here we'll set a max width of let's do nine ninety one pixels.", 'start': 1551.215, 'duration': 7.722}], 'summary': 'Adjusting icon hover effect by increasing 15 pixels. adding media query for max width of 991 pixels.', 'duration': 30.239, 'max_score': 1528.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1528698.jpg'}], 'start': 1022.43, 'title': 'Styling video overlay and css', 'summary': 'Covers styling a video overlay with hexadecimal and rgba values, demonstrating positioning, background color addition, and mix blend mode usage, alongside the process of styling and positioning html elements using css, including font sizes, weights, line heights, margins, padding, text transformations, button-like effects creation, and media queries for responsiveness.', 'chapters': [{'end': 1117.483, 'start': 1022.43, 'title': 'Styling video overlay with hexadecimal and rgba', 'summary': 'Explores styling a video overlay using hexadecimal and rgba values, demonstrating how to position, add a background color, and use mix blend mode property to achieve desired visual effects.', 'duration': 95.053, 'highlights': ['The use of hexadecimal and RGBA values to set background color and transparency allows for creative and customizable video overlays.', 'The demonstration of using mix blend mode property to overlay the video and create visually appealing effects enhances the overall presentation of the content.', 'The detailed explanation of how to position absolute, span everything vertically and horizontally, and add a background color provides comprehensive guidance for achieving desired visual styling.', 'The mention of using RGBA with a transparency value of 0.5 to create a semi-transparent overlay offers a specific example for achieving a desired visual effect.', 'The mention of using the mix blend mode property with the overlay setting to blend the background color with the video content demonstrates a practical application for enhancing the visual appeal of the overlay.']}, {'end': 1609.602, 'start': 1117.583, 'title': 'Css styling and positioning', 'summary': 'Covers the process of styling and positioning html elements using css, including setting font sizes, weights, line heights, margins, padding, text transformations, and creating button-like effects, as well as using media queries for responsiveness.', 'duration': 492.019, 'highlights': ['The process of styling and positioning HTML elements using CSS, including setting font sizes, weights, line heights, margins, padding, text transformations, and creating button-like effects. The transcript provides a detailed guide on styling and positioning HTML elements using CSS, covering aspects such as setting font sizes, weights, line heights, margins, padding, text transformations, and creating button-like effects.', 'Usage of media queries for responsiveness, including adjusting font sizes and padding for smaller screens. The chapter demonstrates the use of media queries to ensure responsiveness, including adjusting font sizes and padding for smaller screens.']}], 'duration': 587.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1022430.jpg', 'highlights': ['The demonstration of using mix blend mode property to overlay the video and create visually appealing effects enhances the overall presentation of the content.', 'The mention of using the mix blend mode property with the overlay setting to blend the background color with the video content demonstrates a practical application for enhancing the visual appeal of the overlay.', 'The use of hexadecimal and RGBA values to set background color and transparency allows for creative and customizable video overlays.', 'The mention of using RGBA with a transparency value of 0.5 to create a semi-transparent overlay offers a specific example for achieving a desired visual effect.', 'The detailed explanation of how to position absolute, span everything vertically and horizontally, and add a background color provides comprehensive guidance for achieving desired visual styling.', 'The process of styling and positioning HTML elements using CSS, including setting font sizes, weights, line heights, margins, padding, text transformations, and creating button-like effects.', 'Usage of media queries for responsiveness, including adjusting font sizes and padding for smaller screens.']}, {'end': 1886.246, 'segs': [{'end': 1640.723, 'src': 'embed', 'start': 1609.703, 'weight': 0, 'content': [{'end': 1610.583, 'text': 'So that looks pretty good.', 'start': 1609.703, 'duration': 0.88}, {'end': 1612.724, 'text': 'Now we just need to do the menu.', 'start': 1611.324, 'duration': 1.4}, {'end': 1618.208, 'text': "So basically, we're going to add a little bit of JavaScript here.", 'start': 1613.945, 'duration': 4.263}, {'end': 1621.71, 'text': "I'm going to make this a little wider so we can see what's going on.", 'start': 1618.228, 'duration': 3.482}, {'end': 1629.535, 'text': 'But basically, we want to just click on this button here and we want to add the class of active to in two places.', 'start': 1622.411, 'duration': 7.124}, {'end': 1632.517, 'text': 'We want to add it on the showcase itself like this.', 'start': 1629.595, 'duration': 2.922}, {'end': 1635.499, 'text': 'And we also want to add it on the toggle like this.', 'start': 1633.197, 'duration': 2.302}, {'end': 1640.723, 'text': 'Now if I save that the toggle already has the X because we already added that style.', 'start': 1636.36, 'duration': 4.363}], 'summary': "Using javascript to add class 'active' to showcase and toggle for menu.", 'duration': 31.02, 'max_score': 1609.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1609703.jpg'}, {'end': 1714.436, 'src': 'heatmap', 'start': 1669.629, 'weight': 1, 'content': [{'end': 1672.45, 'text': 'If we look up here right is set to zero.', 'start': 1669.629, 'duration': 2.821}, {'end': 1677.333, 'text': "If it's active we're going to set it 300 pixels from the right which is going to be the width of the menu.", 'start': 1672.55, 'duration': 4.783}, {'end': 1680.555, 'text': "OK so that's what it's going to look like in its active state.", 'start': 1677.353, 'duration': 3.202}, {'end': 1686.379, 'text': "Now before we add the JavaScript let's let's just style the menu because right now we can't even see it.", 'start': 1681.396, 'duration': 4.983}, {'end': 1688.34, 'text': "So we're going to go down.", 'start': 1687.499, 'duration': 0.841}, {'end': 1695.242, 'text': "to the bottom here right above the media query and let's add in menu.", 'start': 1690.475, 'duration': 4.767}, {'end': 1697.024, 'text': 'All right.', 'start': 1695.262, 'duration': 1.762}, {'end': 1713.215, 'text': "So for the menu we want to position this absolute and let's set the We'll say from the top we want it to be from the top zero and then right zero.", 'start': 1697.044, 'duration': 16.171}, {'end': 1714.436, 'text': 'OK So now we can see it.', 'start': 1713.235, 'duration': 1.201}], 'summary': 'Set menu position to absolute with top and right at zero.', 'duration': 33.04, 'max_score': 1669.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1669629.jpg'}, {'end': 1864.993, 'src': 'heatmap', 'start': 1832.89, 'weight': 2, 'content': [{'end': 1833.631, 'text': 'So colon root.', 'start': 1832.89, 'duration': 0.741}, {'end': 1836.9, 'text': 'So we can use these variables anywhere or this variable.', 'start': 1834.599, 'duration': 2.301}, {'end': 1842.664, 'text': 'And then the way we define these variables are custom properties is with two hyphens.', 'start': 1837.641, 'duration': 5.023}, {'end': 1850.308, 'text': "And then whatever we want to call it, I'm going to call it overlay dash color and I'm going to set it to that blue color.", 'start': 1843.184, 'duration': 7.124}, {'end': 1858.773, 'text': 'And then wherever I want to use that, for instance, in the overlay, we can go ahead and just say VAR.', 'start': 1850.909, 'duration': 7.864}, {'end': 1863.116, 'text': 'So we need to use the VAR keyword and then inside here we can use overlay color.', 'start': 1858.953, 'duration': 4.163}, {'end': 1864.993, 'text': 'All right.', 'start': 1864.753, 'duration': 0.24}], 'summary': 'Defining custom properties using variables with two hyphens, such as overlay-color, allows for easy reusability.', 'duration': 32.103, 'max_score': 1832.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1832890.jpg'}], 'start': 1609.703, 'title': 'Styling menu with javascript', 'summary': 'Covers adding javascript to style a menu, including setting an active class, positioning the menu, and using custom properties for styling.', 'chapters': [{'end': 1886.246, 'start': 1609.703, 'title': 'Styling menu with javascript', 'summary': 'Covers adding javascript to style a menu, including setting an active class, positioning the menu, and using custom properties for styling.', 'duration': 276.543, 'highlights': ['Adding JavaScript to add an active class to showcase and toggle elements The JavaScript code adds an active class to both the showcase and toggle elements when the button is clicked.', 'Styling the menu with CSS properties and custom variables The menu is styled using CSS properties like position, width, height, and flexbox, and custom properties (variables) are used for color values.', 'Describing the use of custom properties (variables) in CSS The speaker explains the use of custom properties in CSS, demonstrating how to define and use variables for reusability and consistency in styling.']}], 'duration': 276.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1609703.jpg', 'highlights': ['Adding JavaScript to add an active class to showcase and toggle elements The JavaScript code adds an active class to both the showcase and toggle elements when the button is clicked.', 'Styling the menu with CSS properties and custom variables The menu is styled using CSS properties like position, width, height, and flexbox, and custom properties (variables) are used for color values.', 'Describing the use of custom properties (variables) in CSS The speaker explains the use of custom properties in CSS, demonstrating how to define and use variables for reusability and consistency in styling.']}, {'end': 2113.789, 'segs': [{'end': 2003.103, 'src': 'embed', 'start': 1915.551, 'weight': 0, 'content': [{'end': 1921.454, 'text': "So, yeah, to make this function, even if you're not familiar with JavaScript, this is not a lot at all.", 'start': 1915.551, 'duration': 5.903}, {'end': 1922.495, 'text': 'This is very easy.', 'start': 1921.494, 'duration': 1.001}, {'end': 1928.597, 'text': "So above the the ending body tag, we're going to add in a script tag so that we can put JavaScript in here.", 'start': 1922.595, 'duration': 6.002}, {'end': 1934.66, 'text': 'And we just want to add those two classes of active on those two elements just dynamically.', 'start': 1929.118, 'duration': 5.542}, {'end': 1941.424, 'text': "So first thing we want to bring in the toggle and the showcase because that's where we want to put those classes, those the active class.", 'start': 1935.241, 'duration': 6.183}, {'end': 1944.005, 'text': "So let's create a variable called menu toggle.", 'start': 1941.984, 'duration': 2.021}, {'end': 1954.579, 'text': "And we'll set this to document which has a method called query selector so that we can select things from the page from the document object model.", 'start': 1945.015, 'duration': 9.564}, {'end': 1958.781, 'text': 'And we want to select the class of toggle which is this right here.', 'start': 1955.179, 'duration': 3.602}, {'end': 1964.023, 'text': "OK I'm going to copy this down and we also want to get the showcase.", 'start': 1958.801, 'duration': 5.222}, {'end': 1968.305, 'text': "So I'm going to give this a variable of showcase change this.", 'start': 1964.043, 'duration': 4.262}, {'end': 1973.359, 'text': "showcase So now we're bringing those in and we can do stuff with them.", 'start': 1969.816, 'duration': 3.543}, {'end': 1980.004, 'text': 'So I want to take the menu toggle and I want to add an event listener onto it and listen for a click.', 'start': 1973.559, 'duration': 6.445}, {'end': 1985.668, 'text': "And when that happens, we'll run a function or on a function.", 'start': 1980.224, 'duration': 5.444}, {'end': 1994.614, 'text': 'Now, to shorten this up, we can use an arrow function if we just get rid of that and put an arrow here, which is what I would prefer to do.', 'start': 1985.688, 'duration': 8.926}, {'end': 1996.876, 'text': 'And here we want to take our menu toggle.', 'start': 1994.634, 'duration': 2.242}, {'end': 1998.879, 'text': 'And we just want to add.', 'start': 1997.998, 'duration': 0.881}, {'end': 2001.501, 'text': 'we want to toggle the class of active meaning.', 'start': 1998.879, 'duration': 2.622}, {'end': 2003.103, 'text': "if it's applied, we're going to remove it.", 'start': 2001.501, 'duration': 1.602}], 'summary': 'Using javascript, add active classes dynamically to elements, making it easy even for beginners.', 'duration': 87.552, 'max_score': 1915.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1915551.jpg'}, {'end': 2085.811, 'src': 'heatmap', 'start': 2030.087, 'weight': 2, 'content': [{'end': 2032.327, 'text': 'This is going to change to the close button on active.', 'start': 2030.087, 'duration': 2.24}, {'end': 2035.508, 'text': 'OK, those are the two state changes we have.', 'start': 2033.027, 'duration': 2.481}, {'end': 2039.749, 'text': "So if I click this now, you'll see it opens like click the exit.", 'start': 2035.608, 'duration': 4.141}, {'end': 2040.729, 'text': 'It closes now.', 'start': 2039.949, 'duration': 0.78}, {'end': 2044.79, 'text': 'I want it to have a smooth transition and not just flick open and close.', 'start': 2041.429, 'duration': 3.361}, {'end': 2049.331, 'text': 'So to do that, all we have to do is go up to the toggle.', 'start': 2045.43, 'duration': 3.901}, {'end': 2057.351, 'text': 'Not the toggle, the showcase.', 'start': 2056.031, 'duration': 1.32}, {'end': 2062.295, 'text': 'All right.', 'start': 2057.371, 'duration': 4.924}, {'end': 2063.656, 'text': 'So right here we have showcase.', 'start': 2062.315, 'duration': 1.341}, {'end': 2070.341, 'text': "I'm just going to add a transition and let's do zero point five seconds.", 'start': 2063.676, 'duration': 6.665}, {'end': 2072.062, 'text': 'That might be too long.', 'start': 2071.181, 'duration': 0.881}, {'end': 2072.483, 'text': "Let's see.", 'start': 2072.101, 'duration': 0.382}, {'end': 2073.763, 'text': "Oh, that's good.", 'start': 2073.203, 'duration': 0.56}, {'end': 2077.266, 'text': 'So now instead of just flicking open, it has a transition.', 'start': 2073.882, 'duration': 3.384}, {'end': 2078.607, 'text': 'You can make this whatever you want.', 'start': 2077.346, 'duration': 1.261}, {'end': 2082.83, 'text': "If you wanted to take one point five seconds, it's going to open slower.", 'start': 2078.647, 'duration': 4.183}, {'end': 2085.811, 'text': "All right, I think that that's a good speed.", 'start': 2084.147, 'duration': 1.664}], 'summary': 'Implemented a 0.5-second transition to the close button for smoother open and close actions.', 'duration': 55.724, 'max_score': 2030.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA2030087.jpg'}], 'start': 1886.626, 'title': 'Creating dynamic navigation with javascript', 'summary': 'Covers adding dynamic classes using javascript to create an interactive navigation menu, including selecting elements, adding event listeners, and applying class toggles for smooth transitions with a 0.5-second transition time for a visually appealing effect.', 'chapters': [{'end': 2113.789, 'start': 1886.626, 'title': 'Creating dynamic navigation with javascript', 'summary': 'Covers adding dynamic classes using javascript to create an interactive navigation menu, including the method to select elements, adding event listeners and applying class toggles for smooth transitions, with a transition time of 0.5 seconds to achieve a visually appealing effect.', 'duration': 227.163, 'highlights': ['Adding dynamic classes using JavaScript for interactive navigation menu', 'Selecting elements using document.queryselector method', 'Applying class toggles for smooth transitions with 0.5 seconds transition time', 'Utilizing arrow functions and event listeners for efficient JavaScript implementation', 'Exploring possibilities for expanding functionality using the demonstrated methods']}], 'duration': 227.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8MgpE2DTTKA/pics/8MgpE2DTTKA1886626.jpg', 'highlights': ['Adding dynamic classes using JavaScript for interactive navigation menu', 'Selecting elements using document.queryselector method', 'Applying class toggles for smooth transitions with 0.5 seconds transition time', 'Utilizing arrow functions and event listeners for efficient JavaScript implementation', 'Exploring possibilities for expanding functionality using the demonstrated methods']}], 'highlights': ['The chapter covers the HTML structure for creating a video overlay with text, social media icons, and a menu.', 'The video features a visually appealing landing page for a travel website, including a video background, overlay, social media icons, and a responsive layout.', 'The demonstration of using mix blend mode property to overlay the video and create visually appealing effects enhances the overall presentation of the content.', 'Adding JavaScript to add an active class to showcase and toggle elements The JavaScript code adds an active class to both the showcase and toggle elements when the button is clicked.', 'Demonstrates practical application of JavaScript in styling elements.', 'The z-index is set to 1000 for the header to ensure it is on top.', 'Styling the menu with CSS properties and custom variables The menu is styled using CSS properties like position, width, height, and flexbox, and custom properties (variables) are used for color values.', 'Adjusts background properties to create a close button, showcasing customization.', 'The styling process includes the use of the Poppins font with various font weights and the universal selector for resetting margins and padding.', 'The showcase is positioned absolute with a width of 100 percent and a minimum height of 100 VH, excluding the menu.']}