title
Responsive HTML & CSS Side Menu From Scratch

description
In this video we will build a responsive collapsible side menu using HTML5, CSS3 and just a bit of JavaScript. We will not be using any 3rd party frameworks or libraries, everything is from scratch CODE: Code for this video http://www.traversymedia.com/downloads/sidemenu.zip CHEAP WEB HOSTING: Check out eHost http://track.ehost.com/594a594410143/click SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/in/bradtraversy

detail
{'title': 'Responsive HTML & CSS Side Menu From Scratch', 'heatmap': [{'end': 533.404, 'start': 499.884, 'weight': 0.916}, {'end': 662.743, 'start': 646.125, 'weight': 0.771}], 'summary': 'Learn to create a responsive side menu using html, css, and javascript, emphasizing independent creation skills. also covers creating a navbar with svg icon, css styling, and modifications for web projects, promoting ehost for hosting at $2.75 per month.', 'chapters': [{'end': 61.843, 'segs': [{'end': 35.164, 'src': 'embed', 'start': 7.352, 'weight': 0, 'content': [{'end': 10.373, 'text': 'hey guys, welcome to another front-end web development tutorial.', 'start': 7.352, 'duration': 3.021}, {'end': 17.376, 'text': "in this video, we're going to be building a responsive side menu or collapsible menu, hamburger menu, whatever you want to call it.", 'start': 10.373, 'duration': 7.003}, {'end': 23.598, 'text': "now. you often see things like this in frameworks like Twitter bootstrap, but if you're not using a framework,", 'start': 17.376, 'duration': 6.222}, {'end': 30.801, 'text': "you it's really a good thing to know how to do this type of thing on your own, just using you know HTML, CSS and a little bit of JavaScript.", 'start': 23.598, 'duration': 7.203}, {'end': 33.162, 'text': "So let's take a look at what we'll be building.", 'start': 31.301, 'duration': 1.861}, {'end': 34.143, 'text': 'This is it right here.', 'start': 33.262, 'duration': 0.881}, {'end': 35.164, 'text': 'We have a nav bar.', 'start': 34.183, 'duration': 0.981}], 'summary': 'Building a responsive side menu using html, css, and javascript.', 'duration': 27.812, 'max_score': 7.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU7352.jpg'}, {'end': 69.589, 'src': 'embed', 'start': 42.448, 'weight': 1, 'content': [{'end': 46.411, 'text': 'And if we click that, we get this sidebar that opens up nice and smooth.', 'start': 42.448, 'duration': 3.963}, {'end': 49.733, 'text': "And you'll see the main content gets pushed over as well.", 'start': 47.091, 'duration': 2.642}, {'end': 57.039, 'text': 'So the main purpose of this is so when we were looking at this on a small screen, no matter how small,', 'start': 50.553, 'duration': 6.486}, {'end': 61.843, 'text': "we can still have our navigation and you'll see the main navigation has actually disappeared.", 'start': 57.039, 'duration': 4.804}, {'end': 66.126, 'text': "When we get to a certain point, it'll, you know, disappear and reappear.", 'start': 62.083, 'duration': 4.043}, {'end': 68.028, 'text': "So that's what we'll be building.", 'start': 66.807, 'duration': 1.221}, {'end': 69.589, 'text': 'Hopefully you guys enjoy it.', 'start': 68.088, 'duration': 1.501}], 'summary': 'Sidebar opens smoothly, content pushed over. navigation disappears on small screens to ensure accessibility.', 'duration': 27.141, 'max_score': 42.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU42448.jpg'}], 'start': 7.352, 'title': 'Building responsive side menu', 'summary': 'Demonstrates creating a responsive side menu using html, css, and javascript, enabling smooth navigation on small screens and emphasizing independent creation skills.', 'chapters': [{'end': 61.843, 'start': 7.352, 'title': 'Building responsive side menu', 'summary': 'Demonstrates building a responsive side menu using html, css, and javascript, allowing smooth navigation on small screens, as well as the main navigation disappearing, emphasizing the importance of knowing how to create this independently.', 'duration': 54.491, 'highlights': ['The tutorial focuses on building a responsive side menu using HTML, CSS, and a little bit of JavaScript, with the main purpose being to enable smooth navigation on small screens.', 'The tutorial emphasizes the importance of knowing how to create a responsive side menu independently, without relying on frameworks like Twitter Bootstrap.', 'The side menu is designed to open smoothly when clicking the icon, pushing the main content aside, to ensure navigation is accessible on small screens.']}], 'duration': 54.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU7352.jpg', 'highlights': ['The tutorial focuses on building a responsive side menu using HTML, CSS, and a little bit of JavaScript, with the main purpose being to enable smooth navigation on small screens.', 'The side menu is designed to open smoothly when clicking the icon, pushing the main content aside, to ensure navigation is accessible on small screens.', 'The tutorial emphasizes the importance of knowing how to create a responsive side menu independently, without relying on frameworks like Twitter Bootstrap.']}, {'end': 316.536, 'segs': [{'end': 104.969, 'src': 'embed', 'start': 62.083, 'weight': 1, 'content': [{'end': 66.126, 'text': "When we get to a certain point, it'll, you know, disappear and reappear.", 'start': 62.083, 'duration': 4.043}, {'end': 68.028, 'text': "So that's what we'll be building.", 'start': 66.807, 'duration': 1.221}, {'end': 69.589, 'text': 'Hopefully you guys enjoy it.', 'start': 68.088, 'duration': 1.501}, {'end': 70.81, 'text': "It's not going to take too long.", 'start': 69.629, 'duration': 1.181}, {'end': 72.312, 'text': "So let's go ahead and get started.", 'start': 70.93, 'duration': 1.382}, {'end': 80.557, 'text': "If you're looking to host a website or a small application at an incredibly low price, check out eHost and get started for as low as $2.75 per month.", 'start': 73.012, 'duration': 7.545}, {'end': 83.339, 'text': 'Plans also include over $200 of extras.', 'start': 80.757, 'duration': 2.582}, {'end': 85.721, 'text': 'Click on the link in the description below for more info.', 'start': 83.479, 'duration': 2.242}, {'end': 90.839, 'text': 'Alright, so I have my Atom text editor open, and you can use whatever editor you want.', 'start': 86.516, 'duration': 4.323}, {'end': 94.742, 'text': "Atom, Visual Studio Code, Sublime Text, they're all really good choices.", 'start': 91.119, 'duration': 3.623}, {'end': 96.343, 'text': "It doesn't really matter.", 'start': 95.483, 'duration': 0.86}, {'end': 104.969, 'text': "And I'm also running a plugin or a package called Atom Live Server, which just opens our index.html file on my local host.", 'start': 96.803, 'duration': 8.166}], 'summary': 'Building a website with atom text editor, check out ehost for hosting at $2.75/month with $200 of extras.', 'duration': 42.886, 'max_score': 62.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU62083.jpg'}, {'end': 151.082, 'src': 'embed', 'start': 125.967, 'weight': 0, 'content': [{'end': 132.132, 'text': "So we can do an exclamation and then tab and it's going to give us an entire HTML head and body document.", 'start': 125.967, 'duration': 6.165}, {'end': 135.154, 'text': "So let's go ahead and change the title here.", 'start': 132.912, 'duration': 2.242}, {'end': 145.521, 'text': "We'll just say responsive side menu and then we're just going to link to our style sheet, so it's going to go to style.css.", 'start': 135.214, 'duration': 10.307}, {'end': 151.082, 'text': "we're not using any frameworks or anything like that, so everything is from absolute scratch.", 'start': 145.521, 'duration': 5.561}], 'summary': 'Creating an html document with responsive side menu, linking to style.css, from scratch.', 'duration': 25.115, 'max_score': 125.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU125967.jpg'}, {'end': 240.265, 'src': 'embed', 'start': 208.21, 'weight': 3, 'content': [{'end': 210.211, 'text': 'So this whole thing is the navbar right?', 'start': 208.21, 'duration': 2.001}, {'end': 217.432, 'text': "And then we're going to work on this icon here, which is actually created through SVG or Scalable Vector Graphics.", 'start': 210.631, 'duration': 6.801}, {'end': 224.843, 'text': "Now you could use something like Font Awesome or another icon library, but I didn't want to bloat this up with any extra libraries.", 'start': 217.992, 'duration': 6.851}, {'end': 229.59, 'text': 'So this icon is simple enough to draw with SVG.', 'start': 224.943, 'duration': 4.647}, {'end': 231.473, 'text': "So that's what we're going to do.", 'start': 230.451, 'duration': 1.022}, {'end': 234.723, 'text': "So let's wrap this in a span.", 'start': 232.702, 'duration': 2.021}, {'end': 240.265, 'text': "So I'm going to give this a span and give it a class of open-slide.", 'start': 235.243, 'duration': 5.022}], 'summary': 'Creating an svg icon for the navbar without extra libraries.', 'duration': 32.055, 'max_score': 208.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU208210.jpg'}, {'end': 284.867, 'src': 'embed', 'start': 256.411, 'weight': 5, 'content': [{'end': 260.853, 'text': 'So basically we have an SVG tag, which is available with HTML5.', 'start': 256.411, 'duration': 4.442}, {'end': 263.956, 'text': "And then we're setting a width of 30 and a height to 30.", 'start': 261.274, 'duration': 2.682}, {'end': 265.597, 'text': "So we're looking at this right here.", 'start': 263.956, 'duration': 1.641}, {'end': 267.518, 'text': 'This is 30 by 30.', 'start': 265.657, 'duration': 1.861}, {'end': 272.121, 'text': "And then each one of these lines here we're drawing with this path element.", 'start': 267.518, 'duration': 4.603}, {'end': 273.902, 'text': 'this path element.', 'start': 272.481, 'duration': 1.421}, {'end': 278.544, 'text': 'okay, and it takes an attribute for a draw, for which is a d attribute.', 'start': 273.902, 'duration': 4.642}, {'end': 284.867, 'text': "and then we're basically saying we want this to go over 30 pixels and then we want to.", 'start': 278.544, 'duration': 6.323}], 'summary': 'Using svg tag to create 30x30 drawing with path element', 'duration': 28.456, 'max_score': 256.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU256411.jpg'}], 'start': 62.083, 'title': 'Building responsive side menu and creating a navbar with svg icon', 'summary': 'Covers building a responsive side menu from scratch using html, javascript, and css, with emphasis on using atom text editor and atom live server plugin. it also covers creating a navbar with a svg icon using html5 and css with specific element dimensions. additionally, it promotes ehost for hosting at $2.75 per month.', 'chapters': [{'end': 182.921, 'start': 62.083, 'title': 'Building responsive side menu', 'summary': 'Covers building a responsive side menu from scratch, starting with html, then adding a bit of javascript, and focusing on css, with emphasis on using atom text editor and the atom live server plugin, and promoting ehost for hosting at $2.75 per month.', 'duration': 120.838, 'highlights': ['The chapter covers building a responsive side menu from scratch, starting with HTML, then adding a bit of JavaScript, and focusing on CSS. The project involves creating a responsive side menu, progressing from HTML to JavaScript and finally focusing on CSS, which is where most of the time will be spent.', 'Emphasis on using Atom text editor and the Atom Live Server plugin. The instructor emphasizes the use of Atom text editor and the Atom Live Server plugin for the project.', 'Promotion of eHost for hosting at $2.75 per month. The instructor promotes eHost for hosting at a low price of $2.75 per month, including over $200 of extras.']}, {'end': 316.536, 'start': 183.641, 'title': 'Creating a navbar with svg icon', 'summary': "Covers creating a navbar with a scalable vector graphics (svg) icon, using html5 and css, defining a class of 'navbar' and 'open-slide', and setting a width of 30 and a height of 30 for the svg element.", 'duration': 132.895, 'highlights': ["The chapter covers creating a navbar with a scalable vector graphics (SVG) icon, using HTML5 and CSS, defining a class of 'navbar' and 'open-slide', and setting a width of 30 and a height of 30 for the SVG element.", 'The icon is simple enough to draw with SVG and is created through SVG or Scalable Vector Graphics, without using extra libraries like Font Awesome.', 'The SVG element is defined with a width of 30 and a height of 30, and each line within it is drawn with a path element, with a stroke color of white and a width of five pixels.']}], 'duration': 254.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU62083.jpg', 'highlights': ['The chapter covers building a responsive side menu from scratch, progressing from HTML to JavaScript and finally focusing on CSS.', 'Emphasis on using Atom text editor and the Atom Live Server plugin for the project.', 'Promotion of eHost for hosting at a low price of $2.75 per month, including over $200 of extras.', "The chapter covers creating a navbar with a scalable vector graphics (SVG) icon, using HTML5 and CSS, defining a class of 'navbar' and 'open-slide', and setting a width of 30 and a height of 30 for the SVG element.", 'The icon is simple enough to draw with SVG and is created through SVG or Scalable Vector Graphics, without using extra libraries like Font Awesome.', 'The SVG element is defined with a width of 30 and a height of 30, and each line within it is drawn with a path element, with a stroke color of white and a width of five pixels.']}, {'end': 667.545, 'segs': [{'end': 346.528, 'src': 'embed', 'start': 317.696, 'weight': 0, 'content': [{'end': 322.717, 'text': "Now we're going to work on these links here, which are the main navbar links.", 'start': 317.696, 'duration': 5.021}, {'end': 324.718, 'text': "So let's go under the span.", 'start': 322.798, 'duration': 1.92}, {'end': 327.559, 'text': 'Still in the nav, but under the span.', 'start': 325.758, 'duration': 1.801}, {'end': 329.679, 'text': "And then we're going to create a UL here.", 'start': 328.059, 'duration': 1.62}, {'end': 333.22, 'text': "And I'm going to give this a class of navbar-nav.", 'start': 329.699, 'duration': 3.521}, {'end': 336.541, 'text': 'Again, kind of adopting the bootstrap class names.', 'start': 333.82, 'duration': 2.721}, {'end': 341.324, 'text': "And then let's put some allies here with some links.", 'start': 337.661, 'duration': 3.663}, {'end': 346.528, 'text': "Now, these links aren't going to go anywhere because it's not going to be a working navigation.", 'start': 341.924, 'duration': 4.604}], 'summary': 'Creating main navbar links with ul and adopting bootstrap class names.', 'duration': 28.832, 'max_score': 317.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU317696.jpg'}, {'end': 393.29, 'src': 'embed', 'start': 366.297, 'weight': 1, 'content': [{'end': 371.86, 'text': 'So now what we wanna work on is this here, the actual slide menu that is gonna pop out.', 'start': 366.297, 'duration': 5.563}, {'end': 385.046, 'text': "So we wanna go under the main nav here now and we're gonna create a div and we're gonna give this an ID of side when I say side menu and then also a class of side nav.", 'start': 372.62, 'duration': 12.426}, {'end': 390.729, 'text': "Now the only reason I'm giving this an ID is because we need to grab onto it from within the JavaScript.", 'start': 385.786, 'duration': 4.943}, {'end': 393.29, 'text': "Okay, so that's all the ID's gonna be used for.", 'start': 391.149, 'duration': 2.141}], 'summary': "Creating a slide menu with an id of 'side' and a class of 'side nav'.", 'duration': 26.993, 'max_score': 366.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU366297.jpg'}, {'end': 499.884, 'src': 'embed', 'start': 467.299, 'weight': 2, 'content': [{'end': 471.601, 'text': "Now, before we get to the CSS, let's add our JavaScript, which is going to be very, very simple.", 'start': 467.299, 'duration': 4.302}, {'end': 480.451, 'text': 'Basically, all we want to happen is when we click on this icon, we want to run a function called Open Slide Menu.', 'start': 472.261, 'duration': 8.19}, {'end': 486.158, 'text': "And that's going to take care of taking the slide menu and setting the width to 250.", 'start': 480.871, 'duration': 5.287}, {'end': 488.761, 'text': 'So this width right here should be 250.', 'start': 486.158, 'duration': 2.603}, {'end': 492.005, 'text': "And we're going to initially set it to 0 in the CSS later on.", 'start': 488.761, 'duration': 3.244}, {'end': 499.884, 'text': 'and then we also want to take this main id here and we want to add a margin left because we want to push it over 250.', 'start': 492.682, 'duration': 7.202}], 'summary': 'Adding javascript to open a slide menu with a width of 250 and adjusting the main id accordingly.', 'duration': 32.585, 'max_score': 467.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU467299.jpg'}, {'end': 533.404, 'src': 'heatmap', 'start': 499.884, 'weight': 0.916, 'content': [{'end': 504.205, 'text': 'this is 250 wide so obviously we want this to push over 250.', 'start': 499.884, 'duration': 4.321}, {'end': 511.148, 'text': "so we're going to add a click event to the uh, to the a tag right here that wraps around the svg.", 'start': 504.205, 'duration': 6.943}, {'end': 524.86, 'text': "so let's say on click and we'll set that to open slide menu, which is a function, and then we're also going to add an event to the close button here.", 'start': 511.148, 'duration': 13.712}, {'end': 531.223, 'text': "so let's say on click and we'll set that to close side menu.", 'start': 524.86, 'duration': 6.363}, {'end': 533.404, 'text': 'okay. so two functions.', 'start': 531.223, 'duration': 2.181}], 'summary': 'Add click events to open and close side menu functions.', 'duration': 33.52, 'max_score': 499.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU499884.jpg'}, {'end': 636.962, 'src': 'embed', 'start': 602.373, 'weight': 4, 'content': [{'end': 604.774, 'text': "All right, so let's copy this, the whole thing.", 'start': 602.373, 'duration': 2.401}, {'end': 609.001, 'text': "And we're going to change this to close slide menu.", 'start': 606.659, 'duration': 2.342}, {'end': 614.224, 'text': 'And then we want to set the width to zero when we close it.', 'start': 610.682, 'duration': 3.542}, {'end': 618.727, 'text': 'And we also want to set the margin left of the main div to zero as well.', 'start': 614.784, 'duration': 3.943}, {'end': 620.248, 'text': "So we'll save that.", 'start': 619.367, 'duration': 0.881}, {'end': 624.09, 'text': "And now if I click it, you'll see it gets pushed over.", 'start': 620.348, 'duration': 3.742}, {'end': 633.876, 'text': 'If we click the X, nothing happens because Y did it.', 'start': 624.17, 'duration': 9.706}, {'end': 636.962, 'text': 'Close side menu.', 'start': 635.882, 'duration': 1.08}], 'summary': 'Code changes to close slide menu and set width to zero.', 'duration': 34.589, 'max_score': 602.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU602373.jpg'}, {'end': 677.328, 'src': 'heatmap', 'start': 646.125, 'weight': 0.771, 'content': [{'end': 648.065, 'text': 'Close side menu is not defined.', 'start': 646.125, 'duration': 1.94}, {'end': 651.186, 'text': 'Oh, I said slide menu.', 'start': 649.706, 'duration': 1.48}, {'end': 655.207, 'text': 'So we just need to add an L right here.', 'start': 653.607, 'duration': 1.6}, {'end': 657.201, 'text': 'all right.', 'start': 656.801, 'duration': 0.4}, {'end': 662.743, 'text': 'so if we open it and then we click that, you can see, it goes back and then this width gets set to zero.', 'start': 657.201, 'duration': 5.542}, {'end': 666.164, 'text': "okay, so that's actually it for the html and javascript.", 'start': 662.743, 'duration': 3.421}, {'end': 667.545, 'text': 'very, very simple.', 'start': 666.164, 'duration': 1.381}, {'end': 672.106, 'text': 'i tried to make this, so we did as little markup as possible.', 'start': 667.545, 'duration': 4.561}, {'end': 677.328, 'text': "so now we're going to open up the style css, and this is like i said this is where the meat of the project is,", 'start': 672.106, 'duration': 5.222}], 'summary': 'Fix slide menu by adding an l, set width to zero. minimal markup used. meat of project in style.css.', 'duration': 31.203, 'max_score': 646.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU646125.jpg'}], 'start': 317.696, 'title': 'Creating navigation and responsive side menu', 'summary': 'Covers creating main navbar links with a class of navbar-nav and a slide menu with an id of side menu and a class of side nav. it also discusses creating a responsive side menu using html and javascript, demonstrating how to open and close the menu by adjusting the width and margin of the elements.', 'chapters': [{'end': 441.542, 'start': 317.696, 'title': 'Creating navigation and slide menu', 'summary': 'Covers creating main navbar links with a class of navbar-nav and a slide menu with an id of side menu and a class of side nav, including adding specific links and a close button.', 'duration': 123.846, 'highlights': ['Creating main navbar links with a class of navbar-nav The main navbar links are created with a class of navbar-nav, including links for home, about, services, and contact.', 'Creating a slide menu with an ID of side menu and a class of side nav A slide menu is created with an ID of side menu and a class of side nav, including a close button and specific links for home, about, services, and contact.']}, {'end': 667.545, 'start': 442.97, 'title': 'Creating responsive side menu', 'summary': 'Discusses creating a responsive side menu using html and javascript. it demonstrates how to open and close the menu by adjusting the width and margin of the elements, with the width set to 250 pixels when opened and zero when closed.', 'duration': 224.575, 'highlights': ['Demonstrates adding HTML and JavaScript to create a responsive side menu by adjusting the width and margin of elements, with the width set to 250 pixels when opened and zero when closed.', 'Explains the process of creating a function to open the slide menu by setting the width of the side menu to 250 pixels and the margin left of the main div to 250 pixels.', 'Describes the function to close the slide menu by setting the width to zero and the margin left of the main div to zero, demonstrating the complete process of opening and closing the responsive side menu.']}], 'duration': 349.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU317696.jpg', 'highlights': ['Creating main navbar links with a class of navbar-nav, including links for home, about, services, and contact.', 'Creating a slide menu with an ID of side menu and a class of side nav, including a close button and specific links for home, about, services, and contact.', 'Adding HTML and JavaScript to create a responsive side menu by adjusting the width and margin of elements, with the width set to 250 pixels when opened and zero when closed.', 'Creating a function to open the slide menu by setting the width of the side menu to 250 pixels and the margin left of the main div to 250 pixels.', 'Describing the function to close the slide menu by setting the width to zero and the margin left of the main div to zero, demonstrating the complete process of opening and closing the responsive side menu.']}, {'end': 1029.009, 'segs': [{'end': 738.337, 'src': 'embed', 'start': 708.346, 'weight': 0, 'content': [{'end': 709.767, 'text': "And you can see that that's changed.", 'start': 708.346, 'duration': 1.421}, {'end': 714.286, 'text': "So let's go ahead and add the styles for the navbar itself.", 'start': 710.623, 'duration': 3.663}, {'end': 725.794, 'text': "So that's going to have a background or background color and that's going to be the dark blue or the Facebook blue, which is that right there?", 'start': 714.866, 'duration': 10.928}, {'end': 725.934, 'text': '3B5998..', 'start': 725.794, 'duration': 0.14}, {'end': 735.261, 'text': "We're also going to set overflow hidden, and let's set the height of the navbar to 63 pixels.", 'start': 726.254, 'duration': 9.007}, {'end': 738.337, 'text': 'OK, there we go.', 'start': 737.757, 'duration': 0.58}], 'summary': 'Styling for the navbar includes a dark blue background with a height of 63 pixels.', 'duration': 29.991, 'max_score': 708.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU708346.jpg'}, {'end': 919.037, 'src': 'embed', 'start': 849.762, 'weight': 1, 'content': [{'end': 853.366, 'text': "And then actually let's set list style none as well.", 'start': 849.762, 'duration': 3.604}, {'end': 857.75, 'text': "Because we don't want any bullet points.", 'start': 854.767, 'duration': 2.983}, {'end': 859.351, 'text': 'Now for the link hover.', 'start': 857.87, 'duration': 1.481}, {'end': 864.576, 'text': "Let's say navbar a hover.", 'start': 860.232, 'duration': 4.344}, {'end': 868.66, 'text': "And for that we're going to add a background color.", 'start': 866.398, 'duration': 2.262}, {'end': 872.076, 'text': "And that's going to be a light gray.", 'start': 870.655, 'duration': 1.421}, {'end': 875.098, 'text': "And then we're going to just set the color to black.", 'start': 872.716, 'duration': 2.382}, {'end': 885.125, 'text': "All right, so now if we hover, you'll see it has the gray background and the text turns black.", 'start': 879.981, 'duration': 5.144}, {'end': 894.671, 'text': "All right, so now let's start to add some styles to the side navigation, which is this right here.", 'start': 887.286, 'duration': 7.385}, {'end': 900.235, 'text': "All right, so let's say dot, what I call it, side nav.", 'start': 895.512, 'duration': 4.723}, {'end': 906.13, 'text': "And we're going to set the height of this to 100%.", 'start': 903.428, 'duration': 2.702}, {'end': 908.511, 'text': 'We want it to take full height.', 'start': 906.13, 'duration': 2.381}, {'end': 911.553, 'text': "We're going to initially set the width to zero.", 'start': 909.371, 'duration': 2.182}, {'end': 916.936, 'text': "So if I save that, you'll see that the width is now set to zero by default.", 'start': 911.773, 'duration': 5.163}, {'end': 919.037, 'text': 'So if we open, it goes like that.', 'start': 917.516, 'duration': 1.521}], 'summary': 'Styling elements: removed bullet points, added hover effect, set side navigation height to 100%', 'duration': 69.275, 'max_score': 849.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU849762.jpg'}], 'start': 667.545, 'title': 'Css styling for web projects', 'summary': 'Covers styling web projects with css, including font family changes, background colors, navbar styling, link and list styling with specific measurements and hover effects, and side navigation design with specific attributes and transition effects.', 'chapters': [{'end': 766.714, 'start': 667.545, 'title': 'Styling css for web project', 'summary': 'Covers the process of styling a web project with css, including changing font family, setting background colors, and styling the navbar with specific color codes and pixel heights.', 'duration': 99.169, 'highlights': ['The meat of the project is in the style css where the speaker changes the font family to Arial and Serif, and sets the background color of the body to a light gray.', 'The speaker styles the navbar with a dark blue color (Facebook blue #3B5998), sets overflow to hidden, and specifies the height of the navbar as 63 pixels.', 'The speaker changes the icon color to white and discusses the option of using different colors for the links in the navbar.']}, {'end': 885.125, 'start': 766.754, 'title': 'Css styling for links and lists', 'summary': 'Explains the css styling for links and lists, including setting the color to light gray, padding values, font size, and removing bullet points, with specific pixel measurements and hover effects.', 'duration': 118.371, 'highlights': ['The chapter explains the CSS styling for links and lists, including setting the color to light gray, padding values, font size, and removing bullet points, with specific pixel measurements and hover effects.', 'The color for the links is set to a very light gray, specifically F2F2F2, and the font size is set to 17 pixels.', 'Padding values for the links are specified as 14 pixels for top and bottom, and 16 pixels for right and left.', "The UL default padding is adjusted, with 8 pixels added to the top and 0 pixels elsewhere, and the bullet points are removed using 'list-style: none'.", 'For link hover, a light gray background and black text color are added, creating a hover effect.']}, {'end': 1029.009, 'start': 887.286, 'title': 'Styling side navigation', 'summary': 'Demonstrates how to style a side navigation, setting the height to 100%, width to 0, fixed position, background color with opacity, hidden horizontal scroll, padding top of 60 pixels, and a smooth transition of 0.5 seconds for opening.', 'duration': 141.723, 'highlights': ['Setting the height of side navigation to 100% The tutorial sets the height of the side navigation to 100% to ensure it takes full height.', 'Setting the width of side navigation to 0 The tutorial initially sets the width of the side navigation to 0, making it invisible by default.', 'Setting the position of side navigation to fixed The tutorial sets the position of the side navigation to fixed to keep it in place, ensuring it stays visible while scrolling.', 'Adding a background color with opacity The tutorial adds a black background color with an opacity of 0.9 to the side navigation, making it slightly see-through.', 'Setting overflow to hidden for horizontal scrolling The tutorial sets the overflow for horizontal scrolling to hidden, preventing any horizontal scrollbars from appearing.']}], 'duration': 361.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU667545.jpg', 'highlights': ['The speaker styles the navbar with a dark blue color (Facebook blue #3B5998), sets overflow to hidden, and specifies the height of the navbar as 63 pixels.', 'The chapter explains the CSS styling for links and lists, including setting the color to light gray, padding values, font size, and removing bullet points, with specific pixel measurements and hover effects.', 'Setting the height of side navigation to 100% The tutorial sets the height of the side navigation to 100% to ensure it takes full height.']}, {'end': 1435.358, 'segs': [{'end': 1122.391, 'src': 'embed', 'start': 1030.29, 'weight': 0, 'content': [{'end': 1035.131, 'text': "All right, so now let's style the individual links inside of the side nav.", 'start': 1030.29, 'duration': 4.841}, {'end': 1049.931, 'text': "So let's say SideNav A, grabbing all the A tags and we're going to set the padding of these to 10 pixels everywhere except for the left,", 'start': 1035.231, 'duration': 14.7}, {'end': 1051.372, 'text': 'which will be 30 pixels.', 'start': 1049.931, 'duration': 1.441}, {'end': 1055.317, 'text': "Okay, so it's top right, bottom left.", 'start': 1051.973, 'duration': 3.344}, {'end': 1061.143, 'text': "And let's set the text decoration to none because we do not want underlines.", 'start': 1057.1, 'duration': 4.043}, {'end': 1064.666, 'text': "I don't think I've ever wanted an underline on my links.", 'start': 1061.844, 'duration': 2.822}, {'end': 1066.887, 'text': "I don't know why that's the default.", 'start': 1065.546, 'duration': 1.341}, {'end': 1070.45, 'text': "But let's set the font size to 22 pixels.", 'start': 1067.268, 'duration': 3.182}, {'end': 1074.413, 'text': "And we're going to set the color to light gray.", 'start': 1071.791, 'duration': 2.622}, {'end': 1078.156, 'text': "And we're going to make sure that these are displayed block.", 'start': 1074.433, 'duration': 3.723}, {'end': 1088.291, 'text': "And let's add a transition transition of 0.3 seconds.", 'start': 1080.869, 'duration': 7.422}, {'end': 1091.112, 'text': "So let's see what that looks like.", 'start': 1089.772, 'duration': 1.34}, {'end': 1091.632, 'text': 'There we go.', 'start': 1091.152, 'duration': 0.48}, {'end': 1094.593, 'text': "It's pretty good.", 'start': 1091.652, 'duration': 2.941}, {'end': 1099.374, 'text': 'Now, when we hover over these, I want them to change just a little bit.', 'start': 1096.233, 'duration': 3.141}, {'end': 1102.015, 'text': "So let's add dot.", 'start': 1100.354, 'duration': 1.661}, {'end': 1106.857, 'text': 'Side Nav A Hover.', 'start': 1104.455, 'duration': 2.402}, {'end': 1110.2, 'text': "And we're just going to set the color.", 'start': 1108.699, 'duration': 1.501}, {'end': 1112.442, 'text': "Let's see, it's initially light gray.", 'start': 1110.741, 'duration': 1.701}, {'end': 1115.305, 'text': "We'll just set it to white when we hover.", 'start': 1112.482, 'duration': 2.823}, {'end': 1117.887, 'text': "So you can see there's a little bit of change.", 'start': 1116.366, 'duration': 1.521}, {'end': 1119.969, 'text': 'Now we want to do the close button.', 'start': 1118.548, 'duration': 1.421}, {'end': 1120.87, 'text': "I don't want it right here.", 'start': 1120.009, 'duration': 0.861}, {'end': 1122.391, 'text': 'I want it to be pushed over here.', 'start': 1120.91, 'duration': 1.481}], 'summary': 'Styling individual links in side nav with specific properties and transitions.', 'duration': 92.101, 'max_score': 1030.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU1030290.jpg'}, {'end': 1326.293, 'src': 'embed', 'start': 1295.373, 'weight': 6, 'content': [{'end': 1299.415, 'text': 'And then this is going to take in a parameter, which is going to be the max width.', 'start': 1295.373, 'duration': 4.042}, {'end': 1308.024, 'text': "and we're going to set that to 568 pixels, 568.", 'start': 1300.794, 'duration': 7.23}, {'end': 1309.045, 'text': 'Now what this does.', 'start': 1308.024, 'duration': 1.021}, {'end': 1316.588, 'text': "if you've never worked with media queries, any styles we put inside here are only going to be in effect if it's a max width of 568..", 'start': 1309.045, 'duration': 7.543}, {'end': 1326.293, 'text': 'So once it gets above 568, and you can see it even has the sizes right here in Chrome, once it gets above 568, this stuff will not kick in.', 'start': 1316.588, 'duration': 9.705}], 'summary': 'Setting max width to 568 pixels for media queries.', 'duration': 30.92, 'max_score': 1295.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU1295373.jpg'}, {'end': 1420.51, 'src': 'embed', 'start': 1385.742, 'weight': 7, 'content': [{'end': 1388.264, 'text': 'And then if we get to a certain point, there it is.', 'start': 1385.742, 'duration': 2.522}, {'end': 1392.227, 'text': 'When we get to 560 or less, it appears.', 'start': 1388.284, 'duration': 3.943}, {'end': 1398.951, 'text': "But I'm just going to comment that out just because I do want it to show initially.", 'start': 1393.728, 'duration': 5.223}, {'end': 1402.194, 'text': 'One more thing.', 'start': 1400.993, 'duration': 1.201}, {'end': 1406.456, 'text': "This right here, if you don't want that to show, what we could do is add on to the body.", 'start': 1402.234, 'duration': 4.222}, {'end': 1410.119, 'text': "Let's do overflow.", 'start': 1406.476, 'duration': 3.643}, {'end': 1414.526, 'text': "We'll say overflow X.", 'start': 1412.145, 'duration': 2.381}, {'end': 1418.669, 'text': "And we're going to set that to hidden.", 'start': 1414.526, 'duration': 4.143}, {'end': 1420.51, 'text': 'There we go.', 'start': 1420.009, 'duration': 0.501}], 'summary': 'Instructions to hide content when reaching 560 characters or less by using overflow property.', 'duration': 34.768, 'max_score': 1385.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU1385742.jpg'}], 'start': 1030.29, 'title': 'Css modifications', 'summary': 'Covers styling side nav links with padding set to 10px, text decoration to none, font size to 22px, color to light gray, and displaying them as block with a transition of 0.3s. it also includes making css modifications for web design, changing hover effects, repositioning elements, adding transitions, and achieving responsive web design using media queries to hide specific elements based on screen size.', 'chapters': [{'end': 1094.593, 'start': 1030.29, 'title': 'Styling side nav links', 'summary': 'Covers styling individual links inside the side nav, setting padding to 10 pixels with 30 pixels on the left, text decoration to none, font size to 22 pixels, color to light gray, and displaying them as block with a transition of 0.3 seconds.', 'duration': 64.303, 'highlights': ['Setting padding to 10 pixels with 30 pixels on the left for the individual links inside the side nav.', 'Setting the font size to 22 pixels for the individual links inside the side nav.', 'Setting the color to light gray for the individual links inside the side nav.', 'Setting the text decoration to none for the individual links inside the side nav.', 'Displaying the individual links inside the side nav as block with a transition of 0.3 seconds.']}, {'end': 1262.794, 'start': 1096.233, 'title': 'Web design css modifications', 'summary': 'Demonstrates making css modifications for a web design, including changing hover effects, repositioning elements, adding transitions, and fixing link placement.', 'duration': 166.561, 'highlights': ['The chapter demonstrates making CSS modifications for a web design, including changing hover effects, repositioning elements, adding transitions, and fixing link placement.', 'The close button is repositioned by setting its position to absolute, top to zero, right to 22 pixels, font size to 36, and adding a margin left of 50 pixels.', 'A transition is added to the main content ID with a margin left set to 0.5 seconds, padding to 20 pixels, overflow to hidden, and width to 100 percent.', 'Hover effect for the side navigation links is modified by changing the color from light gray to white when hovered over.']}, {'end': 1435.358, 'start': 1262.814, 'title': 'Responsive web design', 'summary': 'Explains how to use media queries to hide specific elements based on screen size, with a focus on achieving a responsive sidebar for screen sizes below 568 pixels, resulting in the disappearance of links and icon, and the removal of the scroll bar.', 'duration': 172.544, 'highlights': ['Media queries used to hide elements based on screen size, targeting a max width of 568 pixels, resulting in the disappearance of links for screen sizes above 568 pixels and the appearance of the sidebar for smaller screen sizes.', 'Demonstration of using media queries to hide specific elements, such as the icon, based on screen size, with a focus on achieving a responsive sidebar for screen sizes below 568 pixels.', 'Utilizing CSS to set the overflow property to hidden for the body element, effectively removing the scroll bar for improved aesthetics and functionality on smaller screens.']}], 'duration': 405.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wpGNFGqNfdU/pics/wpGNFGqNfdU1030290.jpg', 'highlights': ['Setting padding to 10 pixels with 30 pixels on the left for the individual links inside the side nav.', 'Setting the font size to 22 pixels for the individual links inside the side nav.', 'Setting the color to light gray for the individual links inside the side nav.', 'Setting the text decoration to none for the individual links inside the side nav.', 'Displaying the individual links inside the side nav as block with a transition of 0.3 seconds.', 'The chapter demonstrates making CSS modifications for a web design, including changing hover effects, repositioning elements, adding transitions, and fixing link placement.', 'Media queries used to hide elements based on screen size, targeting a max width of 568 pixels, resulting in the disappearance of links for screen sizes above 568 pixels and the appearance of the sidebar for smaller screen sizes.', 'Utilizing CSS to set the overflow property to hidden for the body element, effectively removing the scroll bar for improved aesthetics and functionality on smaller screens.']}], 'highlights': ['The tutorial emphasizes the importance of knowing how to create a responsive side menu independently, without relying on frameworks like Twitter Bootstrap.', 'The side menu is designed to open smoothly when clicking the icon, pushing the main content aside, to ensure navigation is accessible on small screens.', 'Learn to create a responsive side menu using html, css, and javascript, emphasizing independent creation skills.', 'The chapter covers building a responsive side menu from scratch, progressing from HTML to JavaScript and finally focusing on CSS.', 'Promotion of eHost for hosting at a low price of $2.75 per month, including over $200 of extras.', 'Creating a function to open the slide menu by setting the width of the side menu to 250 pixels and the margin left of the main div to 250 pixels.', "The chapter covers creating a navbar with a scalable vector graphics (SVG) icon, using HTML5 and CSS, defining a class of 'navbar' and 'open-slide', and setting a width of 30 and a height of 30 for the SVG element.", 'The SVG element is defined with a width of 30 and a height of 30, and each line within it is drawn with a path element, with a stroke color of white and a width of five pixels.', 'Creating main navbar links with a class of navbar-nav, including links for home, about, services, and contact.', 'Creating a slide menu with an ID of side menu and a class of side nav, including a close button and specific links for home, about, services, and contact.', 'The chapter explains the CSS styling for links and lists, including setting the color to light gray, padding values, font size, and removing bullet points, with specific pixel measurements and hover effects.', 'Media queries used to hide elements based on screen size, targeting a max width of 568 pixels, resulting in the disappearance of links for screen sizes above 568 pixels and the appearance of the sidebar for smaller screen sizes.']}