title
Landing Page With Smooth Scroll - 3 Options

description
In this video we will create a simple landing page with smooth scrolling. I will show you 3 options including pure CSS (scroll-behavior), jQuery and a lightweight JS script. Sponsor: Freelancer Bundle (Use "brad25" for 25% off) https://studywebdevelopment.com/freelancing.html Code: https://codepen.io/bradtraversy/pen/xBdyzr Smoothscroll Script: https://github.com/cferdinandi/smooth-scroll 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Landing Page With Smooth Scroll - 3 Options', 'heatmap': [{'end': 750.072, 'start': 734.747, 'weight': 0.869}, {'end': 861.778, 'start': 790.097, 'weight': 0.725}, {'end': 915.201, 'start': 894.182, 'weight': 0.73}, {'end': 1317.46, 'start': 1290.229, 'weight': 0.921}], 'summary': 'Tutorial covers smooth scrolling on a landing page, showcasing three methods including pure css, creating a smooth scroll landing page from scratch, implementing css for html, styling sections and setting background images, and demonstrating smooth scrolling using css and jquery with practical applications and estimated time of 10 minutes for creation.', 'chapters': [{'end': 189.178, 'segs': [{'end': 91.483, 'src': 'embed', 'start': 27.884, 'weight': 0, 'content': [{'end': 33.507, 'text': "Hey, what's going on, guys? So in this video, I want to show you how to implement smooth scrolling on a landing page.", 'start': 27.884, 'duration': 5.623}, {'end': 36.069, 'text': 'And what I mean by that is we have a nav bar here.', 'start': 33.547, 'duration': 2.522}, {'end': 44.074, 'text': "And if I click one of these such as about, it'll take me down to the about section and it'll have a nice smooth scroll effect.", 'start': 36.089, 'duration': 7.985}, {'end': 48.416, 'text': "OK, so I'm sure you've seen this on many, many websites and applications.", 'start': 44.674, 'duration': 3.742}, {'end': 51.058, 'text': "Now I'm going to show you three different ways to do it.", 'start': 48.896, 'duration': 2.162}, {'end': 55.64, 'text': 'The first way I want to focus on is pure CSS, no JavaScript at all.', 'start': 51.218, 'duration': 4.422}, {'end': 61.764, 'text': "And that's by using the scroll behavior property, which this is the MDN docs and shows you an example.", 'start': 56.04, 'duration': 5.724}, {'end': 64.425, 'text': 'So basically this is just auto.', 'start': 61.884, 'duration': 2.541}, {'end': 68.988, 'text': 'But if we set it to smooth, it will give us that nice smooth scroll effect.', 'start': 64.745, 'duration': 4.243}, {'end': 77.313, 'text': "Now, there's some other properties I want to show you as well, one of them being a snap effect, which is scroll snap type.", 'start': 69.568, 'duration': 7.745}, {'end': 85.279, 'text': "And what that does is if I take the scroll bar and I go like, let's say right here and I let go, you'll see that it snaps into place.", 'start': 77.954, 'duration': 7.325}, {'end': 90.162, 'text': "Whatever one is is more in the viewport is the one that it's going to snap to.", 'start': 85.339, 'duration': 4.823}, {'end': 91.483, 'text': "So that's pretty cool as well.", 'start': 90.222, 'duration': 1.261}], 'summary': 'The video demonstrates implementing smooth scrolling on a landing page using three different methods, including pure css with the scroll behavior property for a smooth scroll effect and the scroll snap type for a snap effect.', 'duration': 63.599, 'max_score': 27.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s27884.jpg'}, {'end': 189.178, 'src': 'embed', 'start': 146.842, 'weight': 3, 'content': [{'end': 152.508, 'text': 'Now, I am going to show you two other methods that are completely cross compatible with all browsers.', 'start': 146.842, 'duration': 5.666}, {'end': 153.97, 'text': 'One is using jQuery.', 'start': 152.688, 'duration': 1.282}, {'end': 160.625, 'text': 'And a better solution than that is to use a very lightweight script called smooth scroll.', 'start': 154.54, 'duration': 6.085}, {'end': 166.329, 'text': "Now, you could do this with vanilla JavaScript, but it's a lot of code to do something so simple.", 'start': 161.185, 'duration': 5.144}, {'end': 169.231, 'text': 'You have to write your own ease function and so on.', 'start': 167.249, 'duration': 1.982}, {'end': 174.713, 'text': "Some other options are to use a framework if you're using like Bootstrap or some other CSS framework.", 'start': 169.651, 'duration': 5.062}, {'end': 179.995, 'text': 'Many of those have JavaScript widgets that will allow you to do this as well.', 'start': 174.773, 'duration': 5.222}, {'end': 181.976, 'text': "And then there's there's plenty of other scripts.", 'start': 180.295, 'duration': 1.681}, {'end': 184.277, 'text': 'But I think that smooth scroll is one of the best.', 'start': 182.036, 'duration': 2.241}, {'end': 186.737, 'text': "It's one of the easiest and one of the lightest.", 'start': 184.297, 'duration': 2.44}, {'end': 189.178, 'text': "So let's go ahead and get started.", 'start': 187.678, 'duration': 1.5}], 'summary': 'Various methods for smooth scrolling, including jquery and smooth scroll, are cross-compatible with all browsers.', 'duration': 42.336, 'max_score': 146.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s146842.jpg'}], 'start': 7.165, 'title': 'Smooth scrolling and techniques', 'summary': 'Focuses on implementing smooth scrolling on a landing page, showcasing three different methods, including pure css, and demonstrates the scroll behavior property and scroll snap type, with examples and practical application. it also discusses various scrolling techniques, their browser compatibility, and recommends using a lightweight script called smooth scroll for cross-compatibility, while highlighting the downsides of other methods and browser limitations.', 'chapters': [{'end': 91.483, 'start': 7.165, 'title': 'Smooth scrolling implementation', 'summary': 'Focuses on implementing smooth scrolling on a landing page, showcasing three different methods, including pure css, and demonstrating the scroll behavior property and scroll snap type, with examples and practical application.', 'duration': 84.318, 'highlights': ['The Ultimate Freelancing Bundle by StudyWebDevelopment.com offers a comprehensive set of resources for starting a freelancing business, including a 130-page guide, client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'The video demonstrates three different methods of implementing smooth scrolling on a landing page, including pure CSS, scroll behavior property, and scroll snap type, providing practical examples for each method.', 'The scroll behavior property, when set to smooth, delivers a smooth scroll effect on the landing page, enhancing user experience and engagement.', 'The scroll snap type feature enables a snap effect, ensuring that the content snaps into place based on its position in the viewport, contributing to a visually appealing and intuitive user interface.']}, {'end': 189.178, 'start': 91.823, 'title': 'Scrolling techniques and compatibility', 'summary': 'Discusses various scrolling techniques, their browser compatibility, and recommends using a lightweight script called smooth scroll for cross-compatibility, while highlighting the downsides of other methods and browser limitations.', 'duration': 97.355, 'highlights': ['The smooth scrolling CSS property is compatible with Firefox, Chrome, and Opera but not yet implemented in Safari, Edge, and Internet Explorer, posing a downside.', "Smooth scrolling in Safari may not work, but it still provides the functionality of navigating to the desired area, ensuring the site's functionality is maintained even with limited support.", 'Recommendation of using the lightweight script smooth scroll for cross-compatible scrolling, highlighting its simplicity and effectiveness compared to other methods and frameworks.', 'Mention of using jQuery and vanilla JavaScript as alternative methods, with the latter requiring extensive code for simple functionality, emphasizing the efficiency of smooth scroll.', 'Suggestion of using JavaScript widgets from CSS frameworks or other scripts for smooth scrolling, while emphasizing the superiority of smooth scroll due to its simplicity and lightweight nature.']}], 'duration': 182.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s7165.jpg', 'highlights': ['The video demonstrates three different methods of implementing smooth scrolling on a landing page, including pure CSS, scroll behavior property, and scroll snap type, providing practical examples for each method.', 'The scroll snap type feature enables a snap effect, ensuring that the content snaps into place based on its position in the viewport, contributing to a visually appealing and intuitive user interface.', 'The scroll behavior property, when set to smooth, delivers a smooth scroll effect on the landing page, enhancing user experience and engagement.', 'Recommendation of using the lightweight script smooth scroll for cross-compatible scrolling, highlighting its simplicity and effectiveness compared to other methods and frameworks.', 'Mention of using jQuery and vanilla JavaScript as alternative methods, with the latter requiring extensive code for simple functionality, emphasizing the efficiency of smooth scroll.']}, {'end': 355.623, 'segs': [{'end': 257.849, 'src': 'embed', 'start': 228.348, 'weight': 0, 'content': [{'end': 237.512, 'text': "So if you're not that comfortable with Flexbox, you can see how it's implemented and learn other stuff that isn't the main focus of the video.", 'start': 228.348, 'duration': 9.164}, {'end': 238.893, 'text': "so let's get started.", 'start': 238.012, 'duration': 0.881}, {'end': 240.554, 'text': "i'm just gonna use emmett here.", 'start': 238.893, 'duration': 1.661}, {'end': 247.5, 'text': "i'm gonna do exclamation enter and that will give us a boilerplate, and let's just change the title to.", 'start': 240.554, 'duration': 6.946}, {'end': 257.849, 'text': "we'll say smooth scroll, uh, landing page all right, and then we're gonna bring in our css.", 'start': 247.5, 'duration': 10.349}], 'summary': 'Learn how to implement flexbox and create a smooth scroll landing page.', 'duration': 29.501, 'max_score': 228.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s228348.jpg'}, {'end': 355.623, 'src': 'embed', 'start': 283.888, 'weight': 1, 'content': [{'end': 289.21, 'text': "And then we're going to copy this down a couple of times, four links.", 'start': 283.888, 'duration': 5.322}, {'end': 290.491, 'text': "And let's do about.", 'start': 289.59, 'duration': 0.901}, {'end': 306.708, 'text': 'boats and this will be service and of course you can change these if you want, and contact, contact, all right.', 'start': 292.54, 'duration': 14.168}, {'end': 313.331, 'text': "so under the nav we're gonna have our sections, our four sections, which are gonna correspond to these IDs.", 'start': 306.708, 'duration': 6.623}, {'end': 319.135, 'text': "so let's do section with the ID of home and we're gonna do an h1.", 'start': 313.331, 'duration': 5.804}, {'end': 325.712, 'text': "we'll just say welcome to my Sites and let's do a paragraph.", 'start': 319.135, 'duration': 6.577}, {'end': 332.014, 'text': "And in here I'm just going to do warm 15 and that will give me 15 words of dummy text.", 'start': 326.532, 'duration': 5.482}, {'end': 334.475, 'text': "OK then we'll go ahead and just copy this down.", 'start': 332.474, 'duration': 2.001}, {'end': 335.555, 'text': 'We need four of them.', 'start': 334.495, 'duration': 1.06}, {'end': 344.938, 'text': "Second one's going to be about we'll change the title as well to about and see this one's going to be service.", 'start': 336.175, 'duration': 8.763}, {'end': 355.623, 'text': 'Oops So service and then this one is going to be contact.', 'start': 347.399, 'duration': 8.224}], 'summary': 'Creating four sections with corresponding ids and content for a website navigation.', 'duration': 71.735, 'max_score': 283.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s283888.jpg'}], 'start': 189.258, 'title': 'Creating a smooth scroll landing page', 'summary': 'Covers the process of creating a smooth scroll landing page from scratch, including html, css, and implementing flexbox, with an estimated time of 10 minutes.', 'chapters': [{'end': 355.623, 'start': 189.258, 'title': 'Creating smooth scroll landing page', 'summary': 'Covers creating a smooth scroll landing page from scratch, including html, css, and implementing flexbox, with an estimated time of 10 minutes for the process.', 'duration': 166.365, 'highlights': ['The process involves creating a smooth scroll landing page from scratch, including HTML, CSS, and implementing Flexbox. smooth scroll landing page, HTML, CSS, Flexbox', 'The HTML structure includes a container, navbar, and four sections corresponding to specific IDs. HTML structure, container, navbar, sections, IDs', 'The sections contain specific content such as welcoming message, about, service, and contact information. section content, welcoming message, about, service, contact']}], 'duration': 166.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s189258.jpg', 'highlights': ['The process involves creating a smooth scroll landing page from scratch, including HTML, CSS, and implementing Flexbox.', 'The HTML structure includes a container, navbar, and four sections corresponding to specific IDs.', 'The sections contain specific content such as welcoming message, about, service, and contact information.']}, {'end': 631.059, 'segs': [{'end': 415.586, 'src': 'embed', 'start': 362.358, 'weight': 0, 'content': [{'end': 363.159, 'text': "OK, and that's it.", 'start': 362.358, 'duration': 0.801}, {'end': 364.059, 'text': "That's the HTML.", 'start': 363.199, 'duration': 0.86}, {'end': 364.98, 'text': "So I'll save that.", 'start': 364.119, 'duration': 0.861}, {'end': 366.721, 'text': "And I'm going to go ahead and open this up.", 'start': 365.32, 'duration': 1.401}, {'end': 369.763, 'text': "I'm using Live Server, which is an extension for VS Code.", 'start': 366.741, 'duration': 3.022}, {'end': 371.224, 'text': 'And there it is.', 'start': 370.624, 'duration': 0.6}, {'end': 373.526, 'text': 'So very ugly, no CSS at all.', 'start': 371.324, 'duration': 2.202}, {'end': 376.267, 'text': "So let's jump into style.css.", 'start': 373.926, 'duration': 2.341}, {'end': 382.852, 'text': "And like I said, I'm going to implement the whole smooth scroll thing after we get the site, the main styles.", 'start': 377.028, 'duration': 5.824}, {'end': 387.053, 'text': "So let's go start off with a reset here.", 'start': 384.833, 'duration': 2.22}, {'end': 391.934, 'text': "So I'm going to set everything to have a margin of zero and a padding of zero.", 'start': 387.134, 'duration': 4.8}, {'end': 394.955, 'text': "And then let's style the body.", 'start': 393.015, 'duration': 1.94}, {'end': 398.496, 'text': "So we're going to do font family.", 'start': 395.375, 'duration': 3.121}, {'end': 402.637, 'text': "I'm going to use Arial Helvetica Sans Serif as my font stack.", 'start': 398.636, 'duration': 4.001}, {'end': 409.038, 'text': "And I'm going to set the background to a dark gray and let's set the color to white.", 'start': 403.657, 'duration': 5.381}, {'end': 411.003, 'text': 'All right.', 'start': 410.663, 'duration': 0.34}, {'end': 412.364, 'text': "And I'll set the line height.", 'start': 411.103, 'duration': 1.261}, {'end': 415.586, 'text': "Let's do line height one point six.", 'start': 413.044, 'duration': 2.542}], 'summary': 'Styling html using css, setting margin and padding to zero, and defining font and background colors.', 'duration': 53.228, 'max_score': 362.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s362358.jpg'}, {'end': 631.059, 'src': 'embed', 'start': 478.366, 'weight': 1, 'content': [{'end': 480.487, 'text': 'Otherwise, smooth scrolling is kind of pointless.', 'start': 478.366, 'duration': 2.121}, {'end': 484.188, 'text': 'So we want to at the top zero position.', 'start': 481.147, 'duration': 3.041}, {'end': 489.89, 'text': "I'm going to set the Z index to one so that it's always on top of the rest of the content.", 'start': 484.208, 'duration': 5.682}, {'end': 492.591, 'text': "I'm also going to display it as flex.", 'start': 490.67, 'duration': 1.921}, {'end': 496.46, 'text': 'So the UL inside will be a flex item.', 'start': 494.179, 'duration': 2.281}, {'end': 500.323, 'text': "And then let's set the width to be 100%.", 'start': 497.021, 'duration': 3.302}, {'end': 504.065, 'text': "Let's set the height to 60 pixels.", 'start': 500.323, 'duration': 3.742}, {'end': 508.748, 'text': 'And for the background, I want it to be somewhat transparent.', 'start': 505.065, 'duration': 3.683}, {'end': 511.629, 'text': "So I'm going to use RGBA, red, green, blue, alpha.", 'start': 508.768, 'duration': 2.861}, {'end': 513.19, 'text': 'So I want it black.', 'start': 512.049, 'duration': 1.141}, {'end': 516.172, 'text': 'So 0, 0, 0, excuse me, for red, green, blue.', 'start': 513.23, 'duration': 2.942}, {'end': 520.634, 'text': "And then for the alpha value, let's do 0.7.", 'start': 516.672, 'duration': 3.962}, {'end': 522.556, 'text': "So that'll give it a little bit of transparency.", 'start': 520.634, 'duration': 1.922}, {'end': 526.38, 'text': "OK, so now let's do the elements inside the navbar.", 'start': 523.436, 'duration': 2.944}, {'end': 527.681, 'text': "We'll go ahead and do the UL.", 'start': 526.4, 'duration': 1.281}, {'end': 532.948, 'text': "So let's say navbar UL and let's display that.", 'start': 529.543, 'duration': 3.405}, {'end': 539.568, 'text': 'as a flex box so that the inner list items are flex items that we can align and stuff like that.', 'start': 533.786, 'duration': 5.782}, {'end': 544.35, 'text': "So let's say list style, we want to remove any bullets.", 'start': 540.609, 'duration': 3.741}, {'end': 545.71, 'text': "So we'll set that to none.", 'start': 544.49, 'duration': 1.22}, {'end': 548.211, 'text': "We're also going to set the width to 100%.", 'start': 545.73, 'duration': 2.481}, {'end': 552.573, 'text': "And let's justify content to the center.", 'start': 548.211, 'duration': 4.362}, {'end': 557.615, 'text': 'Okay, we want the nav items to be in the center, or the whole ul to be in the center.', 'start': 552.593, 'duration': 5.022}, {'end': 564.131, 'text': "So if we take a look, You'll see we have our bar, and it has some transparency, and we have all of our list items.", 'start': 557.635, 'duration': 6.496}, {'end': 565.452, 'text': 'We have our UL in the middle.', 'start': 564.151, 'duration': 1.301}, {'end': 569.134, 'text': "So now let's do the list items themselves.", 'start': 567.033, 'duration': 2.101}, {'end': 571.116, 'text': 'So navbar, UL, LI.', 'start': 569.194, 'duration': 1.922}, {'end': 574.598, 'text': "And I'm just going to separate them a bit.", 'start': 571.136, 'duration': 3.462}, {'end': 579.481, 'text': "So I'm going to add margin 0 on the top and bottom, 1rem on the left and right.", 'start': 574.618, 'duration': 4.863}, {'end': 582.483, 'text': "And then padding, I'm just going to do 1rem all around.", 'start': 579.741, 'duration': 2.742}, {'end': 587.686, 'text': "And then for the links, let's say navbar, UL, LI, A.", 'start': 583.883, 'duration': 3.803}, {'end': 594.618, 'text': "So for the links, I'm going to remove the underline.", 'start': 589.833, 'duration': 4.785}, {'end': 596.66, 'text': 'So we want text decoration none.', 'start': 594.698, 'duration': 1.962}, {'end': 599.282, 'text': "Let's make them uppercase.", 'start': 597.821, 'duration': 1.461}, {'end': 601.444, 'text': 'So text transform uppercase.', 'start': 599.302, 'duration': 2.142}, {'end': 606.869, 'text': "And then the color, I'm just going to make very light gray, almost white.", 'start': 602.825, 'duration': 4.044}, {'end': 612.374, 'text': 'OK And then the last thing I want to do with the nav bar is the hover state.', 'start': 606.889, 'duration': 5.485}, {'end': 613.876, 'text': "So we'll add.", 'start': 613.215, 'duration': 0.661}, {'end': 618.487, 'text': "Hover and I'm going to set the color to sky blue.", 'start': 614.844, 'duration': 3.643}, {'end': 620.169, 'text': 'All right.', 'start': 618.507, 'duration': 1.662}, {'end': 621.09, 'text': "So we'll save that.", 'start': 620.209, 'duration': 0.881}, {'end': 621.77, 'text': 'Check it out.', 'start': 621.25, 'duration': 0.52}, {'end': 623.532, 'text': "And there's our nav bar.", 'start': 622.451, 'duration': 1.081}, {'end': 631.059, 'text': 'So now we want to move on to the sections, which should take up the whole viewport for each section.', 'start': 624.233, 'duration': 6.826}], 'summary': 'Styling a navbar with transparency, flexbox, and hover effects.', 'duration': 152.693, 'max_score': 478.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s478366.jpg'}], 'start': 362.358, 'title': 'Css implementation and styling', 'summary': 'Covers implementing css for html, including setting styles for body, container, and navbar, and discusses styling the navbar with rgba for transparency, setting ul as a flexbox with centered content, and styling list items and links with specific margins, padding, and hover effects.', 'chapters': [{'end': 504.065, 'start': 362.358, 'title': 'Implementing css for html', 'summary': 'Covers implementing css for html, setting styles for body, container, and navbar, including setting font, background, color, line height, and positioning, while utilizing live server for visualizing the changes.', 'duration': 141.707, 'highlights': ['Setting body styles: Setting font family to Arial Helvetica Sans Serif, background to dark gray, color to white, and line height to 1.6, and setting body height to 100 viewport heights.', 'Positioning navbar: Positioning navbar fixed at the top, setting Z index to one, displaying as flex, and setting width to 100% and height to 60 pixels.', 'Using Live Server: Visualizing the changes made in the HTML and CSS files using Live Server extension for VS Code.']}, {'end': 631.059, 'start': 505.065, 'title': 'Styling navbar and sections', 'summary': 'Discusses styling the navbar with rgba for transparency, setting ul as a flexbox with centered content, and styling list items and links with specific margins, padding, and hover effects.', 'duration': 125.994, 'highlights': ['The chapter discusses styling the navbar with RGBA for transparency, setting UL as a flexbox with centered content, and styling list items and links with specific margins, padding, and hover effects.', 'The background is made somewhat transparent using RGBA with 0, 0, 0 for red, green, blue, and an alpha value of 0.7, providing a slightly transparent effect.', 'The UL element inside the navbar is styled as a flexbox with the list items as flex items, removing bullets, setting width to 100%, and justifying content to the center.', 'The list items are styled with margin of 0 on the top and bottom, 1rem on the left and right, padding of 1rem all around, and the links are styled with no underline, uppercase text, and a very light gray color, almost white.', 'Additionally, a hover state is added to the links, setting the color to sky blue.']}], 'duration': 268.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s362358.jpg', 'highlights': ['Setting body styles: Setting font family to Arial Helvetica Sans Serif, background to dark gray, color to white, and line height to 1.6, and setting body height to 100 viewport heights.', 'Positioning navbar: Positioning navbar fixed at the top, setting Z index to one, displaying as flex, and setting width to 100% and height to 60 pixels.', 'The chapter discusses styling the navbar with RGBA for transparency, setting UL as a flexbox with centered content, and styling list items and links with specific margins, padding, and hover effects.', 'The background is made somewhat transparent using RGBA with 0, 0, 0 for red, green, blue, and an alpha value of 0.7, providing a slightly transparent effect.', 'The UL element inside the navbar is styled as a flexbox with the list items as flex items, removing bullets, setting width to 100%, and justifying content to the center.', 'The list items are styled with margin of 0 on the top and bottom, 1rem on the left and right, padding of 1rem all around, and the links are styled with no underline, uppercase text, and a very light gray color, almost white.', 'Additionally, a hover state is added to the links, setting the color to sky blue.', 'Using Live Server: Visualizing the changes made in the HTML and CSS files using Live Server extension for VS Code.']}, {'end': 791.298, 'segs': [{'end': 769.934, 'src': 'heatmap', 'start': 734.747, 'weight': 0, 'content': [{'end': 737.148, 'text': "So the last thing we want to do, actually, let's check this out.", 'start': 734.747, 'duration': 2.401}, {'end': 737.908, 'text': "So we'll save it.", 'start': 737.168, 'duration': 0.74}, {'end': 740.729, 'text': 'And this is what it looks like.', 'start': 739.269, 'duration': 1.46}, {'end': 744.871, 'text': 'So each section takes up 100 viewport heights, which is the whole viewport.', 'start': 740.869, 'duration': 4.002}, {'end': 750.072, 'text': 'And if I click a navigation link here, it will go to that section.', 'start': 745.391, 'duration': 4.681}, {'end': 752.573, 'text': "Okay, but we just don't have the smooth scroll yet.", 'start': 750.612, 'duration': 1.961}, {'end': 757.81, 'text': "So let's add the background images because you can't really tell each section apart.", 'start': 753.769, 'duration': 4.041}, {'end': 762.632, 'text': "So what I'm going to do is just copy and paste this in because it's very simple.", 'start': 757.97, 'duration': 4.662}, {'end': 767.693, 'text': "All we're doing is taking each ID and setting a background URL.", 'start': 763.772, 'duration': 3.921}, {'end': 769.934, 'text': 'Now I have the code in the description.', 'start': 768.193, 'duration': 1.741}], 'summary': 'Each section takes up 100 viewport heights, and we need to add smooth scroll and background images for clarity.', 'duration': 106.168, 'max_score': 734.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s734747.jpg'}], 'start': 631.299, 'title': 'Styling sections and setting background images', 'summary': 'Covers styling sections and setting font sizes, flexbox properties, viewport heights, and adding background images to sections for a smooth scrolling webpage.', 'chapters': [{'end': 791.298, 'start': 631.299, 'title': 'Styling sections and setting background images', 'summary': 'Covers styling sections, setting font sizes, flexbox properties, viewport heights, and adding background images to sections for a smooth scrolling webpage.', 'duration': 159.999, 'highlights': ['The chapters covers setting font sizes for different sections, with the paragraph set to 1.5 rem and H1 set to four rem, providing clear guidance for styling (1.5 rem, H1 four rem).', 'The use of flexbox properties, such as setting the flex direction to column instead of row, aligning items and justifying content to the center, and aligning text to the center, ensuring proper alignment and layout (flex direction column, aligning items and justifying content to the center).', 'The chapter also emphasizes the importance of achieving 100 viewport heights for each section, ensuring that they take up the entire viewport, allowing for smooth scrolling and navigation (100 viewport heights).', 'Additionally, the process of adding background images to each section is discussed, with a focus on utilizing background URLs, setting properties like no-repeat, positioning in the center, and covering the entire space, enhancing the visual appeal and differentiation of sections (background images with properties like no-repeat, center positioning, and covering space).']}], 'duration': 159.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s631299.jpg', 'highlights': ['The chapters covers setting font sizes for different sections, with the paragraph set to 1.5 rem and H1 set to four rem, providing clear guidance for styling (1.5 rem, H1 four rem).', 'The use of flexbox properties, such as setting the flex direction to column instead of row, aligning items and justifying content to the center, and aligning text to the center, ensuring proper alignment and layout (flex direction column, aligning items and justifying content to the center).', 'Additionally, the process of adding background images to each section is discussed, with a focus on utilizing background URLs, setting properties like no-repeat, positioning in the center, and covering the entire space, enhancing the visual appeal and differentiation of sections (background images with properties like no-repeat, center positioning, and covering space).', 'The chapter also emphasizes the importance of achieving 100 viewport heights for each section, ensuring that they take up the entire viewport, allowing for smooth scrolling and navigation (100 viewport heights).']}, {'end': 966.58, 'segs': [{'end': 822.36, 'src': 'embed', 'start': 792.119, 'weight': 1, 'content': [{'end': 797.082, 'text': "So now that we have all that stuff done, let's jump in and let's add the smooth scrolling.", 'start': 792.119, 'duration': 4.963}, {'end': 805.188, 'text': "So first thing I'm going to do is on the body, I'm actually going to remove the scroll bars altogether.", 'start': 798.123, 'duration': 7.065}, {'end': 808.39, 'text': "So I'm going to set overflow to hidden if I save.", 'start': 805.208, 'duration': 3.182}, {'end': 809.494, 'text': 'And I go back.', 'start': 808.854, 'duration': 0.64}, {'end': 810.915, 'text': "Notice there's no scroll bars.", 'start': 809.574, 'duration': 1.341}, {'end': 812.876, 'text': "I can't I can't use my scroll button.", 'start': 810.995, 'duration': 1.881}, {'end': 822.36, 'text': 'What we want to do is go to the container and we want to set overflow on the Y axis, which is up and down, which is vertical.', 'start': 813.716, 'duration': 8.644}], 'summary': 'Implement smooth scrolling by removing scroll bars and setting overflow to hidden and on the y axis.', 'duration': 30.241, 'max_score': 792.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s792119.jpg'}, {'end': 892.421, 'src': 'embed', 'start': 843.53, 'weight': 0, 'content': [{'end': 848.052, 'text': 'If I go back and I hit about service, you see that now it works.', 'start': 843.53, 'duration': 4.522}, {'end': 851.273, 'text': "So it's as simple as that to implement the smooth scroll.", 'start': 848.112, 'duration': 3.161}, {'end': 857.096, 'text': "But of course, it's not completely cross browser, cross browser compatible.", 'start': 851.634, 'duration': 5.462}, {'end': 861.778, 'text': "Now, we don't have that effect, the snap effect right away.", 'start': 858.797, 'duration': 2.981}, {'end': 864.139, 'text': "Like if I go right here, it'll actually stop here.", 'start': 861.858, 'duration': 2.281}, {'end': 865.8, 'text': 'I want to get that snap effect.', 'start': 864.239, 'duration': 1.561}, {'end': 867.861, 'text': "So there's two things we need to do.", 'start': 866.48, 'duration': 1.381}, {'end': 876.388, 'text': "One is add the property of scroll snap type and set that to Y because we're dealing with the Y axis.", 'start': 868.061, 'duration': 8.327}, {'end': 880.772, 'text': 'You can also do this horizontally and then set mandatory.', 'start': 876.408, 'duration': 4.364}, {'end': 883.033, 'text': 'You have mandatory and you have proximity.', 'start': 881.072, 'duration': 1.961}, {'end': 887.597, 'text': 'Mandatory is what we want because we want it to mandatory snap to that section.', 'start': 883.434, 'duration': 4.163}, {'end': 890.099, 'text': "Now, just doing that isn't going to work.", 'start': 888.398, 'duration': 1.701}, {'end': 892.421, 'text': 'We have to add one more thing to the section.', 'start': 890.139, 'duration': 2.282}], 'summary': 'Implement smooth scroll with scroll snap type for mandatory snapping to sections.', 'duration': 48.891, 'max_score': 843.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s843530.jpg'}, {'end': 922.026, 'src': 'heatmap', 'start': 894.182, 'weight': 0.73, 'content': [{'end': 902.55, 'text': 'One more property, which is going to be scroll, snap, align, and we want to align center.', 'start': 894.182, 'duration': 8.368}, {'end': 907.855, 'text': "Okay, so now just doing that, if I go back, let's just reload this.", 'start': 902.57, 'duration': 5.285}, {'end': 915.201, 'text': "And now if I take the scroll bar and I move it here and I let go, it's going to go into whatever one is further in the viewport.", 'start': 908.255, 'duration': 6.946}, {'end': 922.026, 'text': "OK, same thing if I use my scroll wheel, so I'm going to scroll up and let go and it goes right back down into place.", 'start': 916.082, 'duration': 5.944}], 'summary': 'Demonstration of scroll snap alignment, ensuring content snaps to center when scrolled.', 'duration': 27.844, 'max_score': 894.182, 'thumbnail': ''}, {'end': 944.964, 'src': 'embed', 'start': 916.082, 'weight': 2, 'content': [{'end': 922.026, 'text': "OK, same thing if I use my scroll wheel, so I'm going to scroll up and let go and it goes right back down into place.", 'start': 916.082, 'duration': 5.944}, {'end': 925.929, 'text': 'If I pass that that threshold, it will go to the next one up.', 'start': 922.167, 'duration': 3.762}, {'end': 927.61, 'text': 'So I really like this.', 'start': 926.51, 'duration': 1.1}, {'end': 927.931, 'text': 'I do.', 'start': 927.691, 'duration': 0.24}, {'end': 931.653, 'text': 'I hope that it gets put in all browsers fairly soon.', 'start': 927.971, 'duration': 3.682}, {'end': 937.057, 'text': "So with that done, let's move on to another solution.", 'start': 932.774, 'duration': 4.283}, {'end': 939.499, 'text': "So I'm going to show you how to do this using jQuery.", 'start': 937.138, 'duration': 2.361}, {'end': 944.964, 'text': "So I'm going to disable what we just did with CSS.", 'start': 940.16, 'duration': 4.804}], 'summary': 'Demonstrates scrolling behavior, expresses preference for feature, and plans to use jquery for solution.', 'duration': 28.882, 'max_score': 916.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s916082.jpg'}], 'start': 792.119, 'title': 'Implementing smooth scrolling with css and jquery', 'summary': 'Demonstrates how to implement smooth scrolling using css and jquery, including setting overflow properties, scroll behavior, scroll snap type, and scroll snap align, resulting in a fluid scrolling experience with mandatory snapping to sections.', 'chapters': [{'end': 966.58, 'start': 792.119, 'title': 'Implementing smooth scrolling with css and jquery', 'summary': 'Demonstrates how to implement smooth scrolling using css and jquery, including setting overflow properties, scroll behavior, scroll snap type, and scroll snap align, resulting in a fluid scrolling experience with mandatory snapping to sections.', 'duration': 174.461, 'highlights': ['The chapter explains setting overflow properties to achieve smooth scrolling and remove scroll bars, resulting in a more seamless user experience.', 'Detailed steps are provided for implementing smooth scrolling, including setting scroll behavior to smooth and adding scroll snap type and scroll snap align properties to achieve mandatory snapping to sections for a fluid scrolling experience.', 'The author also discusses the limitations of the implemented solution and introduces an alternative approach using jQuery to achieve smooth scrolling, providing a comprehensive overview of implementation options.', 'The demonstration explores the impact of disabling the CSS implementation and showcases the differences in the scrolling behavior, highlighting the importance of selecting the appropriate method for achieving the desired user experience.']}], 'duration': 174.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s792119.jpg', 'highlights': ['Detailed steps for implementing smooth scrolling, including setting scroll behavior to smooth and adding scroll snap type and scroll snap align properties for mandatory snapping to sections.', 'The chapter explains setting overflow properties to achieve smooth scrolling and remove scroll bars, resulting in a more seamless user experience.', 'The author discusses the limitations of the implemented solution and introduces an alternative approach using jQuery to achieve smooth scrolling, providing a comprehensive overview of implementation options.', 'The demonstration explores the impact of disabling the CSS implementation and showcases the differences in scrolling behavior, highlighting the importance of selecting the appropriate method for achieving the desired user experience.']}, {'end': 1362.078, 'segs': [{'end': 1033.622, 'src': 'embed', 'start': 966.6, 'weight': 0, 'content': [{'end': 969.482, 'text': "OK, so we're back at square one.", 'start': 966.6, 'duration': 2.882}, {'end': 971.604, 'text': "So let's implement jQuery.", 'start': 970.023, 'duration': 1.581}, {'end': 975.747, 'text': "So I'm going to grab the jQuery CDN.", 'start': 971.744, 'duration': 4.003}, {'end': 985.58, 'text': "And one thing I want to mention is you don't want to use the slim version because we're using the animate method in the slim version.", 'start': 978.297, 'duration': 7.283}, {'end': 988.581, 'text': "I'm pretty sure doesn't have the animate method.", 'start': 985.62, 'duration': 2.961}, {'end': 990.502, 'text': "So we're going to grab the minified version.", 'start': 988.621, 'duration': 1.881}, {'end': 992.683, 'text': "So I'll copy that link to the CDN.", 'start': 990.542, 'duration': 2.141}, {'end': 995.044, 'text': "We'll go to our index page.", 'start': 993.263, 'duration': 1.781}, {'end': 1001.903, 'text': "And right above the body, let's put in a script source and paste that in.", 'start': 995.979, 'duration': 5.924}, {'end': 1007.667, 'text': 'And then I just want to add a script source to our main.js.', 'start': 1002.464, 'duration': 5.203}, {'end': 1014.072, 'text': 'All right, so this is going to take about 15 lines of code or so.', 'start': 1009.028, 'duration': 5.044}, {'end': 1017.454, 'text': "So I'm going to put a comment here, and I'll say option 2.", 'start': 1014.792, 'duration': 2.662}, {'end': 1018.835, 'text': "I'll say jQuery.", 'start': 1017.454, 'duration': 1.381}, {'end': 1025.537, 'text': 'Smooth scroll.', 'start': 1024.776, 'duration': 0.761}, {'end': 1029.339, 'text': 'So we want to grab the links in the nav bar.', 'start': 1026.317, 'duration': 3.022}, {'end': 1030.98, 'text': "So let's put in jQuery.", 'start': 1029.439, 'duration': 1.541}, {'end': 1033.622, 'text': 'We want to grab class nav bar a.', 'start': 1031, 'duration': 2.622}], 'summary': 'Implementing jquery with minified version, adding script to index page and main.js, involving about 15 lines of code.', 'duration': 67.022, 'max_score': 966.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s966600.jpg'}, {'end': 1222.773, 'src': 'embed', 'start': 1187.579, 'weight': 3, 'content': [{'end': 1188.943, 'text': 'And you can see that now it works.', 'start': 1187.579, 'duration': 1.364}, {'end': 1190.949, 'text': 'So that works in Safari as well.', 'start': 1189.445, 'duration': 1.504}, {'end': 1196.852, 'text': 'So another solution is to use smooth scroll.', 'start': 1191.672, 'duration': 5.18}, {'end': 1198.293, 'text': "so i'm just going to search for smooth scroll.", 'start': 1196.852, 'duration': 1.441}, {'end': 1202.054, 'text': "it's the first github link here and it's pretty popular.", 'start': 1198.293, 'duration': 3.761}, {'end': 1208.316, 'text': 'it has over 4 000 stars and to use it we just need to include the cdn.', 'start': 1202.054, 'duration': 6.262}, {'end': 1210.196, 'text': 'so we have a bunch of options here.', 'start': 1208.316, 'duration': 1.88}, {'end': 1211.937, 'text': 'this will always give you the latest version.', 'start': 1210.196, 'duration': 1.741}, {'end': 1222.773, 'text': "i'm going to just grab the specific version here, which is the latest, which is right now, is 14.0, And I'm just going to comment out.", 'start': 1211.937, 'duration': 10.836}], 'summary': 'Smooth scroll github link has over 4,000 stars, latest version is 14.0.', 'duration': 35.194, 'max_score': 1187.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s1187579.jpg'}, {'end': 1276.339, 'src': 'embed', 'start': 1240.624, 'weight': 2, 'content': [{'end': 1249.234, 'text': 'And then as far as the JavaScript, if we look at the documentation, All we have to do is this.', 'start': 1240.624, 'duration': 8.61}, {'end': 1260.643, 'text': 'We just have to set a variable to smooth a new smooth scroll instance and then pass in this a tag or whatever the the selector we want to use.', 'start': 1249.814, 'duration': 10.829}, {'end': 1266.749, 'text': "So I'm actually just going to copy that and let's say option three.", 'start': 1261.104, 'duration': 5.645}, {'end': 1276.339, 'text': "smooth scroll script and we'll go ahead and paste that in.", 'start': 1271.043, 'duration': 5.296}], 'summary': 'To implement smooth scrolling in javascript, set a variable to a new smooth scroll instance and pass in the desired selector.', 'duration': 35.715, 'max_score': 1240.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s1240624.jpg'}, {'end': 1317.46, 'src': 'heatmap', 'start': 1290.229, 'weight': 0.921, 'content': [{'end': 1294.892, 'text': 'And then for this, this will work on any link.', 'start': 1290.229, 'duration': 4.663}, {'end': 1298.134, 'text': "So I'm just going to add in the class of nav bar in front of this.", 'start': 1295.012, 'duration': 3.122}, {'end': 1300.296, 'text': "So let's save that.", 'start': 1299.235, 'duration': 1.061}, {'end': 1301.957, 'text': 'And now we should get the same effect.', 'start': 1300.356, 'duration': 1.601}, {'end': 1305.759, 'text': 'So if I go to about, scrolls down, good.', 'start': 1302.897, 'duration': 2.862}, {'end': 1309.994, 'text': "All right, so that's going to be it, guys.", 'start': 1308.393, 'duration': 1.601}, {'end': 1317.46, 'text': 'I will put a link in the description to the CodePen, which will have all three solutions in it.', 'start': 1310.094, 'duration': 7.366}], 'summary': "Demonstrating universal link functionality, enabling smooth scrolling to 'about' section. codepen includes all three solutions.", 'duration': 27.231, 'max_score': 1290.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s1290229.jpg'}], 'start': 966.6, 'title': 'Implementing and adding smooth scroll functionality', 'summary': 'Covers implementing jquery for smooth scroll, emphasizing the importance of using the minified version due to its support for the animate method, and the process involves adding script sources and writing approximately 15 lines of code. additionally, it explains adding smooth scroll functionality using javascript, including testing for hash values, preventing default behavior, using the animate method to scroll, and integrating the smooth scroll library with over 4,000 stars on github.', 'chapters': [{'end': 1033.622, 'start': 966.6, 'title': 'Implementing jquery for smooth scroll', 'summary': 'Explains the process of implementing jquery for smooth scroll, emphasizing the importance of using the minified version of jquery due to its support for the animate method, and the process involves adding script sources to the index page and main.js, and writing approximately 15 lines of code. additionally, it covers selecting elements using jquery to achieve smooth scrolling.', 'duration': 67.022, 'highlights': ['The process involves adding script sources to the index page and main.js, and writing approximately 15 lines of code.', 'Emphasizing the importance of using the minified version of jQuery due to its support for the animate method.', 'It covers selecting elements using jQuery to achieve smooth scrolling.']}, {'end': 1362.078, 'start': 1033.622, 'title': 'Adding smooth scroll functionality', 'summary': 'Explains the process of adding smooth scroll functionality to a web page using javascript, including testing for hash values, preventing default behavior, using the animate method to scroll, and integrating the smooth scroll library, which has over 4,000 stars on github.', 'duration': 328.456, 'highlights': ['The process of adding smooth scroll functionality to a web page using JavaScript is explained. It includes testing for hash values, preventing default behavior, using the animate method to scroll, and integrating the smooth scroll library.', 'The smooth scroll library has over 4,000 stars on GitHub, indicating its popularity. The speaker mentions that the smooth scroll library has over 4,000 stars on GitHub, highlighting its popularity and reliability.', 'A resource for starting a freelance business is recommended, offering a 25% discount using the code Brad25. A resource for starting a freelance business, studywebdevelopment.com/freelancing, is recommended, offering a 25% discount using the code Brad25 and providing a comprehensive guide and templates.']}], 'duration': 395.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/y9nlfqT4s9s/pics/y9nlfqT4s9s966600.jpg', 'highlights': ['Emphasizing the importance of using the minified version of jQuery due to its support for the animate method.', 'The process involves adding script sources to the index page and main.js, and writing approximately 15 lines of code.', 'The process of adding smooth scroll functionality to a web page using JavaScript is explained. It includes testing for hash values, preventing default behavior, using the animate method to scroll, and integrating the smooth scroll library.', 'The smooth scroll library has over 4,000 stars on GitHub, indicating its popularity.']}], 'highlights': ['The video demonstrates three different methods of implementing smooth scrolling on a landing page, including pure CSS, scroll behavior property, and scroll snap type, providing practical examples for each method.', 'The scroll snap type feature enables a snap effect, ensuring that the content snaps into place based on its position in the viewport, contributing to a visually appealing and intuitive user interface.', 'The scroll behavior property, when set to smooth, delivers a smooth scroll effect on the landing page, enhancing user experience and engagement.', 'The process involves creating a smooth scroll landing page from scratch, including HTML, CSS, and implementing Flexbox.', 'Setting body styles: Setting font family to Arial Helvetica Sans Serif, background to dark gray, color to white, and line height to 1.6, and setting body height to 100 viewport heights.', 'Positioning navbar: Positioning navbar fixed at the top, setting Z index to one, displaying as flex, and setting width to 100% and height to 60 pixels.', 'The chapters covers setting font sizes for different sections, with the paragraph set to 1.5 rem and H1 set to four rem, providing clear guidance for styling (1.5 rem, H1 four rem).', 'The use of flexbox properties, such as setting the flex direction to column instead of row, aligning items and justifying content to the center, and aligning text to the center, ensuring proper alignment and layout (flex direction column, aligning items and justifying content to the center).', 'Additionally, the process of adding background images to each section is discussed, with a focus on utilizing background URLs, setting properties like no-repeat, positioning in the center, and covering the entire space, enhancing the visual appeal and differentiation of sections (background images with properties like no-repeat, center positioning, and covering space).', 'Detailed steps for implementing smooth scrolling, including setting scroll behavior to smooth and adding scroll snap type and scroll snap align properties for mandatory snapping to sections.', 'The chapter explains setting overflow properties to achieve smooth scrolling and remove scroll bars, resulting in a more seamless user experience.', 'The author discusses the limitations of the implemented solution and introduces an alternative approach using jQuery to achieve smooth scrolling, providing a comprehensive overview of implementation options.', 'Emphasizing the importance of using the minified version of jQuery due to its support for the animate method.', 'The process involves adding script sources to the index page and main.js, and writing approximately 15 lines of code.', 'The process of adding smooth scroll functionality to a web page using JavaScript is explained. It includes testing for hash values, preventing default behavior, using the animate method to scroll, and integrating the smooth scroll library.', 'The smooth scroll library has over 4,000 stars on GitHub, indicating its popularity.']}