title
Learn Bootstrap 5 and SASS by Building a Portfolio Website - Full Course

description
Learn Bootstrap 5 and Sass by building a portfolio website. Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. ✏️ Course from Patrick Muriungi. Check out his channel: https://www.youtube.com/channel/UCEtlYWZil1WbX2LoqF2qocQ 🐦 Patrick on Twitter: http://twitter.com/itsmuriungi 💻 Code (completed project): https://github.com/MuriungiPatrick/Bootstrap-5-portfolio-template 💻 Code (theming-kit.html): https://github.com/MuriungiPatrick/Bootstrap-5-Theming-Kit ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Part 1: Intro to Website Project ⌨️ (0:02:13) Part 2-1: SASS Setup ⌨️ (0:19:27) Part 2-2: Customizing Bootstrap ⌨️ (0:35:39) Part 3: File structure ⌨️ (0:43:32) Part 4: The Navbar Section ⌨️ (1:13:25) Part 5: The Intro Section ⌨️ (1:57:00) Part 6: The Companies Section ⌨️ (2:11:11) Part 7: The Services Section ⌨️ (2:41:20) Part 8: Testimonials Section ⌨️ (3:11:10) Part 9: The FAQ Section ⌨️ (3:20:13) Part 10: The Portfolio Section ⌨️ (3:45:21) Part 11: Getting Started Section ⌨️ (4:10:24) Part 12: The Footer Section ⭐️ Resources ⭐️ 🔗 SASS: https://sass-lang.com/guide 🔗 Bootstrap 5: https://getbootstrap.com/docs/5.0/getting-started/introduction/ 🔗 Google fonts: https://fonts.google.com 🔗 Fontawesome: https://fontawesome.com/start 🔗 Tablericons: https://tablericons.com 🔗 Bootstrap icons: https://icons.getbootstrap.com 🔗 Illustrations: https://www.manypixels.co/gallery 🎉 Thanks to our Champion and Sponsor supporters: 👾 Wong Voon jinq 👾 hexploitation 👾 Katia Moran 👾 BlckPhantom 👾 Nick Raker 👾 Otis Morgan 👾 DeezMaster 👾 Treehouse -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Learn Bootstrap 5 and SASS by Building a Portfolio Website - Full Course', 'heatmap': [{'end': 1636.188, 'start': 725.882, 'weight': 0.746}, {'end': 2906.478, 'start': 2721.121, 'weight': 1}, {'end': 3449.146, 'start': 3265.259, 'weight': 0.76}, {'end': 3993.231, 'start': 3806.371, 'weight': 0.963}], 'summary': 'Learn bootstrap 5 and saas by building a portfolio website, covering setting up saas environment, customizing bootstrap with saas, styling project elements, responsive design, implementing interactive design elements, creating a web design portfolio, and styling footer and responsive content with quantifiable data such as setting padding, width, and height values for increased engagement and user experience.', 'chapters': [{'end': 102.365, 'segs': [{'end': 58.059, 'src': 'embed', 'start': 0.209, 'weight': 0, 'content': [{'end': 3.312, 'text': 'Bootstrap is one of the most popular CSS frameworks.', 'start': 0.209, 'duration': 3.103}, {'end': 7.397, 'text': 'And SAS is one of the most popular CSS pre processors.', 'start': 3.793, 'duration': 3.604}, {'end': 13.343, 'text': 'In this course, Patrick will teach you how to create a portfolio website using Bootstrap five and SAS.', 'start': 7.837, 'duration': 5.506}, {'end': 17.394, 'text': 'Hey everyone, how are you doing? Thanks for checking out this video.', 'start': 14.312, 'duration': 3.082}, {'end': 19.455, 'text': 'My name is Patrick from Vexacode.', 'start': 17.614, 'duration': 1.841}, {'end': 24.898, 'text': "So in this video, we're going to build a multipurpose layout with Bootstrap version 5 and SaaS.", 'start': 20.196, 'duration': 4.702}, {'end': 31.382, 'text': "And the first thing you're going to do is to learn how to set up the SaaS environment so that you can be able to work with SaaS.", 'start': 25.799, 'duration': 5.583}, {'end': 35.505, 'text': "Then you're going to start building the project for a fake company called Patricks.", 'start': 32.482, 'duration': 3.023}, {'end': 40.048, 'text': "So we're going to start with the Navbar, which is the topmost part of this layout.", 'start': 36.545, 'duration': 3.503}, {'end': 44.496, 'text': "and then we're going to create the second section called the intro section.", 'start': 41.075, 'duration': 3.421}, {'end': 51.137, 'text': "so here you're going to create a brief introduction about the company and then, on the right, you're going to create this pop-up.", 'start': 44.496, 'duration': 6.641}, {'end': 58.059, 'text': 'so you have this animated play button, and once you click, then a video will pop up from youtube or any other source that you choose from.', 'start': 51.137, 'duration': 6.922}], 'summary': 'Learn to build a portfolio website using bootstrap 5 and saas in a course by patrick from vexacode.', 'duration': 57.85, 'max_score': 0.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz8209.jpg'}], 'start': 0.209, 'title': 'Building portfolio website with bootstrap 5 and saas', 'summary': 'Covers the creation of a portfolio website using bootstrap 5 and saas, which includes setting up the saas environment, building a multipurpose layout for a fake company, and showcasing services, testimonials, frequently asked questions, and latest work.', 'chapters': [{'end': 102.365, 'start': 0.209, 'title': 'Building portfolio website with bootstrap 5 and saas', 'summary': 'Covers creating a portfolio website using bootstrap 5 and saas, including setting up the saas environment, building a multipurpose layout for a fake company, and showcasing services, testimonials, frequently asked questions, and latest work.', 'duration': 102.156, 'highlights': ['Creating a portfolio website using Bootstrap 5 and SaaS, with a focus on setting up the SaaS environment, building a multipurpose layout for a fake company, and showcasing services, testimonials, frequently asked questions, and latest work.', 'Learning how to set up the SaaS environment to work with SaaS.', 'Building a multipurpose layout for a fake company called Patricks, starting with the Navbar and then creating sections for introduction, services, testimonials, frequently asked questions, and latest work.', 'Showcasing some of the services offered by the fake company in the services section.', 'Creating a section for testimonials to showcase what clients are saying about the company.', 'Using a bootstrap component called accordion to create a section for frequently asked questions, with collapsible questions and answers.', 'Showcasing some of the latest work created by the fake company in a dedicated section with filtering buttons for portfolio categories.']}], 'duration': 102.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz8209.jpg', 'highlights': ['Creating a portfolio website using Bootstrap 5 and SaaS, with a focus on setting up the SaaS environment, building a multipurpose layout for a fake company, and showcasing services, testimonials, frequently asked questions, and latest work.', 'Learning how to set up the SaaS environment to work with SaaS.', 'Building a multipurpose layout for a fake company called Patricks, starting with the Navbar and then creating sections for introduction, services, testimonials, frequently asked questions, and latest work.', 'Showcasing some of the services offered by the fake company in the services section.', 'Creating a section for testimonials to showcase what clients are saying about the company.', 'Using a bootstrap component called accordion to create a section for frequently asked questions, with collapsible questions and answers.', 'Showcasing some of the latest work created by the fake company in a dedicated section with filtering buttons for portfolio categories.']}, {'end': 1145.171, 'segs': [{'end': 549.592, 'src': 'embed', 'start': 517.448, 'weight': 6, 'content': [{'end': 518.549, 'text': "And then I'm going to paste.", 'start': 517.448, 'duration': 1.101}, {'end': 527.321, 'text': "Enter. So, by doing that, you'll be able to see a new folder on our project folder called node modules,", 'start': 521.273, 'duration': 6.048}, {'end': 529.684, 'text': "which is going to keep all the packages that you're going to install.", 'start': 527.321, 'duration': 2.363}, {'end': 537.927, 'text': 'So now as you can see we have that folder and if you look on the terminal you can see it has added 16 packages.', 'start': 532.705, 'duration': 5.222}, {'end': 549.592, 'text': "So let's look again on the node modules that folder you'll see we have that is some folders you can see we have some folders there's 16 of them.", 'start': 539.108, 'duration': 10.484}], 'summary': 'Installing packages added 16 new folders to node modules.', 'duration': 32.144, 'max_score': 517.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz8517448.jpg'}, {'end': 766.536, 'src': 'embed', 'start': 705.014, 'weight': 2, 'content': [{'end': 712.917, 'text': "And I'm going to click on the first results that says pass CSS and add vendor prefixes to CSS rules using values from Can I Use website.", 'start': 705.014, 'duration': 7.903}, {'end': 714.838, 'text': "So I'm going to click on that.", 'start': 713.777, 'duration': 1.061}, {'end': 718.459, 'text': "And here you'll see we have this auto-prefixer.", 'start': 716.398, 'duration': 2.061}, {'end': 724.481, 'text': 'Post CSS plugin to pass CSS and add vendor prefixes to CSS rules.', 'start': 719.259, 'duration': 5.222}, {'end': 729.723, 'text': "So if you scroll down, you'll see we have the command for installing this package.", 'start': 725.882, 'duration': 3.841}, {'end': 735.297, 'text': "so I'm just going to search for that.", 'start': 733.536, 'duration': 1.761}, {'end': 737.878, 'text': "so I'm going to type install.", 'start': 735.297, 'duration': 2.581}, {'end': 741.979, 'text': 'so you can see we have that command.', 'start': 737.878, 'duration': 4.101}, {'end': 755.904, 'text': "so I'm going to copy and then on the terminal I'm going to paste, then I'm going to flag it with minus, minus, save enter.", 'start': 741.979, 'duration': 13.925}, {'end': 761.375, 'text': 'So it has added the packages 921 packages.', 'start': 758.274, 'duration': 3.101}, {'end': 766.536, 'text': 'So we check from the text editor you see now we have two new dependencies.', 'start': 762.155, 'duration': 4.381}], 'summary': 'Using auto-prefixer post css plugin to add vendor prefixes to css rules, resulting in the addition of 921 packages.', 'duration': 61.522, 'max_score': 705.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz8705014.jpg'}, {'end': 922.164, 'src': 'embed', 'start': 864.323, 'weight': 0, 'content': [{'end': 871.349, 'text': "So inside the project, I'm going to create that folder which is SCSS.", 'start': 864.323, 'duration': 7.026}, {'end': 876.444, 'text': "So from there we're going to put our script to test.", 'start': 874.102, 'duration': 2.342}, {'end': 886.81, 'text': "So, inside the sss folder, I'm going to create a new sass file and I'm going to call it style.sss.", 'start': 876.904, 'duration': 9.906}, {'end': 893.094, 'text': "So, on the terminal, before we write any style, I'm going to start that script.", 'start': 886.81, 'duration': 6.284}, {'end': 903.227, 'text': "So on the terminal I'm going to run npm run compile sass So remember the name of that script.", 'start': 894.395, 'duration': 8.832}, {'end': 910.694, 'text': 'If you check again on the package.json file, you can see we have the name of that script, which is compile colon sass.', 'start': 903.567, 'duration': 7.127}, {'end': 913.396, 'text': 'So that is a script that you need to run on your terminal.', 'start': 911.394, 'duration': 2.002}, {'end': 918.26, 'text': 'That is npm run and then the name of that script, which is compile sass.', 'start': 913.897, 'duration': 4.363}, {'end': 920.162, 'text': "It can be any name that you've given.", 'start': 918.481, 'duration': 1.681}, {'end': 922.164, 'text': "So from there, I'm going to hit enter.", 'start': 921.123, 'duration': 1.041}], 'summary': "Creating scss folder, adding style.sss file, and running 'npm run compile sass' script.", 'duration': 57.841, 'max_score': 864.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz8864323.jpg'}, {'end': 1000.883, 'src': 'embed', 'start': 969.87, 'weight': 1, 'content': [{'end': 976.375, 'text': "So, for testing purposes, I'm going to write some styles on the sass file, which is the style.css,", 'start': 969.87, 'duration': 6.505}, {'end': 980.299, 'text': "and then you're going to see how it's going to compile on the style.css.", 'start': 976.375, 'duration': 3.924}, {'end': 986.944, 'text': "So I'm going to open that file which is style.css to the side so that you can see in real time how it's going to compile.", 'start': 980.879, 'duration': 6.065}, {'end': 991.848, 'text': "So before I write any styles I'm going to run the script again.", 'start': 988.085, 'duration': 3.763}, {'end': 1000.883, 'text': 'And here you can see it has compiled and then it has terminated the process.', 'start': 996.94, 'duration': 3.943}], 'summary': 'Testing sass file compilation with real-time viewing of style.css', 'duration': 31.013, 'max_score': 969.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz8969870.jpg'}, {'end': 1060.765, 'src': 'embed', 'start': 1035.896, 'weight': 3, 'content': [{'end': 1043.641, 'text': "So that flag is going to watch for the changes that we're going to do inside that folder or any file inside that folder called sss.", 'start': 1035.896, 'duration': 7.745}, {'end': 1048.424, 'text': "So I'm going to save and then I'm going to run the script again.", 'start': 1044.781, 'duration': 3.643}, {'end': 1054.483, 'text': 'So now you can see the script has not terminated the process.', 'start': 1052.162, 'duration': 2.321}, {'end': 1056.804, 'text': 'You can see SASS is watching for changes.', 'start': 1054.583, 'duration': 2.221}, {'end': 1060.765, 'text': 'You can press Ctrl C to stop the script.', 'start': 1057.444, 'duration': 3.321}], 'summary': 'The script successfully monitors the sss folder for changes, without termination.', 'duration': 24.869, 'max_score': 1035.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz81035896.jpg'}], 'start': 103.705, 'title': 'Setting up saas environment, npm packages, and sass compilation', 'summary': 'Discusses setting up a saas environment with node.js, npm package installation for a project, including 16 packages, and sass compilation using npm scripts, emphasizing the importance of basic knowledge in html and css for setting up the environment.', 'chapters': [{'end': 490.573, 'start': 103.705, 'title': 'Setting up saas environment', 'summary': 'Discusses setting up a saas environment, including installing node.js, creating a package.json file, and installing packages like saas, bootstrap, font awesome, and autoprefixer, emphasizing the importance of having basic knowledge in html and css.', 'duration': 386.868, 'highlights': ["Installing Node.js is crucial for running JavaScript on the server and ensuring a fully responsive layout across various screen devices. Node.js allows you to run JavaScript on the server and it's free and it runs on various platforms, enabling a fully responsive layout. It emphasizes the importance of having basic knowledge in HTML and CSS before getting started.", 'Creating a file called package.json is essential to manage all project dependencies and packages. The process of creating the package.json file is outlined, emphasizing its role in managing project dependencies and packages.', "Installing packages like SaaS, Bootstrap, Font Awesome, and Autoprefixer is necessary for the project's functionality and design elements. The importance of installing SaaS, Bootstrap, Font Awesome, and Autoprefixer for the project's functionality and design elements is highlighted."]}, {'end': 766.536, 'start': 491.454, 'title': 'Installing npm packages for your project', 'summary': 'Discusses the installation of npm packages for a project, covering the global and project-specific installation using npm commands and highlighting the addition of 16 packages to the project, including sass version 1.32.12, bootstrap version 5, font awesome version 5.153, and autoprefixer.', 'duration': 275.082, 'highlights': ['It has added 16 packages to the project folder. Upon installation, 16 packages were added to the project folder, visible in the node modules directory.', 'The package.json file now includes a new dev dependency: Sass version 1.32.12. The package.json file now includes a new dev dependency: Sass version 1.32.12, indicating the specific version used at the time of the video.', "The installation process added the Bootstrap version 5 package as a new dependency. The installation process successfully added the Bootstrap version 5 package as a new dependency, with the command 'npm install bootstrap --save'.", "Font Awesome version 5.153 was successfully installed and added as a new dependency. The successful installation and addition as a new dependency of Font Awesome version 5.153 were accomplished using the command 'npm install --save fontawesome-free'.", 'The autoprefixer package was installed, adding 921 packages to the project. The installation of the autoprefixer package resulted in the addition of 921 packages to the project, enhancing its functionality.']}, {'end': 1145.171, 'start': 766.616, 'title': 'Setting up sass compilation', 'summary': 'Details the process of setting up sass compilation using npm scripts, including installation of packages, creating compilation scripts, generating source maps, and implementing a watch flag for real-time compilation.', 'duration': 378.555, 'highlights': ['The chapter highlights the process of setting up SASS compilation using NPM scripts, including installation of auto-prefixer version 10.25 and post CSS CLI version 8.31. It emphasizes the creation of NPM scripts for compiling SASS to CSS and the generation of source maps for browser compatibility.', 'The detailed explanation of creating an NPM script for compiling SASS to CSS, including the configuration of package names, source and destination folders, and the subsequent creation and testing of the SCSS folder and the compilation script.', 'The demonstration of the real-time compilation of SASS to CSS using the watch flag, with the modification of the script in the package.json file to include the watch flag for monitoring changes in the SCSS folder.']}], 'duration': 1041.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz8103705.jpg', 'highlights': ['Installing Node.js is crucial for running JavaScript on the server and ensuring a fully responsive layout across various screen devices.', 'Creating a file called package.json is essential to manage all project dependencies and packages.', "Installing packages like SaaS, Bootstrap, Font Awesome, and Autoprefixer is necessary for the project's functionality and design elements.", 'It has added 16 packages to the project folder.', 'The package.json file now includes a new dev dependency: Sass version 1.32.12.', 'The installation process added the Bootstrap version 5 package as a new dependency.', 'Font Awesome version 5.153 was successfully installed and added as a new dependency.', 'The autoprefixer package was installed, adding 921 packages to the project.', 'The chapter highlights the process of setting up SASS compilation using NPM scripts, including installation of auto-prefixer version 10.25 and post CSS CLI version 8.31.', 'The detailed explanation of creating an NPM script for compiling SASS to CSS, including the configuration of package names, source and destination folders, and the subsequent creation and testing of the SCSS folder and the compilation script.', 'The demonstration of the real-time compilation of SASS to CSS using the watch flag, with the modification of the script in the package.json file to include the watch flag for monitoring changes in the SCSS folder.']}, {'end': 2075.558, 'segs': [{'end': 1197.197, 'src': 'embed', 'start': 1170.108, 'weight': 3, 'content': [{'end': 1175.493, 'text': "So here we're going to override some of the bootstrap defaults so that you can achieve the needs that you want on the project.", 'start': 1170.108, 'duration': 5.385}, {'end': 1181.259, 'text': "I'm going to create a custom sass file which is going to keep all the variables that you're going to override in bootstrap.", 'start': 1176.234, 'duration': 5.025}, {'end': 1186.344, 'text': 'And this is because it is not good practice to modify or edit the bootstrap core files.', 'start': 1181.94, 'duration': 4.404}, {'end': 1191.794, 'text': "So inside the sss folder, and this is the folder that we said you're going to keep all the sass files.", 'start': 1187.392, 'duration': 4.402}, {'end': 1193.615, 'text': "I'm going to create that file.", 'start': 1192.095, 'duration': 1.52}, {'end': 1197.197, 'text': "So I'm going to create it as a partial.", 'start': 1194.796, 'duration': 2.401}], 'summary': 'Creating a custom sass file to override bootstrap defaults for project needs.', 'duration': 27.089, 'max_score': 1170.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz81170108.jpg'}, {'end': 2046.199, 'src': 'embed', 'start': 2009.76, 'weight': 0, 'content': [{'end': 2012.122, 'text': 'so again, you have different ways of using this icon.', 'start': 2009.76, 'duration': 2.362}, {'end': 2017.426, 'text': 'we are only interested with html code for that svg.', 'start': 2012.122, 'duration': 5.304}, {'end': 2022.45, 'text': 'so copy again on my notepad.', 'start': 2017.426, 'duration': 5.024}, {'end': 2032.529, 'text': "so, just like we did, i'm going to copy the dimension only for the first path And then again I'm going to replace for the second icon,", 'start': 2022.45, 'duration': 10.079}, {'end': 2033.87, 'text': 'which is the chevron down.', 'start': 2032.529, 'duration': 1.341}, {'end': 2042.556, 'text': 'Paste And then copy the second path, the entire path.', 'start': 2036.472, 'duration': 6.084}, {'end': 2046.199, 'text': 'And then again here paste.', 'start': 2044.517, 'duration': 1.682}], 'summary': 'Discussion on using html code for svg icons, with steps for copying and pasting paths.', 'duration': 36.439, 'max_score': 2009.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz82009760.jpg'}], 'start': 1145.171, 'title': 'Customizing bootstrap with sass', 'summary': 'Covers customizing bootstrap with custom sass, the process of overriding bootstrap variables, replacing default colors, and customizing accordion icons for successful override in the dimming kit.', 'chapters': [{'end': 1206.983, 'start': 1145.171, 'title': 'Customizing bootstrap with custom sass', 'summary': 'Discusses customizing bootstrap by creating a custom sass file to override default variables, emphasizing good practice of not modifying core files, and highlighting the process of creating a partial sass file for customization.', 'duration': 61.812, 'highlights': ['Creating a custom SASS file to override default bootstrap variables is emphasized as a good practice, ensuring that modifications are kept separate from the core files.', 'The process of creating a partial SASS file is explained, with an underscore used to denote that the file is a partial and should not be generated into a style sheet.', 'Emphasizing the importance of not modifying or editing the bootstrap core files to achieve project-specific needs is highlighted, promoting the use of a custom SASS file for overrides.']}, {'end': 1367.198, 'start': 1211.306, 'title': 'Bootstrap override process', 'summary': 'Details the process of overriding bootstrap variables in the daeminkit.html file, including importing bootstrap, linking stylesheets, and real-time compilation of the custom sass file.', 'duration': 155.892, 'highlights': ['The process involves importing Bootstrap and overriding variables in the daeminkit.html file. The chapter outlines the steps to import Bootstrap, override variables, and link stylesheets in the daeminkit.html file.', 'Real-time compilation of the custom sass file is demonstrated. Real-time compilation of the custom sass file is showcased, providing a practical demonstration of the process.', 'The importance of linking the stylesheet to the daeminkit.html file is emphasized. The significance of linking the stylesheet to the daeminkit.html file is highlighted as a crucial step in the process.']}, {'end': 1685.165, 'start': 1367.458, 'title': 'Override bootstrap default colors', 'summary': 'Discusses overriding default colors in bootstrap, including replacing blue with purple and pink, changing the accordion button to a plus icon, and modifying primary and secondary colors in the variables file, resulting in changes reflected in the layout.', 'duration': 317.707, 'highlights': ['Override Bootstrap Default Colors The chapter discusses overriding default colors in Bootstrap, including replacing blue with purple and pink, changing the accordion button to a plus icon, and modifying primary and secondary colors in the variables file, resulting in changes reflected in the layout.', 'Replacing default colors with custom theme colors The primary color is changed from blue to purple and the secondary color from gray 900 to pink, with further adjustments made to match the specific hex values used in the layout.', 'Modifying primary and secondary colors in the variables file The process involves copying gray, white, black, purple, and pink colors from the Bootstrap variables file and assigning them to custom theme colors, followed by removing default flags and saving the changes.', 'Changing the accordion button to a plus icon The chapter details the process of replacing the default accordion button with a plus icon and dash circle, along with overwriting other default icons such as chevron up and chevron down.']}, {'end': 2075.558, 'start': 1687.066, 'title': 'Customizing accordion icons', 'summary': 'Discusses the process of customizing accordion icons by replacing default chevron icons with custom plus and dash circle icons, utilizing variables for icon colors and obtaining svg code from bootstrap icons, resulting in successful override of the icons in the dimming kit.', 'duration': 388.492, 'highlights': ['Replacing default Chevron icons with custom plus and dash circle icons The process involves replacing the default Chevron icons with custom plus and dash circle icons to customize the accordion buttons.', 'Utilizing variables for icon colors The variables for icon colors, namely accordion icon color and accordion icon active color, are utilized to assign primary and secondary colors to the icons, contributing to the customization process.', 'Obtaining SVG code from Bootstrap icons The speaker recommends using Bootstrap icons as a source for obtaining SVG code, specifically advising to visit icons.getbootstrap.com to search for and obtain the SVG code for the custom icons, ensuring a reliable source for the customization process.', 'Successful override of icons in the dimming kit The customization process results in the successful override of the default icons in the dimming kit, as evidenced by the replacement of Chevron icons with the custom plus and dash circle icons, demonstrating the effective implementation of the customization.']}], 'duration': 930.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz81145171.jpg', 'highlights': ['Override Bootstrap Default Colors The chapter discusses overriding default colors in Bootstrap, including replacing blue with purple and pink, changing the accordion button to a plus icon, and modifying primary and secondary colors in the variables file, resulting in changes reflected in the layout.', 'Creating a custom SASS file to override default bootstrap variables is emphasized as a good practice, ensuring that modifications are kept separate from the core files.', 'The process involves importing Bootstrap and overriding variables in the daeminkit.html file. The chapter outlines the steps to import Bootstrap, override variables, and link stylesheets in the daeminkit.html file.', 'Replacing default Chevron icons with custom plus and dash circle icons The process involves replacing the default Chevron icons with custom plus and dash circle icons to customize the accordion buttons.']}, {'end': 4081.284, 'segs': [{'end': 2147.942, 'src': 'embed', 'start': 2117.696, 'weight': 2, 'content': [{'end': 2119.837, 'text': 'Save Check on the browser.', 'start': 2117.696, 'duration': 2.141}, {'end': 2122.779, 'text': 'And there you have it.', 'start': 2120.898, 'duration': 1.881}, {'end': 2126.881, 'text': 'You can see now it has increased the width of the icon.', 'start': 2122.819, 'duration': 4.062}, {'end': 2130.924, 'text': 'And that is exactly what we have on our layout.', 'start': 2128.863, 'duration': 2.061}, {'end': 2134.686, 'text': 'So I think we are done with that part.', 'start': 2132.925, 'duration': 1.761}, {'end': 2140.413, 'text': 'Welcome back.', 'start': 2139.912, 'duration': 0.501}, {'end': 2144.337, 'text': 'In this video, we are going to create the file structure for our project,', 'start': 2140.813, 'duration': 3.524}, {'end': 2147.942, 'text': 'and this is to make sure that we have a code that is well organized and maintainable.', 'start': 2144.337, 'duration': 3.605}], 'summary': 'Increased icon width to match layout; creating organized file structure for project.', 'duration': 30.246, 'max_score': 2117.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz82117696.jpg'}, {'end': 2906.478, 'src': 'heatmap', 'start': 2721.121, 'weight': 1, 'content': [{'end': 2727.706, 'text': 'So we have the link and then assets folder css and then style.css.', 'start': 2721.121, 'duration': 6.585}, {'end': 2734.822, 'text': "Then from there we're going to link the JavaScript and here from the documentation you have two options.", 'start': 2729.611, 'duration': 5.211}, {'end': 2739.031, 'text': 'The first option is by using the bootstrap bundle which has the popper.', 'start': 2735.584, 'duration': 3.447}, {'end': 2745.943, 'text': 'The second option is by using them as separate files that is the popper and the bootstrap JavaScript.', 'start': 2740.16, 'duration': 5.783}, {'end': 2751.365, 'text': 'Here again you have the option to either link them using the CDN or downloading the source files.', 'start': 2746.003, 'duration': 5.362}, {'end': 2754.866, 'text': "I've already downloaded the source files and I have them in my project.", 'start': 2751.545, 'duration': 3.321}, {'end': 2759.488, 'text': 'We have the assets and then we have this folder called JS.', 'start': 2755.527, 'duration': 3.961}, {'end': 2762.029, 'text': "I'm going to link that file using the bootstrap bundle.js.", 'start': 2759.508, 'duration': 2.521}, {'end': 2770.049, 'text': "So below the end of the body I'm going to add the script.", 'start': 2765.885, 'duration': 4.164}, {'end': 2775.975, 'text': 'So we have the source.', 'start': 2775.054, 'duration': 0.921}, {'end': 2780.199, 'text': 'So we have the assets folder.', 'start': 2779.058, 'duration': 1.141}, {'end': 2793.168, 'text': "and then the js and then I'm going to link it with the bootstrap bundle.js So I'm going to save the file.", 'start': 2785.603, 'duration': 7.565}, {'end': 2795.289, 'text': 'So the starter template is ready.', 'start': 2793.828, 'duration': 1.461}, {'end': 2797.13, 'text': 'We can go ahead and create the navbar.', 'start': 2795.389, 'duration': 1.741}, {'end': 2799.231, 'text': "So I'm going to start with a comment.", 'start': 2797.43, 'duration': 1.801}, {'end': 2804.675, 'text': 'So we have the start the navbar section.', 'start': 2800.392, 'duration': 4.283}, {'end': 2813.66, 'text': "So to save time I'm going to copy the code from the bootstrap documentation.", 'start': 2809.818, 'duration': 3.842}, {'end': 2820.292, 'text': "So here I'm going to go to components and then down here we have the navbar.", 'start': 2815.191, 'duration': 5.101}, {'end': 2825.454, 'text': "So here I'm going to scroll down till I find the version that I want.", 'start': 2822.393, 'duration': 3.061}, {'end': 2837.217, 'text': "So I'm going to copy this code and then I'm going to paste.", 'start': 2826.434, 'duration': 10.783}, {'end': 2842.477, 'text': 'So you can see now here we have a class called container fluid.', 'start': 2839.335, 'duration': 3.142}, {'end': 2846.82, 'text': 'So in the booster version 5 a container must be within the navbar.', 'start': 2842.857, 'duration': 3.963}, {'end': 2854.064, 'text': 'And you have the option to either use the container fluid class or the container class.', 'start': 2849.161, 'duration': 4.903}, {'end': 2855.725, 'text': "So I'm going to use the container class.", 'start': 2854.304, 'duration': 1.421}, {'end': 2863.29, 'text': "So I'm going to save that and then you're going to see this page on our browser.", 'start': 2857.726, 'duration': 5.564}, {'end': 2866.686, 'text': "So I'm going to go live.", 'start': 2865.345, 'duration': 1.341}, {'end': 2869.188, 'text': 'And here we have the navbar.', 'start': 2867.947, 'duration': 1.241}, {'end': 2870.569, 'text': 'So we need to change the color.', 'start': 2869.408, 'duration': 1.161}, {'end': 2874.512, 'text': "So I'm going to change from BG light to BG primary.", 'start': 2872.09, 'duration': 2.422}, {'end': 2881.498, 'text': 'So there you have it.', 'start': 2880.597, 'duration': 0.901}, {'end': 2885.821, 'text': 'So before we style the navbar, we need to do a few things on it.', 'start': 2883.119, 'duration': 2.702}, {'end': 2890.224, 'text': 'The first one is to add the logo and then push these menus to the right.', 'start': 2886.081, 'duration': 4.143}, {'end': 2894.888, 'text': 'And then make sure that the menus reflect what we have here on the layout.', 'start': 2891.125, 'duration': 3.763}, {'end': 2906.478, 'text': "So here we are going to start by pushing the menus to the right and here I'm going to add a class called justify content end.", 'start': 2899.514, 'duration': 6.964}], 'summary': 'Setting up bootstrap, linking javascript, creating and styling a navbar.', 'duration': 185.357, 'max_score': 2721.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz82721121.jpg'}, {'end': 3449.146, 'src': 'heatmap', 'start': 3265.259, 'weight': 0.76, 'content': [{'end': 3267.521, 'text': "So here you're not going to use it with a namespace.", 'start': 3265.259, 'duration': 2.262}, {'end': 3269.283, 'text': "So you're going to use it as a star.", 'start': 3267.541, 'duration': 1.742}, {'end': 3272.445, 'text': 'So the star tells us to remove the namespaces.', 'start': 3270.003, 'duration': 2.442}, {'end': 3273.346, 'text': "So I'm going to save.", 'start': 3272.625, 'duration': 0.721}, {'end': 3274.046, 'text': "Let's see.", 'start': 3273.626, 'duration': 0.42}, {'end': 3277.229, 'text': 'And there you have it.', 'start': 3276.288, 'duration': 0.941}, {'end': 3278.75, 'text': 'You can see now it is working.', 'start': 3277.269, 'duration': 1.481}, {'end': 3282.793, 'text': "So let's continue styling.", 'start': 3280.791, 'duration': 2.002}, {'end': 3287.997, 'text': 'So we need to add the color and do some padding on the menu items or the nav items.', 'start': 3283.333, 'duration': 4.664}, {'end': 3291.12, 'text': "So here we're going to nest it.", 'start': 3290.1, 'duration': 1.02}, {'end': 3292.82, 'text': 'So we have the li.', 'start': 3291.84, 'duration': 0.98}, {'end': 3295.781, 'text': "We're going to do some padding.", 'start': 3294.681, 'duration': 1.1}, {'end': 3303.062, 'text': "So for the top and bottom you're going to put 0 and then left and right 0.7 rem.", 'start': 3297.941, 'duration': 5.121}, {'end': 3306.643, 'text': "Save Let's see.", 'start': 3303.202, 'duration': 3.441}, {'end': 3309.403, 'text': 'And there you have it.', 'start': 3308.443, 'duration': 0.96}, {'end': 3311.484, 'text': 'You can see now we have some padding on the nav items.', 'start': 3309.423, 'duration': 2.061}, {'end': 3315.104, 'text': "So let's change the color to white.", 'start': 3313.504, 'duration': 1.6}, {'end': 3316.064, 'text': 'So we have the links.', 'start': 3315.184, 'duration': 0.88}, {'end': 3318.905, 'text': 'So we have the color.', 'start': 3318.065, 'duration': 0.84}, {'end': 3334.322, 'text': 'So here we need to put white and then some text transform to capitalize and then some font-weight.', 'start': 3321.027, 'duration': 13.295}, {'end': 3337.446, 'text': "We're going to have 600.", 'start': 3336.725, 'duration': 0.721}, {'end': 3339.869, 'text': "So save, let's see.", 'start': 3337.446, 'duration': 2.423}, {'end': 3347.547, 'text': 'So you can see the menus are bold but the colors has not changed.', 'start': 3342.305, 'duration': 5.242}, {'end': 3350.748, 'text': "So here we're going to fix that with the important.", 'start': 3348.127, 'duration': 2.621}, {'end': 3353.789, 'text': 'So we have the important on the color.', 'start': 3352.008, 'duration': 1.781}, {'end': 3354.949, 'text': "So I'm going to save.", 'start': 3354.169, 'duration': 0.78}, {'end': 3357.77, 'text': 'And there you have it.', 'start': 3356.849, 'duration': 0.921}, {'end': 3362.851, 'text': "So let's create a mixing for this gradient because you're going to reuse it so many times.", 'start': 3358.67, 'duration': 4.181}, {'end': 3367.673, 'text': "So I'm going to open that component which is the mixing.sss file.", 'start': 3364.512, 'duration': 3.161}, {'end': 3373.333, 'text': "So here we're going to copy this gradient.", 'start': 3370.512, 'duration': 2.821}, {'end': 3375.993, 'text': "So first let's create that mixing.", 'start': 3374.453, 'duration': 1.54}, {'end': 3381.315, 'text': 'So we have the gradient mixing.', 'start': 3377.654, 'duration': 3.661}, {'end': 3383.215, 'text': 'So that is a comment.', 'start': 3382.275, 'duration': 0.94}, {'end': 3391.477, 'text': "So we have the add mixing and the name of that mixing we're going to call it gradient.", 'start': 3385.496, 'duration': 5.981}, {'end': 3399.622, 'text': "So let's copy that background gradient.", 'start': 3396.92, 'duration': 2.702}, {'end': 3404.244, 'text': "So I'm going to cut, actually cut and then here we're going to include it.", 'start': 3399.742, 'duration': 4.502}, {'end': 3409.387, 'text': 'And then the name of that mixing is gradient.', 'start': 3406.786, 'duration': 2.601}, {'end': 3416.912, 'text': "So let's copy that gradient to the mixing.", 'start': 3413.43, 'duration': 3.482}, {'end': 3418.713, 'text': "So I'm going to save the two files.", 'start': 3417.372, 'duration': 1.341}, {'end': 3424.434, 'text': 'So our gradient should remain intact or our navbar.', 'start': 3421.113, 'duration': 3.321}, {'end': 3428.014, 'text': "So here we're getting an error for undefined mixing.", 'start': 3425.114, 'duration': 2.9}, {'end': 3430.775, 'text': 'So here on the mixing we need to include that module.', 'start': 3428.095, 'duration': 2.68}, {'end': 3436.356, 'text': 'So just like we did with the navbar we need to include that module which is the custom.scss file.', 'start': 3431.495, 'duration': 4.861}, {'end': 3439.697, 'text': 'So it should be at the top.', 'start': 3438.497, 'duration': 1.2}, {'end': 3444.518, 'text': "So we're going to paste and then save let's see.", 'start': 3440.957, 'duration': 3.561}, {'end': 3449.146, 'text': "So still you're getting an error for undefined mixing this time.", 'start': 3446.224, 'duration': 2.922}], 'summary': 'Styling the navigation menu, adding padding, changing color to white, and creating a gradient mixing.', 'duration': 183.887, 'max_score': 3265.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz83265259.jpg'}, {'end': 3303.062, 'src': 'embed', 'start': 3267.541, 'weight': 3, 'content': [{'end': 3269.283, 'text': "So you're going to use it as a star.", 'start': 3267.541, 'duration': 1.742}, {'end': 3272.445, 'text': 'So the star tells us to remove the namespaces.', 'start': 3270.003, 'duration': 2.442}, {'end': 3273.346, 'text': "So I'm going to save.", 'start': 3272.625, 'duration': 0.721}, {'end': 3274.046, 'text': "Let's see.", 'start': 3273.626, 'duration': 0.42}, {'end': 3277.229, 'text': 'And there you have it.', 'start': 3276.288, 'duration': 0.941}, {'end': 3278.75, 'text': 'You can see now it is working.', 'start': 3277.269, 'duration': 1.481}, {'end': 3282.793, 'text': "So let's continue styling.", 'start': 3280.791, 'duration': 2.002}, {'end': 3287.997, 'text': 'So we need to add the color and do some padding on the menu items or the nav items.', 'start': 3283.333, 'duration': 4.664}, {'end': 3291.12, 'text': "So here we're going to nest it.", 'start': 3290.1, 'duration': 1.02}, {'end': 3292.82, 'text': 'So we have the li.', 'start': 3291.84, 'duration': 0.98}, {'end': 3295.781, 'text': "We're going to do some padding.", 'start': 3294.681, 'duration': 1.1}, {'end': 3303.062, 'text': "So for the top and bottom you're going to put 0 and then left and right 0.7 rem.", 'start': 3297.941, 'duration': 5.121}], 'summary': 'Styling the menu items by adding color and padding, including 0.7 rem for left and right.', 'duration': 35.521, 'max_score': 3267.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz83267541.jpg'}, {'end': 3746.984, 'src': 'embed', 'start': 3700.426, 'weight': 4, 'content': [{'end': 3703.349, 'text': 'So this one should be closed with a semicolon.', 'start': 3700.426, 'duration': 2.923}, {'end': 3708.133, 'text': 'So for the top, set that to 50%.', 'start': 3705.23, 'duration': 2.903}, {'end': 3719.669, 'text': 'Right 5px.', 'start': 3708.133, 'duration': 11.536}, {'end': 3734.246, 'text': 'then we need to translate y, that is, transform, translate y, minus 50 percent.', 'start': 3719.669, 'duration': 14.577}, {'end': 3735.588, 'text': "so i'm going to save, let's see.", 'start': 3734.246, 'duration': 1.342}, {'end': 3739.197, 'text': 'So you can see.', 'start': 3738.496, 'duration': 0.701}, {'end': 3746.984, 'text': "now at least we have it on the position that you want, but we need to make sure that it's rounded and then do some padding on the BTN rounded.", 'start': 3739.197, 'duration': 7.787}], 'summary': 'Adjust top to 50%, translate y by -50%, then round and add padding to btn rounded.', 'duration': 46.558, 'max_score': 3700.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz83700426.jpg'}, {'end': 3993.231, 'src': 'heatmap', 'start': 3806.371, 'weight': 0.963, 'content': [{'end': 3810.856, 'text': "So now from there we're going to add the font icon and here we're going to use the font awesome icons.", 'start': 3806.371, 'duration': 4.485}, {'end': 3814.14, 'text': "So on HTML we're going to add that icon inside the span.", 'start': 3811.397, 'duration': 2.743}, {'end': 3822.831, 'text': 'So we have the icon and then the class font awesome solid and then the name of that icon is font alt.', 'start': 3815.682, 'duration': 7.149}, {'end': 3834.786, 'text': "So here you're going to compile the font awesome sass file so that you can be able to link that style sheet on the head section.", 'start': 3827.119, 'duration': 7.667}, {'end': 3838.289, 'text': "So inside the sss folder I'm going to create that sass file.", 'start': 3835.747, 'duration': 2.542}, {'end': 3843.273, 'text': "So I'm going to call it font awesome dot sss.", 'start': 3839.009, 'duration': 4.264}, {'end': 3848.097, 'text': "So here you're going to import four files.", 'start': 3845.835, 'duration': 2.262}, {'end': 3849.779, 'text': 'So we have the first one.', 'start': 3848.838, 'duration': 0.941}, {'end': 3852.261, 'text': 'So we have the user tool.', 'start': 3850.379, 'duration': 1.882}, {'end': 3860.029, 'text': 'and then the node modules, font awesome and then sss.', 'start': 3853.843, 'duration': 6.186}, {'end': 3871.18, 'text': "so you're going to start with the brands, that is the font awesome for the brands, and then close, duplicate three times.", 'start': 3860.029, 'duration': 11.151}, {'end': 3882.064, 'text': "so the second, second one we're going to import the regular, And then we have the third one, which is the font-awesome.css.", 'start': 3871.18, 'duration': 10.884}, {'end': 3885.365, 'text': 'And then finally we have the solid.', 'start': 3882.965, 'duration': 2.4}, {'end': 3888.446, 'text': "So I'm going to save.", 'start': 3887.526, 'duration': 0.92}, {'end': 3894.908, 'text': 'And then here you can see it has already compiled our font-awesome.css.', 'start': 3890.067, 'duration': 4.841}, {'end': 3897.729, 'text': 'So we need to link that style sheet to the head section.', 'start': 3895.429, 'duration': 2.3}, {'end': 3902.911, 'text': 'So we have the link and then assets.', 'start': 3899.71, 'duration': 3.201}, {'end': 3907.472, 'text': 'CSS and then fontosam.css.', 'start': 3905.191, 'duration': 2.281}, {'end': 3912.434, 'text': "So from there now we're going to copy the web fonts to our assets folder.", 'start': 3908.553, 'duration': 3.881}, {'end': 3916.656, 'text': 'And the web fonts can be found inside the node modules.', 'start': 3913.255, 'duration': 3.401}, {'end': 3921.098, 'text': "So we're going to copy them from the fontosam folder.", 'start': 3917.397, 'duration': 3.701}, {'end': 3926.461, 'text': "So here we have that folder so I'm going to copy it to the assets folder.", 'start': 3923.119, 'duration': 3.342}, {'end': 3931.375, 'text': 'So paste.', 'start': 3930.814, 'duration': 0.561}, {'end': 3935.198, 'text': "So now we'll be able to see our icon.", 'start': 3932.856, 'duration': 2.342}, {'end': 3938.68, 'text': "So I'm going to the browser and here you can see now we have that icon.", 'start': 3935.218, 'duration': 3.462}, {'end': 3943.704, 'text': 'So the next step now is to style that icon.', 'start': 3941.763, 'duration': 1.941}, {'end': 3950.65, 'text': "So inside the buttons, we're going to nest it inside the span, just like we have done on the HTML.", 'start': 3944.305, 'duration': 6.345}, {'end': 3951.591, 'text': 'So we have the icon.', 'start': 3950.77, 'duration': 0.821}, {'end': 3954.293, 'text': 'So the color should be white.', 'start': 3953.012, 'duration': 1.281}, {'end': 3958.296, 'text': 'So we have the white variable.', 'start': 3957.095, 'duration': 1.201}, {'end': 3964.69, 'text': 'And then also we need to position it at the center.', 'start': 3960.788, 'duration': 3.902}, {'end': 3969.352, 'text': "So here we're going just to define or specify the font size.", 'start': 3965.61, 'duration': 3.742}, {'end': 3973.473, 'text': 'Or set the font size to 1rem.', 'start': 3970.552, 'duration': 2.921}, {'end': 3976.255, 'text': 'And then also the line height.', 'start': 3974.854, 'duration': 1.401}, {'end': 3982.557, 'text': "So we have the line height which we're going to set that to 2.5rem.", 'start': 3979.056, 'duration': 3.501}, {'end': 3983.698, 'text': "So let's see.", 'start': 3983.057, 'duration': 0.641}, {'end': 3987.65, 'text': 'Save And there you have it.', 'start': 3983.918, 'duration': 3.732}, {'end': 3990.771, 'text': 'So you can see now it is at the center of that circle.', 'start': 3987.67, 'duration': 3.101}, {'end': 3993.231, 'text': 'And that is the position that we wanted.', 'start': 3991.511, 'duration': 1.72}], 'summary': 'Adding font awesome icons and styling them in html and sass.', 'duration': 186.86, 'max_score': 3806.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz83806371.jpg'}, {'end': 3860.029, 'src': 'embed', 'start': 3827.119, 'weight': 0, 'content': [{'end': 3834.786, 'text': "So here you're going to compile the font awesome sass file so that you can be able to link that style sheet on the head section.", 'start': 3827.119, 'duration': 7.667}, {'end': 3838.289, 'text': "So inside the sss folder I'm going to create that sass file.", 'start': 3835.747, 'duration': 2.542}, {'end': 3843.273, 'text': "So I'm going to call it font awesome dot sss.", 'start': 3839.009, 'duration': 4.264}, {'end': 3848.097, 'text': "So here you're going to import four files.", 'start': 3845.835, 'duration': 2.262}, {'end': 3849.779, 'text': 'So we have the first one.', 'start': 3848.838, 'duration': 0.941}, {'end': 3852.261, 'text': 'So we have the user tool.', 'start': 3850.379, 'duration': 1.882}, {'end': 3860.029, 'text': 'and then the node modules, font awesome and then sss.', 'start': 3853.843, 'duration': 6.186}], 'summary': 'Compile font awesome sass file to link stylesheet, importing four files.', 'duration': 32.91, 'max_score': 3827.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz83827119.jpg'}, {'end': 3931.375, 'src': 'embed', 'start': 3895.429, 'weight': 1, 'content': [{'end': 3897.729, 'text': 'So we need to link that style sheet to the head section.', 'start': 3895.429, 'duration': 2.3}, {'end': 3902.911, 'text': 'So we have the link and then assets.', 'start': 3899.71, 'duration': 3.201}, {'end': 3907.472, 'text': 'CSS and then fontosam.css.', 'start': 3905.191, 'duration': 2.281}, {'end': 3912.434, 'text': "So from there now we're going to copy the web fonts to our assets folder.", 'start': 3908.553, 'duration': 3.881}, {'end': 3916.656, 'text': 'And the web fonts can be found inside the node modules.', 'start': 3913.255, 'duration': 3.401}, {'end': 3921.098, 'text': "So we're going to copy them from the fontosam folder.", 'start': 3917.397, 'duration': 3.701}, {'end': 3926.461, 'text': "So here we have that folder so I'm going to copy it to the assets folder.", 'start': 3923.119, 'duration': 3.342}, {'end': 3931.375, 'text': 'So paste.', 'start': 3930.814, 'duration': 0.561}], 'summary': 'Link fontosam.css to head section and copy web fonts to assets folder.', 'duration': 35.946, 'max_score': 3895.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz83895429.jpg'}], 'start': 2076.018, 'title': 'Using sass to style project elements', 'summary': 'Details increasing the icon size, creating project structure, creating sas files for sections and components, setting up bootstrap v5 with sass, styling navbar and button with specific properties, resulting in a responsive navbar and a styled button.', 'chapters': [{'end': 2147.942, 'start': 2076.018, 'title': 'Icon size adjustment & project structure creation', 'summary': 'Demonstrates how to increase the width of an icon from 1.255 rem to 1.875 rem by modifying a variable in the variables file and then proceeds to discuss the creation of a well-organized and maintainable file structure for the project.', 'duration': 71.924, 'highlights': ['The chapter demonstrates increasing the icon width from 1.255 rem to 1.875 rem by modifying a variable in the variables file.', 'It emphasizes the importance of creating a well-organized and maintainable file structure for the project.']}, {'end': 2696.913, 'start': 2148.783, 'title': 'Creating sas files for sections and components', 'summary': 'Involves creating sas files for sections and components, including folders for sections and components, import of partials to the main sas file, and starting the project with the navbar layout. the chapter details the creation of sas files for sections and components, the import of partials to the main sas file, and initiating the project with the navbar layout.', 'duration': 548.13, 'highlights': ['Creating SAS files for sections and components, including folders for sections and components. The process involves organizing SAS files into folders for sections and components.', 'Importing partials to the main SAS file. The main SAS file is structured by importing partials for sections and components.', 'Initiating the project with the navbar layout. The project begins by creating a file called index.html and adding HTML starter code, including the navbar layout.']}, {'end': 3099.843, 'start': 2699.904, 'title': 'Learning bootstrap v5 with sass', 'summary': 'Covers setting up the project with bootstrap v5 and sass, linking the stylesheet and javascript, creating a navbar following bootstrap documentation, and styling it with specific classes, resulting in a responsive navbar with the required layout and functionality.', 'duration': 399.939, 'highlights': ['Setting up the project with Bootstrap v5 and SASS The instructor sets up the project with Bootstrap v5 and SASS, specifying the linking of the stylesheet and JavaScript for the project.', 'Creating a responsive navbar following Bootstrap documentation The instructor copies and pastes code from the Bootstrap documentation to create a navbar, including using specific classes like container fluid and container to achieve the desired layout and functionality.', 'Styling the navbar with specific classes and adding a logo and menus The instructor adds specific classes like justify content end to push the menus to the right, adds a logo by creating a folder for images and including the logo.png, and ensures the menus reflect the required layout.']}, {'end': 3482.095, 'start': 3100.803, 'title': 'Styling navbar with sass', 'summary': 'Covers styling a navbar using sass, including creating a gradient background with specific colors and opacity, resolving namespace errors, adding padding and changing text color, and creating a mixin for the gradient.', 'duration': 381.292, 'highlights': ['Creating a gradient background with specific colors and opacity for the navbar, including primary and secondary colors with an opacity of 0.95.', 'Resolving namespace errors by calling the custom.scss file and removing namespaces to fix errors and ensure proper functioning of the script.', 'Adding padding to the nav items with specific measurements and changing the text color to white with additional styling properties.', 'Creating a mixin for the gradient to be reused multiple times, including adding the mixin in the mixing.sss file and resolving undefined mixing errors.']}, {'end': 4081.284, 'start': 3483.656, 'title': 'Styling button with sass', 'summary': "Discusses styling a button using sass, creating a new class 'btn rounded' with specific css properties, adding a font icon using font awesome, and creating a hover effect with a gradient background.", 'duration': 597.628, 'highlights': ["Creating a new class 'BTN rounded' with specific CSS properties The transcript describes creating a new class called 'BTN rounded' with specific CSS properties such as setting the position to relative, adding padding, setting font weight, margin, and positioning the span for the button.", 'Adding a font icon using Font Awesome The transcript explains the process of adding a font icon using Font Awesome, including creating a sass file, importing font awesome files, linking the stylesheet, and styling the icon with specific properties.', 'Creating a hover effect with a gradient background The chapter details the process of creating a hover effect with a gradient background by including a mixin, and demonstrates the implementation with specific code examples.']}], 'duration': 2005.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz82076018.jpg', 'highlights': ['Creating a responsive navbar following Bootstrap documentation, including specific classes like container fluid and container.', 'Styling the navbar with specific classes, adding a logo and menus, ensuring the menus reflect the required layout.', 'Creating a gradient background with specific colors and opacity for the navbar, including primary and secondary colors with an opacity of 0.95.', 'Creating a mixin for the gradient to be reused multiple times, including adding the mixin in the mixing.sss file and resolving undefined mixing errors.', 'Adding a font icon using Font Awesome, including creating a sass file, importing font awesome files, linking the stylesheet, and styling the icon with specific properties.']}, {'end': 5214.515, 'segs': [{'end': 4176.377, 'src': 'embed', 'start': 4142.719, 'weight': 2, 'content': [{'end': 4147.243, 'text': 'So if you check from the layout now, you can see the only thing we need to do is bolden the text.', 'start': 4142.719, 'duration': 4.524}, {'end': 4150.404, 'text': 'You can see ours is a bit light.', 'start': 4148.544, 'duration': 1.86}, {'end': 4153.728, 'text': 'So we need to add to increase the font size, the font weight.', 'start': 4150.484, 'duration': 3.244}, {'end': 4158.631, 'text': 'So on the BTN round, you need to increase the font weight to around 600.', 'start': 4155.429, 'duration': 3.202}, {'end': 4159.112, 'text': 'Or let me have 700.', 'start': 4158.631, 'duration': 0.481}, {'end': 4162.455, 'text': "Save Let's see.", 'start': 4159.112, 'duration': 3.343}, {'end': 4163.035, 'text': 'And there you have it.', 'start': 4162.475, 'duration': 0.56}, {'end': 4176.377, 'text': 'So I think we are done with that part.', 'start': 4174.617, 'duration': 1.76}], 'summary': 'Increase font weight to 600 or 700 to improve visibility.', 'duration': 33.658, 'max_score': 4142.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz84142719.jpg'}, {'end': 4928.325, 'src': 'embed', 'start': 4898.887, 'weight': 3, 'content': [{'end': 4900.828, 'text': 'And then also add that class text white.', 'start': 4898.887, 'duration': 1.941}, {'end': 4905.469, 'text': "And then I'm going to save.", 'start': 4904.409, 'duration': 1.06}, {'end': 4906.009, 'text': "Let's see.", 'start': 4905.569, 'duration': 0.44}, {'end': 4911.113, 'text': "So it's still in.", 'start': 4908.271, 'duration': 2.842}, {'end': 4914.035, 'text': 'The next step now is to create the font style of this heading.', 'start': 4911.193, 'duration': 2.842}, {'end': 4917.738, 'text': 'If you check from the layout you can see the font style is a bit different.', 'start': 4914.676, 'duration': 3.062}, {'end': 4922.061, 'text': "Here we're going to use a font called Poppins which you're going to get it from Google Fonts.", 'start': 4917.978, 'duration': 4.083}, {'end': 4928.325, 'text': "You can go to fonts.google.com and here you're going to search for that font called Poppins.", 'start': 4922.821, 'duration': 5.504}], 'summary': 'Creating font style for heading using poppins font from google fonts.', 'duration': 29.438, 'max_score': 4898.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz84898887.jpg'}, {'end': 5181.939, 'src': 'embed', 'start': 5153.376, 'weight': 0, 'content': [{'end': 5155.337, 'text': "So this is where I'm going to keep all the illustrations.", 'start': 5153.376, 'duration': 1.961}, {'end': 5158.898, 'text': 'And then paste.', 'start': 5158.338, 'duration': 0.56}, {'end': 5168.814, 'text': 'So you can also get this illustration on this website called manypixels.co forward slash gallery.', 'start': 5161.371, 'duration': 7.443}, {'end': 5172.255, 'text': 'So here you can search for that illustration.', 'start': 5169.514, 'duration': 2.741}, {'end': 5175.677, 'text': 'You can also filter by categories, types and also change the color.', 'start': 5172.355, 'duration': 3.322}, {'end': 5177.057, 'text': "So first let's change the color.", 'start': 5175.897, 'duration': 1.16}, {'end': 5181.939, 'text': "So here I'm going to use one of the variables color.", 'start': 5178.658, 'duration': 3.281}], 'summary': 'Instructions on using manypixels.co: search, filter, and change color.', 'duration': 28.563, 'max_score': 5153.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz85153376.jpg'}], 'start': 4081.284, 'title': 'Css styling, responsive design, hiding buttons, intro section creation, and google fonts implementation', 'summary': 'Covers button color and circle change, responsive navbar design on moto g4 (360px), hiding buttons for screen width 600px, intro section creation with html structure and styling, and implementing google fonts with specific css rules and illustration additions.', 'chapters': [{'end': 4215.654, 'start': 4081.284, 'title': 'Css styling and responsive design', 'summary': 'Covers changing button color and circle on hover, adjusting font weight, and making navbar fully responsive, demonstrated on moto g4 with a screen width of 360.', 'duration': 134.37, 'highlights': ['The chapter covers changing button color and circle on hover, demonstrated through setting the color to white on button hover and using RGBA with a dark color to change the circle color, providing clear visual demonstrations.', 'Adjusting font weight by increasing it to 700 on the BTN round, resulting in a boldened text, effectively enhancing the visual appearance.', 'Making the navbar fully responsive across a variety of screen devices, exemplified by changing the color of the navbar toggler from navbar-light to navbar-dark on Moto G4, ensuring optimal user experience.']}, {'end': 4389.989, 'start': 4217.179, 'title': 'Hiding buttons on small devices', 'summary': 'Demonstrates how to hide buttons on small devices with a screen width of 600 and below using media queries, including setting the display to none and confirming the changes in the compiled css.', 'duration': 172.81, 'highlights': ['Hiding the button on small devices with a screen width of 600 and below The chapter explains the use of media queries to target devices with specific screen widths and hide buttons accordingly.', "Setting the display to none for small devices The chapter illustrates the property 'display: none' being used to hide the button on small devices with a screen width of 600 and below.", 'Media query setting a maximum width of 575.98px The chapter provides a specific example of a media query with a maximum width of 575.98px being used to hide the button on devices with that screen width.']}, {'end': 4974.068, 'start': 4391.03, 'title': 'Creating intro section in layout', 'summary': 'Covers the creation of section 2 of the layout, including the intro heading, illustration, animated button, and wavy background, with specific instructions on html structure, styling, and addition of fonts.', 'duration': 583.038, 'highlights': ['Creation of intro heading, illustration, and button in section 2 The video provides step-by-step guidance on creating the intro heading, illustration, and animated button for section 2 of the layout.', 'HTML structure for intro section Detailed instructions are given on setting up the HTML structure for the intro section, including the use of classes and containers.', 'Styling of intro heading and description The tutorial covers the styling of the intro heading and description, with specific details on setting margin, text transform, and font size.', 'Inclusion of font styles using Google Fonts The process of selecting specific font styles from Google Fonts for the intro section is explained, including the selection of font weights and styles.']}, {'end': 5214.515, 'start': 4974.068, 'title': 'Implementing google fonts and adding illustrations', 'summary': 'Covers implementing google fonts into a layout by copying and pasting code into the head section of the html, specifying font families using css rules, and adding illustrations with specific color changes and obtaining them from a website.', 'duration': 240.447, 'highlights': ['The chapter covers implementing Google Fonts into a layout by copying and pasting code into the head section of the HTML, specifying font families using CSS rules, and adding illustrations with specific color changes and obtaining them from a website. Implementing Google Fonts, specifying font families, adding illustrations, specific color changes, obtaining illustrations from a website.', 'The process involves copying and pasting code for Google Fonts into the head section of the HTML and using CSS rules to specify font families. Copying and pasting code for Google Fonts, using CSS rules to specify font families.', 'The chapter also explains the process of adding illustrations, including changing the color using specific hex values and obtaining them from a particular website. Adding illustrations, changing color using hex values, obtaining illustrations from a particular website.']}], 'duration': 1133.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz84081284.jpg', 'highlights': ['The chapter covers making the navbar fully responsive across a variety of screen devices, ensuring optimal user experience.', 'The chapter explains the use of media queries to target devices with specific screen widths and hide buttons accordingly.', 'The video provides step-by-step guidance on creating the intro heading, illustration, and animated button for section 2 of the layout.', 'The chapter covers implementing Google Fonts into a layout by copying and pasting code into the head section of the HTML, specifying font families using CSS rules, and adding illustrations with specific color changes and obtaining them from a website.']}, {'end': 6676.768, 'segs': [{'end': 5504.217, 'src': 'embed', 'start': 5472.92, 'weight': 2, 'content': [{'end': 5475.241, 'text': "You can change that later if it's too small or too large.", 'start': 5472.92, 'duration': 2.321}, {'end': 5476.381, 'text': 'And then the color.', 'start': 5475.421, 'duration': 0.96}, {'end': 5478.702, 'text': "I'm going to use a dark color.", 'start': 5477.641, 'duration': 1.061}, {'end': 5481.883, 'text': "But you're going to change it later.", 'start': 5480.742, 'duration': 1.141}, {'end': 5482.983, 'text': "So here we're going to use black.", 'start': 5481.963, 'duration': 1.02}, {'end': 5486.704, 'text': "So I'm going to save.", 'start': 5485.944, 'duration': 0.76}, {'end': 5488.745, 'text': "Let's see the results so far on the browser.", 'start': 5486.984, 'duration': 1.761}, {'end': 5495.111, 'text': 'And there you have it you can see now we have that icon and that is not the position that you want to be.', 'start': 5490.789, 'duration': 4.322}, {'end': 5499.794, 'text': 'So we need it at the center of the column or at the illustration.', 'start': 5495.412, 'duration': 4.382}, {'end': 5504.217, 'text': 'So here we can use the bootstrap utilities for positioning that icon.', 'start': 5500.875, 'duration': 3.342}], 'summary': 'Using dark color, positioning icon with bootstrap utilities.', 'duration': 31.297, 'max_score': 5472.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz85472920.jpg'}, {'end': 6448.475, 'src': 'embed', 'start': 6421.152, 'weight': 0, 'content': [{'end': 6425.556, 'text': 'That means you can create your skin or modify the animation with some minor CSS changes.', 'start': 6421.152, 'duration': 4.404}, {'end': 6429.299, 'text': 'Then on the usage we have different ways of using this lightbox.', 'start': 6426.296, 'duration': 3.003}, {'end': 6430.9, 'text': 'You can install it using npm.', 'start': 6429.439, 'duration': 1.461}, {'end': 6436.545, 'text': 'and you can also manually download the source files and then link the JavaScript in your HTML.', 'start': 6431.681, 'duration': 4.864}, {'end': 6440.188, 'text': "So I'm going to go with the second option, that is, to download the source files,", 'start': 6437.366, 'duration': 2.822}, {'end': 6444.291, 'text': "and then I'm going to link the JavaScript and the stylesheet in my HTML.", 'start': 6440.188, 'duration': 4.103}, {'end': 6448.475, 'text': "I have downloaded the source files so I'm just going to copy the source files to my project.", 'start': 6444.932, 'duration': 3.543}], 'summary': 'Options for using the lightbox: npm installation or manual download and html linking.', 'duration': 27.323, 'max_score': 6421.152, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz86421152.jpg'}, {'end': 6610.683, 'src': 'embed', 'start': 6582.074, 'weight': 1, 'content': [{'end': 6587.697, 'text': "You need to set the link and then you have the type whether it's an image or video and then the source.", 'start': 6582.074, 'duration': 5.623}, {'end': 6592.74, 'text': 'Here you need to specify the source either from YouTube, Vimeo or self-hosted video.', 'start': 6587.717, 'duration': 5.023}, {'end': 6594.221, 'text': 'And then we have the width.', 'start': 6593.34, 'duration': 0.881}, {'end': 6596.342, 'text': 'You can also set the autoplay videos to true.', 'start': 6594.341, 'duration': 2.001}, {'end': 6599.424, 'text': 'First you need to declare using the const keyword.', 'start': 6597.222, 'duration': 2.202}, {'end': 6601.905, 'text': "So I'm going to copy that declaration.", 'start': 6599.444, 'duration': 2.461}, {'end': 6610.683, 'text': 'and then at the bottom we need to create another script immediately below the glitebox JavaScript.', 'start': 6604.178, 'duration': 6.505}], 'summary': "Set link, type, and source for image or video, specify from youtube, vimeo or self-hosted video, declare with 'const' keyword.", 'duration': 28.609, 'max_score': 6582.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz86582074.jpg'}], 'start': 5214.535, 'title': 'Video intro styling, bootstrap positioning, animation, and javascript lightbox', 'summary': 'Covers creating a visually appealing video intro with styling, using bootstrap positioning utilities, creating background wave and icon animation, and implementing a javascript lightbox for videos, providing support for various video sources and responsive features.', 'chapters': [{'end': 5495.111, 'start': 5214.535, 'title': 'Creating video intro with styling', 'summary': 'Discusses creating a video intro with styling, including adding an illustration, play button, and styling the elements, resulting in a visually appealing video intro.', 'duration': 280.576, 'highlights': ['Adding an illustration and play button to the video intro for visual appeal.', 'Styling the elements by setting position, font size, and color for a visually appealing result.', 'Creating a class called video box to keep all content.']}, {'end': 5769.094, 'start': 5495.412, 'title': 'Bootstrap positioning utilities', 'summary': 'Discusses using bootstrap positioning utilities to center elements and create a mixin for absolute positioning, allowing for precise placement of elements on a webpage.', 'duration': 273.682, 'highlights': ['Using Bootstrap positioning utilities to center elements and create a mixin for absolute positioning The transcript explains how to use Bootstrap positioning utilities to center elements and create a mixin for absolute positioning, allowing for precise placement of elements on a webpage.', 'Explanation of the available Bootstrap positioning properties The chapter provides an overview of the available Bootstrap positioning properties, including static, relative, absolute, fixed, and sticky, as well as their functionality.', 'Demonstrating the use of new classes like translate middle for centering elements The transcript demonstrates the use of new classes like translate middle for centering elements, providing a visual reference for implementing these classes in webpage design.']}, {'end': 6354.811, 'start': 5771.575, 'title': 'Creating background wave and icon animation', 'summary': 'Covers creating a background wave using getwaves.io, changing its color, and animating a play button by creating css classes and animations, resulting in the achievement of the same results as the layout.', 'duration': 583.236, 'highlights': ['Creating a background wave using getwaves.io, changing its color, and positioning it at the bottom of the section achieved the desired layout result.', 'Animating a play button by creating CSS classes and animations resulted in achieving the same layout results.', "Using the getwaves.io website to generate a background wave and play around with different options to find the desired result is an essential step in achieving the layout's design.", 'Setting the position, width, height, border, and color of the animated play button border using CSS classes resulted in achieving the desired layout result.']}, {'end': 6676.768, 'start': 6355.171, 'title': 'Implementing javascript lightbox for videos', 'summary': 'Details the implementation of glightbox, a javascript lightbox, which can display images, iframes, inline content, and videos, providing support for youtube, vimeo, and self-hosted videos with optional autoplay and responsive features.', 'duration': 321.597, 'highlights': ['glightbox can display images, iframes, inline content, and videos with support for YouTube, Vimeo, and self-hosted videos with optional autoplay and is fast and responsive. The glightbox can display various types of content, including images, iframes, and videos with support for YouTube, Vimeo, and self-hosted videos, offering optional autoplay and responsive features.', 'Support for video autoplay, gallery creation, and API control. The glightbox provides support for video autoplay, gallery creation, and API control, allowing users to control the lightbox with provided methods.', 'Usage options include installation using npm or manual download of source files with linking the JavaScript in the HTML. The usage options for glightbox include installation using npm or manual download of source files, followed by linking the JavaScript in the HTML.']}], 'duration': 1462.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz85214535.jpg', 'highlights': ['Creating a visually appealing video intro with styling, using bootstrap positioning utilities, and implementing a javascript lightbox for videos.', 'Using Bootstrap positioning utilities to center elements and create a mixin for absolute positioning, and demonstrating the use of new classes like translate middle for centering elements.', 'Creating a background wave and animating a play button using CSS classes and animations for achieving the desired layout result.', 'Using glightbox to display various types of content, including images, iframes, and videos with support for YouTube, Vimeo, and self-hosted videos, offering optional autoplay and responsive features.']}, {'end': 7768.503, 'segs': [{'end': 6841.934, 'src': 'embed', 'start': 6798.877, 'weight': 1, 'content': [{'end': 6801.498, 'text': 'So here we can decrease the font size a bit for the description.', 'start': 6798.877, 'duration': 2.621}, {'end': 6806.16, 'text': "So let's see from another device like Pixel 2.", 'start': 6801.998, 'duration': 4.162}, {'end': 6807.48, 'text': 'Here the content is not that bad.', 'start': 6806.16, 'duration': 1.32}, {'end': 6812.682, 'text': 'What about iPhone X? Not good.', 'start': 6808.981, 'duration': 3.701}, {'end': 6818.401, 'text': 'iPad Not good.', 'start': 6814.443, 'duration': 3.958}, {'end': 6825.965, 'text': 'So what about Surface Duo? Not bad.', 'start': 6818.421, 'duration': 7.544}, {'end': 6829.987, 'text': 'iPhone 6, 7, 8 plus.', 'start': 6828.726, 'duration': 1.261}, {'end': 6834.049, 'text': 'I think not bad.', 'start': 6832.628, 'duration': 1.421}, {'end': 6838.232, 'text': 'But here we can decrease the font size of the description a bit.', 'start': 6835.33, 'duration': 2.902}, {'end': 6841.934, 'text': 'So to make this work we are going to..', 'start': 6840.233, 'duration': 1.701}], 'summary': 'Testing font size on different devices: iphone x and ipad not good, surface duo not bad, iphone 6, 7, 8 plus not bad.', 'duration': 43.057, 'max_score': 6798.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz86798877.jpg'}, {'end': 6917.738, 'src': 'embed', 'start': 6866.449, 'weight': 2, 'content': [{'end': 6871.293, 'text': "And then here I'm going to write a media query which is going to target large devices.", 'start': 6866.449, 'duration': 4.844}, {'end': 6873.014, 'text': 'So we have that mixing.', 'start': 6871.493, 'duration': 1.521}, {'end': 6893.04, 'text': 'So include media breakpoint app So from large, so you have to use those initials LG for large devices.', 'start': 6873.074, 'duration': 19.966}, {'end': 6902.147, 'text': "And then you're going to set the font size to 1.5 frame.", 'start': 6894.801, 'duration': 7.346}, {'end': 6912.114, 'text': "Also, we're going to set the display to inline block.", 'start': 6905.029, 'duration': 7.085}, {'end': 6917.738, 'text': "So here the display, we're going to set that to inline block.", 'start': 6912.514, 'duration': 5.224}], 'summary': 'Media query targets large devices, sets font size to 1.5 frame and display to inline block.', 'duration': 51.289, 'max_score': 6866.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz86866449.jpg'}, {'end': 7358.117, 'src': 'embed', 'start': 7323.171, 'weight': 0, 'content': [{'end': 7335.24, 'text': "that is, set the margin to zero auto for horizontal centering and then I'm going to save, let's see, and there you have it.", 'start': 7323.171, 'duration': 12.069}, {'end': 7341.444, 'text': 'now you can see, we have our line at the center.', 'start': 7335.24, 'duration': 6.204}, {'end': 7348.629, 'text': "so for the second line I'm going to add some margin at the bottom margin, bottom to one rem.", 'start': 7341.444, 'duration': 7.185}, {'end': 7352.754, 'text': "save, let's see, So, and there you have it.", 'start': 7348.629, 'duration': 4.125}, {'end': 7358.117, 'text': "Next I'm going to add the images or these logos to my project.", 'start': 7354.255, 'duration': 3.862}], 'summary': 'Using css to center content and add margins, achieving visual alignment and layout structure.', 'duration': 34.946, 'max_score': 7323.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz87323171.jpg'}], 'start': 6678.029, 'title': 'Implementing interactive design elements', 'summary': 'Covers adding lightbox class for pop-up videos, ensuring full responsiveness of sections, creating companies section, and styling responsive images and columns for increased engagement and user experience with quantifiable data such as setting padding to 5rem, width to 100%, and height to 3rem.', 'chapters': [{'end': 6747.919, 'start': 6678.029, 'title': 'Adding lightbox class for pop-up video', 'summary': 'Covers adding the glightbox class to enable pop-up videos with autoplay functionality, resulting in interactive user experience with increased engagement.', 'duration': 69.89, 'highlights': ['The glightbox class needs to be added to enable the pop-up from YouTube.', 'The autoplay feature can be activated by adding the autoplay option with a value of true.', 'Enabling autoplay videos enhances user engagement and creates an interactive experience.']}, {'end': 7010.645, 'start': 6747.919, 'title': 'Responsive design implementation', 'summary': 'Focuses on ensuring the full responsiveness of sections across various screen devices, adjusting font sizes for different devices, and writing media queries for different breakpoints.', 'duration': 262.726, 'highlights': ['The chapter emphasizes the importance of ensuring full responsiveness of sections across various screen devices, citing specific examples such as Moto G4, iPhone X, iPad Pro, and more.', 'Adjusting font sizes for different devices is highlighted as a crucial aspect, with specific recommendations for decreasing font sizes for descriptions on small devices and setting different font sizes for large devices.', 'The process of writing media queries for different breakpoints is detailed, including setting font sizes and display properties based on the targeted devices, such as small and large devices.', 'Specific examples of devices such as Moto G4, iPad Pro, and iPhone 5 SE are mentioned to illustrate the effectiveness of the implemented responsive design.']}, {'end': 7498.63, 'start': 7012.97, 'title': 'Creating companies section', 'summary': 'Covers the creation of section 3 of the layout, detailing the process of adding headings, lines, and logos to the html, alongside their styling and alignment.', 'duration': 485.66, 'highlights': ['The chapter covers the creation of section 3 of the layout, detailing the process of adding headings, lines, and logos to the HTML, alongside their styling and alignment.', "The section includes a heading with a class of font-weight bold and a class of lead, with a margin bottom of 3, and the text 'Trusted by companies like.'.", 'The process involves adding two lines below the heading with specific styling, including setting the width to 10rem and 2rem, height to 0.1rem and 0.2rem, and adding margin and padding for proper alignment.', "The creation of the logos involves creating a container with six columns for the logos, utilizing the colmd4 class and block element modifier for styling, and sourcing the images from the 'companies' folder with specific naming conventions."]}, {'end': 7768.503, 'start': 7501.811, 'title': 'Styling responsive images and columns', 'summary': 'Outlines the process of styling and making images responsive, creating six columns of content, and ensuring responsiveness across various screen devices using quantifiable data such as setting padding to 5rem, width to 100%, and height to 3rem.', 'duration': 266.692, 'highlights': ['Setting padding to 5rem The chapter explains the process of setting the padding to 5rem for the container of the content, providing a specific value for padding.', 'Setting width to 100% It details the step of setting the width to 100% for the images, ensuring their responsiveness and scalability across different screen sizes.', 'Setting height to 3rem It describes setting the height of the images to 3rem, providing a quantifiable value for the height of the images.']}], 'duration': 1090.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz86678029.jpg', 'highlights': ['Enabling autoplay videos enhances user engagement and creates an interactive experience.', 'The chapter emphasizes the importance of ensuring full responsiveness of sections across various screen devices, citing specific examples such as Moto G4, iPhone X, iPad Pro, and more.', 'The chapter covers the creation of section 3 of the layout, detailing the process of adding headings, lines, and logos to the HTML, alongside their styling and alignment.', 'Setting width to 100% It details the step of setting the width to 100% for the images, ensuring their responsiveness and scalability across different screen sizes.']}, {'end': 9687.257, 'segs': [{'end': 7873.893, 'src': 'embed', 'start': 7836.206, 'weight': 3, 'content': [{'end': 7839.067, 'text': 'So on the companies where we have the image.', 'start': 7836.206, 'duration': 2.861}, {'end': 7846.93, 'text': 'We have the hover.', 'start': 7845.99, 'duration': 0.94}, {'end': 7854.008, 'text': 'So you have the filter, property and then grayscale.', 'start': 7849.625, 'duration': 4.383}, {'end': 7857.871, 'text': "So I'm going to set that to 120.", 'start': 7855.609, 'duration': 2.262}, {'end': 7858.672, 'text': "Save, let's see.", 'start': 7857.871, 'duration': 0.801}, {'end': 7863.876, 'text': "So now if you try to hover the logos, you see they're turning to grayscale.", 'start': 7860.093, 'duration': 3.783}, {'end': 7868.079, 'text': "So I think we're done with that part.", 'start': 7866.758, 'duration': 1.321}, {'end': 7869.78, 'text': 'We can move on to the next step.', 'start': 7868.619, 'duration': 1.161}, {'end': 7873.893, 'text': 'Welcome back.', 'start': 7873.373, 'duration': 0.52}], 'summary': 'Adding grayscale filter to logos on hover, set at 120, completed the task.', 'duration': 37.687, 'max_score': 7836.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz87836206.jpg'}, {'end': 8873.459, 'src': 'embed', 'start': 8848.632, 'weight': 0, 'content': [{'end': 8854.314, 'text': "so the next step now is to style the content, and you're going to do that on the sas file for that section, which is the services.scss.", 'start': 8848.632, 'duration': 5.682}, {'end': 8861.269, 'text': "So here I'm going to start with the container for the content, which is the services class.", 'start': 8857.225, 'duration': 4.044}, {'end': 8866.894, 'text': 'And then we need to do some correction on the HTML.', 'start': 8864.952, 'duration': 1.942}, {'end': 8870.877, 'text': 'So at the beginning of that section we created a class called our services.', 'start': 8867.494, 'duration': 3.383}, {'end': 8873.459, 'text': "So let's rename that to just services.", 'start': 8871.338, 'duration': 2.121}], 'summary': "Styling content in services.scss, renaming class 'our services' to 'services'.", 'duration': 24.827, 'max_score': 8848.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz88848632.jpg'}, {'end': 8946.33, 'src': 'embed', 'start': 8907.515, 'weight': 1, 'content': [{'end': 8910.497, 'text': 'And then we have the icon inside the content.', 'start': 8907.515, 'duration': 2.982}, {'end': 8914.515, 'text': "So that's how we're going to nest it.", 'start': 8913.234, 'duration': 1.281}, {'end': 8918.697, 'text': 'So we have underscore underscore content inside the services.', 'start': 8915.215, 'duration': 3.482}, {'end': 8928.122, 'text': "So here again we're going to set the padding for the content to one rem, all sides.", 'start': 8922.059, 'duration': 6.063}, {'end': 8931.863, 'text': 'Then some margin at the top.', 'start': 8930.723, 'duration': 1.14}, {'end': 8935.485, 'text': "I'm going to use 1.5 rem.", 'start': 8934.625, 'duration': 0.86}, {'end': 8941.869, 'text': 'and then we need to style the icon.', 'start': 8940.089, 'duration': 1.78}, {'end': 8946.33, 'text': 'so we have that icon class inside the content.', 'start': 8941.869, 'duration': 4.461}], 'summary': 'Styling content: padding set to 1rem, margin at 1.5rem, icon class used.', 'duration': 38.815, 'max_score': 8907.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz88907515.jpg'}, {'end': 9352.97, 'src': 'embed', 'start': 9323.558, 'weight': 2, 'content': [{'end': 9328.12, 'text': 'And then for the content we need to change the margin top to 5rem.', 'start': 9323.558, 'duration': 4.562}, {'end': 9331.641, 'text': "So I'm going to save.", 'start': 9330.761, 'duration': 0.88}, {'end': 9332.822, 'text': "Let's save from the browser.", 'start': 9331.741, 'duration': 1.081}, {'end': 9336.703, 'text': 'So that is how our content looks like.', 'start': 9334.843, 'duration': 1.86}, {'end': 9338.264, 'text': 'Much better now.', 'start': 9337.564, 'duration': 0.7}, {'end': 9343.744, 'text': "Next you're going to make sure that our section is fully responsive.", 'start': 9340.822, 'duration': 2.922}, {'end': 9346.186, 'text': "So I'm going to right click and inspect elements.", 'start': 9344.024, 'duration': 2.162}, {'end': 9350.429, 'text': 'So this is how the section looks like on Moto G4.', 'start': 9347.787, 'duration': 2.642}, {'end': 9352.97, 'text': "That's our device with a screen window of 360.", 'start': 9350.849, 'duration': 2.121}], 'summary': 'Adjusted margin top to 5rem, ensured section responsiveness on moto g4 (360px).', 'duration': 29.412, 'max_score': 9323.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz89323558.jpg'}, {'end': 9539.894, 'src': 'embed', 'start': 9507.863, 'weight': 4, 'content': [{'end': 9516.209, 'text': "Again here we're going to write another media breakpoint where we have the icon and the font size on typography.", 'start': 9507.863, 'duration': 8.346}, {'end': 9522.474, 'text': "So I'm going to copy this media breakpoint and use it where we have the icon.", 'start': 9516.429, 'duration': 6.045}, {'end': 9534.048, 'text': "So here on large devices you're going to set that to 2.5 and then the default you're going to set that to 1.5.", 'start': 9524.976, 'duration': 9.072}, {'end': 9539.894, 'text': "Again on typography let's go to typography where you have display 3.", 'start': 9534.048, 'duration': 5.846}], 'summary': 'Setting media breakpoint for icon font size: 2.5 on large devices and 1.5 as default.', 'duration': 32.031, 'max_score': 9507.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz89507863.jpg'}], 'start': 7770.239, 'title': 'Responsive web design and styling', 'summary': 'Demonstrates creating responsive design with image hover effects, building services and testimonials sections, and styling content and illustrations, resulting in improved user interaction and more optimized layouts for different devices.', 'chapters': [{'end': 7873.893, 'start': 7770.239, 'title': 'Responsive design and image hover effect', 'summary': 'Demonstrates how to add a column for large devices, ensuring elements fit in one line, and create a grayscale hover effect for images, resulting in improved responsiveness and user interaction.', 'duration': 103.654, 'highlights': ['The chapter demonstrates how to add a column for large devices, ensuring elements fit in one line.', 'The tutorial also shows the process of creating a grayscale hover effect for images.', 'The instructor emphasizes the importance of ensuring logos fit in one line for improved layout.', 'The tutorial provides a specific value (120) for the grayscale filter, ensuring a consistent hover effect.']}, {'end': 8527.558, 'start': 7874.174, 'title': 'Layout section 4: services', 'summary': 'Covers creating section 4 of the layout, detailing the process of creating the services section, including the heading, font styling, two columns with descriptions, a border at the center, and the content for marketing, web development, and cloud hosting.', 'duration': 653.384, 'highlights': ['Creating the content for marketing, web development, and cloud hosting, including the sections with two columns each for large, medium, small, and extra-small devices.', 'Styling the two columns with descriptions, including the use of BG white, padding, font-weight bold, text capitalize, and text start classes.', 'Adding a border at the center of the two columns with a width of 0.1 rem, solid style, and a height of 100%.', 'Styling the display 3 font with the Poppins font family.', 'Beginning the section with an ID of services and a class of our services, containing a container and a row.']}, {'end': 8848.632, 'start': 8528.84, 'title': 'Styling content and adding illustrations', 'summary': 'Details the process of styling content and adding illustrations to a website, including the use of classes, icons, headings, text, buttons, and images, with specific changes made for marketing, web development, and cloud hosting sections.', 'duration': 319.792, 'highlights': ['The chapter details the process of styling content and adding illustrations to a website. The transcript explains the steps involved in styling content and adding illustrations to a website.', 'Specific changes are made for marketing, web development, and cloud hosting sections. The content highlights specific alterations made for the marketing, web development, and cloud hosting sections, including changes in headings, icons, and illustrations.', 'Use of classes, icons, headings, text, buttons, and images is demonstrated. The transcript demonstrates the use of classes, icons, headings, text, buttons, and images to style the content and add illustrations to the website.']}, {'end': 9323.558, 'start': 8848.632, 'title': 'Styling services section', 'summary': 'Covers styling the services section, including setting the container position to relative, padding, nesting classes, setting font size and background colors, and pushing illustrations to the edge, with detailed css instructions and html updates.', 'duration': 474.926, 'highlights': ['The chapter covers detailed CSS instructions and HTML updates for styling the services section, including setting the container position to relative, padding, nesting classes, setting font size and background colors, and pushing illustrations to the edge.', 'Instructions for setting the font size to 2.5rem for the icon with the primary color, and using the module at-rule and custom use.', 'Detailed instructions for styling the heading, including setting the font size to 1.8 rem, text transformation to capitalize, font weight to 600, setting the font family, display to inline block, using background clipping with a linear gradient, and setting display to block for separate lines.', "Instructions for pushing the illustrations to the edge by adding the 'text end' class to the HTML elements and updating class names from 'services__content' to 'pic' in the HTML and sas file, and setting the max width to 100%."]}, {'end': 9687.257, 'start': 9323.558, 'title': 'Section 5 - testimonials', 'summary': 'Details the process of making the section fully responsive, addressing margin issues and font sizes for different devices, resulting in a more optimized layout for large and small devices.', 'duration': 363.699, 'highlights': ['The chapter details the process of making the section fully responsive, addressing margin issues and font sizes for different devices, resulting in a more optimized layout for large and small devices.', 'The adjustments include changing margin top to 5rem, reducing space between content elements, and setting specific font sizes for different devices, resulting in a more optimized layout.', 'Specific changes are made to the margin top and bottom for different content elements, with adjustments to font sizes for various devices, resulting in improved responsiveness and layout optimization.']}], 'duration': 1917.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz87770239.jpg', 'highlights': ['The chapter demonstrates how to add a column for large devices, ensuring elements fit in one line.', 'The tutorial also shows the process of creating a grayscale hover effect for images.', 'The chapter covers detailed CSS instructions and HTML updates for styling the services section, including setting the container position to relative, padding, nesting classes, setting font size and background colors, and pushing illustrations to the edge.', 'The chapter details the process of making the section fully responsive, addressing margin issues and font sizes for different devices, resulting in a more optimized layout for large and small devices.', 'Creating the content for marketing, web development, and cloud hosting, including the sections with two columns each for large, medium, small, and extra-small devices.']}, {'end': 10690.898, 'segs': [{'end': 9789.806, 'src': 'embed', 'start': 9687.817, 'weight': 1, 'content': [{'end': 9690.298, 'text': 'So here we are going to use bootstrap component called carousel.', 'start': 9687.817, 'duration': 2.481}, {'end': 9694.239, 'text': "So let's get started and create something similar like what you have here on the layout.", 'start': 9690.998, 'duration': 3.241}, {'end': 9697.84, 'text': "So on the HTML we're going to start that section.", 'start': 9695.299, 'duration': 2.541}, {'end': 9715.111, 'text': 'So first we are going to write a comment which is start start section 5 the testimonials.', 'start': 9699.861, 'duration': 15.25}, {'end': 9728.899, 'text': "So here we're going to start that section with an ID of testimonials and a class of testimonials.", 'start': 9719.833, 'duration': 9.066}, {'end': 9739.465, 'text': 'So each will have a container and a row.', 'start': 9734.262, 'duration': 5.203}, {'end': 9744.913, 'text': "So here we're going to start with the heading.", 'start': 9743.351, 'duration': 1.562}, {'end': 9750.378, 'text': 'So we have this heading and then this line and then the subheading.', 'start': 9745.934, 'duration': 4.444}, {'end': 9755.563, 'text': 'So copy.', 'start': 9754.923, 'duration': 0.64}, {'end': 9762.811, 'text': 'So this one is H3 with a class of display 3.', 'start': 9756.704, 'duration': 6.107}, {'end': 9770.874, 'text': 'Actually H1 sorry with a class of display 3.', 'start': 9762.811, 'duration': 8.063}, {'end': 9773.576, 'text': 'And then with a class of FontWeightBold.', 'start': 9770.874, 'duration': 2.702}, {'end': 9777.138, 'text': 'So we have the text.', 'start': 9776.297, 'duration': 0.841}, {'end': 9781.961, 'text': 'Tab Then we have that line.', 'start': 9778.959, 'duration': 3.002}, {'end': 9784.883, 'text': 'So we have HR.', 'start': 9782.441, 'duration': 2.442}, {'end': 9789.806, 'text': "So we're going to style it.", 'start': 9785.743, 'duration': 4.063}], 'summary': 'Using bootstrap carousel to create a testimonials section with heading and subheading.', 'duration': 101.989, 'max_score': 9687.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz89687817.jpg'}, {'end': 9896.073, 'src': 'embed', 'start': 9848.206, 'weight': 0, 'content': [{'end': 9851.529, 'text': 'Save So now we have the text at the center.', 'start': 9848.206, 'duration': 3.323}, {'end': 9854.771, 'text': "I'm going also to add the subtitle.", 'start': 9853.03, 'duration': 1.741}, {'end': 9859.675, 'text': 'So we have this subtitle below the heading that says what our clients are saying.', 'start': 9854.991, 'duration': 4.684}, {'end': 9866.463, 'text': 'So we have a paragraph with a class of lead and some padding at the top.', 'start': 9862.921, 'duration': 3.542}, {'end': 9869.144, 'text': "So we're going to use padding top one.", 'start': 9866.903, 'duration': 2.241}, {'end': 9872.105, 'text': 'And then we have that text.', 'start': 9870.764, 'duration': 1.341}, {'end': 9879.068, 'text': 'What our clients are saying.', 'start': 9873.906, 'duration': 5.162}, {'end': 9890.693, 'text': "So I'm going to save.", 'start': 9889.712, 'duration': 0.981}, {'end': 9891.373, 'text': "Let's see.", 'start': 9890.993, 'duration': 0.38}, {'end': 9896.073, 'text': 'So now you have that text.', 'start': 9894.853, 'duration': 1.22}], 'summary': 'Adding a subtitle below the heading with class lead and padding top one.', 'duration': 47.867, 'max_score': 9848.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz89848206.jpg'}, {'end': 9979.779, 'src': 'embed', 'start': 9940.223, 'weight': 5, 'content': [{'end': 9942.305, 'text': 'Again use it as star.', 'start': 9940.223, 'duration': 2.082}, {'end': 9949.188, 'text': "So here we're going to add that class which is testimonials.", 'start': 9945.606, 'duration': 3.582}, {'end': 9955.802, 'text': "So I'm going to start by setting the position to relative.", 'start': 9953.16, 'duration': 2.642}, {'end': 9960.245, 'text': 'Then we have padding.', 'start': 9959.424, 'duration': 0.821}, {'end': 9962.166, 'text': "I'm going to set that to zero.", 'start': 9960.445, 'duration': 1.721}, {'end': 9966.289, 'text': 'And then we need that gradient color.', 'start': 9964.348, 'duration': 1.941}, {'end': 9968.591, 'text': "So here we're going to include that mixin.", 'start': 9966.97, 'duration': 1.621}, {'end': 9969.852, 'text': 'So we have the include.', 'start': 9968.891, 'duration': 0.961}, {'end': 9974.355, 'text': 'The name of that mixin is gradient.', 'start': 9972.694, 'duration': 1.661}, {'end': 9979.779, 'text': "So I'm going to save.", 'start': 9978.758, 'duration': 1.021}], 'summary': "Adding 'testimonials' class with relative position, zero padding, and a gradient color mixin.", 'duration': 39.556, 'max_score': 9940.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz89940223.jpg'}, {'end': 10086.925, 'src': 'embed', 'start': 10055.107, 'weight': 7, 'content': [{'end': 10056.527, 'text': "So here I'm going to change the direction.", 'start': 10055.107, 'duration': 1.42}, {'end': 10059.248, 'text': "And then I'm going to copy the code again.", 'start': 10057.867, 'duration': 1.381}, {'end': 10065.175, 'text': 'And then at the bottom of that section paste.', 'start': 10061.673, 'duration': 3.502}, {'end': 10070.097, 'text': "Then I'm going to change again the hex value to white.", 'start': 10067.636, 'duration': 2.461}, {'end': 10072.538, 'text': 'So we have the three Fs or six Fs.', 'start': 10070.637, 'duration': 1.901}, {'end': 10074.619, 'text': "I'm going to save, let's see.", 'start': 10073.498, 'duration': 1.121}, {'end': 10080.001, 'text': 'And now as you can see that is our section with the two waves.', 'start': 10076.74, 'duration': 3.261}, {'end': 10083.343, 'text': "Next I'm going to create the carousel.", 'start': 10081.262, 'duration': 2.081}, {'end': 10086.925, 'text': "So on the HTML I'm going to create another row for that content.", 'start': 10083.863, 'duration': 3.062}], 'summary': 'Code changes made including hex value to white and creation of carousel.', 'duration': 31.818, 'max_score': 10055.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz810055107.jpg'}, {'end': 10248.46, 'src': 'embed', 'start': 10219.67, 'weight': 4, 'content': [{'end': 10223.714, 'text': "And here we're going to use the block element modifier to nest it that way.", 'start': 10219.67, 'duration': 4.044}, {'end': 10227.616, 'text': "So first I'm going to list them, the three containers.", 'start': 10224.935, 'duration': 2.681}, {'end': 10235.757, 'text': 'So we have testimonials underscore underscore card.', 'start': 10228.956, 'duration': 6.801}, {'end': 10241.858, 'text': 'So this is the container which will have the text, the stars and the two icons for the quotes.', 'start': 10236.317, 'duration': 5.541}, {'end': 10248.46, 'text': "Then I'm going to comment them so that we know where they start.", 'start': 10245.239, 'duration': 3.221}], 'summary': 'Using block element modifier to nest three containers for testimonials.', 'duration': 28.79, 'max_score': 10219.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz810219670.jpg'}], 'start': 9687.817, 'title': 'Bootstrap carousel creation and design', 'summary': 'Covers creating a bootstrap carousel, designing sections with waves and a carousel, customizing content, and enhancing visuals. it includes html structure, styling with css, using mixins, and adding custom carousel content with client testimonials.', 'chapters': [{'end': 9979.779, 'start': 9687.817, 'title': 'Bootstrap carousel creation', 'summary': 'Covers the process of creating a bootstrap carousel, including the html structure, styling with css, and using mixins and components in the scss file to achieve the desired layout and design.', 'duration': 291.962, 'highlights': ['The process begins with creating a section for testimonials in the HTML with specific IDs and classes.', 'Styling elements such as headings, lines, and subtitles is done using specific classes and properties, including setting text alignment and padding.', 'The chapter also delves into using mixins and components in the SCSS file to apply positioning, padding, and gradient color to the testimonials section.']}, {'end': 10191.86, 'start': 9980.139, 'title': 'Designing section with waves and carousel', 'summary': 'Involves designing a section with two waves and a carousel by adding html and bootstrap components, generating and customizing waves from getwaves.io, resulting in a visually enhanced section.', 'duration': 211.721, 'highlights': ['The section is designed with two waves by generating and customizing them from getwaves.io, resulting in a visually enhanced section.', 'A carousel is created by adding HTML and bootstrap components, resulting in an interactive content display.', 'The speaker uses getbootstrap.com to find and copy example code for the carousel, demonstrating efficient use of external resources.']}, {'end': 10690.898, 'start': 10200.433, 'title': 'Adding carousel content', 'summary': 'Explains how to add custom carousel content with client testimonials, including containers for text, icons, client pictures, names, and roles, and how to style and duplicate the carousel items for multiple clients.', 'duration': 490.465, 'highlights': ['The chapter explains how to add custom carousel content with client testimonials The transcript details the process of adding custom carousel content with client testimonials, including containers for text, icons, client pictures, names, and roles.', 'The process involves styling and duplicating the carousel items for multiple clients The process involves styling and duplicating the carousel items for multiple clients, with specific instructions for each client name and role.', 'Containers for text, icons, client pictures, names, and roles are nested using block element modifier The containers for text, icons, client pictures, names, and roles are nested using a block element modifier, providing a structured layout for the carousel content.']}], 'duration': 1003.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz89687817.jpg', 'highlights': ['The process involves styling and duplicating the carousel items for multiple clients with specific instructions for each client name and role.', 'The chapter explains how to add custom carousel content with client testimonials, including containers for text, icons, client pictures, names, and roles.', 'The section is designed with two waves by generating and customizing them from getwaves.io, resulting in a visually enhanced section.', 'A carousel is created by adding HTML and bootstrap components, resulting in an interactive content display.', 'The process begins with creating a section for testimonials in the HTML with specific IDs and classes.', 'The chapter also delves into using mixins and components in the SCSS file to apply positioning, padding, and gradient color to the testimonials section.', 'The speaker uses getbootstrap.com to find and copy example code for the carousel, demonstrating efficient use of external resources.', 'Styling elements such as headings, lines, and subtitles is done using specific classes and properties, including setting text alignment and padding.']}, {'end': 11901.608, 'segs': [{'end': 10959.184, 'src': 'embed', 'start': 10876.962, 'weight': 0, 'content': [{'end': 10881.985, 'text': "So here we have the icon and here I'm going to start with the font size of that icon.", 'start': 10876.962, 'duration': 5.023}, {'end': 10885.595, 'text': "So here I'm going to use 1.5 rem.", 'start': 10883.533, 'duration': 2.062}, {'end': 10887.716, 'text': 'And then the color.', 'start': 10886.956, 'duration': 0.76}, {'end': 10892.72, 'text': "So I'm going to use RGBA.", 'start': 10891.259, 'duration': 1.461}, {'end': 10903.708, 'text': 'So we have primary with an opacity of 0.7.', 'start': 10894.021, 'duration': 9.687}, {'end': 10909.011, 'text': 'Then we also need to style the star ratings or the rating stars.', 'start': 10903.708, 'duration': 5.303}, {'end': 10912.394, 'text': 'So we have that class inside the card also.', 'start': 10910.372, 'duration': 2.022}, {'end': 10921.966, 'text': 'And then the icon is inside the ratings so we have the icon.', 'start': 10917.884, 'duration': 4.082}, {'end': 10925.487, 'text': "And here we're going to set the color and the font size.", 'start': 10923.166, 'duration': 2.321}, {'end': 10933.31, 'text': "So for the color we're going to copy what we have used here on the icons for the quotes.", 'start': 10927.248, 'duration': 6.062}, {'end': 10936.772, 'text': 'And then set the font size.', 'start': 10935.371, 'duration': 1.401}, {'end': 10939.593, 'text': "We're going to use 1rem.", 'start': 10938.612, 'duration': 0.981}, {'end': 10943.734, 'text': "So I'm going to save.", 'start': 10942.854, 'duration': 0.88}, {'end': 10945.355, 'text': "Let's see from the browser.", 'start': 10944.114, 'duration': 1.241}, {'end': 10950.9, 'text': 'So there you have it, you can see now they have changed the color.', 'start': 10948.138, 'duration': 2.762}, {'end': 10959.184, 'text': "Next let's style the picture.", 'start': 10957.884, 'duration': 1.3}], 'summary': 'Styling icon with 1.5 rem font size and rgba color, setting star ratings with 1rem font size.', 'duration': 82.222, 'max_score': 10876.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz810876962.jpg'}, {'end': 11864.547, 'src': 'embed', 'start': 11821.476, 'weight': 1, 'content': [{'end': 11824.158, 'text': "And then you're going to add some padding between the questions.", 'start': 11821.476, 'duration': 2.682}, {'end': 11829.281, 'text': 'And then also we need to change the question to reflect what we have here on the layout.', 'start': 11825.219, 'duration': 4.062}, {'end': 11830.662, 'text': "So let's work on that.", 'start': 11829.881, 'duration': 0.781}, {'end': 11836.919, 'text': "So first I'm going to select all the accordion items so that we can add the two classes.", 'start': 11832.398, 'duration': 4.521}, {'end': 11839.56, 'text': 'So we are going to add shadow.', 'start': 11838.4, 'duration': 1.16}, {'end': 11846.382, 'text': "And then you're going to separate or add some space between the accordion items by using margin bottom.", 'start': 11841.72, 'duration': 4.662}, {'end': 11848.362, 'text': 'So we have margin bottom three.', 'start': 11847.142, 'duration': 1.22}, {'end': 11850.543, 'text': "So I'm going to save.", 'start': 11849.723, 'duration': 0.82}, {'end': 11851.183, 'text': "Let's see.", 'start': 11850.743, 'duration': 0.44}, {'end': 11855.378, 'text': 'And there you have it.', 'start': 11854.737, 'duration': 0.641}, {'end': 11859.843, 'text': 'You can see now we have some space between the accordion items and then that shadow.', 'start': 11855.398, 'duration': 4.445}, {'end': 11864.547, 'text': 'So the next one is to make sure that the questions reflect what we have here on the layout.', 'start': 11860.844, 'duration': 3.703}], 'summary': 'Updated accordion items with 3px margin bottom and added shadow.', 'duration': 43.071, 'max_score': 11821.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz811821476.jpg'}], 'start': 10690.898, 'title': 'Styling web elements', 'summary': 'Covers styling testimonial and carousel sections, customizing carousel controls and creating responsive sections and accordion, incorporating various design elements such as background color, padding, border radius, font width, and responsive design without media breakpoints.', 'chapters': [{'end': 11074.35, 'start': 10690.898, 'title': 'Styling testimonial section', 'summary': 'Covers styling the testimonial section, including setting background color, padding, border radius, and positioning elements, resulting in a visually appealing design for the website.', 'duration': 383.452, 'highlights': ['The CEO and founder explains the process of selecting and styling carousel items, ensuring their functionality and appearance on the website.', 'The speaker details the styling process for the testimonial section, including setting background color, padding, and border radius for the card element, resulting in a visually appealing design.', 'The speaker demonstrates the styling of icons for quotes and star ratings within the testimonial section, using specific font sizes and colors to enhance their appearance.', 'Detailed instructions are provided for styling the picture within the testimonial section, including setting its dimensions, position, and applying a rounded shape, resulting in a visually appealing design for the website.']}, {'end': 11264.505, 'start': 11077.411, 'title': 'Styling web page elements', 'summary': 'Discusses the process of styling various elements on a web page, including setting borders, aligning text, adjusting font width, and applying text and padding styles, utilizing a combination of rem and rgba values to achieve the desired styling.', 'duration': 187.094, 'highlights': ['The chapter discusses the process of styling various elements on a web page It covers the styling of picture borders, name, role, and star ratings on the web page.', 'Utilizing a combination of rem and RGBA values to achieve the desired styling The use of 0.325 rem solid for borders, RGBA with an opacity of 0.7 for color, and setting text color to white.', 'Adjusting font width and applying text and padding styles Involves setting the font width to 500, aligning text at the center, and applying padding and margin styles using rem values.']}, {'end': 11407.713, 'start': 11265.486, 'title': 'Customizing carousel controls', 'summary': 'Covers customizing carousel controls by replacing default layout, adding font awesome icons, and centering the controls.', 'duration': 142.227, 'highlights': ['The controls at the bottom are customized by replacing the defaults on the sides with font awesome icons and positioning them at the center.', 'The class carousel control for the previous is replaced with BTN classes and the font awesome icon long arrow alt right.', 'The controls are placed inside a container called text center to center them.']}, {'end': 11901.608, 'start': 11410.975, 'title': 'Creating responsive section & accordion', 'summary': 'Involves making a section fully responsive for various devices without media breakpoints and creating an accordion using bootstrap components to collapse and reveal items, demonstrating the customization of the accordion items and adding padding and space between questions.', 'duration': 490.633, 'highlights': ["The section is demonstrated to be fully responsive on various devices including Moto G4, Pixel 2, iPad, and iPhone 6, 7, 8 plus, without the use of media breakpoints. The section's responsiveness is tested and confirmed on multiple devices like Moto G4, Pixel 2, iPad, and iPhone 6, 7, 8 plus, without the need for media breakpoints.", 'The creation of section 6, the frequently asked questions, involves the use of bootstrap accordion components to collapse and reveal items. Section 6, the frequently asked questions, is created using bootstrap accordion components to facilitate collapsing and revealing of items.', 'The customization of the accordion includes adding space between items, adding shadow, and padding between questions to match the layout. Customization of the accordion involves adding space, shadow, and padding between items to align with the layout design.']}], 'duration': 1210.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz810690898.jpg', 'highlights': ['The section is demonstrated to be fully responsive on various devices without the use of media breakpoints.', 'The speaker details the styling process for the testimonial section, including setting background color, padding, and border radius for the card element, resulting in a visually appealing design.', 'The CEO and founder explains the process of selecting and styling carousel items, ensuring their functionality and appearance on the website.', 'The creation of section 6, the frequently asked questions, involves the use of bootstrap accordion components to collapse and reveal items.']}, {'end': 13415.584, 'segs': [{'end': 12371.301, 'src': 'embed', 'start': 12336.184, 'weight': 4, 'content': [{'end': 12338.005, 'text': 'It has all the pictures for the portfolio.', 'start': 12336.184, 'duration': 1.821}, {'end': 12342.428, 'text': 'They are named portfolio 1 all the way to portfolio 9 and they are in JPEG.', 'start': 12338.325, 'duration': 4.103}, {'end': 12345.03, 'text': "So I'm going to copy the entire folder to my project.", 'start': 12343.109, 'duration': 1.921}, {'end': 12350.861, 'text': 'So inside the images paste.', 'start': 12348.399, 'duration': 2.462}, {'end': 12354.305, 'text': 'So now we have the pictures in our project.', 'start': 12352.183, 'duration': 2.122}, {'end': 12359.249, 'text': 'Now we can go ahead and add the portfolio items or that content.', 'start': 12355.165, 'duration': 4.084}, {'end': 12362.953, 'text': "So here we're going to create a new row for that content.", 'start': 12360.39, 'duration': 2.563}, {'end': 12371.301, 'text': "So I'm going to start with a comment which is start the portfolio content or portfolio items.", 'start': 12363.834, 'duration': 7.467}], 'summary': '9 jpeg pictures named portfolio 1 to 9 added to project for portfolio content.', 'duration': 35.117, 'max_score': 12336.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz812336184.jpg'}, {'end': 13046.875, 'src': 'embed', 'start': 12974.218, 'weight': 0, 'content': [{'end': 12978.699, 'text': "So you need to set that top zero and then I'm going to save.", 'start': 12974.218, 'duration': 4.481}, {'end': 12979.299, 'text': "Let's see.", 'start': 12978.859, 'duration': 0.44}, {'end': 12985.78, 'text': 'So now you can see we have the caption and that background.', 'start': 12981.46, 'duration': 4.32}, {'end': 12991.542, 'text': 'So the next thing is to position the caption at the center of the portfolio item.', 'start': 12986.941, 'duration': 4.601}, {'end': 12995.222, 'text': "So on the caption you're going to include that mixing.", 'start': 12993.222, 'duration': 2}, {'end': 13002.744, 'text': 'So we have include which is going to position it at the center and we have that mixing code absolute.', 'start': 12995.763, 'duration': 6.981}, {'end': 13009.288, 'text': "center. I'm going to save, let's see.", 'start': 13004.463, 'duration': 4.825}, {'end': 13013.572, 'text': 'so now you can see, we have the caption at the center.', 'start': 13009.288, 'duration': 4.284}, {'end': 13020.859, 'text': "so let's change the color.", 'start': 13013.572, 'duration': 7.287}, {'end': 13024.263, 'text': 'so we have white close.', 'start': 13020.859, 'duration': 3.404}, {'end': 13029.626, 'text': "save, let's see, and there you have it.", 'start': 13024.263, 'duration': 5.363}, {'end': 13040.372, 'text': "so let's change or set the text transform to uppercase so that we can make sure that the captions are in uppercase like what we have here on the left.", 'start': 13029.626, 'duration': 10.746}, {'end': 13043.293, 'text': "so let's set that.", 'start': 13040.372, 'duration': 2.921}, {'end': 13046.875, 'text': 'so inside the caption we have that h4.', 'start': 13043.293, 'duration': 3.582}], 'summary': 'Positioned caption at center, changed color to white, set text transform to uppercase.', 'duration': 72.657, 'max_score': 12974.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz812974218.jpg'}, {'end': 13415.584, 'src': 'embed', 'start': 13362.115, 'weight': 2, 'content': [{'end': 13366.176, 'text': "I'm going to save.", 'start': 13362.115, 'duration': 4.061}, {'end': 13372.439, 'text': 'Now if you hover the portfolio item you can see we have that smooth hover effect.', 'start': 13366.256, 'duration': 6.183}, {'end': 13383.547, 'text': "So, before I finish up on the portfolio, I'm going to do a few changes on the height of the images,", 'start': 13378.183, 'duration': 5.364}, {'end': 13387.81, 'text': "because you're going to have some issues on the height of the images on smaller devices.", 'start': 13383.547, 'duration': 4.263}, {'end': 13392.333, 'text': "So I'm going to right click and then I'm going to click on inspect elements.", 'start': 13388.811, 'duration': 3.522}, {'end': 13402.06, 'text': 'So especially on medium devices, you can see this one is a medium device and you can see the height is not scaling nicely.', 'start': 13396.236, 'duration': 5.824}, {'end': 13412.06, 'text': "So I'm going to rotate the width or the screen And here you'll see just like I said you're going to have some issues with the height of the images.", 'start': 13402.1, 'duration': 9.96}, {'end': 13415.584, 'text': 'They are not scaling nicely on different devices.', 'start': 13412.32, 'duration': 3.264}], 'summary': 'Adjusting image height for better scaling on small and medium devices.', 'duration': 53.469, 'max_score': 13362.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz813362115.jpg'}], 'start': 11904.381, 'title': 'Web design and portfolio styling', 'summary': 'Covers customizing accordion padding, creating a responsive portfolio section, adding portfolio content and styling, web design css styling, and styling portfolio captions, resulting in visually appealing and functional web design elements and a fully responsive portfolio section.', 'chapters': [{'end': 11957.727, 'start': 11904.381, 'title': 'Customizing accordion padding', 'summary': 'Demonstrates customizing the accordion padding by overriding the default values of accordion padding y and x to 1.5rem, resulting in a visible change in the padding.', 'duration': 53.346, 'highlights': ['The chapter illustrates overriding the default values of accordion padding Y and X to 1.5rem, resulting in a visible change in the padding.', 'The variables accordion padding y and accordion padding x are copied and added inside the custom, and their defaults are removed.', 'The overridden values of accordion padding Y and X are set to 1.5rem, resulting in an updated padding.']}, {'end': 12279.901, 'start': 11959.829, 'title': 'Creating responsive portfolio section', 'summary': 'Demonstrates creating a fully responsive portfolio section using various screen devices and showcases the process of adding headings, filter buttons, and layout adjustments, resulting in a visually appealing and functional portfolio section.', 'duration': 320.072, 'highlights': ["The chapter showcases the process of creating a fully responsive portfolio section by testing it on various screen devices like Moto G4, iPad, and iPhone 6, 7, 8 Plus, demonstrating the content's fitting on different screens.", 'It demonstrates the process of adding headings with specific classes such as display 3 and font-weight bold, and adjusting spacing by adding margin and centering the text, resulting in a visually appealing layout.', 'The chapter also illustrates the addition of filter buttons for categories like all, websites, design, and mockup, showcasing the process of creating visually appealing and functional filter buttons for the portfolio section.']}, {'end': 12657.557, 'start': 12280.382, 'title': 'Adding portfolio content and styling', 'summary': 'Covers adding margin to create space between heading, subheading, and buttons, adding portfolio images to the project, generating nine portfolio items using emmet, and styling the portfolio section using the sass file.', 'duration': 377.175, 'highlights': ['Adding margin to create space between heading, subheading, and buttons Margin is adjusted with top margin set to 5 and bottom margin set to 4, creating a sufficient space for the layout.', 'Adding portfolio images to the project and creating a new row for portfolio content The nine portfolio images named portfolio 1 to portfolio 9 in JPEG format are copied to the project folder, and a new row is created for the portfolio content.', 'Generating nine portfolio items using Emmet and styling the portfolio section using the sass file Nine portfolio items are generated at once using Emmet, with each item containing a picture, title, and category. The portfolio section is styled using the portfolio.scss file and relevant modules and mixins are used for styling.']}, {'end': 12880.631, 'start': 12660.179, 'title': 'Web design css styling', 'summary': 'Covers the process of styling a web page using css, including setting padding, transforming text, scaling images, and managing layout dimensions, resulting in a visually consistent and structured design.', 'duration': 220.452, 'highlights': ['The portfolio items are styled to have equal height of 18.5rem, ensuring visual consistency across the web page.', "The images are scaled to the height of the portfolio box using the CSS property 'width' and 'height' set to 100%, resulting in visually consistent image display.", "The captions are hidden using the CSS property 'overflow' set to 'hidden', preventing overflow and maintaining a clean design layout.", "Margin bottom is added to the portfolio items with 'margin-bottom' set to 1.2 Rem, providing separation between the items and improving visual clarity.", "The text on the buttons is transformed to capitalize using the 'text-transform' property, resulting in a visually consistent and styled text format."]}, {'end': 13415.584, 'start': 12882.85, 'title': 'Styling portfolio captions', 'summary': 'Covers positioning, styling, and making captions visible on hover for portfolio items, including setting background color, positioning captions, making captions visible on hover, adding hover effect, and fixing image height scaling issues on different devices.', 'duration': 532.734, 'highlights': ['Positioning the caption at the center of the portfolio item by setting text alignment to center and using mixing code absolute center.', 'Making captions visible on hover by setting opacity to 1 and visibility to visible, and creating a smooth hover effect using transition property.', 'Setting the background color of the portfolio info container using RGBA with a primary color and an opacity of 0.75.', 'Adding a border at the top of the portfolio box with a width of 0.5 frame, solid style, and a purple light color.', 'Fixing image height scaling issues on different devices by setting the display to block and making additional adjustments.']}], 'duration': 1511.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz811904381.jpg', 'highlights': ['The chapter illustrates overriding the default values of accordion padding Y and X to 1.5rem, resulting in a visible change in the padding.', "The chapter showcases the process of creating a fully responsive portfolio section by testing it on various screen devices like Moto G4, iPad, and iPhone 6, 7, 8 Plus, demonstrating the content's fitting on different screens.", 'Adding portfolio images to the project and creating a new row for portfolio content The nine portfolio images named portfolio 1 to portfolio 9 in JPEG format are copied to the project folder, and a new row is created for the portfolio content.', 'The portfolio items are styled to have equal height of 18.5rem, ensuring visual consistency across the web page.', 'Positioning the caption at the center of the portfolio item by setting text alignment to center and using mixing code absolute center.']}, {'end': 14252.2, 'segs': [{'end': 13702.902, 'src': 'embed', 'start': 13628.919, 'weight': 2, 'content': [{'end': 13630.22, 'text': 'And then the subheading.', 'start': 13628.919, 'duration': 1.301}, {'end': 13633.561, 'text': 'So we have p with a class of line heights large.', 'start': 13630.74, 'duration': 2.821}, {'end': 13636.542, 'text': 'And then some dummy text.', 'start': 13635.522, 'duration': 1.02}, {'end': 13639.679, 'text': 'We have lorem 12.', 'start': 13636.762, 'duration': 2.917}, {'end': 13640.662, 'text': "And then I'm going to save.", 'start': 13639.679, 'duration': 0.983}, {'end': 13642.346, 'text': "Let's see from the browser so far.", 'start': 13641.023, 'duration': 1.323}, {'end': 13646.596, 'text': 'So now we have that text.', 'start': 13645.454, 'duration': 1.142}, {'end': 13653.771, 'text': "Next I'm going to style this section and here we're going to set some padding and some background color.", 'start': 13649.048, 'duration': 4.723}, {'end': 13657.914, 'text': "So you can see here from the layout we're going to use this gray color.", 'start': 13653.991, 'duration': 3.923}, {'end': 13659.875, 'text': "So let's work on that.", 'start': 13658.995, 'duration': 0.88}, {'end': 13665.499, 'text': 'So we have a file for that section which is get started.scss.', 'start': 13661.276, 'duration': 4.223}, {'end': 13670.102, 'text': "So I'm going to open that file and here the first thing I'm going to do is to use the modules.", 'start': 13665.779, 'duration': 4.323}, {'end': 13674.025, 'text': 'So we have the custom module and the mixing module.', 'start': 13670.282, 'duration': 3.743}, {'end': 13678.728, 'text': 'So we have the use and then custom.', 'start': 13674.065, 'duration': 4.663}, {'end': 13684.958, 'text': 'So again use it as star.', 'start': 13682.938, 'duration': 2.02}, {'end': 13691.24, 'text': 'Also we need the mixing.', 'start': 13689.999, 'duration': 1.241}, {'end': 13698.401, 'text': 'So we have again use components mixing.', 'start': 13691.4, 'duration': 7.001}, {'end': 13702.902, 'text': 'Use as star.', 'start': 13701.982, 'duration': 0.92}], 'summary': 'Styling the section with padding and gray color using modules and mixins.', 'duration': 73.983, 'max_score': 13628.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz813628919.jpg'}, {'end': 13775.895, 'src': 'embed', 'start': 13745.285, 'weight': 0, 'content': [{'end': 13746.086, 'text': 'So there you have it.', 'start': 13745.285, 'duration': 0.801}, {'end': 13749.048, 'text': "Next I'm going to create the two columns.", 'start': 13747.407, 'duration': 1.641}, {'end': 13751.39, 'text': 'From the layout here we have the two columns.', 'start': 13749.389, 'duration': 2.001}, {'end': 13755.754, 'text': 'We have the left column with this gradient background which will have the CTA info.', 'start': 13751.57, 'duration': 4.184}, {'end': 13759.998, 'text': 'And then we have the right column with this white background which will have the form.', 'start': 13756.455, 'duration': 3.543}, {'end': 13761.699, 'text': "So let's work on that.", 'start': 13760.858, 'duration': 0.841}, {'end': 13766.143, 'text': "So on the HTML I'm going to create a new row for that content.", 'start': 13763.441, 'duration': 2.702}, {'end': 13775.895, 'text': "First let's start with a comment which is start the CTA info or the CTA content.", 'start': 13768.812, 'duration': 7.083}], 'summary': 'Creating two columns with different backgrounds for cta info and form.', 'duration': 30.61, 'max_score': 13745.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz813745285.jpg'}, {'end': 13847.378, 'src': 'embed', 'start': 13811.885, 'weight': 3, 'content': [{'end': 13814.387, 'text': "So on the first column we're going to have that gradient background.", 'start': 13811.885, 'duration': 2.502}, {'end': 13817.71, 'text': "And then on the second column we're going to have that white background.", 'start': 13815.168, 'duration': 2.542}, {'end': 13823.415, 'text': "So on the first column I'm going to add a class called gradient which you're going to create in a moment.", 'start': 13819.292, 'duration': 4.123}, {'end': 13824.716, 'text': 'So gradient.', 'start': 13823.955, 'duration': 0.761}, {'end': 13827.978, 'text': 'And then also shadow and some padding.', 'start': 13826.036, 'duration': 1.942}, {'end': 13832.381, 'text': "So I'm going to use padding 3.", 'start': 13828.618, 'duration': 3.763}, {'end': 13835.082, 'text': 'And then on the second column we are going to have white background.', 'start': 13832.381, 'duration': 2.701}, {'end': 13836.323, 'text': 'So we have bg white.', 'start': 13835.102, 'duration': 1.221}, {'end': 13838.965, 'text': 'And then some shadow.', 'start': 13838.104, 'duration': 0.861}, {'end': 13847.378, 'text': 'And also padding 3.', 'start': 13841.206, 'duration': 6.172}], 'summary': 'Design layout with gradient and white background, using classes for styling.', 'duration': 35.493, 'max_score': 13811.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz813811885.jpg'}], 'start': 13416.766, 'title': 'Creating get started section and styling class', 'summary': "Demonstrates creating the 'get started' section with a maximum height of 18.5 rem for the portfolio box, removing image height, and scaling images on hover to 1.5. it also covers styling a class with padding, background color, creating two columns with specific backgrounds and content, and using font awesome to style list items for a consistent look in the browser.", 'chapters': [{'end': 13702.902, 'start': 13416.766, 'title': 'Creating get started section', 'summary': "Demonstrates creating the 'get started' section, including setting a maximum height for the portfolio box at 18.5 rem, removing the height of the image, and scaling images on hover to 1.5, ensuring proper layout and styling for the section.", 'duration': 286.136, 'highlights': ["The chapter demonstrates creating the 'Get Started' section, including setting a maximum height for the portfolio box at 18.5 rem.", 'The images are scaled nicely, resolving issues with the image height on medium devices.', 'The tutorial also covers scaling images on hover to 1.5, ensuring proper layout and styling for the section.', 'The tutorial involves adding a heading and two equal columns for the CTA info and form, with specific class and styling details for each element.']}, {'end': 14252.2, 'start': 13705.563, 'title': 'Styling class and creating columns', 'summary': 'Covers styling a class to set padding, background color, and creating two columns with specific backgrounds and content, as well as using font awesome to style list items, ensuring a consistent look in the browser.', 'duration': 546.637, 'highlights': ['Creating two columns with specific backgrounds and content The chapter focuses on creating two columns with gradient and white backgrounds to display CTA info and a form, ensuring a visually appealing layout for the website.', 'Styling a class to set padding and background color It covers styling a class to set padding to 4M and background color to gray 200, ensuring consistent visual styling across the website.', "Using Font Awesome to style list items The chapter demonstrates using Font Awesome to style list items with a check icon, adding visual appeal to the website's content."]}], 'duration': 835.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz813416766.jpg', 'highlights': ['The tutorial involves adding a heading and two equal columns for the CTA info and form, with specific class and styling details for each element.', 'Creating two columns with specific backgrounds and content The chapter focuses on creating two columns with gradient and white backgrounds to display CTA info and a form, ensuring a visually appealing layout for the website.', "Using Font Awesome to style list items The chapter demonstrates using Font Awesome to style list items with a check icon, adding visual appeal to the website's content.", "The chapter demonstrates creating the 'Get Started' section, including setting a maximum height for the portfolio box at 18.5 rem.", 'Styling a class to set padding and background color It covers styling a class to set padding to 4M and background color to gray 200, ensuring consistent visual styling across the website.', 'The images are scaled nicely, resolving issues with the image height on medium devices.', 'The tutorial also covers scaling images on hover to 1.5, ensuring proper layout and styling for the section.']}, {'end': 15184.35, 'segs': [{'end': 14884.044, 'src': 'embed', 'start': 14792.515, 'weight': 0, 'content': [{'end': 14795.856, 'text': "So on the get started, so here I'm going to start with a comment.", 'start': 14792.515, 'duration': 3.341}, {'end': 14800.397, 'text': 'So we have the form content.', 'start': 14796.316, 'duration': 4.081}, {'end': 14813.081, 'text': "So we have that class form and here I'm going to set the padding.", 'start': 14806.979, 'duration': 6.102}, {'end': 14818.563, 'text': "So we have, I'm going to set padding to 3rem.", 'start': 14814.882, 'duration': 3.681}, {'end': 14824.857, 'text': 'So remember here on the CT info we set that to 3rem also.', 'start': 14821.055, 'duration': 3.802}, {'end': 14827.159, 'text': "So I'm going to set that to 3rem.", 'start': 14825.738, 'duration': 1.421}, {'end': 14831.181, 'text': "And then you're going to style the button.", 'start': 14828.66, 'duration': 2.521}, {'end': 14835.664, 'text': 'So you have the button inside the form.', 'start': 14833.602, 'duration': 2.062}, {'end': 14841.467, 'text': "So here I'm going to set the border to none.", 'start': 14839.646, 'duration': 1.821}, {'end': 14847.671, 'text': 'And then we have the color.', 'start': 14846.71, 'duration': 0.961}, {'end': 14849.652, 'text': "I'm going to use white.", 'start': 14848.811, 'duration': 0.841}, {'end': 14859.178, 'text': "And then we're going to style any link.", 'start': 14857.478, 'duration': 1.7}, {'end': 14864.12, 'text': "We're going to start with the color, which I'm going to set that to white.", 'start': 14860.699, 'duration': 3.421}, {'end': 14872.101, 'text': "And then text decoration, we're going to set that to none also.", 'start': 14867.92, 'duration': 4.181}, {'end': 14880.523, 'text': "And then text transform, I'm going to set that to capitalize.", 'start': 14876.082, 'duration': 4.441}, {'end': 14884.044, 'text': "So I'm going to save, let's see.", 'start': 14882.764, 'duration': 1.28}], 'summary': 'Styling form elements with padding and setting button styles, including color and text decoration.', 'duration': 91.529, 'max_score': 14792.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz814792515.jpg'}, {'end': 15184.35, 'src': 'embed', 'start': 15151.713, 'weight': 3, 'content': [{'end': 15156.576, 'text': "So I'm going to save and then we need to create this variable on the custom sass file.", 'start': 15151.713, 'duration': 4.863}, {'end': 15157.776, 'text': "So I'm going to open that file.", 'start': 15156.756, 'duration': 1.02}, {'end': 15160.277, 'text': 'So this is a new color.', 'start': 15159.177, 'duration': 1.1}, {'end': 15163.999, 'text': "So I'm going to add it where we have the white and the gray colors.", 'start': 15160.498, 'duration': 3.501}, {'end': 15167.141, 'text': 'Let me just add on my theme colors.', 'start': 15165.46, 'duration': 1.681}, {'end': 15180.688, 'text': "So we have variable footer and then I'm going to assign it this color that is 151414.", 'start': 15169.099, 'duration': 11.589}, {'end': 15184.35, 'text': "Close and then I'm going to save.", 'start': 15180.688, 'duration': 3.662}], 'summary': 'Creating a new color variable (#151414) in custom sass file.', 'duration': 32.637, 'max_score': 15151.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz815151713.jpg'}], 'start': 14253.681, 'title': 'Styling list items with icons, creating form content, and responsive form and footer', 'summary': 'Demonstrates styling list items with icons to improve ui, creating form content using bootstrap v5, and building a fully responsive form with specific columns and a styled footer.', 'chapters': [{'end': 14335.869, 'start': 14253.681, 'title': 'Styling list items with icons', 'summary': 'Demonstrates how to style list items with icons by adding padding, margin, and setting font size for better ui, resulting in improved spacing and visual appeal.', 'duration': 82.188, 'highlights': ['Demonstrates adding padding, margin, and setting font size to style list items with icons, resulting in improved spacing and visual appeal.', 'Uses 0.7rem margin at the bottom, 0.5rem padding top and left, and 1.2rem font size for the list class.', 'Utilizes 0.5rem margin right and 1.2rem font size to enhance the visual appeal of the list items.']}, {'end': 14884.044, 'start': 14337.426, 'title': 'Creating form content and styling', 'summary': 'Covers creating form content for a website using bootstrap version 5, including adding headings, input fields, buttons, and styling the form content with specific classes and properties.', 'duration': 546.618, 'highlights': ['Creating form content for a website using Bootstrap version 5 The speaker demonstrates adding headings, input fields, buttons, and styling the form content with specific classes and properties.', 'Using utility classes to wrap up form or input fields In the new Bootstrap version 5, the form group class is dropped, and the speaker explains using utility classes to wrap up form or input fields.', 'Styling the form content with specific classes and properties The speaker showcases styling the form content with specific classes and properties, such as setting padding, border, color, and text decoration.']}, {'end': 15184.35, 'start': 14886.54, 'title': 'Creating responsive form and footer', 'summary': 'Demonstrates creating a fully responsive form with columns for first name, last name, email, and message, ensuring the form layout adjusts to different device sizes. additionally, it covers creating section 9 of the layout, the footer, with specific styling and color variables.', 'duration': 297.81, 'highlights': ["Creating a fully responsive form with columns for first name, last name, email, and message, ensuring the form layout adjusts to different device sizes. The form is designed to split the first name and last name into two equal columns on large devices using 'col-lg6' class, while the email address and message occupy full width using 'col-lg12' class, and the layout adjusts based on device size.", "Creating section 9 of the layout, the footer, with specific styling and color variables. The process involves adding a footer class with padding and background color styling, as well as creating a new color variable 'footer' with the value #151414 in the custom sass file."]}], 'duration': 930.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz814253681.jpg', 'highlights': ['Demonstrates creating a fully responsive form with specific columns and a styled footer.', 'Uses 0.7rem margin at the bottom, 0.5rem padding top and left, and 1.2rem font size for the list class.', 'Creating form content for a website using Bootstrap version 5.', 'Utilizes 0.5rem margin right and 1.2rem font size to enhance the visual appeal of the list items.', 'Styling the form content with specific classes and properties.']}, {'end': 16228.243, 'segs': [{'end': 15440.282, 'src': 'embed', 'start': 15402.828, 'weight': 3, 'content': [{'end': 15423.509, 'text': 'and then we have contact for email, content for email, and then you have the third one, which is content for location.', 'start': 15402.828, 'duration': 20.681}, {'end': 15424.33, 'text': "so I'm going to save.", 'start': 15423.509, 'duration': 0.821}, {'end': 15425.872, 'text': "let's see how it looks like on the browser.", 'start': 15424.33, 'duration': 1.542}, {'end': 15431.274, 'text': 'So that is how our content looks like so far.', 'start': 15429.312, 'duration': 1.962}, {'end': 15432.655, 'text': "So we're going to style it.", 'start': 15431.754, 'duration': 0.901}, {'end': 15437.54, 'text': 'You can see we have the title goals here for the first one, the second one and the third one.', 'start': 15433.216, 'duration': 4.324}, {'end': 15440.282, 'text': "Next I'm going to add the icons.", 'start': 15438.881, 'duration': 1.401}], 'summary': 'Styling content for email, location, and adding icons for website.', 'duration': 37.454, 'max_score': 15402.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz815402828.jpg'}, {'end': 15750.751, 'src': 'embed', 'start': 15724.293, 'weight': 5, 'content': [{'end': 15731.275, 'text': "You can see it's already set to 44 and also remove the stroke and that is the color of that stroke.", 'start': 15724.293, 'duration': 6.982}, {'end': 15734.316, 'text': "So let's start with the wind and the height.", 'start': 15732.176, 'duration': 2.14}, {'end': 15738.158, 'text': "So I'm going to select and then target the three icons.", 'start': 15734.697, 'duration': 3.461}, {'end': 15744.94, 'text': 'So you have the second and the third one, backspace and then also the stroke color.', 'start': 15738.178, 'duration': 6.762}, {'end': 15750.751, 'text': "So we have the stroke color so I'm going to remove it.", 'start': 15748.43, 'duration': 2.321}], 'summary': 'Adjust settings to 44, target icons, remove stroke color.', 'duration': 26.458, 'max_score': 15724.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz815724293.jpg'}, {'end': 15948.056, 'src': 'embed', 'start': 15872.036, 'weight': 6, 'content': [{'end': 15891.583, 'text': "so for the title we're going to set the font size to 1rem or 1.4, and then font size for the subtitle we're going to set that to 1rem.", 'start': 15872.036, 'duration': 19.547}, {'end': 15892.804, 'text': "so I'm going to save, let's see.", 'start': 15891.583, 'duration': 1.221}, {'end': 15898.356, 'text': 'So that is how the content looks like.', 'start': 15896.835, 'duration': 1.521}, {'end': 15901.318, 'text': 'I think gray 300 is not the correct color.', 'start': 15898.536, 'duration': 2.782}, {'end': 15907.442, 'text': "So let's try gray 600.", 'start': 15902.079, 'duration': 5.363}, {'end': 15908.263, 'text': "Save, let's see.", 'start': 15907.442, 'duration': 0.821}, {'end': 15910.264, 'text': 'And there you have it.', 'start': 15909.624, 'duration': 0.64}, {'end': 15916.749, 'text': 'So something else is we need to set the font width of the title and the subtitle.', 'start': 15911.385, 'duration': 5.364}, {'end': 15918.45, 'text': 'You can see they are a bit bold.', 'start': 15917.209, 'duration': 1.241}, {'end': 15926.691, 'text': "So I'm going to set here for the info.", 'start': 15920.891, 'duration': 5.8}, {'end': 15928.452, 'text': 'So we have font-weight.', 'start': 15927.432, 'duration': 1.02}, {'end': 15934.316, 'text': "I'm going to use 600.", 'start': 15931.775, 'duration': 2.541}, {'end': 15935.417, 'text': "Save Let's see.", 'start': 15934.316, 'duration': 1.101}, {'end': 15939.48, 'text': 'So much better now.', 'start': 15938.579, 'duration': 0.901}, {'end': 15943.133, 'text': "Next I'm going to set the display for this content.", 'start': 15940.911, 'duration': 2.222}, {'end': 15948.056, 'text': 'And this will create different breakpoints so that we can target different screen devices.', 'start': 15943.413, 'duration': 4.643}], 'summary': 'Adjusting font size, color, and weight for title and subtitle; setting display for different screen devices.', 'duration': 76.02, 'max_score': 15872.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz815872036.jpg'}, {'end': 16001.62, 'src': 'embed', 'start': 15968.942, 'weight': 0, 'content': [{'end': 15971.123, 'text': "For large devices, you're going to set the display to flex.", 'start': 15968.942, 'duration': 2.181}, {'end': 15974.786, 'text': 'So we have display large flex.', 'start': 15971.163, 'duration': 3.623}, {'end': 15979.629, 'text': "And then for small devices, you're going to set the display to flex or any other device.", 'start': 15975.947, 'duration': 3.682}, {'end': 15981.31, 'text': 'So you have display flex.', 'start': 15980.009, 'duration': 1.301}, {'end': 15983.992, 'text': "So I'm going to save.", 'start': 15983.271, 'duration': 0.721}, {'end': 15985.092, 'text': "Let's see from the browser.", 'start': 15984.092, 'duration': 1}, {'end': 15988.535, 'text': 'So you can see now the display has changed.', 'start': 15986.894, 'duration': 1.641}, {'end': 15992.097, 'text': "You can see now on large devices, it's using the display flex.", 'start': 15988.555, 'duration': 3.542}, {'end': 15996.76, 'text': "So I'm going to right click so that we can check for other devices and inspect element.", 'start': 15992.297, 'duration': 4.463}, {'end': 16001.62, 'text': 'So you can see here this one is a medium device.', 'start': 15999.139, 'duration': 2.481}], 'summary': 'Using flex display for large devices and any other device, with display change observed on inspection.', 'duration': 32.678, 'max_score': 15968.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz815968942.jpg'}, {'end': 16163.072, 'src': 'embed', 'start': 16110.14, 'weight': 1, 'content': [{'end': 16118.662, 'text': "So here you're going to set the font size to 1.4 rem and then 1 rem for small devices.", 'start': 16110.14, 'duration': 8.522}, {'end': 16122.063, 'text': 'So this one will also apply to subtitles.', 'start': 16120.023, 'duration': 2.04}, {'end': 16124.444, 'text': "So I'm also going to copy where we have the subtitle.", 'start': 16122.083, 'duration': 2.361}, {'end': 16126.585, 'text': 'So we need to include that media breakpoint.', 'start': 16124.904, 'duration': 1.681}, {'end': 16134.163, 'text': 'And then, where we have large device,', 'start': 16130.706, 'duration': 3.457}, {'end': 16146.306, 'text': "we're going to have one ram and then we're going to reduce the font size on small devices to weight 0.8 and then i'm going to save or 0.9.", 'start': 16134.163, 'duration': 12.143}, {'end': 16148.706, 'text': "let's see.", 'start': 16146.306, 'duration': 2.4}, {'end': 16149.346, 'text': 'and there you have it.', 'start': 16148.706, 'duration': 0.64}, {'end': 16149.766, 'text': 'you can see.', 'start': 16149.346, 'duration': 0.42}, {'end': 16152.967, 'text': 'now we have the title and the subtitle.', 'start': 16149.766, 'duration': 3.201}, {'end': 16155.047, 'text': "they're a bit small.", 'start': 16152.967, 'duration': 2.08}, {'end': 16156.287, 'text': "so let's switch to another device.", 'start': 16155.047, 'duration': 1.24}, {'end': 16158.108, 'text': "let's go for a medium device.", 'start': 16156.287, 'duration': 1.821}, {'end': 16158.728, 'text': 'we have an ipad.', 'start': 16158.108, 'duration': 0.62}, {'end': 16163.072, 'text': 'So again, you can see, the content is fully responsive.', 'start': 16160.771, 'duration': 2.301}], 'summary': 'Set font size to 1.4rem for large devices, 1rem for small devices, ensuring full responsiveness.', 'duration': 52.932, 'max_score': 16110.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz816110140.jpg'}, {'end': 16228.243, 'src': 'embed', 'start': 16199.028, 'weight': 4, 'content': [{'end': 16200.189, 'text': "So save, let's see.", 'start': 16199.028, 'duration': 1.161}, {'end': 16202.852, 'text': 'And there you have it.', 'start': 16202.171, 'duration': 0.681}, {'end': 16207.817, 'text': 'I think we need also to reduce the font size of the subtitle.', 'start': 16203.973, 'duration': 3.844}, {'end': 16211.64, 'text': 'So I think 0.9 is a bit large.', 'start': 16208.257, 'duration': 3.383}, {'end': 16215.304, 'text': "So here I'm going to set to 0.8.", 'start': 16212.181, 'duration': 3.123}, {'end': 16216.305, 'text': "And then save, let's see.", 'start': 16215.304, 'duration': 1.001}, {'end': 16221.582, 'text': 'So now I think everything is perfectly fine.', 'start': 16219.241, 'duration': 2.341}, {'end': 16225.643, 'text': 'So on all devices our content now is fully responsive.', 'start': 16221.762, 'duration': 3.881}, {'end': 16228.243, 'text': 'So we can move on to the next step.', 'start': 16226.943, 'duration': 1.3}], 'summary': 'Adjust subtitle font size to 0.8 for full responsiveness.', 'duration': 29.215, 'max_score': 16199.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz816199028.jpg'}], 'start': 15184.43, 'title': 'Styling footer and responsive content', 'summary': 'Involves styling the footer contact information in html, including creating and styling the top footer, adding icons for phone, email, and location, and modifying the title and subtitle. it also includes instructions on using emmet for generating sections and styling in the sass file. additionally, it demonstrates styling responsive content, setting colors, font sizes, display properties, and media breakpoints to ensure full responsiveness across different screen devices.', 'chapters': [{'end': 15792.431, 'start': 15184.43, 'title': 'Styling footer contact information', 'summary': 'Involves styling the footer contact information in html, including creating and styling the top footer, adding icons for phone, email, and location, and modifying the title and subtitle, with specific instructions on using emmet for generating sections and styling in the sass file.', 'duration': 608.001, 'highlights': ['Styling Footer Contact Information Involves styling the footer contact information in HTML, including creating and styling the top footer, adding icons for phone, email, and location, and modifying the title and subtitle.', 'Using Emmet for Generating Sections Utilizing Emmet to generate three sections at once in the HTML, and using columns with different breakpoints for medium and large devices.', 'Adding Icons for Phone, Email, and Location Involves adding SVG icons for phone, email, and location, with specific instructions on obtaining the icons from tabularicons.com.', 'Modifying Title and Subtitle Involves replacing the title and subtitle placeholders with actual content and styling them in the HTML.', 'Styling in the Sass File Provides specific instructions on styling the contact box container, icon, and info in the sass file, including setting the position to relative and modifying the title and subtitle.']}, {'end': 16228.243, 'start': 15792.451, 'title': 'Styling responsive content', 'summary': 'Demonstrates styling responsive content, including setting colors, font sizes, display properties, and media breakpoints to ensure full responsiveness across different screen devices.', 'duration': 435.792, 'highlights': ['Setting colors, font sizes, and display properties The speaker sets the color, font size, and display properties for the title, subtitle, and icons to achieve the desired styling and responsiveness.', 'Applying media breakpoints for different screen devices The speaker uses media breakpoints to target large, medium, and small devices, adjusting the width, font size, and display to ensure full responsiveness across various screen sizes.', 'Ensuring full responsiveness across different screen devices The speaker demonstrates the full responsiveness of the content by testing on various devices, ensuring the alignment and sizing of the elements are suitable for different screen sizes.']}], 'duration': 1043.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz815184430.jpg', 'highlights': ['Styling Footer Contact Information Involves styling the footer contact information in HTML, including creating and styling the top footer, adding icons for phone, email, and location, and modifying the title and subtitle.', 'Using Emmet for Generating Sections Utilizing Emmet to generate three sections at once in the HTML, and using columns with different breakpoints for medium and large devices.', 'Adding Icons for Phone, Email, and Location Involves adding SVG icons for phone, email, and location, with specific instructions on obtaining the icons from tabularicons.com.', 'Modifying Title and Subtitle Involves replacing the title and subtitle placeholders with actual content and styling them in the HTML.', 'Styling in the Sass File Provides specific instructions on styling the contact box container, icon, and info in the sass file, including setting the position to relative and modifying the title and subtitle.', 'Setting colors, font sizes, and display properties The speaker sets the color, font size, and display properties for the title, subtitle, and icons to achieve the desired styling and responsiveness.', 'Applying media breakpoints for different screen devices The speaker uses media breakpoints to target large, medium, and small devices, adjusting the width, font size, and display to ensure full responsiveness across various screen sizes.', 'Ensuring full responsiveness across different screen devices The speaker demonstrates the full responsiveness of the content by testing on various devices, ensuring the alignment and sizing of the elements are suitable for different screen sizes.']}, {'end': 18141.342, 'segs': [{'end': 16763.726, 'src': 'embed', 'start': 16728.832, 'weight': 5, 'content': [{'end': 16734.636, 'text': "So we're going to start with the first one which is a bit large or a bit bigger than the rest of the three.", 'start': 16728.832, 'duration': 5.804}, {'end': 16738.219, 'text': "So that one you're going to create it separately.", 'start': 16736.058, 'duration': 2.161}, {'end': 16747.564, 'text': "So we're going to start with the col12 and then for small devices we're going to use col6.", 'start': 16738.479, 'duration': 9.085}, {'end': 16755.44, 'text': "For large devices you're going to use call LG 6.", 'start': 16752.478, 'duration': 2.962}, {'end': 16763.726, 'text': 'So you have 6 and then tab.', 'start': 16755.44, 'duration': 8.286}], 'summary': 'Creating a large-sized element separately, using col12 for small devices, and call lg 6 for large devices.', 'duration': 34.894, 'max_score': 16728.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz816728831.jpg'}, {'end': 17428.732, 'src': 'embed', 'start': 17397, 'weight': 0, 'content': [{'end': 17403.884, 'text': "So the only thing I'm going to do is to add the MX Auto, that is the class for horizontal centering on the columns that we have.", 'start': 17397, 'duration': 6.884}, {'end': 17406.646, 'text': "So I'm going to select all the columns and then add that class.", 'start': 17404.304, 'duration': 2.342}, {'end': 17411.989, 'text': 'So we have the second one, the third one and then the fourth one.', 'start': 17407.807, 'duration': 4.182}, {'end': 17413.91, 'text': 'So we have that class MX Auto.', 'start': 17412.169, 'duration': 1.741}, {'end': 17419.714, 'text': "So I'm going to save, let's see.", 'start': 17418.233, 'duration': 1.481}, {'end': 17428.732, 'text': 'So with that our content now is fully responsive and you can move on to the next part which is part four of the footer.', 'start': 17421.667, 'duration': 7.065}], 'summary': 'Added mx auto class for horizontal centering on columns, making content fully responsive.', 'duration': 31.732, 'max_score': 17397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz817397000.jpg'}, {'end': 17720.804, 'src': 'embed', 'start': 17685.637, 'weight': 2, 'content': [{'end': 17686.678, 'text': 'And then text decoration.', 'start': 17685.637, 'duration': 1.041}, {'end': 17691.982, 'text': "We're going to set that to none.", 'start': 17690.12, 'duration': 1.862}, {'end': 17697.686, 'text': "So I'm going to save.", 'start': 17696.725, 'duration': 0.961}, {'end': 17699.187, 'text': "Let's see from the browser.", 'start': 17697.946, 'duration': 1.241}, {'end': 17702.99, 'text': 'So now that is our copyright.', 'start': 17701.528, 'duration': 1.462}, {'end': 17704.871, 'text': 'So we need to add some padding.', 'start': 17703.81, 'duration': 1.061}, {'end': 17712.603, 'text': "So on the HTML where we have that class I'm going to add padding top and padding bottom.", 'start': 17706.201, 'duration': 6.402}, {'end': 17720.804, 'text': "So we have padding top I'm going to set that to five and then padding bottom also five and then I'm going to save.", 'start': 17712.623, 'duration': 8.181}], 'summary': 'Setting text decoration to none and adding padding top and bottom to class in html.', 'duration': 35.167, 'max_score': 17685.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz817685637.jpg'}, {'end': 17882.664, 'src': 'embed', 'start': 17838.353, 'weight': 3, 'content': [{'end': 17844.555, 'text': "On the HTML I'm going to create that button at the end of the footer.", 'start': 17838.353, 'duration': 6.202}, {'end': 17851.438, 'text': 'Here we have a comment first which is back to top button.', 'start': 17844.615, 'duration': 6.823}, {'end': 17859.144, 'text': "So we're going to create it as a link.", 'start': 17857.523, 'duration': 1.621}, {'end': 17869.933, 'text': 'So we have the link with a class of shadow and a class of btnPrimary to give it that purple color.', 'start': 17859.265, 'duration': 10.668}, {'end': 17874.357, 'text': 'And then we need to give it that rounded circle.', 'start': 17871.174, 'duration': 3.183}, {'end': 17877.139, 'text': "So we're going to add that class which is rounded circle.", 'start': 17874.377, 'duration': 2.762}, {'end': 17882.664, 'text': 'So we have tab.', 'start': 17882.043, 'duration': 0.621}], 'summary': 'Creating a back to top button in html with a purple rounded circle link.', 'duration': 44.311, 'max_score': 17838.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz817838353.jpg'}], 'start': 16229.924, 'title': 'Styling social media and footer', 'summary': 'Details the process of creating and styling social media footer icons, including the html structure, font awesome brand class, responsive layout, fixing spacing, creating columns, ensuring responsiveness, and creating a back to top button.', 'chapters': [{'end': 16375.267, 'start': 16229.924, 'title': 'Creating social media footer', 'summary': 'Details the process of creating a social media footer for a website, including the html structure, styling, and responsive layout for different device sizes.', 'duration': 145.343, 'highlights': ['The process begins with creating a container for the social media content, followed by the addition of a light background with a hex color value of #212121.', "The HTML structure includes a container, a row, and two unequal columns for the 'connect with us' text and social media icons, with specific classes for different device sizes such as col-lg5 and col-md6.", 'The detailed steps involve adding padding, text center alignment, and margin at the bottom, ensuring a responsive layout for large and medium devices.']}, {'end': 16596.261, 'start': 16378.269, 'title': 'Styling social media icons in footer', 'summary': 'Demonstrates the process of creating and styling social media icons in a footer, including using font awesome brand class, setting the color, font size, and margin for the icons, and including a media breakpoint for large devices.', 'duration': 217.992, 'highlights': ['The chapter demonstrates the process of creating and styling social media icons in a footer, including using font awesome brand class, setting the color, font size, and margin for the icons, and including a media breakpoint for large devices.', 'The icons, including Facebook, Twitter, GitHub, LinkedIn, and Instagram, are created in that order, and the font awesome brand class is used with the respective icon names.', 'The class text-white is added to the row to display the icons with white color, and the links and social media icons are styled by setting the color to white, the font size to 1rem, and a margin of 1rem to separate the icons.', 'A media breakpoint is included to target large devices, where the font size of the icons is set to 1.7 or 1.6, ensuring the content fits nicely on different screen widths, as shown on small and medium devices.']}, {'end': 17108.964, 'start': 16598.723, 'title': 'Responsive design and content styling', 'summary': 'Involves fixing spacing and creating a responsive layout for social media icons and footer content, including creating columns and styling for company information and links.', 'duration': 510.241, 'highlights': ["Creating a responsive layout for social media icons and fixing spacing The speaker fixes the spacing issue at the bottom of the page by adding a class 'mbMd0' to the HTML, resulting in a fully responsive design without the extra space.", 'Creating a responsive layout for footer content The speaker adds a container, row, and columns with specific classes for company information and links, ensuring a responsive layout on different devices.', "Styling company information and headings The speaker styles the company name heading using 'h5' with classes 'text capitalize' and 'font-weight bold', and adds a styled line and paragraph below it for company information.", 'Adding links and styling for footer links The speaker adds ordered lists with links for products, useful links, and contacts, ensuring the content matches the layout, and styles the lists accordingly.']}, {'end': 17395.681, 'start': 17109.644, 'title': 'Styling list items and making content responsive', 'summary': 'Details the process of styling list items by changing color, removing underline, and adding space, and ensuring content responsiveness by demonstrating its fitting on different screen devices without writing a single media breakpoint.', 'duration': 286.037, 'highlights': ['The chapter begins by styling the list items, setting the display to block, removing the list style type, setting the position to relative, and styling the links within the list items to white with no text decoration.', "The next step involves adding the 'company list' class to the list items in the HTML, resulting in the styled list items with white color and no underline.", 'The process also includes ensuring that the links turn to the primary color when hovered, and adding margin top to create space between the social media content and company info.', 'The demonstration of content responsiveness showcases its fitting on various screen devices including medium, small, and larger devices, without the need to write individual media breakpoints.']}, {'end': 17836.072, 'start': 17397, 'title': 'Responsive footer styling', 'summary': 'Covers adding the mx auto class for horizontal centering on columns, creating the copyright info section for the footer, styling the content and ensuring full responsiveness with specific details on color settings and padding, and inspecting the layout on different screen devices.', 'duration': 439.072, 'highlights': ['The chapter covers adding the MX Auto class for horizontal centering on columns. The MX Auto class is added to all columns for horizontal centering.', 'Creating the copyright info section for the footer with specific HTML and CSS classes. Creation of specific HTML and CSS classes for the copyright info section within the footer.', 'Styling the copyright content with specific color settings, font-weight, and link styles. Setting specific color, font-weight, and link styles for the copyright content.', 'Ensuring full responsiveness by adding padding and hover effect to the footer content. Adding padding and hover effect to the footer content to ensure full responsiveness.', 'Inspecting the layout on different screen devices to ensure proper fitting. Inspecting the layout on various screen devices to ensure proper fitting and responsiveness.']}, {'end': 18141.342, 'start': 17838.353, 'title': 'Creating back to top button', 'summary': 'Details the process of creating a back to top button in html, including adding a purple button with a chevron icon, positioning and styling the button, and finally centering the icon within the button, ultimately resulting in a functioning back to top button.', 'duration': 302.989, 'highlights': ['The process of creating a back to top button in HTML, including adding a purple button with a Chevron icon, positioning and styling the button, and finally centering the icon within the button. HTML, purple button, Chevron icon, positioning and styling, centering the icon', "The button's positioning is set to fixed, with a width and height of 3rem, and positioned at 1.875rem from the right and bottom, with a Z index of 9999. position: fixed, width: 3rem, height: 3rem, position from right: 1.875rem, position from bottom: 1.875rem, Z index: 9999", "The icon within the button is styled with a white color, a font size of 1rem, and positioned at the center of the button using a mixing called 'absolute center'. icon styled: white color, font size: 1rem, positioned at center using 'absolute center' mixing"]}], 'duration': 1911.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/iJKCj8uAHz8/pics/iJKCj8uAHz816229924.jpg', 'highlights': ['Details process of creating social media footer icons with specific HTML structure and font awesome brand class.', 'Demonstrates creating and styling social media icons including Facebook, Twitter, GitHub, LinkedIn, and Instagram.', "Fixes spacing issue at the bottom of the page by adding a class 'mbMd0' to the HTML for a fully responsive design.", "Styles company information and headings using 'h5' with classes 'text capitalize' and 'font-weight bold'.", 'Covers adding the MX Auto class for horizontal centering on columns and creating the copyright info section for the footer.', 'Creates a back to top button in HTML, including adding a purple button with a Chevron icon, positioning, and styling the button.']}], 'highlights': ['Creating a portfolio website using Bootstrap 5 and SaaS, with a focus on setting up the SaaS environment, building a multipurpose layout for a fake company, and showcasing services, testimonials, frequently asked questions, and latest work.', 'Installing Node.js is crucial for running JavaScript on the server and ensuring a fully responsive layout across various screen devices.', 'Override Bootstrap Default Colors The chapter discusses overriding default colors in Bootstrap, including replacing blue with purple and pink, changing the accordion button to a plus icon, and modifying primary and secondary colors in the variables file, resulting in changes reflected in the layout.', 'Creating a responsive navbar following Bootstrap documentation, including specific classes like container fluid and container.', 'Creating a visually appealing video intro with styling, using bootstrap positioning utilities, and implementing a javascript lightbox for videos.', 'Enabling autoplay videos enhances user engagement and creates an interactive experience.', 'The process involves styling and duplicating the carousel items for multiple clients with specific instructions for each client name and role.', 'The section is demonstrated to be fully responsive on various devices without the use of media breakpoints.', 'The chapter illustrates overriding the default values of accordion padding Y and X to 1.5rem, resulting in a visible change in the padding.', 'Demonstrates creating a fully responsive form with specific columns and a styled footer.', 'Details process of creating social media footer icons with specific HTML structure and font awesome brand class.']}