title
How To Make a Slide Out Navigation with HTML/CSS (No JavaScript)

description
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse

detail
{'title': 'How To Make a Slide Out Navigation with HTML/CSS (No JavaScript)', 'heatmap': [{'end': 213.366, 'start': 182.792, 'weight': 0.716}, {'end': 552.458, 'start': 535.012, 'weight': 0.788}, {'end': 602.956, 'start': 563.398, 'weight': 0.862}, {'end': 1138.854, 'start': 1050.725, 'weight': 0.883}, {'end': 1274.201, 'start': 1237.537, 'weight': 0.821}], 'summary': 'Learn to create and style a slide-out navigation using html and css, including sass for sidebar styling, anti-aliasing for web fonts, checkbox-label relationships, sidebar toggler creation, and engaging video announcements with stylish page transitions and responsive sidebar.', 'chapters': [{'end': 452.161, 'segs': [{'end': 115.703, 'src': 'embed', 'start': 76.332, 'weight': 0, 'content': [{'end': 77.693, 'text': "So here's a nice site for you to look at.", 'start': 76.332, 'duration': 1.361}, {'end': 84.098, 'text': 'What I did though is I went in behind, added this little navigation that slides out when you click this button here.', 'start': 77.753, 'duration': 6.345}, {'end': 90.703, 'text': "And that's what I'm going to teach you guys today, how to make this slide out navigation functionality, but without using any JavaScript.", 'start': 84.118, 'duration': 6.585}, {'end': 101.692, 'text': "So I've already done it, but I'm going to go in here and I'm going to erase all the things I did so that we can start from a clean slate.", 'start': 90.983, 'duration': 10.709}, {'end': 115.703, 'text': "Okay, so basically what you see here is the blog and then I put it into a div called page content and it's inside the body.", 'start': 106.354, 'duration': 9.349}], 'summary': 'Creating slide-out navigation without javascript, demonstrated through erasing and starting from scratch.', 'duration': 39.371, 'max_score': 76.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs76332.jpg'}, {'end': 178.37, 'src': 'embed', 'start': 120.347, 'weight': 1, 'content': [{'end': 127.073, 'text': 'So if I were gonna start from scratch and add the sidebar, the first thing I would need to do is literally just to add the markup for the sidebar.', 'start': 120.347, 'duration': 6.726}, {'end': 129.795, 'text': "So I'm gonna do that right now in a div.", 'start': 127.113, 'duration': 2.682}, {'end': 134.214, 'text': 'cleverly named sidebar.', 'start': 132.093, 'duration': 2.121}, {'end': 144.938, 'text': 'Sidebar And then this div is gonna be filled with just a bunch of list items.', 'start': 134.954, 'duration': 9.984}, {'end': 149.239, 'text': "I'm gonna call it home.", 'start': 145.018, 'duration': 4.221}, {'end': 159.623, 'text': 'Home projects.', 'start': 157.182, 'duration': 2.441}, {'end': 176.089, 'text': 'clients, blog, and contact.', 'start': 168.766, 'duration': 7.323}, {'end': 178.37, 'text': "Let's see what we got.", 'start': 177.63, 'duration': 0.74}], 'summary': "To add a sidebar, markup for the sidebar is added in a div, named 'sidebar', filled with list items including home, projects, clients, blog, and contact.", 'duration': 58.023, 'max_score': 120.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs120347.jpg'}, {'end': 234.097, 'src': 'heatmap', 'start': 182.792, 'weight': 2, 'content': [{'end': 185.753, 'text': "So if I scroll all the way down here, I'll see my sidebar.", 'start': 182.792, 'duration': 2.961}, {'end': 188.295, 'text': 'Home, projects, clients, blog, contact.', 'start': 186.154, 'duration': 2.141}, {'end': 191.996, 'text': "First thing we're going to do in our stats actually is at import urban.", 'start': 188.895, 'duration': 3.101}, {'end': 197.319, 'text': "If you're not familiar, I use a..", 'start': 194.857, 'duration': 2.462}, {'end': 207.059, 'text': 'a SAS framework called Bourbon, and it is super fantabulous.', 'start': 198.991, 'duration': 8.068}, {'end': 213.366, 'text': 'It has all these awesome functions and mix-ins, and a lot of the coolest things are down here, the add-ons.', 'start': 207.66, 'duration': 5.706}, {'end': 215.728, 'text': 'Like they do a really cool clear fix.', 'start': 213.846, 'duration': 1.882}, {'end': 224.811, 'text': "One of my favorites is like just position, like you can write a really interesting mix-in and it'll take care of all the positioning.", 'start': 216.149, 'duration': 8.662}, {'end': 227.253, 'text': 'So I always include Bourbon.', 'start': 225.252, 'duration': 2.001}, {'end': 234.097, 'text': "It doesn't add any weight to your exported project, but it adds a lot of handy tools and mix-ins to use if you're using SAS or SCSS.", 'start': 227.293, 'duration': 6.804}], 'summary': 'Using bourbon sas framework for web development, providing handy tools and mix-ins without adding weight to the project.', 'duration': 51.305, 'max_score': 182.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs182792.jpg'}, {'end': 318.968, 'src': 'embed', 'start': 289.799, 'weight': 3, 'content': [{'end': 292.401, 'text': "So I'm just going to do a really quick styling here.", 'start': 289.799, 'duration': 2.602}, {'end': 296.204, 'text': 'I actually want the position to be, this is a bourbon mix-in.', 'start': 292.861, 'duration': 3.343}, {'end': 299.943, 'text': 'And you can do position fixed.', 'start': 297.782, 'duration': 2.161}, {'end': 305.824, 'text': 'And then you name the top left, right, and bottom in that order.', 'start': 301.083, 'duration': 4.741}, {'end': 307.845, 'text': "So we're going to say top 0 pixels.", 'start': 305.884, 'duration': 1.961}, {'end': 309.425, 'text': "Right, I don't care.", 'start': 308.525, 'duration': 0.9}, {'end': 313.246, 'text': 'And if I just write 0 with nothing behind it, that means nothing is there.', 'start': 309.445, 'duration': 3.801}, {'end': 318.968, 'text': '0 pixels bottom and 0 pixels left.', 'start': 313.266, 'duration': 5.702}], 'summary': 'Styling includes bourbon mix-in with position fixed, setting top, right, bottom, and left to 0 pixels.', 'duration': 29.169, 'max_score': 289.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs289799.jpg'}, {'end': 452.161, 'src': 'embed', 'start': 368.706, 'weight': 4, 'content': [{'end': 377.936, 'text': 'a little transparent, make it white, but just a little transparent so I can have a, you know, kind of a pleasing rollover effect when I do that.', 'start': 368.706, 'duration': 9.23}, {'end': 383.042, 'text': 'So 255 in red, green, blue with a 0.8.', 'start': 377.956, 'duration': 5.086}, {'end': 387.607, 'text': 'And then when I do and hover, RGBA.', 'start': 383.042, 'duration': 4.565}, {'end': 398.392, 'text': '5255, where that means white, and then make it fully opaque so that outside.', 'start': 392.01, 'duration': 6.382}, {'end': 402.473, 'text': 'oh yeah, it needs to be colored okay.', 'start': 398.392, 'duration': 4.081}, {'end': 408.395, 'text': 'so these guys will be, yeah, not quite white, and then roll over and they get nice bright.', 'start': 402.473, 'duration': 5.922}, {'end': 418.538, 'text': "okay, that's what I wanted, and I also wanted these guys to be.", 'start': 408.395, 'duration': 10.143}, {'end': 425.956, 'text': 'what is this font Ubuntu?', 'start': 418.538, 'duration': 7.418}, {'end': 430.117, 'text': 'Keep it in the family.', 'start': 429.277, 'duration': 0.84}, {'end': 437.638, 'text': "And font size, let's make it 18, no, 16 pixels.", 'start': 431.317, 'duration': 6.321}, {'end': 445.54, 'text': 'And margin, bottom, 16 pixels.', 'start': 439.539, 'duration': 6.001}, {'end': 448.9, 'text': "How's that look? Ooh, that's starting to look nice.", 'start': 446.82, 'duration': 2.08}, {'end': 452.161, 'text': "I'm gonna turn down that alias.", 'start': 448.92, 'duration': 3.241}], 'summary': 'Styling the elements with rgba and adjusting font size and margin for a pleasing rollover effect.', 'duration': 83.455, 'max_score': 368.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs368706.jpg'}], 'start': 0.329, 'title': 'Creating and styling slide-out navigation', 'summary': 'Covers creating a slide-out navigation using html and css and styling a slide-out sidebar using sass, demonstrating the process, features, and styling aspects such as position, width, padding, color, and font size.', 'chapters': [{'end': 227.253, 'start': 0.329, 'title': 'Slide out navigation without javascript', 'summary': 'Discusses creating a slide-out navigation functionality using html and css exclusively, demonstrating the process and its features.', 'duration': 226.924, 'highlights': ['The chapter introduces creating a slide-out navigation functionality using exclusively HTML and CSS. Demonstrates how to create a slide-out navigation without using JavaScript, emphasizing the use of HTML and CSS.', "The presenter showcases adding a sidebar with a list of items within a div named 'sidebar'. Shows the process of adding a sidebar with list items named home, projects, clients, blog, and contact within a div named 'sidebar'.", 'The presenter discusses the use of a SAS framework called Bourbon for adding functions and mix-ins. Explains the use of the SAS framework called Bourbon, highlighting its functions, mix-ins, and add-ons for enhancing the design.']}, {'end': 452.161, 'start': 227.293, 'title': 'Styling slide-out sidebar in sass', 'summary': 'Covers styling a slide-out sidebar using sass, including setting the position, width, padding, color, and font size while achieving a pleasing rollover effect.', 'duration': 224.868, 'highlights': ['Setting position and dimensions: The speaker sets the position of the sidebar using a bourbon mix-in with a fixed position and defines the top, right, bottom, and left dimensions, achieving a slide-out effect.', 'Styling color and rollover effect: The speaker adjusts the color of the sidebar to white with slight transparency and creates a pleasing rollover effect using RGBA values for hover, maintaining a consistent font and size for a cohesive design.', "Adjusting font and margin: The speaker specifies the font as 'Ubuntu' and sets the font size to 16 pixels, as well as a 16-pixel bottom margin to enhance the appearance of the slide-out sidebar."]}], 'duration': 451.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs329.jpg', 'highlights': ['The chapter introduces creating a slide-out navigation using exclusively HTML and CSS.', "The presenter showcases adding a sidebar with a list of items within a div named 'sidebar'.", 'The presenter discusses the use of a SAS framework called Bourbon for adding functions and mix-ins.', 'Setting position and dimensions: The speaker sets the position of the sidebar using a bourbon mix-in with a fixed position and defines the top, right, bottom, and left dimensions, achieving a slide-out effect.', 'Styling color and rollover effect: The speaker adjusts the color of the sidebar to white with slight transparency and creates a pleasing rollover effect using RGBA values for hover, maintaining a consistent font and size for a cohesive design.', "Adjusting font and margin: The speaker specifies the font as 'Ubuntu' and sets the font size to 16 pixels, as well as a 16-pixel bottom margin to enhance the appearance of the slide-out sidebar."]}, {'end': 673.544, 'segs': [{'end': 559.696, 'src': 'heatmap', 'start': 535.012, 'weight': 0, 'content': [{'end': 539.194, 'text': "and then all you have to do is click on it and it's copied into your clipboard and you can paste wherever you like.", 'start': 535.012, 'duration': 4.182}, {'end': 541.974, 'text': "So I'm gonna grab a cool menu-looking button.", 'start': 539.254, 'duration': 2.72}, {'end': 542.515, 'text': 'There we go.', 'start': 542.034, 'duration': 0.481}, {'end': 548.416, 'text': "Okay, actually let's put these to class page-wrap.", 'start': 543.695, 'duration': 4.721}, {'end': 552.458, 'text': "All right, we've got our page content, we've got our sidebar.", 'start': 548.736, 'duration': 3.722}, {'end': 556.439, 'text': 'We need to wrap them both in something that we can depend on.', 'start': 552.478, 'duration': 3.961}, {'end': 559.696, 'text': "Okay And then it don't want to print this.", 'start': 557.475, 'duration': 2.221}], 'summary': 'Demonstrates copying and pasting using a menu button for website design.', 'duration': 104.778, 'max_score': 535.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs535012.jpg'}, {'end': 640.012, 'src': 'heatmap', 'start': 563.398, 'weight': 3, 'content': [{'end': 571.622, 'text': 'So you would normally do like this anchor H ref and then nothing class toggle.', 'start': 563.398, 'duration': 8.224}, {'end': 582.687, 'text': 'Oops And then have like a little anchor button there and hits up here.', 'start': 571.642, 'duration': 11.045}, {'end': 585.389, 'text': 'You can see it make a little bit of noise.', 'start': 582.727, 'duration': 2.662}, {'end': 585.889, 'text': "Let's hide.", 'start': 585.409, 'duration': 0.48}, {'end': 588.531, 'text': 'Hide this sidebar.', 'start': 587.571, 'duration': 0.96}, {'end': 591.972, 'text': 'Display, none.', 'start': 590.272, 'duration': 1.7}, {'end': 595.714, 'text': "Okay, you see that little guy up there? That's gonna be our anchor.", 'start': 592.392, 'duration': 3.322}, {'end': 598.794, 'text': 'So let me do a few quick styles on him.', 'start': 596.494, 'duration': 2.3}, {'end': 602.956, 'text': 'Wherever you are.', 'start': 602.155, 'duration': 0.801}, {'end': 606.517, 'text': 'And I called it toggle, I think, right? Class toggle.', 'start': 602.976, 'duration': 3.541}, {'end': 611.278, 'text': 'Toggle, okay.', 'start': 609.478, 'duration': 1.8}, {'end': 616.7, 'text': 'Position is I-T-I-O-N.', 'start': 613.199, 'duration': 3.501}, {'end': 630.905, 'text': 'absolute. actually, I want to make it fixed so that when you scroll down, it will scroll with my sidebar 20 pixels from the top, 0 pixels from the right,', 'start': 618.336, 'duration': 12.569}, {'end': 632.526, 'text': '0 pixels or not?', 'start': 630.905, 'duration': 1.621}, {'end': 638.391, 'text': '0 pixels, but no undefined pixels from the right, undefined pixels from the bottom.', 'start': 632.526, 'duration': 5.865}, {'end': 640.012, 'text': 'and what is this?', 'start': 638.391, 'duration': 1.621}], 'summary': "Styling an anchor button named 'toggle' as fixed, 20px from top, 0 from right, and undefined from the bottom.", 'duration': 37.857, 'max_score': 563.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs563398.jpg'}], 'start': 454.918, 'title': 'Web font and menu-looking button', 'summary': "Covers adding anti-aliasing to web fonts and setting cursor pointer for a sidebar link, emphasizing the use of the 'toggle' link, as well as creating a menu-looking button using unicode characters and applying specific css styles.", 'chapters': [{'end': 516.269, 'start': 454.918, 'title': 'Web font anti-aliasing and cursor pointer', 'summary': "Covers adding anti-aliasing to web fonts and setting cursor pointer for a sidebar link, emphasizing the use of the 'toggle' link to change the sidebar class upon click.", 'duration': 61.351, 'highlights': ["The chapter emphasizes adding anti-aliasing to web fonts for a crisp look, using the 'WebKit font smoothing' property.", 'It also highlights the importance of setting cursor pointer to make a sidebar look like a link.', "The tutorial mentions the 'toggle' link as the hook for JavaScript to change the class of the sidebar upon click."]}, {'end': 673.544, 'start': 516.308, 'title': 'Creating menu-looking button with unicode characters', 'summary': 'Details the process of creating a menu-looking button using unicode characters and applying specific css styles, such as position and pixel measurements, to achieve the desired look and functionality.', 'duration': 157.236, 'highlights': ["The speaker demonstrates the use of the website 'copy paste character' to select Unicode characters for the button, promoting efficiency in obtaining the desired symbols for web design.", "Specific CSS styling is applied to the button, including 'position: fixed' and precise pixel measurements, ensuring the button's placement and behavior on the webpage.", 'The chapter emphasizes the importance of wrapping page content and sidebar elements in a dependable container for effective design and functionality.']}], 'duration': 218.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs454918.jpg', 'highlights': ["The tutorial emphasizes adding anti-aliasing to web fonts for a crisp look, using the 'WebKit font smoothing' property.", "The speaker demonstrates the use of the website 'copy paste character' to select Unicode characters for the button, promoting efficiency in obtaining the desired symbols for web design.", 'It also highlights the importance of setting cursor pointer to make a sidebar look like a link.', "Specific CSS styling is applied to the button, including 'position: fixed' and precise pixel measurements, ensuring the button's placement and behavior on the webpage.", 'The chapter emphasizes the importance of wrapping page content and sidebar elements in a dependable container for effective design and functionality.', "The tutorial mentions the 'toggle' link as the hook for JavaScript to change the class of the sidebar upon click."]}, {'end': 916.915, 'segs': [{'end': 765.454, 'src': 'embed', 'start': 714.256, 'weight': 3, 'content': [{'end': 718.479, 'text': 'Okay, so now again with the JavaScript, we would use this anchor to..', 'start': 714.256, 'duration': 4.223}, {'end': 728.247, 'text': 'to say, you know, when this link is clicked, we toggle the class on and off.', 'start': 721.42, 'duration': 6.827}, {'end': 735.334, 'text': "But what I want to do, and this is kind of where we're diverging here, is I want to take a minute to talk about something completely different.", 'start': 728.927, 'duration': 6.407}, {'end': 742.12, 'text': "I want to talk about checkboxes because we're using checkboxes to control the state of this sidebar.", 'start': 735.354, 'duration': 6.766}, {'end': 745.684, 'text': "Is it open or is it not? Is the checkbox checked or is it not? And I'll show you how that's done.", 'start': 742.2, 'duration': 3.484}, {'end': 748.826, 'text': "So let's learn about checkboxes.", 'start': 747.085, 'duration': 1.741}, {'end': 755.209, 'text': 'The first thing to understand about checkboxes is the relationship that checkboxes have to their labels.', 'start': 749.426, 'duration': 5.783}, {'end': 758.931, 'text': 'So here we have a few examples.', 'start': 755.909, 'duration': 3.022}, {'end': 760.872, 'text': 'The first one is right here.', 'start': 759.071, 'duration': 1.801}, {'end': 765.454, 'text': 'Input, checkbox, and then following it is a label.', 'start': 761.152, 'duration': 4.302}], 'summary': 'Using javascript to toggle class on link click and controlling sidebar state with checkboxes.', 'duration': 51.198, 'max_score': 714.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs714256.jpg'}, {'end': 916.915, 'src': 'embed', 'start': 862.533, 'weight': 0, 'content': [{'end': 864.274, 'text': 'The checkbox is called surprise.', 'start': 862.533, 'duration': 1.741}, {'end': 875.096, 'text': 'The label has a for attribute of surprise so that when I click the label, the checkbox will receive it.', 'start': 864.694, 'duration': 10.402}, {'end': 877.436, 'text': 'It will receive that check state.', 'start': 876.096, 'duration': 1.34}, {'end': 878.756, 'text': "Now here's the key.", 'start': 877.776, 'duration': 0.98}, {'end': 885.578, 'text': 'In CSS, you can use a pseudo element of a checked.', 'start': 879.257, 'duration': 6.321}, {'end': 887.038, 'text': 'Let me show you how that works.', 'start': 885.798, 'duration': 1.24}, {'end': 899.502, 'text': 'Here we are.', 'start': 896.96, 'duration': 2.542}, {'end': 910.09, 'text': 'Okay, if I have an element and then a pseudo element of checked, it will apply the styles only if the element is a checkbox that is checked.', 'start': 899.902, 'duration': 10.188}, {'end': 916.915, 'text': "So we're going to use that as a way to change the state of that slide out menu and here's how it's going to work.", 'start': 910.45, 'duration': 6.465}], 'summary': 'Using css pseudo element checked to change checkbox state for slide out menu.', 'duration': 54.382, 'max_score': 862.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs862533.jpg'}], 'start': 673.704, 'title': 'Checkbox styling and control', 'summary': 'Covers checkbox-label relationships, connecting them using nesting and attributes, z-index, javascript class toggling, and using css pseudo elements to change checkbox states, with a focus on checked state styling.', 'chapters': [{'end': 862.513, 'start': 673.704, 'title': 'Checkbox relationship and control', 'summary': 'Discusses the relationship between checkboxes and labels, demonstrating how to connect them using nesting and attributes, and also touches on z-index and javascript class toggling.', 'duration': 188.809, 'highlights': ['The relationship between checkboxes and labels is explained, with examples of nesting the checkbox inside the label and using attributes to connect them.', 'The chapter also discusses z-index and JavaScript class toggling, with a focus on modifying the appearance of links and controlling the state of a sidebar using checkboxes.']}, {'end': 916.915, 'start': 862.533, 'title': 'Using pseudo element for checkbox state', 'summary': 'Explains how to use a pseudo element in css to change the state of a checkbox, with a specific focus on applying styles when the checkbox is checked.', 'duration': 54.382, 'highlights': ['The checkbox is called surprise, and the label has a for attribute of surprise, enabling the checkbox to receive the check state when the label is clicked.', 'In CSS, a pseudo element of checked can be used to apply styles only if the element is a checked checkbox.', 'The chapter focuses on using a pseudo element to change the state of a slide-out menu when the checkbox is checked.']}], 'duration': 243.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs673704.jpg', 'highlights': ['The chapter focuses on using a pseudo element to change the state of a slide-out menu when the checkbox is checked.', 'In CSS, a pseudo element of checked can be used to apply styles only if the element is a checked checkbox.', 'The checkbox is called surprise, and the label has a for attribute of surprise, enabling the checkbox to receive the check state when the label is clicked.', 'The relationship between checkboxes and labels is explained, with examples of nesting the checkbox inside the label and using attributes to connect them.', 'The chapter also discusses z-index and JavaScript class toggling, with a focus on modifying the appearance of links and controlling the state of a sidebar using checkboxes.']}, {'end': 1301.832, 'segs': [{'end': 1006.276, 'src': 'embed', 'start': 952.651, 'weight': 0, 'content': [{'end': 957.81, 'text': "sidebar toggler, and then I'm gonna go in here and I'm gonna change this anchor to label.", 'start': 952.651, 'duration': 5.159}, {'end': 968.03, 'text': 'And then the ref becomes the for, and then I want to reference the sidebar toggler.', 'start': 962.048, 'duration': 5.982}, {'end': 971.091, 'text': 'Sidebar toggler.', 'start': 968.51, 'duration': 2.581}, {'end': 973.632, 'text': 'This can be any name you like.', 'start': 971.391, 'duration': 2.241}, {'end': 974.932, 'text': 'It could be surprise.', 'start': 974.052, 'duration': 0.88}, {'end': 976.152, 'text': 'It could be sidebar toggler.', 'start': 974.952, 'duration': 1.2}, {'end': 976.913, 'text': "It doesn't matter.", 'start': 976.312, 'duration': 0.601}, {'end': 989.236, 'text': "The point is that this for is going to match this ID, and that when I click on the label, it's going to tick and untick the box.", 'start': 976.933, 'duration': 12.303}, {'end': 993.771, 'text': 'So let me get rid of this sidebar so you can You can see that happening.', 'start': 989.276, 'duration': 4.495}, {'end': 997.353, 'text': 'Explain none.', 'start': 995.952, 'duration': 1.401}, {'end': 1001.394, 'text': 'You see that tick box up there? Watch what happens when I click the label.', 'start': 997.993, 'duration': 3.401}, {'end': 1003.355, 'text': "It's checked and unchecked.", 'start': 1002.354, 'duration': 1.001}, {'end': 1004.895, 'text': "Now that's fantastic.", 'start': 1003.695, 'duration': 1.2}, {'end': 1006.276, 'text': 'That is great.', 'start': 1005.455, 'duration': 0.821}], 'summary': 'Changing anchor to label toggles sidebar box on click.', 'duration': 53.625, 'max_score': 952.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs952651.jpg'}, {'end': 1162.494, 'src': 'heatmap', 'start': 1050.725, 'weight': 3, 'content': [{'end': 1054.927, 'text': 'Now the page wrap is the parent of both the content and the sidebar.', 'start': 1050.725, 'duration': 4.202}, {'end': 1056.843, 'text': 'and the label.', 'start': 1056.283, 'duration': 0.56}, {'end': 1061.865, 'text': 'So what I need to do is I need to find a way to navigate the DOM with my CSS.', 'start': 1057.263, 'duration': 4.602}, {'end': 1064.906, 'text': "I'm going to use a pretty complicated selector.", 'start': 1061.965, 'duration': 2.941}, {'end': 1074.889, 'text': "So I'm going to say in the case of the sidebar toggler being checked, look at its sibling.", 'start': 1065.446, 'duration': 9.443}, {'end': 1078.15, 'text': 'And what did I call it? Page wrap.', 'start': 1075.729, 'duration': 2.421}, {'end': 1087.498, 'text': "And let's go from there.", 'start': 1085.437, 'duration': 2.061}, {'end': 1101.521, 'text': "So after page wrap, let's take this sidebar and say it should be left 0 pixels because that's going to be the out state.", 'start': 1087.598, 'duration': 13.923}, {'end': 1103.021, 'text': "We're going to look at all of these things.", 'start': 1101.541, 'duration': 1.48}, {'end': 1106.662, 'text': "I want to say what's going to be the state of it being slid out.", 'start': 1103.041, 'duration': 3.621}, {'end': 1116.239, 'text': 'And then I want to change this to negative 180.', 'start': 1107.562, 'duration': 8.677}, {'end': 1116.92, 'text': 'negative 190, I think.', 'start': 1116.239, 'duration': 0.681}, {'end': 1120.942, 'text': "Okay, so let's take a look.", 'start': 1119.301, 'duration': 1.641}, {'end': 1122.283, 'text': 'All right.', 'start': 1121.663, 'duration': 0.62}, {'end': 1128.347, 'text': "so when I click this toggler, what's happening is it's traversing the DOM and finding that sidebar and saying oh, you know,", 'start': 1122.283, 'duration': 6.064}, {'end': 1132.27, 'text': 'during the state that this tick box is ticked, this sidebar should be left zero.', 'start': 1128.347, 'duration': 3.923}, {'end': 1138.854, 'text': "If it's not ticked, watch, I uncheck it, the sidebar is left negative 190 pixels.", 'start': 1132.57, 'duration': 6.284}, {'end': 1154.252, 'text': "So let's make some accommodations here If the sidebar is checked, the toggle needs to be in its out state, which is gonna be left 200 pixels.", 'start': 1139.034, 'duration': 15.218}, {'end': 1157.272, 'text': 'And this needs to be 20.', 'start': 1155.492, 'duration': 1.78}, {'end': 1160.253, 'text': "So I'm gonna check it out.", 'start': 1157.272, 'duration': 2.981}, {'end': 1161.933, 'text': "Yeah, so it's gonna move with it.", 'start': 1160.473, 'duration': 1.46}, {'end': 1162.494, 'text': "That's good.", 'start': 1162.053, 'duration': 0.441}], 'summary': 'Using css to navigate the dom and control sidebar toggling based on checkbox state.', 'duration': 29.924, 'max_score': 1050.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs1050725.jpg'}, {'end': 1277.905, 'src': 'heatmap', 'start': 1228.217, 'weight': 5, 'content': [{'end': 1230.138, 'text': 'Sidebar, I want to transition that too.', 'start': 1228.217, 'duration': 1.921}, {'end': 1235.876, 'text': 'Uh, so with the toggle and the sidebar to both kind of move in and out like that.', 'start': 1231.492, 'duration': 4.384}, {'end': 1237.317, 'text': "So let's take a look.", 'start': 1235.956, 'duration': 1.361}, {'end': 1242.662, 'text': "Oh yes, that is nice and soft, but we're still seeing this body jump.", 'start': 1237.537, 'duration': 5.125}, {'end': 1247.305, 'text': "So let's go to the page index and put that transition on to see if that's smoother.", 'start': 1242.682, 'duration': 4.623}, {'end': 1248.146, 'text': 'Oh yes.', 'start': 1247.686, 'duration': 0.46}, {'end': 1249.587, 'text': 'Much, much smoother.', 'start': 1248.306, 'duration': 1.281}, {'end': 1253.17, 'text': 'Cool Now I want the default state to be unchecked.', 'start': 1249.767, 'duration': 3.403}, {'end': 1254.391, 'text': "So I'm gonna go to my toggle.", 'start': 1253.27, 'duration': 1.121}, {'end': 1258.775, 'text': 'Okay So when I write, okay, cool.', 'start': 1256.153, 'duration': 2.622}, {'end': 1260.116, 'text': 'So when I show up.', 'start': 1259.455, 'duration': 0.661}, {'end': 1262.791, 'text': "I'm going to be able to do this.", 'start': 1261.209, 'duration': 1.582}, {'end': 1265.253, 'text': 'Yeah, cool.', 'start': 1264.552, 'duration': 0.701}, {'end': 1266.234, 'text': 'Cool, cool, cool.', 'start': 1265.593, 'duration': 0.641}, {'end': 1268.876, 'text': 'So look, this is the magic.', 'start': 1266.634, 'duration': 2.242}, {'end': 1274.201, 'text': 'These 10 lines of code, these seven lines of code, wherever they are, this is the magic.', 'start': 1269.477, 'duration': 4.724}, {'end': 1277.905, 'text': "We don't have to do any JavaScript to do this.", 'start': 1274.241, 'duration': 3.664}], 'summary': 'Implemented smooth transition for sidebar toggle, improving user experience.', 'duration': 49.688, 'max_score': 1228.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs1228217.jpg'}, {'end': 1313.68, 'src': 'embed', 'start': 1279.526, 'weight': 4, 'content': [{'end': 1283.35, 'text': "We're being smart about how we're checking the states, and I really like this.", 'start': 1279.526, 'duration': 3.824}, {'end': 1284.211, 'text': 'This is good.', 'start': 1283.73, 'duration': 0.481}, {'end': 1291.765, 'text': "Now the things that we've discussed here are not necessarily new per se.", 'start': 1288.083, 'duration': 3.682}, {'end': 1299.411, 'text': 'The selectors and elements have been around for actually quite a while, but the approach is very clever and I really liked that.', 'start': 1292.286, 'duration': 7.125}, {'end': 1300.391, 'text': 'So I wanted to share it.', 'start': 1299.451, 'duration': 0.94}, {'end': 1301.832, 'text': "Okay guys, that's it for today.", 'start': 1300.531, 'duration': 1.301}, {'end': 1304.694, 'text': "I'm very excited that you've watched the video all the way.", 'start': 1302.012, 'duration': 2.682}, {'end': 1313.68, 'text': "If you have any questions or comments, leave them down in the tickety tickety below and I'll be monitoring these comments and responding throughout.", 'start': 1304.734, 'duration': 8.946}], 'summary': 'Discussion on smart state checking and sharing clever approach. excited for audience feedback.', 'duration': 34.154, 'max_score': 1279.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs1279526.jpg'}], 'start': 916.935, 'title': 'Creating sidebar toggler and css implementation', 'summary': 'Covers the creation of a sidebar toggler using checkbox and label, providing visual demonstration, as well as using css to achieve smooth transition with specified pixel dimensions.', 'chapters': [{'end': 1006.276, 'start': 916.935, 'title': 'Creating checkbox and label for sidebar toggler', 'summary': 'Explains the process of creating a sidebar toggler using checkbox and label, where clicking the label toggles the checkbox, providing a visual demonstration of the functionality.', 'duration': 89.341, 'highlights': ['The for attribute in the label tag is used to reference the sidebar toggler, allowing it to match the ID of the checkbox, enabling the label to toggle the checkbox. This demonstrates the key relationship between the label and the checkbox.', "The process involves using input type checkbox and changing the anchor to a label with the 'for' attribute referencing the sidebar toggler, enabling the label to toggle the checkbox. This showcases the step-by-step process of creating the sidebar toggler using checkbox and label.", 'The functionality is visually demonstrated, showing the checkbox being ticked and unticked upon clicking the label, highlighting the practical application and effectiveness of the created sidebar toggler.']}, {'end': 1301.832, 'start': 1006.356, 'title': 'Css sidebar toggle', 'summary': 'Discusses using css to create a sidebar toggle functionality, where upon checking the tick box, the sidebar slides out to the left by 200 pixels and the content is padded by 180 pixels, achieving smooth transition and entirely controlled by css.', 'duration': 295.476, 'highlights': ['Creating a sidebar toggle functionality using CSS The chapter discusses using CSS to create a sidebar toggle functionality, where upon checking the tick box, the sidebar slides out to the left by 200 pixels and the content is padded by 180 pixels.', 'Smooth transition controlled entirely by CSS The transition of the sidebar and toggle is achieved through CSS, resulting in a smooth transition without the need for JavaScript.', 'Clever approach to checking states using CSS The chapter presents a clever approach to checking the states of the sidebar toggle entirely using CSS selectors and elements, eliminating the need for JavaScript.']}], 'duration': 384.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs916935.jpg', 'highlights': ["The process involves using input type checkbox and changing the anchor to a label with the 'for' attribute referencing the sidebar toggler, enabling the label to toggle the checkbox. This showcases the step-by-step process of creating the sidebar toggler using checkbox and label.", 'The for attribute in the label tag is used to reference the sidebar toggler, allowing it to match the ID of the checkbox, enabling the label to toggle the checkbox. This demonstrates the key relationship between the label and the checkbox.', 'The functionality is visually demonstrated, showing the checkbox being ticked and unticked upon clicking the label, highlighting the practical application and effectiveness of the created sidebar toggler.', 'Creating a sidebar toggle functionality using CSS The chapter discusses using CSS to create a sidebar toggle functionality, where upon checking the tick box, the sidebar slides out to the left by 200 pixels and the content is padded by 180 pixels.', 'Clever approach to checking states using CSS The chapter presents a clever approach to checking the states of the sidebar toggle entirely using CSS selectors and elements, eliminating the need for JavaScript.', 'Smooth transition controlled entirely by CSS The transition of the sidebar and toggle is achieved through CSS, resulting in a smooth transition without the need for JavaScript.']}, {'end': 1671.947, 'segs': [{'end': 1331.453, 'src': 'embed', 'start': 1302.012, 'weight': 0, 'content': [{'end': 1304.694, 'text': "I'm very excited that you've watched the video all the way.", 'start': 1302.012, 'duration': 2.682}, {'end': 1313.68, 'text': "If you have any questions or comments, leave them down in the tickety tickety below and I'll be monitoring these comments and responding throughout.", 'start': 1304.734, 'duration': 8.946}, {'end': 1318.243, 'text': "Now I'll also be posting a new video on this channel every first Monday of the month.", 'start': 1313.82, 'duration': 4.423}, {'end': 1320.905, 'text': 'Think of it as a guest column.', 'start': 1318.784, 'duration': 2.121}, {'end': 1325.549, 'text': "And if you haven't gotten enough of this guy, you can check out my channel called DevTips.", 'start': 1321.205, 'duration': 4.344}, {'end': 1331.453, 'text': 'I post a new video every Monday and the link is also in the descriptions below.', 'start': 1325.569, 'duration': 5.884}], 'summary': 'New videos posted every first monday of the month, with additional content available on devtips channel.', 'duration': 29.441, 'max_score': 1302.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs1302012.jpg'}, {'end': 1404.91, 'src': 'embed', 'start': 1338.62, 'weight': 1, 'content': [{'end': 1346.592, 'text': 'And if you did enjoy it, if you did learn something, please, please, please share it with your friends or your mom because I heard she likes to code.', 'start': 1338.62, 'duration': 7.972}, {'end': 1358.251, 'text': 'that was a lot of fun, but i i just thought of another cool thing that we could do here.', 'start': 1353.988, 'duration': 4.263}, {'end': 1361.893, 'text': 'maybe add just a little bit more flair, and i just want to share that with you.', 'start': 1358.251, 'duration': 3.642}, {'end': 1364.074, 'text': 'the video is officially over.', 'start': 1361.893, 'duration': 2.181}, {'end': 1368.157, 'text': 'if you have watched up to this point, you have successfully watched the video.', 'start': 1364.074, 'duration': 4.083}, {'end': 1375.061, 'text': "i understand if you want to quit, but if you want to stick around for just a little bit more, i'm going to take this uh little cool,", 'start': 1368.157, 'duration': 6.904}, {'end': 1376.742, 'text': 'slide out up to a level 10..', 'start': 1375.061, 'duration': 1.681}, {'end': 1379.484, 'text': "it's going to be pretty cool and jazzy.", 'start': 1376.742, 'duration': 2.742}, {'end': 1380.705, 'text': 'jazzy is a word.', 'start': 1379.484, 'duration': 1.221}, {'end': 1382.446, 'text': "okay, let's start.", 'start': 1380.705, 'duration': 1.741}, {'end': 1392.119, 'text': "um, Now I'm noticing here, when I've written the markup, that the sidebar toggler, which is the button and the page content itself,", 'start': 1382.446, 'duration': 9.673}, {'end': 1397.324, 'text': 'and the sidebar are all three separate and distinct HTML notes, which is interesting.', 'start': 1392.119, 'duration': 5.205}, {'end': 1402.909, 'text': 'They operate interdependent of each other, even though they look, you know, styled, styled together.', 'start': 1397.344, 'duration': 5.565}, {'end': 1404.91, 'text': 'And we can use this to our advantage.', 'start': 1403.269, 'duration': 1.641}], 'summary': 'Transcript covers coding concepts and encourages sharing; mentions interdependent html elements', 'duration': 66.29, 'max_score': 1338.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs1338620.jpg'}, {'end': 1527.673, 'src': 'embed', 'start': 1469.927, 'weight': 4, 'content': [{'end': 1485.196, 'text': "So let's take this page content and not do the padding left.", 'start': 1469.927, 'duration': 15.269}, {'end': 1488.678, 'text': 'I want it to be really drastic.', 'start': 1485.476, 'duration': 3.202}, {'end': 1489.238, 'text': 'So transition.', 'start': 1488.698, 'duration': 0.54}, {'end': 1495.311, 'text': 'No, not transition, transform.', 'start': 1493.65, 'duration': 1.661}, {'end': 1500.454, 'text': 'Transform scale.', 'start': 1498.693, 'duration': 1.761}, {'end': 1506.517, 'text': 'And I want it to scale to 0.7.', 'start': 1505.236, 'duration': 1.281}, {'end': 1512.64, 'text': "And I'm going to put this same code at the top so it has a reference point.", 'start': 1506.517, 'duration': 6.123}, {'end': 1520.824, 'text': "It's page content scale of 1.", 'start': 1512.68, 'duration': 8.144}, {'end': 1522.045, 'text': "And it's going to shrink, hopefully.", 'start': 1520.824, 'duration': 1.221}, {'end': 1525.631, 'text': 'Yep, whoa! Check that out.', 'start': 1522.267, 'duration': 3.364}, {'end': 1527.673, 'text': 'Okay, so a few things here.', 'start': 1526.392, 'duration': 1.281}], 'summary': 'Page content is scaled to 0.7, demonstrating a drastic transformation.', 'duration': 57.746, 'max_score': 1469.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs1469927.jpg'}], 'start': 1302.012, 'title': 'Engaging video announcements and stylish page transition', 'summary': 'Emphasizes engagement through comments, future content promotion, and sharing in video announcements, while also exploring webpage layout modifications for stylish page transition, responsive sidebar, and functional menu.', 'chapters': [{'end': 1382.446, 'start': 1302.012, 'title': 'Engaging video announcements', 'summary': 'Emphasizes engagement by asking for comments, promoting future content, and encouraging sharing, while also teasing an upcoming surprise for viewers who watched till the end.', 'duration': 80.434, 'highlights': ['The video will be posted on the channel every first Monday of the month, promoting regular content (quantifiable: frequency)', 'Encourages viewers to share the video with friends or family if they enjoyed it, promoting engagement and potential reach (quantifiable: action)', 'Teases a surprise for viewers who continue watching till the end, incentivizing engagement and retention (quantifiable: viewership)']}, {'end': 1671.947, 'start': 1382.446, 'title': 'Stylish page transition with sidebar', 'summary': "Discusses modifying a webpage's layout involving the sidebar, page content, and button, achieving a stylish page transition and a responsive sidebar, concluding with a subtle box shadow effect and functional menu.", 'duration': 289.501, 'highlights': ['The three HTML elements - sidebar toggler, page content, and sidebar - operate independently despite being styled together, providing flexibility for modifications. The sidebar toggler, page content, and sidebar are distinct HTML elements that operate independently, offering flexibility for modifications.', 'Implementing a stylish page transition by scaling down the page content and adding a box shadow for a visually appealing effect. Achieved a stylish page transition by scaling down the page content and adding a box shadow for a visually appealing effect.', 'The responsive sidebar with a scrollable menu allows for a functional and visually appealing layout. The responsive sidebar with a scrollable menu provides a functional and visually appealing layout.']}], 'duration': 369.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d4P8s-mkMvs/pics/d4P8s-mkMvs1302012.jpg', 'highlights': ['The video will be posted on the channel every first Monday of the month, promoting regular content (quantifiable: frequency)', 'Encourages viewers to share the video with friends or family if they enjoyed it, promoting engagement and potential reach (quantifiable: action)', 'Teases a surprise for viewers who continue watching till the end, incentivizing engagement and retention (quantifiable: viewership)', 'The three HTML elements - sidebar toggler, page content, and sidebar - operate independently despite being styled together, providing flexibility for modifications', 'Implementing a stylish page transition by scaling down the page content and adding a box shadow for a visually appealing effect', 'The responsive sidebar with a scrollable menu allows for a functional and visually appealing layout']}], 'highlights': ["The tutorial emphasizes adding anti-aliasing to web fonts for a crisp look, using the 'WebKit font smoothing' property.", "The speaker demonstrates the use of the website 'copy paste character' to select Unicode characters for the button, promoting efficiency in obtaining the desired symbols for web design.", "The process involves using input type checkbox and changing the anchor to a label with the 'for' attribute referencing the sidebar toggler, enabling the label to toggle the checkbox. This showcases the step-by-step process of creating the sidebar toggler using checkbox and label.", 'The video will be posted on the channel every first Monday of the month, promoting regular content (quantifiable: frequency)', 'The chapter introduces creating a slide-out navigation using exclusively HTML and CSS.', "The presenter showcases adding a sidebar with a list of items within a div named 'sidebar'.", 'The presenter discusses the use of a SAS framework called Bourbon for adding functions and mix-ins.', 'The chapter focuses on using a pseudo element to change the state of a slide-out menu when the checkbox is checked.', 'The chapter also discusses z-index and JavaScript class toggling, with a focus on modifying the appearance of links and controlling the state of a sidebar using checkboxes.', 'The responsive sidebar with a scrollable menu allows for a functional and visually appealing layout']}