title
Bootstrap 5 Crash Course | Website Build & Deploy

description
Beginner-friendly website project using Bootstrap 5 Hostinger: https://www.hostinger.com/traversymedia - Use the code TRAVERSYMEDIA for 10% off! Code: https://github.com/bradtraversy/bootstrap-bootcamp-website Project Demo: https://www.frontendbootcampdemo.com/ Latest Udemy Courses: https://traversymedia.com​ 💖 Support The Channel! http://www.patreon.com/traversymedia Timestamps: 0:00 - Intro 2:01 - Docs & Getting Started 4:40 - Including Bootstrap CDN 6:38 - Responsive Navbar 14:04 - Showcase With Flex Classes 24:25 - Newsletter With Input Group 31:03 - Boxes With Bootstrap Grid & Cards 33:22 - Bootstrap Icons 38:44 - Learn Sections 44:38 - FAQ With Accordion 54:50 - Instructors Grid Cards 1:01:11 - Contact Info & Map 1:07:18 - Footer 1:09:38 - Enrollment Modal 1:14:57 - Deployment To Hostinger

detail
{'title': 'Bootstrap 5 Crash Course | Website Build & Deploy', 'heatmap': [], 'summary': 'Learn bootstrap 5 through a comprehensive crash course that covers building a website with features like a nav bar, smooth scrolling, flex box usage, css grid, icons, accordion, instructor cards, contact info, map using mapbox, and responsive modal. it also includes front-end setup, website navigation, layout, web page design, flexbox, customizing bootstrap layout and styling, creating website building elements, faq section, instructor grid, contact and map creation, html modification, and deploying the website on hostinger.', 'chapters': [{'end': 121.483, 'segs': [{'end': 45.995, 'src': 'embed', 'start': 7.355, 'weight': 0, 'content': [{'end': 12.858, 'text': "Hey, what's going on, guys? In this video, we're going to be building a Bootstrap five website for a fake boot camp.", 'start': 7.355, 'duration': 5.503}, {'end': 14.339, 'text': 'Now, this is a crash course.', 'start': 13.058, 'duration': 1.281}, {'end': 15.619, 'text': "We're going to talk about.", 'start': 14.359, 'duration': 1.26}, {'end': 19.221, 'text': 'you know how to set up Bootstrap and all of the not all of them,', 'start': 15.619, 'duration': 3.602}, {'end': 26.205, 'text': "but most of the common classes that you'll be using as far as you know nav bars and cards, the grid flex and all that.", 'start': 19.221, 'duration': 6.984}, {'end': 32.747, 'text': 'But I wanted to do it in a way where actually building something rather than just doing like a video version of the documentation.', 'start': 26.565, 'duration': 6.182}, {'end': 34.409, 'text': "So this is what we'll build.", 'start': 33.308, 'duration': 1.101}, {'end': 36.65, 'text': "We'll go ahead and add a nav bar at the top.", 'start': 34.569, 'duration': 2.081}, {'end': 38.311, 'text': "We'll have some smooth scrolling.", 'start': 36.71, 'duration': 1.601}, {'end': 40.912, 'text': 'We have the showcase area with the image.', 'start': 39.051, 'duration': 1.861}, {'end': 45.995, 'text': "We'll be using flex box for this or I should say the flex classes that bootstrap offers.", 'start': 41.092, 'duration': 4.903}], 'summary': 'Building a bootstrap 5 website for a fake boot camp, covering common classes and flexbox for layout.', 'duration': 38.64, 'max_score': 7.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s7355.jpg'}, {'end': 89.575, 'src': 'embed', 'start': 64.807, 'weight': 3, 'content': [{'end': 71.253, 'text': "We have some instructor cards we have at the bottom here, the contact info, and we're also going to add a map using Mapbox.", 'start': 64.807, 'duration': 6.446}, {'end': 72.555, 'text': 'And then a footer.', 'start': 71.894, 'duration': 0.661}, {'end': 74.117, 'text': 'And we also have a modal.', 'start': 72.695, 'duration': 1.422}, {'end': 79.424, 'text': "If we click on start the enrollment, that'll open up modal and it is completely responsive.", 'start': 74.177, 'duration': 5.247}, {'end': 83.128, 'text': 'So if we make this a little smaller here, you can see still looks good.', 'start': 79.524, 'duration': 3.604}, {'end': 85.972, 'text': "We're going to make everything stack on small screens.", 'start': 83.148, 'duration': 2.824}, {'end': 87.294, 'text': 'We have our hamburger menu.', 'start': 86.012, 'duration': 1.282}, {'end': 88.154, 'text': 'all right.', 'start': 87.854, 'duration': 0.3}, {'end': 89.575, 'text': "so that's what we're building now.", 'start': 88.154, 'duration': 1.421}], 'summary': 'Creating a responsive website with instructor cards, mapbox map, footer, modal, and hamburger menu.', 'duration': 24.768, 'max_score': 64.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s64807.jpg'}], 'start': 7.355, 'title': 'Bootstrap 5 website building', 'summary': 'Covers building a bootstrap 5 website for a fake boot camp, including a nav bar, smooth scrolling, showcase area, flex box usage, newsletter, css grid, bootstrap grid system, icons, accordion, instructor cards, contact info, map using mapbox, footer, and a responsive modal, sponsored by hostinger for deployment to a shared hosting account.', 'chapters': [{'end': 121.483, 'start': 7.355, 'title': 'Bootstrap 5 website building', 'summary': 'Covers building a bootstrap 5 website for a fake boot camp, including a nav bar, smooth scrolling, showcase area, flex box usage, newsletter, css grid and bootstrap grid system, icons, accordion, instructor cards, contact info, map using mapbox, footer, and a responsive modal, sponsored by hostinger for deployment to a shared hosting account.', 'duration': 114.128, 'highlights': ['The video covers building a Bootstrap 5 website for a fake boot camp, including a variety of elements such as nav bar, showcase area, flex box, newsletter, CSS grid, and bootstrap grid system.', 'The deployment process to a shared hosting account sponsored by hostinger is explained, involving pushing to GitHub and deploying from GitHub repository to hostinger, which offers various hosting options.', 'The video is sponsored by hostinger, which offers a variety of hosting types and provides a link in the description for a 10% discount.', 'The chapter focuses on creating a fully responsive modal, which still looks good even on smaller screens, with elements stacking appropriately and a hamburger menu for navigation.', 'The instructional approach involves building actual elements rather than just a video version of the documentation, providing practical learning experience for the viewers.']}], 'duration': 114.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s7355.jpg', 'highlights': ['The video covers building a Bootstrap 5 website for a fake boot camp, including a variety of elements such as nav bar, showcase area, flex box, newsletter, CSS grid, and bootstrap grid system.', 'The instructional approach involves building actual elements rather than just a video version of the documentation, providing practical learning experience for the viewers.', 'The deployment process to a shared hosting account sponsored by hostinger is explained, involving pushing to GitHub and deploying from GitHub repository to hostinger, which offers various hosting options.', 'The chapter focuses on creating a fully responsive modal, which still looks good even on smaller screens, with elements stacking appropriately and a hamburger menu for navigation.', 'The video is sponsored by hostinger, which offers a variety of hosting types and provides a link in the description for a 10% discount.']}, {'end': 517.576, 'segs': [{'end': 150.952, 'src': 'embed', 'start': 121.483, 'weight': 1, 'content': [{'end': 128.764, 'text': 'so I have the Bootstrap 5 documentation open and we might reference this throughout the project for certain classes and components.', 'start': 121.483, 'duration': 7.281}, {'end': 133.666, 'text': "So if you've never used Bootstrap before, or maybe you've never used any CSS framework?", 'start': 129.365, 'duration': 4.301}, {'end': 142.449, 'text': 'basically, we have a set of predefined classes to create specific elements, and the documentation will give you some good examples of that.', 'start': 133.666, 'duration': 8.783}, {'end': 150.952, 'text': "So, for instance, if we go to components and we look at, let's say, buttons, It'll show us an example and it'll give us the specific classes.", 'start': 142.569, 'duration': 8.383}], 'summary': 'Bootstrap 5 documentation provides predefined classes for creating elements, including buttons.', 'duration': 29.469, 'max_score': 121.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s121483.jpg'}, {'end': 196.057, 'src': 'embed', 'start': 166.541, 'weight': 2, 'content': [{'end': 169.722, 'text': 'So BTN LG BTN SM for small.', 'start': 166.541, 'duration': 3.181}, {'end': 174.863, 'text': 'So you can find pretty much everything you want as far as components.', 'start': 170.222, 'duration': 4.641}, {'end': 180.605, 'text': 'And if we look up here you have forms classes for forms and layout like the grid system.', 'start': 174.983, 'duration': 5.622}, {'end': 183.286, 'text': "But we're going to go over all this in this project.", 'start': 180.965, 'duration': 2.321}, {'end': 186.849, 'text': 'Now, some of these like the accordion, this is dynamic.', 'start': 183.846, 'duration': 3.003}, {'end': 188.45, 'text': 'You can see it does have some click events.', 'start': 186.889, 'duration': 1.561}, {'end': 196.057, 'text': 'So this needs the bootstrap JavaScript bundle for the accordion and models and popovers and things like that.', 'start': 188.63, 'duration': 7.427}], 'summary': 'Bootstrap offers components like forms, grid system, and dynamic elements requiring javascript bundle.', 'duration': 29.516, 'max_score': 166.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s166541.jpg'}, {'end': 232.508, 'src': 'embed', 'start': 207.414, 'weight': 3, 'content': [{'end': 213.619, 'text': 'so basically, we just need to include this link tag with the default bootstrap css file,', 'start': 207.414, 'duration': 6.205}, {'end': 218.564, 'text': 'and then we also want to include the the javascript bundle for things like modals and accordions.', 'start': 213.619, 'duration': 4.945}, {'end': 225.166, 'text': "Now the downside to using the CDN is you can't customize the bootstrap CSS.", 'start': 219.224, 'duration': 5.942}, {'end': 232.508, 'text': "If you want to be able to do that, which you probably will at some point, you're going to want to download the source files.", 'start': 225.746, 'duration': 6.762}], 'summary': 'Include link tag for default bootstrap css and javascript bundle for modals and accordions. customization requires downloading source files.', 'duration': 25.094, 'max_score': 207.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s207414.jpg'}, {'end': 345.472, 'src': 'embed', 'start': 317.611, 'weight': 4, 'content': [{'end': 320.733, 'text': "Close the sidebar up and we're just going to create a boilerplate with Emmett.", 'start': 317.611, 'duration': 3.122}, {'end': 322.034, 'text': 'So exclamation enter.', 'start': 320.773, 'duration': 1.261}, {'end': 327.198, 'text': "And for the title here, we'll say front end boot camp.", 'start': 322.715, 'duration': 4.483}, {'end': 331.982, 'text': "And then we're going to want to include bootstrap, include the CDN.", 'start': 328.479, 'duration': 3.503}, {'end': 334.324, 'text': "So right here, I'm going to copy this link.", 'start': 332.042, 'duration': 2.282}, {'end': 336.025, 'text': "I'm going to put this right.", 'start': 334.884, 'duration': 1.141}, {'end': 337.827, 'text': 'Put it right above the title.', 'start': 336.586, 'duration': 1.241}, {'end': 345.472, 'text': "and then, right below that, i'm just going to add a link to the custom style sheet we have, which is just style.css,", 'start': 338.547, 'duration': 6.925}], 'summary': 'Setting up front end boot camp with bootstrap and custom style sheet.', 'duration': 27.861, 'max_score': 317.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s317611.jpg'}, {'end': 382.358, 'src': 'embed', 'start': 357.241, 'weight': 5, 'content': [{'end': 365.027, 'text': "prior to version 5, you had to use jquery, and i think that that's something a lot of us have been waiting for is to to scrap that.", 'start': 357.241, 'duration': 7.786}, {'end': 368.87, 'text': "So in here I'm just going to say hello and save,", 'start': 366.008, 'duration': 2.862}, {'end': 375.914, 'text': "and I want to open this up so you can either just open the index HTML or you can use an extension if you're using V.S.", 'start': 368.87, 'duration': 7.044}, {'end': 382.358, 'text': "code called live server which is what I'm going to use and this will just basically open it on a development server.", 'start': 375.974, 'duration': 6.384}], 'summary': 'Prior to version 5, users had to use jquery, but now with the new version, they can scrap that and use live server on v.s. code.', 'duration': 25.117, 'max_score': 357.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s357241.jpg'}, {'end': 452.038, 'src': 'embed', 'start': 422.558, 'weight': 0, 'content': [{'end': 425.02, 'text': 'And this is basically so we can make it responsive.', 'start': 422.558, 'duration': 2.462}, {'end': 430.324, 'text': 'We could do any size we want here, small, medium.', 'start': 425.92, 'duration': 4.404}, {'end': 431.404, 'text': "I'm going to do large.", 'start': 430.444, 'duration': 0.96}, {'end': 439.41, 'text': 'And what that means is when it hits the large breakpoint, you know, a certain screen size, then the nav bar will expand to show all the links.', 'start': 431.424, 'duration': 7.986}, {'end': 443.953, 'text': 'Anything under the large is going to be just a hamburger menu.', 'start': 439.59, 'duration': 4.363}, {'end': 445.475, 'text': 'So let me just show you here.', 'start': 444.194, 'duration': 1.281}, {'end': 448.076, 'text': 'So this is past the large breakpoint.', 'start': 446.175, 'duration': 1.901}, {'end': 452.038, 'text': 'When I hit the large, which is right here, you can see it changes.', 'start': 448.096, 'duration': 3.942}], 'summary': 'Implementing responsive design with large breakpoint for nav bar expansion.', 'duration': 29.48, 'max_score': 422.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s422558.jpg'}], 'start': 121.483, 'title': 'Using bootstrap 5 for front-end setup', 'summary': 'Covers using bootstrap 5 for creating elements and components such as buttons and forms, including setting up a front-end boilerplate with emmett, bootstrap 5 cdn, custom style sheet, and javascript bundle without jquery dependency, and configuring a responsive navbar with breakpoints for different screen sizes.', 'chapters': [{'end': 317.25, 'start': 121.483, 'title': 'Using bootstrap 5 for website layout', 'summary': 'Covers the usage of bootstrap 5 for creating specific elements and components, including buttons and forms, and explains how to include bootstrap using cdn and customize it with sas.', 'duration': 195.767, 'highlights': ['Bootstrap 5 provides predefined classes for creating specific elements and components, including buttons with different colors and sizes. The documentation provides examples of using predefined classes like BTN, primary, secondary, success, and classes for different sizes like BTN LG and BTN SM.', 'Including Bootstrap using CDN allows quick integration, but customization requires downloading the source files and using a SAS compiler. Using the CDN for Bootstrap integration is quick and easy, but customization of the Bootstrap CSS requires downloading the source files and using a SAS compiler to edit variables like colors and font sizes.', 'The chapter introduces using VS Code and includes an empty HTML file, an empty style.css file, and a folder of SVG images for the project. The author uses VS Code and provides an empty index.html file, an empty style.css file, and a folder of SVG images for the project, obtained from undraw.co.']}, {'end': 517.576, 'start': 317.611, 'title': 'Bootstrap 5 front-end setup', 'summary': 'Covers setting up a front-end boilerplate with emmett, including bootstrap 5 cdn, custom style sheet, and javascript bundle without jquery dependency, and configuring a responsive navbar with breakpoints for different screen sizes.', 'duration': 199.965, 'highlights': ['The chapter covers setting up a front-end boilerplate with Emmett, including Bootstrap 5 CDN, custom style sheet, and JavaScript bundle without jQuery dependency. Emphasizing the process of setting up a front-end boilerplate with Bootstrap 5 resources and eliminating jQuery dependency.', 'Configuring a responsive navbar with breakpoints for different screen sizes by using HTML5 nav tag with the class of navbar and specifying the navbar-expand class for responsiveness. Detailing the process of configuring a responsive navbar with breakpoints for different screen sizes using HTML5 nav tag and specifying the navbar-expand class.', 'Explaining the usage of bg classes for navbar colors such as bg-dark, as well as other color options like primary, secondary, success, and danger. Explaining the usage of bg classes for navbar colors and mentioning other color options like primary, secondary, success, and danger.']}], 'duration': 396.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s121483.jpg', 'highlights': ['Bootstrap 5 provides predefined classes for creating specific elements and components, including buttons with different colors and sizes.', 'Including Bootstrap using CDN allows quick integration, but customization requires downloading the source files and using a SAS compiler.', 'The chapter introduces using VS Code and includes an empty HTML file, an empty style.css file, and a folder of SVG images for the project.', 'The chapter covers setting up a front-end boilerplate with Emmett, including Bootstrap 5 CDN, custom style sheet, and JavaScript bundle without jQuery dependency.', 'Configuring a responsive navbar with breakpoints for different screen sizes by using HTML5 nav tag with the class of navbar and specifying the navbar-expand class for responsiveness.', 'Explaining the usage of bg classes for navbar colors such as bg-dark, as well as other color options like primary, secondary, success, and danger.']}, {'end': 1162.125, 'segs': [{'end': 633.653, 'src': 'embed', 'start': 607.467, 'weight': 4, 'content': [{'end': 615.068, 'text': "We're going to have a div with the class of collapse and also nav bar dash collapse,", 'start': 607.467, 'duration': 7.601}, {'end': 624.431, 'text': "because we want this to be able to collapse on smaller screens so that we have, you know the this right here and on larger screens it'll be.", 'start': 615.068, 'duration': 9.363}, {'end': 625.351, 'text': "it'll show the links.", 'start': 624.431, 'duration': 0.92}, {'end': 629.812, 'text': "So inside this div, let's go ahead and add our UL.", 'start': 626.051, 'duration': 3.761}, {'end': 633.653, 'text': "And this needs a class of nav bar dash nav because that's what it is.", 'start': 629.892, 'duration': 3.761}], 'summary': "Creating a collapsible navigation bar with class 'collapse' and 'navbar-nav' for responsive design.", 'duration': 26.186, 'max_score': 607.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s607467.jpg'}, {'end': 775.996, 'src': 'embed', 'start': 697.513, 'weight': 0, 'content': [{'end': 700.374, 'text': 'And if we take a look, this is kind of the default layout.', 'start': 697.513, 'duration': 2.861}, {'end': 702.514, 'text': "It's going to be right next to the branding.", 'start': 700.434, 'duration': 2.08}, {'end': 707.395, 'text': 'Now, what I want to do is push the links over to the side here or push the menu to the side.', 'start': 702.895, 'duration': 4.5}, {'end': 713.797, 'text': 'So in the UL, we can add a class of MS. So margin start dash auto.', 'start': 707.856, 'duration': 5.941}, {'end': 716.297, 'text': 'And that will align it to the right.', 'start': 714.357, 'duration': 1.94}, {'end': 720.858, 'text': "Now, if we hit if we go past the large breakpoint, you'll notice it disappears.", 'start': 716.877, 'duration': 3.981}, {'end': 723.779, 'text': "And that's because of our now bar expand LG.", 'start': 721.098, 'duration': 2.681}, {'end': 735.215, 'text': "we could change that to like sm and then it won't disappear until we get to the sm but i'm going to keep that at lg All right.", 'start': 724.699, 'duration': 10.516}, {'end': 738.019, 'text': 'Now we want to be able to have a button.', 'start': 735.296, 'duration': 2.723}, {'end': 740.301, 'text': "I'm going to make this a little smaller.", 'start': 738.679, 'duration': 1.622}, {'end': 742.604, 'text': 'We want to be able to have that hamburger menu button.', 'start': 740.341, 'duration': 2.263}, {'end': 748.791, 'text': "So what we'll do is go in between the brand, the link and the div, the collapse div.", 'start': 743.105, 'duration': 5.686}, {'end': 750.293, 'text': "And we're going to add a button.", 'start': 749.292, 'duration': 1.001}, {'end': 754.598, 'text': "We're going to give this a class of nav bar dash toggler.", 'start': 750.313, 'duration': 4.285}, {'end': 758.982, 'text': "And let's give it a type of button.", 'start': 756.44, 'duration': 2.542}, {'end': 762.485, 'text': 'And then we need to add a couple extra attributes here.', 'start': 759.783, 'duration': 2.702}, {'end': 764.166, 'text': 'One is going to be data B.S.', 'start': 762.565, 'duration': 1.601}, {'end': 765.327, 'text': 'dash toggle.', 'start': 764.266, 'duration': 1.061}, {'end': 769.851, 'text': 'And basically we just want to say we want this to be collapse.', 'start': 766.808, 'duration': 3.043}, {'end': 775.996, 'text': 'We want the target toggle to collapse and then we need to target a specific item to toggle.', 'start': 770.431, 'duration': 5.565}], 'summary': 'Adjust layout, add button for hamburger menu, and set breakpoints for responsiveness.', 'duration': 78.483, 'max_score': 697.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s697513.jpg'}, {'end': 855.721, 'src': 'embed', 'start': 829.085, 'weight': 3, 'content': [{'end': 834.25, 'text': 'So now we have a responsive navigation without really having to do much work at all,', 'start': 829.085, 'duration': 5.165}, {'end': 839.873, 'text': 'aside from assigning some classes and some attributes HTML attributes.', 'start': 834.25, 'duration': 5.623}, {'end': 843.155, 'text': "We didn't have to write any CSS or JavaScript or anything like that.", 'start': 839.914, 'duration': 3.241}, {'end': 844.536, 'text': 'All right.', 'start': 844.296, 'duration': 0.24}, {'end': 847.397, 'text': "So that's pretty much it for the nav bar.", 'start': 844.876, 'duration': 2.521}, {'end': 848.157, 'text': 'Pretty simple.', 'start': 847.557, 'duration': 0.6}, {'end': 855.721, 'text': "Now we're going to move on to the showcase area, which is this right here, this part here.", 'start': 849.138, 'duration': 6.583}], 'summary': 'Responsive navigation created with minimal effort, no css or javascript needed. moving on to the showcase area.', 'duration': 26.636, 'max_score': 829.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s829085.jpg'}], 'start': 518.376, 'title': 'Website navigation and layout', 'summary': 'Covers building a website navbar with detailed instructions on styling and arrangement, including creating responsive navigation and flexbox layout using html and bootstrap classes.', 'chapters': [{'end': 697.293, 'start': 518.376, 'title': 'Building a website navbar', 'summary': 'Covers the process of creating a website navbar, including setting the background color, adding a logo, and creating a collapsible menu, with detailed instructions on styling and arrangement.', 'duration': 178.917, 'highlights': ['Adding a dark background to the navbar and adjusting text color to create a distinct visual hierarchy.', 'Placing the logo or branding within a container to control its positioning and appearance.', 'Creating a collapsible menu for smaller screens by utilizing the collapse class and defining navigation links within a navbar.']}, {'end': 1162.125, 'start': 697.513, 'title': 'Responsive navigation and flexbox layout', 'summary': 'Covers creating a responsive navigation bar using html and bootstrap classes, including adding a hamburger menu button and creating a showcase area with flexbox layout and padding classes.', 'duration': 464.612, 'highlights': ['Created a responsive navigation bar using Bootstrap classes and attributes, including a hamburger menu button. The speaker demonstrated adding classes and attributes to create a responsive navigation bar without the need for additional CSS or JavaScript, allowing for easy toggling of the menu on click.', 'Utilized flexbox layout and padding classes to create a showcase area with a dark background and centered text. The instructor explained the use of flexbox and padding classes to structure a showcase area with a dark background, centered text, and flex items aligned side by side, ensuring responsive design for different screen sizes.']}], 'duration': 643.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s518376.jpg', 'highlights': ['Utilized flexbox layout and padding classes to create a showcase area with a dark background and centered text.', 'Created a responsive navigation bar using Bootstrap classes and attributes, including a hamburger menu button.', 'Adding a dark background to the navbar and adjusting text color to create a distinct visual hierarchy.', 'Placing the logo or branding within a container to control its positioning and appearance.', 'Creating a collapsible menu for smaller screens by utilizing the collapse class and defining navigation links within a navbar.']}, {'end': 1664.906, 'segs': [{'end': 1262.07, 'src': 'embed', 'start': 1232.817, 'weight': 0, 'content': [{'end': 1238.421, 'text': "I'm going to do BTN dash primary, which will make it that blue color by default.", 'start': 1232.817, 'duration': 5.604}, {'end': 1243.584, 'text': "And then I'm going to do BTN LG to make it a little bigger than the default.", 'start': 1238.881, 'duration': 4.703}, {'end': 1252.62, 'text': "OK, and then we'll do the modal attributes later on, but let's just put in start the enrollment.", 'start': 1244.497, 'duration': 8.123}, {'end': 1256.868, 'text': 'OK, so if I save that, now we have a button.', 'start': 1254.667, 'duration': 2.201}, {'end': 1262.07, 'text': 'Now I want a little bit of space above and below the paragraph so I can add a margin class.', 'start': 1257.248, 'duration': 4.822}], 'summary': 'Creating a primary button in blue color, larger size, adding margin class and starting enrollment.', 'duration': 29.253, 'max_score': 1232.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1232817.jpg'}, {'end': 1332.452, 'src': 'embed', 'start': 1307.61, 'weight': 4, 'content': [{'end': 1314.515, 'text': "OK, and you can see on very small screens, mobile screens, it'll be centered and then anything above that, it's going to be start or to the left.", 'start': 1307.61, 'duration': 6.905}, {'end': 1320.099, 'text': "I think I said right earlier, but it's left align start and would be the right.", 'start': 1315.736, 'duration': 4.363}, {'end': 1322.14, 'text': 'All right.', 'start': 1321.84, 'duration': 0.3}, {'end': 1327.006, 'text': "So now let's see on very small screens, I don't even want to show the image.", 'start': 1322.241, 'duration': 4.765}, {'end': 1332.452, 'text': 'So what we can do is go down to the image, which is right here.', 'start': 1327.446, 'duration': 5.006}], 'summary': 'Website design adjusts alignment based on screen size.', 'duration': 24.842, 'max_score': 1307.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1307610.jpg'}, {'end': 1615.151, 'src': 'embed', 'start': 1587.963, 'weight': 3, 'content': [{'end': 1593.562, 'text': "And then here we'll just say sign up for newsletter.", 'start': 1587.963, 'duration': 5.599}, {'end': 1594.684, 'text': 'All right.', 'start': 1594.423, 'duration': 0.261}, {'end': 1597.548, 'text': "So if we save that, that's what it's going to look like.", 'start': 1594.724, 'duration': 2.824}, {'end': 1600.632, 'text': "Now, this shouldn't be so far over.", 'start': 1597.888, 'duration': 2.744}, {'end': 1601.794, 'text': "Let's see.", 'start': 1601.293, 'duration': 0.501}, {'end': 1604.378, 'text': 'And I spoke container wrong.', 'start': 1602.795, 'duration': 1.583}, {'end': 1608.085, 'text': "All right, that's better.", 'start': 1607.304, 'duration': 0.781}, {'end': 1613.81, 'text': 'Now, I also want on larger screens, I want it to look like the laptop is kind of resting on here.', 'start': 1608.545, 'duration': 5.265}, {'end': 1615.151, 'text': 'So I want to get rid of this space.', 'start': 1613.85, 'duration': 1.301}], 'summary': 'Web design review for newsletter sign-up with adjustments made for better appearance.', 'duration': 27.188, 'max_score': 1587.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1587963.jpg'}], 'start': 1163.266, 'title': 'Web page design and flexbox', 'summary': 'Covers creating web page elements with different styles and classes such as text-warning, lead, and margin classes, and demonstrates the use of flexbox and css for responsive design with practical examples.', 'chapters': [{'end': 1355.672, 'start': 1163.266, 'title': 'Creating web page elements', 'summary': 'Discusses creating web page elements such as text with different colors, sizes, a button, and alignment for different screen sizes, including the use of classes like text-warning, lead, and margin classes, and display properties. it also covers the use of modal attributes.', 'duration': 192.406, 'highlights': ["Using text color class to change the color of text for web developer to yellow The speaker uses a text color class 'text-warning' to change the color of the text 'web developer' to yellow.", "Utilizing lead class to make the text a little bigger The speaker uses the 'lead' class to make the text a little bigger.", 'Adding a button with primary blue color and larger size using BTN-primary and BTN-LG classes The speaker adds a button with primary blue color and larger size using the classes BTN-primary and BTN-LG.', "Applying margin class to add space above and below the paragraph using the M Y-4 class The speaker applies the margin class 'M Y-4' to add space above and below the paragraph.", "Using text center and text center-SM classes to align text based on screen size The speaker uses 'text center' and 'text center-SM' classes to align the text based on the screen size, centering on small screens and aligning to start on screens larger than small.", "Setting the image to not display on small screens and display block on screens larger than small The speaker sets the image to not display on small screens using the 'D-none' class and to display block on screens larger than small using the 'D-sm-block' class."]}, {'end': 1664.906, 'start': 1356.152, 'title': 'Responsive web design with flexbox and css', 'summary': 'Discusses using flexbox and css to align elements on both the horizontal and vertical axes, demonstrating how to implement responsive design through practical examples and explaining the significance of different css classes and properties.', 'duration': 308.754, 'highlights': ['Demonstrating the use of Flexbox and CSS to align elements on both axes The chapter explains how to use Flexbox and CSS to align elements both horizontally and vertically, providing practical examples and demonstrations.', 'Implementing responsive design with practical examples The chapter demonstrates the implementation of responsive design through practical examples, showcasing the use of different CSS classes and properties for responsive web design.', 'Explanation of CSS classes and properties for responsive web design The chapter explains the significance of different CSS classes and properties, including align-items, justify-content, padding, and margin, for achieving responsive web design.']}], 'duration': 501.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1163266.jpg', 'highlights': ['Demonstrating the use of Flexbox and CSS to align elements on both axes', 'Implementing responsive design with practical examples', 'Explanation of CSS classes and properties for responsive web design', 'Adding a button with primary blue color and larger size using BTN-primary and BTN-LG classes', 'Applying margin class to add space above and below the paragraph using the M Y-4 class']}, {'end': 2468.058, 'segs': [{'end': 1696.973, 'src': 'embed', 'start': 1666.84, 'weight': 3, 'content': [{'end': 1670.262, 'text': "But now let's continue on with with the newsletter.", 'start': 1666.84, 'duration': 3.422}, {'end': 1671.883, 'text': 'So we have our H3.', 'start': 1670.562, 'duration': 1.321}, {'end': 1678.206, 'text': "Now we want what's called an input group which is like the you know the input with the button kind of attached to it.", 'start': 1671.943, 'duration': 6.263}, {'end': 1686.25, 'text': 'So if we go to the documentation and we go to forms input group gives you a bunch of examples.', 'start': 1678.926, 'duration': 7.324}, {'end': 1688.511, 'text': 'What I want is something like.', 'start': 1686.75, 'duration': 1.761}, {'end': 1696.973, 'text': 'Where is it like this right here with the input and then the button, which is this second div here.', 'start': 1691.007, 'duration': 5.966}], 'summary': 'Continuing newsletter with h3 and input group for input with button attached.', 'duration': 30.133, 'max_score': 1666.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1666840.jpg'}, {'end': 1817.41, 'src': 'embed', 'start': 1789.286, 'weight': 0, 'content': [{'end': 1791.188, 'text': "So I'm going to add on to the input group.", 'start': 1789.286, 'duration': 1.902}, {'end': 1799.739, 'text': "We'll call this news dash input, and then we're going to go into our custom style sheet.", 'start': 1791.829, 'duration': 7.91}, {'end': 1808.947, 'text': 'And basically what I want to say is on medium screens, So right here and up, I want this to be half the size.', 'start': 1800.199, 'duration': 8.748}, {'end': 1815.57, 'text': 'OK, so this is kind of split in the middle on on under medium, which is here and less that looks pretty good.', 'start': 1809.647, 'duration': 5.923}, {'end': 1817.41, 'text': "So we don't really need to do anything there.", 'start': 1815.81, 'duration': 1.6}], 'summary': 'Custom style sheet adjusts news input size for medium screens.', 'duration': 28.124, 'max_score': 1789.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1789286.jpg'}, {'end': 1891.241, 'src': 'embed', 'start': 1866.359, 'weight': 1, 'content': [{'end': 1874.361, 'text': "These three boxes and this is where we're going to get into the bootstrap grid and under the under the hood it uses the user CSS grid.", 'start': 1866.359, 'duration': 8.002}, {'end': 1877.962, 'text': "So let's create a actually put a comment here.", 'start': 1875.302, 'duration': 2.66}, {'end': 1879.243, 'text': "I'll just call this boxes.", 'start': 1877.982, 'duration': 1.261}, {'end': 1884.197, 'text': "And let's go ahead and create our actual section.", 'start': 1880.675, 'duration': 3.522}, {'end': 1886.739, 'text': "We'll do P dash five.", 'start': 1885.418, 'duration': 1.321}, {'end': 1889.7, 'text': 'So padding five all the way around container.', 'start': 1886.779, 'duration': 2.921}, {'end': 1891.241, 'text': 'Make sure I spell it right this time.', 'start': 1889.74, 'duration': 1.501}], 'summary': 'Learning about bootstrap grid and using css grid, creating section with padding.', 'duration': 24.882, 'max_score': 1866.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1866359.jpg'}, {'end': 2189.34, 'src': 'embed', 'start': 2134.579, 'weight': 4, 'content': [{'end': 2140.861, 'text': "And in Bootstrap, if you don't wanna use an actual H1 tag or an H2, H3, you can use that as a class.", 'start': 2134.579, 'duration': 6.282}, {'end': 2143.582, 'text': 'So we can have a div with the class of H1.', 'start': 2140.921, 'duration': 2.661}, {'end': 2148.324, 'text': 'And we can move this into here.', 'start': 2145.363, 'duration': 2.961}, {'end': 2151.185, 'text': "And if we save it, now you can see that that's bigger.", 'start': 2148.784, 'duration': 2.401}, {'end': 2152.506, 'text': "It's the size of an H1.", 'start': 2151.225, 'duration': 1.281}, {'end': 2156.149, 'text': 'I also want to just add margin bottom to this.', 'start': 2153.908, 'duration': 2.241}, {'end': 2158.871, 'text': "So in addition to that, let's do MB-3.", 'start': 2156.45, 'duration': 2.421}, {'end': 2165.255, 'text': "And then under that div that wraps the icon, we're going to have an H3.", 'start': 2159.211, 'duration': 6.044}, {'end': 2167.817, 'text': 'And we want to give this a class of card title.', 'start': 2165.275, 'duration': 2.542}, {'end': 2170.759, 'text': "And let's say virtual.", 'start': 2169.258, 'duration': 1.501}, {'end': 2176.062, 'text': 'Okay, so we have our H3.', 'start': 2170.779, 'duration': 5.283}, {'end': 2179.104, 'text': "And let's also do some margin bottom on this too.", 'start': 2176.282, 'duration': 2.822}, {'end': 2179.684, 'text': 'So MB-3.', 'start': 2179.204, 'duration': 0.48}, {'end': 2185.317, 'text': "And then under the H3, we'll have a paragraph of the class of card text.", 'start': 2181.075, 'duration': 4.242}, {'end': 2189.34, 'text': 'Okay, so we have card, card body, card title, card text.', 'start': 2185.377, 'duration': 3.963}], 'summary': 'Using bootstrap classes to style headings and text sizes, adding margins for better design.', 'duration': 54.761, 'max_score': 2134.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s2134579.jpg'}, {'end': 2330.534, 'src': 'embed', 'start': 2301.672, 'weight': 2, 'content': [{'end': 2303.213, 'text': 'We already have that in the clipboard.', 'start': 2301.672, 'duration': 1.541}, {'end': 2306.655, 'text': "So I'm going to go right down here and paste that in.", 'start': 2303.233, 'duration': 3.422}, {'end': 2311.957, 'text': "And then let's change virtual to in person.", 'start': 2307.775, 'duration': 4.182}, {'end': 2318.4, 'text': "Let's change the icon to be I dash people.", 'start': 2313.778, 'duration': 4.622}, {'end': 2320.901, 'text': 'There we go.', 'start': 2320.581, 'duration': 0.32}, {'end': 2323.989, 'text': 'So this is coming along.', 'start': 2322.748, 'duration': 1.241}, {'end': 2327.352, 'text': 'The next thing we want is basically these two.', 'start': 2324.469, 'duration': 2.883}, {'end': 2330.534, 'text': 'So learn the fundamentals, learn, react with these images.', 'start': 2327.712, 'duration': 2.822}], 'summary': 'Updating virtual event to in person, changing icon to i-people.', 'duration': 28.862, 'max_score': 2301.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s2301672.jpg'}], 'start': 1666.84, 'title': 'Customizing bootstrap layout and styling', 'summary': 'Explains creating input group with a button, customizing bootstrap layout and styling, adjusting input group width, creating three even columns using the grid system, and implementing cards with icons and buttons, and compares bootstrap 5 and tailwind.', 'chapters': [{'end': 1738.766, 'start': 1666.84, 'title': 'Creating input group with button', 'summary': 'Explains how to create an input group with a button in a newsletter, including using classes like input group and making specific style changes to the button and input field.', 'duration': 71.926, 'highlights': ['Using classes like input group and specific style changes to the button and input field', 'Adding BG dark class to change the button color and BTN-LG class to enlarge the button', "Making changes to the placeholder text to 'enter'"]}, {'end': 2468.058, 'start': 1740.507, 'title': 'Customizing bootstrap layout and styling', 'summary': 'Discusses customizing bootstrap layout and styling, including adjusting input group width, creating three even columns using the grid system, and implementing cards with icons and buttons, while also highlighting the integration of bootstrap icons and the comparison between bootstrap 5 and tailwind.', 'duration': 727.551, 'highlights': ["Adjusting input group width by using custom styling to make it half the size on medium screens and up, resulting in a more visually appealing layout By using a custom class and a media query with a minimum width of 768, the input group's width is set to 50%, creating a visually appealing layout on medium screens and up.", "Creating three even columns using the Bootstrap grid and aligning them at the center, while ensuring the columns stack on small screens and form a grid on medium screens and up The use of the 'row' and 'col-md' classes helps create three even columns that align at the center and stack on small screens, transitioning into a grid layout on medium screens and up.", "Implementing cards with icons, text, and buttons, utilizing Bootstrap's icon library and customizing card styles The integration of Bootstrap icons, along with the customization of card background, text color, and button styles, enables the creation of visually appealing and informative cards within the layout.", 'Highlighting the integration of Bootstrap icons, emphasizing the ease of use and customization options available in Bootstrap 5 The demonstration of incorporating Bootstrap icons showcases the ease of use and customization options available in Bootstrap 5, providing a seamless experience for developers.', 'Comparing Bootstrap 5 with Tailwind, expressing a preference for Bootstrap 5 due to its lower level classes and pre-made styles The comparison between Bootstrap 5 and Tailwind highlights the preference for Bootstrap 5, emphasizing its lower level classes and pre-made styles, which provide a more efficient development experience.']}], 'duration': 801.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s1666840.jpg', 'highlights': ['Creating three even columns using the Bootstrap grid and aligning them at the center, while ensuring the columns stack on small screens and form a grid on medium screens and up', "Implementing cards with icons, text, and buttons, utilizing Bootstrap's icon library and customizing card styles", 'Comparing Bootstrap 5 with Tailwind, expressing a preference for Bootstrap 5 due to its lower level classes and pre-made styles', 'Using classes like input group and specific style changes to the button and input field', 'Adding BG dark class to change the button color and BTN-LG class to enlarge the button', "Making changes to the placeholder text to 'enter'", 'Adjusting input group width by using custom styling to make it half the size on medium screens and up, resulting in a more visually appealing layout']}, {'end': 2770.47, 'segs': [{'end': 2654.142, 'src': 'embed', 'start': 2557.173, 'weight': 2, 'content': [{'end': 2559.075, 'text': "So under the paragraph, let's do a.", 'start': 2557.173, 'duration': 1.902}, {'end': 2564.9, 'text': "with BTN and we'll do BTN dash light here.", 'start': 2559.977, 'duration': 4.923}, {'end': 2570.122, 'text': "And let's do a margin top just to push the button down a little bit or the link down a little bit.", 'start': 2565.02, 'duration': 5.102}, {'end': 2575.505, 'text': 'And inside the A tag, I want to read more.', 'start': 2571.403, 'duration': 4.102}, {'end': 2580.608, 'text': "And I'm also going to put a Chevron icon right before it.", 'start': 2577.806, 'duration': 2.802}, {'end': 2588.372, 'text': "So we'll do I dot B I and we want B I dash Chevron dash right.", 'start': 2580.668, 'duration': 7.704}, {'end': 2593.916, 'text': 'All right, see what that looks like.', 'start': 2592.435, 'duration': 1.481}, {'end': 2598.279, 'text': 'Good And it should stack.', 'start': 2595.077, 'duration': 3.202}, {'end': 2601.301, 'text': 'Yeah, because we did call MD, not just call.', 'start': 2598.979, 'duration': 2.322}, {'end': 2603.482, 'text': "So that's pretty good.", 'start': 2602.581, 'duration': 0.901}, {'end': 2608.165, 'text': "Now, the next one is going to be similar, so I'm going to just grab this entire section.", 'start': 2603.542, 'duration': 4.623}, {'end': 2623.063, 'text': "Copy that, paste that here and then let's change or let's add BG dark to this section and you can see how we're kind of piecing in all these sections.", 'start': 2613.048, 'duration': 10.015}, {'end': 2625.584, 'text': "That's how I like to build websites like this.", 'start': 2623.083, 'duration': 2.501}, {'end': 2631.728, 'text': "So we're going to do BG dark and let's see what else we want to do.", 'start': 2625.604, 'duration': 6.124}, {'end': 2634.89, 'text': "We're going to change the image here to the react.", 'start': 2631.748, 'duration': 3.142}, {'end': 2640.03, 'text': 'Now, I actually want the image to go on the other side.', 'start': 2637.168, 'duration': 2.862}, {'end': 2647.236, 'text': "So I'm going to grab this div, the call div with the image, cut that and put it underneath this call div, which ends right here.", 'start': 2640.05, 'duration': 7.186}, {'end': 2648.517, 'text': "So we'll place that there.", 'start': 2647.276, 'duration': 1.241}, {'end': 2654.142, 'text': "And then let's change the text here to learn react.", 'start': 2649.498, 'duration': 4.644}], 'summary': 'Building website sections with btn and bg dark, adding icons and adjusting layout.', 'duration': 96.969, 'max_score': 2557.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s2557173.jpg'}, {'end': 2720.775, 'src': 'embed', 'start': 2690.384, 'weight': 0, 'content': [{'end': 2694.787, 'text': "We'll say question accordion.", 'start': 2690.384, 'duration': 4.403}, {'end': 2697.809, 'text': "Did I spell accordion? No, it's an O.", 'start': 2696.208, 'duration': 1.601}, {'end': 2705.894, 'text': "All right, so let's say section and we're going to give this a class of five, just like all the rest of our sections.", 'start': 2697.809, 'duration': 8.085}, {'end': 2708.135, 'text': "But I'm also going to give it an ID.", 'start': 2706.334, 'duration': 1.801}, {'end': 2713.499, 'text': "For the menu, and I'll show you that in a second, so let's say questions.", 'start': 2709.816, 'duration': 3.683}, {'end': 2720.775, 'text': 'And I just want to save this and show you that if I click on the menu, if I click on this, this is going to go to learn.', 'start': 2715.51, 'duration': 5.265}], 'summary': 'Setting a section class to five and adding an id for the menu.', 'duration': 30.391, 'max_score': 2690.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s2690384.jpg'}, {'end': 2775.919, 'src': 'embed', 'start': 2746.089, 'weight': 6, 'content': [{'end': 2747.709, 'text': 'I thought we had a scroll class.', 'start': 2746.089, 'duration': 1.62}, {'end': 2753.532, 'text': 'I could have swore we added that.', 'start': 2751.411, 'duration': 2.121}, {'end': 2754.352, 'text': "Maybe we didn't.", 'start': 2753.672, 'duration': 0.68}, {'end': 2755.332, 'text': "Oh, I guess you don't need it.", 'start': 2754.412, 'duration': 0.92}, {'end': 2759.534, 'text': 'I thought you needed a specific class for that to happen, but I guess not.', 'start': 2755.352, 'duration': 4.182}, {'end': 2761.955, 'text': 'I guess it just happens by default, which is pretty cool.', 'start': 2759.554, 'duration': 2.401}, {'end': 2770.47, 'text': "But one thing I do want to do is fix the nav bar to the top since we have this type of navigation and that's really easy.", 'start': 2763.458, 'duration': 7.012}, {'end': 2775.919, 'text': 'All we have to do is add a specific class onto our nav bar called fixed dash top.', 'start': 2770.53, 'duration': 5.389}], 'summary': 'Discussion about adding a scroll class and fixing the nav bar to the top.', 'duration': 29.83, 'max_score': 2746.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s2746089.jpg'}], 'start': 2469.88, 'title': 'Website building elements', 'summary': 'Covers creating grid layout with image, text, and button using classes like call md, image fluid, p5, h2, lead, and btn light, and adding a chevron icon to the link. it also includes adding sections with different styles and elements such as images and text, implementing smooth scrolling navigation, and fixing the navigation bar to the top.', 'chapters': [{'end': 2593.916, 'start': 2469.88, 'title': 'Building grid layout with image and text', 'summary': 'Explains how to create a grid layout with an image, text, and a button using classes like call md, image fluid, p5, h2, lead, and btn light, and how to add a chevron icon to the link.', 'duration': 124.036, 'highlights': ['The chapter covers creating a grid layout with an image and text using classes like call MD, image fluid, and P5, allowing for responsive design and padding (P5) for the content.', 'It demonstrates the use of classes like H2 and lead to style the heading and paragraph, making the text visually appealing and larger for the user (lead).', 'The explanation includes adding a button formatted link using classes BTN and BTN light, with a margin top for spacing, and including a Chevron icon using the class BI Chevron right for visual enhancement.']}, {'end': 2770.47, 'start': 2595.077, 'title': 'Website building: adding sections and elements', 'summary': 'Involves adding sections with different styles and elements such as images and text, as well as implementing smooth scrolling navigation and fixing the navigation bar to the top.', 'duration': 175.393, 'highlights': ['Adding sections with different styles and elements The speaker discusses adding sections with different styles and elements to the website, demonstrating the process of changing background colors, positioning images, and modifying text.', 'Implementing smooth scrolling navigation The speaker demonstrates implementing smooth scrolling navigation by using a specific class in the navigation bar, allowing for a seamless transition when clicking on menu items.', 'Fixing the navigation bar to the top The speaker mentions the need to fix the navigation bar to the top due to the type of navigation, indicating that it is a simple process to achieve this.']}], 'duration': 300.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s2469880.jpg', 'highlights': ['The chapter covers creating a grid layout with an image and text using classes like call MD, image fluid, and P5, allowing for responsive design and padding (P5) for the content.', 'Adding sections with different styles and elements, demonstrating the process of changing background colors, positioning images, and modifying text.', 'Implementing smooth scrolling navigation by using a specific class in the navigation bar, allowing for a seamless transition when clicking on menu items.', 'The explanation includes adding a button formatted link using classes BTN and BTN light, with a margin top for spacing, and including a Chevron icon using the class BI Chevron right for visual enhancement.', 'The speaker discusses adding sections with different styles and elements to the website, demonstrating the process of changing background colors, positioning images, and modifying text.', 'Fixing the navigation bar to the top due to the type of navigation, indicating that it is a simple process to achieve this.', 'It demonstrates the use of classes like H2 and lead to style the heading and paragraph, making the text visually appealing and larger for the user (lead).']}, {'end': 3666.891, 'segs': [{'end': 3168.068, 'src': 'embed', 'start': 3097.872, 'weight': 0, 'content': [{'end': 3102.954, 'text': "let's say where exactly are you located?", 'start': 3097.872, 'duration': 5.082}, {'end': 3112.998, 'text': "And then for the content or in the body here I'm going to just get rid of this and let's do lorem lorem 50..", 'start': 3105.595, 'duration': 7.403}, {'end': 3118, 'text': "OK, so that's going to be the content down here.", 'start': 3112.998, 'duration': 5.002}, {'end': 3125.058, 'text': "Now for the next item, you know what I'll do is I'll just copy the first item that I just put.", 'start': 3120.836, 'duration': 4.222}, {'end': 3128.139, 'text': 'So this ends here.', 'start': 3126.518, 'duration': 1.621}, {'end': 3130.299, 'text': "So we're going to grab this.", 'start': 3128.159, 'duration': 2.14}, {'end': 3137.022, 'text': 'Wait, is that right? No.', 'start': 3134.221, 'duration': 2.801}, {'end': 3144.144, 'text': "Sorry, guys, I'm just grabbing the div with the accordion item class.", 'start': 3140.023, 'duration': 4.121}, {'end': 3148.226, 'text': "And let's close that up.", 'start': 3147.065, 'duration': 1.161}, {'end': 3153.112, 'text': "And then I'm going to just go to item two and I'm going to just replace all this.", 'start': 3149.028, 'duration': 4.084}, {'end': 3154.193, 'text': "Actually, I'll just replace.", 'start': 3153.132, 'duration': 1.061}, {'end': 3156.716, 'text': "Yeah, so that's item two.", 'start': 3154.213, 'duration': 2.503}, {'end': 3161.481, 'text': "We'll paste that in and then we have item three, which ends right here.", 'start': 3156.756, 'duration': 4.725}, {'end': 3164.504, 'text': "Let's paste that in.", 'start': 3163.523, 'duration': 0.981}, {'end': 3168.068, 'text': 'So now we should have three of the same questions.', 'start': 3166.066, 'duration': 2.002}], 'summary': 'Transcript details steps to duplicate content and structure for three items.', 'duration': 70.196, 'max_score': 3097.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s3097872.jpg'}, {'end': 3305.729, 'src': 'embed', 'start': 3197.907, 'weight': 1, 'content': [{'end': 3209.291, 'text': "What do I need to know? So like what technologies, what skills do you need to know? And let's change question one here and here to question three.", 'start': 3197.907, 'duration': 11.384}, {'end': 3216.994, 'text': 'So now we should have three separate questions that open separately, but I want to have a few more.', 'start': 3210.171, 'duration': 6.823}, {'end': 3221.655, 'text': "So what I'll do, I think I still my clipboard still has the first item.", 'start': 3217.154, 'duration': 4.501}, {'end': 3223.376, 'text': "So I'm going to go under item three.", 'start': 3221.735, 'duration': 1.641}, {'end': 3226.557, 'text': "Let's say item four.", 'start': 3223.396, 'duration': 3.161}, {'end': 3243.011, 'text': "Paste that in and let's see, we'll do how do I sign up and let's change.", 'start': 3231.36, 'duration': 11.651}, {'end': 3244.472, 'text': "Let's change.", 'start': 3243.471, 'duration': 1.001}, {'end': 3246.895, 'text': 'So we have question one right here.', 'start': 3245.113, 'duration': 1.782}, {'end': 3250.258, 'text': "Let's grab that and that this is going to be four.", 'start': 3247.015, 'duration': 3.243}, {'end': 3257.859, 'text': "And then let's do what was the other question I had? I think I had five.", 'start': 3253.396, 'duration': 4.463}, {'end': 3265.663, 'text': "Will you help me find a job? So let's go under item four, which ends right here.", 'start': 3258.719, 'duration': 6.944}, {'end': 3267.504, 'text': 'Item five.', 'start': 3265.683, 'duration': 1.821}, {'end': 3283.332, 'text': 'Do you help me find a job and then just change the target from one to five? All right.', 'start': 3274.045, 'duration': 9.287}, {'end': 3284.993, 'text': 'So now we should have five questions.', 'start': 3283.352, 'duration': 1.641}, {'end': 3290.537, 'text': "Good So that's the frequently asked questions section with the accordion.", 'start': 3286.294, 'duration': 4.243}, {'end': 3292.259, 'text': 'Now we want to do the instructors.', 'start': 3290.617, 'duration': 1.642}, {'end': 3297.462, 'text': 'So this is going to be similar to like the the cards we did above.', 'start': 3293.039, 'duration': 4.423}, {'end': 3301.866, 'text': "So let's go under this entire section here.", 'start': 3299.084, 'duration': 2.782}, {'end': 3305.729, 'text': "And let's give us an idea of instructors.", 'start': 3303.147, 'duration': 2.582}], 'summary': 'Transcript discusses adding three new questions to a faq section and setting up an instructors section.', 'duration': 107.822, 'max_score': 3197.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s3197907.jpg'}, {'end': 3402.02, 'src': 'embed', 'start': 3373.209, 'weight': 2, 'content': [{'end': 3377.953, 'text': "So let's create a row and we're going to do gap for or it's actually gutter.", 'start': 3373.209, 'duration': 4.744}, {'end': 3380.735, 'text': 'I say gap, but it actually is stands for gutter.', 'start': 3378.253, 'duration': 2.482}, {'end': 3383.336, 'text': "And then let's do call.", 'start': 3381.695, 'duration': 1.641}, {'end': 3386.539, 'text': 'So call dash MD.', 'start': 3384.357, 'duration': 2.182}, {'end': 3388.86, 'text': 'What I want to do here is have it.', 'start': 3387.579, 'duration': 1.281}, {'end': 3394.075, 'text': 'On medium screens I want it to be split into two columns.', 'start': 3390.552, 'duration': 3.523}, {'end': 3402.02, 'text': "So we're going to do dash six which might seem a little confusing if you haven't worked with the grid system but basically there's 12 columns total.", 'start': 3394.355, 'duration': 7.665}], 'summary': 'Creating a grid system with 12 columns, split into two on medium screens.', 'duration': 28.811, 'max_score': 3373.209, 'thumbnail': ''}], 'start': 2770.53, 'title': 'Creating faq section and instructor grid', 'summary': "Covers creating a faq section using an accordion and addressing spacing issues, as well as building a grid layout for instructors' profiles with responsive design, including details like column sizes, images, names, and social media links.", 'chapters': [{'end': 3305.729, 'start': 2770.53, 'title': 'Creating frequently asked questions section', 'summary': 'Explains how to create a frequently asked questions section using an accordion, covering the process of adding a specific class to the navigation bar, addressing spacing issues by adding a ghost element of 60 pixels, and creating a section for instructors.', 'duration': 535.199, 'highlights': ["Adding a specific class to the navigation bar The speaker explains the process of adding a specific class, 'fixed dash top,' to the navigation bar, enabling it to stay in place for easy navigation.", 'Addressing spacing issues by adding a ghost element The speaker addresses spacing issues by adding a ghost element of 60 pixels using the pseudo selector before in the style CSS, ensuring proper alignment.', 'Creating a section for instructors The chapter covers the process of creating a section for instructors, similar to the cards above, indicating a comprehensive approach to building different sections for the webpage.']}, {'end': 3666.891, 'start': 3305.729, 'title': 'Building instructor grid', 'summary': "Explains how to create a grid layout for instructors' profiles, including specifying column sizes, adding images, names, and social media links for each instructor, and ensuring responsive design for different screen sizes.", 'duration': 361.162, 'highlights': ["Creating a grid layout for instructors' profiles Explaining the process of creating a grid layout for displaying instructors' profiles.", 'Specifying column sizes for different screen breakpoints Defining the column sizes based on different screen sizes, with six columns on medium screens and three columns on large screens.', 'Adding images, names, and social media links for each instructor Instructing to include images, names, and social media links for each instructor in the grid layout.', 'Ensuring responsive design for different screen sizes Emphasizing the importance of ensuring the responsiveness of the grid layout for various screen sizes, including small, medium, and large screens.']}], 'duration': 896.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s2770530.jpg', 'highlights': ["Creating a grid layout for instructors' profiles", 'Ensuring responsive design for different screen sizes', 'Adding images, names, and social media links for each instructor', 'Specifying column sizes for different screen breakpoints', 'Creating a section for instructors', 'Addressing spacing issues by adding a ghost element', 'Adding a specific class to the navigation bar']}, {'end': 4726.729, 'segs': [{'end': 3773.826, 'src': 'embed', 'start': 3688.568, 'weight': 7, 'content': [{'end': 3690.109, 'text': 'So those are the things we have left.', 'start': 3688.568, 'duration': 1.541}, {'end': 3692.209, 'text': "So let's go down.", 'start': 3690.809, 'duration': 1.4}, {'end': 3694.81, 'text': 'Under this last section.', 'start': 3693.589, 'duration': 1.221}, {'end': 3699.671, 'text': "And we'll go ahead and create, let's just say contact.", 'start': 3694.83, 'duration': 4.841}, {'end': 3706.289, 'text': "and map, and then let's do section P five.", 'start': 3701.704, 'duration': 4.585}, {'end': 3709.852, 'text': "So padding five, and then let's add a container class.", 'start': 3706.649, 'duration': 3.203}, {'end': 3714.416, 'text': "And then here we're going to have a row with gutter four.", 'start': 3711.053, 'duration': 3.363}, {'end': 3722.012, 'text': 'and we want two columns that start on the medium screen.', 'start': 3717.928, 'duration': 4.084}, {'end': 3734.104, 'text': "so let's say call dash md and then in here we're going to put an h2, h2 with some classes just want to text center it.", 'start': 3722.012, 'duration': 12.092}, {'end': 3735.825, 'text': 'this is the contact info heading.', 'start': 3734.104, 'duration': 1.721}, {'end': 3742.452, 'text': "so we'll do that and we'll do mv4 and let's say contact info.", 'start': 3735.825, 'duration': 6.627}, {'end': 3745.773, 'text': 'now I want, I wanted to include a list group somewhere.', 'start': 3742.452, 'duration': 3.321}, {'end': 3748.996, 'text': "And so, I mean, it doesn't look the greatest.", 'start': 3745.853, 'duration': 3.143}, {'end': 3751.177, 'text': 'This here.', 'start': 3750.497, 'duration': 0.68}, {'end': 3759.664, 'text': 'if you want to change this up, you can, but I wanted to have a list group because you probably use these pretty often, like if you have sidebars with.', 'start': 3751.177, 'duration': 8.487}, {'end': 3762.847, 'text': "I don't know if it's a blog with like category links or something like that.", 'start': 3759.664, 'duration': 3.183}, {'end': 3767.49, 'text': "So let's do a UL and we're going to add list dash group.", 'start': 3763.367, 'duration': 4.123}, {'end': 3769.883, 'text': 'And I want this to be flush.', 'start': 3768.502, 'duration': 1.381}, {'end': 3773.826, 'text': "So we're going to use list dash group dash flush.", 'start': 3769.943, 'duration': 3.883}], 'summary': 'Creating a contact section with specific classes and elements.', 'duration': 85.258, 'max_score': 3688.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s3688568.jpg'}, {'end': 3828.103, 'src': 'embed', 'start': 3802.134, 'weight': 6, 'content': [{'end': 3809.24, 'text': "And then outside of the span, you can put I don't know, I just put 50 Main Street, Boston Mass.", 'start': 3802.134, 'duration': 7.106}, {'end': 3813.243, 'text': 'So if we take a look at that, there we go.', 'start': 3810.501, 'duration': 2.742}, {'end': 3818.248, 'text': "And then I just have I'll just paste these in because it's just like the phone and email and stuff.", 'start': 3813.424, 'duration': 4.824}, {'end': 3819.789, 'text': "It's all formatted the same way.", 'start': 3818.308, 'duration': 1.481}, {'end': 3828.103, 'text': 'So we just have another list group item with the enrollment phone the student phone the enrollment email and the student email.', 'start': 3820.939, 'duration': 7.164}], 'summary': 'Transcript contains discussion on addresses, phone numbers, and emails.', 'duration': 25.969, 'max_score': 3802.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s3802134.jpg'}, {'end': 3980.334, 'src': 'embed', 'start': 3955.37, 'weight': 5, 'content': [{'end': 3964.612, 'text': "So you can add other values to I'm just going to save this to align this correctly so you can add other things inside of this instance.", 'start': 3955.37, 'duration': 9.242}, {'end': 3968.992, 'text': 'And we want to add a center point because we want to focus on a certain area.', 'start': 3965.052, 'duration': 3.94}, {'end': 3972.633, 'text': 'And this is going to take the longitude and then the latitude.', 'start': 3969.473, 'duration': 3.16}, {'end': 3980.334, 'text': "So I'm just going to do seven negative seventy one dot zero six zero nine eight two.", 'start': 3972.693, 'duration': 7.641}], 'summary': 'Adding a center point with longitude -71.060982 and latitude 7.', 'duration': 24.964, 'max_score': 3955.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4sosXZsdy-s/pics/4sosXZsdy-s3955370.jpg'}, {'end': 4064.668, 'src': 'embed', 'start': 4031.55, 'weight': 4, 'content': [{'end': 4035.693, 'text': 'So the last thing we want to put, well, actually we want to do the footer and then we want to do the modal.', 'start': 4031.55, 'duration': 4.143}, {'end': 4045.841, 'text': "So, for the footer, let's go right here, footer, and we're going to want to use a footer tag here,", 'start': 4036.634, 'duration': 9.207}, {'end': 4053.067, 'text': "and let's do P dash five and BG dash dark for our footer.", 'start': 4045.841, 'duration': 7.226}, {'end': 4058.311, 'text': "And let's see, actually there's some other classes we want to do as well.", 'start': 4054.548, 'duration': 3.763}, {'end': 4064.668, 'text': "So I'm going to add text White and text center.", 'start': 4058.391, 'duration': 6.277}], 'summary': 'Add footer using