title
Front End Full Course | Front End Development Tutorial | Front End Development Course | Simplilearn

description
🔥 IITM Pravartak Professional Certificate Program In Full Stack Development - MERN (India Only): https://www.simplilearn.com/full-stack-developer-course-and-certification-iitm-pravartak?utm_campaign=SCE-FullstackIITM&utm_medium=DescriptionFF&utm_source=youtube 🔥Post Graduate Program In Cyber Security: https://www.simplilearn.com/pgp-cyber-security-certification-training-course?utm_campaign=EthicalhackingScribe&utm_medium=DescriptionFirstFold&utm_source=youtube 🔥Caltech Coding Bootcamp(US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=FEFCJun22-Q8NPQ2RgWyg&utm_medium=DescriptionFF&utm_source=youtube This video on Front End Development covers all the important front-end development tools and technologies. Front end development is the part of web development that codes and creates front-end elements of a website, which are features that are directly accessible by the end-user or client. This Frontend Development Full Course covers the concepts of Git, HTML, CSS, JavaScript, React and Angular. Below are the topics covered in this video: 00:00:00 Introduction 00:01:40 Git and Github 02:18:03 HTML 02:26:32 HTML Registration Form 02:42:32 HTML Quiz 03:29:38 CSS 06:03:58 JavaScript 08:36:40 ReactJS 09:26:01 Angular ✅Subscribe to our Channel to learn more about the top Technologies: https://bit.ly/2VT4WtH #FronEndFullCourse #FrontEndDeveloper #FrontEndWebDevelopment #FromEndWebDevelopmentCourse #LearnFronEndWebDevelopment #LearnFrontEndWenDevelopmentFromScratch #Simplilearn What is a Front End Developer? A front end developer, also known as a front end web developer, is a professional responsible for the design and implementation of the interface. The users require this interface so that they can access the application in question. A web designer is a professional who creates a website’s appearance and design. And the front end developer makes sure that the design works online by using coding languages such as CSS, HTML, and JavaScript. Front End Developer Roles and Responsibilities If you're wondering what a front end developer does, he must: ✅ Decide web page design and structure ✅ Develop features to enhance the users’ experience ✅ Striking a balance between functional and aesthetic design. ✅ Make sure the web design is smartphone-capable ✅ Build reusable code for future use ✅ Make sure web pages are optimized for best speed and scalability ✅ Employ a diverse selection of markup languages to design web pages ✅ Keep the brand consist throughout the whole design ➡️ About Post Graduate Program In Full Stack Web Development This program will give you the foundation for building full-stack web apps using the Java programming language. You'll begin with the basics of JavaScript, and then venture into some of the more advanced concepts like Angular, Spring Boot, Hibernate, JSPs, and MVC. Now is the perfect time to get started on your career as a full-stack web developer! ✅ Key Features - Caltech CTME Post Graduate Certificate - Enrolment in Simplilearn’s JobAssist - Receive up to 25 CEUs from Caltech CTME - Simplilearn's JobAssist helps you get noticed by top hiring companies - Attend Masterclasses from Caltech CTME instructors - Live virtual classes led by industry experts, hands-on projects and integrated labs - Online Convocation by Caltech CTME Program Director - 20 lesson-end and 5 phase-end projects - Capstone Project in 4 domains - Caltech CTME Circle Membership - Build your own portfolio on GitHub ✅ Skills Covered - Agile - JAVA - Hibernate and JPA - Spring Core 50 - DevOps - HTML5 and CSS3 - AWS - JavaScript ES6 - Servlets - SOAP and REST - JSP 👉Learn More at: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=FEFCJun22&utm_medium=Description&utm_source=youtube 🔥🔥 Interested in Attending Live Classes? Call Us: IN - 18002127688 / US - +18445327688

detail
{'title': 'Front End Full Course | Front End Development Tutorial | Front End Development Course | Simplilearn', 'heatmap': [{'end': 9557.678, 'start': 8306.779, 'weight': 0.704}], 'summary': 'This front-end development tutorial covers html, css, javascript, git, github, reactjs, and angular, emphasizing practical demonstrations and the importance of each topic in enhancing user experience and website usability. it also discusses the importance of git in coordinating work, tracking project progress, and enabling collaboration, along with detailed insights and solutions for developers in handling merge conflicts.', 'chapters': [{'end': 100.068, 'segs': [{'end': 100.068, 'src': 'embed', 'start': 12.762, 'weight': 0, 'content': [{'end': 17.006, 'text': 'hey guys, welcome to this front-end full course video now.', 'start': 12.762, 'duration': 4.244}, {'end': 21.25, 'text': 'front-end development is one of the most commonly heard phrases today.', 'start': 17.006, 'duration': 4.244}, {'end': 29.318, 'text': 'now, front-end development is basically the part of web development that involves coding and creating the front-end elements of a website.', 'start': 21.25, 'duration': 8.068}, {'end': 33.942, 'text': 'now, the front-end is typically what the end user or the client interacts with.', 'start': 29.318, 'duration': 4.624}, {'end': 37.646, 'text': "so in this video we're going to be learning all about front-end languages and libraries.", 'start': 33.942, 'duration': 3.704}, {'end': 42.344, 'text': "But before we begin, if you haven't subscribed to our channel already,", 'start': 38.462, 'duration': 3.882}, {'end': 45.867, 'text': 'make sure to hit the subscribe button and the bell icon to never miss an update.', 'start': 42.344, 'duration': 3.523}, {'end': 48.869, 'text': "So here's what we'll be learning today.", 'start': 47.448, 'duration': 1.421}, {'end': 57.214, 'text': 'First, we look at a complete tutorial on version control systems that is Git and GitHub.', 'start': 52.151, 'duration': 5.063}, {'end': 64.105, 'text': "Once you're familiar with that, we'll move on to understanding the basic front-end language that is HTML.", 'start': 58.399, 'duration': 5.706}, {'end': 71.652, 'text': "We'll also look at how to implement HTML registration forms and build a simple app using HTML that is the quiz app.", 'start': 65.004, 'duration': 6.648}, {'end': 76.036, 'text': "Moving ahead, we'll look at a detailed tutorial on CSS.", 'start': 72.893, 'duration': 3.143}, {'end': 81.461, 'text': "After that, we'll look at JavaScript and how to add interactivity to our web applications.", 'start': 76.557, 'duration': 4.904}, {'end': 86.798, 'text': 'Now, JavaScript offers some really cool libraries and frameworks for front-end development.', 'start': 82.335, 'duration': 4.463}, {'end': 94.684, 'text': "So first, we learned ReactJS, which is a JavaScript library, and moving ahead, we'll understand how Angular is used to build apps.", 'start': 87.659, 'duration': 7.025}, {'end': 100.068, 'text': "So now that you know what's in store for you, let's go ahead and jump right in.", 'start': 95.965, 'duration': 4.103}], 'summary': 'Front-end full course covers html, css, javascript, reactjs, and angular for web development.', 'duration': 87.306, 'max_score': 12.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12762.jpg'}], 'start': 12.762, 'title': 'Front-end development', 'summary': 'Discusses front-end development, covering html, css, javascript, git, github, reactjs, and angular for building interactive web applications with a focus on html, css, and javascript.', 'chapters': [{'end': 100.068, 'start': 12.762, 'title': 'Front-end development: languages and libraries', 'summary': 'Discusses front-end development, covering html, css, javascript, git, github, reactjs, and angular for building interactive web applications with a focus on html, css, and javascript.', 'duration': 87.306, 'highlights': ['The video covers a complete tutorial on version control systems like Git and GitHub, essential for collaboration and managing code versions.', 'Detailed tutorials on HTML, CSS, and JavaScript are provided for building the front-end elements of a website.', 'It includes creating a simple app using HTML, specifically a quiz app, to demonstrate practical implementation.', 'The chapter explores the usage of JavaScript for adding interactivity to web applications and delves into ReactJS and Angular for building apps.', 'Emphasizes the importance of front-end development as it is what the end user or the client interacts with on a website.']}], 'duration': 87.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12762.jpg', 'highlights': ['Detailed tutorials on HTML, CSS, and JavaScript are provided for building the front-end elements of a website.', 'The video covers a complete tutorial on version control systems like Git and GitHub, essential for collaboration and managing code versions.', 'The chapter explores the usage of JavaScript for adding interactivity to web applications and delves into ReactJS and Angular for building apps.', 'It includes creating a simple app using HTML, specifically a quiz app, to demonstrate practical implementation.', 'Emphasizes the importance of front-end development as it is what the end user or the client interacts with on a website.']}, {'end': 1976.52, 'segs': [{'end': 237.863, 'src': 'embed', 'start': 198.675, 'weight': 1, 'content': [{'end': 204.137, 'text': "We're going to give you a demo and then summarize all of the activities at the end of the presentation.", 'start': 198.675, 'duration': 5.462}, {'end': 207.779, 'text': 'So what is DevOps? Well, this is one of my favorite questions.', 'start': 204.578, 'duration': 3.201}, {'end': 210.34, 'text': 'I love the idea of what DevOps is.', 'start': 207.879, 'duration': 2.461}, {'end': 215.622, 'text': 'So DevOps really is a culture of being able to deliver solutions faster,', 'start': 210.38, 'duration': 5.242}, {'end': 219.524, 'text': 'where your development teams and your operation teams work effectively together.', 'start': 215.622, 'duration': 3.902}, {'end': 227.572, 'text': "The idea is to be able to continuously build out solutions and have testing codes that's built into your solutions so that,", 'start': 219.764, 'duration': 7.808}, {'end': 232.657, 'text': 'no matter where they are in the stage of the integration and deployment lifecycle,', 'start': 227.572, 'duration': 5.085}, {'end': 237.863, 'text': "they're always being tested and you can always have code being ready to be released out.", 'start': 232.657, 'duration': 5.206}], 'summary': 'Devops enables faster solution delivery through collaboration between development and operations teams, with continuous testing and readiness for release.', 'duration': 39.188, 'max_score': 198.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg198675.jpg'}, {'end': 327.321, 'src': 'embed', 'start': 297.51, 'weight': 3, 'content': [{'end': 303.855, 'text': "And what's really great is that the tools are either open source or very, very low in cost.", 'start': 297.51, 'duration': 6.345}, {'end': 307.98, 'text': "In fact, most of the tools that you're seeing in front of you right now are open source tools,", 'start': 303.896, 'duration': 4.084}, {'end': 315.408, 'text': "which means there's no licensing to you and you can actually effectively manage them and implement them within your team right now.", 'start': 307.98, 'duration': 7.428}, {'end': 320.333, 'text': "So let's have a look at some of the dev tools that you have for doing code versioning.", 'start': 315.848, 'duration': 4.485}, {'end': 327.321, 'text': 'And so some of the tools that you may have used in the past include Subversion, Team Foundation Service, and Git.', 'start': 320.433, 'duration': 6.888}], 'summary': 'Most of the tools are open source, cost-effective, and easy to implement for code versioning, including subversion, team foundation service, and git.', 'duration': 29.811, 'max_score': 297.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg297510.jpg'}, {'end': 530.319, 'src': 'embed', 'start': 498.632, 'weight': 5, 'content': [{'end': 504.118, 'text': "Let's look at centralized version control systems and then we'll compare it against distributed version control systems.", 'start': 498.632, 'duration': 5.486}, {'end': 516.111, 'text': 'So a centralized version control system has a central server where all the files are stored and everybody has to check in and check out from that centralized server,', 'start': 504.519, 'duration': 11.592}, {'end': 520.797, 'text': 'and all of the versions are managed within that server environment.', 'start': 516.111, 'duration': 4.686}, {'end': 530.319, 'text': "The problem is that if that central server crashes, which doesn't happen very often, but it can happen, you end up losing all of your files.", 'start': 521.376, 'duration': 8.943}], 'summary': 'Centralized version control systems store files on a central server; risk of data loss if server crashes.', 'duration': 31.687, 'max_score': 498.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg498632.jpg'}, {'end': 699.946, 'src': 'embed', 'start': 675.333, 'weight': 4, 'content': [{'end': 680.915, 'text': "And then finally, one of the things that I really like with Git is that it's not a linear development approach.", 'start': 675.333, 'duration': 5.582}, {'end': 683.316, 'text': "It's not starting from A and going to Z.", 'start': 680.975, 'duration': 2.341}, {'end': 690.559, 'text': "It's a non-linear approach which allows you to have branches that people are working on in parallel to your master branch,", 'start': 683.316, 'duration': 7.243}, {'end': 693.821, 'text': 'where people are actually doing the delivery of the production code.', 'start': 690.559, 'duration': 3.262}, {'end': 696.123, 'text': "So let's step through some of these features.", 'start': 694.321, 'duration': 1.802}, {'end': 699.946, 'text': 'So Git, as you can imagine, the first thing it does is track history.', 'start': 696.743, 'duration': 3.203}], 'summary': 'Git allows non-linear development with parallel branches for production code delivery and tracks history.', 'duration': 24.613, 'max_score': 675.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg675333.jpg'}, {'end': 766.112, 'src': 'embed', 'start': 738.069, 'weight': 0, 'content': [{'end': 742.751, 'text': 'And because of this scale, the collaboration becomes a byproduct of teams working together.', 'start': 738.069, 'duration': 4.682}, {'end': 746.532, 'text': 'And branching just is so much easier within Git.', 'start': 743.151, 'duration': 3.381}, {'end': 751.675, 'text': 'So as you can see, this whole thing leads to a very effective distributed environment.', 'start': 746.813, 'duration': 4.862}, {'end': 756.24, 'text': "So let's step through some of the workflow that we have available for Git.", 'start': 752.375, 'duration': 3.865}, {'end': 766.112, 'text': 'So the way that Git works is that you, as an operator, as a developer, you have the Git client on your local development machine,', 'start': 756.26, 'duration': 9.852}], 'summary': 'Git enables effective collaboration and branching, leading to a distributed environment.', 'duration': 28.043, 'max_score': 738.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg738069.jpg'}, {'end': 887.493, 'src': 'embed', 'start': 862.542, 'weight': 12, 'content': [{'end': 871.565, 'text': "and the way you do it in git is that you can create branches of the master and while you're of the, the main branch, which is called the master,", 'start': 862.542, 'duration': 9.023}, {'end': 875.366, 'text': 'and so each person could be working on their own separate branch and then, when they want to,', 'start': 871.565, 'duration': 3.801}, {'end': 880.448, 'text': 'they can then later merge those branches back into the main master.', 'start': 875.366, 'duration': 5.082}, {'end': 887.493, 'text': 'and all All this time, the main master still works and still able to produce the right code for the customer,', 'start': 880.448, 'duration': 7.045}], 'summary': 'In git, branches allow for independent work, then merging back into the master branch, ensuring the main code remains functional.', 'duration': 24.951, 'max_score': 862.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg862542.jpg'}, {'end': 1013.933, 'src': 'embed', 'start': 961.827, 'weight': 6, 'content': [{'end': 965.229, 'text': "So we'll start by downloading and installing Git on our system.", 'start': 961.827, 'duration': 3.402}, {'end': 967.87, 'text': "We'll then have a look at the Git Bash interface.", 'start': 965.489, 'duration': 2.381}, {'end': 970.132, 'text': "We'll type in some basic Git commands.", 'start': 968.111, 'duration': 2.021}, {'end': 975.275, 'text': "Next we'll create a local repository, that is we'll create a repository on a local machine.", 'start': 970.392, 'duration': 4.883}, {'end': 980.918, 'text': "We'll then connect to a remote repository and finally we'll push the file onto GitHub.", 'start': 975.555, 'duration': 5.363}, {'end': 984.919, 'text': 'First things first, we need to download and install Git.', 'start': 981.198, 'duration': 3.721}, {'end': 989.041, 'text': "So download Git for Windows and I'll select the second link.", 'start': 985.32, 'duration': 3.721}, {'end': 995.784, 'text': "So 2.19.1 which is the most latest version of Git, that's the one we want for Windows system.", 'start': 990.241, 'duration': 5.543}, {'end': 996.864, 'text': 'Choose your version.', 'start': 996.004, 'duration': 0.86}, {'end': 1000.785, 'text': "So mine is a 64-bit system and it's downloading.", 'start': 997.164, 'duration': 3.621}, {'end': 1001.926, 'text': 'So this will take a while.', 'start': 1000.865, 'duration': 1.061}, {'end': 1004.227, 'text': 'So Git is finally downloaded.', 'start': 1002.546, 'duration': 1.681}, {'end': 1006.868, 'text': 'Now we need to install this on our system.', 'start': 1004.807, 'duration': 2.061}, {'end': 1009.389, 'text': 'Click here.', 'start': 1008.888, 'duration': 0.501}, {'end': 1013.933, 'text': "Run So go to next, we don't have to change this path.", 'start': 1010.049, 'duration': 3.884}], 'summary': 'Download and install git, set up local and remote repositories, and push files to github.', 'duration': 52.106, 'max_score': 961.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg961827.jpg'}, {'end': 1097.292, 'src': 'embed', 'start': 1072.06, 'weight': 8, 'content': [{'end': 1079.543, 'text': 'So what help command does is that it provides the manual or the help page for the command just following it.', 'start': 1072.06, 'duration': 7.483}, {'end': 1087.806, 'text': 'So, in case you have any doubts regarding how a command is used, what a command is used for or the various syntax of the command,', 'start': 1080.203, 'duration': 7.603}, {'end': 1089.767, 'text': 'you can always use the help command.', 'start': 1087.806, 'duration': 1.961}, {'end': 1092.848, 'text': "Now there's another syntax for using the help command itself.", 'start': 1089.927, 'duration': 2.921}, {'end': 1097.292, 'text': 'which is git config, dash, dash help enter.', 'start': 1093.348, 'duration': 3.944}], 'summary': "The 'help' command provides manual and syntax for commands; use 'git config --help' for help syntax.", 'duration': 25.232, 'max_score': 1072.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg1072060.jpg'}, {'end': 1287.459, 'src': 'embed', 'start': 1257.279, 'weight': 9, 'content': [{'end': 1261.603, 'text': 'Now we need to link our remote and our local repository.', 'start': 1257.279, 'duration': 4.324}, {'end': 1267.288, 'text': 'So git remote origin and then paste the HTTP link.', 'start': 1262.404, 'duration': 4.884}, {'end': 1275.736, 'text': 'And now that our local repository and our remote repository are linked, we can push our local file onto our remote repository.', 'start': 1267.769, 'duration': 7.967}, {'end': 1283.183, 'text': 'So the command for doing that is git push origin master as we are on the master branch.', 'start': 1276.016, 'duration': 7.167}, {'end': 1285.318, 'text': "And that's done.", 'start': 1284.617, 'duration': 0.701}, {'end': 1287.459, 'text': "So now let's move back to GitHub.", 'start': 1285.878, 'duration': 1.581}], 'summary': 'Link local and remote repository, push files to remote, and switch to github.', 'duration': 30.18, 'max_score': 1257.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg1257279.jpg'}, {'end': 1602.393, 'src': 'embed', 'start': 1569.534, 'weight': 10, 'content': [{'end': 1571.215, 'text': 'And we add in some quick text.', 'start': 1569.534, 'duration': 1.681}, {'end': 1572.215, 'text': 'You can write whatever you want.', 'start': 1571.275, 'duration': 0.94}, {'end': 1573.156, 'text': 'Committing the text file.', 'start': 1572.315, 'duration': 0.841}, {'end': 1576.277, 'text': "It's now actually committed into the git repository.", 'start': 1573.176, 'duration': 3.101}, {'end': 1578.679, 'text': "it's all running locally on your PC.", 'start': 1576.717, 'duration': 1.962}, {'end': 1588.588, 'text': "so we're gonna go make some changes to the file and we're gonna save it and we want to be able to see how we can use git to compare the differences between the two files.", 'start': 1578.679, 'duration': 9.909}, {'end': 1593.653, 'text': "so let's go over and we're gonna make some changes to the info.txt file.", 'start': 1588.588, 'duration': 5.065}, {'end': 1602.393, 'text': "here we are his info.txt, which is going to add in a new line and in the the line address, and we'll save that file and now, when we go to get,", 'start': 1593.653, 'duration': 8.74}], 'summary': 'Using git to compare and track changes in info.txt file.', 'duration': 32.859, 'max_score': 1569.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg1569534.jpg'}], 'start': 100.088, 'title': 'Understanding git in devops', 'summary': 'Discusses challenges faced by developers before using git, the value of git in facilitating collaboration and version control, and upcoming coverage on devops, version control, and git features. it also covers devops concept, continuous integration, version control systems, benefits of using git, its scalability, non-linear approach, and effective collaboration. additionally, it includes essential git commands, installation process, setting up a local git repository, adding files, committing changes, linking to a remote repository, checking git configurations, and repository management.', 'chapters': [{'end': 219.524, 'start': 100.088, 'title': 'Understanding git in devops', 'summary': 'Discusses the challenges faced by developers before using git, the value of git in facilitating effective collaboration and version control for development teams, and the upcoming coverage on devops, version control, and git features.', 'duration': 119.436, 'highlights': ['Git is a tool that addresses the challenge of conflicts and lack of communication among developers, allowing all developers to have access to the code, facilitating effective collaboration for small, medium, and massive applications.', 'The presentation will cover DevOps, version control, centralized and distributed version control, and provide a detailed understanding of Git features, workflow, branches, and commands.', 'DevOps is a culture that aims to deliver solutions faster by promoting effective collaboration between development and operation teams.']}, {'end': 902.205, 'start': 219.764, 'title': 'Devops and version control systems', 'summary': 'Discusses the concept of devops, emphasizing the continuous integration and deployment, the role of version control systems, and the benefits of using git, highlighting its scalability, non-linear approach, and effective collaboration.', 'duration': 682.441, 'highlights': ['Continuous Integration and Deployment in DevOps The chapter emphasizes the importance of continuously building solutions and having testing codes built into them, resulting in a continuous stream of releases and faster delivery of solutions by aligning the dev team with operations and vice versa.', 'Tools in DevOps Environments The tools available in DevOps environments are open source or low in cost, promoting effective management and implementation within teams, with most tools being open source and cost-free.', "Version Control Systems: Subversion, TFS, and Git The chapter introduces version control systems such as Subversion, Team Foundation Service (TFS), and Git, highlighting their functionalities, cost (open source), and the recent rebranding of TFS as Azure DevOps, aligning with Git's distributed server approach.", 'Comparison of Centralized and Distributed Version Control Systems The differences between centralized and distributed version control systems, with the drawbacks of centralized systems, such as the risk of data loss, and the benefits of distributed systems like Git, allowing developers to manage code locally, providing backup and scalability.', 'Benefits of Using Git The advantages of using Git, including its free cost, non-linear approach, scalability, effective collaboration, and easy branching, leading to an efficient distributed environment.', 'Workflow and Branching in Git The workflow and branching process in Git, emphasizing the steps involved in modifying, reviewing, committing, and pushing code to the remote server, along with the freedom and flexibility provided by branching in managing features and merging them back into the main master.']}, {'end': 1097.292, 'start': 902.585, 'title': 'Git commands and installation', 'summary': 'Covers the essential git commands, including git init, add, commit, status, push, pull, add origin, and branch merge, as well as the process of installing git on a windows system, with a focus on version 2.19.1 and basic commands like git --version and git help config.', 'duration': 194.707, 'highlights': ['The chapter covers the essential Git commands, including git init, add, commit, status, push, pull, add origin, and branch merge, as well as the process of installing Git on a Windows system. Covers essential Git commands and the process of installing Git on a Windows system.', 'The latest version of Git for Windows is 2.19.1. Emphasizes the latest version of Git for Windows.', "The command 'git --version' returns the version 2.19.1 on a Windows system. Highlights the use of 'git --version' command to check the Git version on a Windows system.", "The 'git help config' command opens the manual page for the 'config' command, providing assistance and understanding of command usage and syntax. Explains the usage and importance of the 'git help' command for obtaining command-specific assistance and understanding."]}, {'end': 1466.513, 'start': 1097.292, 'title': 'Git demo and setup', 'summary': 'Explains the process of setting up a local git repository, adding files, committing changes, linking to a remote repository on github, and checking git configurations with practical demonstrations and command examples.', 'duration': 369.221, 'highlights': ["The chapter explains the process of setting up a local Git repository and linking it to a remote repository on GitHub. It covers creating a local directory, initializing it with 'git init', creating and adding a text file, linking the local and remote repositories, and pushing the local file to the remote repository.", 'Demonstration of checking and setting global configurations for Git, including username and email address. The demonstration includes checking the Git version, setting global usernames and email addresses, and accessing help screens for Git configurations.', "Practical demonstration of creating a new Git repository on the local system with command examples. It includes creating a new directory, moving into the directory, and initializing it as a Git repository with 'git init'."]}, {'end': 1976.52, 'start': 1466.773, 'title': 'Git repository management', 'summary': 'Explains the process of creating a new file, adding it to a local git repository, connecting it to a remote repository on github, and merging branches, with practical demonstrations and commands used.', 'duration': 509.747, 'highlights': ['The process of creating a new file, adding it to a local Git repository, and committing it is explained with practical commands. Practical demonstration and usage of commands.', 'The steps to connect a local repository to a remote repository on GitHub, including adding the username and pushing the file to the remote repository, are demonstrated. Demonstration of connecting local and remote repositories, adding username, and pushing files.', 'The process of creating multiple files, branching, adding files to a new branch, committing them, and merging the branches is explained with practical commands. Demonstration of creating and managing branches, adding files, committing, and merging branches.']}], 'duration': 1876.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg100088.jpg', 'highlights': ['Git facilitates effective collaboration for small, medium, and massive applications.', 'DevOps culture promotes faster solution delivery through collaboration between dev and ops teams.', 'Continuous Integration and Deployment in DevOps emphasizes continuous building and testing for faster solution delivery.', 'Tools in DevOps environments are open source or low in cost, promoting effective management and implementation within teams.', "Git's advantages include free cost, non-linear approach, scalability, effective collaboration, and easy branching.", 'Distributed version control systems like Git provide backup and scalability compared to centralized systems.', 'The chapter covers essential Git commands and the process of installing Git on a Windows system.', 'The latest version of Git for Windows is 2.19.1.', "The 'git help config' command opens the manual page for the 'config' command, providing assistance and understanding of command usage and syntax.", 'The chapter explains the process of setting up a local Git repository and linking it to a remote repository on GitHub.', 'Practical demonstration and usage of commands for creating a new file, adding it to a local Git repository, and committing it.', 'Demonstration of connecting local and remote repositories, adding username, and pushing files.', 'Demonstration of creating and managing branches, adding files, committing, and merging branches.']}, {'end': 3793.245, 'segs': [{'end': 2027.431, 'src': 'embed', 'start': 1998.683, 'weight': 0, 'content': [{'end': 2004.225, 'text': "The used case we will consider today is of the world's largest sporting goods retail brand, Decathlon.", 'start': 1998.683, 'duration': 5.542}, {'end': 2010.906, 'text': 'Decathlon has 1,600 stores spread in 52 countries with around 100,000 employees.', 'start': 2005.365, 'duration': 5.541}, {'end': 2019.789, 'text': 'The IT team of GitHub consists of 1,000 members that helps Decathlon to bring its shoppers journey to their devices.', 'start': 2012.187, 'duration': 7.602}, {'end': 2027.431, 'text': 'So here, we will first see the problems that they faced and then we shall see how did they sort out that problem.', 'start': 2020.889, 'duration': 6.542}], 'summary': "Decathlon, with 1,600 stores in 52 countries and 100,000 employees, partnered with github's 1,000-member it team to address their challenges.", 'duration': 28.748, 'max_score': 1998.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg1998683.jpg'}, {'end': 2070.668, 'src': 'embed', 'start': 2045.512, 'weight': 1, 'content': [{'end': 2052.737, 'text': 'Then, since there are so many stores located at so many different places, hiring of developers seemed to be a difficult task,', 'start': 2045.512, 'duration': 7.225}, {'end': 2054.958, 'text': 'as a physical workplace was always needed.', 'start': 2052.737, 'duration': 2.221}, {'end': 2064.524, 'text': "So the second problem is, how would they hire developers? Now, let's see how did Decathlon solve these two problems one after the other.", 'start': 2055.697, 'duration': 8.827}, {'end': 2070.668, 'text': 'In the first case, the entire Decathlon shifted from any other remote repository to GitHub.', 'start': 2065.344, 'duration': 5.324}], 'summary': 'Decathlon shifted to github for remote work, solving hiring challenges.', 'duration': 25.156, 'max_score': 2045.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg2045512.jpg'}, {'end': 2189.034, 'src': 'embed', 'start': 2161.812, 'weight': 2, 'content': [{'end': 2166.655, 'text': 'GitHub helps project managers and developers to coordinate better on the project.', 'start': 2161.812, 'duration': 4.843}, {'end': 2174.221, 'text': 'The work can be easily tracked and updated, which makes sure that the project is on schedule and as entitled.', 'start': 2167.556, 'duration': 6.665}, {'end': 2179.264, 'text': 'Second feature is increased safety with packages.', 'start': 2176.482, 'duration': 2.782}, {'end': 2183.027, 'text': 'The packages on GitHub can be published as desired.', 'start': 2180.065, 'duration': 2.962}, {'end': 2189.034, 'text': 'They can be published privately or within a community or can also be published publicly.', 'start': 2183.812, 'duration': 5.222}], 'summary': 'Github improves project coordination and safety with trackable work and customizable package publishing.', 'duration': 27.222, 'max_score': 2161.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg2161812.jpg'}, {'end': 2311.546, 'src': 'embed', 'start': 2239.238, 'weight': 3, 'content': [{'end': 2244.744, 'text': "GitHub uses CodeQL, which is the industry's leading semantic code analysis engine.", 'start': 2239.238, 'duration': 5.506}, {'end': 2249.969, 'text': 'This tends to find risks in the code which other tools tend to miss.', 'start': 2245.425, 'duration': 4.544}, {'end': 2254.434, 'text': 'The last feature we shall see is Easy Code Hosting.', 'start': 2250.87, 'duration': 3.564}, {'end': 2259.259, 'text': 'As the name suggests, the codes and documentations are hosted in one place.', 'start': 2255.355, 'duration': 3.904}, {'end': 2268.912, 'text': 'We also know that there are thousands of repositories on GitHub, so each repository has their own set of tools to release and host the code.', 'start': 2260.137, 'duration': 8.775}, {'end': 2273.123, 'text': "Finally, let's have a look at the competitors of GitHub.", 'start': 2270.12, 'duration': 3.003}, {'end': 2275.505, 'text': 'There are several competitors in the market.', 'start': 2273.783, 'duration': 1.722}, {'end': 2278.767, 'text': 'Here, we have just put the most common ones.', 'start': 2276.125, 'duration': 2.642}, {'end': 2281.57, 'text': 'First is Atlassian Bitbucket.', 'start': 2279.568, 'duration': 2.002}, {'end': 2287.534, 'text': 'Then comes FugBugs, followed by SurroundSCM and GitLab.', 'start': 2282.57, 'duration': 4.964}, {'end': 2291.798, 'text': 'Then we have Buddy and finally followed by Beanstalk.', 'start': 2288.335, 'duration': 3.463}, {'end': 2294.78, 'text': "Let's see the differences between Git and GitHub.", 'start': 2292.218, 'duration': 2.562}, {'end': 2299.262, 'text': 'Git is a software that can be installed directly onto our systems.', 'start': 2295.581, 'duration': 3.681}, {'end': 2303.884, 'text': 'Whereas, GitHub as we saw in the demo is hosted on the cloud.', 'start': 2299.782, 'duration': 4.102}, {'end': 2306.724, 'text': 'Then, Git can be used offline.', 'start': 2304.444, 'duration': 2.28}, {'end': 2311.546, 'text': "We don't typically need an internet connection unless we need to access the GitHub.", 'start': 2307.205, 'duration': 4.341}], 'summary': "Github's codeql finds code risks, hosts codes and docs in one place, competes with atlassian bitbucket, fugbugs, surroundscm, gitlab, buddy, and beanstalk. git can be used offline, while github is cloud-hosted.", 'duration': 72.308, 'max_score': 2239.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg2239238.jpg'}, {'end': 2388.846, 'src': 'embed', 'start': 2335.278, 'weight': 6, 'content': [{'end': 2339.682, 'text': 'Whereas, GitHub provides centralized hosting of the code on the cloud.', 'start': 2335.278, 'duration': 4.404}, {'end': 2347.748, 'text': 'Next difference is, Git does not work according to a graphical user interface, while GitHub is a simple graphical interface.', 'start': 2340.202, 'duration': 7.546}, {'end': 2355.711, 'text': 'Next difference is, Git is a command line, so it operates on several commands like commit, merge, push, pull, etc.', 'start': 2348.468, 'duration': 7.243}, {'end': 2361.353, 'text': 'Whereas, GitHub is a web-based service, so it has nothing to do with command line.', 'start': 2356.111, 'duration': 5.242}, {'end': 2368.376, 'text': 'Then, Git is released under the GNU General Public License, which is an open-source license.', 'start': 2361.913, 'duration': 6.463}, {'end': 2372.198, 'text': 'It ensures that the software is free for all its users.', 'start': 2368.956, 'duration': 3.242}, {'end': 2377.58, 'text': 'Whereas, in the case of GitHub, there are two tiers, a free tier and a paid tier.', 'start': 2372.558, 'duration': 5.022}, {'end': 2380.802, 'text': "In the end, let's have a look at the competitors of the two.", 'start': 2378.24, 'duration': 2.562}, {'end': 2388.846, 'text': 'As a competition, Git has Mercurial, Supervision, IBM, Rational Team Concert, and Clearcase.', 'start': 2381.482, 'duration': 7.364}], 'summary': 'Github provides centralized hosting, while git operates via command line. github has free and paid tiers, while git is released under gnu gpl.', 'duration': 53.568, 'max_score': 2335.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg2335278.jpg'}, {'end': 2473.603, 'src': 'embed', 'start': 2446.377, 'weight': 12, 'content': [{'end': 2450.318, 'text': 'Git is one of the most popular distributed version control tools of recent times.', 'start': 2446.377, 'duration': 3.941}, {'end': 2453.318, 'text': 'And, like any other distributed version control tool,', 'start': 2450.698, 'duration': 2.62}, {'end': 2459.24, 'text': 'it allows us to perform various version control tasks without really needing a network connection.', 'start': 2453.318, 'duration': 5.922}, {'end': 2467.601, 'text': 'Before I jump into my demonstration, let me spend some time explaining to you the Git client server working model.', 'start': 2459.76, 'duration': 7.841}, {'end': 2473.603, 'text': 'What does it take for a couple of users to collaborate and start working with Git??', 'start': 2467.922, 'duration': 5.681}], 'summary': 'Git is a popular distributed version control tool enabling offline version control tasks and facilitating collaboration among users.', 'duration': 27.226, 'max_score': 2446.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg2446377.jpg'}, {'end': 2707.35, 'src': 'embed', 'start': 2681.554, 'weight': 10, 'content': [{'end': 2686.076, 'text': 'So this is the HTTPS way of authenticating and sharing repositories.', 'start': 2681.554, 'duration': 4.522}, {'end': 2693.062, 'text': 'Another popular way of sharing repositories or working with each other is called as SSH authentication.', 'start': 2686.556, 'duration': 6.506}, {'end': 2698.145, 'text': 'As many of you would know, SSH means nothing but creation of a private and a public key.', 'start': 2693.462, 'duration': 4.683}, {'end': 2703.348, 'text': 'A bunch of keys, public and private, are created on the client machine.', 'start': 2698.625, 'duration': 4.723}, {'end': 2707.35, 'text': 'While I create a keys, I will be asked for a passphrase.', 'start': 2703.788, 'duration': 3.562}], 'summary': 'Https and ssh are popular ways of authenticating and sharing repositories, involving creation of public and private keys.', 'duration': 25.796, 'max_score': 2681.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg2681554.jpg'}, {'end': 2907.425, 'src': 'embed', 'start': 2876.103, 'weight': 11, 'content': [{'end': 2879.225, 'text': 'so i ended up installing the git bash.', 'start': 2876.103, 'duration': 3.122}, {'end': 2882.466, 'text': 'i can go ahead with all other commands.', 'start': 2879.225, 'duration': 3.241}, {'end': 2889.208, 'text': 'now that i have git bash installed on my system, let me open up a git bash prompt and start using it.', 'start': 2882.466, 'duration': 6.742}, {'end': 2893.471, 'text': 'but before i do anything, I just need to configure it for the first time,', 'start': 2889.208, 'duration': 4.263}, {'end': 2899.757, 'text': 'stating what would be the username and the email ID with which I want the git bash to be configured with.', 'start': 2893.471, 'duration': 6.286}, {'end': 2907.425, 'text': "The command to do that is git config hyphen hyphen global which means that this setting that I'm going to set would be a global setting.", 'start': 2899.977, 'duration': 7.448}], 'summary': 'Installed git bash and configured global settings for username and email id.', 'duration': 31.322, 'max_score': 2876.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg2876103.jpg'}, {'end': 3470.262, 'src': 'embed', 'start': 3447.715, 'weight': 13, 'content': [{'end': 3455.231, 'text': "now that I have my changes the way I wanted, I've checked in all the code changes into my local repository.", 'start': 3447.715, 'duration': 7.516}, {'end': 3461.816, 'text': 'I may want to share my repository with somebody else and work in a collaborative way.', 'start': 3455.231, 'duration': 6.585}, {'end': 3470.262, 'text': 'so the way to do that is, as I mentioned earlier, to host this repository or to push this repository onto a git server.', 'start': 3461.816, 'duration': 8.446}], 'summary': 'Code changes checked in, repository to be shared on git server for collaboration.', 'duration': 22.547, 'max_score': 3447.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg3447715.jpg'}], 'start': 1976.52, 'title': 'Github and git essentials', 'summary': "Details decathlon's github journey, covering its transformative impact on 1,600 stores, 52 countries, and 100,000 employees, explores key differences between git and github and their competitors, discusses github authentication, git bash installation, creating git repositories, making commits, and pushing changes to a git server.", 'chapters': [{'end': 2259.259, 'start': 1976.52, 'title': "Decathlon's github journey", 'summary': "Details decathlon's challenges, adoption of github, and the transformative impact, such as 1,600 stores, 52 countries, 100,000 employees, 1,000 it team members, and github's features like easy project management, increased safety with packages, effective team management, improved code writing, increased code safety, and easy code hosting.", 'duration': 282.739, 'highlights': ["Decathlon has 1,600 stores spread in 52 countries with around 100,000 employees and an IT team of 1,000 members. Decathlon's wide global presence with 1,600 stores across 52 countries and a large employee base of around 100,000, supported by a 1,000-member strong IT team.", "Decathlon shifted from any other remote repository to GitHub, enabling more visibility and contribution across the organization. Decathlon's transition to GitHub led to increased code visibility and contribution across the organization, with the platform serving as an open source community.", 'GitHub provides several access control and collaboration features like wikis and basic task management tools for every project. GitHub offers access control and collaboration features, including wikis and basic task management tools, enhancing coordination and organization within projects.', "GitHub uses CodeQL, the industry's leading semantic code analysis engine, to find risks in the code which other tools tend to miss. GitHub's utilization of CodeQL, a leading semantic code analysis engine, enhances code safety by identifying risks often overlooked by other tools.", 'GitHub provides easy code hosting, consolidating codes and documentations in one place for convenient access and management. GitHub offers a streamlined solution for code hosting, securing codes and documentations in a single location, simplifying accessibility and management.']}, {'end': 2621.84, 'start': 2260.137, 'title': 'Github vs git: key differences and competitors', 'summary': 'Explores the key differences between git and github, including their offline/online operation, user interface, licensing, and the competitors in the market such as atlassian bitbucket, fugbugs, surroundscm, gitlab, buddy, and beanstalk for github, and mercurial, supervision, ibm, rational team concert, and clearcase for git.', 'duration': 361.703, 'highlights': ['GitHub and Git differences: GitHub operates on the cloud, requires an internet connection, and provides centralized hosting, while Git is a software that can be installed directly onto systems, can be used offline, and is independent of GitHub (Importance: 5)', 'GitHub and Git user interface: GitHub offers a simple graphical interface, while Git operates on a command line with commands like commit, merge, push, pull, etc. (Importance: 4)', 'Licensing differences: Git is released under the GNU General Public License, ensuring the software is free for all its users, whereas GitHub has two tiers, a free tier, and a paid tier (Importance: 3)', 'Competitors of GitHub: Atlassian Bitbucket, FugBugs, SurroundSCM, GitLab, Buddy, and Beanstalk are identified as the key competitors for GitHub (Importance: 2)', 'Competitors of Git: Mercurial, Supervision, IBM, Rational Team Concert, and Clearcase are identified as the key competitors for Git (Importance: 1)']}, {'end': 2962.215, 'start': 2622.061, 'title': 'Github authentication and git bash installation', 'summary': 'Discusses the process of github authentication, including https and ssh methods, and the installation and configuration of git bash on windows, covering the latest version 2.19.0 and setting up username and email id.', 'duration': 340.154, 'highlights': ['The chapter discusses the process of GitHub authentication, including HTTPS and SSH methods. It explains the process of authentication through HTTPS and SSH, covering the creation of public and private keys for SSH authentication.', 'The installation and configuration of Git Bash on Windows is covered, including the latest version 2.19.0 and setting up username and email ID. It details the installation and configuration of Git Bash on Windows, specifically version 2.19.0, and the command to configure global username and email ID.', "The process of setting up username and email ID using Git Bash is explained. It explains the process of setting up the username and email ID using Git Bash, highlighting the use of 'git config --global' command for configuration.", 'The chapter explains the process of authentication through HTTPS and SSH. It details the process of authentication through HTTPS and SSH, emphasizing the options for communicating with the Git server.']}, {'end': 3428.649, 'start': 2962.215, 'title': 'Creating git repositories and making commits', 'summary': 'Covers the process of creating a git repository, making commits, and managing changes, including commands like git init, git add, and git commit, with examples of creating and modifying files and viewing commit history.', 'duration': 466.434, 'highlights': ['The chapter covers the process of creating a Git repository, making commits, and managing changes, including commands like git init, git add, and git commit. It provides an overview of the process and commands involved in creating a Git repository, making commits, and managing changes.', 'Examples of creating and modifying files and viewing commit history are provided. The transcript includes examples of using commands like touch to create files, making changes to files, and using git log to view commit history.', 'The commands git init, git add, and git commit are explained in detail, with practical examples of their usage. The transcript provides practical examples and explanations of using git init to initialize a repository, git add to stage changes, and git commit to save changes to the repository.']}, {'end': 3793.245, 'start': 3428.649, 'title': 'Pushing changes to a git server', 'summary': 'Illustrates the process of pushing changes to a git server, including creating a repository on the server, linking the local repository to the server, and pushing the changes, resulting in successful creation and synchronization of the repository and its content, with details on the number of commits and their content.', 'duration': 364.596, 'highlights': ['The process of pushing changes to a Git server, including creating a repository on the server, linking the local repository to the server, and pushing the changes, resulting in successful creation and synchronization of the repository and its content. ', 'Successfully creating a new repository on the server and pushing the content from the local repository to the server. ', 'Detailing the number of commits, their content, and their timestamps, including the hash key or ID for each commit. Two commits made, with specific changes detailed for each commit, along with timestamps.']}], 'duration': 1816.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg1976520.jpg', 'highlights': ['Decathlon has 1,600 stores across 52 countries with around 100,000 employees and a 1,000-member IT team.', 'Decathlon transitioned to GitHub, increasing code visibility and contribution across the organization.', 'GitHub offers access control and collaboration features, enhancing coordination within projects.', 'GitHub uses CodeQL for semantic code analysis, enhancing code safety.', 'GitHub provides easy code hosting, consolidating codes and documentations for convenient access.', 'GitHub operates on the cloud, while Git can be installed directly onto systems and used offline.', 'GitHub offers a simple graphical interface, while Git operates on a command line.', 'Git is released under the GNU General Public License, while GitHub has free and paid tiers.', 'Atlassian Bitbucket, FugBugs, SurroundSCM, GitLab, Buddy, and Beanstalk are key competitors for GitHub.', 'Mercurial, Supervision, IBM, Rational Team Concert, and Clearcase are key competitors for Git.', 'The chapter discusses GitHub authentication through HTTPS and SSH methods.', 'The installation and configuration of Git Bash on Windows, including setting up username and email ID.', 'The process of creating a Git repository, making commits, and managing changes is covered.', 'The process of pushing changes to a Git server and creating a new repository is detailed.']}, {'end': 5026.753, 'segs': [{'end': 3818.516, 'src': 'embed', 'start': 3794.81, 'weight': 2, 'content': [{'end': 3805.553, 'text': 'This completes the first part of the tutorial wherein I create a repository on the client and then I pushed it to the server after creating a repository skeleton on the server.', 'start': 3794.81, 'duration': 10.743}, {'end': 3818.516, 'text': 'Now let me demonstrate to you the SSH configuration that is required for creating a pair of SSH keys and ensuring that I connect to the GitHub server using the SSH mechanism.', 'start': 3806.453, 'duration': 12.063}], 'summary': 'First part of tutorial completed, creating repository and ssh configuration for github server.', 'duration': 23.706, 'max_score': 3794.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg3794810.jpg'}, {'end': 4017.681, 'src': 'embed', 'start': 3995.171, 'weight': 3, 'content': [{'end': 4004.215, 'text': 'alright. so for the second use case, what I would do is create a repository on the server with some content in it and then clone that repository.', 'start': 3995.171, 'duration': 9.044}, {'end': 4007.456, 'text': 'cloning is nothing but making a copy of that repository,', 'start': 4004.215, 'duration': 3.241}, {'end': 4014.92, 'text': 'linking the origin so that I create an exact replica of the repository which is there on the server on my local drive.', 'start': 4007.456, 'duration': 7.464}, {'end': 4017.681, 'text': 'so let me first create a repository on the server.', 'start': 4014.92, 'duration': 2.761}], 'summary': 'Create a repository on the server and clone it for an exact replica on the local drive.', 'duration': 22.51, 'max_score': 3995.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg3995171.jpg'}, {'end': 4307.735, 'src': 'embed', 'start': 4278.481, 'weight': 5, 'content': [{'end': 4281.703, 'text': 'A quick recap of all the git commands that we ran till now.', 'start': 4278.481, 'duration': 3.222}, {'end': 4285.599, 'text': 'git init is used to initialize a repository.', 'start': 4282.196, 'duration': 3.403}, {'end': 4292.804, 'text': "So if at all you're creating a local repository, you can get into any of the folder which is not a git repository and run this command.", 'start': 4286.019, 'duration': 6.785}, {'end': 4300.229, 'text': 'Whenever you run this command, a magical folder by name git gets created in the folder and from that time onwards,', 'start': 4293.164, 'duration': 7.065}, {'end': 4304.052, 'text': 'git will start tracking any changes that happen to that particular folder.', 'start': 4300.229, 'duration': 3.823}, {'end': 4307.735, 'text': 'It also creates a new repository and a branch.', 'start': 4304.533, 'duration': 3.202}], 'summary': 'Recap of git commands: git init creates repository, starts tracking changes, creates branch.', 'duration': 29.254, 'max_score': 4278.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg4278481.jpg'}, {'end': 4474.922, 'src': 'embed', 'start': 4448.914, 'weight': 0, 'content': [{'end': 4454.576, 'text': "However, if your repository has been pushed to the server and you're trying to modify something from history,", 'start': 4448.914, 'duration': 5.662}, {'end': 4458.097, 'text': 'this would have a very bad or adverse effect on all the other.', 'start': 4454.576, 'duration': 3.521}, {'end': 4470.361, 'text': "In case your repository contents are local, you've not pushed your changes to your repository and, if at all, you made some changes to the repository,", 'start': 4462.497, 'duration': 7.864}, {'end': 4474.922, 'text': 'maybe to fix a defect or to include a new feature, and you missed few things.', 'start': 4470.361, 'duration': 4.561}], 'summary': 'Modifying history after pushing can have adverse effects on others.', 'duration': 26.008, 'max_score': 4448.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg4448914.jpg'}, {'end': 4544.764, 'src': 'embed', 'start': 4516.187, 'weight': 4, 'content': [{'end': 4518.928, 'text': 'So there is a git command called git reset.', 'start': 4516.187, 'duration': 2.741}, {'end': 4526.255, 'text': 'This would allow me to go back in history, to go back to any of the snapshot get rid of all this commit history or the commit messages,', 'start': 4519.212, 'duration': 7.043}, {'end': 4529.657, 'text': 'but retain the changes that were made as a part of these commits.', 'start': 4526.255, 'duration': 3.402}, {'end': 4534.859, 'text': 'So if at all, I need to go back in history and go back to this particular commit.', 'start': 4530.097, 'duration': 4.762}, {'end': 4540.282, 'text': 'And however, I just want to get rid of these commits that are there in terms of the commit messages.', 'start': 4535.119, 'duration': 5.163}, {'end': 4544.764, 'text': 'But I want the changes that were there as a part of these commits to still exist.', 'start': 4540.462, 'duration': 4.302}], 'summary': 'Git reset command allows to discard commit history but retain changes.', 'duration': 28.577, 'max_score': 4516.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg4516187.jpg'}, {'end': 4745.797, 'src': 'embed', 'start': 4701.237, 'weight': 6, 'content': [{'end': 4706.399, 'text': "However, do this activity only when you don't push your git repository to the server.", 'start': 4701.237, 'duration': 5.162}, {'end': 4713.883, 'text': 'One other most powerful and useful command while undoing or resetting the history is something called as revert.', 'start': 4707.32, 'duration': 6.563}, {'end': 4716.344, 'text': 'This is a safe way of undoing some things.', 'start': 4714.163, 'duration': 2.181}, {'end': 4724.061, 'text': "Remember what I talked about when exactly you can do a reset? It's only when your changes are local and it has not been pushed to the repository.", 'start': 4716.884, 'duration': 7.177}, {'end': 4745.797, 'text': "Take this scenario wherein let's say I have a git server and I have the changes which are C1, C2, C3 and possibly C4.", 'start': 4724.441, 'duration': 21.356}], 'summary': "Use 'revert' command for safe history undoing if changes are not pushed to the server.", 'duration': 44.56, 'max_score': 4701.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg4701237.jpg'}, {'end': 4841.338, 'src': 'embed', 'start': 4811.028, 'weight': 1, 'content': [{'end': 4813.429, 'text': 'All of them would be affected in an adverse way.', 'start': 4811.028, 'duration': 2.401}, {'end': 4817.132, 'text': 'So, in short, never go back in history.', 'start': 4813.99, 'duration': 3.142}, {'end': 4822.576, 'text': 'If at all you need to undo something, go ahead and put in a new commit to undo something.', 'start': 4817.552, 'duration': 5.024}, {'end': 4824.417, 'text': "Let's take this example.", 'start': 4823.356, 'duration': 1.061}, {'end': 4829.221, 'text': 'Maybe, if at all, developer 1 wants to get rid of C3.', 'start': 4824.858, 'duration': 4.363}, {'end': 4837.016, 'text': "Better way to do that is by adding a new commit which is ahead Say, let's say C5.", 'start': 4830.221, 'duration': 6.795}, {'end': 4841.338, 'text': 'And what does this commit do? This commit possibly gets rid of C3.', 'start': 4837.576, 'duration': 3.762}], 'summary': 'Avoid going back in history; instead, add a new commit to undo changes, like developer 1 getting rid of c3 by adding a new commit, c5, to possibly get rid of c3.', 'duration': 30.31, 'max_score': 4811.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg4811028.jpg'}], 'start': 3794.81, 'title': 'Git operations', 'summary': 'Covers ssh key configuration, repository cloning, making changes, and git history modification, emphasizing caution and best practices for successful authentication and maintaining history integrity.', 'chapters': [{'end': 3994.432, 'start': 3794.81, 'title': 'Ssh key configuration tutorial', 'summary': 'Covers creating and configuring ssh keys for connecting to github, including creating a key pair, adding the public key to the server, and testing the ssh connection, ensuring successful authentication.', 'duration': 199.622, 'highlights': ['The tutorial covers creating a pair of SSH keys using the RSA mechanism and adding the public key to the GitHub server for authentication.', "The SSH key pair is created in the user's home directory under the .ssh folder, and the public key is added to the GitHub server settings for successful authentication.", "After adding the SSH key, the user tests the SSH connection using 'SSH -T git@github.com' to ensure successful authentication using the passphrase."]}, {'end': 4415.462, 'start': 3995.171, 'title': 'Cloning a repository and making changes', 'summary': 'Discusses creating a repository on the server, cloning it to the local drive, making changes, and pushing them back to the server using ssh, while also providing a recap of essential git commands.', 'duration': 420.291, 'highlights': ['Creating a repository on the server and cloning it to the local drive The speaker demonstrates creating a new repository on the server and then cloning it to the local drive using the SSH URL, resulting in an exact replica of the repository on the local drive.', "Adding a new file to the cloned repository and pushing changes to the server The process of adding a new file to the cloned repository, committing the changes, and pushing them to the server using the 'git push' command is explained, resulting in the successful addition of the new file and commit to the server.", "Recap of essential git commands A comprehensive recap of essential git commands including 'git init', 'git add', 'git commit', 'git status', 'git log', 'git add remote origin', 'git push', and 'git clone' is provided, showcasing their respective functionalities and use cases."]}, {'end': 4724.061, 'start': 4415.462, 'title': 'Git history modification', 'summary': 'Provides insights into modifying git history, including using git reset to go back in history, retaining changes, and using revert as a safe way to undo actions, emphasizing the caution of performing these actions only on local changes that have not been pushed to the repository.', 'duration': 308.599, 'highlights': ["The command 'git reset' allows going back in history and getting rid of commit messages while retaining the changes made as a part of those commits. The 'git reset' command enables going back in history and eliminating commit messages while preserving the changes made as part of those commits, providing a way to clean up history and retain the relevant changes.", 'The cautionary note to use git history modification commands only on local changes that have not been pushed to the repository to avoid adverse effects on collaborators. Emphasizing the importance of using git history modification commands only on local changes to prevent adverse effects on collaborators, ensuring that changes are not pushed to the repository before making modifications.', "The mention of 'revert' as a powerful and safe way to undo actions in Git, providing an alternative for undoing changes without affecting collaborators. Introduction of 'revert' as a powerful and safe method for undoing actions in Git without affecting collaborators, offering an alternative to undo changes safely within the local environment."]}, {'end': 5026.753, 'start': 4724.441, 'title': 'Git revert command', 'summary': 'Explains the importance of not going back in history in git, recommends using the git revert command to undo commits, and demonstrates how to use it, emphasizing the creation of a new commit to undo changes and maintain history integrity.', 'duration': 302.312, 'highlights': ['The importance of not going back in history in git It is emphasized that going back in history in git can adversely affect collaborative work, and it is recommended to never modify history but instead add new commits to undo changes. This is crucial for maintaining the integrity of the git history when working collaboratively.', 'Recommendation to use git revert command to undo commits The chapter recommends using the git revert command to undo commits, highlighting that it safely adds a new commit to undo changes and maintains a forward-moving git history. This approach ensures that collaborative work can progress without adverse effects.', 'Demonstration of using git revert command to undo a commit A demonstration of using the git revert command to undo a commit is provided, showcasing how it safely adds a new commit to undo changes and maintains the integrity of the git history. This exemplifies the process of undoing a specific commit while keeping the history intact.']}], 'duration': 1231.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg3794810.jpg', 'highlights': ['The cautionary note to use git history modification commands only on local changes that have not been pushed to the repository to avoid adverse effects on collaborators.', 'The importance of not going back in history in git It is emphasized that going back in history in git can adversely affect collaborative work, and it is recommended to never modify history but instead add new commits to undo changes.', 'The tutorial covers creating a pair of SSH keys using the RSA mechanism and adding the public key to the GitHub server for authentication.', 'Creating a repository on the server and cloning it to the local drive The speaker demonstrates creating a new repository on the server and then cloning it to the local drive using the SSH URL, resulting in an exact replica of the repository on the local drive.', "The command 'git reset' allows going back in history and getting rid of commit messages while retaining the changes made as a part of those commits.", "Recap of essential git commands A comprehensive recap of essential git commands including 'git init', 'git add', 'git commit', 'git status', 'git log', 'git add remote origin', 'git push', and 'git clone' is provided, showcasing their respective functionalities and use cases.", "The mention of 'revert' as a powerful and safe way to undo actions in Git, providing an alternative for undoing changes without affecting collaborators."]}, {'end': 5989.211, 'segs': [{'end': 5070.889, 'src': 'embed', 'start': 5028.373, 'weight': 0, 'content': [{'end': 5035.596, 'text': 'Now that we have acquainted ourselves with few of those basic git commands, let me get into very, very interesting topic regarding git,', 'start': 5028.373, 'duration': 7.223}, {'end': 5036.556, 'text': 'which is about branching.', 'start': 5035.596, 'duration': 0.96}, {'end': 5045.382, 'text': 'The topic is interesting because Git deals with branches in a completely different way compared to any other version control tool.', 'start': 5037.179, 'duration': 8.203}, {'end': 5055.506, 'text': 'In most of the version control tools, whenever you create a new branch, a complete copy or a subset of the whole repository is created, which,', 'start': 5046.282, 'duration': 9.224}, {'end': 5064.109, 'text': "in my opinion, is very, very cost inefficient, because it's a very, very expensive operation, both in terms of time and the disk space.", 'start': 5055.506, 'duration': 8.603}, {'end': 5070.889, 'text': 'However in Git You just create a very, very lightweight mobile pointer whenever you create a branch.', 'start': 5064.71, 'duration': 6.179}], 'summary': 'Git uses lightweight pointers for branching, unlike other tools, reducing time and disk space usage.', 'duration': 42.516, 'max_score': 5028.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5028373.jpg'}, {'end': 5245.938, 'src': 'embed', 'start': 5218.053, 'weight': 5, 'content': [{'end': 5220.595, 'text': 'that is here all right.', 'start': 5218.053, 'duration': 2.542}, {'end': 5228.861, 'text': 'so at this stage let me go ahead and create a new branch, and the command for creating new branch is git branch.', 'start': 5220.595, 'duration': 8.266}, {'end': 5230.242, 'text': 'name of the branch.', 'start': 5228.861, 'duration': 1.381}, {'end': 5237.368, 'text': 'so let me name my branch as bangalore branch, blr branch, and this created a branch,', 'start': 5230.242, 'duration': 7.126}, {'end': 5242.171, 'text': "but i don't see any changes in the folder structure or in the file that exists here.", 'start': 5237.368, 'duration': 4.803}, {'end': 5245.938, 'text': "i've just created this branch, so, if at all, i do a git Branch.", 'start': 5242.171, 'duration': 3.767}], 'summary': "Created a new branch named 'bangalore branch' using git branch command.", 'duration': 27.885, 'max_score': 5218.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5218053.jpg'}, {'end': 5366.658, 'src': 'embed', 'start': 5335.243, 'weight': 9, 'content': [{'end': 5336.624, 'text': 'That is the content of this file.', 'start': 5335.243, 'duration': 1.381}, {'end': 5341.138, 'text': "And I'm creating all this new file in this BLR branch.", 'start': 5337.836, 'duration': 3.302}, {'end': 5343.36, 'text': 'So I would say git add dot.', 'start': 5341.539, 'duration': 1.821}, {'end': 5353.127, 'text': 'And I would say git commit hyphen m Bangalore branch commit.', 'start': 5344.421, 'duration': 8.706}, {'end': 5356.45, 'text': 'All right.', 'start': 5356.129, 'duration': 0.321}, {'end': 5363.695, 'text': "If you see this, now I have an address dot text which is there only in the Bangalore branch that I'm presently on.", 'start': 5356.89, 'duration': 6.805}, {'end': 5366.658, 'text': 'Now let me switch back to my master branch.', 'start': 5364.015, 'duration': 2.643}], 'summary': 'Creating a new file in blr branch, adding and committing changes before switching back to master branch.', 'duration': 31.415, 'max_score': 5335.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5335243.jpg'}, {'end': 5766.112, 'src': 'embed', 'start': 5741.336, 'weight': 10, 'content': [{'end': 5748.242, 'text': 'so I would go ahead and delete this locally as well as push it on the server so that it gets deleted from the server as well.', 'start': 5741.336, 'duration': 6.906}, {'end': 5750.663, 'text': 'So delete branch locally.', 'start': 5748.702, 'duration': 1.961}, {'end': 5756.707, 'text': 'The command is git branch-d and the name of the branch.', 'start': 5750.743, 'duration': 5.964}, {'end': 5762.33, 'text': "Only thing you need to ensure is that you should not be currently on that branch which you're trying to delete.", 'start': 5757.607, 'duration': 4.723}, {'end': 5766.112, 'text': "So I would say git branch and I'm presently in the master branch.", 'start': 5762.79, 'duration': 3.322}], 'summary': "Delete branch locally using 'git branch -d ' command.", 'duration': 24.776, 'max_score': 5741.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5741336.jpg'}, {'end': 5882.157, 'src': 'embed', 'start': 5851.235, 'weight': 3, 'content': [{'end': 5854.176, 'text': 'and once you finish off your task, go ahead and delete the branch.', 'start': 5851.235, 'duration': 2.941}, {'end': 5855.936, 'text': 'And before you delete the branch,', 'start': 5854.556, 'duration': 1.38}, {'end': 5862.439, 'text': 'please ensure that you merge in the branches so that you get in or take in the work that was done as a part of that particular branch.', 'start': 5855.936, 'duration': 6.503}, {'end': 5866.034, 'text': 'To summarize, the git branching commands are as follows.', 'start': 5863.234, 'duration': 2.8}, {'end': 5867.615, 'text': 'To create a new branch,', 'start': 5866.375, 'duration': 1.24}, {'end': 5877.616, 'text': 'you issue a command git branch the name of the branch and this would automatically spin off or create a new branch from the existing branch from where you issue this command.', 'start': 5867.615, 'duration': 10.001}, {'end': 5882.157, 'text': 'If you are on the master branch and if you execute this command git branch,', 'start': 5878.157, 'duration': 4}], 'summary': "Git branching involves creating, merging, and deleting branches to manage work. use 'git branch' command to create a new branch from the existing one.", 'duration': 30.922, 'max_score': 5851.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5851235.jpg'}, {'end': 5951.068, 'src': 'embed', 'start': 5887.578, 'weight': 7, 'content': [{'end': 5893.803, 'text': 'Once you create a new branch, in order to get into this branch, you would type in git check out the name of the branch.', 'start': 5887.578, 'duration': 6.225}, {'end': 5899.284, 'text': 'This would automatically switch the file system snapshot between different branches.', 'start': 5894.723, 'duration': 4.561}, {'end': 5904.366, 'text': 'Now the branches that are created are by default created on the local repository.', 'start': 5899.765, 'duration': 4.601}, {'end': 5913.868, 'text': 'In case you want to push any specific branch onto the server you would have to issue a command get push hyphen u origin and the name of the branch.', 'start': 5904.846, 'duration': 9.022}, {'end': 5918.849, 'text': 'So this will ensure that the contents of the new branch are pushed onto the server.', 'start': 5914.248, 'duration': 4.601}, {'end': 5927.887, 'text': 'At any time If you want to list out all existing branches on your local repositories, the command would be git branch hyphen av.', 'start': 5919.349, 'duration': 8.538}, {'end': 5932.57, 'text': "Assuming that you did all your work in a new branch and you're happy with the changes,", 'start': 5928.247, 'duration': 4.323}, {'end': 5935.792, 'text': 'you would want to bring back those changes into the master branch.', 'start': 5932.57, 'duration': 3.222}, {'end': 5943.156, 'text': 'The command to merge the contents of any new branch into a master branch would be git merge and the name of the branch.', 'start': 5936.232, 'duration': 6.924}, {'end': 5951.068, 'text': 'This would automatically merge the branch contents that you specified into the branch on which you currently reside.', 'start': 5943.777, 'duration': 7.291}], 'summary': 'Creating, switching, pushing, and merging branches in git.', 'duration': 63.49, 'max_score': 5887.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5887578.jpg'}], 'start': 5028.373, 'title': 'Git branching', 'summary': 'Discusses the efficiency of git branching, highlighting the lightweight nature of branches, cost inefficiency of other version control tools, and the process of creating, managing, and linking branches in git, emphasizing the importance of branch-specific work and commands for creating, pushing, merging, and deleting branches.', 'chapters': [{'end': 5218.053, 'start': 5028.373, 'title': 'Git branching overview', 'summary': 'Discusses the efficiency of git branching, highlighting the lightweight nature of branches, cost inefficiency of other version control tools, and the process of creating, working with, merging, and deleting branches in git, emphasizing the non-replication of the repository when creating a branch and the importance of performing branch-specific work.', 'duration': 189.68, 'highlights': ['Git creates lightweight mobile pointers for branches, making them cost efficient in terms of time and disk space, unlike other version control tools.', 'Branches in Git are inexpensive and efficient, allowing the creation of numerous branches without significant resource consumption.', 'The process of working with branches in Git involves creating, performing branch-specific work, merging back into the base branch, and then deleting the branch, ensuring a streamlined and organized workflow.', 'Creating branches in Git involves a lightweight process without replicating the entire repository, leading to efficient resource utilization and flexibility in branch management.', "In Git, the creation of branches does not involve the creation of a complete copy or subset of the whole repository, which contrasts with the approach of most other version control tools, highlighting the unique efficiency of Git's branching system."]}, {'end': 5440.303, 'start': 5218.053, 'title': 'Managing branches in git', 'summary': 'Explains the process of creating and switching between branches in git, highlighting the impact on file structure and content, and the role of the git folder in managing branch-specific files and snapshots.', 'duration': 222.25, 'highlights': ["Creating a new branch using 'git branch' command The speaker creates a new branch named 'Bangalore' using the command 'git branch', highlighting the process of branch creation in Git.", "Switching between branches using 'git checkout' The speaker demonstrates switching between the 'master' and 'BLR' branches using the 'git checkout' command, highlighting the process of navigating between branches in Git.", 'Effect of branch creation on file structure and content The speaker explains the impact of creating a new branch on the file structure and content, emphasizing that the new branch initially mirrors the content of the base branch.', 'Role of git folder in managing branch-specific files and snapshots The speaker discusses how the git folder manages branch-specific files and snapshots, illustrating how Git manipulates file system snapshots when navigating between branches.', "Creating and committing branch-specific file changes The speaker creates a new file, 'address.txt', specific to the 'Bangalore' branch, adds and commits the changes, demonstrating the process of managing branch-specific file content in Git."]}, {'end': 5989.211, 'start': 5441.904, 'title': 'Git branching workflow', 'summary': 'Covers the process of creating, linking, pushing, merging, and deleting branches using git, including commands such as creating a new branch, linking local repository with the server, pushing branches to the server, merging branch contents into the master branch, and deleting branches locally and on the server.', 'duration': 547.307, 'highlights': ["The command to delete a branch locally is 'git branch -d' followed by the name of the branch, ensuring not to be currently on that branch, and to delete it from the server, the command is 'git push origin --delete' followed by the name of the branch. This highlights the process of deleting branches both locally and on the server using the specified commands.", "To merge the contents of any new branch into the master branch, the command is 'git merge' followed by the name of the branch, automatically merging the branch contents into the current branch. This emphasizes the process of merging branch contents into the master branch using the 'git merge' command.", "The command to list out all existing branches on the local repository is 'git branch -av', enabling the user to view all branches present in the local repository. This highlights the command to list all existing branches in the local repository, facilitating easy access to branch information."]}], 'duration': 960.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5028373.jpg', 'highlights': ['Git creates lightweight mobile pointers for branches, making them cost efficient in terms of time and disk space, unlike other version control tools.', 'Branches in Git are inexpensive and efficient, allowing the creation of numerous branches without significant resource consumption.', 'Creating branches in Git involves a lightweight process without replicating the entire repository, leading to efficient resource utilization and flexibility in branch management.', 'The process of working with branches in Git involves creating, performing branch-specific work, merging back into the base branch, and then deleting the branch, ensuring a streamlined and organized workflow.', "In Git, the creation of branches does not involve the creation of a complete copy or subset of the whole repository, which contrasts with the approach of most other version control tools, highlighting the unique efficiency of Git's branching system.", "Creating a new branch using 'git branch' command The speaker creates a new branch named 'Bangalore' using the command 'git branch', highlighting the process of branch creation in Git.", "Switching between branches using 'git checkout' The speaker demonstrates switching between the 'master' and 'BLR' branches using the 'git checkout' command, highlighting the process of navigating between branches in Git.", 'Effect of branch creation on file structure and content The speaker explains the impact of creating a new branch on the file structure and content, emphasizing that the new branch initially mirrors the content of the base branch.', 'Role of git folder in managing branch-specific files and snapshots The speaker discusses how the git folder manages branch-specific files and snapshots, illustrating how Git manipulates file system snapshots when navigating between branches.', "Creating and committing branch-specific file changes The speaker creates a new file, 'address.txt', specific to the 'Bangalore' branch, adds and commits the changes, demonstrating the process of managing branch-specific file content in Git.", "The command to delete a branch locally is 'git branch -d' followed by the name of the branch, ensuring not to be currently on that branch, and to delete it from the server, the command is 'git push origin --delete' followed by the name of the branch. This highlights the process of deleting branches both locally and on the server using the specified commands.", "To merge the contents of any new branch into the master branch, the command is 'git merge' followed by the name of the branch, automatically merging the branch contents into the current branch. This emphasizes the process of merging branch contents into the master branch using the 'git merge' command.", "The command to list out all existing branches on the local repository is 'git branch -av', enabling the user to view all branches present in the local repository. This highlights the command to list all existing branches in the local repository, facilitating easy access to branch information."]}, {'end': 8269.021, 'segs': [{'end': 6084.793, 'src': 'embed', 'start': 6033.619, 'weight': 1, 'content': [{'end': 6037.24, 'text': 'We are going to talk about what exactly is Git version control system.', 'start': 6033.619, 'duration': 3.621}, {'end': 6043.462, 'text': 'We also going to talk about what exactly is the basic Git commands used in Git.', 'start': 6037.76, 'duration': 5.702}, {'end': 6049.104, 'text': 'And then we are going to talk about that what exactly is a merge conflict all about.', 'start': 6044.182, 'duration': 4.922}, {'end': 6057.587, 'text': 'And then the different type of merge conflicts which we encounter while doing any kind of merging or any kind of modifications.', 'start': 6050.124, 'duration': 7.463}, {'end': 6065.115, 'text': 'and then how to resolve these merge conflicts faced by a particular individual or a particular developer.', 'start': 6058.524, 'duration': 6.591}, {'end': 6072.687, 'text': 'And then the last one is that the various git commands which is involved in resolving these conflicts.', 'start': 6066.397, 'duration': 6.29}, {'end': 6081.651, 'text': 'And then we will be going on with a small demo to better understand that how these conflicts can be resolved altogether.', 'start': 6073.925, 'duration': 7.726}, {'end': 6084.793, 'text': "Right So let's first of all talk about that.", 'start': 6082.311, 'duration': 2.482}], 'summary': 'Discussion on git version control, basic commands, merge conflicts, and resolution process, followed by a demo.', 'duration': 51.174, 'max_score': 6033.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg6033619.jpg'}, {'end': 6202.169, 'src': 'embed', 'start': 6175.921, 'weight': 0, 'content': [{'end': 6183.966, 'text': "Now it's mainly used for source code management here in a particular software development process or a particular team here.", 'start': 6175.921, 'duration': 8.045}, {'end': 6190.389, 'text': "So it's a very important and in fact a key tool for any kind of development project.", 'start': 6184.306, 'duration': 6.083}, {'end': 6196.151, 'text': 'So the development cannot survive without having a Git version control system.', 'start': 6190.769, 'duration': 5.382}, {'end': 6202.169, 'text': 'Now, Git favors both programmers and non-technical users.', 'start': 6197.506, 'duration': 4.663}], 'summary': 'Git is essential for software development, favored by both programmers and non-technical users.', 'duration': 26.248, 'max_score': 6175.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg6175921.jpg'}, {'end': 6373.283, 'src': 'embed', 'start': 6355.405, 'weight': 4, 'content': [{'end': 6368.479, 'text': 'which will definitely help us to do some configurations so that we will be able to have some configurations configured and we will be able to have some author details or some additional parameters.', 'start': 6355.405, 'duration': 13.074}, {'end': 6373.283, 'text': 'So all those things we can configure using this git configure command here.', 'start': 6368.86, 'duration': 4.423}], 'summary': 'Git configure command enables configurations for author details and additional parameters.', 'duration': 17.878, 'max_score': 6355.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg6355405.jpg'}, {'end': 6768.371, 'src': 'embed', 'start': 6735.216, 'weight': 3, 'content': [{'end': 6738.723, 'text': 'Now, these remote repository can be GitHub, Bitbucket or GitLab.', 'start': 6735.216, 'duration': 3.507}, {'end': 6740.265, 'text': 'That is a different story.', 'start': 6739.123, 'duration': 1.142}, {'end': 6746.697, 'text': 'But yes, all your changes will be synced or will be moved from your local repository to the remote repository.', 'start': 6740.325, 'duration': 6.372}, {'end': 6749.494, 'text': 'Right And the last one is a Git pull.', 'start': 6747.379, 'duration': 2.115}, {'end': 6752.556, 'text': 'Git pull is an opposite activity of push here.', 'start': 6749.654, 'duration': 2.902}, {'end': 6760.864, 'text': 'Now you might have seen that some other developers are also doing some check ins or some push activity to the remote repository.', 'start': 6752.937, 'duration': 7.927}, {'end': 6768.371, 'text': 'Now if you still work on an old version of your source code it may cause a lot of problem for you.', 'start': 6761.345, 'duration': 7.026}], 'summary': 'Sync changes from local to remote repository, avoid working on old versions.', 'duration': 33.155, 'max_score': 6735.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg6735216.jpg'}], 'start': 5989.211, 'title': 'Git version control system', 'summary': 'Covers git merge conflicts, version control system overview, repository management basics, managing repositories and remote push, and handling merge conflicts, offering insights and solutions for developers, and emphasizing the importance and usage of git in coordinating work, tracking project progress, and enabling collaboration.', 'chapters': [{'end': 6084.793, 'start': 5989.211, 'title': 'Git merge conflict resolution', 'summary': 'Discusses git merge conflicts, including the common problems faced by developers during check-ins or merge activities, aiming to provide insights and solutions for resolving these conflicts using git version control system.', 'duration': 95.582, 'highlights': ['The chapter covers the basics of Git version control system, including the basic commands used in Git.', 'It explains the concept of merge conflicts and the different types encountered during merging or modifications.', 'The chapter also addresses how to resolve merge conflicts and the various Git commands involved in resolving these conflicts.', 'A small demo is included to demonstrate the resolution of merge conflicts using Git commands.']}, {'end': 6373.283, 'start': 6084.913, 'title': 'Git version control system overview', 'summary': 'Explains the importance and usage of git version control system, highlighting its role in coordinating work, tracking project progress, and enabling collaboration among developers and non-technical users, with the capability to manage multiple projects and source codes. it also touches upon the basic commands for managing a git repository.', 'duration': 288.37, 'highlights': ['Git is a versatile version control system used for storing source code of various programming languages, enabling coordination and tracking of project progress. Git is utilized for storing source code of Java, .NET, Android, Node.js, and other programming languages, facilitating coordination of work and proper tracking of project progress.', 'Git is crucial for any development project, as it supports both programmers and non-technical users and allows multiple collaborators to work together. Git is essential for development projects, supporting both programmers and non-technical users, and enabling collaboration among multiple collaborators.', "The 'git config' command is fundamental for managing git repositories by enabling configuration of author details and other parameters. The 'git config' command allows for configuring author details and additional parameters for managing git repositories."]}, {'end': 7447.559, 'start': 6374.084, 'title': 'Git repository management basics', 'summary': 'Covers essential git commands including git init, git add, git commit, git diff, git merge, git push, and git pull, with a detailed explanation of merge conflicts, their prevention, resolution steps, and related git commands.', 'duration': 1073.475, 'highlights': ['Git merge conflicts: Occur when moving source code between branches, resolved using git merge command and manual resolution if needed. A detailed explanation of merge conflicts, their prevention, resolution steps, and related Git commands.', 'Git push: Syncs commits from local to remote repository, facilitating collaboration and sharing of changes with other developers. Details about the git push command and its role in syncing local commits to a remote repository.', 'Git add and git commit: Moves files from working copy to staging area and permanently preserves changes into the local repository. Explanation of the git add and git commit commands and their role in managing changes in the local repository.', 'Git diff: Used to view differences between files and branches, enabling review of recent modifications before commits. Explanation of the git diff command and its role in comparing file and branch differences for review before commits.', 'Git reset: Allows undoing local changes, resetting conflicted files, and aborting merge processes if resolution is not feasible. Detailed explanation of using git reset to undo changes, reset conflicted files, and abort merge processes.']}, {'end': 7814.22, 'start': 7449.198, 'title': 'Managing git repositories and remote push', 'summary': 'Describes the process of creating and managing git repositories, adding remote origins, pushing changes to remote repositories, and resolving potential merge conflicts, demonstrating the process through two local repositories, highlighting the need to provide credentials for the push activity and the time taken for pushing comments to the remote repository.', 'duration': 365.022, 'highlights': ['The process of creating and managing Git repositories, adding remote origins, and pushing changes to remote repositories is demonstrated, emphasizing the need to provide credentials for the push activity and the time taken for pushing comments to the remote repository', "The chapter highlights the potential merge conflicts when pushing changes from two different local repositories to the central repository, illustrating the need to resolve these conflicts as they represent different developers' machines", 'The need to provide credentials for the push activity is emphasized, with a description of the interactive window prompt for password input, and the time taken for pushing comments to the remote repository is mentioned, depending on network connectivity and the type of changes being uploaded']}, {'end': 8269.021, 'start': 7814.22, 'title': 'Handling git merge conflicts', 'summary': 'Explains the process of resolving git merge conflicts when pushing changes to a remote repository, including steps like git pull, resolving conflicts manually, and pushing the changes, resulting in successful commit a and commit b into the repository.', 'duration': 454.801, 'highlights': ['When pushing changes to a remote repository after a change was pushed from repo A, conflicts arise due to different streams of source code, requiring the activity git pull --reverse origin master to pull changes from the remote repository.', 'To resolve conflicts, options include resolving conflicts manually and using commands like git rebase --continue, git rebase --skip, and git rebase --abort.', 'The process of resolving conflicts manually involves opening the merge tool, navigating through the changes, removing, adding, and editing lines, saving the file, and continuing with the process by running commands like git rebase --continue and git push.', 'After successfully resolving conflicts and making manual modifications, the changes are pushed to the remote repository using the command git push, resulting in both commit A and commit B being present in the repository, confirmed by checking the git log and accessing the GitHub portal.']}], 'duration': 2279.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg5989211.jpg', 'highlights': ['Git is crucial for any development project, supporting both programmers and non-technical users, and enabling collaboration among multiple collaborators.', 'The chapter covers the basics of Git version control system, including the basic commands used in Git.', 'A detailed explanation of merge conflicts, their prevention, resolution steps, and related Git commands.', 'The process of creating and managing Git repositories, adding remote origins, and pushing changes to remote repositories is demonstrated.', "The 'git config' command is fundamental for managing git repositories by enabling configuration of author details and other parameters."]}, {'end': 12560.516, 'segs': [{'end': 9557.678, 'src': 'heatmap', 'start': 8289.084, 'weight': 3, 'content': [{'end': 8294.529, 'text': "First, we'll go through a quick introduction to basic web architecture to understand how the internet works.", 'start': 8289.084, 'duration': 5.445}, {'end': 8298.652, 'text': "Then we'll understand what exactly HTML is.", 'start': 8296.03, 'duration': 2.622}, {'end': 8302.535, 'text': "After that, we'll have a look at what CSS is.", 'start': 8299.713, 'duration': 2.822}, {'end': 8305.778, 'text': "Then we'll go through JavaScript.", 'start': 8304.075, 'duration': 1.703}, {'end': 8314.745, 'text': "And in the end, we'll create a simple web page using HTML and CSS to gain a better understanding of the HTML tags.", 'start': 8306.779, 'duration': 7.966}, {'end': 8317.687, 'text': "So without further ado, let's begin.", 'start': 8315.764, 'duration': 1.923}, {'end': 8325.505, 'text': 'Now what exactly is the basic web architecture? Now web architecture is made up of three essential elements.', 'start': 8318.941, 'duration': 6.564}, {'end': 8330.929, 'text': "That's the website that is the front end of a web application that is visible to the user.", 'start': 8326.346, 'duration': 4.583}, {'end': 8337.993, 'text': 'Then there is the server which constitutes the back end of a web application and holds and manages all the data.', 'start': 8331.629, 'duration': 6.364}, {'end': 8345.337, 'text': "And finally there's the IP address that is the address assigned to a website in order to be accessible on the internet.", 'start': 8338.593, 'duration': 6.744}, {'end': 8348.701, 'text': "First up, let's have a look at what website is.", 'start': 8346.42, 'duration': 2.281}, {'end': 8355.187, 'text': 'So your browser starts by loading the main HTML file and then the CSS and JavaScript.', 'start': 8349.463, 'duration': 5.724}, {'end': 8360.391, 'text': 'The user interacts with the website and is not concerned with the backend of an application.', 'start': 8355.948, 'duration': 4.443}, {'end': 8363.214, 'text': 'Now, secondly, we have the server.', 'start': 8360.812, 'duration': 2.402}, {'end': 8369.138, 'text': "Once you've developed your website, you'll have to host it on your server to make it accessible on the internet.", 'start': 8363.794, 'duration': 5.344}, {'end': 8375.864, 'text': 'Server along with the database contains all the data of a website and facilitates user interaction.', 'start': 8370.079, 'duration': 5.785}, {'end': 8381.698, 'text': "Lastly, there's IP address, which is the third element of the web architecture.", 'start': 8377.717, 'duration': 3.981}, {'end': 8385.76, 'text': 'Now a website is hosted on an IP address.', 'start': 8383.459, 'duration': 2.301}, {'end': 8391.741, 'text': "We put a domain name over that IP address, the same way we put names over people's phone numbers.", 'start': 8386.379, 'duration': 5.362}, {'end': 8396.463, 'text': 'When you type a domain name in the browser, it will give you the server call.', 'start': 8392.762, 'duration': 3.701}, {'end': 8399.484, 'text': 'The server will then send over the website to you.', 'start': 8396.963, 'duration': 2.521}, {'end': 8410.311, 'text': 'Next, what is HTML? HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'start': 8401.846, 'duration': 8.465}, {'end': 8415.415, 'text': 'It defines the structure of websites and formats these web pages.', 'start': 8411.132, 'duration': 4.283}, {'end': 8426.602, 'text': 'So what exactly is CSS then? CSS is a simple design language used for making web pages look more beautiful and presentable.', 'start': 8417.376, 'duration': 9.226}, {'end': 8433.554, 'text': "It can be attached to any HTML element to style it or even position it according to the developer's choice.", 'start': 8427.529, 'duration': 6.025}, {'end': 8444.542, 'text': 'Then you must be wondering what exactly is JavaScript? Now JavaScript is a powerful interpreted language targeted for web development.', 'start': 8436.456, 'duration': 8.086}, {'end': 8449.605, 'text': 'It is used for making web pages interactive and bringing the web pages to life.', 'start': 8445.282, 'duration': 4.323}, {'end': 8453.068, 'text': "So now let's create your first website.", 'start': 8450.786, 'duration': 2.282}, {'end': 8458.449, 'text': 'HTML, short for Hypertext Markup Language,', 'start': 8455.548, 'duration': 2.901}, {'end': 8467.974, 'text': 'is the coding standard for documents designed for web browsers consisting of a series of elements or tags and which can be used to structure a web page.', 'start': 8458.449, 'duration': 9.525}, {'end': 8473.836, 'text': 'These elements can include headings, paragraphs, div containers, tables, and more.', 'start': 8468.414, 'duration': 5.422}, {'end': 8480.499, 'text': 'HTML tags are nested, meaning there are opening and closing tags with the content in between those tags.', 'start': 8474.536, 'duration': 5.963}, {'end': 8486.31, 'text': "So now let's write a simple HTML code that will help you understand the basics of the language.", 'start': 8481.806, 'duration': 4.504}, {'end': 8490.494, 'text': "So for this, I'm using the text editor that is Visual Studio Code.", 'start': 8486.911, 'duration': 3.583}, {'end': 8494.958, 'text': 'You can go ahead and download this text editor from their official website.', 'start': 8490.874, 'duration': 4.084}, {'end': 8501.384, 'text': "So here I've created a simple dot HTML file in my VS Code and I've added the initial HTML files.", 'start': 8495.418, 'duration': 5.966}, {'end': 8504.687, 'text': 'Now, let me explain to you one by one.', 'start': 8502.385, 'duration': 2.302}, {'end': 8510.143, 'text': 'Now, doc type is not so much of a tag, but it is more of an instruction.', 'start': 8505.58, 'duration': 4.563}, {'end': 8517.327, 'text': 'Now, this indicates the browser that the document type to be served to the user is in fact an HTML document.', 'start': 8510.763, 'duration': 6.564}, {'end': 8523.711, 'text': 'Now, this doc type instruction should always be included at the very top of your HTML page.', 'start': 8518.047, 'duration': 5.664}, {'end': 8528.353, 'text': 'Next up, you have the HTML tag that is used to contain all the web pages.', 'start': 8524.431, 'duration': 3.922}, {'end': 8529.994, 'text': 'HTML code right?', 'start': 8528.353, 'duration': 1.641}, {'end': 8534.037, 'text': 'So it contains an opening and closing tag with contents in between them.', 'start': 8530.175, 'duration': 3.862}, {'end': 8537.729, 'text': 'The HTML tag can also have attributes.', 'start': 8535.407, 'duration': 2.322}, {'end': 8543.612, 'text': "Now, for example, there's the lang attribute allowing you to specify the spoken language of the contents of the page.", 'start': 8538.009, 'duration': 5.603}, {'end': 8546.414, 'text': "Followed by the HTML tag, there's the head tag.", 'start': 8544.233, 'duration': 2.181}, {'end': 8554.019, 'text': 'Now, this is the first section of the code that contains all of the information about the web pages properties, links, and more.', 'start': 8546.955, 'duration': 7.064}, {'end': 8559.503, 'text': 'It could have pages title, description, additional meta tags, and CSS code.', 'start': 8554.52, 'duration': 4.983}, {'end': 8563.105, 'text': "So here, I've used the title tag, and let's give a title, say, HTML.", 'start': 8560.164, 'duration': 2.941}, {'end': 8567.308, 'text': 'in 10 minutes.', 'start': 8566.187, 'duration': 1.121}, {'end': 8577.394, 'text': 'Alright, you can also add CSS to the head tag by using the style tag and change the display styles of HTML elements that are being used.', 'start': 8569.389, 'duration': 8.005}, {'end': 8579.975, 'text': 'The next section is the body tag.', 'start': 8578.114, 'duration': 1.861}, {'end': 8589.22, 'text': 'Now the body tag contains all the displayable contents of your web page including headings, paragraphs, div containers, tables and more.', 'start': 8580.535, 'duration': 8.685}, {'end': 8593.762, 'text': 'Now the HTML header tags are used to add headings to a web page.', 'start': 8590.12, 'duration': 3.642}, {'end': 8601.146, 'text': "There are several types of headings available for developers to add to a web page, right? So first up, let's have a look at them.", 'start': 8594.422, 'duration': 6.724}, {'end': 8610.551, 'text': "I'm going to create a simple h1 heading tag and the message I'm displaying is this is the first heading.", 'start': 8601.646, 'duration': 8.905}, {'end': 8613.193, 'text': 'All right.', 'start': 8612.852, 'duration': 0.341}, {'end': 8615.884, 'text': 'After this,', 'start': 8615.484, 'duration': 0.4}, {'end': 8624.731, 'text': "I'm going to add a paragraph tag which creates padding in the top and bottom of the element to help separate the text between each paragraph.", 'start': 8615.884, 'duration': 8.847}, {'end': 8633.037, 'text': "So I'm going to add a p tag and say this is the paragraph tag.", 'start': 8626.012, 'duration': 7.025}, {'end': 8647.178, 'text': 'After this, let me add a simple h2 tag which is another heading tag and say this is the second heading.', 'start': 8638.001, 'duration': 9.177}, {'end': 8653.602, 'text': 'You can also add line breaks which are helpful from time to time.', 'start': 8650.52, 'duration': 3.082}, {'end': 8659.386, 'text': 'If you want to provide a single line break in your content, you can do so by adding the tag.', 'start': 8654.163, 'duration': 5.223}, {'end': 8664.49, 'text': 'So here let me just add one for better understanding.', 'start': 8660.047, 'duration': 4.443}, {'end': 8673.809, 'text': 'Now the HTML div tag defines a division or a section in an HTML document that is used as a container for other HTML elements.', 'start': 8665.325, 'duration': 8.484}, {'end': 8681.153, 'text': 'Now these elements can include content areas, sidebars, page bars, page headers, footers, etc.', 'start': 8674.429, 'duration': 6.724}, {'end': 8687.216, 'text': 'This tag is used to apply styles to HTML elements that cannot be added otherwise.', 'start': 8682.373, 'duration': 4.843}, {'end': 8691.739, 'text': 'We can also make use of the HTML image tag to add images to a web page.', 'start': 8687.877, 'duration': 3.862}, {'end': 8697.643, 'text': 'Now these images in a web page are a very common site and they can make the website look more attractive.', 'start': 8692.2, 'duration': 5.443}, {'end': 8699.965, 'text': 'So for that we can use the image tag.', 'start': 8698.204, 'duration': 1.761}, {'end': 8704.108, 'text': "So let's say img within which I mentioned the source.", 'start': 8700.485, 'duration': 3.623}, {'end': 8711.689, 'text': "I'm adding the HTML logo.", 'start': 8709.747, 'duration': 1.942}, {'end': 8714.271, 'text': 'So let me just mention that here.', 'start': 8711.769, 'duration': 2.502}, {'end': 8721.197, 'text': "And then I'm going to provide width for it and then a specific height.", 'start': 8717.193, 'duration': 4.004}, {'end': 8734.919, 'text': 'Alright. so when you save the file and when you look at the browser, You can see that the first heading is displayed, then your paragraph tag is displayed,', 'start': 8721.217, 'duration': 13.702}, {'end': 8737.121, 'text': 'followed by the second heading and then the image.', 'start': 8734.919, 'duration': 2.202}, {'end': 8742.986, 'text': 'Now, let me show you how you can add styles for some of these headings and paragraph tags.', 'start': 8737.902, 'duration': 5.084}, {'end': 8754.776, 'text': 'So here, back in my first heading tag, let me just say styles and let me change the font of the content that is being displayed,', 'start': 8743.567, 'duration': 11.209}, {'end': 8756.338, 'text': "and I'm gonna change it to career new.", 'start': 8754.776, 'duration': 1.562}, {'end': 8762.021, 'text': 'and for my paragraph tag, let me display the content in italics.', 'start': 8758.075, 'duration': 3.946}, {'end': 8768.13, 'text': "so i'll say font style and make it italics.", 'start': 8762.021, 'duration': 6.109}, {'end': 8776.811, 'text': 'so let me save this, and when i look at the browser, You can see that the font has changed and so has the font style here', 'start': 8768.13, 'duration': 8.681}, {'end': 8781.876, 'text': "So now we've covered a few important HTML tags used to develop a web page.", 'start': 8777.692, 'duration': 4.184}, {'end': 8787.462, 'text': "Now there are many other tags available for almost everything you'd want to add to a web page.", 'start': 8782.397, 'duration': 5.065}, {'end': 8791.967, 'text': 'Now all of these are available on the internet for you and you can use them in your website.', 'start': 8787.982, 'duration': 3.985}, {'end': 8798.679, 'text': "So it's time for us today to talk about something very interesting feature of the HTML, because this particular session,", 'start': 8792.475, 'duration': 6.204}, {'end': 8803.521, 'text': 'which we are recording it for you, it is designed dedicated for HTML based hands on.', 'start': 8798.679, 'duration': 4.842}, {'end': 8811.766, 'text': 'So in this HTML based hands on, we are expecting that all of you are aware about the basic concept of HTML as well as the CSS.', 'start': 8804.222, 'duration': 7.544}, {'end': 8821.911, 'text': 'So this kind of learning is going to help you to understand like how HTML and CSS can connect together while offering you a mini application.', 'start': 8812.246, 'duration': 9.665}, {'end': 8828.213, 'text': "The first application on this track we're going to offer you that is related to your HTML registration page.", 'start': 8822.331, 'duration': 5.882}, {'end': 8836.596, 'text': 'So, as you know, for this particular registration development application, I would like to use the Visual Studio Code, which is one of the very,', 'start': 8829.554, 'duration': 7.042}, {'end': 8839.637, 'text': 'very popular tool provided by Microsoft.', 'start': 8836.596, 'duration': 3.041}, {'end': 8843.618, 'text': 'So this tool, we will be using it for our mini application development.', 'start': 8840.117, 'duration': 3.501}, {'end': 8845.199, 'text': "So let's get started with this.", 'start': 8843.638, 'duration': 1.561}, {'end': 8848.9, 'text': 'So step number one, let me go back and create a new folder now.', 'start': 8845.879, 'duration': 3.021}, {'end': 8851.021, 'text': 'I want to create a new folder name for registration.', 'start': 8849.04, 'duration': 1.981}, {'end': 8856.424, 'text': 'And inside this, I would require two files.', 'start': 8853.643, 'duration': 2.781}, {'end': 8864.087, 'text': 'Number one is called index.html and another one that is called CSS.', 'start': 8856.544, 'duration': 7.543}, {'end': 8866.908, 'text': 'We can say app.css.', 'start': 8864.227, 'duration': 2.681}, {'end': 8872.137, 'text': 'So in index.html file, we want some standard developments.', 'start': 8867.689, 'duration': 4.448}, {'end': 8875.079, 'text': 'So I want to start with my HTML tag.', 'start': 8872.297, 'duration': 2.782}, {'end': 8883.346, 'text': 'So I already have this HTML based autofill code provided by your Visual Studio Code.', 'start': 8875.9, 'duration': 7.446}, {'end': 8890.731, 'text': 'So there are plugins that are available inside this so that you can automatically create the basic structure for this HTML,', 'start': 8883.826, 'duration': 6.905}, {'end': 8894.594, 'text': 'which you can have the HTML tag head tag as well as the body tag.', 'start': 8890.731, 'duration': 3.863}, {'end': 8898.678, 'text': 'And from this point onwards, we will start developing our code now.', 'start': 8895.155, 'duration': 3.523}, {'end': 8902.24, 'text': 'So I want to develop a registration page.', 'start': 8899.378, 'duration': 2.862}, {'end': 8906.303, 'text': 'So in this registration page I will start from my form tag now.', 'start': 8902.36, 'duration': 3.943}, {'end': 8909.625, 'text': 'So inside this form it is saying like form action to something.', 'start': 8906.823, 'duration': 2.802}, {'end': 8917.071, 'text': 'I really do not have any backend so I just leave it as a blank and here I will start with my h1 tag where I want to say register.', 'start': 8910.026, 'duration': 7.045}, {'end': 8945.208, 'text': 'After this register, I want to offer the paragraph tag where I can say please fill this for to register with us, register with okay now.', 'start': 8919.873, 'duration': 25.335}, {'end': 8955.135, 'text': 'after that, i would like to start with horizontal row, so hr, so starting with my horizontal row, and post this because, see,', 'start': 8945.208, 'duration': 9.927}, {'end': 8963.821, 'text': 'we would like to organize our application and now level in this level, for i just want to give the name called fm.', 'start': 8955.135, 'duration': 8.686}, {'end': 8973.267, 'text': "it's just the name, and after this, fn stands for the first name and within this level i would like to use the beta, which is, i would say, the bold.", 'start': 8963.821, 'duration': 9.446}, {'end': 8975.608, 'text': 'Here I will pass first name.', 'start': 8973.927, 'duration': 1.681}, {'end': 8979.371, 'text': 'Bold tag is closed.', 'start': 8978.571, 'duration': 0.8}, {'end': 8979.932, 'text': "It's a label.", 'start': 8979.431, 'duration': 0.501}, {'end': 8983.574, 'text': 'Inside this label, I would like to use input tag.', 'start': 8980.932, 'duration': 2.642}, {'end': 8991.8, 'text': 'Here I will call input tag equal to text and offer few other details also like I say a placeholder.', 'start': 8984.355, 'duration': 7.445}, {'end': 9005.519, 'text': 'That is the placeholder value.', 'start': 9002.196, 'duration': 3.323}, {'end': 9009.282, 'text': 'After this, name equal to fn.', 'start': 9006.079, 'duration': 3.203}, {'end': 9010.703, 'text': 'That is the stat for first name.', 'start': 9009.302, 'duration': 1.401}, {'end': 9012.424, 'text': 'After that, id.', 'start': 9011.423, 'duration': 1.001}, {'end': 9013.805, 'text': 'id is optional.', 'start': 9013.085, 'duration': 0.72}, {'end': 9017.688, 'text': 'But if you want to pass, we will use this id fn.', 'start': 9014.486, 'duration': 3.202}, {'end': 9020.27, 'text': 'id equal to fn.', 'start': 9019.41, 'duration': 0.86}, {'end': 9022.832, 'text': 'And required.', 'start': 9021.191, 'duration': 1.641}, {'end': 9025.354, 'text': 'Because I want this field cannot be blank.', 'start': 9023.593, 'duration': 1.761}, {'end': 9031.419, 'text': 'So this is my first text box where I have this first name with me.', 'start': 9026.155, 'duration': 5.264}, {'end': 9033.614, 'text': 'like that.', 'start': 9033.214, 'duration': 0.4}, {'end': 9038.639, 'text': 'i will go ahead and talk about my next property called password.', 'start': 9033.614, 'duration': 5.025}, {'end': 9043.304, 'text': 'and for password also i would like to have the similar details with me.', 'start': 9038.639, 'duration': 4.665}, {'end': 9051.472, 'text': "so this label, i'll copy and paste it below and this is for your password.", 'start': 9043.304, 'duration': 8.168}, {'end': 9055.636, 'text': "so we're giving the name called psw.", 'start': 9051.472, 'duration': 4.164}, {'end': 9063.96, 'text': 'here we are saying password and input tab will be new text.', 'start': 9055.636, 'duration': 8.324}, {'end': 9070.746, 'text': 'so here I will change input tab equal to password because password field details would not be visible to you.', 'start': 9063.96, 'duration': 6.786}, {'end': 9074.15, 'text': 'please. here will say placeholder.', 'start': 9070.746, 'duration': 3.404}, {'end': 9081.077, 'text': 'I can say enter password name equal to.', 'start': 9074.15, 'duration': 6.927}, {'end': 9085.388, 'text': 'you can give psw ID equal to.', 'start': 9081.077, 'duration': 4.311}, {'end': 9088.75, 'text': 'we can give same PSW.', 'start': 9085.388, 'duration': 3.362}, {'end': 9090.732, 'text': 'so we have got password.', 'start': 9088.75, 'duration': 1.982}, {'end': 9094.895, 'text': 'in a similar line we would like to offer the confirm password fields to.', 'start': 9090.732, 'duration': 4.163}, {'end': 9100.659, 'text': 'I will copy this line and paste it again.', 'start': 9094.895, 'duration': 5.764}, {'end': 9102.341, 'text': 'and here we can say confirm password.', 'start': 9100.659, 'duration': 1.682}, {'end': 9106.644, 'text': 'we can say CPSW again.', 'start': 9102.341, 'duration': 4.303}, {'end': 9113.749, 'text': 'password enter, confirm password.', 'start': 9106.644, 'duration': 7.105}, {'end': 9118.632, 'text': 'CPSW and cpsw.', 'start': 9113.749, 'duration': 4.883}, {'end': 9120.692, 'text': "now it's over.", 'start': 9118.632, 'duration': 2.06}, {'end': 9131.396, 'text': "after this we want to make it as a horizontal row closed and once it is run then we'd like to have the button with this.", 'start': 9120.692, 'duration': 10.704}, {'end': 9132.856, 'text': 'so here is the button.', 'start': 9131.396, 'duration': 1.46}, {'end': 9145.913, 'text': 'we can say register and here in my button i would like to offer the type equal to submit, have equal to submit.', 'start': 9132.856, 'duration': 13.057}, {'end': 9147.073, 'text': "so that's it.", 'start': 9145.913, 'duration': 1.16}, {'end': 9149.314, 'text': 'so this is the simplest form.', 'start': 9147.073, 'duration': 2.241}, {'end': 9150.854, 'text': 'I have it now.', 'start': 9149.314, 'duration': 1.54}, {'end': 9153.755, 'text': 'I would like to see how it really looks like it.', 'start': 9150.854, 'duration': 2.901}, {'end': 9156.156, 'text': 'so from here I would like to open it.', 'start': 9153.755, 'duration': 2.401}, {'end': 9159.237, 'text': 'rebellion finder.', 'start': 9156.156, 'duration': 3.081}, {'end': 9160.958, 'text': "let's open this.", 'start': 9159.237, 'duration': 1.721}, {'end': 9164.255, 'text': 'well, it looks like that, fine.', 'start': 9160.958, 'duration': 3.297}, {'end': 9165.836, 'text': 'so this is what my form is.', 'start': 9164.255, 'duration': 1.581}, {'end': 9176.042, 'text': 'form is ready and now we would like to go back and start developing my css in which i would beautify my form to offer some more details on this.', 'start': 9165.836, 'duration': 10.206}, {'end': 9178.263, 'text': 'well, friends, as we know, the html page is ready.', 'start': 9176.042, 'duration': 2.221}, {'end': 9183.426, 'text': "it's time to go back and start developing a css to beautify my html now.", 'start': 9178.263, 'duration': 5.163}, {'end': 9193.651, 'text': 'so inside the css, i would like to start with the tag which is called body, And inside this body tag I can offer some basic setups,', 'start': 9183.426, 'duration': 10.225}, {'end': 9200.994, 'text': 'but I just want to get the basic background color now, which is called background hyphen color.', 'start': 9193.651, 'duration': 7.343}, {'end': 9203.574, 'text': 'I can just give the name here.', 'start': 9201.774, 'duration': 1.8}, {'end': 9206.015, 'text': "That's a background color.", 'start': 9204.575, 'duration': 1.44}, {'end': 9208.916, 'text': 'The rest of the things, I can just leave it as it is.', 'start': 9206.055, 'duration': 2.861}, {'end': 9216.839, 'text': 'Now, for all the other properties, I can say box sizing, border hyphen box.', 'start': 9209.276, 'duration': 7.563}, {'end': 9231.446, 'text': 'after that container container and in this container we have to offer certain benefits now.', 'start': 9219.918, 'duration': 11.528}, {'end': 9236.589, 'text': 'first thing, you need to understand which are the places i will be using the container.', 'start': 9231.446, 'duration': 5.143}, {'end': 9240.712, 'text': 'so you see here in my index.html file.', 'start': 9236.589, 'duration': 4.123}, {'end': 9245.335, 'text': 'when we talk about form actions and all, okay, we say h1 register.', 'start': 9240.712, 'duration': 4.623}, {'end': 9247.536, 'text': "we haven't used any container right now.", 'start': 9245.335, 'duration': 2.201}, {'end': 9259.689, 'text': "so let's get added the container div class equal to container.", 'start': 9247.536, 'duration': 12.153}, {'end': 9265.831, 'text': 'okay, and this particular div tag will get closed only at the last.', 'start': 9259.689, 'duration': 6.142}, {'end': 9271.453, 'text': 'so this div tag will close at the last here.', 'start': 9265.831, 'duration': 5.622}, {'end': 9277.694, 'text': 'so i want to make the look and feed for this complete container in much more better way.', 'start': 9271.453, 'duration': 6.241}, {'end': 9310.484, 'text': 'so here in my container we want to say margin, auto, press enter here margin, auto, now width 50%, then adding 16px, followed by background color,', 'start': 9277.694, 'duration': 32.79}, {'end': 9318.395, 'text': 'which we want white, then box-shadow, this box-shadow.', 'start': 9310.484, 'duration': 7.911}, {'end': 9338.687, 'text': 'we want to give some all fall origins 20px, continuation to same 20px and 0px and which color we want.', 'start': 9318.395, 'duration': 20.292}, {'end': 9344.19, 'text': 'so I just say RGBA, this rgba.', 'start': 9338.687, 'duration': 5.503}, {'end': 9367.945, 'text': 'just give the value for 0, again 0, again 0, and the value which you want to give to this alpha, because it is always between 0 to 1.', 'start': 9344.19, 'duration': 23.755}, {'end': 9369.166, 'text': 'we are saying 0.7.', 'start': 9367.945, 'duration': 1.221}, {'end': 9369.847, 'text': 'that is an opacity.', 'start': 9369.166, 'duration': 0.681}, {'end': 9375.224, 'text': 'Well, four properties are given.', 'start': 9373.783, 'duration': 1.441}, {'end': 9377.245, 'text': "Now, let's see how it looks.", 'start': 9375.904, 'duration': 1.341}, {'end': 9384.49, 'text': "Yeah, why? Because we haven't added a CSS in my HTML.", 'start': 9380.588, 'duration': 3.902}, {'end': 9386.151, 'text': "So, let's add a CSS.", 'start': 9384.911, 'duration': 1.24}, {'end': 9390.354, 'text': 'So, inside my browser HTML.', 'start': 9386.692, 'duration': 3.662}, {'end': 9394.357, 'text': 'Now, inside my head, let me add link.', 'start': 9391.635, 'duration': 2.722}, {'end': 9401.042, 'text': 'Link rl equal to stylesheet href equal to app.css.', 'start': 9396.018, 'duration': 5.024}, {'end': 9403.043, 'text': "That's it.", 'start': 9402.683, 'duration': 0.36}, {'end': 9404.835, 'text': "Well, let's see.", 'start': 9404.295, 'duration': 0.54}, {'end': 9407.196, 'text': 'There we go.', 'start': 9406.736, 'duration': 0.46}, {'end': 9408.356, 'text': 'Looks better now.', 'start': 9407.596, 'duration': 0.76}, {'end': 9411.057, 'text': 'So this is your container.', 'start': 9409.037, 'duration': 2.02}, {'end': 9413.878, 'text': 'Okay But you can see it as having some shadow.', 'start': 9411.537, 'duration': 2.341}, {'end': 9418.7, 'text': 'I would like to organize this all set of text boxes in much more better way.', 'start': 9414.558, 'duration': 4.142}, {'end': 9428.123, 'text': 'So after this, we want to offer the other properties to like for my input, go back to my app CSS.', 'start': 9419.58, 'duration': 8.543}, {'end': 9431.524, 'text': 'So after this container, we want input.', 'start': 9429.223, 'duration': 2.301}, {'end': 9441.851, 'text': 'input again type equal to text.', 'start': 9433.809, 'duration': 8.042}, {'end': 9459.976, 'text': 'now also to input type equal to password.', 'start': 9441.851, 'duration': 18.125}, {'end': 9467.444, 'text': 'here we offer few things number one, width, which is 100%.', 'start': 9459.976, 'duration': 7.468}, {'end': 9477.432, 'text': 'after, sorry, then padding once again 15 pixels.', 'start': 9467.444, 'duration': 9.988}, {'end': 9480.075, 'text': 'then margin.', 'start': 9477.432, 'duration': 2.643}, {'end': 9492.988, 'text': 'we are offering 5 pixels 0, 22 pixel 0, followed by display display.', 'start': 9480.075, 'duration': 12.913}, {'end': 9500.913, 'text': 'i will say inline block, inline block, followed by border.', 'start': 9492.988, 'duration': 7.925}, {'end': 9502.674, 'text': 'do you want any border?', 'start': 9500.913, 'duration': 1.761}, {'end': 9508.778, 'text': 'so i say none, border, none.', 'start': 9502.674, 'duration': 6.104}, {'end': 9512.98, 'text': 'and background.', 'start': 9508.778, 'duration': 4.202}, {'end': 9514.441, 'text': 'we can offer the color.', 'start': 9512.98, 'duration': 1.461}, {'end': 9524.929, 'text': "so we can say that's it.", 'start': 9514.441, 'duration': 10.488}, {'end': 9528.27, 'text': "let's see in my HTML awesome.", 'start': 9524.929, 'duration': 3.341}, {'end': 9531.911, 'text': 'so this looks more beautiful, more organized.', 'start': 9528.27, 'duration': 3.641}, {'end': 9535.132, 'text': 'so this is your form.', 'start': 9531.911, 'duration': 3.221}, {'end': 9543.274, 'text': 'but I want to make it even more better now because I want to perform the validation and in validation we want to check how the focus will come in.', 'start': 9535.132, 'duration': 8.142}, {'end': 9546.635, 'text': 'so the beautification needs to be added more.', 'start': 9543.274, 'duration': 3.361}, {'end': 9550.636, 'text': 'here we want to offer the same input type text input type password.', 'start': 9546.635, 'duration': 4.001}, {'end': 9557.678, 'text': 'I copy this here now.', 'start': 9550.636, 'duration': 7.042}], 'summary': 'An overview of web architecture, html, css, and a hands-on html registration page development using visual studio code and css for beautification.', 'duration': 28.603, 'max_score': 8289.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg8289084.jpg'}, {'end': 8458.449, 'src': 'embed', 'start': 8386.379, 'weight': 0, 'content': [{'end': 8391.741, 'text': "We put a domain name over that IP address, the same way we put names over people's phone numbers.", 'start': 8386.379, 'duration': 5.362}, {'end': 8396.463, 'text': 'When you type a domain name in the browser, it will give you the server call.', 'start': 8392.762, 'duration': 3.701}, {'end': 8399.484, 'text': 'The server will then send over the website to you.', 'start': 8396.963, 'duration': 2.521}, {'end': 8410.311, 'text': 'Next, what is HTML? HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'start': 8401.846, 'duration': 8.465}, {'end': 8415.415, 'text': 'It defines the structure of websites and formats these web pages.', 'start': 8411.132, 'duration': 4.283}, {'end': 8426.602, 'text': 'So what exactly is CSS then? CSS is a simple design language used for making web pages look more beautiful and presentable.', 'start': 8417.376, 'duration': 9.226}, {'end': 8433.554, 'text': "It can be attached to any HTML element to style it or even position it according to the developer's choice.", 'start': 8427.529, 'duration': 6.025}, {'end': 8444.542, 'text': 'Then you must be wondering what exactly is JavaScript? Now JavaScript is a powerful interpreted language targeted for web development.', 'start': 8436.456, 'duration': 8.086}, {'end': 8449.605, 'text': 'It is used for making web pages interactive and bringing the web pages to life.', 'start': 8445.282, 'duration': 4.323}, {'end': 8453.068, 'text': "So now let's create your first website.", 'start': 8450.786, 'duration': 2.282}, {'end': 8458.449, 'text': 'HTML, short for Hypertext Markup Language,', 'start': 8455.548, 'duration': 2.901}], 'summary': 'Domain names point to ip addresses. html structures web pages. css styles and positions elements. javascript adds interactivity.', 'duration': 72.07, 'max_score': 8386.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg8386379.jpg'}, {'end': 8836.596, 'src': 'embed', 'start': 8812.246, 'weight': 4, 'content': [{'end': 8821.911, 'text': 'So this kind of learning is going to help you to understand like how HTML and CSS can connect together while offering you a mini application.', 'start': 8812.246, 'duration': 9.665}, {'end': 8828.213, 'text': "The first application on this track we're going to offer you that is related to your HTML registration page.", 'start': 8822.331, 'duration': 5.882}, {'end': 8836.596, 'text': 'So, as you know, for this particular registration development application, I would like to use the Visual Studio Code, which is one of the very,', 'start': 8829.554, 'duration': 7.042}], 'summary': 'Learn to connect html and css for a mini application, starting with a registration page using visual studio code.', 'duration': 24.35, 'max_score': 8812.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg8812246.jpg'}, {'end': 9770.194, 'src': 'embed', 'start': 9739.858, 'weight': 6, 'content': [{'end': 9742.78, 'text': 'you see now how the background color is changing now.', 'start': 9739.858, 'duration': 2.922}, {'end': 9745.582, 'text': 'so it is little bit more grayish color.', 'start': 9742.78, 'duration': 2.802}, {'end': 9752.188, 'text': 'so if setup having this html as well as the css together.', 'start': 9745.582, 'duration': 6.606}, {'end': 9760.951, 'text': "so this time we're going to develop another very interesting example, using this html, javascript and css together,", 'start': 9752.188, 'duration': 8.763}, {'end': 9763.712, 'text': 'and that is called working with a quiz application.', 'start': 9760.951, 'duration': 2.761}, {'end': 9766.153, 'text': 'this is one of the very, very interesting project.', 'start': 9763.712, 'duration': 2.441}, {'end': 9770.194, 'text': "we'll be developing it from the scratch and i'm sure that you will enjoy a lot.", 'start': 9766.153, 'duration': 4.041}], 'summary': 'Developing a quiz application using html, javascript, and css, a very interesting project from scratch.', 'duration': 30.336, 'max_score': 9739.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg9739858.jpg'}, {'end': 10596.607, 'src': 'embed', 'start': 10549.89, 'weight': 8, 'content': [{'end': 10551.93, 'text': 'So this is where it comes under my container.', 'start': 10549.89, 'duration': 2.04}, {'end': 10558.092, 'text': 'Now we would like to offer the buttons here in our CSS.', 'start': 10552.85, 'duration': 5.242}, {'end': 10561.792, 'text': 'We want to now offer the button colors.', 'start': 10559.572, 'duration': 2.22}, {'end': 10563.793, 'text': 'So dot.', 'start': 10562.713, 'duration': 1.08}, {'end': 10576.94, 'text': 'btn-grid. well, in index.html file, so we have a call button grid.', 'start': 10565.712, 'duration': 11.228}, {'end': 10577.661, 'text': 'this button grid.', 'start': 10576.94, 'duration': 0.721}, {'end': 10581.664, 'text': 'we would like to start from here btn-grid.', 'start': 10577.661, 'duration': 4.003}, {'end': 10596.607, 'text': 'btn-grid display grid, followed by grid hyphen template columns.', 'start': 10581.664, 'duration': 14.943}], 'summary': 'Offer button colors in css for btn-grid display grid.', 'duration': 46.717, 'max_score': 10549.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg10549890.jpg'}, {'end': 11244.134, 'src': 'embed', 'start': 11181.45, 'weight': 9, 'content': [{'end': 11189.658, 'text': 'now, once it is done, we want to basically go ahead and start creating a set of questions for my application.', 'start': 11181.45, 'duration': 8.208}, {'end': 11193.342, 'text': 'so here we want to provide the questions.', 'start': 11189.658, 'duration': 3.684}, {'end': 11209.789, 'text': 'so we say const questions, const questions equal to array.', 'start': 11193.342, 'duration': 16.447}, {'end': 11218.616, 'text': 'first question which I would like to create it here is called question.', 'start': 11209.789, 'duration': 8.827}, {'end': 11240.072, 'text': 'now, here we will say javascript framework.', 'start': 11218.616, 'duration': 21.456}, {'end': 11244.134, 'text': 'so which of these is a which one of these?', 'start': 11240.072, 'duration': 4.062}], 'summary': 'Creating a set of questions for the application using javascript framework.', 'duration': 62.684, 'max_score': 11181.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg11181450.jpg'}, {'end': 12308.613, 'src': 'embed', 'start': 12266.595, 'weight': 10, 'content': [{'end': 12273.4, 'text': 'here, in this next question, we are just saying resetState the function.', 'start': 12266.595, 'duration': 6.805}, {'end': 12285.727, 'text': 'we are calling it and saying showQuestion.', 'start': 12273.4, 'duration': 12.327}, {'end': 12294.865, 'text': 'and here we are passing this shuffleQuestions, and we are passing this current question index.', 'start': 12285.727, 'duration': 9.138}, {'end': 12296.646, 'text': 'that is what the set.', 'start': 12294.865, 'duration': 1.781}, {'end': 12298.947, 'text': 'next question is offering it to me.', 'start': 12296.646, 'duration': 2.301}, {'end': 12304.27, 'text': 'now, the last function which is left, that is called start game, how the game will start.', 'start': 12298.947, 'duration': 5.323}, {'end': 12308.613, 'text': 'function, start game.', 'start': 12304.27, 'duration': 4.343}], 'summary': 'Function resetstate called to showquestion with shufflequestions and current question index. the start game function initializes the game.', 'duration': 42.018, 'max_score': 12266.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12266595.jpg'}, {'end': 12545.01, 'src': 'embed', 'start': 12514.784, 'weight': 11, 'content': [{'end': 12517.065, 'text': 'and check on a button called start.', 'start': 12514.784, 'duration': 2.281}, {'end': 12518.646, 'text': 'awesome, i could see.', 'start': 12517.065, 'duration': 1.581}, {'end': 12522.108, 'text': 'the first question appears automatically.', 'start': 12518.646, 'duration': 3.462}, {'end': 12524.589, 'text': 'which of these is javascript framework?', 'start': 12522.108, 'duration': 2.481}, {'end': 12528.09, 'text': 'if i select, as usual, my correct answers called react,', 'start': 12524.589, 'duration': 3.501}, {'end': 12534.413, 'text': "now you can see it's automatically making rest of them as a red and not giving me the next button.", 'start': 12528.09, 'duration': 6.323}, {'end': 12545.01, 'text': 'now, as a Prime Minister of India, I am saying Narendra Modi, great, next, and I say 4 multiplied by 3, I say 12, I say next.', 'start': 12534.413, 'duration': 10.597}], 'summary': 'Interactive quiz on javascript framework with 1 correct answer out of 3 questions.', 'duration': 30.226, 'max_score': 12514.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12514784.jpg'}], 'start': 8269.401, 'title': 'Web development with html, css, and javascript', 'summary': 'Covers basic web architecture, html, css, and javascript, including creating a simple web page, designing html forms, developing a quiz application, applying css styles, and scripting in web development. it also includes developing a javascript quiz application with various functions, offering hands-on sessions and practical demonstrations.', 'chapters': [{'end': 9120.692, 'start': 8269.401, 'title': 'Learn html in 10 minutes', 'summary': 'Explains the basic web architecture, essential elements, html, css, and javascript. it also demonstrates the creation of a simple web page using html and css, and offers a hands-on session for creating an html registration page.', 'duration': 851.291, 'highlights': ['HTML is the most widely used markup language for developing and structuring web pages on the internet, defining the structure of websites and formatting web pages. HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'CSS is a simple design language used for making web pages look more beautiful and presentable, allowing attachment to any HTML element for styling and positioning. CSS is a simple design language used for making web pages look more beautiful and presentable.', 'JavaScript is a powerful interpreted language targeted for web development, used for making web pages interactive and bringing them to life. JavaScript is a powerful interpreted language targeted for web development, used for making web pages interactive and bringing them to life.', 'Creation of a simple web page using HTML and CSS to gain a better understanding of HTML tags, including headings, paragraphs, div containers, tables, and more. The chapter demonstrates the creation of a simple web page using HTML and CSS to gain a better understanding of HTML tags.', 'Offering a hands-on session for creating an HTML registration page using Visual Studio Code, including the creation of an HTML file and a CSS file within a new folder. The chapter offers a hands-on session for creating an HTML registration page using Visual Studio Code.']}, {'end': 9739.858, 'start': 9120.692, 'title': 'Html form design and css styling', 'summary': 'Covers the process of creating a simple html form and styling it using css, including setting up the container, input fields, and registration button with specific properties and values.', 'duration': 619.166, 'highlights': ['The chapter covers the process of creating a simple HTML form and styling it using CSS It details the steps involved in creating a basic HTML form and then styling it using CSS.', 'Setting up the container with specific properties and values Explanation of setting up the container with properties like margin, width, background color, box-shadow, and adding a link to the CSS file for styling.', "Styling the input fields with specific properties and values Description of styling the input fields with properties such as width, padding, margin, display, border, and background color to enhance the form's organization and appearance.", "Styling the registration button with specific properties and values Explanation of styling the registration button with properties including background color, color, padding, border, cursor, width, margin, and opacity, as well as adding a hover effect to change the button's appearance."]}, {'end': 10148.716, 'start': 9739.858, 'title': 'Developing a quiz application with html, javascript, and css', 'summary': 'Focuses on developing a quiz application using html, javascript, and css, creating html tags, css classes, and javascript functions to build a quiz interface with answer buttons and control buttons.', 'duration': 408.858, 'highlights': ['Developing a quiz application using HTML, JavaScript, and CSS The chapter discusses developing a quiz application from scratch using HTML, JavaScript, and CSS, emphasizing the use of these technologies for a specific project.', "Creating HTML tags and CSS classes for the quiz interface The instructor explains creating div tags and CSS classes such as 'container', 'btn-grid', and 'controls' for structuring and styling the quiz interface.", "Creating answer buttons and control buttons for the quiz interface The chapter details the creation of answer buttons using 'btn' class and control buttons like 'start' and 'next' with specific class and ID attributes, providing a total of 4 answer buttons and 2 control buttons."]}, {'end': 11434.913, 'start': 10148.716, 'title': 'Css styling and scripting in web development', 'summary': 'Discusses the process of applying css styles to create a visually appealing button grid and container, along with scripting the creation of questions and answers for a quiz application using javascript, and it also includes the code for fetching elements by id and setting up the quiz questions and answers.', 'duration': 1286.197, 'highlights': ['The chapter covers the process of applying CSS styles to create a visually appealing button grid and container. It includes details on setting background colors, border radius, padding, box shadow, and other styling properties for the container and button grid.', 'The chapter also includes scripting the creation of questions and answers for a quiz application using JavaScript. It involves setting up variables for start button, next button, question container element, question element, answer buttons element, shuffling questions, and initializing the quiz score variable.', 'The transcript contains the code for fetching elements by ID and setting up the quiz questions and answers. It provides details on creating an array of questions, each with multiple answers and associated true/false values, and initializing the quiz questions and answers.']}, {'end': 12560.516, 'start': 11436.354, 'title': 'Javascript quiz application development', 'summary': 'Covers the development of a javascript quiz application with functions like clearing status, setting status, selecting answers, resetting state, showing questions, setting next question, and starting the game, resulting in a functional quiz application with automatic question display and answer validation.', 'duration': 1124.162, 'highlights': ['Functions for clearing status, setting status, selecting answers, resetting state, showing questions, setting next question, and starting the game are implemented. The chapter covers the implementation of functions such as clear status class, set status class, select answer, reset state, showQuotient, setNextQuestion, and start game.', 'The quiz application automatically displays questions, validates answers, and provides a restart option upon completion. The quiz application automatically displays questions, validates answers, and offers a restart option upon completion.', 'The JavaScript quiz application successfully displays questions and provides automatic answer validation. The JavaScript quiz application successfully displays questions and provides automatic answer validation.', 'The quiz application successfully starts the game and handles the process of setting up and displaying questions. The quiz application successfully starts the game and handles the process of setting up and displaying questions.', 'The quiz application demonstrates the automatic display of questions and provides answer validation. The quiz application demonstrates the automatic display of questions and provides answer validation.']}], 'duration': 4291.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg8269401.jpg', 'highlights': ['HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'CSS is a simple design language used for making web pages look more beautiful and presentable.', 'JavaScript is a powerful interpreted language targeted for web development, used for making web pages interactive and bringing them to life.', 'Creation of a simple web page using HTML and CSS to gain a better understanding of HTML tags.', 'Offering a hands-on session for creating an HTML registration page using Visual Studio Code.', 'The chapter covers the process of creating a simple HTML form and styling it using CSS.', 'Developing a quiz application using HTML, JavaScript, and CSS.', 'Creating HTML tags and CSS classes for the quiz interface.', 'The chapter covers the process of applying CSS styles to create a visually appealing button grid and container.', 'The chapter also includes scripting the creation of questions and answers for a quiz application using JavaScript.', 'Functions for clearing status, setting status, selecting answers, resetting state, showing questions, setting next question, and starting the game are implemented.', 'The quiz application automatically displays questions, validates answers, and provides a restart option upon completion.']}, {'end': 14460.264, 'segs': [{'end': 12587.527, 'src': 'embed', 'start': 12560.996, 'weight': 1, 'content': [{'end': 12568.179, 'text': 'So this is how, dear friends, your project is now completely working, and expect it as the way it was designed for.', 'start': 12560.996, 'duration': 7.183}, {'end': 12578.183, 'text': 'When I once again restart and you can see start button not giving me 4 x 3 that means it is once again have taken random question.', 'start': 12568.579, 'duration': 9.604}, {'end': 12584.026, 'text': 'Cascading style sheet which is also called CSS is an important aspect of web designing.', 'start': 12578.764, 'duration': 5.262}, {'end': 12587.527, 'text': 'It has made our web page responsive and user-friendly.', 'start': 12584.906, 'duration': 2.621}], 'summary': 'Project is fully functional. start button error indicates random question. css improves web page responsiveness.', 'duration': 26.531, 'max_score': 12560.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12560996.jpg'}, {'end': 12662.028, 'src': 'embed', 'start': 12632.985, 'weight': 0, 'content': [{'end': 12634.686, 'text': 'There are several different types of CSS selectors.', 'start': 12632.985, 'duration': 1.701}, {'end': 12643.39, 'text': 'The most common of them are CSS element selectors, CSS ID selector, CSS class selector, CSS universal selector, and CSS group selectors.', 'start': 12635.086, 'duration': 8.304}, {'end': 12650.342, 'text': 'So, what is a CSS element selector? The element selector selects element based on the element name.', 'start': 12644.09, 'duration': 6.252}, {'end': 12652.643, 'text': 'This is a CSS selector.', 'start': 12651.482, 'duration': 1.161}, {'end': 12655.684, 'text': 'It means it will select all the P elements on the page.', 'start': 12653.283, 'duration': 2.401}, {'end': 12659.827, 'text': 'It will style all the P elements to the center aligned having blue color.', 'start': 12656.325, 'duration': 3.502}, {'end': 12662.028, 'text': 'This is a CSS selector.', 'start': 12660.827, 'duration': 1.201}], 'summary': 'Various css selectors include element, id, class, universal, and group selectors. the element selector targets all p elements for styling.', 'duration': 29.043, 'max_score': 12632.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12632985.jpg'}, {'end': 12858.978, 'src': 'embed', 'start': 12830.234, 'weight': 2, 'content': [{'end': 12834.297, 'text': 'CSS box model typically describes how these rectangular boxes are laid out on a web page.', 'start': 12830.234, 'duration': 4.063}, {'end': 12839.265, 'text': 'These boxes can have different properties and can interact with each other in different ways.', 'start': 12835.603, 'duration': 3.662}, {'end': 12844.349, 'text': 'But every box has a content area and options surrounding, padding, border and margin areas.', 'start': 12839.866, 'duration': 4.483}, {'end': 12849.332, 'text': 'The following diagram demonstrates how the content padding,', 'start': 12846.55, 'duration': 2.782}, {'end': 12854.135, 'text': 'border and margin CSS properties determine how much space an element can take on a web page.', 'start': 12849.332, 'duration': 4.803}, {'end': 12858.978, 'text': 'The content area consists of content like text, images or other media.', 'start': 12855.355, 'duration': 3.623}], 'summary': 'Css box model defines layout of rectangular boxes on a web page, with content, padding, border, and margin areas.', 'duration': 28.744, 'max_score': 12830.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12830234.jpg'}, {'end': 13011.453, 'src': 'embed', 'start': 12979.895, 'weight': 3, 'content': [{'end': 12981.755, 'text': 'The border goes around the padding of our element.', 'start': 12979.895, 'duration': 1.86}, {'end': 12987.377, 'text': 'So we have the 20px of padding around our content and 15px of border around the padding which is around the content.', 'start': 12982.316, 'duration': 5.061}, {'end': 12990.517, 'text': 'Now we will see the working of the margin.', 'start': 12989.097, 'duration': 1.42}, {'end': 12995.158, 'text': 'If we add 30px of margin to our element, you can see the spacing on the outside of our border.', 'start': 12991.198, 'duration': 3.96}, {'end': 13002.36, 'text': "So let's add the 30px margin and refresh.", 'start': 12999.739, 'duration': 2.621}, {'end': 13007.932, 'text': 'You can see the spacing on outside of the border.', 'start': 13006.052, 'duration': 1.88}, {'end': 13011.453, 'text': 'Margin is used to space two elements apart from each other.', 'start': 13008.573, 'duration': 2.88}], 'summary': 'Border: 15px, padding: 20px, margin: 30px', 'duration': 31.558, 'max_score': 12979.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12979895.jpg'}, {'end': 13149.1, 'src': 'embed', 'start': 13101.503, 'weight': 5, 'content': [{'end': 13105.184, 'text': 'Now when you refresh, you can see the content area of 15 to 50.', 'start': 13101.503, 'duration': 3.681}, {'end': 13110.505, 'text': 'In this tutorial, we will discuss everything needed for you to get started working with grid layouts.', 'start': 13105.184, 'duration': 5.321}, {'end': 13116.086, 'text': 'We will start by discussing what is a grid layout.', 'start': 13113.946, 'duration': 2.14}, {'end': 13123.407, 'text': 'Then we will move on to the features of the grid system and some basic terminologies which will help you understand the grid system better.', 'start': 13117.026, 'duration': 6.381}, {'end': 13128.268, 'text': 'In end, we will work on an example to understand the grid system.', 'start': 13124.647, 'duration': 3.621}, {'end': 13130.208, 'text': "So, let's get started.", 'start': 13129.008, 'duration': 1.2}, {'end': 13140.65, 'text': 'What is a grid? A grid is a set of intersecting horizontal and vertical lines defining the rows and columns.', 'start': 13134.389, 'duration': 6.261}, {'end': 13149.1, 'text': 'And what is a grid layout? So, CSS GridLayout is the most powerful layout system available in CSS.', 'start': 13142.651, 'duration': 6.449}], 'summary': 'Tutorial on grid layouts covering content area 15 to 50, css gridlayout as most powerful layout system.', 'duration': 47.597, 'max_score': 13101.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg13101503.jpg'}, {'end': 13266.818, 'src': 'embed', 'start': 13239.878, 'weight': 4, 'content': [{'end': 13246.563, 'text': 'The grid also contains an algorithm to control the placement of items not given an explicit position on the grid.', 'start': 13239.878, 'duration': 6.685}, {'end': 13251.887, 'text': 'You can define an explicit grid with a grid layout.', 'start': 13246.583, 'duration': 5.304}, {'end': 13257.671, 'text': 'The grid layout specification is flexible enough to add additional rows and columns when needed.', 'start': 13252.567, 'duration': 5.104}, {'end': 13262.454, 'text': 'Features such as adding as many columns that will fit into a container are included.', 'start': 13258.452, 'duration': 4.002}, {'end': 13266.818, 'text': 'It also gives you control of overlapping content.', 'start': 13264.616, 'duration': 2.202}], 'summary': 'Grid layout allows flexible addition of rows and columns, and control of overlapping content.', 'duration': 26.94, 'max_score': 13239.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg13239878.jpg'}, {'end': 13458.986, 'src': 'embed', 'start': 13382.372, 'weight': 7, 'content': [{'end': 13384.774, 'text': 'And inside of it, we will put our different grid items.', 'start': 13382.372, 'duration': 2.402}, {'end': 13391.14, 'text': 'So we will just create different grid items and give them a class GridItem followed by a class number they belong to.', 'start': 13385.495, 'duration': 5.645}, {'end': 13393.922, 'text': 'So that we can easily distribute between them.', 'start': 13392.02, 'duration': 1.902}, {'end': 13428.464, 'text': 'Just copy paste this five times.', 'start': 13425.854, 'duration': 2.61}, {'end': 13431.154, 'text': "So we'll have the five elements on our page.", 'start': 13429.447, 'duration': 1.707}, {'end': 13458.986, 'text': "Let's save the file and see how it looks on the page.", 'start': 13456.926, 'duration': 2.06}], 'summary': 'Creating five grid items with class griditem and numbers for distribution.', 'duration': 76.614, 'max_score': 13382.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg13382372.jpg'}, {'end': 13841.191, 'src': 'embed', 'start': 13793.993, 'weight': 8, 'content': [{'end': 13796.854, 'text': 'Now you can see the evenly spaces between the rows and the columns.', 'start': 13793.993, 'duration': 2.861}, {'end': 13806.179, 'text': 'This is all you need to know about the sizing of the different columns and rows.', 'start': 13803.237, 'duration': 2.942}, {'end': 13810.001, 'text': "Now let's talk about the positioning items within its grid cells.", 'start': 13807.179, 'duration': 2.822}, {'end': 13814.843, 'text': 'So for horizontal positioning, we could use the justify items and we can set that to center.', 'start': 13810.901, 'duration': 3.942}, {'end': 13838.469, 'text': 'So that centers each item within the cell.', 'start': 13836.448, 'duration': 2.021}, {'end': 13841.191, 'text': 'By default it is set to stretch.', 'start': 13839.59, 'duration': 1.601}], 'summary': 'Explains grid sizing and horizontal centering of items in grid cells.', 'duration': 47.198, 'max_score': 13793.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg13793993.jpg'}, {'end': 14098.509, 'src': 'embed', 'start': 14070.963, 'weight': 9, 'content': [{'end': 14074.747, 'text': 'Then you have to enter everything manually from width, height and to padding.', 'start': 14070.963, 'duration': 3.784}, {'end': 14077.169, 'text': 'Flexbox can do all these things with ease.', 'start': 14075.227, 'duration': 1.942}, {'end': 14087.184, 'text': 'Some of the concepts of flexible box model is the ability to alter the item width and height to best fit in the containers available in the free space.', 'start': 14079.321, 'duration': 7.863}, {'end': 14096.808, 'text': 'Flex model is direction agnostic which is different from the box model which is vertically biased and the inline which is horizontally biased.', 'start': 14089.105, 'duration': 7.703}, {'end': 14098.509, 'text': 'Flexbox works for both.', 'start': 14097.288, 'duration': 1.221}], 'summary': 'Flexbox simplifies layout by dynamically adjusting item dimensions and working in both directions.', 'duration': 27.546, 'max_score': 14070.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14070963.jpg'}, {'end': 14323.328, 'src': 'embed', 'start': 14291.633, 'weight': 10, 'content': [{'end': 14293.774, 'text': 'You can see all the items are now evenly spaced.', 'start': 14291.633, 'duration': 2.141}, {'end': 14298.697, 'text': 'If you want to layout your items on the cross axis, we would use the align items property.', 'start': 14294.595, 'duration': 4.102}, {'end': 14301.079, 'text': 'The default value for this is stretch.', 'start': 14299.598, 'duration': 1.481}, {'end': 14307.422, 'text': 'If we want to keep the size of our items, we will use the center and then all our items will be centered vertically.', 'start': 14302.099, 'duration': 5.323}, {'end': 14312.565, 'text': 'Before Flexbox, aligning the items vertically inside the container was nearly impossible.', 'start': 14308.483, 'duration': 4.082}, {'end': 14315.067, 'text': 'With Flexbox, you can do it easily.', 'start': 14313.206, 'duration': 1.861}, {'end': 14323.328, 'text': 'Now you can see the items are aligned vertically inside the container.', 'start': 14319.946, 'duration': 3.382}], 'summary': 'Flexbox allows easy vertical alignment of items within a container.', 'duration': 31.695, 'max_score': 14291.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14291633.jpg'}, {'end': 14381.19, 'src': 'embed', 'start': 14357.004, 'weight': 11, 'content': [{'end': 14363.229, 'text': 'The actual flexbox item properties are used to override those item properties or to apply different sizing to these elements.', 'start': 14357.004, 'duration': 6.225}, {'end': 14370.455, 'text': "Now if we want our first item that it does not shrink when we shrink our browser, we'll set the flex shrink to zero to our first item.", 'start': 14363.709, 'duration': 6.746}, {'end': 14375.959, 'text': "So we'll set the flex shrink to zero.", 'start': 14372.096, 'duration': 3.863}, {'end': 14381.19, 'text': 'Now if you go back to the page, and try to shrink this.', 'start': 14377.1, 'duration': 4.09}], 'summary': 'Flexbox item properties can be overridden or resized, with flex shrink set to zero for the first item to prevent shrinking when the browser is resized.', 'duration': 24.186, 'max_score': 14357.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14357004.jpg'}], 'start': 12560.996, 'title': 'Css, grid, flexbox basics', 'summary': 'Covers css basics including selectors, box model, grid layout, flexbox, and advanced functions. it discusses the css box model, grid layout features, terminologies, and provides a hands-on demo. additionally, it introduces the basics of grid and flexbox layouts with practical examples.', 'chapters': [{'end': 12805.355, 'start': 12560.996, 'title': 'Css basics and selectors', 'summary': 'Covers the basics of css, including selectors, box model, grid layout, flexbox, and advanced functions, with a focus on selectors such as element, id, class, universal, and group selectors.', 'duration': 244.359, 'highlights': ['CSS selectors allow you to select and style HTML elements based on their ID, classes, types, attributes, and values, with examples of element, ID, and class selectors. CSS selectors enable styling HTML elements based on their various attributes, such as ID, classes, types, and attributes, with examples including element, ID, and class selectors.', 'The chapter provides an overview of CSS selectors, covering element selectors, ID selectors, class selectors, universal selectors, and group selectors, with detailed explanations and examples. The chapter thoroughly covers CSS selectors, including element, ID, class, universal, and group selectors, providing detailed explanations and examples for each type.', 'An emphasis is placed on the importance of CSS in web design, highlighting its role in making web pages responsive and user-friendly. The importance of CSS in web design is underscored, particularly its role in enhancing web page responsiveness and user-friendliness.']}, {'end': 13097.202, 'start': 12806.256, 'title': 'Understanding css box model', 'summary': "Explains the css box model, which consists of content, padding, border, and margin areas, and includes an example demonstrating the impact of changing these properties on the element's appearance.", 'duration': 290.946, 'highlights': ['The CSS box model includes content, padding, border, and margin areas, with dimensions specified for each area. The box model consists of content, padding, border, and margin areas, each with specified dimensions, determining how much space an element can take on a web page.', "Changing the padding, border, and margin properties affects the element's appearance and spacing on the web page. Adjusting the padding, border, and margin properties results in visible changes to the element's appearance and spacing on the web page.", "Demonstrating the impact of changing the padding, border, and margin properties through an example using specific pixel values. The example includes changing the padding to 30 pixels, the border to 20 pixels, and the margin to 40 pixels, demonstrating the impact on the element's appearance and spacing."]}, {'end': 13344.339, 'start': 13101.503, 'title': 'Understanding css grid layout', 'summary': 'Discusses the features and terminologies of css grid layout, including its ability to handle both fixed and flexible track sizes and the basic terminologies such as grid lines, columns, rows, grid cells, gutters, and gutter margins, ending with a hands-on demo.', 'duration': 242.836, 'highlights': ['The CSS grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position and layer between parts of a control-built HTML primitive. It can handle both fixed and flexible track sizes, and allows precise placement of items using grid line numbers, names, or by targeting an area of the grid.', 'You can create a grid with fixed track sizes using pixels, and also create a grid using flexible sizes with percentages using the new FR unit designed for this purpose. The grid layout specification is flexible enough to add additional rows and columns when needed.', 'The grid also gives you control of overlapping content, allowing more than one item to be placed into a grid cell or area and partially overlap each other, with the layering controlled by the z-index property.', 'The basic terminologies of the grid system include grid lines, grid columns, grid rows, grid cells, gutters, and gutter margins, all of which are crucial for understanding and working with the grid layout.', 'In the hands-on demo, the chapter will demonstrate how the grid system works in the actual world, providing practical insights into applying the concepts discussed.']}, {'end': 13984.806, 'start': 13344.779, 'title': 'Grid layout basics', 'summary': 'Introduces the basics of grid layout using sublime text editor, covering the creation of grid container and items, defining columns and rows, using fraction units, repeat command, setting grid auto rows, grid gap property, and positioning items within grid cells.', 'duration': 640.027, 'highlights': ['The chapter covers the creation of a grid container and items, with a demonstration of 5 grid items distributed and saved, resulting in 5 elements on the page.', 'It explains the process of defining columns and rows for a grid, using set grid template and fraction units to set column sizes, and using repeat command to create 4 columns of 100px wide, illustrated with a visual demonstration.', 'The transcript explains the usage of grid auto rows to determine the size of rows added after template rows and the application of grid gap property to create spaces between rows and columns, followed by a demonstration of evenly spaced rows and columns with a size of 20 pixels using grid gap property.', 'It details the positioning of items within grid cells, covering the usage of justify items for horizontal positioning, align items for vertical positioning, justify content for horizontal alignment within the container, and align content for vertical alignment within the container, with the demonstration of setting these properties to center for both horizontal and vertical alignment.']}, {'end': 14460.264, 'start': 13997.961, 'title': 'Flexbox layout basics', 'summary': 'Covers the basics of flexbox layout, explaining its properties and their functionalities, and demonstrates its use by creating a simple grid layout with detailed styling and alignment instructions.', 'duration': 462.303, 'highlights': ['Flexbox layout allows easy and clean arrangement of items within a container, avoiding manual entry of dimensions and padding, and is direction agnostic, unlike the old block model. Flexbox layout provides an easy and clean way to arrange items within a container, eliminating the need for manual entry of dimensions, padding, and alignment. It is direction agnostic, unlike the old block model.', "The flex container can be styled using 'display: flex', allowing items to adjust themselves within the container and providing properties like 'justifyContent' for main axis alignment and 'alignItems' for cross-axis alignment. The flex container can be styled using 'display: flex', enabling automatic adjustments of items within the container. Properties like 'justifyContent' and 'alignItems' are utilized for main axis and cross-axis alignment.", "The properties 'flex-shrink', 'flex-grow', and 'alignSelf' can be applied to flexbox items to control their resizing behavior and alignment within the container. Properties like 'flex-shrink', 'flex-grow', and 'alignSelf' can be applied to flexbox items to control their resizing behavior and alignment within the container."]}], 'duration': 1899.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg12560996.jpg', 'highlights': ['The chapter thoroughly covers CSS selectors, including element, ID, class, universal, and group selectors, providing detailed explanations and examples for each type.', 'An emphasis is placed on the importance of CSS in web design, highlighting its role in making web pages responsive and user-friendly.', 'The box model consists of content, padding, border, and margin areas, each with specified dimensions, determining how much space an element can take on a web page.', "The example includes changing the padding to 30 pixels, the border to 20 pixels, and the margin to 40 pixels, demonstrating the impact on the element's appearance and spacing.", 'The grid layout specification is flexible enough to add additional rows and columns when needed.', 'The basic terminologies of the grid system include grid lines, grid columns, grid rows, grid cells, gutters, and gutter margins, all of which are crucial for understanding and working with the grid layout.', 'In the hands-on demo, the chapter will demonstrate how the grid system works in the actual world, providing practical insights into applying the concepts discussed.', 'The chapter covers the creation of a grid container and items, with a demonstration of 5 grid items distributed and saved, resulting in 5 elements on the page.', 'It details the positioning of items within grid cells, covering the usage of justify items for horizontal positioning, align items for vertical positioning, justify content for horizontal alignment within the container, and align content for vertical alignment within the container, with the demonstration of setting these properties to center for both horizontal and vertical alignment.', 'Flexbox layout provides an easy and clean way to arrange items within a container, eliminating the need for manual entry of dimensions, padding, and alignment. It is direction agnostic, unlike the old block model.', "The flex container can be styled using 'display: flex', enabling automatic adjustments of items within the container. Properties like 'justifyContent' and 'alignItems' are utilized for main axis and cross-axis alignment.", "Properties like 'flex-shrink', 'flex-grow', and 'alignSelf' can be applied to flexbox items to control their resizing behavior and alignment within the container."]}, {'end': 15761.553, 'segs': [{'end': 14537.18, 'src': 'embed', 'start': 14507.608, 'weight': 2, 'content': [{'end': 14513.832, 'text': 'The block elements start a new line and span the entire width of the viewport by default, like how P elements behave.', 'start': 14507.608, 'duration': 6.224}, {'end': 14517.494, 'text': 'There are also line breaks before and after these elements.', 'start': 14514.972, 'duration': 2.522}, {'end': 14522.477, 'text': 'The default value of the P element is a display block.', 'start': 14518.835, 'duration': 3.642}, {'end': 14526.495, 'text': 'So here, this looks something like this.', 'start': 14523.257, 'duration': 3.238}, {'end': 14537.18, 'text': 'What display blocks does is it means that it is going to take the entire width given to it.', 'start': 14532.618, 'duration': 4.562}], 'summary': 'Block elements span entire width of viewport by default, like p elements.', 'duration': 29.572, 'max_score': 14507.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14507608.jpg'}, {'end': 14620.652, 'src': 'embed', 'start': 14592.047, 'weight': 3, 'content': [{'end': 14593.728, 'text': 'So this is what an inline element does.', 'start': 14592.047, 'duration': 1.681}, {'end': 14596.991, 'text': 'Also, all the inline elements are on the same line.', 'start': 14594.489, 'duration': 2.502}, {'end': 14601.354, 'text': 'They share the space together because they take the minimum amount of space possible.', 'start': 14597.851, 'duration': 3.503}, {'end': 14606.118, 'text': 'There are no line breaks in these elements and they try to fit as closely as possible.', 'start': 14602.275, 'duration': 3.843}, {'end': 14611.322, 'text': 'Now, one of the demerits here is we cannot change the height and width of the inline element.', 'start': 14606.138, 'duration': 5.184}, {'end': 14620.652, 'text': 'If we change here height 200 pixels and width 200 pixels and save.', 'start': 14612.983, 'duration': 7.669}], 'summary': "Inline elements share space, don't allow height or width changes.", 'duration': 28.605, 'max_score': 14592.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14592047.jpg'}, {'end': 14666.906, 'src': 'embed', 'start': 14639.363, 'weight': 4, 'content': [{'end': 14643.586, 'text': 'Elements assigned display inline block appears on the same line with the other inline elements.', 'start': 14639.363, 'duration': 4.223}, {'end': 14645.978, 'text': 'a characteristic of inline elements.', 'start': 14644.557, 'duration': 1.421}, {'end': 14651.94, 'text': 'However, inline block elements also like block elements in that you can change the width and height of the CSS.', 'start': 14646.738, 'duration': 5.202}, {'end': 14666.906, 'text': 'Now, if here you try to change the height and width of the element, just change this to inline block.', 'start': 14653.201, 'duration': 13.705}], 'summary': 'Inline block elements share characteristics of inline and block elements, allowing changes to width and height in css.', 'duration': 27.543, 'max_score': 14639.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14639363.jpg'}, {'end': 14819.343, 'src': 'embed', 'start': 14748.127, 'weight': 5, 'content': [{'end': 14757.211, 'text': 'So what is CSS position property? The CSS position property allows you to define the position of an element on a web page.', 'start': 14748.127, 'duration': 9.084}, {'end': 14764.447, 'text': 'The top, right, bottom and the left CSS position properties are used to determine the final location of the element.', 'start': 14757.931, 'duration': 6.516}, {'end': 14770.168, 'text': 'There are four values that you can use to set the position of an element on a web page.', 'start': 14766.268, 'duration': 3.9}, {'end': 14774.049, 'text': 'They are static, fixed, relative and absolute.', 'start': 14770.788, 'duration': 3.261}, {'end': 14779.29, 'text': 'Using one of the four values above, you can specify how an element should be positioned.', 'start': 14775.129, 'duration': 4.161}, {'end': 14785.191, 'text': "You can also use the top, bottom, left and right properties to further define the element's position on a page.", 'start': 14780.01, 'duration': 5.181}, {'end': 14788.131, 'text': "So let's discuss each of the properties individually.", 'start': 14785.811, 'duration': 2.32}, {'end': 14791.652, 'text': 'CSS static position.', 'start': 14790.572, 'duration': 1.08}, {'end': 14795.356, 'text': 'This is a by default position for HTML element.', 'start': 14792.915, 'duration': 2.441}, {'end': 14799.457, 'text': 'It always positions an element according to the normal flow of the page.', 'start': 14796.376, 'duration': 3.081}, {'end': 14803.238, 'text': 'It is not affected by the top, bottom, left and right properties.', 'start': 14800.377, 'duration': 2.861}, {'end': 14809.68, 'text': 'It is important to note that having a static position is the same as not setting the position property at all.', 'start': 14804.999, 'duration': 4.681}, {'end': 14813.402, 'text': 'The next is CSS fix position.', 'start': 14811.841, 'duration': 1.561}, {'end': 14819.343, 'text': 'The fix positioning property helps to put the text fixed on the browser.', 'start': 14815.542, 'duration': 3.801}], 'summary': "Css position property defines element's location using static, fixed, relative, or absolute values.", 'duration': 71.216, 'max_score': 14748.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14748127.jpg'}, {'end': 14874.3, 'src': 'embed', 'start': 14846.094, 'weight': 10, 'content': [{'end': 14848.976, 'text': 'We will discuss each of them with more detail in examples.', 'start': 14846.094, 'duration': 2.882}, {'end': 14852.81, 'text': 'Now this is CSS absolute position.', 'start': 14851.109, 'duration': 1.701}, {'end': 14861.014, 'text': 'The absolute positioning is used to position an element related to the first parent element that has a position other than static.', 'start': 14854.511, 'duration': 6.503}, {'end': 14864.736, 'text': 'If no such element is found, the containing block is HTML.', 'start': 14861.814, 'duration': 2.922}, {'end': 14868.898, 'text': 'With absolute positioning, you can place an element anywhere on the page.', 'start': 14865.756, 'duration': 3.142}, {'end': 14874.3, 'text': "Now let's move on to the example to understand each of the properties better.", 'start': 14871.199, 'duration': 3.101}], 'summary': 'Css absolute positioning allows elements to be placed anywhere on the page relative to the first parent element with a non-static position.', 'duration': 28.206, 'max_score': 14846.094, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14846094.jpg'}, {'end': 15219.245, 'src': 'embed', 'start': 15172.443, 'weight': 0, 'content': [{'end': 15177.745, 'text': "In this video, we'll discuss the differences between both the layouts and we'll discuss which one you should use.", 'start': 15172.443, 'duration': 5.302}, {'end': 15183.848, 'text': 'I will also show you both the layouts in a practical example without diving too deep.', 'start': 15179.025, 'duration': 4.823}, {'end': 15186.269, 'text': "So let's first understand the theory.", 'start': 15184.728, 'duration': 1.541}, {'end': 15196.433, 'text': 'CSS Grid allows developers to construct custom grids with more flexibility and control than ever before.', 'start': 15191.391, 'duration': 5.042}, {'end': 15198.996, 'text': 'It is for two dimensional positioning.', 'start': 15197.515, 'duration': 1.481}, {'end': 15200.757, 'text': 'We got rows and columns here.', 'start': 15199.256, 'duration': 1.501}, {'end': 15204.258, 'text': 'Whereas flexbox is for one dimensional layout.', 'start': 15202.257, 'duration': 2.001}, {'end': 15208.72, 'text': 'It is useful in allocating and aligning the spaces among the items in a grid container.', 'start': 15204.898, 'duration': 3.822}, {'end': 15213.922, 'text': 'The flexbox layout pattern makes it easier to design flexible and effective layouts.', 'start': 15209.14, 'duration': 4.782}, {'end': 15219.245, 'text': 'The grid is used for creating a more complex and organized layout on your pages.', 'start': 15215.643, 'duration': 3.602}], 'summary': 'Css grid allows custom 2d grids, flexbox for 1d layout, enhancing page organization.', 'duration': 46.802, 'max_score': 15172.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg15172443.jpg'}, {'end': 15585.204, 'src': 'embed', 'start': 15552.08, 'weight': 11, 'content': [{'end': 15555.062, 'text': 'After that, we will discuss some of the basic properties of the background image.', 'start': 15552.08, 'duration': 2.982}, {'end': 15560.406, 'text': 'In the end, we will add a background image to our web page by adding the code to our text editor.', 'start': 15555.683, 'duration': 4.723}, {'end': 15564.939, 'text': "So let's begin by discussing about the background property of the CSS.", 'start': 15562.298, 'duration': 2.641}, {'end': 15569.96, 'text': 'The background image property specifies an image to use as a background of an element.', 'start': 15566.279, 'duration': 3.681}, {'end': 15573.741, 'text': 'The background is defined in the body element of the HTML code.', 'start': 15570.68, 'duration': 3.061}, {'end': 15578.442, 'text': 'To add a background image on an HTML element,', 'start': 15575.881, 'duration': 2.561}, {'end': 15585.204, 'text': 'use the HTML style attribute and the CSS background image property and mention the path of the image inside the URL attribute.', 'start': 15578.442, 'duration': 6.762}], 'summary': 'Discussion on adding a background image to a web page using css and html.', 'duration': 33.124, 'max_score': 15552.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg15552080.jpg'}, {'end': 15766.713, 'src': 'embed', 'start': 15735.113, 'weight': 14, 'content': [{'end': 15737.295, 'text': 'Similarly, repeat the images on the y-axis.', 'start': 15735.113, 'duration': 2.182}, {'end': 15744.7, 'text': 'As you can see, the images are now repeated to the y-axis.', 'start': 15742.259, 'duration': 2.441}, {'end': 15748.944, 'text': 'And there is a default value repeat, which will repeat the images on the webpage.', 'start': 15745.301, 'duration': 3.643}, {'end': 15753.227, 'text': "So, let's keep it to cover.", 'start': 15751.425, 'duration': 1.802}, {'end': 15758.591, 'text': "So, let's keep the background size to cover and set the background repeat to no repeat.", 'start': 15754.147, 'duration': 4.444}, {'end': 15761.553, 'text': "Let's save the file and look at it on the webpage.", 'start': 15759.852, 'duration': 1.701}, {'end': 15766.713, 'text': 'Now, as you can see the image is fully put to the webpage.', 'start': 15763.908, 'duration': 2.805}], 'summary': 'Setting background size to cover and repeat to no, fully puts the image on the webpage.', 'duration': 31.6, 'max_score': 15735.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg15735113.jpg'}], 'start': 14461.824, 'title': 'Css properties and layouts', 'summary': 'Covers css display properties with examples of block, inline, inline block, and none, as well as css positioning properties such as static, fixed, relative, and absolute. it also discusses the differences between css grid and flexbox layouts, and explains how to add background images with css.', 'chapters': [{'end': 14698.58, 'start': 14461.824, 'title': 'Css display properties', 'summary': 'Explains the css display property and its various values - block, inline, inline block, and none - with examples, highlighting their behavior, such as the layout, line breaks, space, and ability to change height and width.', 'duration': 236.756, 'highlights': ['The display block property makes an element a block element, starting a new line and spanning the entire width of the viewport by default, with line breaks before and after the element.', 'The display inline value turns any element into an inline element, appearing on the same line without breaks and taking the minimum amount of space possible.', 'The inline block value, a hybrid of inline and block elements, allows the elements to appear on the same line, while also enabling the change of width and height of the CSS.']}, {'end': 14896.829, 'start': 14705, 'title': 'Css positioning properties', 'summary': 'Explains css positioning properties including static, fixed, relative, and absolute, with detailed examples and their impact on element positioning and behavior.', 'duration': 191.829, 'highlights': ['The CSS position property allows you to define the position of an element on a web page. Explains the primary function of the CSS position property.', 'There are four values that you can use to set the position of an element on a web page: static, fixed, relative, and absolute. Details the four values for positioning elements on a web page.', 'CSS static position is the default position for HTML elements, positioning an element according to the normal flow of the page. Describes the default positioning behavior of HTML elements.', "The fixed positioning property helps to put the text fixed on the browser, positioning it relative to the browser's window and preventing movement upon scrolling. Explains the behavior and purpose of the fixed positioning property.", 'CSS RelativePosition property sets the element relative to its normal position and makes it subject to the values of the four other CSS properties. Details the behavior and impact of the RelativePosition property on element positioning.', 'Absolute positioning is used to position an element related to the first parent element that has a position other than static, or the containing block is HTML. Explains the use and behavior of absolute positioning for element placement on a page.']}, {'end': 15171.982, 'start': 14899.89, 'title': 'Css positioning explained', 'summary': 'Explains the css positioning properties including static, relative, absolute, and fixed positioning, demonstrating their impact and differences through examples.', 'duration': 272.092, 'highlights': ['Fixed positioning allows elements to stay in the same place when scrolling, unlike absolute positioning. Fixed position elements remain fixed based on the entire HTML element, staying in the same place when scrolling, as demonstrated by the example with the element staying in position while scrolling.', 'Relative position allows changing the top, left, right, and bottom of an element, taking it out of the document flow. Relative position allows changing the top, left, right, and bottom of an element, taking it out of the document flow, as evidenced by the example with the element moving and overflowing when top and left values are adjusted.', 'Absolute position removes the element from the document flow and positions it inside a parent container, remaining fixed based on the parent container. Absolute position removes the element from the document flow and positions it inside a parent container, as shown by the example with the element staying in position within the parent container, unaffected by scrolling.', 'Demonstration of static and relative positioning, explaining their default values and similarities. The chapter demonstrates the static and relative positioning, highlighting their default values and similarities, such as the relative position acting similarly to static but allowing changes to the top, left, right, and bottom of an element.']}, {'end': 15528.916, 'start': 15172.443, 'title': 'Css grid vs flexbox layouts', 'summary': 'Discusses the differences between css grid and flexbox layouts, highlighting their 2d and 1d positioning, and demonstrates their practical use in creating a web page layout, showcasing the power and flexibility of css grid in constructing organized layouts and the role of flexbox in positioning elements in a one-dimensional area.', 'duration': 356.473, 'highlights': ['CSS Grid allows developers to construct custom grids with more flexibility and control than ever before, for two-dimensional positioning, while Flexbox is for one-dimensional layout, useful in allocating and aligning spaces among the items in a grid container. CSS Grid offers more flexibility and control for two-dimensional positioning, while Flexbox is beneficial for one-dimensional layout and aligning spaces among items in a grid container.', 'CSS Grid is used for creating a more complex and organized layout on web pages, whereas Flexbox is used to design responsive pages without excessive use of positioning or float in the CSS code. CSS Grid is ideal for creating complex and organized layouts, while Flexbox is useful for designing responsive pages without excessive positioning or float in the CSS code.', 'Demonstrates the practical use of CSS Grid by setting display grid property to the body element, defining grid template columns and rows, and showcasing the power and flexibility it provides to the developer in adjusting elements in a 2D manner. The practical use of CSS Grid is demonstrated by setting display grid property, defining grid template columns and rows, showcasing its power and flexibility in adjusting elements in a 2D manner.', 'Illustrates the role of Flexbox in positioning elements by adding display flex, using justify content and align items to center the items on the main and cross axes, and adding margin to create spacing between items. The role of Flexbox in positioning elements is illustrated by adding display flex, using justify content and align items to center the items, and adding margin to create spacing between items.']}, {'end': 15761.553, 'start': 15531.687, 'title': 'Adding background image with css', 'summary': 'Explains how to set a background image on a web page using css, covering the basic properties of background images, including setting the image path, size, and repetition.', 'duration': 229.866, 'highlights': ['The chapter explains how to set a background image on a web page using CSS. Setting a background image on a web page, using CSS properties', 'The tutorial discusses the basic properties of the background image, such as setting the image path, size, and repetition. Discussion on setting image path, size, and repetition using CSS properties', 'The background image property specifies an image to use as a background of an element. Explanation of the background image property in CSS', 'The image is repeated by default to cover the entire element. Default behavior of the image repetition in CSS background']}], 'duration': 1299.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg14461824.jpg', 'highlights': ['CSS Grid offers more flexibility and control for two-dimensional positioning, while Flexbox is beneficial for one-dimensional layout and aligning spaces among items in a grid container.', 'Demonstrates the practical use of CSS Grid by setting display grid property, defining grid template columns and rows, showcasing its power and flexibility in adjusting elements in a 2D manner.', 'The display block property makes an element a block element, starting a new line and spanning the entire width of the viewport by default, with line breaks before and after the element.', 'The display inline value turns any element into an inline element, appearing on the same line without breaks and taking the minimum amount of space possible.', 'The inline block value, a hybrid of inline and block elements, allows the elements to appear on the same line, while also enabling the change of width and height of the CSS.', 'The CSS position property allows you to define the position of an element on a web page. Explains the primary function of the CSS position property.', 'There are four values that you can use to set the position of an element on a web page: static, fixed, relative, and absolute. Details the four values for positioning elements on a web page.', 'CSS static position is the default position for HTML elements, positioning an element according to the normal flow of the page. Describes the default positioning behavior of HTML elements.', "The fixed positioning property helps to put the text fixed on the browser, positioning it relative to the browser's window and preventing movement upon scrolling. Explains the behavior and purpose of the fixed positioning property.", 'CSS RelativePosition property sets the element relative to its normal position and makes it subject to the values of the four other CSS properties. Details the behavior and impact of the RelativePosition property on element positioning.', 'Absolute positioning is used to position an element related to the first parent element that has a position other than static, or the containing block is HTML. Explains the use and behavior of absolute positioning for element placement on a page.', 'The chapter explains how to set a background image on a web page using CSS. Setting a background image on a web page, using CSS properties', 'The tutorial discusses the basic properties of the background image, such as setting the image path, size, and repetition. Discussion on setting image path, size, and repetition using CSS properties', 'The background image property specifies an image to use as a background of an element. Explanation of the background image property in CSS', 'The image is repeated by default to cover the entire element. Default behavior of the image repetition in CSS background']}, {'end': 19057.202, 'segs': [{'end': 15871.308, 'src': 'embed', 'start': 15840.722, 'weight': 0, 'content': [{'end': 15843.543, 'text': 'CSS uses the color values to specify the colors on a page.', 'start': 15840.722, 'duration': 2.821}, {'end': 15848.045, 'text': 'They can be specified using predefined color names, hex or RGB format.', 'start': 15844.404, 'duration': 3.641}, {'end': 15850.286, 'text': 'They are nearly 140 standard color names.', 'start': 15848.545, 'duration': 1.741}, {'end': 15853.3, 'text': 'Hexadecimal is a six digit representation of a color.', 'start': 15850.939, 'duration': 2.361}, {'end': 15858.602, 'text': 'The first two digits RR represents the red value, the next two are green value and the last is the blue value.', 'start': 15853.84, 'duration': 4.762}, {'end': 15862.664, 'text': 'All the other colors can be created using the combination of these three colors.', 'start': 15859.563, 'duration': 3.101}, {'end': 15867.246, 'text': 'There are several websites available where you can know the hex value of the different shades of color.', 'start': 15863.504, 'duration': 3.742}, {'end': 15871.308, 'text': 'As you can see the black color is signified by hashtag and the six zeros.', 'start': 15867.966, 'duration': 3.342}], 'summary': 'Css uses color values, including nearly 140 standard color names, hex, and rgb format to represent colors on a page.', 'duration': 30.586, 'max_score': 15840.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg15840722.jpg'}, {'end': 16178.646, 'src': 'embed', 'start': 16150.538, 'weight': 2, 'content': [{'end': 16154.139, 'text': 'We are going to discuss what are keyframes and we will try to understand the syntax of the keyframes.', 'start': 16150.538, 'duration': 3.601}, {'end': 16155.62, 'text': "So, let's get started.", 'start': 16154.779, 'duration': 0.841}, {'end': 16160.801, 'text': 'The keyframes are used to specify the animation code in the page.', 'start': 16158.24, 'duration': 2.561}, {'end': 16163.702, 'text': 'They are used to change the animation from one pattern to another.', 'start': 16161.341, 'duration': 2.361}, {'end': 16166.836, 'text': 'Keep in mind that the keyframes do not have any selectors on them.', 'start': 16164.454, 'duration': 2.382}, {'end': 16169.438, 'text': 'They are not nested inside anything.', 'start': 16168.077, 'duration': 1.361}, {'end': 16171.6, 'text': 'They are on the root of the CSS page.', 'start': 16170.179, 'duration': 1.421}, {'end': 16173.962, 'text': 'You write at the rate keyframes and the name.', 'start': 16172.181, 'duration': 1.781}, {'end': 16175.704, 'text': 'You can name it anything you want.', 'start': 16174.363, 'duration': 1.341}, {'end': 16178.646, 'text': 'We are going to use that name later on to call the selector.', 'start': 16176.344, 'duration': 2.302}], 'summary': 'Keyframes specify animation code in css, without selectors or nesting, at the root of the page.', 'duration': 28.108, 'max_score': 16150.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg16150538.jpg'}, {'end': 16735.998, 'src': 'embed', 'start': 16707.009, 'weight': 1, 'content': [{'end': 16710.16, 'text': "Let's understand briefly what each of these properties do.", 'start': 16707.009, 'duration': 3.151}, {'end': 16715.264, 'text': 'The animation duration property defines how long time an animation should take to complete.', 'start': 16710.94, 'duration': 4.324}, {'end': 16721.568, 'text': 'If the animation duration property is not specified, no animation will occur because the default value is 0 second.', 'start': 16715.864, 'duration': 5.704}, {'end': 16727.052, 'text': 'The animation timing function property specifies the speed curve of the animation.', 'start': 16722.589, 'duration': 4.463}, {'end': 16729.653, 'text': 'Now comes the keyframes.', 'start': 16728.573, 'duration': 1.08}, {'end': 16732.275, 'text': 'Keyframes are used to define the animation name.', 'start': 16730.313, 'duration': 1.962}, {'end': 16735.998, 'text': 'We will come down here and write at the rate keyframes.', 'start': 16732.955, 'duration': 3.043}], 'summary': 'Properties and keyframes define animation duration, timing function, and name.', 'duration': 28.989, 'max_score': 16707.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg16707008.jpg'}, {'end': 17022.445, 'src': 'embed', 'start': 16989.611, 'weight': 3, 'content': [{'end': 16996.78, 'text': 'so here we will set the animation iteration count to 3..', 'start': 16989.611, 'duration': 7.169}, {'end': 17002.522, 'text': 'The animation direction property defines whether an animation should be played forwards, backwards or in alternate cycles.', 'start': 16996.78, 'duration': 5.742}, {'end': 17006.604, 'text': 'So, for the animation direction, we will set it to alternate.', 'start': 17003.343, 'duration': 3.261}, {'end': 17022.445, 'text': "Now, if you save and go back, that's 1,, 2, and three.", 'start': 17008.225, 'duration': 14.22}], 'summary': 'Setting animation iteration count to 3 and direction to alternate.', 'duration': 32.834, 'max_score': 16989.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg16989611.jpg'}, {'end': 17173.862, 'src': 'embed', 'start': 17140.101, 'weight': 5, 'content': [{'end': 17144.263, 'text': "Let's change this to say 2 seconds and see the difference.", 'start': 17140.101, 'duration': 4.162}, {'end': 17150.987, 'text': 'Now if you hover over this box, you will see it takes 2 seconds to change the color from pink to green.', 'start': 17145.984, 'duration': 5.003}, {'end': 17165.137, 'text': 'The next one we are going to look is a transition property.', 'start': 17162.796, 'duration': 2.341}, {'end': 17170.08, 'text': 'The transition property sets the CSS properties to which a transition effect should be applied.', 'start': 17165.778, 'duration': 4.302}, {'end': 17173.862, 'text': 'Suppose we want to rotate this box when hovered over.', 'start': 17171.54, 'duration': 2.322}], 'summary': 'Css transition effects: 2 seconds to change color, transition property for rotation.', 'duration': 33.761, 'max_score': 17140.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg17140101.jpg'}, {'end': 17289.76, 'src': 'embed', 'start': 17246.305, 'weight': 7, 'content': [{'end': 17251.708, 'text': 'Ease means it specifies the transition effect with a slow start and then fast and then end slowly.', 'start': 17246.305, 'duration': 5.403}, {'end': 17257.451, 'text': 'Suppose here we will set the transition timing function.', 'start': 17252.668, 'duration': 4.783}, {'end': 17268.811, 'text': 'to ease.', 'start': 17268.251, 'duration': 0.56}, {'end': 17277.635, 'text': 'There are four major values for this timing function.', 'start': 17275.454, 'duration': 2.181}, {'end': 17281.177, 'text': 'They are ease, linear, ease in and ease out.', 'start': 17278.135, 'duration': 3.042}, {'end': 17283.638, 'text': "Let's see one by one in detail.", 'start': 17282.217, 'duration': 1.421}, {'end': 17289.76, 'text': 'So, the linear function specifies the transition effect with the same speed from start to end.', 'start': 17284.538, 'duration': 5.222}], 'summary': 'Explains transition timing functions: ease, linear, ease in, ease out.', 'duration': 43.455, 'max_score': 17246.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg17246305.jpg'}, {'end': 17360.833, 'src': 'embed', 'start': 17326.374, 'weight': 8, 'content': [{'end': 17333.152, 'text': 'So if you set it to ease out You will see at the end the speed decreases.', 'start': 17326.374, 'duration': 6.778}, {'end': 17338.276, 'text': 'The last property we are going to discuss is the transition delay.', 'start': 17335.674, 'duration': 2.602}, {'end': 17342.599, 'text': 'The transition delay property specifies when the transition effect will start.', 'start': 17338.897, 'duration': 3.702}, {'end': 17346.722, 'text': 'The transition delay value is defined in milliseconds or in seconds.', 'start': 17343.64, 'duration': 3.082}, {'end': 17360.833, 'text': "Let's set the transition delay to 2 seconds and just remove this.", 'start': 17348.023, 'duration': 12.81}], 'summary': 'Discussed transition delay with 2-second example', 'duration': 34.459, 'max_score': 17326.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg17326374.jpg'}, {'end': 17459.004, 'src': 'embed', 'start': 17429.209, 'weight': 9, 'content': [{'end': 17435.714, 'text': 'A CSS hover effect is a style technique where the user interacts with an element, with a pointing device, but it does not necessarily activates it.', 'start': 17429.209, 'duration': 6.505}, {'end': 17439.657, 'text': 'It is triggered when the user hovers over an element with a pointing device.', 'start': 17436.676, 'duration': 2.981}, {'end': 17442.218, 'text': "Now let's jump to an example.", 'start': 17440.997, 'duration': 1.221}, {'end': 17447.98, 'text': 'In this example, we will create the hover effect which will look something like this.', 'start': 17444.559, 'duration': 3.421}, {'end': 17450.721, 'text': 'We have different hover effects for all the buttons.', 'start': 17448.6, 'duration': 2.121}, {'end': 17459.004, 'text': "So let's get started and see how you can make this all by yourself.", 'start': 17455.862, 'duration': 3.142}], 'summary': 'Css hover effect creates interactive styles for elements, demonstrated through button examples.', 'duration': 29.795, 'max_score': 17429.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg17429209.jpg'}, {'end': 17957.436, 'src': 'embed', 'start': 17888.99, 'weight': 10, 'content': [{'end': 17893.392, 'text': 'We have the padding and border properly formatted and now we can add the hover effect to this button.', 'start': 17888.99, 'duration': 4.402}, {'end': 17896.469, 'text': 'Now we will add the hover effects to the first button.', 'start': 17894.667, 'duration': 1.802}, {'end': 17945.208, 'text': 'As you can see, we have the hover effect on our first button ready.', 'start': 17942.406, 'duration': 2.802}, {'end': 17949.691, 'text': 'In a similar manner, we can add the effects to the second and third button as well.', 'start': 17946.789, 'duration': 2.902}, {'end': 17957.436, 'text': 'We will just copy and paste this above code below and make changes to this code.', 'start': 17949.711, 'duration': 7.725}], 'summary': 'Adding hover effects to buttons, first button ready, applying to others, copying and pasting code.', 'duration': 68.446, 'max_score': 17888.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg17888990.jpg'}, {'end': 18951.832, 'src': 'embed', 'start': 18868.321, 'weight': 11, 'content': [{'end': 18869.922, 'text': "Now it's time to style our image.", 'start': 18868.321, 'duration': 1.601}, {'end': 18884.546, 'text': 'So we will use the transform property and we will use the rotateX property of it.', 'start': 18875.418, 'duration': 9.128}, {'end': 18889.029, 'text': 'We will keep it to 70 degrees.', 'start': 18884.566, 'duration': 4.463}, {'end': 18942.09, 'text': "Let's discuss this property translate3D.", 'start': 18939.909, 'duration': 2.181}, {'end': 18946.111, 'text': 'The translate3D CSS function repositions an element in the 3D space.', 'start': 18942.73, 'duration': 3.381}, {'end': 18948.671, 'text': 'It results in the transform function data type.', 'start': 18946.931, 'duration': 1.74}, {'end': 18951.832, 'text': 'The transformation is characterized by a three-dimensional vector.', 'start': 18949.511, 'duration': 2.321}], 'summary': 'Styling the image using css transform properties including rotatex to 70 degrees and translate3d function for 3d space repositioning.', 'duration': 83.511, 'max_score': 18868.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg18868321.jpg'}], 'start': 15763.908, 'title': 'Css animation and effects', 'summary': 'Discusses adding colors to a webpage, understanding css animation, applying css animation and transition, creating css hover effects, and creating a 3d image hover effect using css, covering various techniques, properties, and visual effects, with nearly 140 standard color names supported and detailed demonstrations of animation properties and keyframes.', 'chapters': [{'end': 16365.604, 'start': 15763.908, 'title': 'Adding colors to webpage', 'summary': 'Discusses adding colors to a webpage using different methods, including predefined color names, rgb format, and hex values, with nearly 140 standard color names supported, and exploring keyframes in css for specifying animations.', 'duration': 601.696, 'highlights': ['The chapter discusses adding colors to a webpage using different methods, including predefined color names, RGB format, and hex values. It covers the use of nearly 140 standard color names, hex values, and RGB format for specifying colors on a webpage.', 'Exploring keyframes in CSS for specifying animations. It explains the use of keyframes to specify animation code in CSS, with examples demonstrating the initial and ending states, and the ability to add multiple style declarations.']}, {'end': 16955.108, 'start': 16366.325, 'title': 'Understanding css animation', 'summary': 'Covers the basics of css animation, including the animation property and keyframes, demonstrating how to manipulate animation duration, timing functions, delay, iteration count, and fill mode to create complex animations, with a detailed walkthrough of a specific example.', 'duration': 588.783, 'highlights': ['The animation property allows manipulation of various animation aspects, including duration, timing function, delay, iteration count, and fill mode. The animation property enables control over animation parameters, such as duration and timing function, to modify the speed and behavior of the animation.', "Keyframes are instrumental in defining the start and end states of an animation, with the ability to specify intermediate states using percentages. Keyframes play a crucial role in defining the animation's behavior, allowing for precise control over the animation's states and transitions.", "Demonstration of using keyframes to create a complex animation by manipulating the translate properties at different percentages to move an element within its parent. The detailed walkthrough illustrates the practical application of keyframes to create a complex animation, showcasing manipulation of the translate properties at various percentages for precise control over the element's movement."]}, {'end': 17409.635, 'start': 16960.199, 'title': 'Css animation and transition', 'summary': 'Covers the application of the animation property by setting the animation iteration count to 3 and the animation direction to alternate, in addition to illustrating the use of the transition properties including duration, property, timing function, and delay, to enhance user experience and catch attention on the page.', 'duration': 449.436, 'highlights': ['The animation iteration count property specifies the number of times an animation should be played, set to 3. The animation iteration count property is set to 3, specifying the number of times the animation should be played.', 'The animation direction property defines whether an animation should be played forwards, backwards or in alternate cycles, set to alternate. The animation direction property is set to alternate, causing the animation to play in alternate cycles.', 'The transition duration property specifies how many seconds or milliseconds a transition effect takes to complete, demonstrated with changing the color from pink to green in about 500 milliseconds and 2 seconds. The transition duration property is exemplified by changing the color from pink to green in about 500 milliseconds and 2 seconds.', 'The transition property sets the CSS properties to which a transition effect should be applied, demonstrated by setting it to transform for rotating the box when hovered over. The transition property is used to specify the CSS properties to which a transition effect should be applied, exemplified by setting it to transform for rotating the box when hovered over.', 'The transition timing function property specifies the speed curve of the transition effect, with values ease, linear, ease in, and ease out. The transition timing function property is discussed, highlighting the speed curve of the transition effect with values ease, linear, ease in, and ease out.', 'The transition delay property specifies when the transition effect will start, demonstrated by setting it to 2 seconds and observing the delay in the transition effect. The transition delay property is explained, showing how it specifies when the transition effect will start, demonstrated by setting it to 2 seconds and observing the delay in the transition effect.']}, {'end': 18469.217, 'start': 17410.315, 'title': 'Creating css hover effects', 'summary': 'Discusses creating css hover effects, covering the definition of css hover effect, creating hover effects for buttons, and adding 3d effects to images using html and css. it also includes steps to create hover effects, properties used, and the impact of css animations on user experience.', 'duration': 1058.902, 'highlights': ['CSS hover effect is a style technique where the user interacts with an element by hovering over it with a pointing device. The CSS hover effect is a style technique where the user interacts with an element, triggered when the user hovers over an element with a pointing device.', 'Creating hover effects for buttons involves setting position, display, color, font size, font family, text decoration, border, text transformation, and using transition and beforeSelector properties. Creating hover effects for buttons involves setting position, display, color, font size, font family, text decoration, border, text transformation, and using transition and beforeSelector properties to change property values smoothly over a given duration.', '3D effects to images are achieved by setting the position, width, height, margin top, background, and using the transform property with translate, scale, and skew transformations. 3D effects to images are achieved by setting the position, width, height, margin top, background, and using the transform property with translate, scale, and skew transformations.']}, {'end': 19057.202, 'start': 18476.394, 'title': 'Creating 3d image hover effect', 'summary': 'Covers the creation of a 3d image hover effect using css, including setting the 3d transformation, nthchild property, opacity, perspective property, and transform property to achieve the desired visual effect.', 'duration': 580.808, 'highlights': ['The nthChildSelector is used to describe the pattern for matching element indices in a list of siblings, allowing for individual design of each image. (4 occurrences)', 'The 3D hover effect is achieved by setting the transform property for each image, with translations and opacity adjustments, resulting in a visually appealing 3D image hover effect. (3 occurrences)', 'The perspective property is used to give a 3D positioned element some perspective, while the transform style property is set to preserve 3D, enabling positioning of children in 3D space. (2 occurrences)', 'The translate3D CSS function is used to reposition an element in 3D space, characterized by a three-dimensional vector, and the box shadow is set to create a 3D visual effect. (2 occurrences)']}], 'duration': 3293.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg15763908.jpg', 'highlights': ['The chapter discusses adding colors to a webpage using different methods, including predefined color names, RGB format, and hex values.', 'The animation property enables control over animation parameters, such as duration and timing function, to modify the speed and behavior of the animation.', "Keyframes play a crucial role in defining the animation's behavior, allowing for precise control over the animation's states and transitions.", 'The animation iteration count property is set to 3, specifying the number of times the animation should be played.', 'The animation direction property is set to alternate, causing the animation to play in alternate cycles.', 'The transition duration property is exemplified by changing the color from pink to green in about 500 milliseconds and 2 seconds.', 'The transition property is used to specify the CSS properties to which a transition effect should be applied, exemplified by setting it to transform for rotating the box when hovered over.', 'The transition timing function property is discussed, highlighting the speed curve of the transition effect with values ease, linear, ease in, and ease out.', 'The transition delay property is explained, showing how it specifies when the transition effect will start, demonstrated by setting it to 2 seconds and observing the delay in the transition effect.', 'The CSS hover effect is a style technique where the user interacts with an element, triggered when the user hovers over an element with a pointing device.', 'Creating hover effects for buttons involves setting position, display, color, font size, font family, text decoration, border, text transformation, and using transition and beforeSelector properties to change property values smoothly over a given duration.', '3D effects to images are achieved by setting the position, width, height, margin top, background, and using the transform property with translate, scale, and skew transformations.']}, {'end': 21837.632, 'segs': [{'end': 19187.775, 'src': 'embed', 'start': 19127.196, 'weight': 0, 'content': [{'end': 19131.839, 'text': 'After that, you will work on the code to create the basic navigation bar using HTML and CSS.', 'start': 19127.196, 'duration': 4.643}, {'end': 19134.822, 'text': 'So let us begin by discussing what is navigation bar.', 'start': 19132.66, 'duration': 2.162}, {'end': 19142.167, 'text': 'A navigation bar is a graphical user interface intended to aid the user in accessing the information.', 'start': 19137.043, 'duration': 5.124}, {'end': 19144.689, 'text': 'It is usually placed at the top of the page.', 'start': 19142.887, 'duration': 1.802}, {'end': 19147.811, 'text': 'A navigation bar needs standard HTML as the base.', 'start': 19145.369, 'duration': 2.442}, {'end': 19151.614, 'text': 'Navigation bars can be created either vertically or horizontally.', 'start': 19148.632, 'duration': 2.982}, {'end': 19155.078, 'text': 'What makes a navigation bar so important?', 'start': 19153.277, 'duration': 1.801}, {'end': 19162.301, 'text': 'A navigation bar is an important element of website design, since it allows users to quickly visit any sections within the website.', 'start': 19156.078, 'duration': 6.223}, {'end': 19168.404, 'text': 'If you have ever visited a website without a navigation bar, you may have found it difficult to locate the page you need.', 'start': 19163.101, 'duration': 5.303}, {'end': 19174.146, 'text': 'You may have also had to click back several times in order to find a link to the next section you wanted to visit.', 'start': 19169.244, 'duration': 4.902}, {'end': 19180.449, 'text': 'Thankfully, web design has become more standardized in the recent years and nearly every website now includes a navigation bar.', 'start': 19174.947, 'duration': 5.502}, {'end': 19184.172, 'text': 'Keep in mind that you want to keep people on your site to explore further.', 'start': 19181.089, 'duration': 3.083}, {'end': 19187.775, 'text': 'A well designed navigation bar is an important part of the user experience.', 'start': 19184.692, 'duration': 3.083}], 'summary': 'Creating a navigation bar using html and css is crucial for website design and user experience.', 'duration': 60.579, 'max_score': 19127.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg19127196.jpg'}, {'end': 19823.339, 'src': 'embed', 'start': 19790.583, 'weight': 3, 'content': [{'end': 19793.444, 'text': "So let's jump on to the Sublime Text Editor and see these tricks.", 'start': 19790.583, 'duration': 2.861}, {'end': 19796.925, 'text': 'So, the first trick is called the CSS Blend Mode.', 'start': 19793.764, 'duration': 3.161}, {'end': 19804.645, 'text': 'The CSS background blend property sets the blend mode for each background layer and you can blend it with image or with different colors.', 'start': 19797.54, 'duration': 7.105}, {'end': 19808.708, 'text': 'With the help of this property, we can blend background image or blend them with colors.', 'start': 19805.206, 'duration': 3.502}, {'end': 19812.991, 'text': 'So, here is an example of the CSS blend mode.', 'start': 19809.769, 'duration': 3.222}, {'end': 19816.434, 'text': 'Here you can see the images are blended with different colors.', 'start': 19813.572, 'duration': 2.862}, {'end': 19823.339, 'text': "So, let's see how we can achieve this.", 'start': 19821.998, 'duration': 1.341}], 'summary': 'Css blend mode in sublime text editor can blend images with colors.', 'duration': 32.756, 'max_score': 19790.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg19790583.jpg'}, {'end': 20116.294, 'src': 'embed', 'start': 20082.755, 'weight': 4, 'content': [{'end': 20085.316, 'text': "And to start with animation, we'll have to mention a keyframe.", 'start': 20082.755, 'duration': 2.561}, {'end': 20088.677, 'text': 'The keyframes allows us to create different steps for our animations.', 'start': 20085.876, 'duration': 2.801}, {'end': 20093.922, 'text': "We'll keep the keyframes name to blink.", 'start': 20092.261, 'duration': 1.661}, {'end': 20103.327, 'text': "So here in this example, we'll create a box and we'll add different colors at different points of animations.", 'start': 20097.144, 'duration': 6.183}, {'end': 20107.789, 'text': "Right So we'll write 0% and we'll set the background to Indigo.", 'start': 20103.887, 'duration': 3.902}, {'end': 20116.294, 'text': "We'll change the colors five times.", 'start': 20114.933, 'duration': 1.361}], 'summary': 'The animation uses keyframes to change colors five times at different points of the animation.', 'duration': 33.539, 'max_score': 20082.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg20082755.jpg'}, {'end': 20414.621, 'src': 'embed', 'start': 20385.848, 'weight': 5, 'content': [{'end': 20387.129, 'text': 'And you will have a linear gradient here.', 'start': 20385.848, 'duration': 1.281}, {'end': 20395.533, 'text': 'In this video, we are going to learn some of the more advanced features that can be used to optimize your webpage and add some extra features to it.', 'start': 20388.49, 'duration': 7.043}, {'end': 20397.414, 'text': "So let's get started.", 'start': 20396.493, 'duration': 0.921}, {'end': 20401.296, 'text': 'So, the first function we are going to discuss is CSS pseudo class.', 'start': 20397.955, 'duration': 3.341}, {'end': 20408.118, 'text': 'A CSS pseudo class is a keyword added to a selector that specifies a special state of the selected elements.', 'start': 20402.397, 'duration': 5.721}, {'end': 20414.621, 'text': 'Pseudo class lets you apply a style to an element not only in relation to the content of the documentary,', 'start': 20409.599, 'duration': 5.022}], 'summary': 'Learn advanced css features like pseudo class for webpage optimization.', 'duration': 28.773, 'max_score': 20385.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg20385848.jpg'}, {'end': 21443.791, 'src': 'embed', 'start': 21416.068, 'weight': 6, 'content': [{'end': 21419.709, 'text': 'And CSS media queries are one of the most important parts of responsive design.', 'start': 21416.068, 'duration': 3.641}, {'end': 21422.651, 'text': 'In the past, building a website was much simpler.', 'start': 21420.51, 'duration': 2.141}, {'end': 21428.333, 'text': 'Today, a website layout should adapt itself not only to computers but also to tablets, mobile devices and even TV.', 'start': 21422.911, 'duration': 5.422}, {'end': 21434.864, 'text': "Let's see how we can create a responsive web layout using CSS media page with the help of an example.", 'start': 21430.02, 'duration': 4.844}, {'end': 21437.286, 'text': 'So here we have our sublime text editor.', 'start': 21435.284, 'duration': 2.002}, {'end': 21439.647, 'text': "We haven't our standard water print ready.", 'start': 21437.726, 'duration': 1.921}, {'end': 21441.009, 'text': "So let's create something.", 'start': 21440.128, 'duration': 0.881}, {'end': 21443.791, 'text': "So let's start by creating the four divs here.", 'start': 21442.029, 'duration': 1.762}], 'summary': 'Css media queries crucial for responsive web layouts across devices.', 'duration': 27.723, 'max_score': 21416.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg21416068.jpg'}, {'end': 21623.269, 'src': 'embed', 'start': 21596.401, 'weight': 7, 'content': [{'end': 21600.262, 'text': 'So, to design a responsive web page, we use the media queries.', 'start': 21596.401, 'duration': 3.861}, {'end': 21603.323, 'text': "So, what are media queries? Let's first discuss this.", 'start': 21601.103, 'duration': 2.22}, {'end': 21609.165, 'text': "So, media queries are used when we want to customize the website's presentation according to the user's theme type.", 'start': 21604.183, 'duration': 4.982}, {'end': 21616.587, 'text': "With the help of the media queries, we can display different markers based on the device's general type, mobile, desktop, tub, tablet, you name it.", 'start': 21609.685, 'duration': 6.902}, {'end': 21619.047, 'text': 'A media query is a logical operation.', 'start': 21617.546, 'duration': 1.501}, {'end': 21623.269, 'text': 'Whenever a media query becomes true, then the related CSS is applied to the target element.', 'start': 21619.127, 'duration': 4.142}], 'summary': "Media queries customize web page based on user's theme type and device type.", 'duration': 26.868, 'max_score': 21596.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg21596401.jpg'}], 'start': 19057.202, 'title': 'Css for web development', 'summary': 'Covers creating a css navigation bar, css tricks for web development, advanced css features, css layout and animation, and responsive web design with css media queries, emphasizing practical demonstrations and the significance of each topic in enhancing user experience and website usability.', 'chapters': [{'end': 19790.183, 'start': 19057.202, 'title': 'Creating a css navigation bar', 'summary': 'Explains the importance of a navigation bar on a webpage, demonstrates the creation of a basic navigation bar using html and css, and highlights the significance of navigation bars in enhancing user experience and website usability.', 'duration': 732.981, 'highlights': ['A well-designed navigation bar is an important part of the user experience The navigation bar is crucial in website design as it allows users to quickly access various sections within the website, enhancing user experience and usability.', 'Navigation bars are typically placed at the top of the page Navigation bars are usually positioned at the top of the webpage, serving as a graphical user interface for easy information access.', 'The creation of a basic navigation bar using HTML and CSS is demonstrated The tutorial includes a demonstration of creating a basic navigation bar using HTML and CSS, with clear steps on implementing main menus and submenus.']}, {'end': 20384.948, 'start': 19790.583, 'title': 'Css tricks for web development', 'summary': 'Explores css tricks including css blend mode to blend background images with colors, clipping property to create a clipping region for images, animations using keyframes and css gradients for smooth color transitions.', 'duration': 594.365, 'highlights': ['CSS blend mode allows blending background images with colors using properties like normal, multiply, darken, lighter or screen. The CSS blend mode enables blending background images with different colors using properties like normal, multiply, darken, lighter, or screen, providing flexibility in achieving various visual effects.', 'Clipping property creates a clipping region for images, allowing the display of specific regions on the page. The CSS clipmas property creates a clipping region to specify the region shown on the page, offering the ability to display specific shapes or areas as desired.', 'Keyframes in CSS allow creating animations for web elements with defined steps and properties at different points of the animation. Keyframes in CSS enable the creation of animations for web elements, specifying different steps and properties at various points of the animation, providing dynamic visual effects.', 'CSS gradient property enables smooth color transitions between two or more colors, providing visual appeal to web elements. The CSS gradient property allows smooth transitions between multiple colors, enhancing the visual appeal of web elements by creating beautiful and seamless color transitions.']}, {'end': 21112.308, 'start': 20385.848, 'title': 'Advanced css features and optimization', 'summary': 'Covers advanced css features, including pseudo classes like hover and active, pseudo elements like first letter and before, and creating a css loader to optimize webpage performance.', 'duration': 726.46, 'highlights': ['The chapter covers advanced CSS features, including pseudo classes like hover and active, pseudo elements like first letter and before, and creating a CSS loader to optimize webpage performance. It discusses advanced CSS features such as pseudo classes like hover and active, pseudo elements like first letter and before, and creating a CSS loader to optimize webpage performance.', 'The CSS loader is an animation that shows the visitor about the page when it is loading. The CSS loader is an animation that informs visitors about the page loading status and is helpful when a page takes some seconds to load the content.', 'The first pseudo element we are going to discuss is the first letter pseudo element, which applies style to the first letter of the first line of the block level element. It explains the first letter pseudo element, which applies style to the first letter of the first line of the block level element.', 'The first pseudo class we are going to discuss is CSS hover, used to add a special effect to an element when the mouse pointer is over it. It introduces the CSS hover pseudo class, used to add a special effect to an element when the mouse pointer is over it.', 'The active pseudo class represents an element that has been activated by the user either by pointing a device or by a touchscreen device. It describes the active pseudo class, representing an element that has been activated by the user either by pointing a device or by a touchscreen device.']}, {'end': 21395.59, 'start': 21120.54, 'title': 'Css layout and animation', 'summary': 'Covers the usage of calc function for left margin, transform origin function for position change, and defining keyframes and animations with specific time delays and colors for a loader, ensuring synchronization and visibility.', 'duration': 275.05, 'highlights': ['The CALC function is used to determine the left margin by adding CALC 50% and subtracting 1 EM, providing a flexible and dynamic way to calculate property values.', 'The transform origin function is used with the value 1.3 EM and 2 EM to change the position of transformed elements, allowing for 2D transformations along the X and Y axis.', "Keyframes are defined for the animation 'rotate' with 0% rotation at 0 degrees and 100% rotation at 360 degrees, demonstrating a complete rotation.", 'Each class for the loader is defined with a specific animation delay and background color, such as a2 appearing after 0.2 seconds with the color pink, ensuring clear visibility and synchronized appearance.']}, {'end': 21837.632, 'start': 21395.59, 'title': 'Responsive web design with css media queries', 'summary': 'Discusses creating a responsive web layout using css media queries, with examples and demonstrations, emphasizing the importance of responsive design for various devices and explaining the working of media queries with practical illustrations.', 'duration': 442.042, 'highlights': ['The importance of responsive design for various devices The layout should adapt itself not only to computers but also to tablets, mobile devices, and TVs.', "Explanation of media queries and their usage Media queries are used to customize the website's presentation based on the device's general type, and a practical demonstration is provided on how the CSS code takes effect based on the specified conditions.", 'Practical demonstration of using media queries to create responsive web design The process of using media queries to display different content based on the width of the screen is demonstrated with clear examples and illustrations, showcasing the responsiveness for various screen sizes.']}], 'duration': 2780.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg19057202.jpg', 'highlights': ['The creation of a basic navigation bar using HTML and CSS is demonstrated', 'A well-designed navigation bar is an important part of the user experience', 'Navigation bars are typically placed at the top of the page', 'CSS blend mode allows blending background images with colors using properties like normal, multiply, darken, lighter or screen', 'Keyframes in CSS allow creating animations for web elements with defined steps and properties at different points of the animation', 'The chapter covers advanced CSS features, including pseudo classes like hover and active, pseudo elements like first letter and before, and creating a CSS loader to optimize webpage performance', 'The importance of responsive design for various devices', 'Explanation of media queries and their usage']}, {'end': 24329.021, 'segs': [{'end': 21959.406, 'src': 'embed', 'start': 21888.76, 'weight': 0, 'content': [{'end': 21894.482, 'text': "Now, the best part about JavaScript is the fact that it's open source and is cross-platform compatible,", 'start': 21888.76, 'duration': 5.722}, {'end': 21901.525, 'text': 'meaning one piece of code written in any system, regardless of the operating system, functions the same in other operating systems as well.', 'start': 21894.482, 'duration': 7.043}, {'end': 21909.729, 'text': 'Lastly, most commonly used as a part of web pages, it allows client-side script to interact with the user and make dynamic pages.', 'start': 21902.686, 'duration': 7.043}, {'end': 21915.599, 'text': 'Now moving on to the next important question why JavaScript??', 'start': 21912.196, 'duration': 3.403}, {'end': 21923.525, 'text': 'Now being the most popular language in the world, JavaScript has a huge fan base and benefits from a large community support.', 'start': 21917.02, 'duration': 6.505}, {'end': 21931.211, 'text': 'JavaScript is now being used in many industrial fields such as web development, mobile application development and also game development.', 'start': 21924.446, 'duration': 6.765}, {'end': 21933.233, 'text': 'It is very diverse in nature.', 'start': 21931.732, 'duration': 1.501}, {'end': 21941.62, 'text': 'There are great career opportunities for JavaScript developers as this technology seems to be holding on its own when compared to other languages.', 'start': 21934.774, 'duration': 6.846}, {'end': 21949.642, 'text': "Alright now moving on let's go ahead and execute a simple program to understand JavaScript better.", 'start': 21943.7, 'duration': 5.942}, {'end': 21955.665, 'text': "So we'll go ahead and execute a simple hello world program.", 'start': 21952.824, 'duration': 2.841}, {'end': 21959.406, 'text': 'Alright for that first thing you need is a text editor.', 'start': 21956.585, 'duration': 2.821}], 'summary': 'Javascript is open source, cross-platform, popular, and widely used in web, mobile, and game development, offering diverse career opportunities.', 'duration': 70.646, 'max_score': 21888.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg21888760.jpg'}, {'end': 22156.451, 'src': 'embed', 'start': 22130.004, 'weight': 3, 'content': [{'end': 22135.446, 'text': 'In this, we will be learning all about JavaScript arrays and the popular methods of the array object.', 'start': 22130.004, 'duration': 5.442}, {'end': 22141.168, 'text': "So what's in it for you? We'll start by understanding what a JavaScript array is.", 'start': 22137.007, 'duration': 4.161}, {'end': 22147.811, 'text': 'Then we will get to know about the operations that we are performing on the array.', 'start': 22143.709, 'duration': 4.102}, {'end': 22152.79, 'text': "After that, we'll get familiar with some of the most used array methods.", 'start': 22149.409, 'duration': 3.381}, {'end': 22156.451, 'text': "And lastly, we'll go through MapReduce and Filter functions.", 'start': 22153.51, 'duration': 2.941}], 'summary': 'Learn javascript arrays and popular array methods with mapreduce and filter functions.', 'duration': 26.447, 'max_score': 22130.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg22130004.jpg'}, {'end': 22488.628, 'src': 'embed', 'start': 22461.544, 'weight': 4, 'content': [{'end': 22466.825, 'text': 'next up, we have the array length property, which displays the length of the array.', 'start': 22461.544, 'duration': 5.281}, {'end': 22468.526, 'text': 'so again, let me show you how to do that.', 'start': 22466.825, 'duration': 1.701}, {'end': 22476.829, 'text': "let's go back to our code and here let's create a variable and let's call it length variable.", 'start': 22468.526, 'duration': 8.303}, {'end': 22482.011, 'text': 'so i say let len equals cars dot.', 'start': 22476.829, 'duration': 5.182}, {'end': 22487.407, 'text': 'let. Now you can use the length property, which will retrieve the length of the array for us.', 'start': 22482.011, 'duration': 5.396}, {'end': 22488.628, 'text': "It's as simple as that.", 'start': 22487.547, 'duration': 1.081}], 'summary': 'Demonstrating use of array length property to retrieve array length.', 'duration': 27.084, 'max_score': 22461.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg22461544.jpg'}, {'end': 22629.686, 'src': 'embed', 'start': 22573.184, 'weight': 5, 'content': [{'end': 22577.888, 'text': 'so moving on the next array, operation is loop over an array item.', 'start': 22573.184, 'duration': 4.704}, {'end': 22588.217, 'text': "So for that, let's go to our code, and here, let's use the for loop.", 'start': 22579.99, 'duration': 8.227}, {'end': 22611.818, 'text': "So I say cars.forEach, forEach, and within this we'll say item, comma index, comma array,", 'start': 22588.757, 'duration': 23.061}, {'end': 22619.742, 'text': 'and now we use the arrow function and display the content on the console.', 'start': 22611.818, 'duration': 7.924}, {'end': 22629.686, 'text': 'So I say console dot log of item along with its index.', 'start': 22620.362, 'duration': 9.324}], 'summary': 'Using foreach loop to iterate over array items and display content on console.', 'duration': 56.502, 'max_score': 22573.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg22573184.jpg'}, {'end': 23229.141, 'src': 'embed', 'start': 23202.43, 'weight': 8, 'content': [{'end': 23211.734, 'text': 'Now the map method is used for creating a new array from an existing one by applying a function to each and every one of the elements in the first array.', 'start': 23202.43, 'duration': 9.304}, {'end': 23221.218, 'text': "And it does not change the original array, all right? So to make you understand this better, let's go back to our Visual Studio code.", 'start': 23212.634, 'duration': 8.584}, {'end': 23229.141, 'text': "And now here, let's first create another array, okay? So let me call this num1.", 'start': 23223.178, 'duration': 5.963}], 'summary': 'Map method creates new array from existing one without altering original array.', 'duration': 26.711, 'max_score': 23202.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg23202430.jpg'}, {'end': 23466.608, 'src': 'embed', 'start': 23438.027, 'weight': 9, 'content': [{'end': 23439.788, 'text': 'Do not get confused with num2 here.', 'start': 23438.027, 'duration': 1.761}, {'end': 23450.931, 'text': "We've passed num1 here, so it checks for this array, right? So according to the logic, it should display 5, 6, and 7, and it has done so here.", 'start': 23440.368, 'duration': 10.563}, {'end': 23455.192, 'text': 'Okay Moving on.', 'start': 23452.871, 'duration': 2.321}, {'end': 23459.443, 'text': 'The next method is a reduce method.', 'start': 23456.581, 'duration': 2.862}, {'end': 23466.608, 'text': 'Now the reduce method reduces an array of values down to just one single value.', 'start': 23461.204, 'duration': 5.404}], 'summary': 'Demonstrating array iteration methods: filter and reduce.', 'duration': 28.581, 'max_score': 23438.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg23438027.jpg'}, {'end': 23644.159, 'src': 'embed', 'start': 23545.633, 'weight': 10, 'content': [{'end': 23548.774, 'text': 'It displays the sum of the entire values in the array.', 'start': 23545.633, 'duration': 3.141}, {'end': 23551.435, 'text': "We're learning all about JavaScript loops.", 'start': 23549.194, 'duration': 2.241}, {'end': 23556.816, 'text': "If you're new to JavaScript, I suggest you go through our previous videos on this topic.", 'start': 23552.295, 'duration': 4.521}, {'end': 23561.598, 'text': "So without further ado, let's begin and look at what's in store for you.", 'start': 23558.057, 'duration': 3.541}, {'end': 23571.74, 'text': "So we're going to be covering topics like for loop while loop, which also includes the do while loop,", 'start': 23565.799, 'duration': 5.941}, {'end': 23576.784, 'text': "and then we're going to learn about breaking out of a loop and then we'll see how to skip a loop cycle.", 'start': 23571.74, 'duration': 5.044}, {'end': 23583.892, 'text': "Now, before jumping into the for loop, let's first understand what exactly a loop is, right?", 'start': 23577.545, 'duration': 6.347}, {'end': 23590.759, 'text': 'So a loop is basically a programming construct that executes a piece of code as long as a certain condition is met.', 'start': 23584.172, 'duration': 6.587}, {'end': 23593.762, 'text': 'Alright, and there are two different types of loops.', 'start': 23591.64, 'duration': 2.122}, {'end': 23597.186, 'text': 'We have entry control loops and exit control loops.', 'start': 23594.123, 'duration': 3.063}, {'end': 23606.199, 'text': 'Now what exactly are entry control loops? Now these are the loops where the test condition is checked before executing the piece of code.', 'start': 23597.853, 'duration': 8.346}, {'end': 23609.722, 'text': 'For example, you have the for loop and the while loop.', 'start': 23607.02, 'duration': 2.702}, {'end': 23618.148, 'text': 'So in their case, before entering the loop, the condition is checked and only if the condition is met, it enters the loop and executes the code.', 'start': 23610.262, 'duration': 7.886}, {'end': 23624.933, 'text': 'Alright, when it comes to exit control loops, the test condition is checked after the loop has been executed.', 'start': 23618.788, 'duration': 6.145}, {'end': 23632.194, 'text': 'Alright, so in this case, the loop at least gets executed, I mean the code in the loop gets executed at least once.', 'start': 23625.731, 'duration': 6.463}, {'end': 23635.555, 'text': 'So the example for this is the do while loop.', 'start': 23633.254, 'duration': 2.301}, {'end': 23640.997, 'text': "Alright, with this basic knowledge, let's go ahead and learn about the different loops.", 'start': 23636.356, 'duration': 4.641}, {'end': 23644.159, 'text': 'So the first loop is the for loop.', 'start': 23642.538, 'duration': 1.621}], 'summary': 'Introduction to javascript loops and types: for, while, do while.', 'duration': 98.526, 'max_score': 23545.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg23545633.jpg'}, {'end': 23689.43, 'src': 'embed', 'start': 23666.62, 'weight': 12, 'content': [{'end': 23673.946, 'text': "every time you print the loop once it's equal to 10 or even greater than 10, it ends the loop right.", 'start': 23666.62, 'duration': 7.326}, {'end': 23678.24, 'text': 'So let me help you understand this better with an example.', 'start': 23674.597, 'duration': 3.643}, {'end': 23681.143, 'text': "So let's go to our editor that is vs code.", 'start': 23678.761, 'duration': 2.382}, {'end': 23689.43, 'text': "Here I've created a folder called demo underscore loops within which I've created a file called for loops.", 'start': 23683.305, 'duration': 6.125}], 'summary': 'Loop ends when equal to or greater than 10.', 'duration': 22.81, 'max_score': 23666.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg23666620.jpg'}, {'end': 24172.664, 'src': 'embed', 'start': 24138.869, 'weight': 14, 'content': [{'end': 24142.13, 'text': 'Moving on to the next concept, breaking out of a loop.', 'start': 24138.869, 'duration': 3.261}, {'end': 24146.952, 'text': 'Now as the name suggests, break is the keyword that is used to break out of a loop.', 'start': 24142.83, 'duration': 4.122}, {'end': 24149.533, 'text': 'Now here is a simple code for you.', 'start': 24147.852, 'duration': 1.681}, {'end': 24156.08, 'text': 'So according to the logic, it prints the values between 1 to 10.', 'start': 24150.518, 'duration': 5.562}, {'end': 24159.821, 'text': 'And say at the value 5, you want to break out of the loop.', 'start': 24156.08, 'duration': 3.741}, {'end': 24162.241, 'text': 'You can simply use the keyword break.', 'start': 24160.421, 'duration': 1.82}, {'end': 24164.462, 'text': "So let's go back to our VS Code.", 'start': 24162.901, 'duration': 1.561}, {'end': 24172.664, 'text': 'And here, let me just make it simple and save.', 'start': 24166.062, 'duration': 6.602}], 'summary': "Using the 'break' keyword to exit a loop in code.", 'duration': 33.795, 'max_score': 24138.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg24138869.jpg'}], 'start': 21838.052, 'title': 'Javascript fundamentals, arrays, array methods, and loops overview', 'summary': 'Covers javascript fundamentals, including its features, applications, and a simple hello world program, as well as arrays, popular array methods, and various types of loops. it provides detailed explanations, practical demonstrations, and emphasizes the importance of practicing and experimenting with javascript. the chapter also highlights diverse career opportunities for developers.', 'chapters': [{'end': 22129.244, 'start': 21838.052, 'title': 'Javascript fundamentals and hello world program', 'summary': 'Covers the fundamental concepts of javascript, including its features, applications, and a detailed explanation of executing a simple hello world program, highlighting its cross-platform compatibility and diverse career opportunities for developers.', 'duration': 291.192, 'highlights': ['JavaScript is a dynamic, lightweight, and object-oriented programming language, open source, and cross-platform compatible. JavaScript is described as dynamic, lightweight, and object-oriented, with an emphasis on its open-source nature and cross-platform compatibility.', 'JavaScript is widely used in web development, mobile application development, and game development, offering diverse career opportunities for developers. JavaScript is utilized in various industrial fields, such as web, mobile application, and game development, providing diverse career opportunities for developers.', "Execution of a simple hello world program using JavaScript involves adding JavaScript to the HTML code and printing 'hello world' on the browser window. The process of executing a simple hello world program using JavaScript is detailed, involving adding JavaScript to the HTML code and displaying 'hello world' on the browser window."]}, {'end': 22666.72, 'start': 22130.004, 'title': 'Javascript arrays & methods', 'summary': 'Covers javascript arrays, array operations, and popular methods. it includes creating, accessing, and looping over array elements, and explains the length property and accessing the last array element. it also demonstrates using foreach to iterate over array items.', 'duration': 536.716, 'highlights': ['The chapter covers JavaScript arrays, array operations, and popular methods. Provides an overview of the chapter content, setting the context for the following detailed highlights.', 'It includes creating, accessing, and looping over array elements, and explains the length property and accessing the last array element. Highlights the key operations and properties related to JavaScript arrays, emphasizing practical usage and functionality.', 'Demonstrates using forEach to iterate over array items. Illustrates the usage of the forEach method to iterate over array items, showcasing practical implementation and output.']}, {'end': 23545.133, 'start': 22666.9, 'title': 'Array methods in javascript', 'summary': 'Covers array methods in javascript including tostring, pop, push, shift, unshift, concat, sort, reverse, map, filter, and reduce, with practical demonstrations and code examples, showcasing their functionality and usage.', 'duration': 878.233, 'highlights': ['The chapter covers array methods in JavaScript including toString, pop, push, shift, unshift, concat, sort, reverse, map, filter, and reduce. It provides a comprehensive overview of various array methods in JavaScript, demonstrating a wide range of functionalities and practical usage.', 'Practical demonstrations and code examples are shown for each method, showcasing their functionality and usage. The transcript includes practical demonstrations and code examples for each array method, providing a clear understanding of their functionality and practical usage.', 'The map method is used for creating a new array from an existing one by applying a function to each element, and the filter method applies a conditional statement against each element in an array. The map method creates a new array by applying a function to each element, while the filter method uses a conditional statement to filter elements based on a condition.', 'The reduce method reduces an array of values to a single value by running a reducer function on each element. The reduce method reduces an array of values to a single value by running a reducer function on each element, showcasing its ability to condense an array to a single value.']}, {'end': 23841.399, 'start': 23545.633, 'title': 'Javascript loops overview', 'summary': 'Discusses javascript loops, covering topics like for loop, while loop, and do while loop, with examples and explanations of entry control and exit control loops, providing a clear understanding of how these loops work and their applications.', 'duration': 295.766, 'highlights': ['The chapter discusses JavaScript loops, covering topics like for loop, while loop, and do while loop The chapter provides an overview of JavaScript loops, including different types of loops like for loop, while loop, and do while loop.', 'Explanation of entry control and exit control loops The chapter explains the concepts of entry control and exit control loops, providing a clear understanding of when the test condition is checked in relation to loop execution.', 'Example and explanation of for loop The chapter presents an example and explanation of the for loop, demonstrating how it can be used to execute a piece of code as long as a certain condition is met, with a specific example of printing a word multiple times.']}, {'end': 24329.021, 'start': 23841.879, 'title': 'Javascript loops: for, while, do-while, break, and continue', 'summary': 'Explains the concepts of for, while, and do-while loops, along with the usage of break and continue keywords, displaying and skipping loop cycles, using javascript code examples, and emphasizing the importance of practicing and experimenting with loops.', 'duration': 487.142, 'highlights': ['The chapter explains the concepts of for, while, and do-while loops It covers the fundamental concepts of different types of loops in JavaScript, including for, while, and do-while loops.', 'The usage of break and continue keywords in loops is illustrated with JavaScript code examples Demonstrates the use of break to exit a loop and continue to skip a particular loop cycle with JavaScript code examples.', 'Emphasizes the importance of practicing and experimenting with loops for better understanding Stresses the significance of practicing and experimenting with loops to gain a better understanding of their functionality and usage.']}], 'duration': 2490.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg21838052.jpg', 'highlights': ['JavaScript is dynamic, lightweight, and object-oriented, open source, and cross-platform compatible.', 'JavaScript is widely used in web, mobile application, and game development, offering diverse career opportunities for developers.', "Execution of a simple hello world program using JavaScript involves adding JavaScript to the HTML code and printing 'hello world' on the browser window.", 'The chapter covers JavaScript arrays, array operations, and popular methods.', 'It includes creating, accessing, and looping over array elements, and explains the length property and accessing the last array element.', 'Demonstrates using forEach to iterate over array items.', 'The chapter covers array methods in JavaScript including toString, pop, push, shift, unshift, concat, sort, reverse, map, filter, and reduce.', 'Practical demonstrations and code examples are shown for each method, showcasing their functionality and usage.', 'The map method is used for creating a new array from an existing one by applying a function to each element, and the filter method applies a conditional statement against each element in an array.', 'The reduce method reduces an array of values to a single value by running a reducer function on each element.', 'The chapter discusses JavaScript loops, covering topics like for loop, while loop, and do while loop.', 'Explanation of entry control and exit control loops.', 'Example and explanation of for loop.', 'The chapter explains the concepts of for, while, and do-while loops.', 'The usage of break and continue keywords in loops is illustrated with JavaScript code examples.', 'Emphasizes the importance of practicing and experimenting with loops for better understanding.']}, {'end': 27535.888, 'segs': [{'end': 24385.619, 'src': 'embed', 'start': 24355.601, 'weight': 0, 'content': [{'end': 24358.722, 'text': "Lastly, we'll understand what JavaScript accessors are.", 'start': 24355.601, 'duration': 3.121}, {'end': 24370.568, 'text': 'So what is a JavaScript object? JavaScript is an object-oriented programming language, so everything in Java is an object.', 'start': 24362.064, 'duration': 8.504}, {'end': 24377.215, 'text': 'A JavaScript object is like a real-world entity having state and behavior, for example a car.', 'start': 24371.553, 'duration': 5.662}, {'end': 24379.736, 'text': 'Now we can take a car as an object.', 'start': 24377.956, 'duration': 1.78}, {'end': 24382.357, 'text': 'It will have its state like color and model.', 'start': 24380.317, 'duration': 2.04}, {'end': 24385.619, 'text': 'It will also have behaviors like accelerate and brake.', 'start': 24382.878, 'duration': 2.741}], 'summary': 'Javascript objects represent real-world entities with state and behavior.', 'duration': 30.018, 'max_score': 24355.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg24355601.jpg'}, {'end': 24440.097, 'src': 'embed', 'start': 24409.854, 'weight': 1, 'content': [{'end': 24413.376, 'text': 'Now basically, there are three different ways of creating a JavaScript object.', 'start': 24409.854, 'duration': 3.522}, {'end': 24415.638, 'text': "Alright, so we'll look at them one by one.", 'start': 24413.897, 'duration': 1.741}, {'end': 24420.981, 'text': 'The first one is to use a literal to create and define a JavaScript object.', 'start': 24416.738, 'duration': 4.243}, {'end': 24424.867, 'text': "So let's go to our VS Code editor.", 'start': 24422.785, 'duration': 2.082}, {'end': 24433.973, 'text': 'Now, if you have any doubts regarding the initial setup, then I suggest you go through the previous video, that is, JavaScript Aries,', 'start': 24426.087, 'duration': 7.886}, {'end': 24435.674, 'text': 'to get you started with it.', 'start': 24433.973, 'duration': 1.701}, {'end': 24440.097, 'text': "So here I've created a folder called demo objects.", 'start': 24436.134, 'duration': 3.963}], 'summary': 'Three ways to create javascript objects discussed.', 'duration': 30.243, 'max_score': 24409.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg24409854.jpg'}, {'end': 25096.628, 'src': 'embed', 'start': 25063.213, 'weight': 3, 'content': [{'end': 25066.775, 'text': 'And when you look at the web page, it still displays the same thing.', 'start': 25063.213, 'duration': 3.562}, {'end': 25069.697, 'text': 'These are different ways of accessing the properties.', 'start': 25067.155, 'duration': 2.542}, {'end': 25073.198, 'text': "You can update them, delete them, unless they're read-only.", 'start': 25070.017, 'duration': 3.181}, {'end': 25079.062, 'text': "Alright, so let's move on to the next concept, object methods.", 'start': 25075.52, 'duration': 3.542}, {'end': 25084.963, 'text': 'Now basically a JavaScript method is an action that can be performed on the objects.', 'start': 25079.861, 'duration': 5.102}, {'end': 25088.805, 'text': "So you'll understand better with the help of the demo.", 'start': 25085.984, 'duration': 2.821}, {'end': 25096.628, 'text': "So let's go back to RBS code and here I've created another HTML file called objects underscore methods.", 'start': 25089.725, 'duration': 6.903}], 'summary': 'Web page displays same content, shows ways to access properties, update or delete them. object methods are actions performed on javascript objects. demo provided for better understanding.', 'duration': 33.415, 'max_score': 25063.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg25063213.jpg'}, {'end': 25251.606, 'src': 'embed', 'start': 25210.246, 'weight': 4, 'content': [{'end': 25222.735, 'text': "So now, once the declaration is done, what we're going to do is we're going to use create another property, basically say user dot,", 'start': 25210.246, 'duration': 12.489}, {'end': 25227.398, 'text': "let's say message and assign.", 'start': 25222.735, 'duration': 4.663}, {'end': 25228.259, 'text': 'say hi to it.', 'start': 25227.398, 'duration': 0.861}, {'end': 25238.892, 'text': "So basically what we're doing is we're adding the previously created method to a new property that is user.message, the message property.", 'start': 25230.083, 'duration': 8.809}, {'end': 25239.813, 'text': 'All right.', 'start': 25239.493, 'duration': 0.32}, {'end': 25251.606, 'text': 'So now I say document.getElementById and say demo.', 'start': 25241.015, 'duration': 10.591}], 'summary': 'Creating a new user message property and adding a previously created method to it.', 'duration': 41.36, 'max_score': 25210.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg25210246.jpg'}, {'end': 25369.969, 'src': 'embed', 'start': 25342.754, 'weight': 5, 'content': [{'end': 25352.139, 'text': "Alright So now let's move on to the next concept that is Java object accessors.", 'start': 25342.754, 'duration': 9.385}, {'end': 25357.442, 'text': 'Now getters and setters allow defining an object accessor.', 'start': 25353.38, 'duration': 4.062}, {'end': 25358.283, 'text': 'All right.', 'start': 25357.942, 'duration': 0.341}, {'end': 25368.008, 'text': 'To get the value of a property in a JavaScript object, we use a getter and to set the value of a property of a JavaScript object, we use a setter.', 'start': 25358.563, 'duration': 9.445}, {'end': 25369.969, 'text': "So let's go back to our demo.", 'start': 25368.668, 'duration': 1.301}], 'summary': 'Java object accessors: getters and setters define object accessors in javascript.', 'duration': 27.215, 'max_score': 25342.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg25342754.jpg'}, {'end': 25668.782, 'src': 'embed', 'start': 25641.993, 'weight': 6, 'content': [{'end': 25648.718, 'text': 'So in JavaScript, the this keyword basically refers to an object which is executing the current piece of code.', 'start': 25641.993, 'duration': 6.725}, {'end': 25655.224, 'text': 'While in simple terms, this keyword basically just references the object that is executing the current function.', 'start': 25649.299, 'duration': 5.925}, {'end': 25663.718, 'text': 'Now, if the function that is being referenced is a regular function, then this keyword references the global object.', 'start': 25656.252, 'duration': 7.466}, {'end': 25668.782, 'text': "Alright, I'm sure it must be a little tricky at the moment, but please hold on.", 'start': 25664.819, 'duration': 3.963}], 'summary': "In javascript, 'this' refers to the executing object, referencing the current function; for regular functions, 'this' refers to the global object.", 'duration': 26.789, 'max_score': 25641.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg25641993.jpg'}, {'end': 25920.094, 'src': 'embed', 'start': 25895.39, 'weight': 7, 'content': [{'end': 25903.971, 'text': 'So, if you clearly observe here, when we say this dot name, since it is being used within a method that is defined inside an object,', 'start': 25895.39, 'duration': 8.581}, {'end': 25906.652, 'text': 'it references to this property here.', 'start': 25903.971, 'duration': 2.681}, {'end': 25913.213, 'text': 'Alright, unlike this case where it references to the global variable that was mentioned outside.', 'start': 25908.092, 'duration': 5.121}, {'end': 25916.814, 'text': 'So I hope this helped you understand the difference between the two.', 'start': 25914.153, 'duration': 2.661}, {'end': 25920.094, 'text': "Now let's look at another simple example.", 'start': 25918.014, 'duration': 2.08}], 'summary': 'Understanding difference between local and global variable referencing.', 'duration': 24.704, 'max_score': 25895.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg25895390.jpg'}, {'end': 26152.958, 'src': 'embed', 'start': 26125.88, 'weight': 8, 'content': [{'end': 26130.761, 'text': "Also, don't forget to subscribe to our channel and hit the bell icon to never miss an update.", 'start': 26125.88, 'duration': 4.881}, {'end': 26135.381, 'text': 'Moving on to our first topic, what are JavaScript functions?', 'start': 26131.881, 'duration': 3.5}, {'end': 26143.343, 'text': 'So, basically, a function is a group of reusable code which can be called from anywhere in your program.', 'start': 26137.342, 'duration': 6.001}, {'end': 26149.036, 'text': 'right?. When you have a piece of code that you want to execute repeatedly in your entire program,', 'start': 26143.343, 'duration': 5.693}, {'end': 26152.958, 'text': 'it makes more sense to define it once and call it over and over right?', 'start': 26149.036, 'duration': 3.922}], 'summary': 'Javascript functions are reusable code for repeated execution in a program.', 'duration': 27.078, 'max_score': 26125.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg26125880.jpg'}, {'end': 26305.249, 'src': 'embed', 'start': 26278.201, 'weight': 9, 'content': [{'end': 26281.324, 'text': 'Moving on to the next concept, function expression.', 'start': 26278.201, 'duration': 3.123}, {'end': 26285.233, 'text': 'Now what we learnt previously was function declaration.', 'start': 26282.13, 'duration': 3.103}, {'end': 26288.515, 'text': 'But a function can also be defined as an expression.', 'start': 26285.913, 'duration': 2.602}, {'end': 26290.957, 'text': 'Now this is what the syntax looks like.', 'start': 26289.196, 'duration': 1.761}, {'end': 26297.183, 'text': 'Now here the function is created and assigned to the variable explicitly like any other value.', 'start': 26291.798, 'duration': 5.385}, {'end': 26299.084, 'text': 'The meaning remains the same.', 'start': 26297.983, 'duration': 1.101}, {'end': 26305.249, 'text': "That is you create the function and store the value that it returns into a variable and in our case it's x.", 'start': 26299.304, 'duration': 5.945}], 'summary': 'Function expression is a way to assign a function to a variable explicitly.', 'duration': 27.048, 'max_score': 26278.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg26278201.jpg'}, {'end': 26784.031, 'src': 'embed', 'start': 26755.993, 'weight': 10, 'content': [{'end': 26758.774, 'text': 'So this is how you can make use of functions as values.', 'start': 26755.993, 'duration': 2.781}, {'end': 26763.996, 'text': 'Moving on to the next topic, functions as objects.', 'start': 26760.515, 'duration': 3.481}, {'end': 26769.738, 'text': 'Now JavaScript functions are a special type of objects called function objects.', 'start': 26765.596, 'duration': 4.142}, {'end': 26775.48, 'text': 'Now a function includes a string which holds the actual code, that is the function body of the function.', 'start': 26770.218, 'duration': 5.262}, {'end': 26777.821, 'text': 'The code is literally just a string.', 'start': 26776.26, 'duration': 1.561}, {'end': 26784.031, 'text': 'Although not recommended, you can also create a function with the help of the function constructor.', 'start': 26778.59, 'duration': 5.441}], 'summary': 'Javascript functions are objects, with code as a string and can be created using function constructor.', 'duration': 28.038, 'max_score': 26755.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg26755993.jpg'}, {'end': 26936.553, 'src': 'embed', 'start': 26908.009, 'weight': 11, 'content': [{'end': 26912.75, 'text': 'Now functions can be written more compactly and more precisely with the help of arrow functions.', 'start': 26908.009, 'duration': 4.741}, {'end': 26918.711, 'text': 'Alright, now arrow function expressions are ill-suited as methods and they cannot be used as constructors.', 'start': 26913.41, 'duration': 5.301}, {'end': 26927.328, 'text': 'Now also while using arrow functions, using const is a safer option because a function expression is always a constant value.', 'start': 26919.724, 'duration': 7.604}, {'end': 26929.489, 'text': 'So this is the syntax.', 'start': 26928.369, 'duration': 1.12}, {'end': 26936.553, 'text': 'Now you can only omit the return keyword within the curly braces if the function is a single statement.', 'start': 26930.029, 'duration': 6.524}], 'summary': 'Arrow functions offer concise and precise syntax, but are unsuitable as methods or constructors. const usage is recommended for arrow functions.', 'duration': 28.544, 'max_score': 26908.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg26908009.jpg'}, {'end': 27129.62, 'src': 'embed', 'start': 27097.796, 'weight': 12, 'content': [{'end': 27100.857, 'text': 'So an asterisk indicates that the function is a generator function.', 'start': 27097.796, 'duration': 3.061}, {'end': 27107.859, 'text': "So here you can see that we have a function followed by asterisk and we've created a function called generator sequence.", 'start': 27101.897, 'duration': 5.962}, {'end': 27115.393, 'text': 'So here you can see we have the asterisk after the keyword function, followed by the name of the function right?', 'start': 27108.689, 'duration': 6.704}, {'end': 27121.015, 'text': 'But the main method of a generator function is the next method.', 'start': 27117.314, 'duration': 3.701}, {'end': 27129.62, 'text': 'When this method is called, it basically runs the execution until the nearest yield value or the nearest yield statement.', 'start': 27121.616, 'duration': 8.004}], 'summary': 'Generator functions use asterisk and yield to control execution flow.', 'duration': 31.824, 'max_score': 27097.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg27097796.jpg'}, {'end': 27364.886, 'src': 'embed', 'start': 27337.674, 'weight': 13, 'content': [{'end': 27341.035, 'text': "Now let's move on to our last topic, that is predefined functions.", 'start': 27337.674, 'duration': 3.361}, {'end': 27346.678, 'text': 'Now JavaScript has many built-in functions, alright? Now here are a few of them.', 'start': 27342.696, 'duration': 3.982}, {'end': 27351.4, 'text': 'We have eval, parseInt, parseFloat, escape and unescape.', 'start': 27347.138, 'duration': 4.262}, {'end': 27353.841, 'text': "Now let's go through one by one.", 'start': 27352, 'duration': 1.841}, {'end': 27356.522, 'text': 'Alright, first up is eval.', 'start': 27355.202, 'duration': 1.32}, {'end': 27364.886, 'text': 'Now this basically evaluates a string and returns a value, alright? So to help you understand this better, let me go back to our VS Code.', 'start': 27356.902, 'duration': 7.984}], 'summary': 'Javascript has several predefined functions including eval, parseint, parsefloat, escape, and unescape.', 'duration': 27.212, 'max_score': 27337.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg27337674.jpg'}], 'start': 24329.941, 'title': 'Javascript objects and functions', 'summary': "Introduces javascript objects, covers object creation and properties, explains java object accessors, describes the 'this' keyword, and covers functions as values, objects, arrow and generator functions, including predefined functions in javascript.", 'chapters': [{'end': 24897.857, 'start': 24329.941, 'title': 'Javascript objects basics', 'summary': 'Introduces javascript objects, covering their definition, creation using object literals, the new keyword, and object constructors, with an example showcasing the creation and display of a javascript object.', 'duration': 567.916, 'highlights': ['JavaScript is an object-oriented programming language, so everything in Java is an object. JavaScript is an object-oriented programming language.', 'JavaScript object is like a real-world entity with state and behavior, for example, a car. JavaScript object is analogous to a real-world entity with state and behavior.', 'Three different ways of creating a JavaScript object: using object literals, the new keyword, and object constructors. Three different ways of creating a JavaScript object.', 'Example of creating a JavaScript object using object literals, and displaying its properties. Example of creating a JavaScript object using object literals, and displaying its properties.']}, {'end': 25341.393, 'start': 24898.337, 'title': 'Javascript object properties & methods', 'summary': 'Covers creating and updating object properties in javascript using a demo, highlighting methods for accessing and displaying properties. additionally, it explains creating object methods, including adding a method as a new property and displaying a message on button click.', 'duration': 443.056, 'highlights': ['The chapter covers creating and updating object properties in JavaScript using a demo, highlighting methods for accessing and displaying properties. It discusses creating objects, adding properties, updating property values, and different methods for accessing and displaying properties.', 'It explains creating object methods, including adding a method as a new property and displaying a message on button click. It demonstrates creating a method, adding it as a new property to an object, and displaying a message on button click using the method.']}, {'end': 25810.4, 'start': 25342.754, 'title': 'Java object accessors', 'summary': "Covers java object accessors, including getters and setters for accessing and setting property values of javascript objects, as well as the usage of 'this' keyword in javascript to refer to the executing object and its relation to regular functions and methods.", 'duration': 467.646, 'highlights': ['The chapter covers the concept of Java object accessors, including getters and setters for accessing and setting property values of JavaScript objects.', "The usage of 'this' keyword in JavaScript is explained, mentioning its reference to the executing object and its difference in behavior between regular functions and methods.", "The demonstration of accessing and setting property values of JavaScript objects using getters and setters is provided, showcasing the retrieval of 'diesel' and 'petrol' as property values.", "The explanation and demonstration of the 'this' keyword in JavaScript, illustrating its reference to the executing object and the global object in the context of regular functions and methods."]}, {'end': 26755.993, 'start': 25813.533, 'title': "Understanding the 'this' keyword in javascript", 'summary': "Explains the behavior of the 'this' keyword within object methods, including examples and explanations. it also covers the concept of javascript functions, function expressions, function constructors, self-invoking functions, and functions as values, providing syntax and examples.", 'duration': 942.46, 'highlights': ["The 'this' keyword references the property within an object method and to the global variable mentioned outside the method. When used within an object method, the 'this' keyword references the property within the object, unlike when referencing the global variable mentioned outside the method.", "The 'this' keyword referencing to the global object within a callback function can be resolved by passing the object as a property to the method. When the 'this' keyword is referenced within a callback function, it resolves to the global object, which can be resolved by passing the object as a property to the method, ensuring it references the current object.", 'JavaScript functions are described as a group of reusable code that can be called from anywhere in the program, improving efficiency and modularity. Functions are defined as a group of reusable code that can be called from anywhere in the program, making the code more efficient, readable, and aiding in writing modular codes.', 'Function expressions allow the creation of a function that can be assigned to a variable and called as needed, providing flexibility in function definition and usage. Function expressions enable the creation of a function that can be assigned to a variable, offering flexibility in function definition and usage.', "The function constructor in JavaScript allows the creation of functions using the 'new' keyword and the constructor function, providing a different approach to function definition and invocation. The function constructor in JavaScript enables the creation of functions using the 'new' keyword and the constructor function, offering an alternative approach to function definition and invocation."]}, {'end': 27535.888, 'start': 26755.993, 'title': 'Functions as values, objects, arrow and generator functions', 'summary': 'Covers how functions can be used as values and objects, demonstrating the creation and execution of functions as objects, followed by the usage of arrow functions for concise writing, and the implementation and execution of a generator function to return multiple values. it concludes with a brief overview of predefined functions in javascript, such as eval, parseint, parsefloat, and escape.', 'duration': 779.895, 'highlights': ['Functions as values and objects The chapter explains the creation and execution of functions as objects, including the use of new keyword, function constructor, and alert message to display function output.', 'Arrow functions usage It demonstrates the usage and syntax of arrow functions, emphasizing the compact and precise writing, the restriction on using them as methods and constructors, and the recommendation to use const for function expressions.', 'Generator function implementation The implementation and execution of a generator function are detailed, highlighting the use of asterisk notation, the role of the next method, and the returned object properties, value and done.', 'Predefined functions overview The chapter provides an overview of predefined functions in JavaScript, including eval, parseInt, parseFloat, and escape, with a brief explanation of their syntax and usage.']}], 'duration': 3205.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg24329941.jpg', 'highlights': ['JavaScript is an object-oriented programming language, so everything in Java is an object.', 'Three different ways of creating a JavaScript object.', 'JavaScript object is like a real-world entity with state and behavior, for example, a car.', 'The chapter covers creating and updating object properties in JavaScript using a demo.', 'It explains creating object methods, including adding a method as a new property and displaying a message on button click.', 'The chapter covers the concept of Java object accessors, including getters and setters for accessing and setting property values of JavaScript objects.', "The usage of 'this' keyword in JavaScript is explained, mentioning its reference to the executing object and its difference in behavior between regular functions and methods.", "The 'this' keyword references the property within an object method and to the global variable mentioned outside the method.", 'JavaScript functions are described as a group of reusable code that can be called from anywhere in the program, improving efficiency and modularity.', 'Function expressions allow the creation of a function that can be assigned to a variable and called as needed, providing flexibility in function definition and usage.', 'Functions as values and objects The chapter explains the creation and execution of functions as objects, including the use of new keyword, function constructor, and alert message to display function output.', 'Arrow functions usage It demonstrates the usage and syntax of arrow functions, emphasizing the compact and precise writing, the restriction on using them as methods and constructors, and the recommendation to use const for function expressions.', 'Generator function implementation The implementation and execution of a generator function are detailed, highlighting the use of asterisk notation, the role of the next method, and the returned object properties, value and done.', 'Predefined functions overview The chapter provides an overview of predefined functions in JavaScript, including eval, parseInt, parseFloat, and escape, with a brief explanation of their syntax and usage.']}, {'end': 29516.944, 'segs': [{'end': 27582.583, 'src': 'embed', 'start': 27558.072, 'weight': 0, 'content': [{'end': 27565.219, 'text': 'Now every time you miss out on giving a particular detail or end up giving faulty information, the website alerts you.', 'start': 27558.072, 'duration': 7.147}, {'end': 27572.105, 'text': 'So this process of ensuring that the information provided is legit is called form validation.', 'start': 27566.2, 'duration': 5.905}, {'end': 27575.599, 'text': 'Now this generally happens on the server side.', 'start': 27573.257, 'duration': 2.342}, {'end': 27582.583, 'text': 'However, JavaScript facilitates form validation on the client computer before sending it over to the server.', 'start': 27576.179, 'duration': 6.404}], 'summary': 'Website alerts for missing/faulty details; form validation on client computer before server.', 'duration': 24.511, 'max_score': 27558.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg27558072.jpg'}, {'end': 27635.973, 'src': 'embed', 'start': 27606.822, 'weight': 5, 'content': [{'end': 27610.665, 'text': "Alright, so back in my Visual Studio code, I've created a file called forms.", 'start': 27606.822, 'duration': 3.843}, {'end': 27614.468, 'text': "Alright, it's an HTML file and I've typed down the initial code.", 'start': 27611.346, 'duration': 3.122}, {'end': 27621.795, 'text': "Now the simple use case that I'm going to show will include the validation of the email and the password fields in a form.", 'start': 27615.289, 'duration': 6.506}, {'end': 27625.938, 'text': "Alright, so for that, let's go ahead and first create a simple form.", 'start': 27622.535, 'duration': 3.403}, {'end': 27630.222, 'text': 'So here, HTML allows the form tag.', 'start': 27627.459, 'duration': 2.763}, {'end': 27631.563, 'text': 'So I say form.', 'start': 27630.642, 'duration': 0.921}, {'end': 27635.973, 'text': "within which I'm going to provide our fields.", 'start': 27633.072, 'duration': 2.901}], 'summary': 'Created an html form in visual studio code for email and password validation.', 'duration': 29.151, 'max_score': 27606.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg27606822.jpg'}, {'end': 27738.611, 'src': 'embed', 'start': 27712.524, 'weight': 1, 'content': [{'end': 27717.426, 'text': "We've successfully created an email field, a password field, and a submit button.", 'start': 27712.524, 'duration': 4.902}, {'end': 27723.147, 'text': 'And every time I click on the submit button, you can see that my page is getting refreshed.', 'start': 27718.006, 'duration': 5.141}, {'end': 27730.047, 'text': 'Now once the user provides the correct email ID and password, we want to display a message.', 'start': 27724.744, 'duration': 5.303}, {'end': 27737.45, 'text': "Alright, so for that I've created another file called message.html and this is a simple file where I'm displaying the message.", 'start': 27730.467, 'duration': 6.983}, {'end': 27738.611, 'text': 'Hello there, welcome.', 'start': 27737.55, 'duration': 1.061}], 'summary': 'Created email and password fields, submit button. refreshes on click. displays welcome message upon correct login.', 'duration': 26.087, 'max_score': 27712.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg27712524.jpg'}, {'end': 27804.69, 'src': 'embed', 'start': 27775.299, 'weight': 2, 'content': [{'end': 27776.58, 'text': 'So let me just save this.', 'start': 27775.299, 'duration': 1.281}, {'end': 27779.342, 'text': 'All right.', 'start': 27779.042, 'duration': 0.3}, {'end': 27782.844, 'text': 'So moving on, we have to now validate the information that is provided.', 'start': 27779.562, 'duration': 3.282}, {'end': 27785.565, 'text': "For that, I'm going to create a function here.", 'start': 27783.384, 'duration': 2.181}, {'end': 27790.987, 'text': 'So let me call the function validate.', 'start': 27787.126, 'duration': 3.861}, {'end': 27793.708, 'text': 'All right.', 'start': 27793.348, 'duration': 0.36}, {'end': 27796.47, 'text': "So here I'm going to check my fields.", 'start': 27794.629, 'duration': 1.841}, {'end': 27804.69, 'text': "Right Now, if the email field is empty, then I'm going to alert the user saying, please enter the email.", 'start': 27796.95, 'duration': 7.74}], 'summary': 'Creating a validation function to check if email field is empty.', 'duration': 29.391, 'max_score': 27775.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg27775299.jpg'}, {'end': 28140.92, 'src': 'embed', 'start': 28112.895, 'weight': 3, 'content': [{'end': 28117.197, 'text': 'so I really suggest you pause the video here and then go through the code.', 'start': 28112.895, 'duration': 4.302}, {'end': 28121.567, 'text': "once We're going to learn all about JavaScript regular expressions.", 'start': 28117.197, 'duration': 4.37}, {'end': 28125.089, 'text': "So now without further delay, let's begin.", 'start': 28122.908, 'duration': 2.181}, {'end': 28133.135, 'text': 'So what exactly are regular expressions? Now a regular expression is basically a sequence of characters.', 'start': 28126.991, 'duration': 6.144}, {'end': 28136.757, 'text': 'Now these factors could be digits or the letters of the alphabet.', 'start': 28133.515, 'duration': 3.242}, {'end': 28140.92, 'text': 'And this expression usually searches for a particular pattern.', 'start': 28137.277, 'duration': 3.643}], 'summary': 'Learn about javascript regular expressions, which search for specific patterns in a sequence of characters.', 'duration': 28.025, 'max_score': 28112.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg28112895.jpg'}, {'end': 28828.455, 'src': 'embed', 'start': 28802.796, 'weight': 4, 'content': [{'end': 28809.538, 'text': "Now, when you're providing more critical information like user credentials, say your ID, your password, your date of birth.", 'start': 28802.796, 'duration': 6.742}, {'end': 28811.278, 'text': 'all of that needs to be validated.', 'start': 28809.538, 'duration': 1.74}, {'end': 28816.04, 'text': 'So JavaScript enables this with the help of a feature called email validation.', 'start': 28811.659, 'duration': 4.381}, {'end': 28821.065, 'text': 'Now, email validation, first of all, ensures user authenticity.', 'start': 28817.079, 'duration': 3.986}, {'end': 28828.455, 'text': 'It also facilitates email validation on the client side so that all the processing that takes place on the server side is faster.', 'start': 28821.766, 'duration': 6.689}], 'summary': 'Javascript enables email validation for user authenticity and faster server processing.', 'duration': 25.659, 'max_score': 28802.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg28802796.jpg'}, {'end': 28937.455, 'src': 'embed', 'start': 28893.972, 'weight': 6, 'content': [{'end': 28897.914, 'text': 'Alright, so this was just a brief introduction to email validation.', 'start': 28893.972, 'duration': 3.942}, {'end': 28902.937, 'text': "Now, to give you a better understanding, let's go ahead and look at a simple demo.", 'start': 28898.454, 'duration': 4.483}, {'end': 28912.713, 'text': "So back in our Visual Studio code, I've created a folder called JavaScript Demo, and I've also created a file called Email Validation.", 'start': 28905.287, 'duration': 7.426}, {'end': 28915.356, 'text': "I've also typed in the initial code.", 'start': 28913.514, 'duration': 1.842}, {'end': 28924.243, 'text': "Also, if you haven't watched our videos on JavaScript Regular Expressions and JavaScript Form Validation, then I highly recommend you go through them.", 'start': 28915.956, 'duration': 8.287}, {'end': 28927.746, 'text': 'Email Validation is basically just a combination of the two.', 'start': 28925.144, 'duration': 2.602}, {'end': 28931.97, 'text': "So I'd suggest you first head back and watch those videos and come back here.", 'start': 28928.187, 'duration': 3.783}, {'end': 28932.951, 'text': 'All right.', 'start': 28932.631, 'duration': 0.32}, {'end': 28937.455, 'text': 'so the first thing that we need to do is create a form that includes the email field, right?', 'start': 28932.951, 'duration': 4.504}], 'summary': 'Introduction to email validation, combines regex and form validation. demo created in visual studio code.', 'duration': 43.483, 'max_score': 28893.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg28893972.jpg'}], 'start': 27536.749, 'title': 'Javascript form validation and regular expressions', 'summary': 'Covers javascript form validation, including basic and data format validation, creating a form with email and password fields, and demonstrates the use of regular expressions for email validation, ensuring a seamless user experience and successful form submission.', 'chapters': [{'end': 27774.498, 'start': 27536.749, 'title': 'Javascript form validation', 'summary': 'Discusses javascript form validation, covering the concepts of basic and data format validation, and demonstrates creating a simple form with email and password fields with a submission action to a message display page.', 'duration': 237.749, 'highlights': ['JavaScript facilitates form validation on the client computer before sending it over to the server JavaScript enables form validation on the client side, improving user experience and reducing server load.', 'Two functions performed in form validation: basic validation and data format validation Form validation involves two functions: basic validation to ensure mandatory fields are filled and data format validation to check the correctness of the provided data.', 'Demonstration of creating a simple form with email and password fields and a submission action to a message display page The chapter demonstrates creating a simple form with email and password fields, along with a submission action to a message display page upon correct input.']}, {'end': 28112.895, 'start': 27775.299, 'title': 'Form validation function', 'summary': 'Demonstrates the creation of a form validation function that checks for empty email and password fields, alerts the user, and prevents form submission until both fields are filled, ensuring a seamless user experience and successful form submission.', 'duration': 337.596, 'highlights': ["The function 'validate' is created to check the email and password fields for empty values and alert the user if they are empty, ensuring a smooth user experience and preventing form submission until both fields are filled.", "The use of 'return false' is implemented to prevent form submission if the email or password fields are empty, while 'return true' allows form submission only when both fields are filled, ensuring successful form submission.", "The demonstration includes practical examples of form submission attempts without providing email or password, showcasing the function's ability to alert the user and maintain focus on the empty field."]}, {'end': 28893.952, 'start': 28112.895, 'title': 'Javascript regular expressions', 'summary': 'Explains javascript regular expressions, including the concept, usage, and practical examples, such as flags, patterns, quantifiers, special characters, and email validation, emphasizing the importance of validating user input and the structure of email ids.', 'duration': 781.057, 'highlights': ['JavaScript Regular Expressions Explains the concept, usage, and practical examples of JavaScript regular expressions, highlighting the importance of user input validation and the structure of email IDs.', 'Email Validation Describes the essential role of email validation in ensuring user authenticity, facilitating faster server-side processing, and enabling validation of various user inputs, along with the structure and character limits of email IDs.', 'Flags, Patterns, and Quantifiers Details the usage of flags such as G, I, M, unicode, and Y, patterns like A to Z, 0 to 9, and alphabet/digit separation, and quantifiers such as plus, asterisk, and question mark, providing a comprehensive understanding of their functionality.', 'Special Characters Explains the significance of special characters in regular expressions, including backslash W for word character matching, backslash S for white space matching, backslash D for digit matching, and the usage of curly braces and comma for specifying the occurrence of characters or words, offering practical examples to illustrate their functionality.']}, {'end': 29516.944, 'start': 28893.972, 'title': 'Email validation demo', 'summary': 'Covers creating an email validation form in javascript using regular expressions, demonstrating the validation of various email formats, and discussing the if-else logic for validating email ids.', 'duration': 622.972, 'highlights': ['Creating a form with email input and submit button The chapter demonstrates creating a form with an email input field and a submit button in Visual Studio code.', 'Explanation of regular expression for email validation The transcript provides a detailed explanation of the regular expression used for validating email IDs, covering the structure and components of the expression.', "Validation of different email formats and displaying results The chapter illustrates the validation of various email formats, such as 'xyz@gmail.com' and 'xyz.a_bc@gmail.co.in', and displays the results of the validation, including both valid and invalid cases."]}], 'duration': 1980.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg27536749.jpg', 'highlights': ['JavaScript facilitates form validation on the client side, improving user experience and reducing server load.', 'Demonstration of creating a simple form with email and password fields and a submission action to a message display page.', "The function 'validate' is created to check the email and password fields for empty values and alert the user if they are empty.", 'JavaScript Regular Expressions Explains the concept, usage, and practical examples of JavaScript regular expressions.', 'Email Validation Describes the essential role of email validation in ensuring user authenticity and facilitating faster server-side processing.', 'Creating a form with email input and submit button in Visual Studio code.', 'Explanation of regular expression for email validation, covering the structure and components of the expression.', 'Validation of different email formats and displaying results.']}, {'end': 30994.027, 'segs': [{'end': 29615.891, 'src': 'embed', 'start': 29585.629, 'weight': 1, 'content': [{'end': 29590.171, 'text': "Now this can be extremely frustrating because it's time consuming and very restrictive.", 'start': 29585.629, 'duration': 4.542}, {'end': 29593.032, 'text': "I mean you're not using the system to its full capability.", 'start': 29590.611, 'duration': 2.421}, {'end': 29598.695, 'text': 'So to overcome these drawbacks, asynchronous concepts or asynchronous programming came into picture.', 'start': 29593.652, 'duration': 5.043}, {'end': 29608.907, 'text': 'So in this case, the main thread continues its execution while JavaScript allows long network requests and other tasks to happen simultaneously.', 'start': 29599.562, 'duration': 9.345}, {'end': 29615.891, 'text': 'Now with the help of features like callbacks, promises, and async await, asynchronous programming can be easily achieved.', 'start': 29609.788, 'duration': 6.103}], 'summary': 'Asynchronous programming allows concurrent tasks, using callbacks, promises, and async await.', 'duration': 30.262, 'max_score': 29585.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg29585629.jpg'}, {'end': 29690.631, 'src': 'embed', 'start': 29659.023, 'weight': 2, 'content': [{'end': 29662.806, 'text': 'Now this function ensures that the value you give it is wrapped within a promise.', 'start': 29659.023, 'duration': 3.783}, {'end': 29669.692, 'text': 'Now a promise basically has three states.', 'start': 29667.19, 'duration': 2.502}, {'end': 29671.834, 'text': 'First up is the pending state.', 'start': 29670.272, 'duration': 1.562}, {'end': 29675.777, 'text': 'Now this indicates that the underlying operation has not yet been completed.', 'start': 29672.214, 'duration': 3.563}, {'end': 29678.219, 'text': 'Next up is the fulfilled state.', 'start': 29676.758, 'duration': 1.461}, {'end': 29680.921, 'text': 'This indicates that the promise has been fulfilled.', 'start': 29678.679, 'duration': 2.242}, {'end': 29682.464, 'text': 'with a particular value.', 'start': 29681.343, 'duration': 1.121}, {'end': 29684.866, 'text': 'Lastly, we have rejected.', 'start': 29683.685, 'duration': 1.181}, {'end': 29690.631, 'text': 'Now this indicates that an error has occurred during the operation and the promise is rejected with a particular reason.', 'start': 29685.207, 'duration': 5.424}], 'summary': 'Function wraps value in promise, with 3 states: pending, fulfilled, rejected.', 'duration': 31.608, 'max_score': 29659.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg29659023.jpg'}, {'end': 29740.099, 'src': 'embed', 'start': 29707.782, 'weight': 3, 'content': [{'end': 29710.584, 'text': 'So when a promise is fulfilled, it has to do a particular job.', 'start': 29707.782, 'duration': 2.802}, {'end': 29713.245, 'text': 'So for that we make use of the then method.', 'start': 29711.044, 'duration': 2.201}, {'end': 29720.049, 'text': 'Now the then method basically runs for a result and this is used to attach a callback when the promise has been resolved.', 'start': 29713.706, 'duration': 6.343}, {'end': 29724.672, 'text': 'Alright, same with the case of the scenario when the promise is rejected.', 'start': 29720.77, 'duration': 3.902}, {'end': 29730.415, 'text': 'It makes use of a catch method which is used to attach a callback when the promise has been rejected.', 'start': 29725.392, 'duration': 5.023}, {'end': 29734.538, 'text': "Don't worry, you'll understand the concepts better when we get to the demo.", 'start': 29730.435, 'duration': 4.103}, {'end': 29740.099, 'text': "So moving on, let's look at a quick flowchart to understand promises better.", 'start': 29736.437, 'duration': 3.662}], 'summary': 'The then method runs for a result, while the catch method is used when the promise is rejected. also, a demo and flowchart will help understand the concepts better.', 'duration': 32.317, 'max_score': 29707.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg29707782.jpg'}, {'end': 29805.363, 'src': 'embed', 'start': 29775.603, 'weight': 4, 'content': [{'end': 29778.204, 'text': "So moving ahead, let's look at the general syntax.", 'start': 29775.603, 'duration': 2.601}, {'end': 29784.427, 'text': 'You can use the let keyword and provide a name for your variable and then you create a new promise.', 'start': 29779.225, 'duration': 5.202}, {'end': 29791.009, 'text': 'Now this promise object takes a function which in turn takes two parameters that is resolve and reject.', 'start': 29784.847, 'duration': 6.162}, {'end': 29796.437, 'text': "So to help you understand all of this better, let's go ahead and look at a simple demo.", 'start': 29791.994, 'duration': 4.443}, {'end': 29805.363, 'text': "So in VS Code, I've created a folder called demo-promises within which I've created an HTML file named promises.", 'start': 29798.779, 'duration': 6.584}], 'summary': 'The transcript covers syntax for creating a promise object in javascript for better understanding.', 'duration': 29.76, 'max_score': 29775.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg29775603.jpg'}, {'end': 30385.991, 'src': 'embed', 'start': 30357.229, 'weight': 0, 'content': [{'end': 30359.85, 'text': 'So this was how you can make use of nested promises.', 'start': 30357.229, 'duration': 2.621}, {'end': 30364.997, 'text': "We're going to learn JavaScript asynchronous concepts that is async and await.", 'start': 30360.472, 'duration': 4.525}, {'end': 30370.964, 'text': "Firstly, let's understand the basic concepts of synchronous and asynchronous programming.", 'start': 30366.259, 'duration': 4.705}, {'end': 30375.35, 'text': 'In case of synchronous programming, all the actions are performed sequentially.', 'start': 30371.405, 'duration': 3.945}, {'end': 30384.51, 'text': 'So you have the execution of the function 1, after which you have function 2, and then you have function 3, and after all of these are executed,', 'start': 30375.93, 'duration': 8.58}, {'end': 30385.991, 'text': 'the program terminates.', 'start': 30384.51, 'duration': 1.481}], 'summary': 'Learn javascript async and await, covering sync vs async programming.', 'duration': 28.762, 'max_score': 30357.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg30357229.jpg'}, {'end': 30505.349, 'src': 'embed', 'start': 30436.671, 'weight': 5, 'content': [{'end': 30441.333, 'text': 'It makes sure that the system does not halt when a particular process is waiting for a resource.', 'start': 30436.671, 'duration': 4.662}, {'end': 30444.115, 'text': 'This makes the entire system very efficient.', 'start': 30441.734, 'duration': 2.381}, {'end': 30448.839, 'text': "Now that you know the concepts of synchronous and asynchronous programming, let's move ahead.", 'start': 30444.875, 'duration': 3.964}, {'end': 30452.663, 'text': 'Now async and await are purely asynchronous programming concepts.', 'start': 30449.239, 'duration': 3.424}, {'end': 30456.727, 'text': 'I again suggest you check out the video on promises before watching this.', 'start': 30453.203, 'duration': 3.524}, {'end': 30459.109, 'text': 'Alright, so moving on.', 'start': 30458.168, 'duration': 0.941}, {'end': 30467.648, 'text': 'What are JavaScript async functions that is async and await? Now async and await are built on promises.', 'start': 30461.226, 'duration': 6.422}, {'end': 30474.43, 'text': 'The function is basically accompanied by the keyword async indicating that it returns a promise.', 'start': 30468.248, 'duration': 6.182}, {'end': 30478.691, 'text': 'Within this function, the await keyword is applied to the promise that is being returned.', 'start': 30474.87, 'duration': 3.821}, {'end': 30482.932, 'text': 'Now the await keyword ensures that the function waits for the promise to resolve.', 'start': 30479.071, 'duration': 3.861}, {'end': 30487.654, 'text': "Now on the surface, the execution looks synchronous while it's actually asynchronous.", 'start': 30483.533, 'duration': 4.121}, {'end': 30493.379, 'text': 'Now at the place of usage of the await keyword, the execution of the function is practically blocked.', 'start': 30488.334, 'duration': 5.045}, {'end': 30499.104, 'text': 'Now async functions make the code more readable and are easier to handle when compared to promises.', 'start': 30494.259, 'duration': 4.845}, {'end': 30505.349, 'text': 'Now to give you the general syntax, you have the async keyword associated with the function name,', 'start': 30499.744, 'duration': 5.605}], 'summary': 'Async functions in javascript are built on promises, making code more readable and efficient.', 'duration': 68.678, 'max_score': 30436.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg30436671.jpg'}, {'end': 30607.179, 'src': 'embed', 'start': 30550.304, 'weight': 7, 'content': [{'end': 30559.693, 'text': 'Now, as you know, a promise basically has a function which takes two parameters that is resolve and reject.', 'start': 30550.304, 'duration': 9.389}, {'end': 30570.444, 'text': 'Now I just display a message saying calculating results.', 'start': 30562.881, 'duration': 7.563}, {'end': 30589.771, 'text': 'Alright, now if my score is say above 50, I resolve it by displaying a message saying congratulations, you have passed.', 'start': 30574.465, 'duration': 15.306}, {'end': 30607.179, 'text': 'right, and if it is less than 50, i reject it, with the message saying you have failed all right.', 'start': 30594.093, 'duration': 13.086}], 'summary': 'Demo of promise function with resolve and reject based on score', 'duration': 56.875, 'max_score': 30550.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg30550304.jpg'}, {'end': 30669.967, 'src': 'embed', 'start': 30632.331, 'weight': 8, 'content': [{'end': 30648.236, 'text': "let me just copy this all right, within which i'm going to console log a message saying calculating your grade.", 'start': 30632.331, 'duration': 15.905}, {'end': 30658.993, 'text': "Now we're just going to resolve the promise with the message your grade is A, alright?", 'start': 30652.947, 'duration': 6.046}, {'end': 30662.456, 'text': 'And then we append the response.', 'start': 30660.854, 'duration': 1.602}, {'end': 30669.967, 'text': "Now the first promise either resolves saying that you've passed or it rejects saying you've failed.", 'start': 30664.704, 'duration': 5.263}], 'summary': 'Using promises, calculates and displays the grade result.', 'duration': 37.636, 'max_score': 30632.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg30632331.jpg'}, {'end': 30935.115, 'src': 'embed', 'start': 30910.268, 'weight': 10, 'content': [{'end': 30916.191, 'text': 'So first we call the result function, which returns a promise, which gets stored in the variable response.', 'start': 30910.268, 'duration': 5.923}, {'end': 30924.728, 'text': "Alright, then we're going to call the grade function and pass the response as an argument and the result of which is being stored in final grade.", 'start': 30917.082, 'duration': 7.646}, {'end': 30927.63, 'text': 'Alright, and lastly we display final grade.', 'start': 30925.248, 'duration': 2.382}, {'end': 30930.692, 'text': 'So now you must be wondering if this executes.', 'start': 30928.29, 'duration': 2.402}, {'end': 30931.753, 'text': 'what about errors?', 'start': 30930.692, 'duration': 1.061}, {'end': 30935.115, 'text': 'What if the value that I pass is less than 50?', 'start': 30932.213, 'duration': 2.902}], 'summary': 'Using result and grade functions to display final grade, handling errors.', 'duration': 24.847, 'max_score': 30910.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg30910268.jpg'}], 'start': 29517.947, 'title': 'Javascript promises and asynchronous programming', 'summary': 'Covers the importance and states of javascript promises, syntax of creating promises, asynchronous programming concepts, creating and chaining promises, and usage of async and await, enabling efficient and readable asynchronous programming in javascript.', 'chapters': [{'end': 29774.863, 'start': 29517.947, 'title': 'Javascript promises explained', 'summary': 'Explains the importance of javascript promises in overcoming the limitations of single-threaded processing, the states of a promise (pending, fulfilled, rejected), and the methods used for handling fulfilled and rejected promises, enabling asynchronous programming.', 'duration': 256.916, 'highlights': ["JavaScript's single-threaded nature and the need for asynchronous programming JavaScript's single-threaded nature limits the execution to a single sequence, leading to the need for asynchronous programming to handle long network requests and tasks simultaneously.", 'Explanation of JavaScript promises and their states (pending, fulfilled, rejected) JavaScript promises represent asynchronous actions that may complete in the future, with states of pending, fulfilled, and rejected, providing a way to handle asynchronous operations.', "Utilizing then and catch methods for handling fulfilled and rejected promises The then method is used to handle a fulfilled promise, while the catch method is utilized for handling a rejected promise, enabling specific actions based on the promise's state."]}, {'end': 30356.269, 'start': 29775.603, 'title': 'Understanding javascript promises', 'summary': 'Explains the syntax of creating a promise in javascript, demonstrates a simple promise example with resolve and reject, and illustrates nested promises using a scenario of checking fuel tank and engine condition.', 'duration': 580.666, 'highlights': ['Creating a simple promise with resolve and reject The transcript explains the syntax of creating a promise in JavaScript and demonstrates a simple example of a promise with resolve and reject, showcasing the functionality of the then and catch methods.', 'Illustrating nested promises using a scenario of checking fuel tank and engine condition The transcript illustrates the concept of nested promises by creating functions that return promises to check for empty fuel tank and overheating engine, and then demonstrates using the then method to handle nested promises and display the final message.']}, {'end': 30522.245, 'start': 30357.229, 'title': 'Javascript asynchronous programming', 'summary': 'Explains the concepts of synchronous and asynchronous programming, emphasizing how asynchronous programming improves system efficiency by not halting when waiting for resources. it then delves into the async and await concepts in javascript, highlighting their advantage over promises in making code more readable and easy to handle.', 'duration': 165.016, 'highlights': ['The chapter explains the concepts of synchronous and asynchronous programming, emphasizing how asynchronous programming improves system efficiency by not halting when waiting for resources.', 'Async and await are built on promises, with the async function accompanied by the keyword async indicating that it returns a promise, and the await keyword ensuring that the function waits for the promise to resolve.', 'In asynchronous programming, instead of waiting for a resource, the main thread continues its execution with other functions, improving system efficiency by not halting when waiting for resources.']}, {'end': 30768.51, 'start': 30522.786, 'title': 'Creating promises and chaining in javascript', 'summary': 'Explains how to create and chain promises in javascript, demonstrating the process with code examples. it covers creating a promise to calculate passing or failing based on a score, then chaining another promise to calculate the grade, and finally handling errors using the catch method.', 'duration': 245.724, 'highlights': ['Creating a Promise to Calculate Passing or Failing The transcript demonstrates creating a promise to determine passing or failing based on a score, resolving if the score is above 50 and rejecting if it is below 50.', 'Chaining Promises to Calculate Grade The chapter illustrates chaining another promise to calculate the grade based on the response from the first promise, resolving the grade as A.', 'Demonstrating Error Handling with the Catch Method The transcript includes an example of error handling using the catch method to handle errors that may occur during the promise chain.']}, {'end': 30994.027, 'start': 30770.282, 'title': 'Using async and await in javascript', 'summary': 'Demonstrates the usage of async and await in javascript to simplify code execution, with an example showing the sequential execution of functions, handling of errors, and the benefits of using async and await.', 'duration': 223.745, 'highlights': ['The chapter demonstrates the usage of async and await in JavaScript to simplify code execution The transcript focuses on demonstrating the usage of async and await in JavaScript to simplify code execution.', 'Example showing the sequential execution of functions and handling of errors The example shows the sequential execution of functions, such as calling result and grade, and handling errors with try-catch block.', 'Benefits of using async and await The transcript explains the benefits of using async and await, including the ease of code readability and sequential execution of asynchronous operations.']}], 'duration': 1476.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg29517947.jpg', 'highlights': ['Covers the importance and states of javascript promises, syntax of creating promises, asynchronous programming concepts, creating and chaining promises, and usage of async and await, enabling efficient and readable asynchronous programming in javascript.', "JavaScript's single-threaded nature limits the execution to a single sequence, leading to the need for asynchronous programming to handle long network requests and tasks simultaneously.", 'JavaScript promises represent asynchronous actions that may complete in the future, with states of pending, fulfilled, and rejected, providing a way to handle asynchronous operations.', "The then method is used to handle a fulfilled promise, while the catch method is utilized for handling a rejected promise, enabling specific actions based on the promise's state.", 'The transcript explains the syntax of creating a promise in JavaScript and demonstrates a simple example of a promise with resolve and reject, showcasing the functionality of the then and catch methods.', 'The chapter explains the concepts of synchronous and asynchronous programming, emphasizing how asynchronous programming improves system efficiency by not halting when waiting for resources.', 'Async and await are built on promises, with the async function accompanied by the keyword async indicating that it returns a promise, and the await keyword ensuring that the function waits for the promise to resolve.', 'The transcript demonstrates creating a promise to determine passing or failing based on a score, resolving if the score is above 50 and rejecting if it is below 50.', 'The chapter illustrates chaining another promise to calculate the grade based on the response from the first promise, resolving the grade as A.', 'The transcript focuses on demonstrating the usage of async and await in JavaScript to simplify code execution.', 'The example shows the sequential execution of functions, such as calling result and grade, and handling errors with try-catch block.', 'The transcript explains the benefits of using async and await, including the ease of code readability and sequential execution of asynchronous operations.']}, {'end': 33951.516, 'segs': [{'end': 31036.829, 'src': 'embed', 'start': 30994.608, 'weight': 0, 'content': [{'end': 30999.849, 'text': 'So you can make use of async and await instead of complicating the entire piece of code by using promises.', 'start': 30994.608, 'duration': 5.241}, {'end': 31003.59, 'text': 'ReactJS is a widely used front-end development library.', 'start': 31000.169, 'duration': 3.421}, {'end': 31008.411, 'text': "So if you're just starting or wish to brush up your basics, then you're in the right place.", 'start': 31003.87, 'duration': 4.541}, {'end': 31012.252, 'text': 'This video will cover all the basic concepts of ReactJS.', 'start': 31008.771, 'duration': 3.481}, {'end': 31015.337, 'text': "First, we'll look at what React.js is.", 'start': 31012.992, 'duration': 2.345}, {'end': 31019.706, 'text': "Then we'll see how to install and set up the React environment.", 'start': 31016.259, 'duration': 3.447}, {'end': 31026.142, 'text': "Then we'll move on to learn the fundamental concepts of components, props, and states.", 'start': 31020.287, 'duration': 5.855}, {'end': 31030.705, 'text': "Lastly, we'll conclude this session by creating a simple calculator app.", 'start': 31026.622, 'duration': 4.083}, {'end': 31033.867, 'text': "I'm sure you're excited to learn, so let's dive right in.", 'start': 31031.225, 'duration': 2.642}, {'end': 31036.829, 'text': "Let's go ahead and begin with what is React.", 'start': 31034.387, 'duration': 2.442}], 'summary': 'Learn reactjs basics including components, props, states, and create a simple calculator app in this session.', 'duration': 42.221, 'max_score': 30994.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg30994608.jpg'}, {'end': 31087.362, 'src': 'embed', 'start': 31058.387, 'weight': 10, 'content': [{'end': 31061.51, 'text': 'It is also responsible for how the app looks and feels.', 'start': 31058.387, 'duration': 3.123}, {'end': 31066.054, 'text': 'Fun fact, React was built by Jordan Walke, an engineer at Facebook.', 'start': 31061.81, 'duration': 4.244}, {'end': 31069.197, 'text': "Now let's go ahead and see how React works in real time.", 'start': 31066.234, 'duration': 2.963}, {'end': 31072.518, 'text': 'Consider a typical web application, say Instagram.', 'start': 31069.557, 'duration': 2.961}, {'end': 31076.219, 'text': 'The entire UI of the web page is divided into several components.', 'start': 31072.618, 'duration': 3.601}, {'end': 31082.761, 'text': 'We have the search component, a profile description component, stories component, and a post list component.', 'start': 31076.579, 'duration': 6.182}, {'end': 31087.362, 'text': 'These components make the code easier to debug and always remain discrete.', 'start': 31083.021, 'duration': 4.341}], 'summary': 'React organizes web app ui into discrete components, exemplified by instagram components: search, profile description, stories, and post list.', 'duration': 28.975, 'max_score': 31058.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg31058387.jpg'}, {'end': 31194.748, 'src': 'embed', 'start': 31166.686, 'weight': 9, 'content': [{'end': 31169.287, 'text': 'Const simple here is a JavaScript notation.', 'start': 31166.686, 'duration': 2.601}, {'end': 31171.708, 'text': 'H1 tags indicate HTML.', 'start': 31169.807, 'duration': 1.901}, {'end': 31174.669, 'text': 'Again, the semicolon indicates JavaScript.', 'start': 31172.008, 'duration': 2.661}, {'end': 31177.37, 'text': 'Note that the semicolon is not mandatory.', 'start': 31175.249, 'duration': 2.121}, {'end': 31179.651, 'text': "However, it's a good practice to include it.", 'start': 31177.55, 'duration': 2.101}, {'end': 31182.734, 'text': 'Moving on, the next feature is Virtual DOM.', 'start': 31180.131, 'duration': 2.603}, {'end': 31190.423, 'text': 'DOM, which is an acronym for Data Object Model, actually defines how documents are accessed and manipulated in a webpage.', 'start': 31183.175, 'duration': 7.248}, {'end': 31194.748, 'text': 'It represents the entire structure of the webpage in the form of a tree.', 'start': 31190.983, 'duration': 3.765}], 'summary': 'Javascript uses semicolons; h1 tags in html; virtual dom defines webpage structure.', 'duration': 28.062, 'max_score': 31166.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg31166686.jpg'}, {'end': 31431.342, 'src': 'embed', 'start': 31404.446, 'weight': 11, 'content': [{'end': 31408.089, 'text': 'Components can be reused multiple times across the application.', 'start': 31404.446, 'duration': 3.643}, {'end': 31410.21, 'text': 'This reduces the development time.', 'start': 31408.369, 'duration': 1.841}, {'end': 31412.351, 'text': 'Consider the following code snippet.', 'start': 31410.55, 'duration': 1.801}, {'end': 31417.595, 'text': 'A component is implemented as a JavaScript class having some state and a render method.', 'start': 31412.732, 'duration': 4.863}, {'end': 31421.077, 'text': 'State is the data which we want the component to render.', 'start': 31418.055, 'duration': 3.022}, {'end': 31425.619, 'text': 'The render method is responsible for how the UI looks and feels to the user.', 'start': 31421.377, 'duration': 4.242}, {'end': 31427.62, 'text': 'The next concept is State.', 'start': 31426.019, 'duration': 1.601}, {'end': 31431.342, 'text': 'State of a component is an object that holds some data.', 'start': 31427.941, 'duration': 3.401}], 'summary': 'Components can be reused, reducing development time. state holds data for ui.', 'duration': 26.896, 'max_score': 31404.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg31404446.jpg'}, {'end': 31658.58, 'src': 'embed', 'start': 31620.751, 'weight': 1, 'content': [{'end': 31623.592, 'text': "Let's call it first react.", 'start': 31620.751, 'duration': 2.841}, {'end': 31625.293, 'text': 'Now open your command prompt.', 'start': 31623.913, 'duration': 1.38}, {'end': 31629.076, 'text': 'Now you can type in the path for the folder that you just created.', 'start': 31625.754, 'duration': 3.322}, {'end': 31636.58, 'text': 'So say cd users first react.', 'start': 31629.536, 'duration': 7.044}, {'end': 31649.454, 'text': 'Now go ahead and type in the command npm install Okay, so this command installs all the necessary ReactJS modules.', 'start': 31636.84, 'duration': 12.614}, {'end': 31656.799, 'text': 'Now to check if the version is correctly installed, you can type in create React app version.', 'start': 31649.714, 'duration': 7.085}, {'end': 31658.58, 'text': 'So you can see the version here.', 'start': 31657.279, 'duration': 1.301}], 'summary': "Installing reactjs modules using npm, check version with 'create react app version'.", 'duration': 37.829, 'max_score': 31620.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg31620751.jpg'}, {'end': 32142.211, 'src': 'embed', 'start': 32113.093, 'weight': 14, 'content': [{'end': 32118.616, 'text': "One unique feature of default export is that I can rename the file while I'm importing it.", 'start': 32113.093, 'duration': 5.523}, {'end': 32127.22, 'text': "So for example, I can rename it as say FC and while I'm defining it, I'll have to make sure I use the same naming conventions.", 'start': 32118.856, 'duration': 8.364}, {'end': 32128.361, 'text': 'So I say FC again.', 'start': 32127.4, 'duration': 0.961}, {'end': 32131.583, 'text': 'And when I check it, it says this is the functional component.', 'start': 32128.661, 'duration': 2.922}, {'end': 32133.064, 'text': 'There is literally no difference.', 'start': 32131.763, 'duration': 1.301}, {'end': 32136.667, 'text': 'The next type of export is the named export or just export.', 'start': 32133.405, 'duration': 3.262}, {'end': 32142.211, 'text': 'So a named export can be used to export multiple objects, be it functions, class, etc.', 'start': 32136.887, 'duration': 5.324}], 'summary': 'Default export allows renaming files, while named export can export multiple objects.', 'duration': 29.118, 'max_score': 32113.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg32113093.jpg'}, {'end': 32187.499, 'src': 'embed', 'start': 32156.622, 'weight': 7, 'content': [{'end': 32159.024, 'text': 'Let me give it another name, say class comp one.', 'start': 32156.622, 'duration': 2.402}, {'end': 32163.468, 'text': "And the message that I want to display is, hey, I'm another class.", 'start': 32159.485, 'duration': 3.983}, {'end': 32164.069, 'text': 'All right.', 'start': 32163.748, 'duration': 0.321}, {'end': 32167.031, 'text': "So when I'm exporting it, I don't want default.", 'start': 32164.169, 'duration': 2.862}, {'end': 32169.753, 'text': 'So let me take it off and say export here.', 'start': 32167.391, 'duration': 2.362}, {'end': 32170.374, 'text': 'All right.', 'start': 32170.033, 'duration': 0.341}, {'end': 32175.055, 'text': 'In my app.js, while importing it, I want to import both the classes.', 'start': 32170.974, 'duration': 4.081}, {'end': 32177.456, 'text': "So I'll include them within curly braces here.", 'start': 32175.295, 'duration': 2.161}, {'end': 32183.978, 'text': 'I say class comp comma class comp one and then again I define it here class comp one.', 'start': 32177.676, 'duration': 6.302}, {'end': 32187.499, 'text': "Let's compile it and run it and here we go.", 'start': 32184.198, 'duration': 3.301}], 'summary': 'Demonstrating code to import and display classes, with a focus on syntax and process.', 'duration': 30.877, 'max_score': 32156.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg32156622.jpg'}], 'start': 30994.608, 'title': 'Reactjs fundamentals and development', 'summary': 'Introduces reactjs, its advantages, and async/await usage. it explains the popularity, features, and benefits of react, emphasizing its impact on performance and development time. additionally, it covers react basics, salary insights, creating components, higher-order components, and state, props, and component lifecycle optimization.', 'chapters': [{'end': 31097.451, 'start': 30994.608, 'title': 'Introduction to reactjs', 'summary': 'Introduces reactjs, covering its basic concepts and advantages, such as its use in building fast and interactive user interfaces for web and mobile applications, and the modular and collaborative nature of its components. it also delves into the benefits of using async and await over promises.', 'duration': 102.843, 'highlights': ['ReactJS is a JavaScript library used to build fast and interactive user interfaces for both web and mobile applications, and it is open source, allowing users to access, modify, and enhance its source code.', 'Components in ReactJS make the code easier to debug and always remain discrete, which speeds up the development and maintenance of web applications.', 'Async and await can be used in place of promises, simplifying the code and improving its readability and maintainability.']}, {'end': 31471.826, 'start': 31097.791, 'title': 'React: features and benefits', 'summary': 'Explains the popularity and advantages of react, covering its features like virtual dom, one-way data binding, and extensions, as well as key concepts such as components, state, and props, emphasizing its impact on performance and development time.', 'duration': 374.035, 'highlights': ["React's Virtual DOM and performance enhancements React uses virtual DOM and performance enhancements like one-way data binding, resulting in improved speed and decreased development time.", "React's Extensions including React Native and Flux React offers extensions such as React Native and Flux, enabling the development of mobile applications and implementing a unidirectional flow for easier understanding and debugging.", 'Components, state, and props as building blocks of React Components, state, and props are essential concepts in React, allowing for the division of user interface, reusability, and dynamic components.']}, {'end': 32240.283, 'start': 31472.467, 'title': 'React basics and salary insights', 'summary': 'Covers the basics of react, including the prerequisite knowledge, impact on the it industry, and insights into react developer salaries. it also provides a detailed guide on react installation on windows and an overview of react components, highlighting their types, nesting, and exporting/importing functionality.', 'duration': 767.816, 'highlights': ['React developers in the United States earn an average salary of US$91,000, while the average salary for a React developer in India is 7.25 lakhs per annum. Statistics reveal the high earning potential of React developers, with an average salary of US$91,000 in the United States and 7.25 lakhs per annum in India.', 'React has gained immense popularity and is being adopted by many companies, with better growth scale compared to other frameworks like Angular and Vue, as indicated by data from Google Trends. The data from Google Trends demonstrates the widespread adoption and growth of React, surpassing other frameworks like Angular and Vue.', 'The chapter provides a detailed guide on React installation on Windows, including the installation of Node.js and a text editor, and creating a first React application through command line. The transcript offers a comprehensive guide on installing React on Windows, covering the installation of Node.js, a text editor, and creating a first React application via command line.', 'The chapter provides an overview of React components, including their types (stateless functional and stateful class components), nesting, and exporting/importing functionality. The chapter gives an overview of React components, discussing their types, nesting capabilities, and exporting/importing functionality.']}, {'end': 32727.766, 'start': 32240.543, 'title': 'Creating react components and implementing higher-order components', 'summary': 'Covers creating react components for handling click and hover events, implementing a higher-order component for reusability, and explaining the concept of pure components to avoid unnecessary re-renders.', 'duration': 487.223, 'highlights': ['The chapter explains creating React components for handling click and hover events, where the count value gets incremented for each click and hover, demonstrating the use of state and event handling. It covers creating components Click.js and Counter.js, implementing methods to handle click and hover events, and importing these components in app.js to demonstrate their functionality.', "The chapter introduces the concept of higher-order components for reusability, creating a higher-order component 'higher-order.js' to modify the rendering of original components 'click.js' and 'counter.js' by appending a user message. It explains the process of creating a higher-order component, importing it into original components, and utilizing it to modify the rendering of the components, showcasing the reusability of components.", 'The chapter discusses pure components as a way to avoid unnecessary re-renders in React, demonstrating the creation of a pure component class and a regular component class, and the usage of a parent component to set a time interval for state changes. It explains the concept of pure components, demonstrates creating a pure component class and a regular component class, and utilizes a parent component to illustrate the difference in rendering between the two types of components.']}, {'end': 33951.516, 'start': 32728.166, 'title': 'Reactjs: state, props, and component lifecycle', 'summary': 'Covers the optimization of react codes through pure components, the stages of the component lifecycle, and the differences between state and props, while providing practical demonstrations, including passing properties to components and handling component state changes.', 'duration': 1223.35, 'highlights': ['Optimization through Pure Components Pure components optimize React codes and improve performance, as they are re-rendered only when their state or prop changes, resulting in faster rendering and improved user experience.', 'Component Lifecycle Stages The component lifecycle includes mounting, updating, and unmounting stages, with methods like componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, and componentDidUpdate, each serving specific purposes in managing component behaviors.', 'Differences between State and Props Props are used to pass data and event handlers to children components, while state stores data to be rendered on the web page and can be updated over time. Props are immutable and set by the parent component, while state is updated by event handlers.']}], 'duration': 2956.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg30994608.jpg', 'highlights': ['ReactJS is a JavaScript library for fast and interactive UIs, open source for accessibility and enhancement.', 'Components in ReactJS ease debugging, remain discrete, and speed up web app development.', 'Async/await simplifies code, improves readability, and maintainability compared to promises.', "React's Virtual DOM and one-way data binding enhance speed and decrease development time.", 'React offers extensions like React Native and Flux for mobile app development and unidirectional flow.', "React developers in the US earn an average salary of US$91,000, while in India it's 7.25 lakhs per annum.", "React's popularity and growth surpass other frameworks like Angular and Vue, as per Google Trends data.", 'Comprehensive guide on React installation on Windows, including Node.js and first app creation.', 'Overview of React components, types, nesting, and exporting/importing functionality.', 'Creating React components for handling click and hover events, demonstrating state and event handling.', 'Introduction to higher-order components for reusability and modifying rendering of original components.', 'Explanation of pure components to avoid unnecessary re-renders and usage of a parent component for state changes.', 'Pure components optimize React codes, re-render only on state or prop changes, improving performance.', 'Component lifecycle stages include mounting, updating, and unmounting, with specific methods for managing behaviors.', 'Differences between State and Props, their usage, immutability, and update mechanisms.']}, {'end': 35594.342, 'segs': [{'end': 33983.781, 'src': 'embed', 'start': 33951.876, 'weight': 3, 'content': [{'end': 33953.217, 'text': 'Following the instructions,', 'start': 33951.876, 'duration': 1.341}, {'end': 33961.221, 'text': "let's click on the subscribe button and now it says hit the bell icon and once I do that the image updates and the message changes.", 'start': 33953.217, 'duration': 8.004}, {'end': 33965.484, 'text': "In this session, we're going to cover the topic of what is Angular.", 'start': 33961.582, 'duration': 3.902}, {'end': 33969.059, 'text': "I'm sure all of you use mobile and web applications.", 'start': 33966.198, 'duration': 2.861}, {'end': 33977.56, 'text': 'Be it from social media to healthcare, e-commerce, and net banking, these apps are used by billions of people across the globe.', 'start': 33969.479, 'duration': 8.081}, {'end': 33983.781, 'text': 'Now, the main reason we use these apps is that they offer seamless user experience and interface.', 'start': 33977.9, 'duration': 5.881}], 'summary': 'Covering what is angular, used in mobile and web apps, offering seamless user experience.', 'duration': 31.905, 'max_score': 33951.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg33951876.jpg'}, {'end': 34082.266, 'src': 'embed', 'start': 34059.361, 'weight': 10, 'content': [{'end': 34067.491, 'text': 'Angular and JavaScript together bring in structure and consistency to your web applications and also provide scalability and maintainability.', 'start': 34059.361, 'duration': 8.13}, {'end': 34071.476, 'text': 'Angular is specifically developed for single-page applications.', 'start': 34068.452, 'duration': 3.024}, {'end': 34082.266, 'text': 'So now the question arises, what exactly is Angular? Angular is an open-source JavaScript framework written completely in TypeScript.', 'start': 34071.796, 'duration': 10.47}], 'summary': 'Angular and javascript provide structure and consistency to web applications, with angular specifically designed for single-page applications.', 'duration': 22.905, 'max_score': 34059.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg34059361.jpg'}, {'end': 34175.015, 'src': 'embed', 'start': 34149.74, 'weight': 13, 'content': [{'end': 34156.227, 'text': 'Now here, every node in the tree structure defines an object representing a part of your document.', 'start': 34149.74, 'duration': 6.487}, {'end': 34159.259, 'text': 'Angular uses the regular DOM.', 'start': 34157.037, 'duration': 2.222}, {'end': 34163.684, 'text': "Now let's suppose you've made 10 updates on a single HTML page.", 'start': 34159.56, 'duration': 4.124}, {'end': 34169.93, 'text': 'So every time you make a change, the corresponding DOM or the tree structure needs to be updated.', 'start': 34164.465, 'duration': 5.465}, {'end': 34175.015, 'text': 'Now Angular updates the entire tree structure of HTML tags.', 'start': 34170.811, 'duration': 4.204}], 'summary': 'Angular updates entire tree structure for html tags, with 10 updates on a single page.', 'duration': 25.275, 'max_score': 34149.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg34149740.jpg'}, {'end': 34345.549, 'src': 'embed', 'start': 34317.686, 'weight': 11, 'content': [{'end': 34327.255, 'text': 'MVC, short for Model View Controller, is an architectural pattern that separates the application layer into model, View and Controller.', 'start': 34317.686, 'duration': 9.569}, {'end': 34330.678, 'text': 'Model here relates to all the data related logic.', 'start': 34327.635, 'duration': 3.043}, {'end': 34334.941, 'text': 'View on the other hand is used for UI logic of the application.', 'start': 34331.258, 'duration': 3.683}, {'end': 34337.803, 'text': 'And Controller is the brain of the setup.', 'start': 34335.822, 'duration': 1.981}, {'end': 34341.046, 'text': 'Now it is an interface between the Model and View.', 'start': 34338.303, 'duration': 2.743}, {'end': 34345.549, 'text': "Moving on, let's look at the advantages of Angular.", 'start': 34342.547, 'duration': 3.002}], 'summary': 'Mvc separates application layer into model, view, and controller.', 'duration': 27.863, 'max_score': 34317.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg34317686.jpg'}, {'end': 34634.651, 'src': 'embed', 'start': 34605.32, 'weight': 12, 'content': [{'end': 34608.823, 'text': 'However, the learning curve of Angular is clear-cut.', 'start': 34605.32, 'duration': 3.503}, {'end': 34614.008, 'text': 'In the beginning it could be a little intimidating, but once you start using the tool,', 'start': 34609.564, 'duration': 4.444}, {'end': 34617.892, 'text': 'it becomes way more easier to comprehend and understand what is going on.', 'start': 34614.008, 'duration': 3.884}, {'end': 34623.74, 'text': "And lastly, let's look at some of the companies that use Angular today.", 'start': 34619.676, 'duration': 4.064}, {'end': 34634.651, 'text': 'Many top-tier companies like Nike, Forbes, Google, HBO, Sony, Upwork, among others readily deploy Angular.', 'start': 34624.801, 'duration': 9.85}], 'summary': 'Angular has a clear learning curve, used by top companies like nike, forbes, google, hbo, sony, and upwork.', 'duration': 29.331, 'max_score': 34605.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg34605320.jpg'}, {'end': 35024.979, 'src': 'embed', 'start': 34997.491, 'weight': 0, 'content': [{'end': 35000.892, 'text': 'Now, firstly, they are the building blocks of an application.', 'start': 34997.491, 'duration': 3.401}, {'end': 35009.355, 'text': 'Generally, you have a root component, which is basically the app component, and then it branches out into other components, creating a hierarchy.', 'start': 35001.853, 'duration': 7.502}, {'end': 35012.771, 'text': 'and these components are a subset of directives.', 'start': 35010.41, 'duration': 2.361}, {'end': 35017.454, 'text': "Now don't worry about what directives are because we'll cover them later on in the series.", 'start': 35013.172, 'duration': 4.282}, {'end': 35020.216, 'text': 'But to give you an idea, there are three types of directives.', 'start': 35017.775, 'duration': 2.441}, {'end': 35024.979, 'text': 'You have the structural directives, the attribute directives and the component directives.', 'start': 35020.616, 'duration': 4.363}], 'summary': 'Components are the building blocks of an application, with a root component branching out into others, forming a hierarchy. directives are categorized into structural, attribute, and component directives.', 'duration': 27.488, 'max_score': 34997.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg34997491.jpg'}, {'end': 35082.834, 'src': 'embed', 'start': 35038.803, 'weight': 1, 'content': [{'end': 35041.525, 'text': "Now don't worry, you'll understand this better when I show you the demo.", 'start': 35038.803, 'duration': 2.722}, {'end': 35046.108, 'text': 'Nextly, a TypeScript class is used to create a component.', 'start': 35042.546, 'duration': 3.562}, {'end': 35050.432, 'text': 'Now this class is then decorated with the at component decorator.', 'start': 35046.629, 'duration': 3.803}, {'end': 35055.816, 'text': 'Now the decorator accepts a metadata object that gives information about the component.', 'start': 35050.792, 'duration': 5.024}, {'end': 35062.681, 'text': 'Now a component must belong to the ng module in order for it to be usable by another component or application.', 'start': 35056.176, 'duration': 6.505}, {'end': 35068.967, 'text': 'And finally, components control their runtime behavior by implementing lifecycle hooks.', 'start': 35063.925, 'duration': 5.042}, {'end': 35073.89, 'text': 'So this was just a brief introduction to what Angular components are.', 'start': 35069.808, 'duration': 4.082}, {'end': 35079.853, 'text': 'Now, you will only be able to understand the working of components when I show it to you practically.', 'start': 35075.01, 'duration': 4.843}, {'end': 35082.834, 'text': "So let's head over to our Visual Studio Code.", 'start': 35080.313, 'duration': 2.521}], 'summary': 'Introduction to angular components: typescript class, decorators, ng module, and lifecycle hooks.', 'duration': 44.031, 'max_score': 35038.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg35038803.jpg'}], 'start': 33951.876, 'title': 'Angular: features, advantages & architecture', 'summary': 'Explores the features, advantages, and limitations of angular, emphasizing its scalability, maintainability, and use in single-page applications. it covers typescript, data binding, testing, and the learning curve, while also discussing prerequisites and introducing angular components.', 'chapters': [{'end': 34175.015, 'start': 33951.876, 'title': 'Understanding angular: features, advantages & more', 'summary': 'Explores the introduction of angular, its features, advantages, and limitations, and its relevance in developing single-page applications, emphasizing its scalability and maintainability, and its use in various platforms. it also discusses the benefits of angular in providing structure and consistency to web applications, as well as its support for modularity and testability.', 'duration': 223.139, 'highlights': ['Angular is an open-source JavaScript framework written completely in TypeScript and is maintained by Google, providing advantages and a standard structure for developers, and designed for web, desktop, and mobile platforms. Angular is an open-source JavaScript framework written completely in TypeScript and is maintained by Google, providing advantages and a standard structure for developers, and designed for web, desktop, and mobile platforms.', 'Single-page applications are primarily developed using Angular, which are applications that get loaded just once onto the browser, eliminating the need for subsequent page loads during interactions. Single-page applications are primarily developed using Angular, which are applications that get loaded just once onto the browser, eliminating the need for subsequent page loads during interactions.', 'Angular brings structure and consistency to web applications, providing scalability and maintainability, and it supports modularity and testability, making it ideal for developing modern applications. Angular brings structure and consistency to web applications, providing scalability and maintainability, and it supports modularity and testability, making it ideal for developing modern applications.', 'The document object model (DOM), tag script, data binding, and testing are key features of Angular, providing a tree structure for HTML documents, enabling updates to the entire tree structure of HTML tags, and facilitating testing. The document object model (DOM), tag script, data binding, and testing are key features of Angular, providing a tree structure for HTML documents, enabling updates to the entire tree structure of HTML tags, and facilitating testing.']}, {'end': 34497.712, 'start': 34175.776, 'title': 'Angular features and architecture', 'summary': 'Covers the features of typescript, data binding, testing, and the advantages of angular, highlighting the benefits of typescript in improving code understandability, the convenience of data binding in handling large amounts of data, and the testability of angular for every part of an application.', 'duration': 321.936, 'highlights': ['TypeScript offers better syntactic structure, making the code base easier to understand and maintain.', 'Angular uses two-way data binding, allowing changes in UI elements to be reflected in the corresponding model state and vice versa.', 'Angular has been built from the ground up with testability in mind, allowing testing of every part of the application.', 'Data binding is extremely convenient when web pages contain a large amount of data and mainly employs dynamic HTML.', 'Angular allows you to build your own components, move data effortlessly from JavaScript code to the view, write modular services for dependency injection, and provides out-of-the-box solutions for server communication, routing, and more.']}, {'end': 34956.844, 'start': 34498.032, 'title': 'Angular: learning curve & prerequisites', 'summary': 'Discusses the limitations of angular, including the steep learning curve, limited seo options, verbosity, and migration issues, while also covering the prerequisites for learning angular, such as node.js, angular cli, and an ide or text editor. it also provides a demo on creating an angular application using vs code.', 'duration': 458.812, 'highlights': ['Many top-tier companies like Nike, Forbes, Google, HBO, Sony, Upwork, among others readily deploy Angular. Several top companies, including Nike, Forbes, Google, HBO, Sony, and Upwork, use Angular for their projects.', "Angular offers limited SEO options and poor accessibility to search engine crawlers. Angular's limitations include offering limited SEO options and poor accessibility to search engine crawlers.", 'The steep learning curve of Angular requires learners to be acquainted with basic topics such as directives, modules, decorators, components, services, dependency injection, pipes, and templates, followed by more advanced topics like change detection zones, AOT compilation, and Rx.js. Learning Angular involves starting with basic topics like directives, modules, decorators, components, services, dependency injection, pipes, and templates, then progressing to advanced topics such as change detection zones, AOT compilation, and Rx.js.', "Node.js is a prerequisite for Angular, serving as the base for a large part of its build environment. Node.js is a prerequisite for learning Angular, as it forms the base for a significant part of the framework's build environment.", 'The Angular CLI is a tool that makes it easier to bootstrap and develop Angular applications. The Angular CLI is a tool that simplifies the process of bootstrapping and developing Angular applications.']}, {'end': 35594.342, 'start': 34957.83, 'title': 'Introduction to angular components', 'summary': 'Introduces angular components as the building blocks of web applications, explaining their features such as the creation process, structure, and usage in templates, and provides practical demonstrations of creating and incorporating components into an angular application.', 'duration': 636.512, 'highlights': ['Angular components are likened to Lego blocks and are combined to form the final application, consisting of logo, sign-in, image, and create account components. Components are described as Lego blocks that are combined to form web applications, with examples such as logo, sign-in, image, and create account components.', 'Components are the building blocks of an application, forming a hierarchy and are a subset of directives. Components are highlighted as the building blocks of an application, forming a hierarchy and being a subset of directives.', "The creation process of a component involves using the 'ng-gc' command, which creates four different files for the component. The 'ng-gc' command is used to create a component, generating four different files for the component.", 'The selector, template, template URL, styles, and style URLs are essential properties of the Metadata object used in the component decorator. The essential properties of the Metadata object used in the component decorator, including selector, template, template URL, styles, and style URLs, are explained.']}], 'duration': 1642.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg33951876.jpg', 'highlights': ['Angular is an open-source JavaScript framework written completely in TypeScript and is maintained by Google, providing advantages and a standard structure for developers, and designed for web, desktop, and mobile platforms.', 'Single-page applications are primarily developed using Angular, which are applications that get loaded just once onto the browser, eliminating the need for subsequent page loads during interactions.', 'Angular brings structure and consistency to web applications, providing scalability and maintainability, and it supports modularity and testability, making it ideal for developing modern applications.', 'TypeScript offers better syntactic structure, making the code base easier to understand and maintain.', 'Angular uses two-way data binding, allowing changes in UI elements to be reflected in the corresponding model state and vice versa.', 'Many top-tier companies like Nike, Forbes, Google, HBO, Sony, Upwork, among others readily deploy Angular.', 'Angular offers limited SEO options and poor accessibility to search engine crawlers.', 'The steep learning curve of Angular requires learners to be acquainted with basic topics such as directives, modules, decorators, components, services, dependency injection, pipes, and templates, followed by more advanced topics like change detection zones, AOT compilation, and Rx.js.', 'Node.js is a prerequisite for Angular, serving as the base for a large part of its build environment.', 'The Angular CLI is a tool that makes it easier to bootstrap and develop Angular applications.', 'Angular components are likened to Lego blocks and are combined to form the final application, consisting of logo, sign-in, image, and create account components.', 'Components are the building blocks of an application, forming a hierarchy and are a subset of directives.', "The creation process of a component involves using the 'ng-gc' command, which creates four different files for the component.", 'The selector, template, template URL, styles, and style URLs are essential properties of the Metadata object used in the component decorator.']}, {'end': 37619.415, 'segs': [{'end': 35746.986, 'src': 'embed', 'start': 35720.925, 'weight': 4, 'content': [{'end': 35726.429, 'text': 'In the PostalDetails class, the constructor creates copies of the number and address.', 'start': 35720.925, 'duration': 5.504}, {'end': 35733.634, 'text': 'So when you instantiate a new PostalDetails class, the constructor instantiates a unique number and address.', 'start': 35727.29, 'duration': 6.344}, {'end': 35737.317, 'text': "Now although this looks simple, there's a problem with this code.", 'start': 35734.435, 'duration': 2.882}, {'end': 35742.365, 'text': "Let's assume that the number and address class constructors now accept parameters.", 'start': 35738.004, 'duration': 4.361}, {'end': 35746.986, 'text': 'When we change the numbers class, the postal details class gets broken.', 'start': 35743.145, 'duration': 3.841}], 'summary': 'Postaldetails class constructor creates unique number and address, but breaks when number class is changed.', 'duration': 26.061, 'max_score': 35720.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg35720925.jpg'}, {'end': 35972.793, 'src': 'embed', 'start': 35941.186, 'weight': 0, 'content': [{'end': 35946.087, 'text': 'So to create that, we make use of the command nggs.', 'start': 35941.186, 'duration': 4.901}, {'end': 35951.388, 'text': "You can either give s or service and the service name I'm providing is records.", 'start': 35947.147, 'duration': 4.241}, {'end': 35960.707, 'text': 'So let me just say Alright, here you can see two files are created.', 'start': 35952.068, 'duration': 8.639}, {'end': 35964.436, 'text': 'There is a spec.ts file and the .ts file.', 'start': 35961.148, 'duration': 3.288}, {'end': 35972.793, 'text': "All right, so now the service contains all the employee data that needs to be displayed, right? So let's go ahead and write the data.", 'start': 35965.27, 'duration': 7.523}], 'summary': "Using nggs command, service 'records' is created with 2 files: spec.ts and .ts. service contains employee data for display.", 'duration': 31.607, 'max_score': 35941.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg35941186.jpg'}, {'end': 36234.368, 'src': 'embed', 'start': 36201.08, 'weight': 1, 'content': [{'end': 36201.44, 'text': 'All right.', 'start': 36201.08, 'duration': 0.36}, {'end': 36208.985, 'text': 'And what we have to do next is that we must also declare this instance that is being created in the providers area of the component.', 'start': 36202.021, 'duration': 6.964}, {'end': 36210.666, 'text': 'All right.', 'start': 36210.306, 'duration': 0.36}, {'end': 36221.433, 'text': "So let's just say providers and then say records.service.", 'start': 36211.266, 'duration': 10.167}, {'end': 36234.368, 'text': "All right, now we've created the instance of this class, right? However, to access this instance, an object is also created.", 'start': 36225.7, 'duration': 8.668}], 'summary': 'Declare instance in providers area, access through created object.', 'duration': 33.288, 'max_score': 36201.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg36201080.jpg'}, {'end': 37574.235, 'src': 'embed', 'start': 37542.131, 'weight': 2, 'content': [{'end': 37545.332, 'text': 'Now just to help you understand that better, let me just show it to you.', 'start': 37542.131, 'duration': 3.201}, {'end': 37549.294, 'text': 'Now back in my HTML file.', 'start': 37547.213, 'duration': 2.081}, {'end': 37558.904, 'text': 'instead of invalid, let me have another tag, a paragraph tag, within which i make use of ng.', 'start': 37550.538, 'duration': 8.366}, {'end': 37574.235, 'text': 'if, again now ng, if name dot errors, dot required is true, then i display the message.', 'start': 37558.904, 'duration': 15.331}], 'summary': 'Demonstrating usage of ng-if directive with angularjs in html.', 'duration': 32.104, 'max_score': 37542.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg37542131.jpg'}], 'start': 35594.843, 'title': 'Angular development essentials', 'summary': 'Discusses dependency injection, employee records display using arrays, forms creation, and user registration form, emphasizing the benefits of angular development for code flexibility and testability. it covers creating and displaying employee records, using dependency injection for form creation, and validating form fields in javascript for improved user experience.', 'chapters': [{'end': 35972.793, 'start': 35594.843, 'title': 'Dependency injection in angular', 'summary': 'Discusses the concept of dependency injection, its drawbacks, the design pattern, and a demonstration of its usage with services and components, emphasizing its benefits for code flexibility and testability.', 'duration': 377.95, 'highlights': ['Dependency injection allows code reusability and flexibility by injecting the same piece of code into every component, benefiting directives, pipes, and components. Dependency injection supports code reusability by injecting the same piece of code into every component, benefiting directives, pipes, and components, thereby enhancing code flexibility and testability.', 'The drawback of not using dependency injection lies in the inflexibility of the code and its unsuitability for testing, as any change in dependencies requires corresponding changes in the dependent classes. The drawback of not using dependency injection lies in the inflexibility of the code and its unsuitability for testing, as any change in dependencies requires corresponding changes in the dependent classes, hindering code flexibility and testability.', 'Dependency injection, as a coding pattern, allows a class to receive its dependencies from an external source rather than creating them on its own, thereby overcoming the drawbacks of not using dependency injection. Dependency injection, as a coding pattern, allows a class to receive its dependencies from an external source rather than creating them on its own, thereby overcoming the drawbacks of not using dependency injection and enhancing code flexibility and testability.']}, {'end': 36345.017, 'start': 35973.333, 'title': 'Angular employee records display', 'summary': 'Covers the process of creating and displaying employee records for three employees using arrays in an angular component, including creating arrays, importing a service, creating and using objects to retrieve data, and binding methods to button clicks.', 'duration': 371.684, 'highlights': ['Creating arrays to store employee records Three arrays are created to store employee records for three employees, including information such as name, employee ID, and email ID.', 'Importing and using a service to retrieve data The service is imported into the component.ts file using dependency injection, and an instance of the service class is created to access methods and variables for retrieving employee details.', 'Binding methods to button clicks for displaying information Three different methods are created to retrieve data from the service class for each employee, and the retrieved data is added to the array, which is then displayed on the UI by binding the methods with buttons.']}, {'end': 36697.403, 'start': 36346.057, 'title': 'Angular forms and dependency injection', 'summary': 'Covers creating custom html tags and adding them to the main component, including the use of dependency injection to inject a service class, and discusses the different types of form building supported by angular, namely the template-driven and reactive approaches, along with form control and form group functionalities.', 'duration': 351.346, 'highlights': ['Creation of Custom HTML Tags and Dependency Injection The process of creating a custom HTML tag for the component and adding it to the main component, as well as utilizing dependency injection to inject a service class for Angular.', 'Discussion of Template-Driven and Reactive Approaches Detailed explanation of the template-driven approach, including the use of ngModule tag and ngControlGroup module, and JSON values for form generation, and the reactive approach, highlighting its programming paradigm and elimination of two-way data binding.', 'Form Control and Form Group Functionalities Explanation of form control as a class for enabling validation of input fields and form group as a representation of a group of controls, along with their functionalities and validation error handling.']}, {'end': 37227.781, 'start': 36698.024, 'title': 'Creating user registration form', 'summary': 'Demonstrates the creation of a user registration form in vs code, including importing the forms module, creating form fields for first name, last name, email id, and password, aligning the form using css, adding ngmodel directive for form controls, binding ngsubmit property to a submit method, and generating javascript representation using ngform to validate fields.', 'duration': 529.757, 'highlights': ['Creating user registration form with four fields The use case involves creating a user registration form with four fields: first name, last name, email ID, and password.', 'Importing and using forms module The process involves importing the forms module from Angular forms in the main app.module.ts file and including it in the imports section.', 'Adding form fields and button in component.html The speaker demonstrates adding form fields for each input such as first name, last name, email, and password, along with a submit button to the component.html file.', 'Aligning the form using CSS The form and label tags are aligned to the center and left, respectively, using CSS to enhance the appearance of the user registration form.', "Adding ngModel directive for form controls The ngModel directive is added to each input field, resulting in the addition of ng-untouched, ng-pristine, and ng-valid classes to indicate Angular's recognition of the form tag and fields.", 'Binding ngSubmit property to a submit method The ngSubmit property is bound to a method called Submit, which is defined in the component.ts file, and it gets called upon clicking the submit button.', 'Generating JavaScript representation using ngForm for field validation The process involves creating a JavaScript representation using ngForm assigned to a template variable and passing it as a parameter in the submit method to validate fields.']}, {'end': 37619.415, 'start': 37230.063, 'title': 'Form validation in javascript', 'summary': 'Covers form validation in javascript, demonstrating how to use form control objects and template variables to ensure field validation, including required fields with minimum and maximum length constraints, and displaying error messages based on user input. it also showcases nested if conditions for different form validation scenarios.', 'duration': 389.352, 'highlights': ['Demonstrating use of form control objects and template variables to ensure field validation The transcript explains how to utilize form control objects and template variables to ensure field validation, including accessing properties like errors, invalid, and touched to display error messages.', 'Usage of required fields with minimum and maximum length constraints The speaker showcases how to specify properties like required, minLength, and maxLength in the input tag to enforce constraints such as mandatory fields, minimum length of 2, and maximum length of 7 for input.', 'Displaying error messages based on user input The demonstration includes displaying error messages based on user input, such as alerting the user when attempting to submit the form without filling the required fields or providing input that does not meet the specified length constraints.', 'Showcasing nested if conditions for different form validation scenarios The chapter illustrates the use of nested if conditions to handle different form validation scenarios, such as displaying specific messages for required fields and input length constraints.']}], 'duration': 2024.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg35594843.jpg', 'highlights': ['Dependency injection enhances code flexibility and testability by injecting the same code into every component.', 'Creating arrays to store employee records with information such as name, employee ID, and email ID.', 'Creation of Custom HTML Tags and Dependency Injection for Angular.', 'Creating a user registration form with four fields: first name, last name, email ID, and password.', 'Demonstrating use of form control objects and template variables to ensure field validation.']}, {'end': 39157.187, 'segs': [{'end': 38043.667, 'src': 'embed', 'start': 38009.472, 'weight': 4, 'content': [{'end': 38016.996, 'text': "So for that in my component.ts file I'm going to create an array that displays the employee information.", 'start': 38009.472, 'duration': 7.524}, {'end': 38021.578, 'text': "In our case, I'm creating three different employee records.", 'start': 38017.756, 'duration': 3.822}, {'end': 38024.22, 'text': "So for that, I'll have three different arrays.", 'start': 38022.119, 'duration': 2.101}, {'end': 38040.345, 'text': 'So let me just call the arrays info received, one indicating this is the information of first employee, and this is going to be of type string,', 'start': 38024.88, 'duration': 15.465}, {'end': 38043.667, 'text': "and i'll just initialize it to null.", 'start': 38040.345, 'duration': 3.322}], 'summary': 'Creating array to display employee information with 3 records.', 'duration': 34.195, 'max_score': 38009.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg38009472.jpg'}, {'end': 38259.484, 'src': 'embed', 'start': 38221.245, 'weight': 3, 'content': [{'end': 38224.406, 'text': "So now we've created the employee records.", 'start': 38221.245, 'duration': 3.161}, {'end': 38231.047, 'text': 'So what I have to do is I have to create a method that returns these employee records.', 'start': 38225.066, 'duration': 5.981}, {'end': 38238.389, 'text': "Correct? So for that, I'm just going to create another method called get info one.", 'start': 38231.868, 'duration': 6.521}, {'end': 38251.801, 'text': 'which is of type string, and it just returns this.info1.', 'start': 38240.956, 'duration': 10.845}, {'end': 38259.484, 'text': "alright, similarly, for the rest of the two records, I'm just going to retrieve them.", 'start': 38251.801, 'duration': 7.683}], 'summary': 'Created employee records, implemented method to retrieve info1.', 'duration': 38.239, 'max_score': 38221.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg38221245.jpg'}, {'end': 38662.031, 'src': 'embed', 'start': 38631.295, 'weight': 6, 'content': [{'end': 38636.256, 'text': "So what I'm going to do is I'm just going to paste the same twice.", 'start': 38631.295, 'duration': 4.961}, {'end': 38642.621, 'text': "And here I'm going to just change the names.", 'start': 38639.438, 'duration': 3.183}, {'end': 38644.002, 'text': "I'll say 2 here.", 'start': 38642.741, 'duration': 1.261}, {'end': 38649.787, 'text': 'And this is again for employee 2.', 'start': 38644.743, 'duration': 5.044}, {'end': 38651.489, 'text': "And I'm going to change this as well.", 'start': 38649.787, 'duration': 1.702}, {'end': 38655.012, 'text': "It's going to be employee, I'm sorry, it's going to be info received 2.", 'start': 38651.929, 'duration': 3.083}, {'end': 38659.156, 'text': 'This is going to be info received 3.', 'start': 38655.012, 'duration': 4.144}, {'end': 38662.031, 'text': 'And finally employee 3.', 'start': 38659.156, 'duration': 2.875}], 'summary': 'Information pasted twice with names changed, and info received for employees 2 and 3.', 'duration': 30.736, 'max_score': 38631.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg38631295.jpg'}, {'end': 38941.123, 'src': 'embed', 'start': 38904.063, 'weight': 10, 'content': [{'end': 38920.593, 'text': "So here I just go ahead and say import forms module from angular forms and here in my imports i'll just say forms module.", 'start': 38904.063, 'duration': 16.53}, {'end': 38923.995, 'text': "okay, so i've imported the forms module.", 'start': 38920.593, 'duration': 3.402}, {'end': 38926.957, 'text': 'so now, uh, back in my html file.', 'start': 38923.995, 'duration': 2.962}, {'end': 38933.938, 'text': "what i'm going to do is that i'll have to make use of this template variable to update my information correct?", 'start': 38926.957, 'duration': 6.981}, {'end': 38941.123, 'text': "So I'll have to create another method that will update information into the records.", 'start': 38934.578, 'duration': 6.545}], 'summary': 'Imported forms module from angular forms and created method to update information into records.', 'duration': 37.06, 'max_score': 38904.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg38904063.jpg'}, {'end': 39031.59, 'src': 'embed', 'start': 38987.833, 'weight': 0, 'content': [{'end': 38989.314, 'text': "I'll just let you know in a minute.", 'start': 38987.833, 'duration': 1.481}, {'end': 38999.518, 'text': "And the value that I'm going to be passing will be the value that you've provided as an input, which is nothing but form.value.location.", 'start': 38989.934, 'duration': 9.584}, {'end': 39001.539, 'text': 'All right.', 'start': 39001.139, 'duration': 0.4}, {'end': 39006.982, 'text': "So now, what happens is that I'll have to again specify what addInfo is.", 'start': 39002.079, 'duration': 4.903}, {'end': 39012.064, 'text': 'And this method is going to be defined in the service file, correct?', 'start': 39007.622, 'duration': 4.442}, {'end': 39031.59, 'text': "So here I'm going to create another method, that's add info and i'm gonna pass info as a parameter.", 'start': 39012.884, 'duration': 18.706}], 'summary': 'Creating a method to pass input value form.value.location to addinfo in service file.', 'duration': 43.757, 'max_score': 38987.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg38987833.jpg'}, {'end': 39090.199, 'src': 'embed', 'start': 39053.416, 'weight': 1, 'content': [{'end': 39059.32, 'text': 'And the same for the other two arrays as well.', 'start': 39053.416, 'duration': 5.904}, {'end': 39064.724, 'text': 'Let me just change these.', 'start': 39061.181, 'duration': 3.543}, {'end': 39065.244, 'text': 'All right.', 'start': 39064.924, 'duration': 0.32}, {'end': 39071.805, 'text': "so what exactly i'm doing is that i have, i have a method called add info,", 'start': 39066.701, 'duration': 5.104}, {'end': 39081.392, 'text': 'which gets information from the component all right and it basically pushes this information into the array and also i have to return it.', 'start': 39071.805, 'duration': 9.587}, {'end': 39090.199, 'text': "so i'll say return this dot info, one all right, and i'll save it.", 'start': 39081.392, 'duration': 8.807}], 'summary': 'A method called add info pushes information into an array and returns it.', 'duration': 36.783, 'max_score': 39053.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg39053416.jpg'}, {'end': 39157.187, 'src': 'embed', 'start': 39121.313, 'weight': 8, 'content': [{'end': 39142.812, 'text': "So here I'll say ng submit and I'm going to call the method update info and I'm going to pass frm as the argument and now let's save this and execute.", 'start': 39121.313, 'duration': 21.499}, {'end': 39147.123, 'text': 'so all right.', 'start': 39146.323, 'duration': 0.8}, {'end': 39152.285, 'text': 'here you can see that we have an input field and a button saying add info.', 'start': 39147.123, 'duration': 5.162}, {'end': 39157.187, 'text': 'so now i can just go ahead and say type usa.', 'start': 39152.285, 'duration': 4.902}], 'summary': "Using ng submit to call update info method with frm as argument. input field and button for adding info. typed 'usa'.", 'duration': 35.874, 'max_score': 39121.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg39121313.jpg'}], 'start': 37620.776, 'title': 'Angular services and dependency injection', 'summary': 'Explains the concept of angular services, highlighting their role in sharing code, interacting with the backend, and their singleton nature. it covers creating a service for employee information, creating and retrieving employee records, and using dependency injection to retrieve and display employee information in an angular application.', 'chapters': [{'end': 37892.938, 'start': 37620.776, 'title': 'Angular services overview', 'summary': 'Explains the concept of angular services, highlighting their role in sharing code, interacting with the backend, and their singleton nature. it also mentions the use of services for tasks like fetching data from the server and validating user input, and explores features such as using services as dependencies, sharing data among components, and registering services as part of a module or component.', 'duration': 272.162, 'highlights': ['Angular services are singleton, meaning that only a single instance of a service gets created and the same instance is used by each and every building block in the application. The concept of Angular services being singleton is emphasized, ensuring a single instance is utilized throughout the application.', 'Services can be used to share data among several components, and they hold valuable business logic, interacting with the backend and sharing data. The role of services in sharing data among components and interacting with the backend, as well as holding valuable business logic, is highlighted.', 'Angular services can be used for tasks like fetching data from the server, validating user input, and logging directly to the console, and they can be injected into components as dependencies. The various tasks that Angular services can perform, such as fetching data, validating input, and logging, as well as their usage as dependencies, are explained.']}, {'end': 38009.112, 'start': 37893.558, 'title': 'Learning angular services hands-on', 'summary': "Covers creating a folder and file in vs code, generating a component for employee information, and creating a service named 'data' using 'ng g service' command, aiming to display employee details.", 'duration': 115.554, 'highlights': ["Creating a service named 'data' using 'ng g service' command, aiming to display employee details.", 'Generating a component for employee information.', 'Creating a folder called demo_angular and a file called Hello World in VS Code.']}, {'end': 38259.484, 'start': 38009.472, 'title': 'Angular component: creating and retrieving employee records', 'summary': 'Details the creation of employee information arrays in a component.ts file and the retrieval of employee records through corresponding methods in a data.ts file, with specific employee details such as names, ids, and email addresses.', 'duration': 250.012, 'highlights': ['Arrays created in component.ts display employee information and include three different employee records, each with specific arrays and retrieval methods.', 'Employee records are created in data.ts with specific details including names, employee IDs, and email addresses, and methods are established to return these records.', 'Methods are created to retrieve the employee records, with specific methods for each of the three different employee records.']}, {'end': 38486.891, 'start': 38259.484, 'title': 'Angular dependency injection', 'summary': 'Covers the process of using dependency injection in an angular application to retrieve and display employee information, including importing a service, using providers array, accessing service instance, and retrieving information from the service class.', 'duration': 227.407, 'highlights': ['The process involves importing a service, using providers array, accessing service instance, and retrieving information from the service class. Importing a service, using providers array, accessing service instance, retrieving information from the service class.', 'The service instance is created when the component is created, and it is used to perform particular tasks. Service instance creation, usage for performing tasks.', "The 'infoReceived' array stores the information retrieved from the service class for each employee. Usage of 'infoReceived' array to store retrieved information.", "Creation of UI using an unordered list and 'ngFor' directive to loop over the records and display the information. Creation of UI with 'ngFor' directive to loop over records and display information."]}, {'end': 39157.187, 'start': 38486.891, 'title': 'Angular service tutorial', 'summary': 'Details the creation of an angular service to retrieve and update employee information, including the creation of buttons to display employee records and a form to add location information for all employees, demonstrating the use of angular forms and the capability of services to update backend data.', 'duration': 670.296, 'highlights': ['The chapter details the creation of an Angular service to retrieve and update employee information The tutorial focuses on creating an Angular service to retrieve and update employee information using methods like getInfoFromService1 and addInfo.', 'Creation of buttons to display employee records The tutorial demonstrates the creation of buttons for employee records, allowing users to retrieve information such as name, employee ID, and email IDs for each employee.', 'Creation of a form to add location information for all employees The tutorial showcases the creation of a form to add location information for all employees, utilizing Angular forms and demonstrating the capability of services to update backend data.']}], 'duration': 1536.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg37620776.jpg', 'highlights': ['Angular services are singleton, ensuring a single instance is utilized throughout the application.', 'The role of services in sharing data among components, interacting with the backend, and holding valuable business logic is emphasized.', 'Various tasks that Angular services can perform, such as fetching data, validating input, and logging, as well as their usage as dependencies, are explained.', "Creating a service named 'data' using 'ng g service' command, aiming to display employee details.", 'Arrays created in component.ts display employee information and include three different employee records, each with specific arrays and retrieval methods.', 'Importing a service, using providers array, accessing service instance, retrieving information from the service class.', "The 'infoReceived' array stores the information retrieved from the service class for each employee.", "Creation of UI with 'ngFor' directive to loop over records and display information.", 'The tutorial focuses on creating an Angular service to retrieve and update employee information using methods like getInfoFromService1 and addInfo.', 'The tutorial demonstrates the creation of buttons for employee records, allowing users to retrieve information such as name, employee ID, and email IDs for each employee.', 'The tutorial showcases the creation of a form to add location information for all employees, utilizing Angular forms and demonstrating the capability of services to update backend data.']}, {'end': 41546.501, 'segs': [{'end': 39308.807, 'src': 'embed', 'start': 39279.02, 'weight': 1, 'content': [{'end': 39282.361, 'text': "So let's see how to embed Bootstrap into Angular.", 'start': 39279.02, 'duration': 3.341}, {'end': 39285.217, 'text': 'Now there are two ways to do it.', 'start': 39283.476, 'duration': 1.741}, {'end': 39290.979, 'text': 'First up is by using the Bootstrap CDN or the Content Delivery Network.', 'start': 39286.057, 'duration': 4.922}, {'end': 39298.542, 'text': 'Now this enables users to load CSS, JavaScript and images remotely from its servers.', 'start': 39291.74, 'duration': 6.802}, {'end': 39302.444, 'text': 'The other method is to use Bootstrap NPM.', 'start': 39299.523, 'duration': 2.921}, {'end': 39308.807, 'text': 'Bootstrap, jQuery and other packages and frameworks can be installed via the command prompt.', 'start': 39302.944, 'duration': 5.863}], 'summary': 'Embed bootstrap into angular using cdn or npm for remote access.', 'duration': 29.787, 'max_score': 39279.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg39279020.jpg'}, {'end': 39418.34, 'src': 'embed', 'start': 39355.764, 'weight': 0, 'content': [{'end': 39365.309, 'text': 'and when you click on the more info button, it navigates to the official page that gives you the overview for that particular course.', 'start': 39355.764, 'duration': 9.545}, {'end': 39371.632, 'text': 'So this is for Lean Six Sigma, the same for full stack web development as well.', 'start': 39365.989, 'duration': 5.643}, {'end': 39376.694, 'text': 'And the same for the last one that is cybersecurity.', 'start': 39372.813, 'duration': 3.881}, {'end': 39383.578, 'text': "And finally, I've added a simple video here to just make it more beautiful.", 'start': 39377.615, 'duration': 5.963}, {'end': 39385.538, 'text': "So I've added a simple video.", 'start': 39383.818, 'duration': 1.72}, {'end': 39392.236, 'text': "And lastly, I've also linked our YouTube channel.", 'start': 39387.619, 'duration': 4.617}, {'end': 39401.357, 'text': 'So when you click on the YouTube icon, it will navigate to the YouTube channel, to our YouTube channel here.', 'start': 39392.776, 'duration': 8.581}, {'end': 39408.398, 'text': "All right, so this is what we're going to be creating using Angular Bootstrap.", 'start': 39402.837, 'duration': 5.561}, {'end': 39410.779, 'text': "So I'm hoping you're all ready for it.", 'start': 39408.458, 'duration': 2.321}, {'end': 39413.559, 'text': "So without further delay, let's jump in.", 'start': 39411.359, 'duration': 2.2}, {'end': 39418.34, 'text': "So first, let's find the template that we want to use for our blog.", 'start': 39414.179, 'duration': 4.161}], 'summary': 'The presentation includes overviews for lean six sigma, full stack web development, and cybersecurity, with the addition of a video and a link to the youtube channel, all created using angular bootstrap.', 'duration': 62.576, 'max_score': 39355.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg39355764.jpg'}, {'end': 39686.479, 'src': 'embed', 'start': 39649.205, 'weight': 4, 'content': [{'end': 39669.154, 'text': "so here you can just right click and say copy relative path and back in my JSON file in my scripts I'm gonna just paste it here and make sure to make it a path by providing forward slash.", 'start': 39649.205, 'duration': 19.949}, {'end': 39686.479, 'text': 'All right, and then the next thing we need is the jquery.min.js file, so for that, Again in our node modules you will have to look for jQuery.', 'start': 39674.337, 'duration': 12.142}], 'summary': 'Demonstrating how to copy a path and locate jquery.min.js within node modules.', 'duration': 37.274, 'max_score': 39649.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg39649205.jpg'}], 'start': 39157.187, 'title': 'Angular web development', 'summary': 'Covers angular services, bootstrap integration, creating components, embedding dependencies, adding course information, youtube integration, and routing basics and tutorial for creating single-page applications, with specific steps and code examples.', 'chapters': [{'end': 39454.8, 'start': 39157.187, 'title': 'Angular services and bootstrap overview', 'summary': 'Explains the concept of angular services and bootstrap, highlighting the advantages and ways to embed bootstrap into an angular application, along with an example of creating a blog using angular bootstrap.', 'duration': 297.613, 'highlights': ['The chapter provides an overview of Bootstrap, highlighting its role as a toolkit for creating responsive web applications and pages, free and open-source nature, and advantages like a responsive grid and pre-built components, enabling quick and responsive website design.', 'The tutorial demonstrates the embedding of Bootstrap into an Angular application using both Bootstrap CDN and Bootstrap NPM, emphasizing the ease of installation via command prompt and showcasing the creation of a blog post using Angular Bootstrap, including adding content, navigation, and linking to external sources.', 'The speaker encourages the audience to explore the possibilities of Angular services and Bootstrap, emphasizing the importance of understanding the concepts better through practical demonstration and exploration.', 'The chapter concludes with a demonstration of choosing a bootstrap blog template for creating a blog, providing an example of selecting a template for small businesses and encouraging the audience to begin the practical implementation of the concepts.', 'The speaker emphasizes the simplicity of the demo on Angular services to aid in better understanding and recommends further exploration of Bootstrap and its possibilities, promoting hands-on experience to comprehend the concepts effectively.']}, {'end': 40392.239, 'start': 39455.44, 'title': 'Angular components and dependencies', 'summary': 'Covers the process of creating components for different parts of a web ui, including top navigation bar, introduction, courses, and footer, and embedding dependencies like jquery and bootstrap in the angular project using npm, with specific steps and code examples.', 'duration': 936.799, 'highlights': ['The process of creating components for different parts of a web UI The speaker explains the step-by-step process of creating components for the top navigation bar, introduction, courses, and footer to organize and manage the code for specific parts of the UI.', 'Embedding dependencies like jQuery and Bootstrap in the Angular project The speaker provides detailed instructions on embedding dependencies like jQuery and Bootstrap in the Angular project using npm, including the specific commands and paths required for installation and embedding in the angular.json file.', 'Customizing the web UI by adding a logo, changing taglines, and displaying specific information The speaker demonstrates the customization of the web UI by adding a logo, changing taglines, and displaying specific information in different components, along with providing code examples and live previews of the changes in the browser.']}, {'end': 40713.823, 'start': 40392.279, 'title': 'Adding course information and youtube channel link', 'summary': 'Involves adding information for three courses, including their names, durations, and reference links, as well as embedding a video in the courses component and providing a link to the youtube channel.', 'duration': 321.544, 'highlights': ['Information for three courses is added, including their names, durations, and reference links. Three courses: postgraduate program in Lean Six Sigma, full stack development, and cybersecurity.', 'A video is embedded in the courses component, which starts playing when clicked. Video embedded and playable from the component.', 'A link to the YouTube channel is provided along with the YouTube logo and a message. YouTube logo and channel link added, along with a message.']}, {'end': 41195.49, 'start': 40714.764, 'title': 'Angular routing basics', 'summary': 'Explains the basics of routing in angular, its significance in creating single-page applications, and the process of implementing routing to navigate to different pages, with a demonstration of creating a navigation bar and components for login and home pages.', 'duration': 480.726, 'highlights': ['Routing is essential in Angular to create single-page applications, providing an excellent user experience and faster loading times, as seen in applications like Google, Facebook, Twitter, and Gmail. Single-page applications in Angular offer faster loading times and improved user experience seen in popular applications like Google, Facebook, Twitter, and Gmail.', 'The chapter provides a hands-on demonstration of creating a navigation bar and components for login and home pages, using Bootstrap to customize the user interface and add reference links, images, and logos. The demonstration includes creating a navigation bar and components for login and home pages, utilizing Bootstrap to customize the user interface and add reference links, images, and logos.', 'The importance of routing in Angular is highlighted, showcasing its role in dynamically loading new content and configuring routes and components to be displayed, ensuring a better understanding through practical implementation. Routing in Angular is emphasized for dynamically loading new content, configuring routes, and components, leading to better comprehension through practical implementation.']}, {'end': 41546.501, 'start': 41196.19, 'title': 'Angular routing tutorial', 'summary': 'Explains the process of configuring routes in an angular application, including creating paths for login and home components, linking routes to buttons using router directives, and displaying components using the router outlet directive, resulting in successful navigation and display of content.', 'duration': 350.311, 'highlights': ['Configuring routes for login and home components The chapter explains the creation of paths for login and home components, enabling navigation to these components based on the specified routes.', 'Linking routes to buttons using router directives The process of linking routes to buttons using router directives like router link and router link active is demonstrated, enabling seamless navigation within the application.', 'Displaying components using the router outlet directive The usage of the router outlet directive to specify where components are displayed within the application is explained, resulting in the successful display of content based on the selected route.']}], 'duration': 2389.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q8NPQ2RgWyg/pics/Q8NPQ2RgWyg39157187.jpg', 'highlights': ['Demonstration of embedding Bootstrap into an Angular application using Bootstrap CDN and Bootstrap NPM, showcasing the creation of a blog post.', 'Step-by-step process of creating components for the top navigation bar, introduction, courses, and footer to organize and manage the code for specific parts of the UI.', 'Adding information for three courses, embedding a video in the courses component, and providing a link to the YouTube channel.', 'Hands-on demonstration of creating a navigation bar and components for login and home pages, utilizing Bootstrap to customize the user interface.', 'Explanation of configuring routes for login and home components, linking routes to buttons using router directives, and displaying components using the router outlet directive.']}], 'highlights': ['The tutorial covers creating a simple app using HTML, specifically a quiz app, to demonstrate practical implementation.', 'The video covers a complete tutorial on version control systems like Git and GitHub, essential for collaboration and managing code versions.', 'The chapter explores the usage of JavaScript for adding interactivity to web applications and delves into ReactJS and Angular for building apps.', 'Git facilitates effective collaboration for small, medium, and massive applications.', 'Continuous Integration and Deployment in DevOps emphasizes continuous building and testing for faster solution delivery.', 'Decathlon transitioned to GitHub, increasing code visibility and contribution across the organization.', "Git's advantages include free cost, non-linear approach, scalability, effective collaboration, and easy branching.", 'Branches in Git are inexpensive and efficient, allowing the creation of numerous branches without significant resource consumption.', 'Git is crucial for any development project, supporting both programmers and non-technical users, and enabling collaboration among multiple collaborators.', 'HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'CSS is a simple design language used for making web pages look more beautiful and presentable.', 'JavaScript is a powerful interpreted language targeted for web development, used for making web pages interactive and bringing them to life.', 'The chapter thoroughly covers CSS selectors, including element, ID, class, universal, and group selectors, providing detailed explanations and examples for each type.', 'JavaScript is dynamic, lightweight, and object-oriented, open source, and cross-platform compatible.', 'JavaScript facilitates form validation on the client side, improving user experience and reducing server load.', 'ReactJS is a JavaScript library for fast and interactive UIs, open source for accessibility and enhancement.', 'Angular is an open-source JavaScript framework written completely in TypeScript and is maintained by Google, providing advantages and a standard structure for developers, and designed for web, desktop, and mobile platforms.', 'Dependency injection enhances code flexibility and testability by injecting the same code into every component.', 'Angular services are singleton, ensuring a single instance is utilized throughout the application.', 'Demonstration of embedding Bootstrap into an Angular application using Bootstrap CDN and Bootstrap NPM, showcasing the creation of a blog post.']}