title
Responsive Web Design: Navigation

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': 'Responsive Web Design: Navigation', 'heatmap': [{'end': 519.994, 'start': 494.198, 'weight': 0.826}, {'end': 884.032, 'start': 845.352, 'weight': 0.818}, {'end': 921.345, 'start': 904.332, 'weight': 0.75}, {'end': 966.525, 'start': 935.892, 'weight': 0.801}], 'summary': 'Tutorial explores responsive web design patterns, covering horizontal and vertical navigation for wide and narrow viewports, and discusses styling a website for desktop and mobile. it also delves into creating navigation elements in html and css, emphasizing user experience and covering the use of icons and hiding elements for a popular navigation design pattern.', 'chapters': [{'end': 502.904, 'segs': [{'end': 83.783, 'src': 'embed', 'start': 32.371, 'weight': 0, 'content': [{'end': 40.237, 'text': 'in the wide viewport we have a horizontal navigation and then, when we go to the more narrow viewport, we have a vertically stacked navigation.', 'start': 32.371, 'duration': 7.866}, {'end': 43.479, 'text': "that's hidden in this drawer here and we can toggle that with this handle.", 'start': 40.237, 'duration': 3.242}, {'end': 48.282, 'text': "This is very simple to implement and we're going to have a look at how to do that today.", 'start': 44.78, 'duration': 3.502}, {'end': 52.622, 'text': 'So I have a folder here called nav.', 'start': 50.72, 'duration': 1.902}, {'end': 54.503, 'text': 'Call it whatever you like.', 'start': 52.682, 'duration': 1.821}, {'end': 58.186, 'text': "I'm going to create a new file called index.html.", 'start': 54.703, 'duration': 3.483}, {'end': 61.388, 'text': "And in here it's just going to be basically what you'd expect.", 'start': 59.107, 'duration': 2.281}, {'end': 63.07, 'text': "It's basically just your normal website.", 'start': 61.428, 'duration': 1.642}, {'end': 65.45, 'text': "I'm going to call this navigation demo.", 'start': 63.09, 'duration': 2.36}, {'end': 68.634, 'text': "I'm going to create a header.", 'start': 65.471, 'duration': 3.163}, {'end': 78.922, 'text': "In the header I'm going to call it best website since Google.", 'start': 69.555, 'duration': 9.367}, {'end': 83.783, 'text': "Under this we're going to have our nav element.", 'start': 81.382, 'duration': 2.401}], 'summary': 'Demonstration of implementing a simple navigation toggle for different viewports in a web design tutorial.', 'duration': 51.412, 'max_score': 32.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo32371.jpg'}, {'end': 193.217, 'src': 'embed', 'start': 124.204, 'weight': 3, 'content': [{'end': 130.03, 'text': "so now we have this navigation, which is basically the markup that you'd have on any other sort of site.", 'start': 124.204, 'duration': 5.826}, {'end': 134.195, 'text': "so there's nothing new here and i'm going to create a simple section.", 'start': 130.03, 'duration': 4.165}, {'end': 139.52, 'text': "just stick some basic text in there and let's link in a style sheet.", 'start': 134.195, 'duration': 5.325}, {'end': 143.625, 'text': "so i'm going to call this style.css.", 'start': 139.52, 'duration': 4.105}, {'end': 149.807, 'text': "create it And let's see.", 'start': 143.625, 'duration': 6.182}, {'end': 154.27, 'text': "So I'm just going to start styling the website for the desktop.", 'start': 150.527, 'duration': 3.743}, {'end': 161.174, 'text': "So I'm going to have my body with a margin of zero and a padding of zero.", 'start': 155.571, 'duration': 5.603}, {'end': 169.04, 'text': "And I'm going to put a font family on there of sans serif because we're all modern people.", 'start': 162.015, 'duration': 7.025}, {'end': 179.607, 'text': "For our header, I'm going to put a background on it of 00.", 'start': 171.141, 'duration': 8.466}, {'end': 185.691, 'text': '795F I have some colours picked out written down here but you can use basically whatever you want.', 'start': 179.607, 'duration': 6.084}, {'end': 193.217, 'text': 'Give it a width, some padding, using the shorthand here for padding.', 'start': 187.953, 'duration': 5.264}], 'summary': 'Website styling for the desktop with css, including margin, padding, font family, and header background.', 'duration': 69.013, 'max_score': 124.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo124204.jpg'}, {'end': 418.628, 'src': 'embed', 'start': 387.401, 'weight': 4, 'content': [{'end': 390.524, 'text': "I'm going to change that to 399 077 semicolon.", 'start': 387.401, 'duration': 3.123}, {'end': 398.667, 'text': 'So now we have a nice hover state on there.', 'start': 396.684, 'duration': 1.983}, {'end': 402.993, 'text': "So now that's all fine and good, but we've all seen that before.", 'start': 399.468, 'duration': 3.525}, {'end': 404.895, 'text': 'We all know how to do that sort of stuff.', 'start': 403.013, 'duration': 1.882}, {'end': 407.199, 'text': "Let's jump into the mobile side of things.", 'start': 405.296, 'duration': 1.903}, {'end': 413.748, 'text': "So if you haven't already watched my video about media queries, it might be worth doing that now because we're going to be creating a media query.", 'start': 407.699, 'duration': 6.049}, {'end': 418.628, 'text': 'And we want to be targeting a max width.', 'start': 415.546, 'duration': 3.082}], 'summary': 'Creating a media query targeting a max width for mobile side.', 'duration': 31.227, 'max_score': 387.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo387401.jpg'}], 'start': 0.709, 'title': 'Responsive web design patterns and styling for desktop and mobile', 'summary': 'Explores responsive web design patterns, demonstrating horizontal and vertical navigation for wide and narrow viewports, and discusses implementation. it also discusses styling a website for desktop and mobile, including setting font, colors, layout, creating media queries, and creating a hover state and media query for the mobile view.', 'chapters': [{'end': 122.522, 'start': 0.709, 'title': 'Responsive web design patterns', 'summary': 'Explores a popular navigation pattern for responsive web design, demonstrating a horizontal navigation for wide viewports and a vertically stacked navigation for narrow viewports, and discussing its simplicity and implementation.', 'duration': 121.813, 'highlights': ['The chapter explores a popular navigation pattern for responsive web design, demonstrating a horizontal navigation for wide viewports and a vertically stacked navigation for narrow viewports, and discussing its simplicity and implementation.', 'The video discusses the transition from a wide viewport with horizontal navigation to a more narrow viewport with a vertically stacked navigation, showcasing the ease of implementation and toggle functionality.', 'The presenter creates a new file called index.html and sets up the basic structure for the navigation demo, including a header and a nav element containing an unordered list of page names with anchor tags.']}, {'end': 502.904, 'start': 124.204, 'title': 'Styling website for desktop and mobile', 'summary': 'Discusses styling a website for desktop and mobile, including setting font, colors, layout, and creating media queries, with specific focus on creating a hover state and media query for the mobile view.', 'duration': 378.7, 'highlights': ['The chapter discusses styling a website for desktop and mobile, including setting font, colors, layout, and creating media queries, with specific focus on creating a hover state and media query for the mobile view.', 'Creating media queries for the mobile view with a specific focus on creating a hover state and media query for the mobile view.', 'Setting font, colors, and layout for the website.']}], 'duration': 502.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo709.jpg', 'highlights': ['The chapter explores a popular navigation pattern for responsive web design, demonstrating a horizontal navigation for wide viewports and a vertically stacked navigation for narrow viewports, and discussing its simplicity and implementation.', 'The video discusses the transition from a wide viewport with horizontal navigation to a more narrow viewport with a vertically stacked navigation, showcasing the ease of implementation and toggle functionality.', 'The presenter creates a new file called index.html and sets up the basic structure for the navigation demo, including a header and a nav element containing an unordered list of page names with anchor tags.', 'The chapter discusses styling a website for desktop and mobile, including setting font, colors, layout, and creating media queries, with specific focus on creating a hover state and media query for the mobile view.', 'Creating media queries for the mobile view with a specific focus on creating a hover state and media query for the mobile view.', 'Setting font, colors, and layout for the website.']}, {'end': 974.288, 'segs': [{'end': 615.083, 'src': 'embed', 'start': 502.944, 'weight': 0, 'content': [{'end': 506.046, 'text': "Let's add, I think I'm going to put them on the left.", 'start': 502.944, 'duration': 3.102}, {'end': 508.007, 'text': 'So text align them left.', 'start': 506.146, 'duration': 1.861}, {'end': 511.389, 'text': "Again, it's all just little details.", 'start': 509.668, 'duration': 1.721}, {'end': 513.049, 'text': 'You can do this however you like.', 'start': 511.429, 'duration': 1.62}, {'end': 516.692, 'text': 'So there, our list items are done how we like.', 'start': 513.59, 'duration': 3.102}, {'end': 519.994, 'text': 'Now we need to add this handle that we had.', 'start': 516.792, 'duration': 3.202}, {'end': 522.434, 'text': 'Okay, so this is just going to be a div.', 'start': 520.014, 'duration': 2.42}, {'end': 527.438, 'text': 'We want this to be inside our navigation element, but outside of the ul element.', 'start': 523.456, 'duration': 3.982}, {'end': 531.621, 'text': "So I'm just going to call this handle, give it a class of handle.", 'start': 527.879, 'duration': 3.742}, {'end': 534.99, 'text': 'And inside here just have the word menu.', 'start': 533.348, 'duration': 1.642}, {'end': 541.739, 'text': 'Another thing we had inside here in the demo was the sort of shutter icon.', 'start': 536.192, 'duration': 5.547}, {'end': 549.089, 'text': "I'm not going to go over how to create that in this video, but this is created in this demo with just using HTML and CSS.", 'start': 542.28, 'duration': 6.809}, {'end': 553.387, 'text': 'This is really quite easy to do if you look around on how to do it.', 'start': 550.046, 'duration': 3.341}, {'end': 561.631, 'text': "But again, I'm not going to cover this in this video, but make sure that if you are using this technique, you do use some sort of icon,", 'start': 553.447, 'duration': 8.184}, {'end': 564.132, 'text': "because it's just going to make it so much more obvious for the user.", 'start': 561.631, 'duration': 2.501}, {'end': 570.154, 'text': "Whenever you're using some sort of clever navigation design, it's important to make sure that the user knows what they're doing with it.", 'start': 564.452, 'duration': 5.702}, {'end': 572.835, 'text': 'So make sure that if you are using this.', 'start': 571.274, 'duration': 1.561}, {'end': 575.723, 'text': 'you have a little icon in there.', 'start': 573.902, 'duration': 1.821}, {'end': 579.566, 'text': 'Okay, so our handle we want to style.', 'start': 576.024, 'duration': 3.542}, {'end': 581.948, 'text': 'This is outside of the media query, first of all.', 'start': 579.766, 'duration': 2.182}, {'end': 589.914, 'text': "So, well, let's give it a width first of 100%.", 'start': 583.309, 'duration': 6.605}, {'end': 595.919, 'text': 'Background of that.', 'start': 589.914, 'duration': 6.005}, {'end': 598.681, 'text': 'Remember my hash.', 'start': 597.6, 'duration': 1.081}, {'end': 602.704, 'text': "Let's text align it left.", 'start': 601.283, 'duration': 1.421}, {'end': 615.083, 'text': "give this a box sizing of border box as well, because we're also doing the width 100 and that and we're going to be adding padding on this.", 'start': 607.16, 'duration': 7.923}], 'summary': 'The transcript covers the process of adding list items and a handle to a navigation element, emphasizing the importance of including icons for user understanding.', 'duration': 112.139, 'max_score': 502.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo502944.jpg'}, {'end': 689.605, 'src': 'embed', 'start': 664.673, 'weight': 1, 'content': [{'end': 675.099, 'text': "So we want to hide this handle for when we're in the wider viewports and we want to hide the list items initially anyway, for the mobile viewports,", 'start': 664.673, 'duration': 10.426}, {'end': 676, 'text': 'the narrower viewports.', 'start': 675.099, 'duration': 0.901}, {'end': 679.101, 'text': 'So hiding the handle is really simple.', 'start': 677.56, 'duration': 1.541}, {'end': 683.284, 'text': "Because we don't want to animate it at all, we can just say display none.", 'start': 680.362, 'duration': 2.922}, {'end': 689.605, 'text': "and it won't show up on the wider viewports.", 'start': 684.882, 'duration': 4.723}], 'summary': 'Hide handle and list items for wider and mobile viewports, using display none.', 'duration': 24.932, 'max_score': 664.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo664673.jpg'}, {'end': 884.032, 'src': 'heatmap', 'start': 845.352, 'weight': 0.818, 'content': [{'end': 857.798, 'text': "So I'm going to say WebKit, MS, Mozilla, and O for Oprah.", 'start': 845.352, 'duration': 12.446}, {'end': 870.142, 'text': 'So now if we look at this and we go into our inspector here, we open up the nav element and start affecting the class here.', 'start': 860.154, 'duration': 9.988}, {'end': 874.645, 'text': 'If we set it to showing, you can see that it animates open.', 'start': 870.542, 'duration': 4.103}, {'end': 877.387, 'text': "So that's exactly what we want to do.", 'start': 876.126, 'duration': 1.261}, {'end': 884.032, 'text': 'Now all we need to do is to toggle that class, because as you can see, if I take that away, it closes again, animates to closed.', 'start': 877.727, 'duration': 6.305}], 'summary': 'Using webkit, ms, mozilla, and o for oprah to animate the nav element open and closed.', 'duration': 38.68, 'max_score': 845.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo845352.jpg'}, {'end': 934.571, 'src': 'heatmap', 'start': 904.332, 'weight': 0.75, 'content': [{'end': 907.695, 'text': "So I'm using the Google hosted libraries and I recommend you do as well.", 'start': 904.332, 'duration': 3.363}, {'end': 910.137, 'text': 'So you just click on jQuery here, copy the link.', 'start': 907.755, 'duration': 2.382}, {'end': 921.345, 'text': "I'm gonna stick that in the head of our document And at the bottom here, I'm going to create the script to toggle the class.", 'start': 911.018, 'duration': 10.327}, {'end': 923.506, 'text': 'So the way we do this is really simple.', 'start': 921.365, 'duration': 2.141}, {'end': 925.927, 'text': 'So we go target the class of handle.', 'start': 923.606, 'duration': 2.321}, {'end': 928.168, 'text': 'So we have our handle here.', 'start': 925.967, 'duration': 2.201}, {'end': 930.249, 'text': 'Targeting that.', 'start': 929.649, 'duration': 0.6}, {'end': 934.571, 'text': "And it's going to be on the click event comma.", 'start': 930.909, 'duration': 3.662}], 'summary': 'Using google hosted libraries for jquery, recommending the same. demonstrating script to toggle class on click event.', 'duration': 30.239, 'max_score': 904.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo904332.jpg'}, {'end': 966.525, 'src': 'heatmap', 'start': 935.892, 'weight': 0.801, 'content': [{'end': 937.252, 'text': 'Going to execute a function.', 'start': 935.892, 'duration': 1.36}, {'end': 943.355, 'text': 'And that function is going to be our navul.', 'start': 937.712, 'duration': 5.643}, {'end': 951.979, 'text': "want to toggle the class of showing, and that's really all there is to it.", 'start': 945.236, 'duration': 6.743}, {'end': 959.622, 'text': 'so if we look at this now, narrow it down, we can see if we click on this it toggles the class of showing,', 'start': 951.979, 'duration': 7.643}, {'end': 966.525, 'text': 'and so our CSS kicks in and we get this nice transition to open up the drawer of our navigation.', 'start': 959.622, 'duration': 6.903}], 'summary': 'Executed a function to toggle class, enabling smooth navigation drawer transition.', 'duration': 30.633, 'max_score': 935.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo935892.jpg'}], 'start': 502.944, 'title': 'Creating navigation elements and styling and hiding elements', 'summary': 'Covers creating list items, adding a handle and using icons in html and css for a navigation element, emphasizing the importance of user experience. it also discusses styling a handle element with 100% width, padding of 15px top and bottom, 10px left and right, and a pointer cursor. moreover, it covers hiding elements using display properties and animating the unordered list with a max height of 20em and a transition duration of 0.4 seconds for a popular navigation design pattern.', 'chapters': [{'end': 572.835, 'start': 502.944, 'title': 'Creating navigation elements', 'summary': 'Covers creating list items, adding a handle and using icons in html and css for a navigation element, emphasizing the importance of user experience.', 'duration': 69.891, 'highlights': ["List items are aligned left using text-align, adding a handle with a class of 'handle' and the word 'menu' inside, and using icons to enhance user experience.", 'Emphasizing the importance of user experience when using clever navigation design.', 'The process of creating a shutter icon using HTML and CSS is mentioned as being easy to do.']}, {'end': 974.288, 'start': 573.902, 'title': 'Styling and hiding elements', 'summary': 'Covers styling a handle element with 100% width, padding of 15px top and bottom, 10px left and right, and a pointer cursor. it also discusses hiding elements using display properties and animating the unordered list with a max height of 20em and a transition duration of 0.4 seconds for a popular navigation design pattern.', 'duration': 400.386, 'highlights': ['Styling the handle with 100% width, padding, and pointer cursor', 'Hiding the handle and animating the unordered list']}], 'duration': 471.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nQK0kz65wpo/pics/nQK0kz65wpo502944.jpg', 'highlights': ['Styling the handle with 100% width, padding, and pointer cursor', 'Hiding the handle and animating the unordered list', "List items are aligned left using text-align, adding a handle with a class of 'handle' and the word 'menu' inside, and using icons to enhance user experience", 'Emphasizing the importance of user experience when using clever navigation design', 'The process of creating a shutter icon using HTML and CSS is mentioned as being easy to do']}], 'highlights': ['The chapter explores a popular navigation pattern for responsive web design, demonstrating a horizontal navigation for wide viewports and a vertically stacked navigation for narrow viewports, and discussing its simplicity and implementation.', 'The video discusses the transition from a wide viewport with horizontal navigation to a more narrow viewport with a vertically stacked navigation, showcasing the ease of implementation and toggle functionality.', 'The presenter creates a new file called index.html and sets up the basic structure for the navigation demo, including a header and a nav element containing an unordered list of page names with anchor tags.', 'The chapter discusses styling a website for desktop and mobile, including setting font, colors, layout, and creating media queries, with specific focus on creating a hover state and media query for the mobile view.', "List items are aligned left using text-align, adding a handle with a class of 'handle' and the word 'menu' inside, and using icons to enhance user experience", 'Styling the handle with 100% width, padding, and pointer cursor', 'Hiding the handle and animating the unordered list', 'Emphasizing the importance of user experience when using clever navigation design', 'The process of creating a shutter icon using HTML and CSS is mentioned as being easy to do', 'Creating media queries for the mobile view with a specific focus on creating a hover state and media query for the mobile view.', 'Setting font, colors, and layout for the website.']}