title
Build a Bootstrap Theme With Scroll Animation

description
In this video we will create a clean Bootstrap theme that implements animation using ScrollReveal. CODE: Code for this project http://www.traversymedia.com/downloads/techscroll.zip ScrollReveal Github: https://github.com/jlmakes/scrollreveal EDUONIX COURSES: Please use affiliate links from website below http://www.traversymedia.com/eduonix-courses 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/bradtraversy

detail
{'title': 'Build a Bootstrap Theme With Scroll Animation', 'heatmap': [{'end': 515.826, 'start': 428.061, 'weight': 1}, {'end': 1802.572, 'start': 1776.067, 'weight': 0.835}], 'summary': "Tutorial titled 'build a bootstrap theme with scroll animation' covers building a bootstrap website with scrollreveal, creating a text scroll project, styling website showcase and testimonial sections, designing html sections, and creating a contact form layout, utilizing bootstrap, jquery, and scrollreveal for animation and scrolling effects.", 'chapters': [{'end': 175.83, 'segs': [{'end': 31.323, 'src': 'embed', 'start': 0.71, 'weight': 0, 'content': [{'end': 2.572, 'text': 'Hey guys, welcome to another project build.', 'start': 0.71, 'duration': 1.862}, {'end': 10.222, 'text': "I feel like I've been neglecting my front-end developer audience a little bit lately, so I wanted to do a simple project for you guys.", 'start': 3.013, 'duration': 7.209}, {'end': 17.571, 'text': "We're going to be building a bootstrap website or theme, whatever you want to call it, that implements a little bit of animation and scrolling effect.", 'start': 10.643, 'duration': 6.928}, {'end': 20.854, 'text': "So we're going to do this with a package called ScrollReveal.", 'start': 18.132, 'duration': 2.722}, {'end': 31.323, 'text': "And what this does is it allows us to add a little bit of JavaScript to make any element that we want on the page animate when it's loaded or when we scroll down to it.", 'start': 21.415, 'duration': 9.908}], 'summary': 'Creating a bootstrap website with animation using scrollreveal for front-end developers.', 'duration': 30.613, 'max_score': 0.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi4710.jpg'}, {'end': 115.914, 'src': 'embed', 'start': 89.039, 'weight': 1, 'content': [{'end': 93.121, 'text': "I mean, you don't want too much going on, but I think that that looks pretty nice.", 'start': 89.039, 'duration': 4.082}, {'end': 99.283, 'text': 'So I modeled this website or this theme after this ydirection.com slash advent.', 'start': 93.161, 'duration': 6.122}, {'end': 104.925, 'text': "If we reload this, you'll see it has the same, not the exact same, but similar effects.", 'start': 99.763, 'duration': 5.162}, {'end': 109.349, 'text': 'And then as we scroll down, you can see that things kind of pop in.', 'start': 105.987, 'duration': 3.362}, {'end': 115.914, 'text': 'I mean, this is a production site, so obviously this is a little better than my little site that I created in about 45 minutes.', 'start': 109.369, 'duration': 6.545}], 'summary': 'Website modeled after ydirection.com/advent with similar effects, pop-in elements, and created in 45 minutes.', 'duration': 26.875, 'max_score': 89.039, 'thumbnail': ''}, {'end': 160.457, 'src': 'embed', 'start': 131.963, 'weight': 2, 'content': [{'end': 138.227, 'text': "this is from just a block of jQuery code that we're going to use, and you can use that in your future projects as well.", 'start': 131.963, 'duration': 6.264}, {'end': 140.268, 'text': "So that's what we'll be building.", 'start': 139.247, 'duration': 1.021}, {'end': 142.449, 'text': 'This is the GitHub page for ScrollReveal.', 'start': 140.348, 'duration': 2.101}, {'end': 144.429, 'text': 'This has all the documentation.', 'start': 142.809, 'duration': 1.62}, {'end': 150.852, 'text': "You can see we can install it with NPM or Bower if we want, but I'm going to go the easy way and just use the script tag.", 'start': 144.69, 'duration': 6.162}, {'end': 160.457, 'text': 'And then what you do is take an element, for instance this div with the class of foo, and just stick it in this sr.reveal,', 'start': 151.953, 'duration': 8.504}], 'summary': 'Using scrollreveal library to add animation to elements in web projects.', 'duration': 28.494, 'max_score': 131.963, 'thumbnail': ''}], 'start': 0.71, 'title': 'Building bootstrap website with scrollreveal', 'summary': 'Discusses building a bootstrap website with scrollreveal, implementing animation and scrolling effects, inspired by ydirection.com/advent, and utilizing jquery for additional functionality.', 'chapters': [{'end': 175.83, 'start': 0.71, 'title': 'Building bootstrap website with scrollreveal', 'summary': 'Discusses building a bootstrap website with scrollreveal, implementing animation and scrolling effects, inspired by ydirection.com/advent, and utilizing jquery for additional functionality.', 'duration': 175.12, 'highlights': ['The chapter discusses building a bootstrap website with ScrollReveal, implementing animation and scrolling effects. The project involves creating a bootstrap website with animation and scrolling effects using ScrollReveal to make elements animate when loaded or scrolled to, with customizable options.', 'The project is inspired by ydirection.com/advent, and utilizes jQuery for additional functionality. The website theme is modeled after ydirection.com/advent, with similar pop-in effects, and utilizes jQuery for functionality like link navigation and maintaining the navbar shown.', 'Documentation for ScrollReveal is available on GitHub, offering installation options and configurations. The GitHub page for ScrollReveal provides documentation, including installation options with NPM or Bower, as well as various configurations for customizing the animation effects.']}], 'duration': 175.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi4710.jpg', 'highlights': ['The project involves creating a bootstrap website with animation and scrolling effects using ScrollReveal.', 'The website theme is modeled after ydirection.com/advent, with similar pop-in effects, and utilizes jQuery for functionality.', 'Documentation for ScrollReveal is available on GitHub, offering installation options and configurations.']}, {'end': 762.285, 'segs': [{'end': 209.62, 'src': 'embed', 'start': 175.83, 'weight': 5, 'content': [{'end': 177.412, 'text': "so that's what we will be building.", 'start': 175.83, 'duration': 1.582}, {'end': 185.727, 'text': "I'm just going to go over to my desktop and create a new folder And I'm just going to call this text scroll Okay,", 'start': 178.073, 'duration': 7.654}, {'end': 188.529, 'text': "and then we're going to open that from within my editor.", 'start': 185.727, 'duration': 2.802}, {'end': 191.35, 'text': "I'm using Atom, but you can use whatever you'd like.", 'start': 188.549, 'duration': 2.801}, {'end': 198.094, 'text': "So I'm going to say add project folder, desktop tech scroll, and then we're going to create some files.", 'start': 191.53, 'duration': 6.564}, {'end': 209.62, 'text': "So we're going to need an index HTML file and then we're going to want a folder for CSS, a folder for images, which I'll call IMG,", 'start': 198.174, 'duration': 11.446}], 'summary': 'Creating a new folder for a project and adding files for index html, css, and images.', 'duration': 33.79, 'max_score': 175.83, 'thumbnail': ''}, {'end': 307.771, 'src': 'embed', 'start': 227.829, 'weight': 0, 'content': [{'end': 229.21, 'text': 'You can install that if you want.', 'start': 227.829, 'duration': 1.381}, {'end': 241.476, 'text': "If you if you're using Adam, you can go to settings and go to install and we want to search for I think it's live server, I believe.", 'start': 229.39, 'duration': 12.086}, {'end': 244.538, 'text': "Let's see.", 'start': 243.878, 'duration': 0.66}, {'end': 249.687, 'text': "Or maybe it's Live Reload.", 'start': 247.484, 'duration': 2.203}, {'end': 256.293, 'text': 'Where is it? Right here.', 'start': 255.293, 'duration': 1}, {'end': 258.297, 'text': "This is what I'm using, Atom Live Server.", 'start': 256.374, 'duration': 1.923}, {'end': 266.912, 'text': "So if you go ahead and install that, you'll be able to go up to Packages, Live Server, and I'm going to start this on port 4000.", 'start': 258.697, 'duration': 8.215}, {'end': 267.812, 'text': "okay, so there's.", 'start': 266.912, 'duration': 0.9}, {'end': 270.634, 'text': "there's our website, which is blank at the moment.", 'start': 267.812, 'duration': 2.822}, {'end': 271.994, 'text': "okay, now, you don't have to do that.", 'start': 270.634, 'duration': 1.36}, {'end': 278.497, 'text': 'you can simply open the index.html file if you want, or you can use a different kind of server, whatever you want to do.', 'start': 271.994, 'duration': 6.503}, {'end': 283.779, 'text': "so first thing we'll do is just put in some HTML tags, our head and body and all that.", 'start': 278.497, 'duration': 5.282}, {'end': 294.444, 'text': "so in the title I'm just going to say text scroll, and then what we'll do is grab the script tag for scroll reveal, which is right here.", 'start': 283.779, 'duration': 10.665}, {'end': 299.207, 'text': 'So all we have to do is paste that in and we can use it.', 'start': 296.966, 'duration': 2.241}, {'end': 302.248, 'text': "So we're also going to need Bootstrap.", 'start': 300.308, 'duration': 1.94}, {'end': 303.589, 'text': "I'm going to use the CDN.", 'start': 302.328, 'duration': 1.261}, {'end': 307.771, 'text': 'So you can get that at bootstrapcdn.com.', 'start': 304.149, 'duration': 3.622}], 'summary': 'Install atom live server, use port 4000, add html tags, scroll reveal script, and bootstrap cdn for website setup.', 'duration': 79.942, 'max_score': 227.829, 'thumbnail': ''}, {'end': 519.448, 'src': 'heatmap', 'start': 425.439, 'weight': 3, 'content': [{'end': 427.741, 'text': "So we're going to start at the top and work our way down.", 'start': 425.439, 'duration': 2.302}, {'end': 433.385, 'text': "We're going to build out the interface, and then we'll add the animation and stuff.", 'start': 428.061, 'duration': 5.324}, {'end': 435.327, 'text': "All right, so we're going to start with the nav bar.", 'start': 433.605, 'duration': 1.722}, {'end': 445.574, 'text': 'So when I do a bootstrap nav bar, I usually just go to Get Bootstrap, and then go to Getting Started, and Examples, and then the Starter Template.', 'start': 435.967, 'duration': 9.607}, {'end': 446.915, 'text': "And then we'll do a Control-U.", 'start': 445.935, 'duration': 0.98}, {'end': 449.897, 'text': "And I'll just grab this nav tag here.", 'start': 447.836, 'duration': 2.061}, {'end': 453.518, 'text': 'This has all the markup we need for it to be responsive and all that.', 'start': 450.477, 'duration': 3.041}, {'end': 458.179, 'text': "So we'll put that right under the body, the opening body tag.", 'start': 454.398, 'duration': 3.781}, {'end': 462.601, 'text': "And we're going to keep the nav bar fixed top because we always want it at the top.", 'start': 458.98, 'duration': 3.621}, {'end': 465.382, 'text': "I'm going to change this to nav bar default.", 'start': 463.241, 'duration': 2.141}, {'end': 469.723, 'text': "And then we're going to change the project name to text scroll.", 'start': 466.622, 'duration': 3.101}, {'end': 476.174, 'text': "And for the navigation here, well, first of all, we'll get rid of this active class.", 'start': 471.833, 'duration': 4.341}, {'end': 480.455, 'text': 'And then home is actually going to go to the ID of showcase.', 'start': 477.034, 'duration': 3.421}, {'end': 483.916, 'text': 'About is going to go to the ID of info1.', 'start': 481.315, 'duration': 2.601}, {'end': 486.636, 'text': 'And contact will go to contact.', 'start': 484.856, 'duration': 1.78}, {'end': 490.357, 'text': "And that's all we need to do for the navbar as far as the markup.", 'start': 487.296, 'duration': 3.061}, {'end': 491.337, 'text': "So let's save that.", 'start': 490.437, 'duration': 0.9}, {'end': 496.398, 'text': 'And if we go back, and now you see we have our navbar.', 'start': 492.818, 'duration': 3.58}, {'end': 498.939, 'text': 'Now I want to get rid of the gray background and this border.', 'start': 496.438, 'duration': 2.501}, {'end': 502.117, 'text': 'I also want to move these links over to the right.', 'start': 499.895, 'duration': 2.222}, {'end': 508.761, 'text': "So this UL right here, we're just going to add navbar-right, and that'll float those over.", 'start': 502.237, 'duration': 6.524}, {'end': 515.826, 'text': "And then we're going to go to our style CSS, and we want to get rid of the background of that navbar.", 'start': 510.122, 'duration': 5.704}, {'end': 519.448, 'text': "So let's do .navbar-default.", 'start': 516.347, 'duration': 3.101}], 'summary': 'Building a responsive nav bar with bootstrap, adding links for home, about, and contact, and customizing the appearance by removing background and border.', 'duration': 94.009, 'max_score': 425.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi4425439.jpg'}, {'end': 633.397, 'src': 'embed', 'start': 597.584, 'weight': 4, 'content': [{'end': 600.646, 'text': "And we're going to go right under the nav and put in a section tag.", 'start': 597.584, 'duration': 3.062}, {'end': 602.727, 'text': 'All right.', 'start': 602.447, 'duration': 0.28}, {'end': 605.349, 'text': 'So section is an HTML5 tag.', 'start': 602.747, 'duration': 2.602}, {'end': 610.512, 'text': "And we're going to give this an ID of showcase.", 'start': 606.029, 'duration': 4.483}, {'end': 615.255, 'text': "OK And then in the showcase, we're going to put a container.", 'start': 612.253, 'duration': 3.002}, {'end': 622.648, 'text': "Okay, container, we'll just basically move it away from the sides, put it in the middle.", 'start': 618.985, 'duration': 3.663}, {'end': 633.397, 'text': "And then we want a row because we're using the grid system, bootstrap grid system, and we're going to have two six column rows.", 'start': 623.589, 'duration': 9.808}], 'summary': "Creating an html5 section with id 'showcase' containing a centered container and two six-column rows.", 'duration': 35.813, 'max_score': 597.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi4597584.jpg'}], 'start': 175.83, 'title': 'Creating a text scroll project with bootstrap and scroll reveal', 'summary': 'Covers setting up a project for creating a text scroll, including creating folders for html, css, and images, using a live server package, setting up html structure, adding bootstrap and scroll reveal scripts, linking stylesheets and fonts, building a responsive navbar, and creating a showcase area with image and text using bootstrap grid system.', 'chapters': [{'end': 278.497, 'start': 175.83, 'title': 'Creating text scroll project', 'summary': 'Covers the process of setting up a new project for creating a text scroll, including creating folders for html, css, and images, and using a live server package for atom to open the current directory on local host.', 'duration': 102.667, 'highlights': ['The chapter explains the process of setting up a new project for creating a text scroll, including creating folders for HTML, CSS, and images.', 'The chapter demonstrates the use of the live server package for Atom to open the current directory on local host.', 'The chapter suggests installing the Atom Live Server package and starting it on port 4000 for local hosting.', 'Alternative methods for local hosting and project setup are also mentioned, providing flexibility for different preferences.']}, {'end': 762.285, 'start': 278.497, 'title': 'Creating text scroll with bootstrap and scroll reveal', 'summary': 'Covers the process of setting up the html structure for a text scroll page, including adding bootstrap and scroll reveal scripts, linking stylesheets and fonts, building a responsive navbar, and creating a showcase area with image and text using bootstrap grid system.', 'duration': 483.788, 'highlights': ['Setting up HTML structure and adding Bootstrap and Scroll Reveal scripts The process includes adding HTML tags, linking the Scroll Reveal script, and using Bootstrap CDN to include Bootstrap and jQuery scripts, as well as linking custom stylesheets and Google fonts.', 'Building a responsive navbar The chapter explains the process of creating a responsive navbar using Bootstrap, including modifying the markup, changing styles in style.css, and making the branding more prominent by adjusting font size, color, and weight.', 'Creating a showcase area with image and text using Bootstrap grid system The showcase area is built using HTML5 tags such as section and div, and the Bootstrap grid system is utilized to display an image and text in a responsive layout.']}], 'duration': 586.455, 'thumbnail': '', 'highlights': ['The chapter demonstrates the use of the live server package for Atom to open the current directory on local host.', 'The chapter suggests installing the Atom Live Server package and starting it on port 4000 for local hosting.', 'The process includes adding HTML tags, linking the Scroll Reveal script, and using Bootstrap CDN to include Bootstrap and jQuery scripts, as well as linking custom stylesheets and Google fonts.', 'Building a responsive navbar The chapter explains the process of creating a responsive navbar using Bootstrap, including modifying the markup, changing styles in style.css, and making the branding more prominent by adjusting font size, color, and weight.', 'Creating a showcase area with image and text using Bootstrap grid system The showcase area is built using HTML5 tags such as section and div, and the Bootstrap grid system is utilized to display an image and text in a responsive layout.', 'The chapter explains the process of setting up a new project for creating a text scroll, including creating folders for HTML, CSS, and images.', 'Alternative methods for local hosting and project setup are also mentioned, providing flexibility for different preferences.']}, {'end': 1192.465, 'segs': [{'end': 898.463, 'src': 'embed', 'start': 762.285, 'weight': 0, 'content': [{'end': 769.27, 'text': "alright. so the button that is on that side we don't want in the showcase right, because we want that animation separate.", 'start': 762.285, 'duration': 6.985}, {'end': 783.4, 'text': "okay, remember, it has a little delay, so we're gonna go under that div and then put in an a tag with the class of btn, btn, default, btn-lg.", 'start': 769.27, 'duration': 14.13}, {'end': 791.546, 'text': "that'll make it a little bigger and also showcase-btn, which is our own class.", 'start': 783.4, 'duration': 8.146}, {'end': 793.347, 'text': "okay, and that's just going to say read more.", 'start': 791.546, 'duration': 1.801}, {'end': 797.247, 'text': "So let's go ahead and save it and take a look.", 'start': 795.666, 'duration': 1.581}, {'end': 800.25, 'text': 'All right, now notice everything is under the nav bar.', 'start': 798.068, 'duration': 2.182}, {'end': 802.312, 'text': "That's because we have the fixed top class.", 'start': 800.27, 'duration': 2.042}, {'end': 807.436, 'text': 'So a solution for that is to add to the body a margin top pushing everything down.', 'start': 802.912, 'duration': 4.524}, {'end': 809.698, 'text': "So let's go back to our CSS.", 'start': 808.097, 'duration': 1.601}, {'end': 811.72, 'text': "And we're going to put in body.", 'start': 810.159, 'duration': 1.561}, {'end': 817.886, 'text': "And let's say margin top 70 pixels.", 'start': 813.642, 'duration': 4.244}, {'end': 821.509, 'text': 'OK, so that should push everything down.', 'start': 819.207, 'duration': 2.302}, {'end': 826.547, 'text': 'Good So now we just have some styles for the showcase that we need to add.', 'start': 821.589, 'duration': 4.958}, {'end': 831.628, 'text': "So let's go back to our style sheet and the heading right here.", 'start': 826.587, 'duration': 5.041}, {'end': 833.769, 'text': 'I want this to be bigger.', 'start': 831.708, 'duration': 2.061}, {'end': 837.55, 'text': "I'm going to set that to 50 pixels and also add some margin underneath.", 'start': 833.789, 'duration': 3.761}, {'end': 850.514, 'text': "So let's say the idea of showcase, we want the H1 and we're going to set the font size to 50 pixels and then set a margin bottom.", 'start': 838.61, 'duration': 11.904}, {'end': 855.22, 'text': 'to 20 pixels.', 'start': 853.098, 'duration': 2.122}, {'end': 856.941, 'text': 'now all the headings on the site.', 'start': 855.22, 'duration': 1.721}, {'end': 858.803, 'text': 'I want to have the Poppins font.', 'start': 856.941, 'duration': 1.862}, {'end': 864.848, 'text': "so I'm gonna go right into the body here.", 'start': 858.803, 'duration': 6.045}, {'end': 873.455, 'text': "h5. I mean h1 through h6 and let's say font family.", 'start': 864.848, 'duration': 8.607}, {'end': 882.394, 'text': "we're gonna set that to Poppins and then for the paragraphs We're going to set that font family to Roboto.", 'start': 873.455, 'duration': 8.939}, {'end': 882.934, 'text': 'I think it is.', 'start': 882.394, 'duration': 0.54}, {'end': 889.818, 'text': 'Okay, save that.', 'start': 882.954, 'duration': 6.864}, {'end': 893.86, 'text': 'Okay, so you can see the font type has changed now.', 'start': 889.838, 'duration': 4.022}, {'end': 898.463, 'text': 'So back to the showcase.', 'start': 897.122, 'duration': 1.341}], 'summary': 'Adjustments made to showcase: added button, adjusted margins, and changed font types.', 'duration': 136.178, 'max_score': 762.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi4762285.jpg'}, {'end': 964.612, 'src': 'embed', 'start': 931.506, 'weight': 4, 'content': [{'end': 933.467, 'text': 'now I want to move this down more.', 'start': 931.506, 'duration': 1.961}, {'end': 935.989, 'text': "so it's kind of in the middle of the image.", 'start': 933.467, 'duration': 2.522}, {'end': 938.31, 'text': 'and remember that has a class of showcase right.', 'start': 935.989, 'duration': 2.321}, {'end': 944.906, 'text': "So we'll say ID showcase and then class showcase right.", 'start': 940.205, 'duration': 4.701}, {'end': 951.308, 'text': "And we're just going to set margin top to 90 pixels.", 'start': 946.147, 'duration': 5.161}, {'end': 955.389, 'text': "And now that's pushed down.", 'start': 954.209, 'duration': 1.18}, {'end': 957.29, 'text': 'All right.', 'start': 955.409, 'duration': 1.881}, {'end': 960.591, 'text': 'I also want to just put a line break right before that button.', 'start': 957.51, 'duration': 3.081}, {'end': 964.612, 'text': "So right here, we'll just put in a BR tag.", 'start': 962.471, 'duration': 2.141}], 'summary': 'Adjusting image position and adding line break for button placement.', 'duration': 33.106, 'max_score': 931.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi4931506.jpg'}, {'end': 1073.23, 'src': 'embed', 'start': 1028.964, 'weight': 5, 'content': [{'end': 1034.028, 'text': "And then here we're just going to put a hyphen and then John Doe.", 'start': 1028.964, 'duration': 5.064}, {'end': 1037.189, 'text': "So let's save that.", 'start': 1036.289, 'duration': 0.9}, {'end': 1039.271, 'text': 'Okay, there it is.', 'start': 1037.209, 'duration': 2.062}, {'end': 1042.873, 'text': "So now we're going to go back to our style sheet.", 'start': 1040.972, 'duration': 1.901}, {'end': 1048.756, 'text': "And let's see, we're going to work with the ID of testimonial.", 'start': 1045.934, 'duration': 2.822}, {'end': 1058.142, 'text': "We're going to set the background of that to a really light gray, so F1 three times.", 'start': 1052.079, 'duration': 6.063}, {'end': 1073.23, 'text': "And we're going to set the padding to 50 top, 0, 30 on the bottom, and then 0.", 'start': 1059.683, 'duration': 13.547}], 'summary': 'Styling the testimonial id with light gray background and specific padding values.', 'duration': 44.266, 'max_score': 1028.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41028964.jpg'}, {'end': 1192.465, 'src': 'embed', 'start': 1157.908, 'weight': 7, 'content': [{'end': 1158.548, 'text': "Let's try that.", 'start': 1157.908, 'duration': 0.64}, {'end': 1163.529, 'text': "Yeah, I guess that's fine.", 'start': 1158.568, 'duration': 4.961}, {'end': 1167.508, 'text': 'But the customer right here, I want that to be smaller.', 'start': 1165.066, 'duration': 2.442}, {'end': 1175.815, 'text': "So let's go back to the style and go say testimonial P dot customer.", 'start': 1168.429, 'duration': 7.386}, {'end': 1178.938, 'text': "And then I'm going to set the font size.", 'start': 1177.316, 'duration': 1.622}, {'end': 1186.023, 'text': "And we're going to set that to 20 pixels and then make it a little lighter.", 'start': 1178.958, 'duration': 7.065}, {'end': 1188.846, 'text': 'So color will be triple six.', 'start': 1186.103, 'duration': 2.743}, {'end': 1192.465, 'text': 'There we go.', 'start': 1192.045, 'duration': 0.42}], 'summary': 'Adjusting customer testimonial font size to 20 pixels and color to #666.', 'duration': 34.557, 'max_score': 1157.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41157908.jpg'}], 'start': 762.285, 'title': 'Website showcase and testimonial section styling', 'summary': 'Covers adding a button and adjusting styling for a website showcase, including setting a margin top, increasing font size, and changing font type. it also involves adjusting the showcase section by setting its image width to 90% and applying a left margin of 60 pixels, then positioning it vertically and adding a line break before the button. additionally, creating and styling the testimonial section with a light gray background, specific padding, centered alignment, and customized font sizes and colors.', 'chapters': [{'end': 898.463, 'start': 762.285, 'title': 'Website showcase styling', 'summary': 'Covers adding a button and adjusting styling for a website showcase, including setting a margin top, increasing font size, and changing font type.', 'duration': 136.178, 'highlights': ["Adding a button to the showcase with a class of 'btn, btn, default, btn-lg' and 'showcase-btn' to make it bigger and separate from the animation.", 'Setting a margin top of 70 pixels for the body to push content down and prevent overlap with the fixed top navigation bar.', 'Increasing the font size of the heading in the showcase to 50 pixels and adding a margin underneath.', "Changing the font type of all headings on the site to 'Poppins' and setting the font family of paragraphs to 'Roboto'."]}, {'end': 1192.465, 'start': 899.603, 'title': 'Adjusting showcase and testimonial sections', 'summary': 'Involves adjusting the showcase section by setting its image width to 90% and applying a left margin of 60 pixels, then positioning it vertically and adding a line break before the button. additionally, creating and styling the testimonial section with a light gray background, specific padding, centered alignment, and customized font sizes and colors.', 'duration': 292.862, 'highlights': ['Adjusting the showcase section by setting its image width to 90% and applying a left margin of 60 pixels, then positioning it vertically and adding a line break before the button.', 'Creating and styling the testimonial section with a light gray background, specific padding, centered alignment, and customized font sizes and colors.', "Setting the testimonial section's background to a light gray color (F1F1F1) and applying specific padding and text alignment.", "Styling the testimonial section's text by setting the font size to 32 pixels, using the 'Josefin Sans' font family, and adjusting the color to black.", "Adjusting the font size and color of the customer's name within the testimonial section to 20 pixels and '666' color code, respectively."]}], 'duration': 430.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi4762285.jpg', 'highlights': ["Adding a button to the showcase with a class of 'btn, btn, default, btn-lg' and 'showcase-btn' to make it bigger and separate from the animation.", 'Setting a margin top of 70 pixels for the body to push content down and prevent overlap with the fixed top navigation bar.', 'Increasing the font size of the heading in the showcase to 50 pixels and adding a margin underneath.', "Changing the font type of all headings on the site to 'Poppins' and setting the font family of paragraphs to 'Roboto'.", 'Adjusting the showcase section by setting its image width to 90% and applying a left margin of 60 pixels, then positioning it vertically and adding a line break before the button.', 'Creating and styling the testimonial section with a light gray background, specific padding, centered alignment, and customized font sizes and colors.', "Setting the testimonial section's background to a light gray color (F1F1F1) and applying specific padding and text alignment.", "Styling the testimonial section's text by setting the font size to 32 pixels, using the 'Josefin Sans' font family, and adjusting the color to black.", "Adjusting the font size and color of the customer's name within the testimonial section to 20 pixels and '666' color code, respectively."]}, {'end': 1452.531, 'segs': [{'end': 1332.414, 'src': 'embed', 'start': 1193.826, 'weight': 0, 'content': [{'end': 1196.988, 'text': 'All right, so now the next thing we want to do is this right here.', 'start': 1193.826, 'duration': 3.162}, {'end': 1199.429, 'text': 'This is info1, and then this is info2.', 'start': 1197.008, 'duration': 2.421}, {'end': 1201.651, 'text': "So let's go back to our HTML.", 'start': 1199.509, 'duration': 2.142}, {'end': 1203.812, 'text': "Let's throw in our section.", 'start': 1202.491, 'duration': 1.321}, {'end': 1213.478, 'text': 'Okay, and this section is going to have an ID of info1.', 'start': 1203.832, 'duration': 9.646}, {'end': 1220.397, 'text': "And we're going to have two six column divs here, just like the showcase.", 'start': 1215.954, 'duration': 4.443}, {'end': 1222.718, 'text': "So let's first put in a container.", 'start': 1220.477, 'duration': 2.241}, {'end': 1227.721, 'text': 'All right.', 'start': 1222.738, 'duration': 4.983}, {'end': 1231.163, 'text': "And then in the container, we're going to have a row.", 'start': 1227.801, 'duration': 3.362}, {'end': 1238.667, 'text': "And then we're going to have our call MD6, call SM6.", 'start': 1233.184, 'duration': 5.483}, {'end': 1243.05, 'text': "And I'm just going to copy that because we need two of these.", 'start': 1240.889, 'duration': 2.161}, {'end': 1246.974, 'text': "So on this side, we're going to have an image.", 'start': 1245.273, 'duration': 1.701}, {'end': 1251.916, 'text': "I'm going to wrap this in a div with the class of info-right.", 'start': 1247.054, 'duration': 4.862}, {'end': 1256.598, 'text': "I'm sorry, info-left for this one.", 'start': 1254.377, 'duration': 2.221}, {'end': 1267.302, 'text': 'And then the image, which will have a source attribute of img slash image2.png.', 'start': 1257.998, 'duration': 9.304}, {'end': 1270.664, 'text': "And then on this side, we'll have a div.", 'start': 1268.843, 'duration': 1.821}, {'end': 1275.343, 'text': 'with the class of info write.', 'start': 1271.96, 'duration': 3.383}, {'end': 1278.066, 'text': "And in here, we'll have an H2.", 'start': 1276.605, 'duration': 1.461}, {'end': 1285.593, 'text': "That'll say get to know Google Home.", 'start': 1280.769, 'duration': 4.824}, {'end': 1290.838, 'text': "And then a paragraph, and I'm just going to grab that text real quick.", 'start': 1287.815, 'duration': 3.023}, {'end': 1292.76, 'text': 'Throw that in.', 'start': 1292.18, 'duration': 0.58}, {'end': 1293.401, 'text': 'There we go.', 'start': 1293.121, 'duration': 0.28}, {'end': 1300.082, 'text': "Okay, and then we're going to have the button right under the paragraph.", 'start': 1295.478, 'duration': 4.604}, {'end': 1312.772, 'text': "Actually, we're going to put a line break and then the button, which is a link with the class of BTN and then BTN default and BTN LG.", 'start': 1300.962, 'duration': 11.81}, {'end': 1314.173, 'text': 'That will make it larger.', 'start': 1313.252, 'duration': 0.921}, {'end': 1318.256, 'text': 'And this will just say read more as well.', 'start': 1316.555, 'duration': 1.701}, {'end': 1320.478, 'text': "All right, let's save it.", 'start': 1318.276, 'duration': 2.202}, {'end': 1325.693, 'text': "And let's go back to our version and reload.", 'start': 1322.472, 'duration': 3.221}, {'end': 1327.173, 'text': "And that's what it looks like.", 'start': 1326.313, 'duration': 0.86}, {'end': 1330.614, 'text': 'So we want to do a little bit of styling over here.', 'start': 1327.853, 'duration': 2.761}, {'end': 1332.414, 'text': "So let's go back to style CSS.", 'start': 1330.694, 'duration': 1.72}], 'summary': 'Creating html section with two six-column divs and styling in style css.', 'duration': 138.588, 'max_score': 1193.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41193826.jpg'}], 'start': 1193.826, 'title': 'Html section and website design', 'summary': 'Covers creating an html section with two six-column divs and coding html and css for website design, including adding divs, paragraphs, buttons, and adjusting styling. it provides practical examples and uses image sources and attributes for implementation.', 'chapters': [{'end': 1267.302, 'start': 1193.826, 'title': 'Html section with two columns', 'summary': 'Covers creating an html section with two six-column divs, with an id of info1, and including an image with a source attribute of img/image2.png.', 'duration': 73.476, 'highlights': ['Creating an HTML section with two six-column divs', 'Setting the ID of the section to info1', 'Including an image with a source attribute of img/image2.png']}, {'end': 1452.531, 'start': 1268.843, 'title': 'Coding html and css for website design', 'summary': 'Covers the process of coding html and css for website design, including adding divs, paragraphs, buttons, and adjusting styling such as margins and font size.', 'duration': 183.688, 'highlights': ['The process of coding HTML and CSS for website design involves adding divs, paragraphs, buttons, and making styling adjustments like setting margins and font size.', 'Styling adjustments such as adding margins and increasing font size are made using CSS to enhance the visual appearance of the web content.', 'Creating multiple sections within a webpage involves duplicating and modifying existing code, such as copying and adjusting content for Info 1 and Info 2 sections.', 'The use of HTML elements like H2, paragraphs, and buttons, along with CSS classes, is demonstrated in the process of building webpage components.']}], 'duration': 258.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41193826.jpg', 'highlights': ['Creating an HTML section with two six-column divs', 'The process of coding HTML and CSS for website design involves adding divs, paragraphs, buttons, and making styling adjustments', 'Styling adjustments such as adding margins and increasing font size are made using CSS to enhance the visual appearance of the web content', 'The use of HTML elements like H2, paragraphs, and buttons, along with CSS classes, is demonstrated in the process of building webpage components', 'Creating multiple sections within a webpage involves duplicating and modifying existing code, such as copying and adjusting content for Info 1 and Info 2 sections', 'Setting the ID of the section to info1', 'Including an image with a source attribute of img/image2.png']}, {'end': 2143.83, 'segs': [{'end': 1521.108, 'src': 'embed', 'start': 1456.684, 'weight': 0, 'content': [{'end': 1462.366, 'text': "there we go and now we'll move on to what the contact area.", 'start': 1456.684, 'duration': 5.682}, {'end': 1463.847, 'text': "so let's go under this section.", 'start': 1462.366, 'duration': 1.481}, {'end': 1464.447, 'text': 'put a new one.', 'start': 1463.847, 'duration': 0.6}, {'end': 1480.853, 'text': "alright, in this section is going to have an ID of contact and it'll have a container and a row.", 'start': 1464.447, 'duration': 16.406}, {'end': 1486.787, 'text': 'So this will be call.', 'start': 1485.626, 'duration': 1.161}, {'end': 1488.488, 'text': 'This is actually going to be a 5 column.', 'start': 1486.947, 'duration': 1.541}, {'end': 1493.05, 'text': 'So call md-5 and then call sm-5.', 'start': 1489.168, 'duration': 3.882}, {'end': 1496.712, 'text': "So we'll have a 5 column and a 7 column.", 'start': 1493.29, 'duration': 3.422}, {'end': 1503.326, 'text': 'The form will go in the 5 column.', 'start': 1501.744, 'duration': 1.582}, {'end': 1504.908, 'text': "Nothing's going to go in the 7 column.", 'start': 1503.366, 'duration': 1.542}, {'end': 1509.795, 'text': "You'll see if we look at the final version, there's nothing over here in the 7.", 'start': 1504.928, 'duration': 4.867}, {'end': 1512.057, 'text': 'The form will go in the 5 column.', 'start': 1509.795, 'duration': 2.262}, {'end': 1512.738, 'text': "So let's do that.", 'start': 1512.077, 'duration': 0.661}, {'end': 1517.985, 'text': "Now for the form, I'm going to just paste this in because I don't want to waste too much time here.", 'start': 1513.479, 'duration': 4.506}, {'end': 1519.907, 'text': 'with stupid stuff.', 'start': 1518.906, 'duration': 1.001}, {'end': 1521.108, 'text': "so I'm going to paste it in see.", 'start': 1519.907, 'duration': 1.201}], 'summary': 'Creating a contact section with 5-column form and 7-column container.', 'duration': 64.424, 'max_score': 1456.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41456684.jpg'}, {'end': 1586.599, 'src': 'embed', 'start': 1548.329, 'weight': 3, 'content': [{'end': 1559.834, 'text': "So let's go back to style And we'll say info 2 And we're gonna add margin.", 'start': 1548.329, 'duration': 11.505}, {'end': 1576.533, 'text': 'so top 20 pixels, Sides will have 0, bottom will have 60 pixels and Okay, and then for contact, we want to set that image for the background.', 'start': 1559.834, 'duration': 16.699}, {'end': 1577.874, 'text': "So let's say background.", 'start': 1576.593, 'duration': 1.281}, {'end': 1580.215, 'text': "So we'll set URL.", 'start': 1577.894, 'duration': 2.321}, {'end': 1583.077, 'text': "That's going to be dot dot slash.", 'start': 1581.336, 'duration': 1.741}, {'end': 1586.599, 'text': "Okay, because we're in the style style CSS folder.", 'start': 1584.158, 'duration': 2.441}], 'summary': 'Adjusting style info 2 with 20px top margin, 0px sides, and 60px bottom; setting contact background image.', 'duration': 38.27, 'max_score': 1548.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41548329.jpg'}, {'end': 1802.572, 'src': 'heatmap', 'start': 1776.067, 'weight': 0.835, 'content': [{'end': 1783.811, 'text': "Let's set the duration to two seconds, which is going to be 2000, because it goes by milliseconds,", 'start': 1776.067, 'duration': 7.744}, {'end': 1793.324, 'text': "and Let's set the origin Basically where we want it to come from, and I'm going to say bottom and All right.", 'start': 1783.811, 'duration': 9.513}, {'end': 1795.186, 'text': "So let's save that and see if it works.", 'start': 1793.344, 'duration': 1.842}, {'end': 1802.572, 'text': "So if we go if we reload, you'll see it comes up from the bottom and it has a duration of two seconds.", 'start': 1795.386, 'duration': 7.186}], 'summary': 'Setting animation duration to 2 seconds, origin at bottom, tested successfully.', 'duration': 26.505, 'max_score': 1776.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41776067.jpg'}, {'end': 2128.478, 'src': 'embed', 'start': 2074.067, 'weight': 2, 'content': [{'end': 2075.348, 'text': "All right, so we'll paste this in.", 'start': 2074.067, 'duration': 1.281}, {'end': 2082.333, 'text': 'Okay, so this is just a block of jQuery that is going to implement that smooth scrolling effect.', 'start': 2075.368, 'duration': 6.965}, {'end': 2086.177, 'text': 'Let me actually set this to wrap so you guys can see the whole thing.', 'start': 2082.994, 'duration': 3.183}, {'end': 2089.219, 'text': "Let's see.", 'start': 2088.839, 'duration': 0.38}, {'end': 2091.88, 'text': 'Softwrap There we go.', 'start': 2089.539, 'duration': 2.341}, {'end': 2097.882, 'text': "And if you don't want to type all this out, you can go ahead and just look at the project files.", 'start': 2093.179, 'duration': 4.703}, {'end': 2100.743, 'text': "I actually didn't write this.", 'start': 2099.162, 'duration': 1.581}, {'end': 2103.483, 'text': 'I got this off, I think, a Stack Overflow post.', 'start': 2100.843, 'duration': 2.64}, {'end': 2112.906, 'text': "It's not the neatest thing in the world, but what I want to focus on is the scroll reveal in this project, not the vertical scrolling.", 'start': 2104.684, 'duration': 8.222}, {'end': 2116.287, 'text': "So let's save this and make sure it works.", 'start': 2114.446, 'duration': 1.841}, {'end': 2121.593, 'text': 'So if I click about, it scrolls down, contact, and home.', 'start': 2117.99, 'duration': 3.603}, {'end': 2124.175, 'text': "Great So that's it.", 'start': 2122.654, 'duration': 1.521}, {'end': 2128.478, 'text': "We've built a bootstrap template that has a little bit of animation.", 'start': 2124.255, 'duration': 4.223}], 'summary': 'Implemented smooth scrolling effect using jquery for a bootstrap template with scroll reveal, sourced from stack overflow.', 'duration': 54.411, 'max_score': 2074.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi42074067.jpg'}], 'start': 1456.684, 'title': 'Creating contact form layout and building bootstrap template with animation', 'summary': 'Details the process of creating a contact form layout with a 5-column and 7-column structure, with the form placed in the 5-column section. it also covers building a bootstrap template with animation, including adding margins, setting background images, implementing smooth scrolling, and enabling animations using the scrollreveal plugin.', 'chapters': [{'end': 1521.108, 'start': 1456.684, 'title': 'Creating contact form layout', 'summary': 'Details the process of creating a contact form layout with a 5-column and 7-column structure, with the form placed in the 5-column section.', 'duration': 64.424, 'highlights': ['The layout consists of a 5-column and a 7-column structure for the contact form.', 'The form is placed in the 5-column section.']}, {'end': 2143.83, 'start': 1521.108, 'title': 'Building bootstrap template with animation', 'summary': 'Covers the process of building a bootstrap template with animation, including adding margins, setting background images, implementing smooth scrolling, and enabling animations using the scrollreveal plugin.', 'duration': 622.722, 'highlights': ['The chapter covers the process of building a Bootstrap template with animation. The transcript primarily focuses on the process of creating a Bootstrap template with animation, covering various elements such as margins, background images, smooth scrolling, and enabling animations.', 'Adding margins and setting background images for different sections of the template. The speaker discusses adding margins to specific sections and setting background images, providing detailed CSS instructions.', 'Enabling animations using the ScrollReveal plugin with specific settings such as duration, origin, and delay. The transcript details the process of enabling animations using the ScrollReveal plugin, specifying settings like duration, origin, and delay for different elements.', 'Implementing smooth scrolling effect using a block of jQuery code. The speaker demonstrates implementing a smooth scrolling effect using a block of jQuery code, ensuring a seamless transition when clicking on links within the template.']}], 'duration': 687.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ePgnR4gHIi4/pics/ePgnR4gHIi41456684.jpg', 'highlights': ['The layout consists of a 5-column and a 7-column structure for the contact form.', 'The form is placed in the 5-column section.', 'The chapter covers the process of building a Bootstrap template with animation.', 'Adding margins and setting background images for different sections of the template.', 'Enabling animations using the ScrollReveal plugin with specific settings such as duration, origin, and delay.', 'Implementing smooth scrolling effect using a block of jQuery code.']}], 'highlights': ['The project involves creating a bootstrap website with animation and scrolling effects using ScrollReveal.', 'The website theme is modeled after ydirection.com/advent, with similar pop-in effects, and utilizes jQuery for functionality.', 'Documentation for ScrollReveal is available on GitHub, offering installation options and configurations.', 'The chapter demonstrates the use of the live server package for Atom to open the current directory on local host.', 'The chapter suggests installing the Atom Live Server package and starting it on port 4000 for local hosting.', 'The process includes adding HTML tags, linking the Scroll Reveal script, and using Bootstrap CDN to include Bootstrap and jQuery scripts, as well as linking custom stylesheets and Google fonts.', 'Building a responsive navbar The chapter explains the process of creating a responsive navbar using Bootstrap, including modifying the markup, changing styles in style.css, and making the branding more prominent by adjusting font size, color, and weight.', 'Creating a showcase area with image and text using Bootstrap grid system The showcase area is built using HTML5 tags such as section and div, and the Bootstrap grid system is utilized to display an image and text in a responsive layout.', 'The chapter explains the process of setting up a new project for creating a text scroll, including creating folders for HTML, CSS, and images.', 'Alternative methods for local hosting and project setup are also mentioned, providing flexibility for different preferences.', "Adding a button to the showcase with a class of 'btn, btn, default, btn-lg' and 'showcase-btn' to make it bigger and separate from the animation.", 'Setting a margin top of 70 pixels for the body to push content down and prevent overlap with the fixed top navigation bar.', 'Increasing the font size of the heading in the showcase to 50 pixels and adding a margin underneath.', "Changing the font type of all headings on the site to 'Poppins' and setting the font family of paragraphs to 'Roboto'.", 'Adjusting the showcase section by setting its image width to 90% and applying a left margin of 60 pixels, then positioning it vertically and adding a line break before the button.', 'Creating and styling the testimonial section with a light gray background, specific padding, centered alignment, and customized font sizes and colors.', "Setting the testimonial section's background to a light gray color (F1F1F1) and applying specific padding and text alignment.", "Styling the testimonial section's text by setting the font size to 32 pixels, using the 'Josefin Sans' font family, and adjusting the color to black.", "Adjusting the font size and color of the customer's name within the testimonial section to 20 pixels and '666' color code, respectively.", 'Creating an HTML section with two six-column divs', 'The process of coding HTML and CSS for website design involves adding divs, paragraphs, buttons, and making styling adjustments', 'Styling adjustments such as adding margins and increasing font size are made using CSS to enhance the visual appearance of the web content', 'The use of HTML elements like H2, paragraphs, and buttons, along with CSS classes, is demonstrated in the process of building webpage components', 'Creating multiple sections within a webpage involves duplicating and modifying existing code, such as copying and adjusting content for Info 1 and Info 2 sections', 'Setting the ID of the section to info1', 'Including an image with a source attribute of img/image2.png', 'The layout consists of a 5-column and a 7-column structure for the contact form.', 'The form is placed in the 5-column section.', 'The chapter covers the process of building a Bootstrap template with animation.', 'Adding margins and setting background images for different sections of the template.', 'Enabling animations using the ScrollReveal plugin with specific settings such as duration, origin, and delay.', 'Implementing smooth scrolling effect using a block of jQuery code.']}