title
Front End Development Full Course 2022 | Front End Development Tutorial For Beginners | 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 Full Stack Web Development: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=FrontEndDevelopmentLive16Feb2022&utm_medium=Descriptionff&utm_source=youtube 🔥Caltech Coding Bootcamp (US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=FrontEndDevelopmentLive16Feb2022&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 and all these were done by a front-end developer. This Frontend Development Full Course covers the concepts of Git, HTML, CSS, JavaScript, React, and Angular. Below are the topics covered in this video: Introduction Git and Github HTML HTML Registration Form HTML Quiz CSS JavaScript ReactJS Angular ✅Subscribe to our Channel to learn more about the top Technologies: https://bit.ly/2VT4WtH #FronEndFullCourse #FrontEndDeveloper #FrontEndWebDevelopment #FromEndWebDevelopmentCourse #LearnFronEndWebDevelopment #LearnFrontEndWenDevelopmentFromScratch #Simplilearn 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 consistent throughout the whole design ➡️ 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 a 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 upto 25 CEUs from Caltech CTME Simplilearn's JobAssist helps you get noticed by top hiring companies Masterclasses taught by Caltech CTME instructor 8X higher interaction in live online classes conducted by industry experts 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 - ES6Servlets - SOAP and REST - JSP 👉Learn More at: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=FrontEndDevelopmentLive16Feb2022&utm_medium=Description&utm_source=youtube 🔥🔥 Interested in Attending Live Classes? Call Us: IN - 18002127688 / US - +18445327688

detail
{'title': 'Front End Development Full Course 2022 | Front End Development Tutorial For Beginners | Simplilearn', 'heatmap': [{'end': 1683.748, 'start': 1259.529, 'weight': 1}], 'summary': "This comprehensive course covers a range of frontend development skills and frameworks such as html, css, javascript, reactjs, and angular, as well as git essentials, github's impact on decathlon's it transformation, css fundamentals, javascript form validation, promises, reactjs, and angular framework features.", 'chapters': [{'end': 404.335, 'segs': [{'end': 150.948, 'src': 'embed', 'start': 64.184, 'weight': 0, 'content': [{'end': 69.892, 'text': "Once you're familiar with that, we'll move on to understanding the basic front-end language that is HTML.", 'start': 64.184, 'duration': 5.708}, {'end': 77.402, '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': 70.793, 'duration': 6.609}, {'end': 81.808, 'text': "Moving ahead, we'll look at a detailed tutorial on CSS.", 'start': 78.666, 'duration': 3.142}, {'end': 87.252, 'text': "After that, we'll look at JavaScript and how to add interactivity to our web applications.", 'start': 82.328, 'duration': 4.924}, {'end': 92.595, 'text': 'Now, JavaScript offers some really cool libraries and frameworks for front-end development.', 'start': 88.132, 'duration': 4.463}, {'end': 96.618, 'text': 'So first, we learned ReactJS, which is a JavaScript library.', 'start': 93.436, 'duration': 3.182}, {'end': 100.46, 'text': "And moving ahead, we'll understand how Angular is used to build apps.", 'start': 97.078, 'duration': 3.382}, {'end': 105.804, 'text': "So now that you know what's in store for you, let's go ahead and jump right in.", 'start': 101.761, 'duration': 4.043}, {'end': 114.132, 'text': "In today's video, we're going to be learning all about the five top front-end skills you should know that will help you land a job in 2022.", 'start': 106.63, 'duration': 7.502}, {'end': 119.713, 'text': "So if you're wishing to become a front-end developer, then you're in the right place.", 'start': 114.132, 'duration': 5.581}, {'end': 121.614, 'text': 'This video will help you out.', 'start': 120.273, 'duration': 1.341}, {'end': 126.215, 'text': "But before we begin, if you haven't subscribed to our channel already,", 'start': 122.454, 'duration': 3.761}, {'end': 129.955, 'text': 'make sure to hit the subscribe button and the bell icon to never miss an update.', 'start': 126.215, 'duration': 3.74}, {'end': 131.676, 'text': "So let's begin.", 'start': 131.036, 'duration': 0.64}, {'end': 135.777, 'text': "Now let's say you're using an Instagram application.", 'start': 133.416, 'duration': 2.361}, {'end': 140.063, 'text': 'Every time you refresh, new content is loaded onto your screen.', 'start': 136.781, 'duration': 3.282}, {'end': 145.385, 'text': 'You can like a picture, add new ones, search for profiles, and do much more.', 'start': 141.023, 'duration': 4.362}, {'end': 150.948, 'text': "Although it provides a seamless user experience, there's a lot that goes in the backend as well.", 'start': 146.486, 'duration': 4.462}], 'summary': 'Learn html, css, and javascript for front-end development; gain top skills for 2022 job market.', 'duration': 86.764, 'max_score': 64.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3864184.jpg'}, {'end': 368.718, 'src': 'embed', 'start': 341.973, 'weight': 4, 'content': [{'end': 345.476, 'text': 'Now, there are multiple version control systems available in the market today.', 'start': 341.973, 'duration': 3.503}, {'end': 348.139, 'text': "There's Git, there's Subversion, etc.", 'start': 345.896, 'duration': 2.243}, {'end': 353.043, 'text': "So just focus on Git, which is the most popular one, and don't worry about other version control systems.", 'start': 348.519, 'duration': 4.524}, {'end': 357.527, 'text': 'Knowing these version control systems will definitely add more credibility to your resume.', 'start': 353.504, 'duration': 4.023}, {'end': 361.952, 'text': 'The fourth skill that is crucial is the CSS preprocessor.', 'start': 358.268, 'duration': 3.684}, {'end': 368.718, 'text': 'Now to give you an insight into why we need preprocessors, CSS is an old language and it has its own limitations.', 'start': 362.792, 'duration': 5.926}], 'summary': 'Focus on git, the most popular version control system, for resume credibility. css preprocessor crucial due to css limitations.', 'duration': 26.745, 'max_score': 341.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs38341973.jpg'}], 'start': 18.55, 'title': 'Frontend development skills and frameworks', 'summary': 'Provides a comprehensive guide to frontend development, showcasing html, css, javascript, reactjs, and angular as top skills for securing a job in 2022. it emphasizes the significance of backend development and the importance of frameworks like vue, jquery, and ember, along with version control systems and css preprocessors.', 'chapters': [{'end': 150.948, 'start': 18.55, 'title': 'Frontend development: skills and tools', 'summary': 'Covers a comprehensive guide to frontend development, including html, css, javascript, reactjs, and angular, providing insights into the top five front-end skills to secure a job in 2022, and emphasizes the significance of backend development in delivering seamless user experiences.', 'duration': 132.398, 'highlights': ['The chapter outlines a complete tutorial on version control systems, Git and GitHub, followed by an in-depth look at HTML, including implementing registration forms and building a quiz app, and a detailed tutorial on CSS.', 'The chapter provides insights into JavaScript and its role in adding interactivity to web applications, along with exploring popular libraries and frameworks such as ReactJS and Angular for front-end development.', 'The chapter emphasizes the top five front-end skills essential for securing a job in 2022, offering valuable guidance for individuals aspiring to become front-end developers.', 'The chapter underscores the significance of backend development in delivering seamless user experiences, using the example of Instagram to illustrate the complex backend operations behind its seamless user interface.', 'The chapter encourages viewers to subscribe to the channel for updates, reflecting the importance of staying informed in the dynamic field of frontend development.']}, {'end': 404.335, 'start': 152.289, 'title': 'Front-end development skills and frameworks', 'summary': 'Explores front-end development, emphasizing the importance of html, css, and javascript as fundamental languages, as well as the significance of frameworks like react, angular, vue, jquery, and ember, along with version control systems and css preprocessors in landing a front-end development job.', 'duration': 252.046, 'highlights': ['Front-end development comprises the frontend, backend, and database, with the main objectives being responsiveness and performance. The frontend, backend, and database form the full stack, and the main objectives of front-end development are responsiveness and performance.', 'The fundamental languages for front-end development are HTML for structuring web pages, CSS for aesthetics, and JavaScript for interactivity. HTML is used for structuring web pages, CSS for aesthetics, and JavaScript for interactivity.', 'Frameworks like React, Angular, Vue, jQuery, and Ember are essential for front-end development, providing advantages such as UI development, standard structure, and fast rebuilds. Frameworks like React, Angular, Vue, jQuery, and Ember are essential for front-end development, offering advantages such as UI development, standard structure, and fast rebuilds.', 'Version control systems such as Git are crucial for tracking code history and collaborating with others, adding credibility to a resume. Version control systems like Git are crucial for tracking code history and collaborating with others, adding credibility to a resume.', 'CSS preprocessors are important for generating CSS from a different language, making code more compatible and understandable for browsers. CSS preprocessors are important for generating CSS from a different language, making code more compatible and understandable for browsers.']}], 'duration': 385.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3818550.jpg', 'highlights': ['The chapter emphasizes the top five front-end skills essential for securing a job in 2022, offering valuable guidance for individuals aspiring to become front-end developers.', 'The chapter provides insights into JavaScript and its role in adding interactivity to web applications, along with exploring popular libraries and frameworks such as ReactJS and Angular for front-end development.', 'The chapter outlines a complete tutorial on version control systems, Git and GitHub, followed by an in-depth look at HTML, including implementing registration forms and building a quiz app, and a detailed tutorial on CSS.', 'The chapter underscores the significance of backend development in delivering seamless user experiences, using the example of Instagram to illustrate the complex backend operations behind its seamless user interface.', 'Version control systems such as Git are crucial for tracking code history and collaborating with others, adding credibility to a resume.']}, {'end': 2369.783, 'segs': [{'end': 439.332, 'src': 'embed', 'start': 404.835, 'weight': 0, 'content': [{'end': 406.716, 'text': 'There are many of these available today.', 'start': 404.835, 'duration': 1.881}, {'end': 409.478, 'text': "There's SAS, LESS, and STYLIST to name a few.", 'start': 407.017, 'duration': 2.461}, {'end': 414.441, 'text': 'And lastly, the most important skill required is testing and debugging.', 'start': 410.338, 'duration': 4.103}, {'end': 423.465, 'text': 'Now a very important aspect of web development is to make sure that the end result is error-free, free of bugs and seamless experience for the user.', 'start': 415.202, 'duration': 8.263}, {'end': 430.928, 'text': 'Therefore, the ability to test and debug a website is another essential skill that a front-end developer needs to have.', 'start': 424.506, 'duration': 6.422}, {'end': 439.332, 'text': 'There are various methodologies that can enable front-end developer to make sure that the websites or the product not only looks good but also functions smoothly.', 'start': 431.649, 'duration': 7.683}], 'summary': 'Front-end developers need testing and debugging skills to ensure error-free, seamless websites.', 'duration': 34.497, 'max_score': 404.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs38404835.jpg'}, {'end': 488.13, 'src': 'embed', 'start': 462.738, 'weight': 1, 'content': [{'end': 467.601, 'text': 'All you need to do is head to our Simply Learn page and type in full-stack developer.', 'start': 462.738, 'duration': 4.863}, {'end': 472.423, 'text': "you'll get a brief overview of the course and what it offers.", 'start': 469.141, 'duration': 3.282}, {'end': 475.884, 'text': 'If it suits your requirements, you can go ahead and enroll for it.', 'start': 473.003, 'duration': 2.881}, {'end': 479.586, 'text': 'Having this course certification will definitely boost your resume.', 'start': 476.384, 'duration': 3.202}, {'end': 488.13, 'text': "Hello, this is Matthew from Simply Learn, and today we're going to delve into Git and what it actually is and how it fits within your DevOps stack.", 'start': 480.106, 'duration': 8.024}], 'summary': 'Simply learn offers full-stack developer course. git is essential for devops stack.', 'duration': 25.392, 'max_score': 462.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs38462738.jpg'}, {'end': 546.841, 'src': 'embed', 'start': 518.278, 'weight': 2, 'content': [{'end': 522.621, 'text': "there'd be conflicts and you'd have to roll back different code versions.", 'start': 518.278, 'duration': 4.343}, {'end': 526.203, 'text': 'And this is really kind of the challenge that Git addresses.', 'start': 522.9, 'duration': 3.303}, {'end': 533.329, 'text': "Git is a tool that allows all of the developers, no matter what stack they're working in, to have access to all of the code.", 'start': 526.524, 'duration': 6.805}, {'end': 541.656, 'text': 'And it makes it much more effective at being able to have development teams work on small, medium or even massive applications,', 'start': 533.549, 'duration': 8.107}, {'end': 546.841, 'text': 'and some of the biggest applications out there are managed through a Git distributed server environment.', 'start': 541.656, 'duration': 5.185}], 'summary': 'Git allows developers to access and manage code, improving team effectiveness for small, medium, and massive applications, including the biggest ones.', 'duration': 28.563, 'max_score': 518.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs38518278.jpg'}, {'end': 623.53, 'src': 'embed', 'start': 598.86, 'weight': 3, 'content': [{'end': 606.642, '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': 598.86, 'duration': 7.782}, {'end': 611.724, 'text': 'no matter where they are in the stage of the integration and deployment lifecycle,', 'start': 606.642, 'duration': 5.082}, {'end': 616.945, 'text': "they're always being tested and you can always have code being ready to be released out.", 'start': 611.724, 'duration': 5.221}, {'end': 623.53, 'text': 'The idea is that, instead of having big releases that you would have maybe once every two weeks or once a month,', 'start': 617.245, 'duration': 6.285}], 'summary': 'Continuous testing in solutions for frequent releases', 'duration': 24.67, 'max_score': 598.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs38598860.jpg'}, {'end': 822.558, 'src': 'embed', 'start': 794.909, 'weight': 4, 'content': [{'end': 798.212, 'text': 'And Git is a distributed version control system.', 'start': 794.909, 'duration': 3.303}, {'end': 807.042, 'text': 'It is, again, open source, which means that you can start using it right now without fear of having to have any costs or any penalties.', 'start': 798.593, 'duration': 8.449}, {'end': 814.57, 'text': "And the thing that's really good about it is that you can use it for almost any kind of digital project.", 'start': 807.622, 'duration': 6.948}, {'end': 822.558, 'text': "And what it's good at is being able to create that historical record and versioning of your source code, whether you're doing a web application,", 'start': 815.07, 'duration': 7.488}], 'summary': 'Git is an open-source distributed version control system suitable for various digital projects.', 'duration': 27.649, 'max_score': 794.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs38794909.jpg'}, {'end': 1130.754, 'src': 'embed', 'start': 1104.98, 'weight': 5, 'content': [{'end': 1111.065, 'text': 'And you can automatically create backups because each developer has a version of the code remotely.', 'start': 1104.98, 'duration': 6.085}, {'end': 1113.386, 'text': "It's incredibly scalable.", 'start': 1111.585, 'duration': 1.801}, {'end': 1116.667, 'text': 'Some of the biggest projects out there now are being managed through Git.', 'start': 1113.406, 'duration': 3.261}, {'end': 1121.83, 'text': 'And because of this scale, the collaboration becomes a byproduct of teams working together.', 'start': 1117.148, 'duration': 4.682}, {'end': 1125.611, 'text': 'And branching just is so much easier within Git.', 'start': 1122.23, 'duration': 3.381}, {'end': 1130.754, 'text': 'So as you can see, this whole thing leads to a very effective distributed environment.', 'start': 1125.892, 'duration': 4.862}], 'summary': 'Git enables automatic backups, scalability, and efficient collaboration, leading to an effective distributed environment.', 'duration': 25.774, 'max_score': 1104.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs381104980.jpg'}, {'end': 1379.894, 'src': 'embed', 'start': 1354.635, 'weight': 6, 'content': [{'end': 1360.02, 'text': "We'll then connect to a remote repository and finally we'll push the file onto GitHub.", 'start': 1354.635, 'duration': 5.385}, {'end': 1363.983, 'text': 'First things first, we need to download and install Git.', 'start': 1360.28, 'duration': 3.703}, {'end': 1368.126, 'text': "So download Git for Windows and I'll select the second link.", 'start': 1364.403, 'duration': 3.723}, {'end': 1370.868, 'text': 'So 2.19.', 'start': 1369.327, 'duration': 1.541}, {'end': 1374.87, 'text': "1 which is the most latest version of Git, that's the one we want for Windows system.", 'start': 1370.868, 'duration': 4.002}, {'end': 1375.951, 'text': 'Choose your version.', 'start': 1375.091, 'duration': 0.86}, {'end': 1379.894, 'text': "So mine is a 64-bit system and it's downloading.", 'start': 1376.251, 'duration': 3.643}], 'summary': 'Downloading and installing git 2.19.1 for windows system.', 'duration': 25.259, 'max_score': 1354.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs381354635.jpg'}, {'end': 1581.537, 'src': 'embed', 'start': 1555.216, 'weight': 11, 'content': [{'end': 1561.8, 'text': "The next command that we'll be applying is the commit command, and when you add certain files to the current directory,", 'start': 1555.216, 'duration': 6.584}, {'end': 1564.802, 'text': 'the commit command is applied on all the above directories.', 'start': 1561.8, 'duration': 3.002}, {'end': 1570.647, 'text': 'once the file is committed.', 'start': 1569.345, 'duration': 1.302}, {'end': 1575.011, 'text': 'So as you can see one file is changed and one insertion.', 'start': 1571.567, 'duration': 3.444}, {'end': 1576.812, 'text': "I'll just clear the screen.", 'start': 1575.031, 'duration': 1.781}, {'end': 1581.537, 'text': 'Next thing we need to do is we need to link our git to our GitHub account.', 'start': 1577.133, 'duration': 4.404}], 'summary': 'Demonstrating the commit command with one file change and one insertion, followed by linking git to github account.', 'duration': 26.321, 'max_score': 1555.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs381555216.jpg'}, {'end': 1686.651, 'src': 'heatmap', 'start': 1259.529, 'weight': 7, 'content': [{'end': 1266.574, 'text': 'and all All this time, the main master still works and still able to produce the right code for the customer,', 'start': 1259.529, 'duration': 7.045}, {'end': 1271.397, 'text': 'but at the same time it allows the developers the freedom to be able to write in their new features.', 'start': 1266.574, 'duration': 4.823}, {'end': 1281.284, 'text': 'And so we can look at this in a little bit more visually with the master branch and we can put in small features and large features and we can then merge them back as we need to.', 'start': 1271.877, 'duration': 9.407}, {'end': 1284.086, 'text': 'So this kind of covers some of the commands that we have in Git.', 'start': 1281.664, 'duration': 2.422}, {'end': 1288.628, 'text': "So the first command you'd want to use is called git init,", 'start': 1284.446, 'duration': 4.182}, {'end': 1298.592, 'text': "and that's allowing you to go into a folder on your local PC and or your local Mac and convert that file, that folder, into a local git repository,", 'start': 1288.628, 'duration': 9.964}, {'end': 1300.073, 'text': 'and that creates that repository.', 'start': 1298.592, 'duration': 1.481}, {'end': 1307.662, 'text': "then you want to be able to make changes to that repository, and the commands you'd be using in this instance would be add, commit or status,", 'start': 1300.313, 'duration': 7.349}, {'end': 1312.147, 'text': 'and you want to be able to sync your repositories with the remote server,', 'start': 1307.662, 'duration': 4.485}, {'end': 1315.751, 'text': 'so be able to put the code that you have on your computer on the remote server.', 'start': 1312.147, 'duration': 3.604}, {'end': 1318.954, 'text': 'use push, you know, get the code from the remote server.', 'start': 1315.751, 'duration': 3.203}, {'end': 1326.884, 'text': "you'd use pull and then add origin, And then, if you want to do parallel development from the master branch, the main branch,", 'start': 1318.954, 'duration': 7.93}, {'end': 1331.97, 'text': 'you would use branch merge or rebase as ways to be able to do parallel development.', 'start': 1326.884, 'duration': 5.086}, {'end': 1334.759, 'text': 'A very warm welcome to all our viewers.', 'start': 1332.597, 'duration': 2.162}, {'end': 1340.584, 'text': "I'm Anjali from Simply Learn and today I'll be showing you the installation for Git on Windows.", 'start': 1335.219, 'duration': 5.365}, {'end': 1344.327, 'text': "So we'll start by downloading and installing Git on our system.", 'start': 1340.924, 'duration': 3.403}, {'end': 1346.969, 'text': "We'll then have a look at the Git Bash interface.", 'start': 1344.567, 'duration': 2.402}, {'end': 1349.211, 'text': "We'll type in some basic Git commands.", 'start': 1347.189, 'duration': 2.022}, {'end': 1354.355, 'text': "Next we'll create a local repository, that is we'll create a repository on a local machine.", 'start': 1349.491, 'duration': 4.864}, {'end': 1360.02, 'text': "We'll then connect to a remote repository and finally we'll push the file onto GitHub.", 'start': 1354.635, 'duration': 5.385}, {'end': 1363.983, 'text': 'First things first, we need to download and install Git.', 'start': 1360.28, 'duration': 3.703}, {'end': 1368.126, 'text': "So download Git for Windows and I'll select the second link.", 'start': 1364.403, 'duration': 3.723}, {'end': 1370.868, 'text': 'So 2.19.', 'start': 1369.327, 'duration': 1.541}, {'end': 1374.87, 'text': "1 which is the most latest version of Git, that's the one we want for Windows system.", 'start': 1370.868, 'duration': 4.002}, {'end': 1375.951, 'text': 'Choose your version.', 'start': 1375.091, 'duration': 0.86}, {'end': 1379.894, 'text': "So mine is a 64-bit system and it's downloading.", 'start': 1376.251, 'duration': 3.643}, {'end': 1381.015, 'text': 'So this will take a while.', 'start': 1379.954, 'duration': 1.061}, {'end': 1383.316, 'text': 'So Git is finally downloaded.', 'start': 1381.635, 'duration': 1.681}, {'end': 1385.958, 'text': 'Now we need to install this on our system.', 'start': 1383.897, 'duration': 2.061}, {'end': 1389.321, 'text': 'Click here, run.', 'start': 1387.98, 'duration': 1.341}, {'end': 1391.172, 'text': 'So go to next.', 'start': 1390.231, 'duration': 0.941}, {'end': 1394.014, 'text': "We don't have to change this path.", 'start': 1391.692, 'duration': 2.322}, {'end': 1397.496, 'text': 'So just click on in quick launch and on desktop.', 'start': 1394.194, 'duration': 3.302}, {'end': 1399.598, 'text': 'Next Next.', 'start': 1398.157, 'duration': 1.441}, {'end': 1400.719, 'text': 'Again next.', 'start': 1400.058, 'duration': 0.661}, {'end': 1402.34, 'text': 'Nothing to change here either.', 'start': 1401.179, 'duration': 1.161}, {'end': 1407.804, 'text': 'And install.', 'start': 1402.36, 'duration': 5.444}, {'end': 1411.087, 'text': 'So now Git is getting installed on our system.', 'start': 1408.645, 'duration': 2.442}, {'end': 1414.369, 'text': "So we don't need to view the release notes.", 'start': 1412.588, 'duration': 1.781}, {'end': 1416.27, 'text': 'We just want to launch the Git Bash.', 'start': 1414.409, 'duration': 1.861}, {'end': 1419.553, 'text': "So let's just tick that and then click on finish.", 'start': 1417.011, 'duration': 2.542}, {'end': 1422.499, 'text': 'and your git bash interface appears here.', 'start': 1420.598, 'duration': 1.901}, {'end': 1424.321, 'text': 'So we are on the master branch.', 'start': 1422.8, 'duration': 1.521}, {'end': 1427.923, 'text': "The first thing we do is we'll check the version for our git.", 'start': 1424.761, 'duration': 3.162}, {'end': 1433.567, 'text': 'So the command is git dash dash version and as you can see version 2.19.', 'start': 1428.064, 'duration': 5.503}, {'end': 1437.511, 'text': '1 on our Windows system which is exactly what we just downloaded.', 'start': 1433.567, 'duration': 3.944}, {'end': 1439.972, 'text': "We'll now explore the help command.", 'start': 1438.071, 'duration': 1.901}, {'end': 1443.275, 'text': "So let's just type git help config.", 'start': 1440.513, 'duration': 2.762}, {'end': 1450.897, 'text': 'So config is another command and as I hit enter the manual page for the second command opened up which is config.', 'start': 1443.795, 'duration': 7.102}, {'end': 1458.619, 'text': 'So what help command does is that it provides the manual or the help page for the command just following it.', 'start': 1451.137, 'duration': 7.482}, {'end': 1466.881, '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': 1459.299, 'duration': 7.582}, {'end': 1468.842, 'text': 'you can always use the help command.', 'start': 1466.881, 'duration': 1.961}, {'end': 1471.943, 'text': "Now there's another syntax for using the help command itself.", 'start': 1469.002, 'duration': 2.941}, {'end': 1476.086, 'text': 'which is git config dash dash help enter.', 'start': 1472.443, 'duration': 3.643}, {'end': 1479.189, 'text': 'This does the exact same thing as you can see.', 'start': 1476.387, 'duration': 2.802}, {'end': 1486.716, 'text': "Now that we looked at the help command, let's begin by creating a local directory.", 'start': 1481.791, 'duration': 4.925}, {'end': 1489.658, 'text': 'So mkdir test.', 'start': 1486.976, 'duration': 2.682}, {'end': 1491.84, 'text': 'Now test is my new directory.', 'start': 1490.339, 'duration': 1.501}, {'end': 1493.422, 'text': "I'll move into this directory.", 'start': 1492.08, 'duration': 1.342}, {'end': 1494.663, 'text': 'So cd test.', 'start': 1493.682, 'duration': 0.981}, {'end': 1501.073, 'text': "great, so now that we are inside our test directory, let's initialize this directory.", 'start': 1495.509, 'duration': 5.564}, {'end': 1507.917, 'text': 'so git init is the command for initializing the directory and, as you can see, as you can see the path here,', 'start': 1501.073, 'duration': 6.844}, {'end': 1511.219, 'text': 'this is the local path where a directory is created.', 'start': 1507.917, 'duration': 3.302}, {'end': 1515.722, 'text': "so I'll just show you the directory test and it's completely empty.", 'start': 1511.219, 'duration': 4.503}, {'end': 1524.247, 'text': "what we do now is we'll create a text file within this new directory that we created, so new text document, and I'll just name this demo.", 'start': 1515.722, 'duration': 8.525}, {'end': 1527.49, 'text': "I'll open this and just put in some dummy content.", 'start': 1524.868, 'duration': 2.622}, {'end': 1529.211, 'text': 'So hello Simply Learn.', 'start': 1528.09, 'duration': 1.121}, {'end': 1534.015, 'text': 'Save this file and go back to your bash interface.', 'start': 1530.132, 'duration': 3.883}, {'end': 1536.236, 'text': "Let's just check the status now.", 'start': 1534.735, 'duration': 1.501}, {'end': 1544.028, 'text': "So git status and as you can see Our file has appeared, it's visible but nothing is committed yet.", 'start': 1536.336, 'duration': 7.692}, {'end': 1549.252, 'text': 'So this means that we have not made any change to our file through the git tool itself.', 'start': 1544.168, 'duration': 5.084}, {'end': 1554.675, 'text': "So the next thing that we are going to do is we'll be adding demo to our current directory.", 'start': 1549.532, 'duration': 5.143}, {'end': 1561.8, 'text': "The next command that we'll be applying is the commit command, and when you add certain files to the current directory,", 'start': 1555.216, 'duration': 6.584}, {'end': 1564.802, 'text': 'the commit command is applied on all the above directories.', 'start': 1561.8, 'duration': 3.002}, {'end': 1570.647, 'text': 'once the file is committed.', 'start': 1569.345, 'duration': 1.302}, {'end': 1575.011, 'text': 'So as you can see one file is changed and one insertion.', 'start': 1571.567, 'duration': 3.444}, {'end': 1576.812, 'text': "I'll just clear the screen.", 'start': 1575.031, 'duration': 1.781}, {'end': 1581.537, 'text': 'Next thing we need to do is we need to link our git to our GitHub account.', 'start': 1577.133, 'duration': 4.404}, {'end': 1591.686, 'text': 'So the command for doing that is git config global user dot username and this will be followed by our username.', 'start': 1582.137, 'duration': 9.549}, {'end': 1594.208, 'text': 'So let me just show you my GitHub account.', 'start': 1592.166, 'duration': 2.042}, {'end': 1600.052, 'text': 'So this is my GitHub profile and my username is simplylearn-github.', 'start': 1595.069, 'duration': 4.983}, {'end': 1603.755, 'text': 'So guys, before you begin this procedure, just make a GitHub account.', 'start': 1600.252, 'duration': 3.503}, {'end': 1608.298, 'text': 'Type in my username here, simplylearn-github and enter.', 'start': 1604.315, 'duration': 3.983}, {'end': 1609.459, 'text': 'And there you go.', 'start': 1608.878, 'duration': 0.581}, {'end': 1612.14, 'text': 'Our Git is successfully linked with GitHub.', 'start': 1609.739, 'duration': 2.401}, {'end': 1617.804, 'text': "Next thing we do is we'll just open our GitHub and we'll create a new repository.", 'start': 1612.42, 'duration': 5.384}, {'end': 1619.405, 'text': 'Give a repository name.', 'start': 1618.204, 'duration': 1.201}, {'end': 1623.728, 'text': "So I'll name it test underscore demo and create repository.", 'start': 1619.825, 'duration': 3.903}, {'end': 1627.806, 'text': 'great So our repository is created.', 'start': 1624.924, 'duration': 2.882}, {'end': 1629.688, 'text': 'This is our remote repository.', 'start': 1628.207, 'duration': 1.481}, {'end': 1634.672, 'text': 'What we do next is just copy the link and then go back to your bash interface.', 'start': 1629.928, 'duration': 4.744}, {'end': 1640.697, 'text': 'Now we need to link our remote and our local repository.', 'start': 1636.353, 'duration': 4.344}, {'end': 1646.366, 'text': 'So git remote origin and then paste the HTTP link.', 'start': 1641.498, 'duration': 4.868}, {'end': 1654.81, 'text': 'And now that our local repository and our remote repository are linked, we can push our local file onto our remote repository.', 'start': 1646.846, 'duration': 7.964}, {'end': 1662.254, 'text': 'So the command for doing that is git push origin master as we are on the master branch.', 'start': 1655.09, 'duration': 7.164}, {'end': 1664.413, 'text': "And that's done.", 'start': 1663.692, 'duration': 0.721}, {'end': 1666.554, 'text': "So now let's move back to GitHub.", 'start': 1664.973, 'duration': 1.581}, {'end': 1668.196, 'text': "I'll just click on Test Demo.", 'start': 1666.855, 'duration': 1.341}, {'end': 1674.421, 'text': 'And as you can see here, our local file has been pushed to our remote repository.', 'start': 1668.796, 'duration': 5.625}, {'end': 1677.363, 'text': 'With that we have successfully completed our demo.', 'start': 1674.741, 'duration': 2.622}, {'end': 1683.748, 'text': "If you have any queries regarding this, please post them in the comment section below and we'll get back to you as soon as possible.", 'start': 1677.563, 'duration': 6.185}, {'end': 1686.651, 'text': "And now we're gonna go through and do a demo on Git.", 'start': 1684.11, 'duration': 2.541}], 'summary': 'Demonstration of git installation, local and remote repository setup, and pushing files to github.', 'duration': 50.298, 'max_score': 1259.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs381259529.jpg'}, {'end': 1753.483, 'src': 'embed', 'start': 1725.497, 'weight': 8, 'content': [{'end': 1727.599, 'text': 'All of these tools are going to be command line tools.', 'start': 1725.497, 'duration': 2.102}, {'end': 1738.929, 'text': "And then the next thing we're going to do is we're going to assign some global usernames and a global email address so that we can actually access the git account itself locally on the device.", 'start': 1727.819, 'duration': 11.11}, {'end': 1753.483, 'text': "And so we're going to put in config dash dash global user dot name sandeep and then git config dash dash global user dot email and sandeep dot d at simplylearn dot net.", 'start': 1739.25, 'duration': 14.233}], 'summary': 'Setting global usernames and email addresses for local git account.', 'duration': 27.986, 'max_score': 1725.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs381725497.jpg'}, {'end': 1860.679, 'src': 'embed', 'start': 1837.567, 'weight': 12, 'content': [{'end': 1845.591, 'text': "and so we're going to do this as git init and it's now a new git instance that we can actually now use for managing our git environment.", 'start': 1837.567, 'duration': 8.024}, {'end': 1849.633, 'text': "So we're going to create a new file and we're going to call it info.txt,", 'start': 1845.851, 'duration': 3.782}, {'end': 1854.916, 'text': "and we're going to put some content in it and we're actually going to put it in the folder that we've just created,", 'start': 1849.633, 'duration': 5.283}, {'end': 1860.679, 'text': "so you can actually see what it's like to test out the Git environment with a file that hasn't been checked into it yet.", 'start': 1854.916, 'duration': 5.763}], 'summary': 'Creating a new git instance and adding a file for testing git environment.', 'duration': 23.112, 'max_score': 1837.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs381837567.jpg'}, {'end': 2128.422, 'src': 'embed', 'start': 2099.726, 'weight': 9, 'content': [{'end': 2108.152, 'text': 'we can actually push the file that we have in the local repository on your pc or mac to the remote repository in the github server environment.', 'start': 2099.726, 'duration': 8.426}, {'end': 2109.133, 'text': "so let's go ahead and do that.", 'start': 2108.152, 'duration': 0.981}, {'end': 2117.479, 'text': 'so we do git push and push is the command to push the documents from the origin, which is the local file, to master and master the remote file.', 'start': 2109.133, 'duration': 8.346}, {'end': 2118.94, 'text': 'hey, and there we are success.', 'start': 2117.479, 'duration': 1.461}, {'end': 2128.422, 'text': 'so what we have now is the file that we just created in our local git repository is actually now in the remote repository as well,', 'start': 2119.46, 'duration': 8.962}], 'summary': 'Push local file to remote repository using git push command', 'duration': 28.696, 'max_score': 2099.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs382099726.jpg'}, {'end': 2373.244, 'src': 'embed', 'start': 2346.89, 'weight': 13, 'content': [{'end': 2352.157, 'text': 'so we do git merge and we do first underscore branch and there we are.', 'start': 2346.89, 'duration': 5.267}, {'end': 2355.598, 'text': "we've merged it in and excellent, that looks good.", 'start': 2352.157, 'duration': 3.441}, {'end': 2364.741, 'text': "so let's go ahead and list out the files that we have in the master branch and we do ls and then you'll see that we have four files,", 'start': 2355.598, 'duration': 9.143}, {'end': 2369.783, 'text': 'including the info3.txt that we had in a separate branch now, all in the master branch.', 'start': 2364.741, 'duration': 5.042}, {'end': 2373.244, 'text': 'in this session we will have a look at the basics of github.', 'start': 2369.783, 'duration': 3.461}], 'summary': 'Merged first branch into master, now 4 files in master branch. exploring basics of github.', 'duration': 26.354, 'max_score': 2346.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs382346890.jpg'}], 'start': 404.835, 'title': 'Front-end developer skills and git', 'summary': 'Discusses the top five essential skills for front-end developers including knowledge of languages like sas, less, stylist, testing and debugging, methodologies for error-free websites, and the importance of communication and interpersonal skills, apis, and course certification from simply learn. it also highlights the challenges faced by developers before using git, the value of devops in delivering solutions faster, the availability of tools within devops environments, a detailed overview of git as a distributed version control system, and covers the step-by-step installation of git on windows along with setting up a local git repository, branching, merging, and pushing files to github.', 'chapters': [{'end': 479.586, 'start': 404.835, 'title': 'Essential front-end developer skills', 'summary': 'Discusses the top five essential skills for a front-end developer, including knowledge of languages like sas, less, stylist, testing and debugging, methodologies for error-free websites, and the importance of communication and interpersonal skills, apis, and course certification from simply learn.', 'duration': 74.751, 'highlights': ['Front-end developers must possess essential skills such as testing and debugging, knowledge of languages like SAS, LESS, and STYLIST, understanding of APIs, and good communication and interpersonal skills.', 'The ability to test and debug a website is crucial for front-end developers to ensure error-free and seamless user experience.', "Acquiring a Simply Learn certificate for a full-stack developer course can significantly boost a developer's resume."]}, {'end': 1334.759, 'start': 480.106, 'title': 'Understanding git and devops', 'summary': 'Highlights the challenges faced by developers before using git, the value of devops in delivering solutions faster, the availability of tools within devops environments, and a detailed overview of git as a distributed version control system, including its features, workflow, and branching. it also emphasizes the benefits of branching in git and covers the essential commands for managing repositories and remote servers.', 'duration': 854.653, 'highlights': ['Git as a solution to challenges faced by developers before using Git Git addresses the challenges of conflicts, rollbacks, and lack of communication among developers when checking in code, making it effective for development teams to work on small, medium, or massive applications. Some of the biggest applications are managed through Git distributed server environment.', 'Value of DevOps in delivering solutions faster DevOps is a culture that enables development and operations teams to work effectively together, continuously build out solutions, and deliver code that is constantly being tested, leading to a continuous stream of releases and faster delivery of solutions.', 'Tools available within DevOps environments DevOps encompasses tools for building code, planning, testing, release, deployment, operating, and monitoring, most of which are open source or low in cost, providing effective management and implementation within teams.', 'Overview of Git as a distributed version control system Git is highlighted as a fantastic distributed version control system with features, workflow, branches, and commands that allow developers to create a historical record and versioning of source code, making it suitable for a wide range of digital projects.', "Benefits of branching in Git Git enables parallel development through branching, allowing different groups to work on multiple features simultaneously, merge branches back into the main master, and maintain the main product's functionality while adding new features.", 'Essential commands for managing repositories and remote servers in Git The chapter covers essential Git commands including init, add, commit, status, push, pull, add origin, branch, merge, and rebase for managing local repositories, syncing with remote servers, and enabling parallel development from the master branch.']}, {'end': 1803.606, 'start': 1335.219, 'title': 'Git installation on windows', 'summary': 'Covers the step-by-step installation of git on windows, including downloading the latest version, initializing a local repository, linking to a remote repository, and pushing files to github, along with demonstrating basic git commands and configurations.', 'duration': 468.387, 'highlights': ['The latest version of Git (2.19.1) for Windows is downloaded, installed, and verified. The process of downloading, installing, and verifying the latest version of Git for Windows (2.19.1) is demonstrated, emphasizing the importance of selecting the appropriate version for the system architecture.', 'Demonstration of basic Git commands including initializing a local repository, creating a text file, checking status, and linking with a remote repository. Step-by-step demonstration of basic Git commands such as initializing a local repository, creating a text file, checking status, and linking with a remote repository is provided, illustrating the fundamental workflow of using Git.', 'Configuring global settings for Git including username and email address, and accessing help documentation for Git commands. The process of configuring global settings for Git, including setting the username and email address, along with accessing help documentation for Git commands, is explained, emphasizing the importance of setting up user information and utilizing help resources.']}, {'end': 2155.9, 'start': 1803.905, 'title': 'Setting up a git repository locally and pushing to a remote repo', 'summary': 'Covers setting up a local git repository, adding and committing files, comparing file differences, configuring and pushing to a remote github repository, with key points including initializing a git repository, adding and committing files, configuring and pushing to a remote repository, and successfully pushing the file to the remote repository.', 'duration': 351.995, 'highlights': ['Successfully pushing the file to the remote repository The chapter concludes with the successful push of the local git repository file to the remote GitHub repository, making it accessible to others.', "Configuring and pushing to a remote GitHub repository The process involves connecting the local repository to the remote repository, adding the username to the GitHub configuration, and using the 'git push' command to push the documents from the local file to the remote file, resulting in the file being uploaded to the remote repository.", 'Adding and committing files The chapter explains the process of adding and committing files to the Git repository, enabling version control and providing the ability to manage the Git environment.', "Initializing a Git repository The initial step involves initializing a folder as a Git repository using 'git init', creating a new Git instance for managing the environment."]}, {'end': 2369.783, 'start': 2155.9, 'title': 'Git branching and merging', 'summary': 'Covers the process of creating new files, branching, and merging in git, illustrating how to create three new files, move to a new branch, add a file to the branch, commit changes to the branch, and merge the branch into the master, resulting in a consistent environment with four files in the master branch.', 'duration': 213.883, 'highlights': ['Creating three new files: info.txt, info1.txt, and info2.txt, and adding them to the folder.', 'Moving to a new branch called first_branch, adding info3.txt to this branch, committing changes, and then merging the first_branch into the master branch.', 'Illustrating the process of branching and merging in Git, resulting in a consistent environment with four files in the master branch.']}], 'duration': 1964.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs38404835.jpg', 'highlights': ['Front-end developers need skills in testing, debugging, languages like SAS, LESS, STYLIST, APIs, and communication.', "Simply Learn certificate for a full-stack developer course can significantly boost a developer's resume.", 'Git addresses challenges of conflicts, rollbacks, and lack of communication among developers, making it effective for development teams.', 'DevOps enables faster delivery of solutions by continuously building and testing code.', 'Git is a fantastic distributed version control system suitable for a wide range of digital projects.', 'Git enables parallel development through branching and essential commands for managing repositories and remote servers.', 'The latest version of Git (2.19.1) for Windows is downloaded, installed, and verified, emphasizing the importance of selecting the appropriate version for the system architecture.', 'Demonstration of basic Git commands including initializing a local repository, creating a text file, checking status, and linking with a remote repository.', 'Configuring global settings for Git, including username and email address, and accessing help documentation for Git commands.', 'Successfully pushing the file to the remote GitHub repository, making it accessible to others.', "Configuring and pushing to a remote GitHub repository, adding the username to the GitHub configuration, and using the 'git push' command.", 'Adding and committing files to the Git repository enables version control and management of the environment.', "Initializing a folder as a Git repository using 'git init', creating a new Git instance for managing the environment.", 'Illustrating the process of branching and merging in Git, resulting in a consistent environment with four files in the master branch.']}, {'end': 4172.321, 'segs': [{'end': 2417.544, 'src': 'embed', 'start': 2391.269, 'weight': 0, 'content': [{'end': 2398.873, 'text': 'The IT team of GitHub consists of 1000 members that helps Decathlon to bring its shoppers journey to their devices.', 'start': 2391.269, 'duration': 7.604}, {'end': 2406.537, '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': 2399.973, 'duration': 6.564}, {'end': 2411.42, 'text': 'In the beginning, Decathlon worked on the data center with the help of a VPN.', 'start': 2407.737, 'duration': 3.683}, {'end': 2417.544, 'text': 'And using a VPN was a huge challenge in terms of workflow visibility and avoiding redundancies.', 'start': 2412.24, 'duration': 5.304}], 'summary': "Github's 1000-member it team assists decathlon in bringing shoppers' journey to their devices, overcoming challenges with data center and vpn usage.", 'duration': 26.275, 'max_score': 2391.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs382391269.jpg'}, {'end': 2460.007, 'src': 'embed', 'start': 2434.795, 'weight': 1, 'content': [{'end': 2443.602, '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': 2434.795, 'duration': 8.807}, {'end': 2449.746, 'text': 'In the first case, the entire Decathlon shifted from any other remote repository to GitHub.', 'start': 2444.422, 'duration': 5.324}, {'end': 2460.007, 'text': 'GitHub turned out to be an amazing open source community as the code became more visible across the organization and now anybody could contribute to it.', 'start': 2450.859, 'duration': 9.148}], 'summary': 'Decathlon shifted to github, enabling anyone to contribute to code.', 'duration': 25.212, 'max_score': 2434.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs382434795.jpg'}, {'end': 2815.122, 'src': 'embed', 'start': 2784.659, 'weight': 2, 'content': [{'end': 2790.921, 'text': 'I begin by installing a git bash or the git client and configuring it for its first time usage.', 'start': 2784.659, 'duration': 6.262}, {'end': 2798.684, 'text': "Once I'm done with configuring the git client, I'm going to spin up few repositories locally and work on these repositories using git commands.", 'start': 2791.361, 'duration': 7.323}, {'end': 2805.966, 'text': "Once I'm happy with my local changes, I'm going to commit few of them and then push these changes to a git server of my choice.", 'start': 2799.204, 'duration': 6.762}, {'end': 2815.122, 'text': "For today's demonstration, I plan to use GitHub.com which is a cloud-hosted free service and it provides free account registrations for anyone.", 'start': 2806.516, 'duration': 8.606}], 'summary': 'Demonstrating configuring git client, working on repositories, and using github.com for cloud-hosted service.', 'duration': 30.463, 'max_score': 2784.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs382784659.jpg'}, {'end': 3998.261, 'src': 'embed', 'start': 3962.662, 'weight': 3, 'content': [{'end': 3966.383, 'text': 'One is the HTTPS URL and the other one is the SSH URL.', 'start': 3962.662, 'duration': 3.721}, {'end': 3969.804, 'text': 'As of now, we do not have any SSH keys that is set up.', 'start': 3966.963, 'duration': 2.841}, {'end': 3976.91, 'text': 'So let me use this https URL to connect my local repository with the repository on the server.', 'start': 3970.367, 'duration': 6.543}, {'end': 3979.852, 'text': "So I've done all these things.", 'start': 3978.051, 'duration': 1.801}, {'end': 3981.553, 'text': 'I already have the repository set up.', 'start': 3979.952, 'duration': 1.601}, {'end': 3987.796, 'text': 'All that I need is a placeholder for me to connect my local repository with the server URL.', 'start': 3981.913, 'duration': 5.883}, {'end': 3998.261, 'text': 'So this would be the command that I need to copy which essentially links or adds an origin with the URL of the git server.', 'start': 3988.336, 'duration': 9.925}], 'summary': 'Using https url to connect local repository with server, no ssh keys set up', 'duration': 35.599, 'max_score': 3962.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs383962662.jpg'}], 'start': 2369.783, 'title': "Github and git for decathlon's it transformation", 'summary': "Delves into how github's it team aided decathlon, a retail brand with 1600 stores in 52 countries and 100,000 employees, in overcoming workflow challenges, and discusses decathlon's shift to github for improved code visibility and global developer collaboration. additionally, it covers setting up git authentication, initializing repositories, and basic git commands for successful repository creation and linking.", 'chapters': [{'end': 2434.055, 'start': 2369.783, 'title': 'Github for decathlon: overcoming workflow challenges', 'summary': "Explores how github's it team of 1000 members helped decathlon, a retail brand with 1600 stores in 52 countries and 100,000 employees, to overcome workflow visibility and redundancy challenges by moving away from vpn usage and enabling remote development.", 'duration': 64.272, 'highlights': ["Decathlon has 1600 stores in 52 countries with around 100,000 employees, and the IT team of GitHub consists of 1000 members helping to bring shoppers' journey to their devices.", 'The first problem faced by Decathlon was maintaining workflow visibility and avoiding redundancies, which was challenging while using a VPN.', 'Hiring developers for so many stores in different locations was difficult due to the need for a physical workplace.']}, {'end': 3000.919, 'start': 2434.795, 'title': "Decathlon's transformation with github", 'summary': 'Discusses how decathlon shifted to github, allowing for improved code visibility and global developer collaboration, and explores the features and competitors of github, as well as differences between git and github.', 'duration': 566.124, 'highlights': ["GitHub's role in improving code visibility and enabling global developer collaboration for Decathlon's transformation Decathlon shifted from a remote repository to GitHub, enabling increased code visibility and global developer collaboration, thereby solving the problem of hiring developers.", 'Features of GitHub including easy project management, increased safety with packages, effective team management, improved code writing, increased code safety, and easy code hosting GitHub offers features such as easy project management, increased safety with packages, effective team management, improved code writing, increased code safety, and easy code hosting, contributing to better coordination, safety, and code quality.', 'Competitors of GitHub and differences between Git and GitHub The competitors of GitHub include Atlassian Bitbucket, FugBugs, SurroundSCM, GitLab, Buddy, and Beanstalk, with Git and GitHub differing in terms of installation, offline usage, dependency, hosting, user interface, commands, licensing, and competitors.']}, {'end': 3583.359, 'start': 3001.139, 'title': 'Using git for repository management', 'summary': 'Covers the process of setting up git authentication, installing git bash, configuring git for the first time, initializing a repository, and creating files within the repository for demonstration purposes.', 'duration': 582.22, 'highlights': ["The chapter covers the process of setting up Git authentication, installing Git Bash, configuring Git for the first time, initializing a repository, and creating files within the repository for demonstration purposes. The chapter explains the process of setting up Git authentication, including HTTPS and SSH methods, installing Git Bash, configuring Git for the first time, initializing a repository using 'git init', and creating files within the repository using the 'touch' command.", 'Git Bash, version 2.19.0, is installed on the local system for executing Git commands. The speaker demonstrates the installation of Git Bash, version 2.19.0, on the local system for executing Git commands, highlighting the version and installation process.', "Configuring Git for the first time by setting the username and email using the 'git config' command. The process of configuring Git for the first time by setting the username and email using the 'git config' command is explained, ensuring that the configuration is set as a global setting.", "Initializing a repository using the 'git init' command creates a default branch called 'master', and the hidden '.git' folder is created within the repository directory. The speaker demonstrates the initialization of a repository using the 'git init' command, which creates a default branch called 'master' and a hidden '.git' folder within the repository directory.", "Creating files within the repository for demonstration purposes using the 'touch' command. The process of creating files within the repository for demonstration purposes using the 'touch' command is explained, providing an alternative method for file creation using a file explorer."]}, {'end': 4172.321, 'start': 3583.359, 'title': 'Git basics and repository sharing', 'summary': 'Explains the basic git commands for initializing a repository, adding and committing files, creating a github repository, and pushing content to the server using https url, leading to successful creation of the repository and linking the local and server repositories, with a total of two commits.', 'duration': 588.962, 'highlights': ['Successfully pushed the content to the server using HTTPS URL and linked the local and server repositories, with a total of two commits The user successfully created a repository on the server, pushed the content, and linked the local and server repositories, resulting in a total of two commits.', "Explained the process of adding and committing files to the repository The chapter explained the process of adding and committing files to the repository, including commands like 'git add' and 'git commit', resulting in successful addition and committing of files.", 'Demonstrated the creation of a GitHub repository and the use of HTTPS URL to connect the local repository with the server The user demonstrated the creation of a GitHub repository and used the HTTPS URL to connect the local repository with the server, ensuring successful repository creation and connection.', "Performed basic Git commands for initializing a repository and making changes to files The user performed basic Git commands for initializing a repository, making changes to files, and running 'git status' and 'git log' commands, demonstrating effective use of Git functionalities."]}], 'duration': 1802.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs382369783.jpg', 'highlights': ["Decathlon has 1600 stores in 52 countries with around 100,000 employees, and the IT team of GitHub consists of 1000 members helping to bring shoppers' journey to their devices.", "GitHub's role in improving code visibility and enabling global developer collaboration for Decathlon's transformation Decathlon shifted from a remote repository to GitHub, enabling increased code visibility and global developer collaboration, thereby solving the problem of hiring developers.", 'The chapter covers the process of setting up Git authentication, installing Git Bash, configuring Git for the first time, initializing a repository, and creating files within the repository for demonstration purposes.', 'Successfully pushed the content to the server using HTTPS URL and linked the local and server repositories, with a total of two commits']}, {'end': 5457.705, 'segs': [{'end': 4227.655, 'src': 'embed', 'start': 4197.953, 'weight': 1, 'content': [{'end': 4202.235, 'text': 'So for doing that I need to first create a pair of private and public keys.', 'start': 4197.953, 'duration': 4.282}, {'end': 4203.431, 'text': 'command to do.', 'start': 4202.691, 'duration': 0.74}, {'end': 4207.812, 'text': 'that is ssh keygen hyphen t.', 'start': 4203.431, 'duration': 4.381}, {'end': 4216.853, 'text': "i will use the rsa mechanism for creating my keys, capital c, and i need to specify the email id using which i'm going to connect to,", 'start': 4207.812, 'duration': 9.041}, {'end': 4223.455, 'text': 'or i need to create the keys for all right, so generating a private and public key pair.', 'start': 4216.853, 'duration': 6.602}, {'end': 4227.655, 'text': 'it says let me know what folder should i create the keys in?', 'start': 4223.455, 'duration': 4.2}], 'summary': "To create a pair of rsa private and public keys, use 'ssh-keygen -t rsa -c [email]'.", 'duration': 29.702, 'max_score': 4197.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384197953.jpg'}, {'end': 4349.695, 'src': 'embed', 'start': 4317.714, 'weight': 0, 'content': [{'end': 4325.317, 'text': "It prompts me for my password just to make sure that I've got the right kind of authentication to be adding a new key.", 'start': 4317.714, 'duration': 7.603}, {'end': 4327.258, 'text': 'So this one looks good.', 'start': 4325.818, 'duration': 1.44}, {'end': 4329.239, 'text': 'That means the keys were added successfully.', 'start': 4327.498, 'duration': 1.741}, {'end': 4332.461, 'text': 'Let me check if my SSH keys are working well.', 'start': 4329.599, 'duration': 2.862}, {'end': 4337.323, 'text': 'So I do SSH hyphen capital T.', 'start': 4334.161, 'duration': 3.162}, {'end': 4343.085, 'text': 'I would say git at github.com.', 'start': 4337.323, 'duration': 5.762}, {'end': 4349.695, 'text': 'This is just to double check if my SSH keys authenticated correctly.', 'start': 4344.326, 'duration': 5.369}], 'summary': 'Successfully added ssh keys for authentication.', 'duration': 31.981, 'max_score': 4317.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384317714.jpg'}, {'end': 4396.76, 'src': 'embed', 'start': 4374.269, 'weight': 3, 'content': [{'end': 4383.293, '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': 4374.269, 'duration': 9.024}, {'end': 4387.876, 'text': 'cloning is nothing but making a copy of that repository, linking the origin,', 'start': 4383.293, 'duration': 4.583}, {'end': 4393.998, 'text': 'so that I create an exact replica of the repository which is there on the server on my local drive.', 'start': 4387.876, 'duration': 6.122}, {'end': 4396.76, 'text': 'so let me first create a repository on the server.', 'start': 4393.998, 'duration': 2.762}], 'summary': 'Creating a server repository and cloning it to local drive for the second use case.', 'duration': 22.491, 'max_score': 4374.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384374269.jpg'}, {'end': 4648.899, 'src': 'embed', 'start': 4620.175, 'weight': 4, 'content': [{'end': 4621.695, 'text': 'It asks me for the passphrase.', 'start': 4620.175, 'duration': 1.52}, {'end': 4627.197, 'text': 'Okay, it pushed the content onto the server.', 'start': 4624.956, 'duration': 2.241}, {'end': 4629.417, 'text': 'Let me see if the contents have come in here.', 'start': 4627.297, 'duration': 2.12}, {'end': 4630.978, 'text': 'Okay, wonderful.', 'start': 4630.078, 'duration': 0.9}, {'end': 4632.389, 'text': 'I had only one commit.', 'start': 4631.428, 'duration': 0.961}, {'end': 4633.97, 'text': 'Now I see my second commit.', 'start': 4632.629, 'duration': 1.341}, {'end': 4637.972, 'text': 'So what was added as a part of the second commit? It says a new file was added.', 'start': 4634.13, 'duration': 3.842}, {'end': 4640.514, 'text': 'All this line that never existed got added.', 'start': 4638.332, 'duration': 2.182}, {'end': 4641.735, 'text': 'This is the second file.', 'start': 4640.594, 'duration': 1.141}, {'end': 4644.376, 'text': 'The content exactly what I pushed onto the server.', 'start': 4641.755, 'duration': 2.621}, {'end': 4648.899, 'text': 'Now this completes the tutorial.', 'start': 4644.396, 'duration': 4.503}], 'summary': 'Transcript: pushed content, 2 commits, added new file, completed tutorial.', 'duration': 28.724, 'max_score': 4620.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384620175.jpg'}, {'end': 4708.824, 'src': 'embed', 'start': 4665.097, 'weight': 5, 'content': [{'end': 4671.882, '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': 4665.097, 'duration': 6.785}, {'end': 4675.585, 'text': 'Whenever you run this command, a magical folder by name .', 'start': 4672.262, 'duration': 3.323}, {'end': 4683.13, 'text': 'git gets created in the folder and from that time onwards, git will start tracking any changes that happen to that particular folder.', 'start': 4675.585, 'duration': 7.545}, {'end': 4686.813, 'text': 'It also creates a new repository and a branch.', 'start': 4683.631, 'duration': 3.182}, {'end': 4690.656, 'text': 'By default, the branch that is created is called the master branch.', 'start': 4687.213, 'duration': 3.443}, {'end': 4698.875, 'text': 'git add dot is a wildcard character for adding any number of new files into your git repository.', 'start': 4691.408, 'duration': 7.467}, {'end': 4702.218, 'text': 'if you have a bunch of files one file, two file, ten files,', 'start': 4698.875, 'duration': 3.343}, {'end': 4708.824, 'text': 'a folder containing multiple files in it all of them could be added into the repository using this command.', 'start': 4702.218, 'duration': 6.606}], 'summary': "Creating a local repository in git, 'git add .' adds all files.", 'duration': 43.727, 'max_score': 4665.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384665097.jpg'}, {'end': 4791.838, 'src': 'embed', 'start': 4725.652, 'weight': 7, 'content': [{'end': 4732.634, 'text': "This will commit all the work items that you've done in terms of the files that got changed, the files that got added,", 'start': 4725.652, 'duration': 6.982}, {'end': 4734.695, 'text': 'all this with one particular message.', 'start': 4732.634, 'duration': 2.061}, {'end': 4744.783, 'text': 'git status will give you the status of all the files and folders any file that got added, any file that got created, any file that was deleted.', 'start': 4735.236, 'duration': 9.547}, {'end': 4749.507, 'text': 'all the status of the files will be obtained using the git status command.', 'start': 4744.783, 'duration': 4.724}, {'end': 4756.291, 'text': 'git log will show you all the commit history with the latest history or the latest commit showing up on top.', 'start': 4749.507, 'duration': 6.784}, {'end': 4758.253, 'text': 'git. add remote origin.', 'start': 4756.291, 'duration': 1.962}, {'end': 4763.778, 'text': 'This command is used whenever you want to link any local repository to a server.', 'start': 4758.632, 'duration': 5.146}, {'end': 4769.385, 'text': 'And this is when you want to really push a repository from the local to the server for the first time.', 'start': 4764.078, 'duration': 5.307}, {'end': 4777.474, 'text': 'git push hyphen u origin and master This is the command that you would use whenever you want to push contents from the local repository to the server.', 'start': 4769.885, 'duration': 7.589}, {'end': 4780.389, 'text': 'git clone and the URL of the server.', 'start': 4777.987, 'duration': 2.402}, {'end': 4791.838, 'text': 'This is the command that you will run whenever you have an existing repository on the server and you want to make a fresh clone or a fresh copy of that particular repository onto your local box.', 'start': 4780.669, 'duration': 11.169}], 'summary': 'Git commands for status, history, linking, pushing, and cloning repositories.', 'duration': 66.186, 'max_score': 4725.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384725652.jpg'}, {'end': 4972.346, 'src': 'embed', 'start': 4935.202, 'weight': 11, 'content': [{'end': 4939.345, 'text': 'getting rid of all the commit messages that were there as a part of these two commits,', 'start': 4935.202, 'duration': 4.143}, {'end': 4946.949, 'text': 'but a soft would ensure that the file changes that were done as a part of these two commits would still exist or full remain.', 'start': 4939.345, 'duration': 7.604}, {'end': 4953.454, 'text': 'So the command for that is git reset hyphen hyphen soft which is the snapshot that I want to get back to.', 'start': 4947.17, 'duration': 6.284}, {'end': 4958.977, 'text': 'If this is the commit that I want to get back to I just copy this and I paste this.', 'start': 4953.774, 'duration': 5.203}, {'end': 4972.346, 'text': "Alright, it doesn't give me any message, but if at all I do a git log, pretty one line, what it says is C1, C2, now the head,", 'start': 4963.46, 'duration': 8.886}], 'summary': "Using 'git reset --soft' to remove commit messages without losing file changes", 'duration': 37.144, 'max_score': 4935.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384935202.jpg'}, {'end': 5124.869, 'src': 'embed', 'start': 5080.333, 'weight': 10, 'content': [{'end': 5086.397, 'text': "however, do this activity only when you don't push your git repository to the server.", 'start': 5080.333, 'duration': 6.064}, {'end': 5093.241, 'text': 'one other most powerful and useful command while undoing or resetting the history is something called as revert.', 'start': 5086.397, 'duration': 6.844}, {'end': 5095.962, 'text': 'this is a safe way of undoing some things.', 'start': 5093.241, 'duration': 2.721}, {'end': 5099.064, 'text': 'remember what i talked about when exactly you can do a reset.', 'start': 5095.962, 'duration': 3.102}, {'end': 5103.139, 'text': "It's only when your changes are local and it has not been pushed to the repository.", 'start': 5099.537, 'duration': 3.602}, {'end': 5124.869, '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': 5103.519, 'duration': 21.35}], 'summary': "Use 'revert' for safe undoing. reset only for local changes not pushed to server.", 'duration': 44.536, 'max_score': 5080.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs385080333.jpg'}, {'end': 5220.415, 'src': 'embed', 'start': 5190.104, 'weight': 12, 'content': [{'end': 5192.506, 'text': 'All of them would be affected in an adverse way.', 'start': 5190.104, 'duration': 2.402}, {'end': 5196.229, 'text': 'So, in short, never go back in history.', 'start': 5193.086, 'duration': 3.143}, {'end': 5201.673, 'text': 'If at all you need to undo something, go ahead and put in a new commit to undo something.', 'start': 5196.629, 'duration': 5.044}, {'end': 5203.494, 'text': "Let's take this example.", 'start': 5202.434, 'duration': 1.06}, {'end': 5208.298, 'text': 'Maybe, if at all, developer 1 wants to get rid of C3.', 'start': 5203.955, 'duration': 4.343}, {'end': 5220.415, 'text': "Better way to do that is by adding a new commit which is ahead say let's say C5 and what does this commit do? This commit possibly gets rid of C3.", 'start': 5209.299, 'duration': 11.116}], 'summary': 'Adverse effect on all; use new commit to undo, e.g. c5 removes c3.', 'duration': 30.311, 'max_score': 5190.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs385190104.jpg'}], 'start': 4173.904, 'title': 'Git basics and ssh keys', 'summary': 'Covers setting up ssh keys for github, including generating keys, adding the public key to github, and successful authentication. it also discusses cloning a repository, making changes, and pushing them back, resulting in addition of a new file. additionally, it provides a tutorial summary of git repository creation, file addition, pushing, cloning, and modifying commit history. it also explains git reset and revert commands with examples, emphasizing caution when modifying history after pushing to the server.', 'chapters': [{'end': 4373.511, 'start': 4173.904, 'title': 'Setting up ssh keys for github', 'summary': 'Covers the process of creating and configuring ssh keys for github, including generating a pair of keys, adding the public key to the github server, and verifying the ssh key authentication with github, leading to successful authentication using the passphrase.', 'duration': 199.607, 'highlights': ["The process of creating a pair of private and public keys for SSH authentication on GitHub, including using the 'ssh-keygen -t rsa -C' command and specifying the email ID for key creation. Creation of a pair of private and public keys.", 'Adding the generated public key to the GitHub server for SSH authentication, including navigating to settings, adding a new SSH key, and successfully adding the key. Successful addition of the SSH key to the GitHub server.', "Verifying the SSH key authentication with GitHub using the 'SSH -T git@github.com' command, including successfully authenticating with the passphrase. Successful verification and authentication of SSH keys with GitHub."]}, {'end': 4644.376, 'start': 4374.269, 'title': 'Cloning repository and making changes', 'summary': 'Discusses the process of creating a repository on the server, cloning it locally, making changes, and pushing the changes back to the server, resulting in the successful addition of a new file to the repository.', 'duration': 270.107, 'highlights': ['The process involves creating a repository on the server, cloning it locally, making changes, and pushing the changes back to the server, resulting in the successful addition of a new file to the repository. The chapter discusses the sequential process of creating a repository on the server, cloning it locally, making changes, and pushing the changes back to the server, leading to the successful addition of a new file to the repository.', 'Cloning a repository involves making an exact replica of the repository on the local drive. Cloning a repository results in creating an exact replica of the repository on the local drive, facilitating further modifications and updates.', 'The user successfully adds a new file to the cloned repository and commits the changes. The user adds a new file to the cloned repository, commits the changes, and successfully pushes the content back to the server, resulting in the addition of a new file to the repository.']}, {'end': 4892.207, 'start': 4644.396, 'title': 'Git repository tutorial summary', 'summary': 'Covers the process of creating a local repository, adding and committing files, pushing to the server, cloning a repository, and modifying commit history using git commands, with emphasis on caution when modifying history after pushing to the server.', 'duration': 247.811, 'highlights': ['The git init command initializes a repository, creating a new repository with a default master branch, allowing tracking of changes in the folder. git init creates a repository and a branch (by default, master) and enables tracking of changes in the folder.', 'The git add . command adds any number of new files into the repository, simplifying the process of adding multiple files or folders into the repository. git add . simplifies the process of adding multiple files or folders into the repository at once.', 'The git commit -m command commits all the work items done with a meaningful message, effectively capturing changes made to files and folders. git commit -m captures all the changes made to files and folders with a meaningful message.', "Using git log, developers can view the commit history, with the latest commit appearing at the top, providing visibility into the repository's evolution. git log provides a view of the commit history, displaying the latest commit at the top.", 'The git clone command allows developers to create a fresh copy of an existing repository from the server to their local box, facilitating collaboration and code management. git clone creates a fresh copy of an existing repository from the server to the local box, enabling collaboration and code management.']}, {'end': 5457.705, 'start': 4892.207, 'title': 'Git reset and revert commands', 'summary': 'Explains the git reset and git revert commands, with examples of using git reset to go back in history and retain changes, and using git revert to safely undo specific commits, emphasizing the importance of not going back in history when pushing to the server.', 'duration': 565.498, 'highlights': ['Git revert command explanation and demonstration The chapter provides a detailed explanation and demonstration of using the git revert command to safely undo specific commits, highlighting the process of adding a new commit to undo the changes made in a previous commit, with examples showcasing the resulting changes in the git history and files.', 'Git reset command demonstration The transcript includes a demonstration of using the git reset command with the --soft option to go back in history and retain changes while getting rid of commit messages, emphasizing the importance of using this command only for local changes and before pushing to the server.', 'Importance of not going back in history when pushing to the server The chapter emphasizes the importance of not going back in history when pushing to the server, explaining the adverse effects on other collaborators and the recommendation to use new commits instead of modifying history.']}], 'duration': 1283.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs384173904.jpg', 'highlights': ['Successfully adding the SSH key to the GitHub server', 'Creating a pair of private and public keys for SSH authentication on GitHub', 'Verifying and authenticating SSH keys with GitHub', 'Cloning a repository results in creating an exact replica on the local drive', 'Successfully adding a new file to the cloned repository and pushing the content back to the server', 'git init creates a repository and a branch, enabling tracking of changes in the folder', 'git add . simplifies the process of adding multiple files or folders into the repository at once', 'git commit -m captures all the changes made to files and folders with a meaningful message', 'git log provides a view of the commit history, displaying the latest commit at the top', 'git clone creates a fresh copy of an existing repository from the server to the local box', 'Detailed explanation and demonstration of using the git revert command to safely undo specific commits', 'Demonstration of using the git reset command with the --soft option to go back in history and retain changes while getting rid of commit messages', 'Emphasizing the importance of not going back in history when pushing to the server']}, {'end': 6444.188, 'segs': [{'end': 5486.17, 'src': 'embed', 'start': 5458.105, 'weight': 0, 'content': [{'end': 5461.086, 'text': 'So go ahead and create any number of branches that you need.', 'start': 5458.105, 'duration': 2.981}, {'end': 5469.851, 'text': 'However, once you create your branches, do all the work relating to that branch in that specific branch and, once you completed your task,', 'start': 5461.646, 'duration': 8.205}, {'end': 5474.473, 'text': 'go ahead and merge your branches back into your base branch and then delete the branch.', 'start': 5469.851, 'duration': 4.622}, {'end': 5481.249, 'text': 'Let me go ahead and create a repository with some branches in this and give you a demonstration of that.', 'start': 5476.348, 'duration': 4.901}, {'end': 5486.17, 'text': 'So let me go back to my base directory, which is git demo.', 'start': 5482.229, 'duration': 3.941}], 'summary': 'Create and manage branches efficiently in git, merge and delete after completion.', 'duration': 28.065, 'max_score': 5458.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs385458105.jpg'}, {'end': 6338.793, 'src': 'embed', 'start': 6315.307, 'weight': 1, 'content': [{'end': 6322.231, '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': 6315.307, 'duration': 6.924}, {'end': 6330.147, 'text': 'This would automatically merge the branch contents that you specified into the branch on which you currently reside.', 'start': 6322.872, 'duration': 7.275}, {'end': 6335.571, 'text': "If at all, you're on the master branch and if you issue a command git merge new underscore branch.", 'start': 6330.447, 'duration': 5.124}, {'end': 6338.793, 'text': 'this would merge the contents of the new branch onto the master branch.', 'start': 6335.571, 'duration': 3.222}], 'summary': "Using 'git merge' command merges new branch into master branch.", 'duration': 23.486, 'max_score': 6315.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs386315307.jpg'}], 'start': 5458.105, 'title': 'Git branch management', 'summary': 'Covers creating, merging, linking branches, pushing changes to the server, and deletion process. it includes specific examples, commands, and emphasizes the importance of merging branches.', 'chapters': [{'end': 5819.379, 'start': 5458.105, 'title': 'Managing branches in git', 'summary': 'Explains the process of creating, merging, and managing branches in git, demonstrating the creation of a new branch, adding and committing files, and switching between branches with specific examples and commands.', 'duration': 361.274, 'highlights': ['Demonstrating creation of a new branch, adding and committing files, and switching between branches with specific examples and commands The transcript provides a demonstration of creating a new branch, adding and committing files, and switching between branches using specific examples and commands.', 'Explanation of the process of creating branches, doing work in a specific branch, merging branches back into the base branch, and deleting the branch It outlines the process of creating branches, doing work in a specific branch, merging branches back into the base branch, and deleting the branch once the task is completed.', 'Use of git commands like status, commit, branch, checkout, and explanation of their impact on the repository The transcript explains the use of various git commands such as status, commit, branch, checkout, and their impact on the repository.']}, {'end': 6110.513, 'start': 5820.999, 'title': 'Repository branch creation and merging', 'summary': 'Discusses the creation and linking of branches to a remote server, pushing changes to the server, and merging changes from a branch back to the master branch, with the demonstration of creating and pushing branches to the server and merging changes.', 'duration': 289.514, 'highlights': ["The command to push a new branch onto the server is 'git push -u origin [branch name]', resulting in the successful creation and linking of the branch to the server, as demonstrated with the Bangalore branch creation.", "The process of merging changes from a branch back into the master branch is illustrated with the command 'git merge [branch name]', where the changes from the Bangalore branch are merged into the master branch, resulting in the appearance of the 'address.txt' file in the master branch.", "The demonstration encompasses the process of pushing changes to the server using the command 'git push origin master', resulting in the successful push of changes to the server and the appearance of the 'address.txt' file in the master branch upon refresh."]}, {'end': 6444.188, 'start': 6110.513, 'title': 'Git branching commands and deletion process', 'summary': 'Covers the process of deleting a branch locally and from the server, with commands like git branch -d and git push origin --delete, emphasizing the importance of merging branches and the basic git branching commands.', 'duration': 333.675, 'highlights': ['The process of deleting a branch locally and from the server is explained with commands like git branch -d and git push origin --delete. The chapter explains the process of deleting a branch locally and from the server, emphasizing the commands like git branch -d and git push origin --delete.', 'Emphasizing the importance of merging branches and the basic git branching commands. The chapter emphasizes the importance of merging branches and provides an overview of basic git branching commands, highlighting their significance in the git version control system.']}], 'duration': 986.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs385458105.jpg', 'highlights': ['Demonstrating creation of a new branch, adding and committing files, and switching between branches with specific examples and commands', "The process of merging changes from a branch back into the master branch is illustrated with the command 'git merge [branch name]'", 'The process of creating branches, doing work in a specific branch, merging branches back into the base branch, and deleting the branch']}, {'end': 8648.117, 'segs': [{'end': 6595.857, 'src': 'embed', 'start': 6569.865, 'weight': 1, 'content': [{'end': 6575.23, 'text': 'So the development cannot survive without having a Git version control system.', 'start': 6569.865, 'duration': 5.365}, {'end': 6581.245, 'text': 'Now Git favors both programmers and non-technical users.', 'start': 6576.581, 'duration': 4.664}, {'end': 6591.834, 'text': 'Now if you are a programmer definitely you will be using it for storing the source code and having those particular files having some .', 'start': 6581.725, 'duration': 10.109}, {'end': 6595.857, 'text': 'NET source code Java or some particular source code present there.', 'start': 6591.834, 'duration': 4.023}], 'summary': 'Git is essential for development, used by both programmers and non-technical users.', 'duration': 25.992, 'max_score': 6569.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs386569865.jpg'}, {'end': 6689.74, 'src': 'embed', 'start': 6667.431, 'weight': 0, 'content': [{'end': 6677.015, 'text': 'So in that situation, Git version control system will survive and will provide you a better performance in different different aspects.', 'start': 6667.431, 'duration': 9.584}, {'end': 6686.239, 'text': "So it's a very good tool for you to handle big projects where you are involved with multiple changes, multiple programmers,", 'start': 6677.455, 'duration': 8.784}, {'end': 6689.74, 'text': 'multiple collaborators and different kind of source codes.', 'start': 6686.239, 'duration': 3.501}], 'summary': 'Git version control system provides better performance for big projects with multiple changes, programmers, and collaborators.', 'duration': 22.309, 'max_score': 6667.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs386667431.jpg'}, {'end': 6848.767, 'src': 'embed', 'start': 6826.154, 'weight': 3, 'content': [{'end': 6836.82, 'text': "it moves the files from your working copy to the staging area and it will remain there itself unless and until you don't do any kind of git commit command further,", 'start': 6826.154, 'duration': 10.666}, {'end': 6842.683, 'text': 'so that these files from staging area will be permanently written off into the local repository.', 'start': 6836.82, 'duration': 5.863}, {'end': 6848.767, 'text': "so it's a very important part that you run git add command before running any kind of git commit command.", 'start': 6842.683, 'duration': 6.084}], 'summary': 'Git add moves files to staging area before commit.', 'duration': 22.613, 'max_score': 6826.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs386826154.jpg'}, {'end': 6951.953, 'src': 'embed', 'start': 6917.666, 'weight': 2, 'content': [{'end': 6923.031, 'text': 'it will let you know that what the different kind of changes and modifications you have done.', 'start': 6917.666, 'duration': 5.365}, {'end': 6929.517, 'text': 'so if at any moment of time, before doing any kind of commits, you want to do some kind of review,', 'start': 6923.031, 'duration': 6.486}, {'end': 6932.76, 'text': 'you want to see that what different changes you have done.', 'start': 6929.517, 'duration': 3.243}, {'end': 6935.823, 'text': 'so in that case you can go for the git diff command.', 'start': 6932.76, 'duration': 3.063}, {'end': 6938.586, 'text': 'so git diff command used to see the content,', 'start': 6935.823, 'duration': 2.763}, {'end': 6951.953, 'text': 'the difference or the modifications which you have done recently to the specific file Right and the last one we have already discussed the git commit command which commits the changes to the head revision number.', 'start': 6938.586, 'duration': 13.367}], 'summary': 'Git diff command shows recent modifications to specific file, aiding pre-commit review.', 'duration': 34.287, 'max_score': 6917.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs386917666.jpg'}, {'end': 6987.047, 'src': 'embed', 'start': 6959.735, 'weight': 4, 'content': [{'end': 6963.356, 'text': 'So commit is something which is done into your local repository only.', 'start': 6959.735, 'duration': 3.621}, {'end': 6967.359, 'text': 'But yes, this is the last stage of doing a modifications here.', 'start': 6963.677, 'duration': 3.682}, {'end': 6973.361, 'text': 'Once the commit is done, it will directly modify your history, your git repository history there,', 'start': 6967.759, 'duration': 5.602}, {'end': 6976.763, 'text': 'and the changes will be permanently preserved into the repository.', 'start': 6973.361, 'duration': 3.402}, {'end': 6983.566, 'text': 'So git command is primarily used for permanently preserving the changes into your local repository.', 'start': 6977.143, 'duration': 6.423}, {'end': 6987.047, 'text': 'Right So these were some of the commands there.', 'start': 6985.066, 'duration': 1.981}], 'summary': 'Git commit permanently preserves changes in local repository.', 'duration': 27.312, 'max_score': 6959.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs386959735.jpg'}, {'end': 7109.059, 'src': 'embed', 'start': 7083.537, 'weight': 13, 'content': [{'end': 7089.399, 'text': 'So Git merge actively helps us to move the changes from one branch to another one.', 'start': 7083.537, 'duration': 5.862}, {'end': 7093.15, 'text': 'Next one is the git push command here.', 'start': 7091.209, 'duration': 1.941}, {'end': 7102.455, 'text': 'Now. git push command will eventually help you to move the changes from your local to move the different commits from your local repository to the remote repository.', 'start': 7093.27, 'duration': 9.185}, {'end': 7109.059, 'text': 'Now, in this case, what happens that if you are working in offline mode, if you have done some couple of commits now,', 'start': 7102.836, 'duration': 6.223}], 'summary': 'Git merge moves changes between branches. git push moves commits to remote repository.', 'duration': 25.522, 'max_score': 7083.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs387083537.jpg'}, {'end': 7362.195, 'src': 'embed', 'start': 7312.967, 'weight': 5, 'content': [{'end': 7316.549, 'text': 'Now, in order to prevent such kind of conflicts,', 'start': 7312.967, 'duration': 3.582}, {'end': 7324.374, 'text': 'developers usually provided with the isolated branches so that they can work on their branches and once the development is done,', 'start': 7316.549, 'duration': 7.825}, {'end': 7328.776, 'text': 'they can do a single merge and they can sync their changes into a single branch.', 'start': 7324.374, 'duration': 4.402}, {'end': 7335.54, 'text': 'So the git merge command combines separate branches and resolves any conflicting edits over there.', 'start': 7329.137, 'duration': 6.403}, {'end': 7344.786, 'text': 'So, once the developers are done with the specific changes, with the modifications to the source code later on, they can combine those things,', 'start': 7335.981, 'duration': 8.805}, {'end': 7352.79, 'text': 'they can work on these components and they can resolve all these conflicting modifications right.', 'start': 7344.786, 'duration': 8.004}, {'end': 7362.195, 'text': 'so a merge conflict is an event that takes place when git is unable to resolve the differences in the source code between the two commits automatically.', 'start': 7352.79, 'duration': 9.405}], 'summary': 'Developers use isolated branches to prevent conflicts and merge changes using git merge command.', 'duration': 49.228, 'max_score': 7312.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs387312967.jpg'}, {'end': 8043.006, 'src': 'embed', 'start': 8018.172, 'weight': 7, 'content': [{'end': 8025.496, 'text': 'we have a particular downloaded remote repository in a repository a and then we are doing some changes, some modifications.', 'start': 8018.172, 'duration': 7.324}, {'end': 8033.961, 'text': 'And once those modifications are done, we are pretty much changing or putting up that new commit all together to the GitHub repository.', 'start': 8026.057, 'duration': 7.904}, {'end': 8038.103, 'text': 'So this is what we are trying to do so far over here in this one.', 'start': 8034.301, 'duration': 3.802}, {'end': 8043.006, 'text': 'So this get push activity will take the particular access.', 'start': 8038.464, 'duration': 4.542}], 'summary': 'Modifying and pushing changes to github repository.', 'duration': 24.834, 'max_score': 8018.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388018172.jpg'}, {'end': 8086.346, 'src': 'embed', 'start': 8063.069, 'weight': 8, 'content': [{'end': 8073.466, 'text': 'So all you have to do is that you have to just share that password and your git push activity should be passed on or should be done there.', 'start': 8063.069, 'duration': 10.397}, {'end': 8077.533, 'text': 'And as you can see, the changes really got moved to the GitHub repository.', 'start': 8073.686, 'duration': 3.847}, {'end': 8081.285, 'text': 'Now, sometimes the credentials get expired.', 'start': 8078.024, 'duration': 3.261}, {'end': 8086.346, 'text': 'So you may get some particular message saying that you have to put some password there.', 'start': 8081.485, 'duration': 4.861}], 'summary': 'Sharing password enables successful git push activity and changes are moved to github repository.', 'duration': 23.277, 'max_score': 8063.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388063069.jpg'}, {'end': 8314.502, 'src': 'embed', 'start': 8287.402, 'weight': 9, 'content': [{'end': 8291.485, 'text': 'So, first of all, you have to resolve this conflicts and then it will be proceed further.', 'start': 8287.402, 'duration': 4.083}, {'end': 8298.671, 'text': 'You have some couple of options like you have to resolve the conflicts manually and because Git is not able to handle it.', 'start': 8291.924, 'duration': 6.747}, {'end': 8304.575, 'text': 'Otherwise, once the Git conflicts is resolved, you can run Git reverse or hyphen hyphen continue.', 'start': 8299.191, 'duration': 5.384}, {'end': 8307.096, 'text': 'if you want to skip this commit.', 'start': 8305.034, 'duration': 2.062}, {'end': 8314.502, 'text': 'so you can say git rebase, hyphen hyphen skip and if you want to abort the particular, this rebase here.', 'start': 8307.096, 'duration': 7.406}], 'summary': 'Resolve conflicts in git before proceeding further.', 'duration': 27.1, 'max_score': 8287.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388287402.jpg'}, {'end': 8352.909, 'src': 'embed', 'start': 8329.093, 'weight': 11, 'content': [{'end': 8336.623, 'text': 'so once you open the merge tool from there, you will be able to resolve those changes manually, then continue with the rebase.', 'start': 8329.093, 'duration': 7.53}, {'end': 8338.724, 'text': "so let's go with the git merge tool here.", 'start': 8336.623, 'duration': 2.101}, {'end': 8343.806, 'text': 'so we are going to use the command called git merge tool now, when you run this.', 'start': 8338.724, 'duration': 5.082}, {'end': 8344.886, 'text': 'so what will happen?', 'start': 8343.806, 'duration': 1.08}, {'end': 8346.767, 'text': 'that it will process.', 'start': 8344.886, 'duration': 1.881}, {'end': 8352.909, 'text': 'it will open the normal VI command line over here and all the files will be processed all together.', 'start': 8346.767, 'duration': 6.142}], 'summary': 'Using git merge tool to resolve changes manually and continue with rebase.', 'duration': 23.816, 'max_score': 8329.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388329093.jpg'}, {'end': 8498.659, 'src': 'embed', 'start': 8455.337, 'weight': 12, 'content': [{'end': 8463.66, 'text': 'here I just want to have particular line pasted, okay, deleted.', 'start': 8455.337, 'duration': 8.323}, {'end': 8464.921, 'text': 'so this line I will.', 'start': 8463.66, 'duration': 1.261}, {'end': 8487.229, 'text': 'okay. so I have added this line in the final, just trying to resolve this conflicts manually.', 'start': 8464.921, 'duration': 22.308}, {'end': 8494.275, 'text': "I'm just editing this file here, trying to remove this one, this one, this one and this one.", 'start': 8487.229, 'duration': 7.046}, {'end': 8498.659, 'text': 'so this is how my particular final file looks like,', 'start': 8494.275, 'duration': 4.384}], 'summary': 'Resolving conflicts by deleting and editing lines in the final file.', 'duration': 43.322, 'max_score': 8455.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388455337.jpg'}, {'end': 8606.342, 'src': 'embed', 'start': 8579.64, 'weight': 10, 'content': [{'end': 8587.524, 'text': 'so we should be able to push the changes to remote repository.', 'start': 8579.64, 'duration': 7.884}, {'end': 8599.919, 'text': "so it will take some time to do the push and, as you can see, It's trying to put some content.", 'start': 8587.524, 'duration': 12.395}, {'end': 8606.342, 'text': "so we'll still wait for the final confirmation so that we can assure that, yes, all the conflicts is resolved.", 'start': 8599.919, 'duration': 6.423}], 'summary': 'Pushing changes to remote repository, waiting for final confirmation on conflict resolution.', 'duration': 26.702, 'max_score': 8579.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388579640.jpg'}], 'start': 6445.489, 'title': 'Git version control system', 'summary': 'Introduces git version control system, its usage for storing source code, enabling developer coordination, and its applicability to technical and non-technical users.', 'chapters': [{'end': 6752.381, 'start': 6445.489, 'title': 'Understanding git version control system', 'summary': 'Introduces the concept of git version control system, highlighting its usage for storing source code of various programming languages, enabling coordination among developers, tracking progress of projects, and its applicability to both technical and non-technical users, emphasizing its importance for development projects.', 'duration': 306.892, 'highlights': ['Git version control system is used for storing source code of various programming languages like Java, .NET, Android, Node.js, and facilitates coordination among multiple developers and collaborators, providing complete tracking of project progress and source code modifications.', 'Git is an important and key tool for any development project, favored by both programmers and non-technical users, including DevOps engineers who can use it for storing automation scripts, configuration management tool scripts, and other project files.', 'Git version control system allows multiple users to collaborate and handle large projects with multiple repositories, providing better performance in managing changes, collaborators, and different source codes.', "The basic git commands for managing a git repository include 'git config' for configuring author details and additional parameters when working with a git repository locally after git clone and modifications."]}, {'end': 7045.525, 'start': 6753.182, 'title': 'Git commands summary', 'summary': 'Explains the git init, git add, git commit, git diff, git reset, git status, and git merge commands, emphasizing the importance of git add before git commit and the use of git diff to review changes before committing.', 'duration': 292.343, 'highlights': ['The git diff command is used to see the difference between two files or branches, and to review changes before committing.', 'The git add command is crucial as it moves files to the staging area, ensuring they are picked up by the git commit command, thus permanently preserving them in the local repository.', 'The git commit command picks up files from the staging area and permanently writes them to the local repository, modifying the repository history.', 'The git status command shows the state of the working directory and the staging area, providing visibility into modifications and added files.', 'The git init command is used to convert a folder into a full-fledged git version control repository, and the git merge command is used to merge changes from different branches.', 'The git reset command is utilized for undoing local changes in the local repository.']}, {'end': 7952.71, 'start': 7045.525, 'title': 'Understanding git commands and resolving merge conflicts', 'summary': 'Explains the git merge, push, and pull commands, and the occurrence and resolution of merge conflicts, emphasizing the process of resolving conflicts and the commands used, along with the demonstration of creating repositories and simulating conflicts.', 'duration': 907.185, 'highlights': ['The git merge command combines separate branches and resolves conflicting edits, facilitating the movement of changes between branches. Git merge command simplifies the process of combining separate branches and resolving any conflicting edits, enabling the movement of changes between branches.', 'Merge conflicts occur when git is unable to automatically resolve differences in source code between two commits, requiring human intervention to resolve conflicts. Merge conflicts arise when git cannot automatically resolve differences in source code between two commits, necessitating human intervention for conflict resolution.', "The steps to resolve merge conflicts involve opening the conflicted file, making required changes, adding the file to the staging area using 'git add', and then committing the changes using 'git commit'. The resolution of merge conflicts involves opening the conflicted file, making necessary changes, adding the file to the staging area using 'git add', and committing the changes using 'git commit'.", "Key commands used for resolving merge conflicts include 'git log --merges', 'git diff', 'git checkout', 'git reset --mixed', 'git merge --abort', and 'git reset'. Essential commands for resolving merge conflicts include 'git log --merges', 'git diff', 'git checkout', 'git reset --mixed', 'git merge --abort', and 'git reset'.", "Demonstration of creating repositories and simulating conflicts using git commands 'git init', 'git remote add origin', and 'git pull', to understand the process of creating, modifying, and syncing repositories. The demonstration includes creating repositories and simulating conflicts using git commands 'git init', 'git remote add origin', and 'git pull', to grasp the process of repository creation, modification, and synchronization."]}, {'end': 8193.316, 'start': 7952.73, 'title': 'Git repository management', 'summary': 'Outlines the process of making changes and pushing commits to a remote github repository, including adding, committing, and pushing changes, as well as dealing with credential management and the time taken for changes to be pushed.', 'duration': 240.586, 'highlights': ['The process of making changes and pushing commits to a remote GitHub repository involves adding, committing, and pushing changes to the remote or central repository. This includes making changes to files, adding new lines, making modifications, and shuffling data, which are then committed and pushed to the GitHub repository.', 'Credential management is essential for the git push activity, where the system may prompt for the username and password if the credentials are not saved. The user is required to provide the password for the git push activity if the credentials are not saved, and an expired credentials message may require the user to enter the password interactively.', 'The time taken for changes to be pushed to the remote repository depends on the network connectivity and the nature of the changes being uploaded. The process of pushing commits to the remote repository may take some time, depending on factors such as network connectivity and the complexity of the changes being uploaded.']}, {'end': 8648.117, 'start': 8193.316, 'title': 'Managing git conflict', 'summary': 'Discusses resolving conflicts in git by pulling changes from the remote repository, manually resolving conflicts, and successfully pushing the changes to the remote repository, resulting in both commit a and commit b being present in the repository.', 'duration': 454.801, 'highlights': ['Resolving conflicts manually and continuing with the rebase. After running git pull to pull changes from the remote repository, conflicts are resolved manually and rebase is continued, allowing successful resolution of conflicts.', 'Successfully pushing changes to the remote repository and confirming resolution of conflicts. After resolving conflicts and making manual modifications, the successful push to the remote repository confirms the resolution of conflicts and the presence of both commit A and commit B in the repository.', 'Running git merge tool to open the merge tool and resolve conflicts manually. The command git merge tool is used to open the merge tool, enabling the manual resolution of conflicts by examining and modifying the files.', 'Adding and removing specific lines to resolve conflicts manually. By adding, deleting, and modifying specific lines in the conflicted file, manual resolution of conflicts is achieved.', 'Running git push to push the changes to the remote repository. After resolving conflicts and making manual modifications, the changes are successfully pushed to the remote repository, confirming the resolution of conflicts.']}], 'duration': 2202.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs386445489.jpg', 'highlights': ['Git version control system facilitates coordination among multiple developers and collaborators, providing complete tracking of project progress and source code modifications.', 'Git is favored by both programmers and non-technical users, including DevOps engineers who can use it for storing automation scripts, configuration management tool scripts, and other project files.', 'The git diff command is used to see the difference between two files or branches, and to review changes before committing.', 'The git add command moves files to the staging area, ensuring they are picked up by the git commit command, thus permanently preserving them in the local repository.', 'The git commit command permanently writes files to the local repository, modifying the repository history.', 'The git merge command combines separate branches and resolves conflicting edits, facilitating the movement of changes between branches.', 'Merge conflicts occur when git is unable to automatically resolve differences in source code between two commits, requiring human intervention to resolve conflicts.', 'The process of making changes and pushing commits to a remote GitHub repository involves adding, committing, and pushing changes to the remote or central repository.', 'Credential management is essential for the git push activity, where the system may prompt for the username and password if the credentials are not saved.', 'Resolving conflicts manually and continuing with the rebase after running git pull to pull changes from the remote repository.', 'Successfully pushing changes to the remote repository and confirming resolution of conflicts.', 'Running git merge tool to open the merge tool and resolve conflicts manually.', 'Adding and removing specific lines to resolve conflicts manually.', 'Running git push to push the changes to the remote repository.']}, {'end': 10118.964, 'segs': [{'end': 8724.441, 'src': 'embed', 'start': 8698.018, 'weight': 2, 'content': [{'end': 8704.604, 'text': 'Now what exactly is the basic web architecture? Now web architecture is made up of three essential elements.', 'start': 8698.018, 'duration': 6.586}, {'end': 8710.008, 'text': "That's the website that is the front end of a web application that is visible to the user.", 'start': 8705.444, 'duration': 4.564}, {'end': 8717.094, 'text': 'Then there is the server which constitutes the back end of a web application and holds and manages all the data.', 'start': 8710.729, 'duration': 6.365}, {'end': 8724.441, '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': 8717.675, 'duration': 6.766}], 'summary': 'Web architecture comprises website, server, and ip address.', 'duration': 26.423, 'max_score': 8698.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388698018.jpg'}, {'end': 8837.527, 'src': 'embed', 'start': 8765.461, 'weight': 0, 'content': [{'end': 8770.824, 'text': "We put a domain name over that IP address, the same way we put names over people's phone numbers.", 'start': 8765.461, 'duration': 5.363}, {'end': 8775.547, 'text': 'When you type a domain name in the browser, it will give you the server call.', 'start': 8771.845, 'duration': 3.702}, {'end': 8778.569, 'text': 'The server will then send over the website to you.', 'start': 8776.047, 'duration': 2.522}, {'end': 8789.39, 'text': 'Next, what is HTML? HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'start': 8780.925, 'duration': 8.465}, {'end': 8794.513, 'text': 'It defines the structure of websites and formats these web pages.', 'start': 8790.211, 'duration': 4.302}, {'end': 8805.7, 'text': 'So what exactly is CSS then? CSS is a simple design language used for making web pages look more beautiful and presentable.', 'start': 8796.454, 'duration': 9.246}, {'end': 8812.632, 'text': "It can be attached to any HTML element to style it or even position it according to the developer's choice.", 'start': 8806.607, 'duration': 6.025}, {'end': 8823.64, 'text': 'Then you must be wondering what exactly is JavaScript? Now JavaScript is a powerful interpreted language targeted for web development.', 'start': 8815.534, 'duration': 8.106}, {'end': 8828.684, 'text': 'It is used for making web pages interactive and bringing the web pages to life.', 'start': 8824.381, 'duration': 4.303}, {'end': 8832.167, 'text': "So now let's create your first website.", 'start': 8829.865, 'duration': 2.302}, {'end': 8837.527, 'text': 'HTML, short for Hypertext Markup Language,', 'start': 8834.626, 'duration': 2.901}], 'summary': 'Domain names map to ip addresses. html defines web structure. css styles pages. javascript makes pages interactive.', 'duration': 72.066, 'max_score': 8765.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388765461.jpg'}, {'end': 8972.86, 'src': 'embed', 'start': 8948.469, 'weight': 5, 'content': [{'end': 8956.476, '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': 8948.469, 'duration': 8.007}, {'end': 8959.058, 'text': 'The next section is the body tag.', 'start': 8957.217, 'duration': 1.841}, {'end': 8968.307, 'text': 'Now the body tag contains all the displayable contents of your web page including headings, paragraphs, div containers, tables and more.', 'start': 8959.619, 'duration': 8.688}, {'end': 8972.86, 'text': 'Now the HTML header tags are used to add headings to a web page.', 'start': 8969.198, 'duration': 3.662}], 'summary': 'Add css to head tag using style tag, change display styles of html elements. body tag holds displayable contents like headings, paragraphs, div containers, and tables. html header tags add headings to a web page.', 'duration': 24.391, 'max_score': 8948.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388948469.jpg'}, {'end': 9215.682, 'src': 'embed', 'start': 9191.321, 'weight': 4, 'content': [{'end': 9201.41, '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': 9191.321, 'duration': 10.089}, {'end': 9207.917, 'text': "the first application on this track we're going to offer you that is related to your HTML registration page.", 'start': 9201.41, 'duration': 6.507}, {'end': 9215.682, 'text': 'okay, 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': 9207.917, 'duration': 7.765}], 'summary': 'Learn to connect html and css, while creating a registration page in visual studio code.', 'duration': 24.361, 'max_score': 9191.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs389191321.jpg'}], 'start': 8648.497, 'title': 'Html web development', 'summary': 'Covers the basics of web architecture, html structure, and css form beautification, emphasizing key elements and development using visual studio code, enabling the creation of a functional registration page within 10 minutes.', 'chapters': [{'end': 8837.527, 'start': 8648.497, 'title': 'Learn html basics in 10 mins', 'summary': 'Discusses the basics of web architecture, including the front end, back end, and ip address, and provides an overview of html, css, and javascript along with their functions and purposes.', 'duration': 189.03, 'highlights': ['The basic web architecture consists of three essential elements: the website (front end), the server (back end), and the IP address.', 'HTML is the most widely used markup language for developing and structuring web pages on the internet.', "CSS is a design language used for making web pages look more beautiful and presentable, and it can be attached to any HTML element to style it or position it according to the developer's choice.", 'JavaScript is a powerful interpreted language targeted for web development, used for making web pages interactive and bringing them to life.']}, {'end': 9100.297, 'start': 8837.527, 'title': 'Html basics and structure', 'summary': 'Explains the basics of html, including the doc type, html, head, and body tags, as well as various elements like headings, paragraphs, div containers, and image tags, emphasizing their use and structure.', 'duration': 262.77, 'highlights': ['The doc type instruction indicates the browser that the document type to be served to the user is an HTML document and should always be included at the very top of the HTML page. The doc type instruction serves to indicate the browser that the document type to be served to the user is in fact an HTML document and should always be included at the very top of the HTML page.', "The HTML tag contains all the web pages and can have attributes like the lang attribute, allowing specification of the spoken language of the page's content. The HTML tag contains all the web pages and can have attributes like the lang attribute, allowing specification of the spoken language of the page's content.", "The head tag contains information about the web page's properties, links, and more, including the page's title, description, additional meta tags, and CSS code. The head tag contains all of the information about the web page's properties, links, and more, including the page's title, description, additional meta tags, and CSS code.", 'The body tag contains all the displayable contents of a web page, such as headings, paragraphs, div containers, and more, and is used to add headings to a web page. The body tag contains all the displayable contents of a web page, including headings, paragraphs, div containers, tables, and more, and is used to add headings to a web page.', 'The HTML div tag defines a section in an HTML document that is used as a container for other HTML elements and is used to apply styles to HTML elements that cannot be added otherwise. The HTML div tag defines a division or a section in an HTML document that is used as a container for other HTML elements and is used to apply styles to HTML elements that cannot be added otherwise.']}, {'end': 9544.916, 'start': 9102.719, 'title': 'Html registration page development', 'summary': 'Discusses how to develop an html registration page using visual studio code, covering the usage of html and css to create form elements such as text boxes and buttons, along with the required attributes and tags.', 'duration': 442.197, 'highlights': ['The chapter covers the process of developing an HTML registration page using Visual Studio Code, emphasizing the usage of HTML and CSS to create form elements such as text boxes and buttons. The chapter emphasizes the usage of HTML and CSS to develop an HTML registration page using Visual Studio Code, covering the creation of form elements like text boxes and buttons. This includes specifying attributes like placeholder, name, id, and required for input fields.', 'The instructor mentions the importance of understanding the basic concepts of HTML and CSS for the hands-on session, focusing on the connection between HTML and CSS and their application in creating a mini HTML registration page. The instructor emphasizes the importance of understanding the basic concepts of HTML and CSS for the hands-on session, highlighting the connection between HTML and CSS in the context of creating a mini HTML registration page.', 'The chapter introduces the usage of Visual Studio Code, a popular development tool provided by Microsoft, for the development of the mini application. The chapter introduces the usage of Visual Studio Code, a popular development tool provided by Microsoft, for the development of the mini application, specifically for creating the HTML registration page.']}, {'end': 10118.964, 'start': 9544.916, 'title': 'Css form beautification', 'summary': 'Details the process of beautifying an html form using css, including setting up the body tag, creating a container with specific properties, styling input fields, and enhancing the registration button, resulting in a more organized and visually appealing form.', 'duration': 574.048, 'highlights': ['The chapter details the process of beautifying an HTML form using CSS, including setting up the body tag, creating a container with specific properties, styling input fields, and enhancing the registration button, resulting in a more organized and visually appealing form. The transcript details the process of beautifying an HTML form using CSS, including setting up the body tag, creating a container with specific properties, styling input fields, and enhancing the registration button, resulting in a more organized and visually appealing form.', "Styling the container with properties like margin, width, background color, and box shadow to enhance the form's visual appeal. The speaker discusses styling the container with properties like margin, width, background color, and box shadow to enhance the form's visual appeal.", 'Styling the input fields by specifying properties such as width, padding, margin, display, border, and background, resulting in a more organized and visually appealing form. The speaker explains the process of styling the input fields by specifying properties such as width, padding, margin, display, border, and background, resulting in a more organized and visually appealing form.', 'Enhancing the registration button by adding properties such as background color, color, padding, border, cursor, width, and opacity, resulting in a visually appealing and functional button. The speaker discusses enhancing the registration button by adding properties such as background color, color, padding, border, cursor, width, and opacity, resulting in a visually appealing and functional button.']}], 'duration': 1470.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs388648497.jpg', 'highlights': ['HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'CSS is a design language used for making web pages look more beautiful and presentable.', 'The basic web architecture consists of three essential elements: the website (front end), the server (back end), and the IP address.', 'JavaScript is a powerful interpreted language targeted for web development, used for making web pages interactive and bringing them to life.', 'The chapter covers the process of developing an HTML registration page using Visual Studio Code, emphasizing the usage of HTML and CSS to create form elements such as text boxes and buttons.', 'The chapter details the process of beautifying an HTML form using CSS, including setting up the body tag, creating a container with specific properties, styling input fields, and enhancing the registration button, resulting in a more organized and visually appealing form.']}, {'end': 12940.085, 'segs': [{'end': 10193.739, 'src': 'embed', 'start': 10118.964, 'weight': 0, 'content': [{'end': 10121.889, 'text': 'you see now how the background color is changing now.', 'start': 10118.964, 'duration': 2.925}, {'end': 10131.26, 'text': 'so it is a little bit more grayish color up having this HTML as well as the CSS together.', 'start': 10121.889, 'duration': 9.371}, {'end': 10140.024, 'text': "so this time we're going to develop another very interesting example using this HTML, JavaScript and CSS together,", 'start': 10131.26, 'duration': 8.764}, {'end': 10142.845, 'text': 'and that is called working with a quiz application.', 'start': 10140.024, 'duration': 2.821}, {'end': 10149.288, 'text': "so one of the very, very interesting project will be developing it from the scratch, and I'm sure that you will enjoy a lot.", 'start': 10142.845, 'duration': 6.443}, {'end': 10152.03, 'text': 'so what we will do will start creating a new folder.', 'start': 10149.288, 'duration': 2.742}, {'end': 10156.392, 'text': "now. first of all, I'm going to give the name call HTML quiz.", 'start': 10152.03, 'duration': 4.362}, {'end': 10161.081, 'text': "now i'm going to create three files.", 'start': 10159.48, 'duration': 1.601}, {'end': 10167.443, 'text': "inside this number one i'm going to say index.html, index.html.", 'start': 10161.081, 'duration': 6.362}, {'end': 10178.048, 'text': "then i need another file that is called app.css, and the third file i'm going to create inside this that will hold the script related part.", 'start': 10167.443, 'duration': 10.605}, {'end': 10178.888, 'text': 'so we are saying script.', 'start': 10178.048, 'duration': 0.84}, {'end': 10185.255, 'text': 'So we have total number of three files ready with us.', 'start': 10182.494, 'duration': 2.761}, {'end': 10190.478, 'text': 'Now from HTML page, we would like to develop this HTML tags first.', 'start': 10186.135, 'duration': 4.343}, {'end': 10193.739, 'text': "So we'll go to the HTML and see.", 'start': 10191.418, 'duration': 2.321}], 'summary': 'Developing a quiz application using html, javascript, and css, creating three files and starting with html tags.', 'duration': 74.775, 'max_score': 10118.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3810118964.jpg'}, {'end': 10268.313, 'src': 'embed', 'start': 10233.587, 'weight': 3, 'content': [{'end': 10236.008, 'text': 'Now, we have got another div tag inside this.', 'start': 10233.587, 'duration': 2.421}, {'end': 10241.372, 'text': 'We will say div id equal to question hyphen container.', 'start': 10236.209, 'duration': 5.163}, {'end': 10248.136, 'text': 'Question hyphen container.', 'start': 10244.173, 'duration': 3.963}, {'end': 10250.377, 'text': 'So, that is the name or id of this div.', 'start': 10248.176, 'duration': 2.201}, {'end': 10255.44, 'text': 'And we say class equal to hide.', 'start': 10251.017, 'duration': 4.423}, {'end': 10268.313, 'text': 'now, within this div tag we would like to offer some details, but before that we would like to create some embedded div tags inside this.', 'start': 10258.849, 'duration': 9.464}], 'summary': "Creating a div tag with id 'question-container' and class 'hide' for offering details.", 'duration': 34.726, 'max_score': 10233.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3810233587.jpg'}, {'end': 10541.692, 'src': 'embed', 'start': 10507.836, 'weight': 4, 'content': [{'end': 10512.2, 'text': 'So two div tags are getting closed and this is another div tag which is closed at the end.', 'start': 10507.836, 'duration': 4.364}, {'end': 10515.123, 'text': 'And here we want to include a script tag.', 'start': 10512.981, 'duration': 2.142}, {'end': 10524.232, 'text': 'script src equal to script.js.', 'start': 10517.706, 'duration': 6.526}, {'end': 10525.373, 'text': "That's it.", 'start': 10524.973, 'duration': 0.4}, {'end': 10527.095, 'text': 'Our HTML page is almost ready.', 'start': 10525.593, 'duration': 1.502}, {'end': 10528.356, 'text': "Let's review.", 'start': 10527.815, 'duration': 0.541}, {'end': 10537.128, 'text': 'and yes, i can see some standard buttons has been created.', 'start': 10531.142, 'duration': 5.986}, {'end': 10541.692, 'text': 'now we would like to look, make gives a better look and feel to this kind of button.', 'start': 10537.128, 'duration': 4.564}], 'summary': 'Html page nearly complete with script tag included. standard buttons created, seeking better look and feel.', 'duration': 33.856, 'max_score': 10507.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3810507836.jpg'}, {'end': 11098.523, 'src': 'embed', 'start': 11044.928, 'weight': 5, 'content': [{'end': 11049.549, 'text': 'going forward, we would like to use border, so this border.', 'start': 11044.928, 'duration': 4.621}, {'end': 11064.044, 'text': 'we want to use 12 pixels, or i would say one pixel, and then solid and HSL values.', 'start': 11049.549, 'duration': 14.495}, {'end': 11085.634, 'text': 'we would like to give it once again var-u, followed by 100%, 30%.', 'start': 11064.044, 'duration': 21.59}, {'end': 11090.798, 'text': 'Okay, so these are the values for border, followed by background color.', 'start': 11085.635, 'duration': 5.163}, {'end': 11094.68, 'text': 'So we would like to use the same details.', 'start': 11091.839, 'duration': 2.841}, {'end': 11098.523, 'text': 'Now we would like to use background color.', 'start': 11096.842, 'duration': 1.681}], 'summary': 'Using a 12-pixel border with hsl values and a background color with var-u at 100% and 30%.', 'duration': 53.595, 'max_score': 11044.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3811044928.jpg'}, {'end': 11635.177, 'src': 'embed', 'start': 11572.414, 'weight': 6, 'content': [{'end': 11591.053, 'text': 'so we say const questions, const questions, equal to first question which I would like to create.', 'start': 11572.414, 'duration': 18.639}, {'end': 11597.699, 'text': 'it here is called question.', 'start': 11591.053, 'duration': 6.646}, {'end': 11613.433, 'text': 'now, here we will say javascript framework.', 'start': 11597.699, 'duration': 15.734}, {'end': 11623.227, 'text': 'So which of these is a which one of these?', 'start': 11619.144, 'duration': 4.083}, {'end': 11627.211, 'text': 'I would say which one of these is a JavaScript framework?', 'start': 11623.227, 'duration': 3.984}, {'end': 11628.972, 'text': 'This is my question now.', 'start': 11627.991, 'duration': 0.981}, {'end': 11632.595, 'text': 'Okay So I would like to have answers for sure.', 'start': 11630.013, 'duration': 2.582}, {'end': 11635.177, 'text': 'So here we are providing answers.', 'start': 11633.536, 'duration': 1.641}], 'summary': 'Creating a javascript framework with questions and answers.', 'duration': 62.763, 'max_score': 11572.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3811572414.jpg'}, {'end': 12683.353, 'src': 'embed', 'start': 12640.842, 'weight': 7, 'content': [{'end': 12644.183, 'text': 'here function set.', 'start': 12640.842, 'duration': 3.341}, {'end': 12645.684, 'text': 'next question.', 'start': 12644.183, 'duration': 1.501}, {'end': 12652.486, 'text': 'here in this next question we are just saying reset, state the function.', 'start': 12645.684, 'duration': 6.802}, {'end': 12656.547, 'text': 'we are calling it and saying show question.', 'start': 12652.486, 'duration': 4.061}, {'end': 12673.946, 'text': 'and here we are passing this shuffle questions and we are passing this current question index.', 'start': 12664.798, 'duration': 9.148}, {'end': 12675.727, 'text': 'that is what the set.', 'start': 12673.946, 'duration': 1.781}, {'end': 12678.049, 'text': 'next question is offering it to me.', 'start': 12675.727, 'duration': 2.322}, {'end': 12679.55, 'text': 'now the last function which is left.', 'start': 12678.049, 'duration': 1.501}, {'end': 12683.353, 'text': 'that is called start game, how the game will start.', 'start': 12679.55, 'duration': 3.803}], 'summary': 'Functions set, reset, show question, shuffle questions, and start game are discussed.', 'duration': 42.511, 'max_score': 12640.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3812640842.jpg'}], 'start': 10118.964, 'title': 'Developing a quiz application with html, javascript, and css', 'summary': 'Introduces the process of developing a quiz application using html, javascript, and css, creating three files: index.html, app.css, and a script file. it covers html syntax, div tag usage, css styling for ui, and creating a quiz application with javascript. key points include the importance of working with these technologies together and the development process of a javascript quiz app.', 'chapters': [{'end': 10193.739, 'start': 10118.964, 'title': 'Developing a quiz application', 'summary': 'Introduces the process of developing a quiz application using html, javascript, and css, creating three files: index.html, app.css, and a script file, highlighting the importance of working with these technologies together and the excitement of developing a project from scratch.', 'duration': 74.775, 'highlights': ['The chapter introduces the process of developing a quiz application using HTML, JavaScript, and CSS, creating three files: index.html, app.css, and a script file.', 'It emphasizes the importance of working with these technologies together.', 'The chapter highlights the excitement of developing a project from scratch.']}, {'end': 10541.692, 'start': 10195.8, 'title': 'Html syntax and div tag usage', 'summary': 'Covers the creation of div tags with specific ids and classes, including the creation of buttons and the addition of a script tag in an html page.', 'duration': 345.892, 'highlights': ["Creation of div tags with specific IDs and classes The chapter includes the creation of div tags with specific IDs and classes, such as 'container', 'question-container', 'answer-buttons', 'controls', and 'score'.", "Creation of buttons within the div tags The transcript mentions the creation of buttons within the div tags, including the use of classes such as 'btn' and specific IDs such as 'start-button' and 'next-button'.", "Addition of a script tag in the HTML page The addition of a script tag 'script.js' in the HTML page is highlighted, indicating the inclusion of scripting functionality."]}, {'end': 11349.249, 'start': 10541.692, 'title': 'Css styling for ui', 'summary': 'Covers the process of styling a ui using css, including setting specific hsl and pixel values for properties like padding, margin, width, height, background color, border radius, box shadow, and button styles.', 'duration': 807.557, 'highlights': ['Setting specific HSL and pixel values for properties like padding, margin, width, height, background color, border radius, box shadow, and button styles The transcript details the process of setting specific HSL and pixel values for various properties such as padding, margin, width, height, background color, border radius, box shadow, and button styles.', 'Applying styles for container and buttons The speaker provides detailed instructions for applying styles to the container, including width, max width, background color, border radius, padding, and box shadow, followed by applying button styles using specific HSL and pixel values for properties like border, background color, border radius, padding, color, and cursor.', 'Defining styles for start and next buttons The transcript includes instructions for defining common styles for both the start and next buttons, specifying font size, font weight, padding, and cursor, and applying styles for controls using display flex, justify contents, align items, and height.']}, {'end': 11800.284, 'start': 11349.249, 'title': 'Creating quiz application with javascript', 'summary': 'Covers creating a quiz application with javascript, including setting up buttons and elements, initializing variables, and creating questions and answers for the quiz.', 'duration': 451.035, 'highlights': ['Setting up buttons and elements using JavaScript const and document.getElementById to create a start button, next button, question container, question element, and answer buttons.', 'Initializing variables like shuffle questions and quizScore to manage the quiz state and score.', 'Creating a set of questions and answers using JavaScript const to define questions and their corresponding answers for the quiz application.']}, {'end': 12940.085, 'start': 11800.284, 'title': 'Javascript quiz app development', 'summary': 'Covers the development process of a javascript quiz app, including the creation of functions such as clear status class, set status class, select answer, reset state, show question, set next question, and start game, as well as the implementation of quiz scoring and question shuffling.', 'duration': 1139.801, 'highlights': ['The creation of functions such as clear status class, set status class, select answer, reset state, show question, set next question, and start game. The transcript details the creation and implementation of various functions such as clear status class, set status class, select answer, reset state, show question, set next question, and start game, which are integral to the JavaScript quiz app development.', 'Implementation of quiz scoring and question shuffling. The implementation of quiz scoring and question shuffling is highlighted, showcasing the functionality and interactivity of the JavaScript quiz app.', "Demonstration of the quiz app's functionality through user interactions and question responses. The transcript demonstrates the functionality of the quiz app through interactions such as selecting answers, receiving feedback, and restarting the quiz."]}], 'duration': 2821.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3810118964.jpg', 'highlights': ['The chapter introduces the process of developing a quiz application using HTML, JavaScript, and CSS, creating three files: index.html, app.css, and a script file.', 'The chapter emphasizes the importance of working with these technologies together.', 'The chapter highlights the excitement of developing a project from scratch.', "Creation of div tags with specific IDs and classes, such as 'container', 'question-container', 'answer-buttons', 'controls', and 'score'.", "Addition of a script tag 'script.js' in the HTML page, indicating the inclusion of scripting functionality.", 'Setting specific HSL and pixel values for properties like padding, margin, width, height, background color, border radius, box shadow, and button styles.', 'Creating a set of questions and answers using JavaScript const to define questions and their corresponding answers for the quiz application.', 'The creation of functions such as clear status class, set status class, select answer, reset state, show question, set next question, and start game, integral to the JavaScript quiz app development.', 'Implementation of quiz scoring and question shuffling, showcasing the functionality and interactivity of the JavaScript quiz app.']}, {'end': 14816.458, 'segs': [{'end': 13022.469, 'src': 'embed', 'start': 12988.572, 'weight': 0, 'content': [{'end': 12990.474, 'text': 'we will move on to CSS advanced functions.', 'start': 12988.572, 'duration': 1.902}, {'end': 12992.135, 'text': "So, let's begin.", 'start': 12991.094, 'duration': 1.041}, {'end': 12996.339, 'text': 'In this video, you will learn what are CSS selectors and what are their different types.', 'start': 12993.016, 'duration': 3.323}, {'end': 13002.539, 'text': 'What are CSS selectors? CSS selectors allow you to select and style HTML elements.', 'start': 12996.959, 'duration': 5.58}, {'end': 13009.182, 'text': 'Selectors are used to find elements based on their ID, classes, types, attributes, value of attributes, and much more.', 'start': 13003.079, 'duration': 6.103}, {'end': 13011.403, 'text': "Let's discuss the most common selectors.", 'start': 13009.642, 'duration': 1.761}, {'end': 13013.784, 'text': 'There are several different types of CSS selectors.', 'start': 13012.063, 'duration': 1.721}, {'end': 13022.469, 'text': 'The most common of them are CSS element selectors, CSS ID selector, CSS class selector, CSS universal selector, and CSS group selectors.', 'start': 13014.164, 'duration': 8.305}], 'summary': 'Learn about css selectors and their types, including element, id, class, universal, and group selectors.', 'duration': 33.897, 'max_score': 12988.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3812988572.jpg'}, {'end': 13171.117, 'src': 'embed', 'start': 13140.93, 'weight': 2, 'content': [{'end': 13143.652, 'text': 'The universal selector selects all the elements on a style sheet.', 'start': 13140.93, 'duration': 2.722}, {'end': 13146.234, 'text': 'As you can see, it is denoted by a star mark.', 'start': 13144.352, 'duration': 1.882}, {'end': 13151.117, 'text': 'All the elements inside our web page will be centrally aligned and the color will be set to blue.', 'start': 13146.714, 'duration': 4.403}, {'end': 13155.821, 'text': 'As you can see, all the elements are centrally aligned and the colors are set to blue.', 'start': 13151.838, 'duration': 3.983}, {'end': 13160.945, 'text': 'CSS Group Selector In style sheets, there are often elements using the same style.', 'start': 13156.522, 'duration': 4.423}, {'end': 13163.227, 'text': 'To minimize the code, you can group selectors.', 'start': 13161.365, 'duration': 1.862}, {'end': 13166.456, 'text': 'To group the selectors, separate each selectors with a comma.', 'start': 13163.795, 'duration': 2.661}, {'end': 13171.117, 'text': 'Here, we have grouped selectors for H1, H2 and P.', 'start': 13166.796, 'duration': 4.321}], 'summary': 'Universal selector selects all elements. elements centrally aligned, color set to blue. grouped selectors for h1, h2, and p.', 'duration': 30.187, 'max_score': 13140.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3813140930.jpg'}, {'end': 13284.405, 'src': 'embed', 'start': 13253.596, 'weight': 3, 'content': [{'end': 13256.497, 'text': 'The margin area consists of spaces between the border and the margin.', 'start': 13253.596, 'duration': 2.901}, {'end': 13261.22, 'text': 'The dimensions of the margin area are the margin box width and margin box height.', 'start': 13257.278, 'duration': 3.942}, {'end': 13264.301, 'text': 'It is useful to separate the element from its neighbors.', 'start': 13262.14, 'duration': 2.161}, {'end': 13270.805, 'text': "The padding area is the area that includes the element's padding.", 'start': 13266.823, 'duration': 3.982}, {'end': 13275.087, 'text': 'This area is actually the space around the content area and within the border box.', 'start': 13271.465, 'duration': 3.622}, {'end': 13279.703, 'text': 'Its dimensions are given by the width of the padding box and the height of the padding box.', 'start': 13275.962, 'duration': 3.741}, {'end': 13284.405, 'text': "Now let's jump to an example to understand the box model better.", 'start': 13281.704, 'duration': 2.701}], 'summary': 'The margin area separates elements, while padding area is space around content.', 'duration': 30.809, 'max_score': 13253.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3813253596.jpg'}, {'end': 13331.868, 'src': 'embed', 'start': 13299.37, 'weight': 4, 'content': [{'end': 13304.092, 'text': 'So, as you can see, we have a box named simplylearn with background going all the way to the end.', 'start': 13299.37, 'duration': 4.722}, {'end': 13310.935, 'text': 'I have also removed all the padding and margin from the page so that the boxes are pushed just at the corner of the page.', 'start': 13305.151, 'duration': 5.784}, {'end': 13312.095, 'text': 'As you can see.', 'start': 13311.615, 'duration': 0.48}, {'end': 13315.758, 'text': "Let's start by adding a padding of 20px to the box.", 'start': 13313.296, 'duration': 2.462}, {'end': 13331.868, 'text': 'If you save the file, you can see the box increased by 20px from all the sides.', 'start': 13328.506, 'duration': 3.362}], 'summary': 'Demonstrated removing padding and margin, then adding 20px padding to the box.', 'duration': 32.498, 'max_score': 13299.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3813299370.jpg'}, {'end': 13568.067, 'src': 'embed', 'start': 13529.072, 'weight': 5, 'content': [{'end': 13536.634, 'text': 'It is a two-dimensional system, meaning it can handle both columns and rows, unlike Flexbox which is largely a one-dimensional system.', 'start': 13529.072, 'duration': 7.562}, {'end': 13545.686, 'text': 'You work with grid layout by applying the CSS rules to both the parent element, which become the grid container, and the elements children,', 'start': 13538.12, 'duration': 7.566}, {'end': 13546.847, 'text': 'which become the grid items.', 'start': 13545.686, 'duration': 1.161}, {'end': 13554.432, 'text': 'The CSS grid layout excels at dividing a page into major regions or defining the relationship in terms of size,', 'start': 13548.608, 'duration': 5.824}, {'end': 13558.335, 'text': 'position and layer between parts of a control built HTML primitives.', 'start': 13554.432, 'duration': 3.903}, {'end': 13562.018, 'text': 'You can see this is the basic layout of a grid system.', 'start': 13559.576, 'duration': 2.442}, {'end': 13568.067, 'text': 'Like tables, grid layout enables an author to align elements into columns and rows.', 'start': 13563.263, 'duration': 4.804}], 'summary': 'Css grid layout handles both columns and rows, excels at defining relationships, enables alignment into columns and rows.', 'duration': 38.995, 'max_score': 13529.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3813529072.jpg'}, {'end': 13641.547, 'src': 'embed', 'start': 13592.518, 'weight': 6, 'content': [{'end': 13595.699, 'text': 'You can create a grid with fixed track sizes using pixels.', 'start': 13592.518, 'duration': 3.181}, {'end': 13601.481, 'text': 'For example, this sets the grid to the specified pixel which fits to the layout you desire.', 'start': 13596.519, 'duration': 4.962}, {'end': 13608.623, 'text': 'You can also create a grid using flexible sizes with percentages with the new FR unit designed for this purpose.', 'start': 13602.321, 'duration': 6.302}, {'end': 13617.686, 'text': 'You can place the items into a precise location using the grid line numbers, names or by targeting an area of the grid.', 'start': 13611.204, 'duration': 6.482}, {'end': 13625.639, 'text': 'The grid also contains an algorithm to control the placement of items not given an explicit position on the grid.', 'start': 13618.976, 'duration': 6.663}, {'end': 13630.962, 'text': 'You can define an explicit grid with a grid layout.', 'start': 13625.659, 'duration': 5.303}, {'end': 13636.725, 'text': 'The grid layout specification is flexible enough to add additional rows and columns when needed.', 'start': 13631.642, 'duration': 5.083}, {'end': 13641.547, 'text': 'Features such as adding as many columns that will fit into a container are included.', 'start': 13637.525, 'duration': 4.022}], 'summary': 'Grid layout allows creating fixed or flexible grid with pixels or percentages, and enables precise item placement and flexible specification of additional rows and columns.', 'duration': 49.029, 'max_score': 13592.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3813592518.jpg'}, {'end': 13729.539, 'src': 'embed', 'start': 13697.58, 'weight': 8, 'content': [{'end': 13699.881, 'text': 'The grid cell is the single unit of a CSS grid.', 'start': 13697.58, 'duration': 2.301}, {'end': 13706.305, 'text': 'And in grid design, a gutter is basically the width of the space between columns.', 'start': 13702.683, 'duration': 3.622}, {'end': 13714.93, 'text': 'A gutter margin is the white space formed by the adjoining inside margins of two facing pages in a book or a space between columns on a page.', 'start': 13706.985, 'duration': 7.945}, {'end': 13723.416, 'text': "With this, let's now move on to the hands-on demo and see how the grid system works in actual world.", 'start': 13718.174, 'duration': 5.242}, {'end': 13729.539, 'text': 'So, we are on the Sublime Text Editor, open with a project with some basic background style and nothing inside the body.', 'start': 13723.857, 'duration': 5.682}], 'summary': 'Css grid uses grid cells, gutters, and gutter margins to structure layouts. hands-on demo in sublime text editor.', 'duration': 31.959, 'max_score': 13697.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3813697580.jpg'}, {'end': 14020.562, 'src': 'embed', 'start': 13990.226, 'weight': 11, 'content': [{'end': 13994.107, 'text': 'You can just write repeat command and inside of it how many times you want to repeat the size.', 'start': 13990.226, 'duration': 3.881}, {'end': 14001.589, 'text': "So we'll just delete this and use the repeat.", 'start': 13996.208, 'duration': 5.381}, {'end': 14007.571, 'text': "We'll set the number of times we want to repeat and the size of the columns.", 'start': 14002.83, 'duration': 4.741}, {'end': 14013.233, 'text': 'Now if you save the file, you will see we have a four columns of 100 pixel wide.', 'start': 14009.472, 'duration': 3.761}, {'end': 14015.679, 'text': 'We can do the same things for row.', 'start': 14014.278, 'duration': 1.401}, {'end': 14020.562, 'text': 'Just set the grid template rows and define the size you want.', 'start': 14016.52, 'duration': 4.042}], 'summary': 'Using the repeat command, set the number of times to repeat and the size of the columns, resulting in four columns of 100 pixels wide. similar process can be applied for rows.', 'duration': 30.336, 'max_score': 13990.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3813990226.jpg'}, {'end': 14110.846, 'src': 'embed', 'start': 14079.42, 'weight': 12, 'content': [{'end': 14081.521, 'text': 'Now you can see all the rows are now 100px tall.', 'start': 14079.42, 'duration': 2.101}, {'end': 14089.804, 'text': "Let's change our column back to 100px and 150px so that it will be easier for us further.", 'start': 14084.262, 'duration': 5.542}, {'end': 14099.288, 'text': 'We will just delete this grid auto rows.', 'start': 14089.824, 'duration': 9.464}, {'end': 14105.07, 'text': 'Now we will talk about the spacing of the rows and columns apart from each other.', 'start': 14101.889, 'duration': 3.181}, {'end': 14108.059, 'text': 'We can do this with the help of the GridGap property.', 'start': 14105.993, 'duration': 2.066}, {'end': 14110.846, 'text': 'GridRowGap will give some spaces between the rows.', 'start': 14108.079, 'duration': 2.767}], 'summary': 'Rows are now 100px tall. columns set to 100px and 150px. introducing gridgap property for spacing.', 'duration': 31.426, 'max_score': 14079.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3814079420.jpg'}, {'end': 14220.29, 'src': 'embed', 'start': 14173.072, 'weight': 13, 'content': [{'end': 14175.933, 'text': 'Now you can see the evenly spaces between the rows and the columns.', 'start': 14173.072, 'duration': 2.861}, {'end': 14185.278, 'text': 'This is all you need to know about the sizing of the different columns and rows.', 'start': 14182.336, 'duration': 2.942}, {'end': 14189.08, 'text': "Now let's talk about the positioning items within its grid cells.", 'start': 14186.258, 'duration': 2.822}, {'end': 14193.922, 'text': 'So for horizontal positioning, we could use the justify items and we can set that to center.', 'start': 14189.98, 'duration': 3.942}, {'end': 14217.568, 'text': 'So that centers each item within the cell.', 'start': 14215.526, 'duration': 2.042}, {'end': 14220.29, 'text': 'By default it is set to stretch.', 'start': 14218.668, 'duration': 1.622}], 'summary': 'Explains evenly spaced grid rows and columns. describes horizontal positioning with justify items.', 'duration': 47.218, 'max_score': 14173.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3814173072.jpg'}, {'end': 14660.469, 'src': 'embed', 'start': 14599.992, 'weight': 15, 'content': [{'end': 14601.993, 'text': 'Now to create a flex container.', 'start': 14599.992, 'duration': 2.001}, {'end': 14609.465, 'text': 'We will add display flex to our flex container and this is how we create a flex box container.', 'start': 14603.044, 'duration': 6.421}, {'end': 14615.407, 'text': 'So here we will just add display flex.', 'start': 14610.886, 'duration': 4.521}, {'end': 14617.507, 'text': 'Just save the file.', 'start': 14616.607, 'duration': 0.9}, {'end': 14625.689, 'text': 'Now you can see all the items are in the same height and they are all in the same row.', 'start': 14617.527, 'duration': 8.162}, {'end': 14632.07, 'text': 'You will also notice that if we shrink our browser, the items adjust themselves accordingly to fit within the browser.', 'start': 14626.449, 'duration': 5.621}, {'end': 14642.803, 'text': 'Now if we want to style the elements on the main axis, we will use the property justify content inside a flexbox container.', 'start': 14636.021, 'duration': 6.782}, {'end': 14645.284, 'text': "Let's make it a center.", 'start': 14643.583, 'duration': 1.701}, {'end': 14647.725, 'text': 'Save the file.', 'start': 14647.085, 'duration': 0.64}, {'end': 14652.866, 'text': 'Now you can see that all the elements are in the center of the page.', 'start': 14650.366, 'duration': 2.5}, {'end': 14660.469, 'text': 'Another thing we can do is if we want our layout to have spaces between the elements, we will set the justify content to space between.', 'start': 14653.747, 'duration': 6.722}], 'summary': 'Creating a flex container with display flex, adjusting items to fit browser, styling elements with justify content.', 'duration': 60.477, 'max_score': 14599.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3814599992.jpg'}, {'end': 14720.484, 'src': 'embed', 'start': 14692.285, 'weight': 14, 'content': [{'end': 14694.126, 'text': 'With Flexbox, you can do it easily.', 'start': 14692.285, 'duration': 1.841}, {'end': 14702.391, 'text': 'Now you can see the items are aligned vertically inside the container.', 'start': 14699.008, 'duration': 3.383}, {'end': 14706.454, 'text': "Now let's just delete everything and we'll just keep the display flex.", 'start': 14703.151, 'duration': 3.303}, {'end': 14716.441, 'text': "Now if you want to have a column layout instead, we'll use the flex direction and change it to column flex direction column.", 'start': 14710.116, 'duration': 6.325}, {'end': 14720.484, 'text': 'Now if you refresh the page, you will see all the items are shown up in a column.', 'start': 14716.941, 'duration': 3.543}], 'summary': 'Flexbox allows easy vertical alignment, switching to column layout showed all items in a column', 'duration': 28.199, 'max_score': 14692.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3814692285.jpg'}, {'end': 14816.458, 'src': 'embed', 'start': 14736.066, 'weight': 17, 'content': [{'end': 14742.29, 'text': 'The actual flexbox item properties are used to override those item properties or to apply different sizing to these elements.', 'start': 14736.066, 'duration': 6.224}, {'end': 14749.516, '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': 14742.771, 'duration': 6.745}, {'end': 14755.02, 'text': "So, we'll set the flex shrink to zero.", 'start': 14751.157, 'duration': 3.863}, {'end': 14765.235, 'text': 'Now, if you go back to the page, and try to shrink this, you will see the first item remains the same.', 'start': 14756.161, 'duration': 9.074}, {'end': 14766.135, 'text': 'It does not shrink.', 'start': 14765.355, 'duration': 0.78}, {'end': 14773.458, 'text': 'Now, in the same way you can set the items to grow in proportion with the web browser.', 'start': 14767.736, 'duration': 5.722}, {'end': 14779.92, 'text': 'Suppose we want our flexbox-item to grow as the page grows and cover all the empty spaces.', 'start': 14774.098, 'duration': 5.822}, {'end': 14785.211, 'text': 'So we will set this flex-grow to 1.', 'start': 14780.56, 'duration': 4.651}, {'end': 14789.214, 'text': 'You will see all the empty spaces are taken by the second item.', 'start': 14785.211, 'duration': 4.003}, {'end': 14794.537, 'text': "Let's say we want the second box to be the center of the container instead of stretching to full height.", 'start': 14790.054, 'duration': 4.483}, {'end': 14797.84, 'text': 'We can use the align self property and set it to center.', 'start': 14795.198, 'duration': 2.642}, {'end': 14811.689, 'text': 'Now you will see that the align self property overrides the align content property of the container.', 'start': 14807.146, 'duration': 4.543}, {'end': 14816.458, 'text': 'You can see it is centrally aligned.', 'start': 14815.077, 'duration': 1.381}], 'summary': 'Flexbox items can be controlled using flex shrink, flex grow, and align self properties to adjust their sizing and positioning.', 'duration': 80.392, 'max_score': 14736.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3814736066.jpg'}], 'start': 12940.085, 'title': 'Css fundamentals and layouts', 'summary': 'Provides a comprehensive understanding of css fundamentals, including selectors, box model, grid layout, and flexbox, with detailed explanations and examples. it also delves into specific topics such as the css box model properties, css grid layout features and terminologies, creating grid layouts, and the basics of flexbox layout.', 'chapters': [{'end': 13184.419, 'start': 12940.085, 'title': 'Understanding css selectors', 'summary': 'Covers the basics of css, including selectors, box model, grid layout, flexbox, and advanced functions, with detailed explanations and examples, providing a comprehensive understanding of css.', 'duration': 244.334, 'highlights': ['CSS selectors allow you to select and style HTML elements based on their ID, classes, types, attributes, value of attributes, and much more. CSS selectors provide a flexible way to style HTML elements based on various criteria, enhancing the design and user experience.', 'The most common types of CSS selectors include element selectors, ID selectors, class selectors, universal selectors, and group selectors. Understanding the different types of CSS selectors empowers designers to efficiently target and style specific elements within a web page.', 'The universal selector selects all the elements on a page, while the group selector allows grouping of selectors to minimize code repetition. Utilizing the universal selector and group selector optimizes the styling process by applying styles to all elements and grouping selectors to minimize code redundancy.']}, {'end': 13476.257, 'start': 13185.34, 'title': 'Understanding css box model', 'summary': 'Discusses the css box model, including its various properties such as content area, padding, border, and margin, and provides an example demonstrating the impact of changing these properties on a web page layout.', 'duration': 290.917, 'highlights': ['The box model includes content area, padding, border, and margin, which can be manipulated to affect the layout of web page elements. The CSS box model consists of content area, padding, border, and margin, which can be adjusted to influence the layout of web page elements.', 'Changing the padding, border, and margin properties directly impacts the dimensions and spacing of the element on the web page. Manipulating the padding, border, and margin properties directly affects the dimensions and spacing of the element on the web page.', 'The example demonstrates the impact of adding padding, changing the border size, and setting the margin on the layout and appearance of the box element. The provided example showcases the effects of adding padding, adjusting the border size, and setting the margin on the layout and appearance of the box element.']}, {'end': 13723.416, 'start': 13480.595, 'title': 'Understanding css grid layout', 'summary': 'Discusses the features and terminologies of css grid layout, including the ability to handle both fixed and flexible track sizes, control item placement, and understand key terminologies like grid lines, grid columns, grid rows, grid cells, gutter, and gutter margin.', 'duration': 242.821, 'highlights': ['CSS grid layout is a two-dimensional system, meaning it can handle both columns and rows, unlike Flexbox which is largely a one-dimensional system. It is highlighted that CSS grid layout is a powerful two-dimensional system that can handle both columns and rows, unlike the one-dimensional nature of Flexbox.', 'You can create a grid with fixed track sizes using pixels or flexible sizes with percentages using the FR unit. The feature of creating a grid with fixed track sizes using pixels or flexible sizes with percentages using the FR unit is emphasized.', 'The grid layout specification is flexible enough to add additional rows and columns when needed. The flexibility of the grid layout specification to add additional rows and columns when needed is highlighted.', 'The basic terminologies of the grid system, including grid lines, grid columns, grid rows, grid cells, gutter, and gutter margin, are explained. The explanation of key terminologies of the grid system, such as grid lines, grid columns, grid rows, grid cells, gutter, and gutter margin, is outlined.']}, {'end': 14363.882, 'start': 13723.857, 'title': 'Grid layout and positioning in css', 'summary': 'Covers creating a grid layout with specified columns and rows using css, including setting the size using pixels and fractions, using repeat command, managing spacing between rows and columns, and positioning items within grid cells horizontally and vertically.', 'duration': 640.025, 'highlights': ['Creating a grid layout with specified columns and rows using CSS The tutorial demonstrates creating a grid layout with specified columns and rows using CSS to organize the web content.', 'Setting the size using pixels and fractions The tutorial explains setting the size of columns and rows using pixels and fractions, demonstrating how to use fr unit for flexible sizing.', 'Using repeat command for defining column size The tutorial illustrates the usage of the repeat command to define the size of columns, showcasing an example of creating four columns of a specific size.', 'Managing spacing between rows and columns The tutorial covers managing the spacing between rows and columns using the GridGap property, demonstrating how to evenly space the rows and columns.', 'Positioning items within grid cells horizontally and vertically The tutorial explains how to horizontally and vertically position items within grid cells using justify items, align items, justify content, and align content properties in CSS.']}, {'end': 14816.458, 'start': 14377.022, 'title': 'Flexbox layout basics', 'summary': 'Introduces the basics of flexbox layout, explaining its properties and their practical application, including aligning elements, creating flex containers, and adjusting item sizing and positioning.', 'duration': 439.436, 'highlights': ['Flexbox layout allows easy arrangement of items within a container with properties like flex direction, justify content, and align items. Flexbox provides an easy and clean way to arrange items within a container, with properties like flex direction, justify content, and align items.', "Creating a flex container with 'display: flex' results in all items being in the same row with equal height, adjusting themselves to fit within the browser. Adding 'display: flex' to create a flex container results in all items being in the same row with equal height, adjusting themselves to fit within the browser.", "Use of 'justify content' property for styling elements on the main axis, like centering or adding space between elements. The 'justify content' property is used for styling elements on the main axis, allowing for actions like centering or adding space between elements.", "Practical demonstration of setting 'flex shrink' to zero for an item to prevent it from shrinking when the browser size is reduced. Setting 'flex shrink' to zero for an item prevents it from shrinking when the browser size is reduced.", "Illustration of using the 'flex-grow' property to make an item grow in proportion with the web browser, covering all empty spaces. Setting 'flex-grow' to 1 for an item makes it grow in proportion with the web browser, covering all empty spaces.", "Utilizing the 'align self' property to override the align content property and center an item within the container. The 'align self' property overrides the align content property and centers an item within the container."]}], 'duration': 1876.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3812940085.jpg', 'highlights': ['CSS selectors provide a flexible way to style HTML elements based on various criteria, enhancing the design and user experience.', 'Understanding the different types of CSS selectors empowers designers to efficiently target and style specific elements within a web page.', 'Utilizing the universal selector and group selector optimizes the styling process by applying styles to all elements and grouping selectors to minimize code redundancy.', 'Manipulating the padding, border, and margin properties directly affects the dimensions and spacing of the element on the web page.', 'The provided example showcases the effects of adding padding, adjusting the border size, and setting the margin on the layout and appearance of the box element.', 'CSS grid layout is a powerful two-dimensional system that can handle both columns and rows, unlike the one-dimensional nature of Flexbox.', 'The feature of creating a grid with fixed track sizes using pixels or flexible sizes with percentages using the FR unit is emphasized.', 'The flexibility of the grid layout specification to add additional rows and columns when needed is highlighted.', 'The explanation of key terminologies of the grid system, such as grid lines, grid columns, grid rows, grid cells, gutter, and gutter margin, is outlined.', 'The tutorial demonstrates creating a grid layout with specified columns and rows using CSS to organize the web content.', 'The tutorial explains setting the size of columns and rows using pixels and fractions, demonstrating how to use fr unit for flexible sizing.', 'The tutorial illustrates the usage of the repeat command to define the size of columns, showcasing an example of creating four columns of a specific size.', 'The tutorial covers managing the spacing between rows and columns using the GridGap property, demonstrating how to evenly space the rows and columns.', 'The tutorial explains how to horizontally and vertically position items within grid cells using justify items, align items, justify content, and align content properties in CSS.', 'Flexbox provides an easy and clean way to arrange items within a container, with properties like flex direction, justify content, and align items.', "Adding 'display: flex' to create a flex container results in all items being in the same row with equal height, adjusting themselves to fit within the browser.", "The 'justify content' property is used for styling elements on the main axis, allowing for actions like centering or adding space between elements.", "Setting 'flex shrink' to zero for an item prevents it from shrinking when the browser size is reduced.", "Setting 'flex-grow' to 1 for an item makes it grow in proportion with the web browser, covering all empty spaces.", "The 'align self' property overrides the align content property and centers an item within the container."]}, {'end': 16140.614, 'segs': [{'end': 14872.372, 'src': 'embed', 'start': 14836.833, 'weight': 3, 'content': [{'end': 14839.335, 'text': "So, without wasting any time, let's get started.", 'start': 14836.833, 'duration': 2.502}, {'end': 14847.387, 'text': 'So, what is a display property? The CSS display property controls the layout of the element on the page.', 'start': 14840.897, 'duration': 6.49}, {'end': 14851.368, 'text': 'The default value of the display property is block or inline.', 'start': 14848.227, 'duration': 3.141}, {'end': 14858.349, 'text': "Let's jump back to our Sublime Text Editor to see the various display properties by using an example.", 'start': 14852.828, 'duration': 5.521}, {'end': 14861.55, 'text': 'To get started, I have a really simple example setup.', 'start': 14858.889, 'duration': 2.661}, {'end': 14872.372, 'text': 'As you can see, inside my HTML, I have the two paragraph tags and I have a formatting with a background color of cyan color and font size 30 pixels.', 'start': 14862.41, 'duration': 9.962}], 'summary': 'Css display property controls element layout on a page.', 'duration': 35.539, 'max_score': 14836.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3814836833.jpg'}, {'end': 15077.642, 'src': 'embed', 'start': 15048.588, 'weight': 4, 'content': [{'end': 15053.794, 'text': 'Now, if you go back to the page and refresh, you will see the height and width property works.', 'start': 15048.588, 'duration': 5.206}, {'end': 15058.615, 'text': 'This is one of the major difference between the inline block and the inline display property.', 'start': 15054.414, 'duration': 4.201}, {'end': 15069.239, 'text': 'The last name type of display we are going to discuss is the display none and this is a really straight forward display property.', 'start': 15063.177, 'duration': 6.062}, {'end': 15077.642, 'text': 'We just delete this and change the display to display none.', 'start': 15069.259, 'duration': 8.383}], 'summary': 'Comparison of height and width property in inline block vs. inline display, and the straightforward display none property.', 'duration': 29.054, 'max_score': 15048.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3815048588.jpg'}, {'end': 15153.12, 'src': 'embed', 'start': 15127.187, 'weight': 2, 'content': [{'end': 15136.27, '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': 15127.187, 'duration': 9.083}, {'end': 15143.513, 'text': 'The top, right, bottom and the left CSS position properties are used to determine the final location of the element.', 'start': 15136.99, 'duration': 6.523}, {'end': 15149.237, 'text': 'There are four values that you can use to set the position of an element on a web page.', 'start': 15145.334, 'duration': 3.903}, {'end': 15153.12, 'text': 'They are static, fixed, relative and absolute.', 'start': 15149.858, 'duration': 3.262}], 'summary': 'Css position property defines element position with top, right, bottom, and left properties using static, fixed, relative, and absolute values.', 'duration': 25.933, 'max_score': 15127.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3815127187.jpg'}, {'end': 15598.306, 'src': 'embed', 'start': 15551.504, 'weight': 0, 'content': [{'end': 15556.826, 'text': "In this video, we'll discuss the differences between both the layouts and we'll discuss which one you should use.", 'start': 15551.504, 'duration': 5.322}, {'end': 15562.909, 'text': 'I will also show you both the layouts in a practical example without diving too deep.', 'start': 15558.086, 'duration': 4.823}, {'end': 15565.33, 'text': "So let's first understand the theory.", 'start': 15563.789, 'duration': 1.541}, {'end': 15575.494, 'text': 'CSS Grid allows developers to construct custom grids with more flexibility and control than ever before.', 'start': 15570.452, 'duration': 5.042}, {'end': 15578.057, 'text': 'It is for two dimensional positioning.', 'start': 15576.576, 'duration': 1.481}, {'end': 15579.818, 'text': 'We got rows and columns here.', 'start': 15578.317, 'duration': 1.501}, {'end': 15583.319, 'text': 'Whereas flexbox is for one dimensional layout.', 'start': 15581.318, 'duration': 2.001}, {'end': 15587.781, 'text': 'It is useful in allocating and aligning the spaces among the items in a grid container.', 'start': 15583.959, 'duration': 3.822}, {'end': 15592.983, 'text': 'The flexbox layout pattern makes it easier to design flexible and effective layouts.', 'start': 15588.201, 'duration': 4.782}, {'end': 15598.306, 'text': 'The grid is used for creating a more complex and organized layout on your pages.', 'start': 15594.704, 'duration': 3.602}], 'summary': 'Css grid offers more flexibility than flexbox, useful for 2d positioning, while flexbox is for 1d layout and aligning spaces. both layouts have different applications.', 'duration': 46.802, 'max_score': 15551.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3815551504.jpg'}, {'end': 15829.729, 'src': 'embed', 'start': 15797.099, 'weight': 5, 'content': [{'end': 15798.72, 'text': 'This is where the Flexbox comes into play.', 'start': 15797.099, 'duration': 1.621}, {'end': 15803.242, 'text': 'As discussed earlier, Flexbox is about positioning elements in a one-dimensional area.', 'start': 15799.28, 'duration': 3.962}, {'end': 15812.216, 'text': "So what we'll do is we'll go back to our navigation list class here and will add display as flex.", 'start': 15804.283, 'duration': 7.933}, {'end': 15821.823, 'text': 'Now if you save the file and reload, you can see these are sitting next to each other.', 'start': 15814.898, 'duration': 6.925}, {'end': 15825.385, 'text': 'By default, the display sets them into the rows.', 'start': 15822.723, 'duration': 2.662}, {'end': 15829.729, 'text': 'Now we want the contents to be in the center of the main axis.', 'start': 15826.826, 'duration': 2.903}], 'summary': 'Flexbox allows positioning elements in a one-dimensional area, setting them into rows and centering the contents on the main axis.', 'duration': 32.63, 'max_score': 15797.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3815797099.jpg'}], 'start': 14817.679, 'title': 'Css layout and positioning', 'summary': 'Covers css display properties including block, inline, and inline-block values, css positioning with static, fixed, relative, and absolute positioning, and differences between css grid and flexbox layouts, with practical examples and outcomes.', 'chapters': [{'end': 15077.642, 'start': 14817.679, 'title': 'Understanding css display properties', 'summary': 'Covers the css display property, discussing block, inline, and inline-block values, with examples and their impact on element layout, including the ability to change width and height, and the display none property.', 'duration': 259.963, 'highlights': ['The display property in CSS controls the layout of the element on the page, with default values as block or inline, and the chapter provides examples of how different display properties impact the layout.', 'The chapter explains the display block property, which makes an element a block element, starting a new line and spanning the entire width of the viewport, with line breaks before and after the elements.', 'It details the display inline property, turning elements into inline elements that appear on the same line without breaks and take the minimum amount of space possible, while not allowing changes in height and width.', 'The inline block value, a hybrid of inline and block elements, is discussed, highlighting its ability to appear on the same line as other inline elements while enabling changes in width and height.', 'The chapter concludes by introducing the display none property, which straightforwardly hides the element from the page.']}, {'end': 15275.89, 'start': 15084.062, 'title': 'Css positioning explained', 'summary': 'Covers css positioning, discussing the position property and its four values, and provides examples to understand static, fixed, relative, and absolute positioning, helping you to position elements in css like a pro.', 'duration': 191.828, 'highlights': ['The CSS position property allows you to define the position of an element on a web page, using top, right, bottom, and left properties to determine the final location of the element.', 'The chapter explains the four values of the CSS position property: static, fixed, relative, and absolute, providing a comprehensive understanding of each.', 'It details the behavior and use cases of each positioning property, such as the default static position, fixed positioning, relative positioning, and absolute positioning relative to the first parent element with a position other than static.', 'The chapter concludes by providing practical examples to demonstrate the properties, enabling viewers to inspect the position of elements and understand their placement on a web page.']}, {'end': 15551.043, 'start': 15278.951, 'title': 'Css positioning explained', 'summary': 'Explains the different css positioning properties - static, relative, absolute, and fixed, including their distinct behaviors and use cases, with practical examples demonstrating their impact on element positioning and document flow.', 'duration': 272.092, 'highlights': ['Fixed positioning keeps the element in the same place when scrolling, unlike absolute positioning. Fixed position elements stay in the same place when the page is scrolled, demonstrated by the element remaining fixed after scrolling, unlike absolute positioning.', "Absolute positioning removes the element from the document flow and positions it inside a parent container. Absolute positioning removes the element from the document flow and positions it inside a parent container, effectively illustrating the element's detachment from the document flow and its positioning within a specific container.", "Relative positioning allows for adjustments to top, left, right, and bottom, affecting the element's position without disturbing other elements. Relative positioning permits adjustments to the top, left, right, and bottom, showcasing the element's movement without affecting other elements and its capability to overflow its original position.", "Static is the default position for all elements, while relative functions similarly but allows changes to the top, left, right, and bottom. Static serves as the default position for all elements, while relative operates similarly but permits alterations to the top, left, right, and bottom, as demonstrated by the element's movement based on the specified position values."]}, {'end': 15907.977, 'start': 15551.504, 'title': 'Css grid vs flexbox layouts', 'summary': 'Discusses the differences between css grid and flexbox layouts, their practical applications, and demonstrates their usage through a webpage example, emphasizing the two-dimensional positioning of css grid and the one-dimensional layout of flexbox.', 'duration': 356.473, 'highlights': ['CSS Grid allows developers to construct custom grids with more flexibility and control than ever before, enabling two-dimensional positioning with rows and columns, while Flexbox is for one-dimensional layout, providing easier design of flexible and effective layouts. CSS Grid offers more flexibility and control for constructing custom grids, enabling two-dimensional positioning with rows and columns. Flexbox, on the other hand, is designed for one-dimensional layout, making it easier to create flexible and effective layouts.', 'Demonstrates the practical application of CSS Grid by creating a 2D layout for a webpage, adjusting the grid template columns and rows to allocate space for different sections like sidebar, main content, and footer. The practical application of CSS Grid is demonstrated by creating a 2D layout for a webpage, adjusting the grid template columns and rows to allocate space for different sections like sidebar, main content, and footer.', 'Illustrates the usage of Flexbox to position elements in a one-dimensional area, centering them both horizontally and vertically using justify content and align items properties. The usage of Flexbox is illustrated to position elements in a one-dimensional area, centering them both horizontally and vertically using justify content and align items properties.']}, {'end': 16140.614, 'start': 15910.748, 'title': 'Setting background image in css', 'summary': 'Explains how to set a background image on a web page using css, covering the properties and values for background image, size, and repeat, and demonstrating the impact of each value on the appearance of the image, with specific examples and outcomes.', 'duration': 229.866, 'highlights': ['The background image property specifies an image to use as a background of an element, typically defined in the body element of the HTML code.', 'The chapter demonstrates setting the background image using the URL attribute and mentions the path of the image inside the URL attribute, emphasizing the importance of ensuring the image is in the same folder as the HTML file.', 'It explains the three values for background size - Auto, Cover, and Manual, illustrating the visual outcomes on the web page for each value, with specific examples and outcomes.', 'The chapter covers the three values for background repeat - No Repeat, Repeat X, and Repeat Y, demonstrating their impact on the repetition of images on the web page, with specific examples and outcomes.']}], 'duration': 1322.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3814817679.jpg', 'highlights': ['CSS Grid offers more flexibility and control for constructing custom grids, enabling two-dimensional positioning with rows and columns.', 'The practical application of CSS Grid is demonstrated by creating a 2D layout for a webpage, adjusting the grid template columns and rows to allocate space for different sections like sidebar, main content, and footer.', 'The chapter explains the four values of the CSS position property: static, fixed, relative, and absolute, providing a comprehensive understanding of each.', 'The display property in CSS controls the layout of the element on the page, with default values as block or inline, and the chapter provides examples of how different display properties impact the layout.', 'The chapter concludes by introducing the display none property, which straightforwardly hides the element from the page.', 'The usage of Flexbox is illustrated to position elements in a one-dimensional area, centering them both horizontally and vertically using justify content and align items properties.']}, {'end': 19436.247, 'segs': [{'end': 16237.661, 'src': 'embed', 'start': 16200.376, 'weight': 0, 'content': [{'end': 16205.34, 'text': 'As you can see, we have a text above our image which is centrally aligned and the text color is red.', 'start': 16200.376, 'duration': 4.964}, {'end': 16209.823, 'text': 'In this tutorial, we will learn how we can add colors to our page using different methods.', 'start': 16206, 'duration': 3.823}, {'end': 16214.666, 'text': 'We will start with discussing colors and then see the hex value and RGB format of the colors.', 'start': 16210.383, 'duration': 4.283}, {'end': 16218.769, 'text': 'In the end, we will do an example to understand how we can add colors to our page.', 'start': 16215.327, 'duration': 3.442}, {'end': 16222.612, 'text': 'CSS uses the color values to specify the colors on a page.', 'start': 16219.79, 'duration': 2.822}, {'end': 16227.115, 'text': 'They can be specified using predefined color names, hex or RGB format.', 'start': 16223.473, 'duration': 3.642}, {'end': 16229.357, 'text': 'They are nearly 140 standard color names.', 'start': 16227.616, 'duration': 1.741}, {'end': 16232.358, 'text': 'Hexadecimal is a six digit representation of a color.', 'start': 16230.017, 'duration': 2.341}, {'end': 16237.661, 'text': 'The first two digits RR represents the red value, the next two are green value and the last is the blue value.', 'start': 16232.899, 'duration': 4.762}], 'summary': 'Tutorial on adding colors to web pages, covering color methods, 140 standard color names, and hexadecimal representation.', 'duration': 37.285, 'max_score': 16200.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3816200376.jpg'}, {'end': 16775.266, 'src': 'embed', 'start': 16745.369, 'weight': 7, 'content': [{'end': 16748.532, 'text': 'As you can see, there are lots of interesting things you can do with the keyframes.', 'start': 16745.369, 'duration': 3.163}, {'end': 16752.314, 'text': 'All of the things that I am showing you today are just like how this works.', 'start': 16749.512, 'duration': 2.802}, {'end': 16757.82, 'text': 'To really get a great understanding of how it works, you just have to open your editor and start experimenting on it.', 'start': 16753.056, 'duration': 4.764}, {'end': 16762.844, 'text': "Okay, so now let's go back to our code and learn about the animation property.", 'start': 16759.44, 'duration': 3.404}, {'end': 16766.821, 'text': 'So, here we have the animation named MyFrames.', 'start': 16764.54, 'duration': 2.281}, {'end': 16770.924, 'text': 'The animation name should be as same as keyframes name to work it properly.', 'start': 16767.862, 'duration': 3.062}, {'end': 16775.266, 'text': 'The animation duration specifies for how long we want our animation to last.', 'start': 16772.024, 'duration': 3.242}], 'summary': 'Keyframes offer various animation options, including duration and naming conventions.', 'duration': 29.897, 'max_score': 16745.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3816745368.jpg'}, {'end': 16989.896, 'src': 'embed', 'start': 16961.974, 'weight': 5, 'content': [{'end': 16967.199, 'text': 'So just like the transition property, we have the several properties in the CSS animation as well.', 'start': 16961.974, 'duration': 5.225}, {'end': 16972.303, 'text': 'This consists of like timing function, fill in mode and several other functions in the CSS animation.', 'start': 16967.799, 'duration': 4.504}, {'end': 16978.193, 'text': 'So, to convert the transition into animation, all we need to do is write the word animation.', 'start': 16973.632, 'duration': 4.561}, {'end': 16981.054, 'text': 'And you write the animation where you want it to happen.', 'start': 16978.793, 'duration': 2.261}, {'end': 16985.295, 'text': 'In our case, here is our hover, so we write the animation here.', 'start': 16981.654, 'duration': 3.641}, {'end': 16989.896, 'text': 'And as you write, you will notice that you have more properties in animation than transition.', 'start': 16985.855, 'duration': 4.041}], 'summary': 'Css animation has more properties than transition, including timing function and fill mode.', 'duration': 27.922, 'max_score': 16961.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3816961974.jpg'}, {'end': 17280.118, 'src': 'embed', 'start': 17232.484, 'weight': 8, 'content': [{'end': 17237.227, 'text': "So here at the keyframes, we just delete this and we'll start with 0%.", 'start': 17232.484, 'duration': 4.743}, {'end': 17254.686, 'text': 'So here at the 0%, We will set the transform and translate x to 0.', 'start': 17237.227, 'duration': 17.459}, {'end': 17261.912, 'text': 'After that, at the 33%, we want this box to move down.', 'start': 17254.686, 'duration': 7.226}, {'end': 17264.514, 'text': 'So, we will work on translate y.', 'start': 17262.272, 'duration': 2.242}, {'end': 17268.957, 'text': 'So, we will translate the y to 100%.', 'start': 17264.514, 'duration': 4.443}, {'end': 17280.118, 'text': 'At 66%, We want both the x-axis and y-axis to move from here to this side.', 'start': 17268.957, 'duration': 11.161}], 'summary': 'Animating keyframes: 0% transform x=0, 33% translate y=100%, 66% move x and y-axis.', 'duration': 47.634, 'max_score': 17232.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3817232484.jpg'}, {'end': 17401.489, 'src': 'embed', 'start': 17339.246, 'weight': 12, 'content': [{'end': 17350.689, 'text': 'when you go back and refresh, you can see the box move little bit slower.', 'start': 17339.246, 'duration': 11.443}, {'end': 17354.371, 'text': 'so with the animation property we can go a step further.', 'start': 17350.689, 'duration': 3.682}, {'end': 17360.672, 'text': 'we can tell our animation how many times to repeat the order of the animation, among other things.', 'start': 17354.371, 'duration': 6.301}, {'end': 17366.314, 'text': 'so the animation iteration count property specifies the number of times an animation should be played.', 'start': 17360.672, 'duration': 5.642}, {'end': 17368.635, 'text': "let's set it to 3.", 'start': 17366.314, 'duration': 2.321}, {'end': 17375.825, 'text': 'so here we will set the animation iteration count to 3..', 'start': 17368.635, 'duration': 7.19}, {'end': 17381.567, 'text': 'The animation direction property defines whether an animation should be played forwards, backwards or in alternate cycles.', 'start': 17375.825, 'duration': 5.742}, {'end': 17385.649, 'text': 'So, for the animation direction, we will set it to alternate.', 'start': 17382.388, 'duration': 3.261}, {'end': 17401.489, 'text': "Now, if you save and go back, that's 1,, 2, and three.", 'start': 17387.27, 'duration': 14.219}], 'summary': 'Setting animation iteration count to 3 and direction to alternate resulted in 3 cycles of animation.', 'duration': 62.243, 'max_score': 17339.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3817339246.jpg'}, {'end': 17457.923, 'src': 'embed', 'start': 17429.44, 'weight': 9, 'content': [{'end': 17433.462, 'text': 'You can add more complex animations to the page with the help of this animation property.', 'start': 17429.44, 'duration': 4.022}, {'end': 17438.084, 'text': 'The CSS transition property is the simplest way to add the animation to our website.', 'start': 17434.222, 'duration': 3.862}, {'end': 17441.026, 'text': 'And in this video, we are going to see how to use it.', 'start': 17438.785, 'duration': 2.241}, {'end': 17445.509, 'text': 'So, animation is a good way to catch attention on the page.', 'start': 17442.467, 'duration': 3.042}, {'end': 17448.35, 'text': 'And if done properly, it increases the user experience.', 'start': 17445.929, 'duration': 2.421}, {'end': 17451.612, 'text': 'The most basic way to animate something is by transition.', 'start': 17449.171, 'duration': 2.441}, {'end': 17457.923, 'text': 'According to the MDN definition, transition enables you to define the transition between two states of an element.', 'start': 17452.54, 'duration': 5.383}], 'summary': 'Css transition property is a simple way to add animations to a website, improving user experience.', 'duration': 28.483, 'max_score': 17429.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3817429440.jpg'}, {'end': 17668.807, 'src': 'embed', 'start': 17625.351, 'weight': 11, 'content': [{'end': 17630.754, 'text': 'Ease means it specifies the transition effect with a slow start and then fast and then end slowly.', 'start': 17625.351, 'duration': 5.403}, {'end': 17636.496, 'text': 'Suppose here we set the transition timing function.', 'start': 17631.714, 'duration': 4.782}, {'end': 17647.855, 'text': 'to ease.', 'start': 17647.295, 'duration': 0.56}, {'end': 17656.68, 'text': 'There are four major values for this timing function.', 'start': 17654.499, 'duration': 2.181}, {'end': 17660.222, 'text': 'They are ease, linear, ease in and ease out.', 'start': 17657.181, 'duration': 3.041}, {'end': 17662.684, 'text': "Let's see one by one in detail.", 'start': 17661.243, 'duration': 1.441}, {'end': 17668.807, 'text': 'So, the linear function specifies the transition effect with the same speed from start to end.', 'start': 17663.584, 'duration': 5.223}], 'summary': 'Transition timing functions like ease, linear, ease in, and ease out control the speed of transition effects.', 'duration': 43.456, 'max_score': 17625.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3817625351.jpg'}, {'end': 17739.86, 'src': 'embed', 'start': 17705.419, 'weight': 16, 'content': [{'end': 17712.198, 'text': 'So if you set it to ease out You will see at the end the speed decreases.', 'start': 17705.419, 'duration': 6.779}, {'end': 17717.322, 'text': 'The last property we are going to discuss is the transition delay.', 'start': 17714.72, 'duration': 2.602}, {'end': 17721.625, 'text': 'The transition delay property specifies when the transition effect will start.', 'start': 17717.942, 'duration': 3.683}, {'end': 17725.769, 'text': 'The transition delay value is defined in milliseconds or in seconds.', 'start': 17722.666, 'duration': 3.103}, {'end': 17739.86, 'text': "Let's set the transition delay to 2 seconds and just remove this.", 'start': 17727.07, 'duration': 12.79}], 'summary': 'Transition delay property sets start time, eases out speed, and defined in milliseconds or seconds.', 'duration': 34.441, 'max_score': 17705.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3817705419.jpg'}, {'end': 17829.766, 'src': 'embed', 'start': 17789.343, 'weight': 3, 'content': [{'end': 17794.806, 'text': 'Is it as simple as it can be? In this video, you will learn how to add interactive hover effects to our elements.', 'start': 17789.343, 'duration': 5.463}, {'end': 17798.308, 'text': 'We will do an example where we will create hover effects to our buttons.', 'start': 17795.587, 'duration': 2.721}, {'end': 17804.612, 'text': 'So, in this tutorial, we will discuss what is a CSS hover effect and then we will do an example to understand it better.', 'start': 17799.209, 'duration': 5.403}, {'end': 17806.953, 'text': 'So what is a CSS hover effect?', 'start': 17805.512, 'duration': 1.441}, {'end': 17814.758, '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': 17808.254, 'duration': 6.504}, {'end': 17818.704, 'text': 'It is triggered when the user hovers over an element with a pointing device.', 'start': 17815.703, 'duration': 3.001}, {'end': 17821.244, 'text': "Now let's jump to an example.", 'start': 17820.044, 'duration': 1.2}, {'end': 17827.006, 'text': 'In this example, we will create the hover effect which will look something like this.', 'start': 17823.585, 'duration': 3.421}, {'end': 17829.766, 'text': 'We have different hover effects for all the buttons.', 'start': 17827.646, 'duration': 2.12}], 'summary': 'Learn to add interactive hover effects to elements with css. example demonstrates different hover effects for buttons.', 'duration': 40.423, 'max_score': 17789.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3817789343.jpg'}, {'end': 19073.432, 'src': 'embed', 'start': 19042.926, 'weight': 1, 'content': [{'end': 19048.568, 'text': 'so if you refresh and hover over it now, you can see the image has a 3d over effect over it.', 'start': 19042.926, 'duration': 5.642}, {'end': 19054.931, 'text': 'there are four layers to the image and we have designed the opacity according to the image layer.', 'start': 19048.568, 'duration': 6.363}, {'end': 19056.191, 'text': 'so this is a 3d image, hover.', 'start': 19054.931, 'duration': 1.26}, {'end': 19063.784, 'text': 'The next property we are going to discuss is a 3D perspective image.', 'start': 19060.782, 'duration': 3.002}, {'end': 19066.967, 'text': "For this, let's use a new set of images.", 'start': 19064.945, 'duration': 2.022}, {'end': 19073.432, 'text': "So we'll go back to the unsplash.com again and let's select one image.", 'start': 19068.348, 'duration': 5.084}], 'summary': 'The discussion covers implementing a 3d hover effect and 3d perspective image using multiple image layers and opacity adjustments.', 'duration': 30.506, 'max_score': 19042.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3819042926.jpg'}, {'end': 19436.247, 'src': 'embed', 'start': 19385.391, 'weight': 18, 'content': [{'end': 19388.873, 'text': 'So as you can see the image is flat and ready for the 3D effect.', 'start': 19385.391, 'duration': 3.482}, {'end': 19392.356, 'text': "Now let's design the 3D hover effect on it.", 'start': 19389.634, 'duration': 2.722}, {'end': 19404.386, 'text': "So for the 3D hover effect we'll use the hover property image colon hover over the image.", 'start': 19395.539, 'duration': 8.847}, {'end': 19426.184, 'text': "We'll set the transform rotate x 0 degrees, rotate set to 0 degrees and translate 3d to 0 pixels.", 'start': 19405.768, 'duration': 20.416}, {'end': 19428.605, 'text': 'comma 0 pixels.', 'start': 19426.184, 'duration': 2.421}, {'end': 19430.345, 'text': 'comma 0 pixels.', 'start': 19428.605, 'duration': 1.74}, {'end': 19433.886, 'text': "let's check this once again.", 'start': 19430.345, 'duration': 3.541}, {'end': 19436.247, 'text': 'this is right now.', 'start': 19433.886, 'duration': 2.361}], 'summary': 'Designing a 3d hover effect for a flat image.', 'duration': 50.856, 'max_score': 19385.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3819385391.jpg'}], 'start': 16142.97, 'title': 'Css animation and hover effects', 'summary': 'Covers adding colors to web pages using color names, hex values, and rgb format, discusses keyframes for defining animations in css, explains various css animation properties, including animation duration, timing function, keyframes, and fill mode, covers animation and transition properties in css, setting animation iteration count to 3, animation direction to alternate, transition duration to 2 seconds, and transition timing functions such as ease, linear, ease in, and ease out, introduces css hover effects with a detailed tutorial on creating hover effects for buttons, and demonstrates creating 3d image hover effects using css resulting in an interactive 3d hover effect on images with varying opacities and rotations.', 'chapters': [{'end': 16744.649, 'start': 16142.97, 'title': 'Adding colors to web pages and using keyframes', 'summary': 'Covers adding colors to web pages using color names, hex values, and rgb format with examples, and discusses keyframes for defining animations in css, with a focus on syntax and working examples.', 'duration': 601.679, 'highlights': ['CSS uses color values to specify the colors on a page, with nearly 140 standard color names, hexadecimal representation, and RGB format. CSS specifies colors using nearly 140 standard color names, hexadecimal representation, and RGB format.', "The tutorial demonstrates adding colors to text using color names, RGB format, and hex values, showcasing their application and impact on the webpage's visual appearance. The tutorial demonstrates adding colors to text using color names, RGB format, and hex values, showcasing their impact on the webpage's visual appearance.", 'Keyframes are used in CSS to define animation code, with examples showcasing the FROM and TO states and the ability to specify intermediate states as a percentage. Keyframes in CSS define animation code, showcasing the use of FROM and TO states and the ability to specify intermediate states as a percentage.']}, {'end': 17334.152, 'start': 16745.369, 'title': 'Css animation properties', 'summary': 'Explains the various css animation properties, including animation duration, timing function, keyframes, and fill mode, demonstrating through a practical example how to create complex animations with detailed explanations of each property.', 'duration': 588.783, 'highlights': ['The chapter explains the various CSS animation properties, including animation duration, timing function, keyframes, and fill mode. It covers essential properties of CSS animation, providing a comprehensive understanding of animation techniques and attributes.', 'Demonstrates through a practical example how to create complex animations with detailed explanations of each property. It provides a practical example of creating complex animations using CSS properties and explains the process in detail.', 'Illustrates the use of keyframes to define animation behavior at different intervals, such as 0%, 33%, 66%, and 100%. The demonstration includes defining keyframes at specific intervals to control the animation behavior at different stages.', 'Provides a step-by-step demonstration of creating a smooth animation by adjusting the duration, timing function, keyframes, and fill mode. The step-by-step demonstration involves adjusting animation properties to create a smooth and controlled animation effect.']}, {'end': 17788.663, 'start': 17339.246, 'title': 'Css animation and transition', 'summary': 'Covers the animation and transition properties in css, including setting animation iteration count to 3, animation direction to alternate, transition duration to 2 seconds, and transition timing functions such as ease, linear, ease in, and ease out.', 'duration': 449.417, 'highlights': ["Setting animation iteration count to 3 The animation iteration count property specifies the number of times an animation should be played, and in this case, it's set to 3.", "Setting animation direction to alternate The animation direction property defines whether an animation should be played forwards, backwards or in alternate cycles, and here it's set to alternate.", "Setting transition duration to 2 seconds The transition duration property specifies how many seconds or milliseconds a transition effect takes to complete, and in this case, it's set to 2 seconds.", 'Explanation of transition timing functions The chapter explains the transition timing function property and its values: ease, linear, ease in, and ease out, demonstrating their effects on the transition speed curve.']}, {'end': 18845.117, 'start': 17789.343, 'title': 'Creating css hover effects', 'summary': 'Introduces css hover effects, provides a detailed tutorial on creating hover effects for buttons, and explains the impact of css animations on user experience.', 'duration': 1055.774, 'highlights': ['The tutorial provides a step-by-step guide on creating hover effects for buttons using HTML and CSS, demonstrating the process with quantifiable examples. The tutorial includes creating hover effects for buttons, such as setting position, display block, font size, font family, text decoration, border, text transformation, and transition, with quantifiable examples of the changes made.', 'The tutorial explains the impact of CSS animations on user experience, emphasizing their role in making web pages engaging and smooth for visitors. The tutorial highlights the significance of CSS animations in enhancing user experience, making web pages engaging, and attracting visitors to the website.', 'The chapter introduces CSS hover effects and provides a comprehensive explanation of this style technique, emphasizing its activation upon user interaction with a pointing device. The chapter introduces CSS hover effects, defining it as a style technique activated when a user hovers over an element with a pointing device, providing a comprehensive explanation of its functionality.']}, {'end': 19436.247, 'start': 18847.018, 'title': 'Designing 3d image hover effects', 'summary': 'Demonstrates creating 3d image hover effects using css, including setting image positions, 3d transformations, and perspective, resulting in an interactive 3d hover effect on images with varying opacities and rotations.', 'duration': 589.229, 'highlights': ['Creating 3D image hover effects using CSS Demonstrates the process of creating 3D image hover effects using CSS, providing a practical demonstration of frontend web development skills.', 'Setting 3D transformations and image positions Explains the process of setting 3D transformations and image positions, including the use of nthChild property and transform property for each image, resulting in the 3D hover effect.', 'Utilizing opacity and perspective properties Demonstrates the use of opacity and perspective properties to control the transparency and 3D perspective of images, creating a visually appealing 3D effect with varying opacities and rotations.', 'Applying hover property for 3D effect Illustrates the application of the hover property to activate the 3D hover effect, setting specific transformation values to achieve a dynamic and interactive 3D effect on images.']}], 'duration': 3293.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3816142970.jpg', 'highlights': ['Covers adding colors to web pages using color names, hex values, and rgb format', 'Demonstrates creating 3d image hover effects using css resulting in an interactive 3d hover effect on images with varying opacities and rotations', "The tutorial demonstrates adding colors to text using color names, RGB format, and hex values, showcasing their impact on the webpage's visual appearance", 'The chapter introduces CSS hover effects, defining it as a style technique activated when a user hovers over an element with a pointing device, providing a comprehensive explanation of its functionality', 'The tutorial includes creating hover effects for buttons, such as setting position, display block, font size, font family, text decoration, border, text transformation, and transition, with quantifiable examples of the changes made', 'The chapter explains the various CSS animation properties, including animation duration, timing function, keyframes, and fill mode', 'The tutorial provides a step-by-step guide on creating hover effects for buttons using HTML and CSS, demonstrating the process with quantifiable examples', 'Demonstrates through a practical example how to create complex animations with detailed explanations of each property', 'Illustrates the use of keyframes to define animation behavior at different intervals, such as 0%, 33%, 66%, and 100%', 'The tutorial explains the impact of CSS animations on user experience, emphasizing their role in making web pages engaging and smooth for visitors', 'Demonstrates the process of creating 3D image hover effects using CSS, providing a practical demonstration of frontend web development skills', 'The chapter explains the transition timing function property and its values: ease, linear, ease in, and ease out, demonstrating their effects on the transition speed curve', 'The step-by-step demonstration involves adjusting animation properties to create a smooth and controlled animation effect', 'The demonstration includes defining keyframes at specific intervals to control the animation behavior at different stages', "The animation iteration count property specifies the number of times an animation should be played, and in this case, it's set to 3", "The animation direction property defines whether an animation should be played forwards, backwards or in alternate cycles, and here it's set to alternate", "The transition duration property specifies how many seconds or milliseconds a transition effect takes to complete, and in this case, it's set to 2 seconds", 'Demonstrates the use of opacity and perspective properties to control the transparency and 3D perspective of images, creating a visually appealing 3D effect with varying opacities and rotations', 'Illustrates the application of the hover property to activate the 3D hover effect, setting specific transformation values to achieve a dynamic and interactive 3D effect on images']}, {'end': 21774.637, 'segs': [{'end': 19547.449, 'src': 'embed', 'start': 19506.223, 'weight': 0, 'content': [{'end': 19510.885, 'text': 'After that you will work on the code to create the basic navigation bar using HTML and CSS.', 'start': 19506.223, 'duration': 4.662}, {'end': 19513.867, 'text': 'So let us begin by discussing what is navigation bar.', 'start': 19511.686, 'duration': 2.181}, {'end': 19521.19, 'text': 'A navigation bar is a graphical user interface intended to aid the user in accessing the information.', 'start': 19516.068, 'duration': 5.122}, {'end': 19523.712, 'text': 'It is usually placed at the top of the page.', 'start': 19521.911, 'duration': 1.801}, {'end': 19526.853, 'text': 'A navigation bar needs standard HTML as the base.', 'start': 19524.412, 'duration': 2.441}, {'end': 19530.635, 'text': 'Navigation bars can be created either vertically or horizontally.', 'start': 19527.674, 'duration': 2.961}, {'end': 19534.122, 'text': 'What makes a navigation bar so important?', 'start': 19532.321, 'duration': 1.801}, {'end': 19541.346, 'text': 'A navigation bar is an important element of website design, since it allows users to quickly visit any sections within the website.', 'start': 19535.123, 'duration': 6.223}, {'end': 19547.449, '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': 19542.146, 'duration': 5.303}], 'summary': 'Creating a basic navigation bar using html and css is essential for website usability and can be placed either vertically or horizontally.', 'duration': 41.226, 'max_score': 19506.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3819506223.jpg'}, {'end': 20192.035, 'src': 'embed', 'start': 20147.099, 'weight': 7, 'content': [{'end': 20150.14, 'text': "Let's save the file and see what our page looks like up to this point.", 'start': 20147.099, 'duration': 3.041}, {'end': 20158.463, 'text': 'Now you can see our navigation bar is ready with all the sub-menus and menus at proper places.', 'start': 20152.521, 'duration': 5.942}, {'end': 20161.364, 'text': 'We have this nice hover effect over the menus.', 'start': 20158.943, 'duration': 2.421}, {'end': 20163.085, 'text': 'In this video,', 'start': 20162.224, 'duration': 0.861}, {'end': 20169.207, 'text': 'we will discuss some cool tricks that every web developer should be familiar with and which will help you during the time of designing of a web page.', 'start': 20163.085, 'duration': 6.122}, {'end': 20172.488, 'text': "So let's jump on to the Sublime Text Editor and see these tricks.", 'start': 20169.627, 'duration': 2.861}, {'end': 20175.949, 'text': 'So, the first trick is called the CSS Blend Mode.', 'start': 20172.808, 'duration': 3.141}, {'end': 20183.689, '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': 20176.584, 'duration': 7.105}, {'end': 20187.752, 'text': 'With the help of this property, we can blend background image or blend them with colors.', 'start': 20184.25, 'duration': 3.502}, {'end': 20192.035, 'text': "So here's an example of the CSS blend mode.", 'start': 20188.813, 'duration': 3.222}], 'summary': 'Web developer tips on css blend mode for background images and colors.', 'duration': 44.936, 'max_score': 20147.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3820147099.jpg'}, {'end': 20333.382, 'src': 'embed', 'start': 20305.183, 'weight': 10, 'content': [{'end': 20310.225, 'text': 'The CSS Clipmas property creates a clipping region that specifies the region that should be shown on the page.', 'start': 20305.183, 'duration': 5.042}, {'end': 20313.147, 'text': "So let's understand this with the help of an example.", 'start': 20310.966, 'duration': 2.181}, {'end': 20318.429, 'text': "Here we'll create a div and give this class any class say tr.", 'start': 20313.787, 'duration': 4.642}, {'end': 20321.959, 'text': 'The easiest way to generate the clip value is to use a generator.', 'start': 20319.298, 'duration': 2.661}, {'end': 20328.541, 'text': 'There are several websites that give the value of the clip.', 'start': 20323.279, 'duration': 5.262}, {'end': 20333.382, 'text': "So we'll use this website to generate our clip value.", 'start': 20329.661, 'duration': 3.721}], 'summary': 'Css clipmas property defines clipping region for page elements.', 'duration': 28.199, 'max_score': 20305.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3820305183.jpg'}, {'end': 20495.338, 'src': 'embed', 'start': 20413.604, 'weight': 2, 'content': [{'end': 20414.865, 'text': "Let's try something different.", 'start': 20413.604, 'duration': 1.261}, {'end': 20420.61, 'text': "Let's say I want a left arrow.", 'start': 20417.207, 'duration': 3.403}, {'end': 20427.236, 'text': 'So just copy paste this clip path value.', 'start': 20423.272, 'duration': 3.964}, {'end': 20442.932, 'text': 'Just save the file.', 'start': 20441.972, 'duration': 0.96}, {'end': 20446.994, 'text': 'And you can see we have the arrow on our page.', 'start': 20445.273, 'duration': 1.721}, {'end': 20449.935, 'text': 'Another must have for web developers is animations.', 'start': 20447.714, 'duration': 2.221}, {'end': 20454.216, 'text': 'CSS allows us to animate almost every property that we use in the CSS.', 'start': 20450.755, 'duration': 3.461}, {'end': 20456.197, 'text': "Let's look at one example.", 'start': 20455.177, 'duration': 1.02}, {'end': 20459.918, 'text': "So here an HTML file, we'll just add one div tag first.", 'start': 20456.917, 'duration': 3.001}, {'end': 20464.34, 'text': "And to start with animation, we'll have to mention a keyframe.", 'start': 20461.799, 'duration': 2.541}, {'end': 20467.701, 'text': 'The keyframes allows us to create different steps for our animations.', 'start': 20464.92, 'duration': 2.781}, {'end': 20472.949, 'text': "We'll keep the keyframes name to blink.", 'start': 20471.308, 'duration': 1.641}, {'end': 20482.373, 'text': "So here in this example, we'll create a box and we'll add different colors at different points of animations.", 'start': 20476.17, 'duration': 6.203}, {'end': 20486.814, 'text': "Right So we'll write 0% and we'll set the background to Indigo.", 'start': 20482.933, 'duration': 3.881}, {'end': 20495.338, 'text': "We'll change the colors five times.", 'start': 20493.957, 'duration': 1.381}], 'summary': 'Css allows animating almost every property, like in this example where a box changes colors five times using keyframes.', 'duration': 81.734, 'max_score': 20413.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3820413604.jpg'}, {'end': 20630.012, 'src': 'embed', 'start': 20600.915, 'weight': 3, 'content': [{'end': 20602.996, 'text': 'Another thing you can do is add CSS gradient.', 'start': 20600.915, 'duration': 2.081}, {'end': 20607.739, 'text': 'The CSS gradient property allows you to add smooth transitions between two or more colors.', 'start': 20603.637, 'duration': 4.102}, {'end': 20613.583, 'text': 'For this purpose, you can get the gradient value from a website called cssgradient.io.', 'start': 20608.68, 'duration': 4.903}, {'end': 20627.57, 'text': 'Here in this website, You can get the mix and match of the different colors you want to use.', 'start': 20623.39, 'duration': 4.18}, {'end': 20630.012, 'text': "Let's look at one example to understand better.", 'start': 20628.251, 'duration': 1.761}], 'summary': 'Css gradient property creates smooth transitions between colors, obtained from cssgradient.io.', 'duration': 29.097, 'max_score': 20600.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3820600915.jpg'}, {'end': 20827.886, 'src': 'embed', 'start': 20800.63, 'weight': 4, 'content': [{'end': 20803.771, 'text': 'Like hover, which lets you know if the mouse is over an element or not.', 'start': 20800.63, 'duration': 3.141}, {'end': 20810.326, 'text': 'So, the first pseudo class we are going to discuss is CSS hover.', 'start': 20807.082, 'duration': 3.244}, {'end': 20816.233, 'text': 'This pseudo class is used to add a special effect to an element when our mouse pointer is over it.', 'start': 20811.407, 'duration': 4.826}, {'end': 20819.276, 'text': "Let's work an example to understand how this works.", 'start': 20817.134, 'duration': 2.142}, {'end': 20824.802, 'text': 'So, we are on our sublime text editor and we have added a standard boilerplate to it.', 'start': 20820.718, 'duration': 4.084}, {'end': 20827.886, 'text': 'So, first I will create a box element.', 'start': 20826.064, 'duration': 1.822}], 'summary': 'Css hover pseudo class adds special effect when mouse is over an element.', 'duration': 27.256, 'max_score': 20800.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3820800630.jpg'}, {'end': 21276.848, 'src': 'embed', 'start': 21245.913, 'weight': 5, 'content': [{'end': 21248.295, 'text': 'The next one we are going to discuss is the before pseudo element.', 'start': 21245.913, 'duration': 2.382}, {'end': 21253.478, 'text': 'The before pseudo element can be used to insert some content before the content of an element.', 'start': 21249.055, 'duration': 4.423}, {'end': 21255.739, 'text': "Let's work out an example.", 'start': 21254.659, 'duration': 1.08}, {'end': 21260.922, 'text': 'So just add the standard boilerplate.', 'start': 21258.721, 'duration': 2.201}, {'end': 21266.884, 'text': "Inside the body, let's add welcome to Simply Learn.", 'start': 21262.502, 'duration': 4.382}, {'end': 21270.545, 'text': "We'll add the text inside the Q tag.", 'start': 21268.124, 'duration': 2.421}, {'end': 21272.866, 'text': 'The Q tag defines a short quotation.', 'start': 21271.146, 'duration': 1.72}, {'end': 21276.848, 'text': "So inside the Q tag, we'll add welcome.", 'start': 21273.347, 'duration': 3.501}], 'summary': 'Learn about using the before pseudo element to insert content before an element, demonstrated with a quotation.', 'duration': 30.935, 'max_score': 21245.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3821245913.jpg'}, {'end': 21589.851, 'src': 'embed', 'start': 21499.565, 'weight': 12, 'content': [{'end': 21502.427, 'text': "We'll use the CALC function to determine the left margin.", 'start': 21499.565, 'duration': 2.862}, {'end': 21514.636, 'text': 'So to use the CALC function, add CALC, 50% and minus 1 EM.', 'start': 21503.027, 'duration': 11.609}, {'end': 21522.181, 'text': 'The CALC function performs a calculation to be used as a property value.', 'start': 21519.239, 'duration': 2.942}, {'end': 21532.833, 'text': "We'll keep the border radius to say 1.3 EM.", 'start': 21529.431, 'duration': 3.402}, {'end': 21539.857, 'text': 'EM is the relative to the font size of the element.', 'start': 21537.536, 'duration': 2.321}, {'end': 21544.34, 'text': '1.3 EM means 1.3 times the size of the current font.', 'start': 21541.018, 'duration': 3.322}, {'end': 21554.947, 'text': "We'll use the transform origin function with the value 1.3 EM and 2 EM.", 'start': 21551.044, 'duration': 3.903}, {'end': 21564.027, 'text': 'The transform margin property allows you to change the position of the transformed elements.', 'start': 21560.626, 'duration': 3.401}, {'end': 21567.707, 'text': '2D transformations can change the X and Y axis.', 'start': 21565.767, 'duration': 1.94}, {'end': 21574.748, 'text': "We'll keep the animation to rotate.", 'start': 21572.128, 'duration': 2.62}, {'end': 21586.07, 'text': "We'll keep the animation iteration count infinite.", 'start': 21581.33, 'duration': 4.74}, {'end': 21589.851, 'text': "And we'll keep the animation duration to 2 seconds.", 'start': 21587.771, 'duration': 2.08}], 'summary': 'Using calc function for left margin, border radius set to 1.3 em, transform origin with 2d transformation, and animation duration 2 seconds.', 'duration': 90.286, 'max_score': 21499.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3821499565.jpg'}, {'end': 21681.467, 'src': 'embed', 'start': 21649.758, 'weight': 15, 'content': [{'end': 21652.379, 'text': "At 100%, when it's complete, it will rotate to the complete 360 degrees.", 'start': 21649.758, 'duration': 2.621}, {'end': 21655.8, 'text': 'So here we give the value 360 degrees.', 'start': 21653.599, 'duration': 2.201}, {'end': 21669.905, 'text': "now let's design each of the classes here that we have defined so dot a1.", 'start': 21658.962, 'duration': 10.943}, {'end': 21676.146, 'text': 'the animation delay will be of 0.1 seconds.', 'start': 21669.905, 'duration': 6.241}, {'end': 21681.467, 'text': 'so for each of the classes that we have here, we have to define them with a different color so that when the loader appears,', 'start': 21676.146, 'duration': 5.321}], 'summary': 'The completion of the animation will rotate 360 degrees at 100% with a 0.1-second delay.', 'duration': 31.709, 'max_score': 21649.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3821649758.jpg'}], 'start': 19436.247, 'title': 'Creating and styling css navigation bars', 'summary': 'Covers creating a basic navigation bar using html and css, styling it using css properties, including setting margins, padding, background color, and creating hover effects, and also discusses css blend modes, clip path property, gradient, pseudo classes, pseudo elements, and animations, with specific examples and demonstrations, providing a comprehensive understanding of navigation bar design and styling.', 'chapters': [{'end': 19916.515, 'start': 19436.247, 'title': 'Creating css navigation bar', 'summary': 'Covers the importance of navigation bar on a webpage, creating a basic navbar using html and css, and the significance of a well-designed navigation bar for user experience.', 'duration': 480.268, 'highlights': ['A well designed navigation bar is an important part of the user experience. A well-designed navigation bar enhances user experience, allowing quick access to different sections within the website.', 'Navigation bars can be created either vertically or horizontally. Navigation bars can be designed in either vertical or horizontal orientation, providing flexibility in layout design.', 'The chapter covers the importance of navigation bar on a webpage. Importance of navigation bar on a webpage is emphasized, highlighting its role in aiding user access to information and enhancing user experience.', 'Creating a basic navbar using HTML and CSS is demonstrated. Step-by-step guidance is provided for creating a basic navigation bar using HTML and CSS, including the structure and styling.']}, {'end': 20169.207, 'start': 19921.419, 'title': 'Styling navigation bar with css', 'summary': 'Covers the process of styling a navigation bar using css, including setting margins and padding to zero, removing list item bullets, setting background color, line height, text alignment, font size, and creating hover effects, resulting in a ready navigation bar with sub-menus and menus at proper places.', 'duration': 247.788, 'highlights': ['The process of styling a navigation bar using CSS includes setting margins and padding to zero, removing list item bullets, setting background color, line height, text alignment, and font size.', 'Creating hover effects for the navigation bar, including setting the hover effect over menus and making submenus visible only when hovering over menus.', 'The result is a ready navigation bar with all sub-menus and menus properly styled and with a nice hover effect.']}, {'end': 20304.823, 'start': 20169.627, 'title': 'Sublime text: css blending and clipping', 'summary': 'Introduces css blend mode, detailing its application to blend background images with colors using modes such as normal, multiply, darken, lighter, and screen, with examples and specific color codes, followed by a brief mention of the next trick, clipping.', 'duration': 135.196, 'highlights': ['The CSS background blend property sets the blend mode for each background layer, allowing blending with images or different colors.', 'Detailed explanation and demonstration of using blend mode with color codes and examples.', 'Mention of the next trick, clipping, without detailed elaboration.']}, {'end': 20598.993, 'start': 20305.183, 'title': 'Css clip path property and css animations', 'summary': 'Discusses the css clip path property to create a clipping region for images and the usage of keyframes to create animations in css, with an example demonstrating the creation of a hexagon shaped image using clip path and a blinking animation using keyframes.', 'duration': 293.81, 'highlights': ['The CSS clip path property is used to create a clipping region for images, allowing for the creation of custom shapes such as a hexagon or arrow on a webpage. The clip path property is demonstrated by creating a hexagon shaped image and an arrow on a webpage, allowing for customization of the clipping region.', 'Keyframes are used to define different steps for animations in CSS, allowing for the creation of a blinking animation by changing the background colors of a box at different points of the animation. Keyframes are utilized to create a blinking animation by changing the background colors of a box at different points of the animation, showcasing the flexibility of animations in CSS.', 'CSS allows for the animation of almost every property used in CSS, providing web developers with the capability to style each element in an HTML using animations. CSS enables the animation of almost every property used, empowering web developers to style each element in an HTML using animations for enhanced visual effects.']}, {'end': 21244.412, 'start': 20600.915, 'title': 'Css gradient, pseudo class, and pseudo element', 'summary': 'Discusses using css gradient to add smooth transitions between colors, the application of css pseudo classes like hover and active to add special effects, and the use of css pseudo elements like first letter to style specific parts of selected elements.', 'duration': 643.497, 'highlights': ['The CSS gradient property allows smooth transitions between colors The CSS gradient property enables adding smooth transitions between two or more colors, enhancing the visual appeal of webpages.', 'Usage of CSS pseudo classes like hover and active to add special effects The chapter explains the application of CSS pseudo classes like hover and active to add special effects when the mouse pointer is over an element or when an element is activated by the user.', 'Application of CSS pseudo elements like first letter to style specific parts of selected elements The use of CSS pseudo elements like first letter to style the first letter of the first line of a block-level element is demonstrated, allowing for unique styling of specific parts of selected elements.']}, {'end': 21491.344, 'start': 21245.913, 'title': 'Css pseudo elements and css loader', 'summary': 'Discusses the usage of before pseudo element to add content before an element and demonstrates the creation of a css loader animation using div tags, with a focus on styling and positioning.', 'duration': 245.431, 'highlights': ['The before pseudo element is used to insert content before the content of an element, demonstrated by adding symbols before and after the text with specific styling such as color and size.', 'The CSS loader animation is created using five div tags with specified styling properties such as display, position, width, and height to achieve the loading effect.']}, {'end': 21774.637, 'start': 21499.565, 'title': 'Css calc function and animation', 'summary': 'Demonstrates the usage of the calc function for determining margin, the transform origin function for changing position, and defining keyframes and animations with different colors and delays in css for creating a loader.', 'duration': 275.072, 'highlights': ['The CALC function is used to determine the left margin, by adding CALC, 50% and minus 1 EM, where EM is relative to the font size of the element.', 'The transform origin function is used with the value 1.3 EM and 2 EM to change the position of the transformed elements with 2D transformations changing the X and Y axis.', "Keyframes are defined for the animation 'rotate' at 0% and 100% to rotate from 0 to 360 degrees, with animation iteration count set to infinite and duration to 2 seconds.", 'Different classes (a1 to a5) are defined with animation delays of 0.1 to 0.5 seconds along with different background colors (cyan, pink, purple, green, black) for creating a loader in sync.']}], 'duration': 2338.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3819436247.jpg', 'highlights': ['Step-by-step guidance for creating a basic navigation bar using HTML and CSS.', 'Importance of navigation bar in aiding user access to information and enhancing user experience.', 'CSS enables the animation of almost every property used, providing web developers with the capability to style each element in an HTML using animations.', 'The CSS gradient property enables adding smooth transitions between two or more colors, enhancing the visual appeal of webpages.', 'Application of CSS pseudo classes like hover and active to add special effects when the mouse pointer is over an element or when an element is activated by the user.', 'The before pseudo element is used to insert content before the content of an element, demonstrated by adding symbols before and after the text with specific styling such as color and size.', 'The process of styling a navigation bar using CSS includes setting margins and padding to zero, removing list item bullets, setting background color, line height, text alignment, and font size.', 'Creating hover effects for the navigation bar, including setting the hover effect over menus and making submenus visible only when hovering over menus.', 'The result is a ready navigation bar with all sub-menus and menus properly styled and with a nice hover effect.', 'The CSS background blend property sets the blend mode for each background layer, allowing blending with images or different colors.', 'The CSS clip path property is used to create a clipping region for images, allowing for the creation of custom shapes such as a hexagon or arrow on a webpage.', 'Keyframes are used to define different steps for animations in CSS, allowing for the creation of a blinking animation by changing the background colors of a box at different points of the animation.', 'The CALC function is used to determine the left margin, by adding CALC, 50% and minus 1 EM, where EM is relative to the font size of the element.', 'The transform origin function is used with the value 1.3 EM and 2 EM to change the position of the transformed elements with 2D transformations changing the X and Y axis.', "Keyframes are defined for the animation 'rotate' at 0% and 100% to rotate from 0 to 360 degrees, with animation iteration count set to infinite and duration to 2 seconds.", 'Different classes (a1 to a5) are defined with animation delays of 0.1 to 0.5 seconds along with different background colors (cyan, pink, purple, green, black) for creating a loader in sync.']}, {'end': 24708.073, 'segs': [{'end': 21822.836, 'src': 'embed', 'start': 21795.113, 'weight': 0, 'content': [{'end': 21798.735, 'text': 'And CSS media queries are one of the most important parts of responsive design.', 'start': 21795.113, 'duration': 3.622}, {'end': 21801.676, 'text': 'In the past, building a website was much simpler.', 'start': 21799.555, 'duration': 2.121}, {'end': 21807.358, 'text': 'Today, a website layout should adapt itself not only to computers but also to tablets, mobile devices and even TV.', 'start': 21801.936, 'duration': 5.422}, {'end': 21813.911, 'text': "Let's see how we can create a responsive web layout using CSS media case with the help of an example.", 'start': 21809.048, 'duration': 4.863}, {'end': 21816.332, 'text': 'So here, we have our sublime text editor.', 'start': 21814.331, 'duration': 2.001}, {'end': 21818.693, 'text': 'We have our standard wall effort ready.', 'start': 21816.772, 'duration': 1.921}, {'end': 21820.054, 'text': "So let's create something.", 'start': 21819.174, 'duration': 0.88}, {'end': 21822.836, 'text': "So let's start by creating the four divs here.", 'start': 21821.075, 'duration': 1.761}], 'summary': 'Css media queries vital for responsive web design across devices.', 'duration': 27.723, 'max_score': 21795.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3821795113.jpg'}, {'end': 22531.835, 'src': 'embed', 'start': 22502.947, 'weight': 2, 'content': [{'end': 22508.289, 'text': 'When you click on the file, it opens in your browser and you can see the words Hello World.', 'start': 22502.947, 'duration': 5.342}, {'end': 22514.471, 'text': 'In this, we will be learning all about JavaScript arrays and the popular methods of the array object.', 'start': 22509.049, 'duration': 5.422}, {'end': 22520.193, 'text': "So what's in it for you? We'll start by understanding what a JavaScript array is.", 'start': 22516.052, 'duration': 4.141}, {'end': 22526.856, 'text': 'Then we will get to know about the operations that we are performing on the array.', 'start': 22522.754, 'duration': 4.102}, {'end': 22531.835, 'text': "After that, we'll get familiar with some of the most used array methods.", 'start': 22528.453, 'duration': 3.382}], 'summary': 'Learn javascript arrays and popular array methods.', 'duration': 28.888, 'max_score': 22502.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3822502947.jpg'}, {'end': 23955.826, 'src': 'embed', 'start': 23924.66, 'weight': 3, 'content': [{'end': 23927.821, 'text': 'It displays the sum of the entire values in the array.', 'start': 23924.66, 'duration': 3.161}, {'end': 23930.461, 'text': "We're learning all about JavaScript loops.", 'start': 23928.221, 'duration': 2.24}, {'end': 23935.862, 'text': "If you're new to JavaScript, I suggest you go through our previous videos on this topic.", 'start': 23931.341, 'duration': 4.521}, {'end': 23940.643, 'text': "So without further ado, let's begin and look at what's in store for you.", 'start': 23937.102, 'duration': 3.541}, {'end': 23950.785, 'text': "So we're going to be covering topics like for loop while loop, which also includes the do while loop,", 'start': 23944.824, 'duration': 5.961}, {'end': 23955.826, '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': 23950.785, 'duration': 5.041}], 'summary': 'Learning javascript loops, covering for loop, while loop, do while loop, breaking out and skipping loop cycles.', 'duration': 31.166, 'max_score': 23924.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3823924660.jpg'}, {'end': 24023.249, 'src': 'embed', 'start': 23997.824, 'weight': 4, 'content': [{'end': 24003.946, 'text': 'Alright, when it comes to exit control loops, the test condition is checked after the loop has been executed.', 'start': 23997.824, 'duration': 6.122}, {'end': 24011.24, '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': 24004.775, 'duration': 6.465}, {'end': 24014.602, 'text': 'So the example for this is the do while loop.', 'start': 24012.281, 'duration': 2.321}, {'end': 24020.046, 'text': "Alright, with this basic knowledge, let's go ahead and learn about the different loops.", 'start': 24015.403, 'duration': 4.643}, {'end': 24023.249, 'text': 'So the first loop is the for loop.', 'start': 24021.587, 'duration': 1.662}], 'summary': 'Introduction to exit control loops, emphasizing do while loop. proceeding to learn about different loops.', 'duration': 25.425, 'max_score': 23997.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3823997824.jpg'}], 'start': 21774.637, 'title': 'Responsive web design, media queries, javascript arrays, methods, and loops', 'summary': 'Discusses creating responsive web layouts and designs with css media queries, providing examples and practical demonstrations. it also covers javascript arrays, methods, and loops with detailed explanations and code examples. additionally, it delves into the concepts of control statements and their implementations.', 'chapters': [{'end': 21952.711, 'start': 21774.637, 'title': 'Creating responsive web layout', 'summary': 'Discusses responsive web design and css media queries, emphasizing the importance of adapting website layouts to various devices, while providing an example to demonstrate the process.', 'duration': 178.074, 'highlights': ['Creating a responsive web design involves making a website with an adaptable layout that can adjust to different devices, such as computers, tablets, mobile devices, and TVs.', 'CSS media queries play a crucial role in responsive design by enabling the adaptation of website layouts to various devices.', 'The tutorial demonstrates the creation of a responsive web layout using CSS media queries and provides an example using divs with specific IDs and classes, along with styling adjustments, showcasing the practical implementation of responsive design.']}, {'end': 22502.338, 'start': 21956.291, 'title': 'Responsive web design with media queries', 'summary': "Discusses the use of media queries to create a responsive web design, with examples of setting conditions based on width to display different content and provides an overview of javascript, including its features, applications, and the execution of a simple 'hello world' program.", 'duration': 546.047, 'highlights': ['The chapter discusses the use of media queries to create a responsive web design It explains the concept of media queries used for customizing website presentation and provides examples of setting conditions based on width to display different content.', "Overview of JavaScript, including its features, applications, and the execution of a simple 'hello world' program It covers the features of JavaScript, its applications in various fields like web development and game development, and demonstrates the execution of a simple 'hello world' program."]}, {'end': 23045.765, 'start': 22502.947, 'title': 'Javascript array basics', 'summary': 'Covers javascript arrays and their popular methods, including creating, accessing, and looping through array elements, with a focus on explaining the array length property and accessing specific elements. it also includes a demonstration of creating and displaying an array in the browser.', 'duration': 542.818, 'highlights': ['The chapter covers JavaScript arrays and their popular methods, including creating, accessing, and looping through array elements, with a focus on explaining the array length property and accessing specific elements.', 'It also includes a demonstration of creating and displaying an array in the browser.', 'The chapter explains how to access specific elements of an array using their indices and the array length property, with the example of retrieving the length of the array and accessing the last array element.', 'It further demonstrates looping through array items using the forEach method and displaying the content on the console, providing a practical overview of iterating through array elements.']}, {'end': 24227.649, 'start': 23045.925, 'title': 'Array methods and javascript loops', 'summary': 'Covers array methods including tostring, pop, push, shift, unshift, concat, sort, and reverse, with practical examples and explanations. it also delves into javascript loops, explaining the concept, entry control and exit control loops, and providing a detailed explanation of the for loop with a practical example.', 'duration': 1181.724, 'highlights': ['The chapter covers array methods including toString, pop, push, shift, unshift, concat, sort, and reverse, with practical examples and explanations. The chapter covers array methods such as toString, pop, push, shift, unshift, concat, sort, and reverse, providing practical examples and explanations for each method.', 'It also delves into JavaScript loops, explaining the concept, entry control and exit control loops, and providing a detailed explanation of the for loop with a practical example. The chapter explains JavaScript loops, including the concept, entry control and exit control loops, and provides a detailed explanation of the for loop with a practical example.']}, {'end': 24708.073, 'start': 24228.95, 'title': 'Understanding loops and control statements', 'summary': 'Explains the concepts of for loop, while loop, do-while loop, breaking out of a loop, and skipping a loop cycle with relevant code examples and their outputs.', 'duration': 479.123, 'highlights': ['The chapter explains the concepts of for loop, while loop, do-while loop, breaking out of a loop, and skipping a loop cycle with relevant code examples and their outputs. The chapter covers the concepts of for loop, while loop, do-while loop, breaking out of a loop, and skipping a loop cycle, providing code examples and outputs.', 'The code inside the for loop is executed and once the value of x reaches 5, it breaks from the loop. The value of x reaches 5, and the loop breaks, demonstrating the use of the break keyword in a for loop.', 'It displays 1 and 2 and skips the third cycle and then directly displays 4. The keyword continue is used to skip the third cycle in a for loop, displaying 1, 2, skipping 3, and then displaying 4.', 'It prints the values of x from 5 to 9. The do-while loop prints the values of x from 5 to 9, demonstrating the functionality of a do-while loop.']}], 'duration': 2933.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3821774637.jpg', 'highlights': ['CSS media queries enable adaptable website layouts for various devices.', 'Demonstration of responsive web layout creation using CSS media queries.', 'JavaScript arrays cover popular methods and accessing specific elements.', 'Detailed explanation and practical examples of JavaScript loops.', 'Explanation of for loop, while loop, do-while loop, and loop control.']}, {'end': 27898.349, 'segs': [{'end': 24764.681, 'src': 'embed', 'start': 24734.645, 'weight': 0, 'content': [{'end': 24737.767, 'text': "Lastly, we'll understand what JavaScript accessors are.", 'start': 24734.645, 'duration': 3.122}, {'end': 24749.613, 'text': 'So what is a JavaScript object? JavaScript is an object-oriented programming language, so everything in Java is an object.', 'start': 24741.089, 'duration': 8.524}, {'end': 24756.259, 'text': 'A JavaScript object is like a real-world entity having state and behavior, for example, a car.', 'start': 24750.598, 'duration': 5.661}, {'end': 24758.78, 'text': 'Now we can take a car as an object.', 'start': 24756.999, 'duration': 1.781}, {'end': 24761.4, 'text': 'It will have its state like color and model.', 'start': 24759.36, 'duration': 2.04}, {'end': 24764.681, 'text': 'It will also have behaviors like accelerate and brake.', 'start': 24761.921, 'duration': 2.76}], 'summary': 'Javascript object is a real-world entity with state and behavior, such as a car with color and model, and behaviors like accelerate and brake.', 'duration': 30.036, 'max_score': 24734.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3824734645.jpg'}, {'end': 24819.142, 'src': 'embed', 'start': 24788.9, 'weight': 1, 'content': [{'end': 24792.423, 'text': 'Now basically, there are three different ways of creating a JavaScript object.', 'start': 24788.9, 'duration': 3.523}, {'end': 24794.684, 'text': "Alright, so we'll look at them one by one.", 'start': 24792.943, 'duration': 1.741}, {'end': 24800.008, 'text': 'The first one is to use a literal to create and define a JavaScript object.', 'start': 24795.765, 'duration': 4.243}, {'end': 24803.891, 'text': "So let's go to our VS Code editor.", 'start': 24801.829, 'duration': 2.062}, {'end': 24813.017, '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': 24805.131, 'duration': 7.886}, {'end': 24814.719, 'text': 'to get you started with it.', 'start': 24813.017, 'duration': 1.702}, {'end': 24819.142, 'text': "So here I've created a folder called demo objects.", 'start': 24815.179, 'duration': 3.963}], 'summary': "Three ways to create javascript objects explained. initial setup in 'javascript aries' video.", 'duration': 30.242, 'max_score': 24788.9, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3824788900.jpg'}, {'end': 25764.411, 'src': 'embed', 'start': 25721.799, 'weight': 3, 'content': [{'end': 25722.099, 'text': 'All right.', 'start': 25721.799, 'duration': 0.3}, {'end': 25731.163, 'text': "So now let's move on to the next concept that is Java object accessors.", 'start': 25726.621, 'duration': 4.542}, {'end': 25736.486, 'text': 'Now getters and setters allow defining an object accessor.', 'start': 25732.404, 'duration': 4.082}, {'end': 25737.327, 'text': 'All right.', 'start': 25736.986, 'duration': 0.341}, {'end': 25747.052, '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': 25737.607, 'duration': 9.445}, {'end': 25749.013, 'text': "So let's go back to our demo.", 'start': 25747.712, 'duration': 1.301}, {'end': 25764.411, 'text': "And now let me create another file and let's call it object accessors.", 'start': 25751.014, 'duration': 13.397}], 'summary': 'Java object accessors define getters and setters for accessing object properties.', 'duration': 42.612, 'max_score': 25721.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3825721799.jpg'}, {'end': 26299.143, 'src': 'embed', 'start': 26274.434, 'weight': 2, 'content': [{'end': 26283.017, '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': 26274.434, 'duration': 8.583}, {'end': 26285.698, 'text': 'it references to this property here.', 'start': 26283.017, 'duration': 2.681}, {'end': 26292.261, 'text': 'Alright, unlike this case where it referenced to the global variable that was mentioned outside.', 'start': 26287.139, 'duration': 5.122}, {'end': 26295.862, 'text': 'So I hope this helped you understand the difference between the two.', 'start': 26293.201, 'duration': 2.661}, {'end': 26299.143, 'text': "Now let's look at another simple example.", 'start': 26297.063, 'duration': 2.08}], 'summary': 'Explains difference between local and global variable referencing in a method.', 'duration': 24.709, 'max_score': 26274.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3826274434.jpg'}, {'end': 26509.811, 'src': 'embed', 'start': 26480.561, 'weight': 4, 'content': [{'end': 26484.504, 'text': "Alright, so before jumping in, let's go ahead and look at what's in store for us.", 'start': 26480.561, 'duration': 3.943}, {'end': 26489.126, 'text': "First, we're going to learn what exactly JavaScript functions are.", 'start': 26486.105, 'duration': 3.021}, {'end': 26492.789, 'text': "Then we'll look at JavaScript function expressions.", 'start': 26490.047, 'duration': 2.742}, {'end': 26494.59, 'text': 'Then the function constructor.', 'start': 26493.309, 'duration': 1.281}, {'end': 26503.867, 'text': 'self-invoking functions, functions as values, functions as objects, arrow functions, generator function and the predefined functions.', 'start': 26495.262, 'duration': 8.605}, {'end': 26509.811, 'text': "Also, don't forget to subscribe to our channel and hit the bell icon to never miss an update.", 'start': 26504.928, 'duration': 4.883}], 'summary': 'Learning about javascript functions and different types, including self-invoking and predefined functions.', 'duration': 29.25, 'max_score': 26480.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3826480561.jpg'}], 'start': 24708.994, 'title': "Javascript objects and 'this' keyword behavior", 'summary': "Covers javascript object basics, properties, and accessors, including creation methods, property updates, and accessors such as getters and setters. additionally, it explores the behavior of the 'this' keyword within object methods, referencing properties, global variables, and its usage within callback functions.", 'chapters': [{'end': 25276.913, 'start': 24708.994, 'title': 'Javascript objects basics', 'summary': "Covers the basics of javascript objects, including their definition, creation, and three different methods of creating objects, such as using object literals, the 'new' keyword, and object constructors.", 'duration': 567.919, 'highlights': ['JavaScript objects are like real-world entities having state and behavior, for example, a car. JavaScript objects represent real-world entities with state and behavior, such as a car with its state (color, model) and behaviors (accelerate, brake).', "Three different methods of creating a JavaScript object: using object literals, the 'new' keyword, and object constructors. The three methods for creating a JavaScript object are using object literals, the 'new' keyword, and object constructors.", "Demonstration of creating a JavaScript object using object literals, the 'new' keyword, and object constructors, each with specific properties and values. The transcript provides a step-by-step demonstration of creating JavaScript objects using object literals, the 'new' keyword, and object constructors, with specific properties and values for each method."]}, {'end': 25720.438, 'start': 25277.374, 'title': 'Javascript object properties and methods', 'summary': 'Covers the creation and updating of object properties, demonstrating how to update the age property of an object and create an object method to display a message, along with a button triggering the method, leading to the display of a greeting alert.', 'duration': 443.064, 'highlights': ["The chapter covers the creation and updating of object properties It explains the creation of object properties and demonstrates updating the 'age' property of an object from 21 to 24.", "Creating an object method to display a message It demonstrates creating an object method named 'hi' to display a message using 'alert' and adding this method to a new property 'user.message'.", "Demonstrating a button triggering the method It shows the creation of a button with the id 'click me' to trigger the object method 'hi', resulting in the display of a greeting alert."]}, {'end': 26189.444, 'start': 25721.799, 'title': 'Javascript object accessors', 'summary': "Introduces java object accessors, focusing on getters and setters to access and set values for javascript object properties. it also explains the usage of the 'this' keyword in javascript, which refers to the executing object, and includes a demo to illustrate the concept.", 'duration': 467.645, 'highlights': ['Getters and setters are used to define object accessors in JavaScript, enabling the retrieval and assignment of property values in a JavaScript object. ', "The demonstration showcases the usage of getters and setters to access and set property values of a JavaScript object, with a specific example of accessing and displaying the 'fuel' property value. ", "The 'this' keyword in JavaScript refers to the object executing the current code, where it references the global object for regular functions and the object itself for methods within an object. ", "A practical demo is presented to illustrate the concept of the 'this' keyword, demonstrating its behavior in accessing and displaying values within a JavaScript function. "]}, {'end': 27898.349, 'start': 26192.577, 'title': "Behavior of 'this' keyword in javascript object method", 'summary': "Discusses the behavior of the 'this' keyword within a javascript object method, highlighting how it references properties within the method, the difference in referencing global variables, and the usage of 'this' within a callback function. it also introduces upcoming topics on javascript functions and covers predefined functions.", 'duration': 1705.772, 'highlights': ["The 'this' keyword references properties within a method defined inside an object, unlike when referencing global variables outside the method. When 'this' is used within a method defined inside an object, it references the property within the object.", "The difference in referencing properties using 'this' within a method and referencing global variables outside the method is explained. The chapter explains the difference between referencing properties using 'this' within a method and referencing global variables outside the method.", "Explanation of how using 'this' within a callback function references the global object and the solution to overcome it using the 'for each' method with the object reference. The chapter explains how using 'this' within a callback function references the global object and provides a solution using the 'for each' method with the object reference.", 'Introduction to upcoming topics on JavaScript functions, including function expressions, function constructor, self-invoking functions, functions as values, functions as objects, arrow functions, generator functions, and predefined functions. Upcoming topics on JavaScript functions are introduced, including function expressions, function constructor, self-invoking functions, functions as values, functions as objects, arrow functions, generator functions, and predefined functions.']}], 'duration': 3189.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3824708994.jpg', 'highlights': ['JavaScript objects represent real-world entities with state and behavior, such as a car with its state (color, model) and behaviors (accelerate, brake).', "The three methods for creating a JavaScript object are using object literals, the 'new' keyword, and object constructors.", "The chapter explains the difference between referencing properties using 'this' within a method and referencing global variables outside the method.", 'Getters and setters are used to define object accessors in JavaScript, enabling the retrieval and assignment of property values in a JavaScript object.', 'Introduction to upcoming topics on JavaScript functions, including function expressions, function constructor, self-invoking functions, functions as values, functions as objects, arrow functions, generator functions, and predefined functions.']}, {'end': 29882.571, 'segs': [{'end': 28000.828, 'src': 'embed', 'start': 27925.119, 'weight': 0, 'content': [{'end': 27927.361, 'text': 'So what exactly is form validation?', 'start': 27925.119, 'duration': 2.242}, {'end': 27932.325, 'text': "Now I'm sure you must have filled several online forms, right?", 'start': 27929.042, 'duration': 3.283}, {'end': 27936.188, 'text': 'A simple example would be a new registration for a website.', 'start': 27932.585, 'duration': 3.603}, {'end': 27944.244, 'text': 'Now every time you miss out on giving a particular detail or end up giving faulty information, the website alerts you.', 'start': 27937.099, 'duration': 7.145}, {'end': 27951.149, 'text': 'So this process of ensuring that the information provided is legit is called form validation.', 'start': 27945.225, 'duration': 5.924}, {'end': 27954.643, 'text': 'Now this generally happens on the server side.', 'start': 27952.301, 'duration': 2.342}, {'end': 27961.628, 'text': 'However, JavaScript facilitates form validation on the client computer before sending it over to the server.', 'start': 27955.223, 'duration': 6.405}, {'end': 27964.089, 'text': 'Now there are two functions performed.', 'start': 27962.408, 'duration': 1.681}, {'end': 27969.473, 'text': 'One is the basic validation which ensures that all the mandatory fields are filled.', 'start': 27964.85, 'duration': 4.623}, {'end': 27972.515, 'text': 'Now this is implemented with the help of a simple loop.', 'start': 27970.013, 'duration': 2.502}, {'end': 27975.818, 'text': 'And the other is a data format validation.', 'start': 27973.496, 'duration': 2.322}, {'end': 27978.6, 'text': 'Now this checks the data for its correctness.', 'start': 27976.298, 'duration': 2.302}, {'end': 27983.723, 'text': "So to help you understand form validation better, Let's look at a simple demo.", 'start': 27979.42, 'duration': 4.303}, {'end': 27989.705, 'text': "Alright, so back in my Visual Studio code, I've created a file called forms.", 'start': 27985.864, 'duration': 3.841}, {'end': 27993.506, 'text': "Alright, it's an HTML file and I've typed down the initial code.", 'start': 27990.385, 'duration': 3.121}, {'end': 28000.828, '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': 27994.306, 'duration': 6.522}], 'summary': 'Form validation ensures legit information in online forms, with examples of basic and data format validation.', 'duration': 75.709, 'max_score': 27925.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3827925119.jpg'}, {'end': 28423.594, 'src': 'embed', 'start': 28382.23, 'weight': 5, 'content': [{'end': 28387.313, 'text': "So what happens is if my email field is empty, then I'm going to return a false.", 'start': 28382.23, 'duration': 5.083}, {'end': 28390.255, 'text': 'So here I see return false.', 'start': 28388.154, 'duration': 2.101}, {'end': 28394.173, 'text': 'And here as well.', 'start': 28393.112, 'duration': 1.061}, {'end': 28403.739, 'text': "And finally, when both my email and my password fields are filled, I'm going to return true.", 'start': 28397.695, 'duration': 6.044}, {'end': 28406.481, 'text': 'All right.', 'start': 28406.121, 'duration': 0.36}, {'end': 28409.243, 'text': 'And same goes here.', 'start': 28408.202, 'duration': 1.041}, {'end': 28413.906, 'text': 'Let me just say return validate instead of just validate.', 'start': 28409.263, 'duration': 4.643}, {'end': 28416.128, 'text': 'Right So.', 'start': 28414.567, 'duration': 1.561}, {'end': 28419.271, 'text': 'Here we go.', 'start': 28418.891, 'duration': 0.38}, {'end': 28423.594, 'text': "Let me save this and now let's check the output.", 'start': 28420.392, 'duration': 3.202}], 'summary': 'Returns true when email and password fields are filled, false if email is empty.', 'duration': 41.364, 'max_score': 28382.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3828382230.jpg'}, {'end': 28634.663, 'src': 'embed', 'start': 28609.384, 'weight': 6, 'content': [{'end': 28615.026, 'text': 'Alright, so if I want to match AP, I can just say AP and it gets highlighted here.', 'start': 28609.384, 'duration': 5.642}, {'end': 28620.388, 'text': 'Alright, so this is a simple regular expression that matches with the text.', 'start': 28615.946, 'duration': 4.442}, {'end': 28627.138, 'text': "So moving on, let's see what exactly these flags, patterns and quantifiers are.", 'start': 28621.894, 'duration': 5.244}, {'end': 28629.72, 'text': 'So what exactly is a flag?', 'start': 28628.279, 'duration': 1.441}, {'end': 28634.663, 'text': 'So we previously saw that the syntax consists of a pattern and then a flag right?', 'start': 28630.1, 'duration': 4.563}], 'summary': 'Introduction to regular expressions, including usage and components.', 'duration': 25.279, 'max_score': 28609.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3828609384.jpg'}, {'end': 28763.745, 'src': 'embed', 'start': 28731.913, 'weight': 11, 'content': [{'end': 28735.175, 'text': 'We have the plus, we have the asterisk and we have the question mark.', 'start': 28731.913, 'duration': 3.262}, {'end': 28739.998, 'text': 'So plus indicates one or more occurrence of the character n.', 'start': 28735.795, 'duration': 4.203}, {'end': 28745.121, 'text': 'Alright and the asterisk indicates zero or more occurrences of the character n,', 'start': 28739.998, 'duration': 5.123}, {'end': 28749.804, 'text': 'while a question mark indicates zero or one occurrence of the character n.', 'start': 28745.121, 'duration': 4.683}, {'end': 28756.208, 'text': 'So now that you know flags, patterns and quantifiers, let me help you understand them better with the help of a demo.', 'start': 28749.804, 'duration': 6.404}, {'end': 28763.745, 'text': 'Alright, so here I have a simple text which says, welcome to this tutorial on JavaScript.', 'start': 28757.901, 'duration': 5.844}], 'summary': 'Demonstrating flags, patterns, and quantifiers in javascript using a simple text.', 'duration': 31.832, 'max_score': 28731.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3828731913.jpg'}, {'end': 29178.581, 'src': 'embed', 'start': 29147.898, 'weight': 9, 'content': [{'end': 29151.78, 'text': 'So, just like this, you can create expressions that match various formats.', 'start': 29147.898, 'duration': 3.882}, {'end': 29155.982, 'text': 'So this was just a simple video to acquaint you with regular expressions.', 'start': 29152.36, 'duration': 3.622}, {'end': 29159.784, 'text': "We're going to be learning all about JavaScript email validation.", 'start': 29156.362, 'duration': 3.422}, {'end': 29160.665, 'text': "Let's begin.", 'start': 29160.185, 'duration': 0.48}, {'end': 29168.322, 'text': "So first of all, validation is an essential part when you're communicating with the user.", 'start': 29163.717, 'duration': 4.605}, {'end': 29173.759, 'text': 'Almost all the websites and applications that you use have forms that you need to fill in.', 'start': 29169.016, 'duration': 4.743}, {'end': 29178.581, 'text': 'And every time you fill a form, that information you provide needs to be validated.', 'start': 29174.339, 'duration': 4.242}], 'summary': 'Introduction to creating expressions with regular expressions for javascript email validation.', 'duration': 30.683, 'max_score': 29147.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3829147898.jpg'}, {'end': 29219.466, 'src': 'embed', 'start': 29190.688, 'weight': 7, 'content': [{'end': 29195.07, 'text': 'So JavaScript enables this with the help of a feature called email validation.', 'start': 29190.688, 'duration': 4.382}, {'end': 29200.112, 'text': 'Now, email validation, first of all, ensures user authenticity.', 'start': 29196.124, 'duration': 3.988}, {'end': 29207.506, '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': 29200.813, 'duration': 6.693}, {'end': 29214.143, 'text': 'And lastly, with JavaScript, one can validate a name, password, email, date, etc.', 'start': 29208.86, 'duration': 5.283}, {'end': 29219.466, 'text': "Now, I'm sure everybody has used email IDs, right? So here's a dummy email ID for you.", 'start': 29214.603, 'duration': 4.863}], 'summary': 'Javascript enables email validation for user authenticity and faster processing on the client side.', 'duration': 28.778, 'max_score': 29190.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3829190688.jpg'}, {'end': 29276.961, 'src': 'embed', 'start': 29232.474, 'weight': 8, 'content': [{'end': 29239.319, 'text': 'so the length of this personal information can be up to 64 degrees and following the at character you have the domain name,', 'start': 29232.474, 'duration': 6.845}, {'end': 29243.802, 'text': 'the domain name can be up to 253 characters.', 'start': 29239.319, 'duration': 4.483}, {'end': 29249.545, 'text': 'talking about the personal data now, this data can include any sort of information.', 'start': 29243.802, 'duration': 5.743}, {'end': 29252.868, 'text': 'you can provide your name, your birth date, etc.', 'start': 29249.545, 'duration': 3.323}, {'end': 29257.211, 'text': 'so basically, it can consist of all uppercase and lowercase letters of the alphabet.', 'start': 29252.868, 'duration': 4.343}, {'end': 29261.47, 'text': 'It can have digits from 0 to 9..', 'start': 29258.328, 'duration': 3.142}, {'end': 29263.312, 'text': 'It can include all special characters.', 'start': 29261.47, 'duration': 1.842}, {'end': 29265.953, 'text': 'And lastly, it could include the period character.', 'start': 29263.952, 'duration': 2.001}, {'end': 29272.998, 'text': 'One thing to remember is that the period character cannot occur twice and is not supposed to be either the first or the last character.', 'start': 29266.394, 'duration': 6.604}, {'end': 29276.961, 'text': 'Alright, so this was just a brief introduction to email validation.', 'start': 29273.019, 'duration': 3.942}], 'summary': 'Personal information can be up to 64 characters, domain name can be up to 253 characters. email validation includes various types of data and character constraints.', 'duration': 44.487, 'max_score': 29232.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3829232474.jpg'}, {'end': 29801.746, 'src': 'embed', 'start': 29742.515, 'weight': 12, 'content': [{'end': 29758.624, 'text': "Then I'm going to alert the user saying you have provided a valid email ID and I'm going to return true.", 'start': 29742.515, 'duration': 16.109}, {'end': 29787.277, 'text': "If the expression does not match, then I'm going to alert the user with a message saying, sorry, incorrect email ID.", 'start': 29773.789, 'duration': 13.488}, {'end': 29790.699, 'text': "And I'm going to return a false.", 'start': 29788.838, 'duration': 1.861}, {'end': 29801.746, 'text': 'So now you must be wondering, where is the return value going? So for that, I have to add the onClick event on my button.', 'start': 29794.962, 'duration': 6.784}], 'summary': "Valid email id alerts user and returns true, else alerts 'incorrect email id' and returns false.", 'duration': 59.231, 'max_score': 29742.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3829742515.jpg'}], 'start': 27899.43, 'title': 'Javascript form and email validation', 'summary': 'Covers javascript form validation, including basic validation, data format validation, regular expressions, if-else logic, preventing form submission, and email validation. it also explains the use of regular expressions with demos, flags, patterns, quantifiers, and email validation using regular expressions.', 'chapters': [{'end': 28161.888, 'start': 27899.43, 'title': 'Javascript form validation', 'summary': 'Covers javascript form validation, explaining its purpose, implementation on the client side, and the two functions performed: basic validation and data format validation.', 'duration': 262.458, 'highlights': ['JavaScript facilitates form validation on the client computer before sending it over to the server. JavaScript enables form validation on the client side, enhancing user experience and reducing unnecessary server requests.', 'The process of ensuring that the information provided is legit is called form validation. Form validation verifies the accuracy and completeness of user-provided information, enhancing data integrity and user experience.', 'Basic validation ensures that all mandatory fields are filled, implemented with the help of a simple loop. Basic validation ensures all mandatory fields are completed, enhancing data integrity and user experience.', 'Data format validation checks the data for correctness, improving data accuracy and reliability. Data format validation ensures the correctness of user-provided data, enhancing data accuracy and reliability.']}, {'end': 28749.804, 'start': 28162.428, 'title': 'Javascript form validation and regular expressions', 'summary': 'Discusses javascript form validation using if-else logic to check email and password fields, preventing form submission on empty fields, and introduces regular expressions, explaining flags, patterns, and quantifiers with examples.', 'duration': 587.376, 'highlights': ['The chapter discusses JavaScript form validation using if-else logic to check email and password fields.', 'The form validation function prevents form submission on empty fields by using return values, returning false for empty fields and true for filled fields.', 'The chapter introduces regular expressions, explaining flags, patterns, and quantifiers with examples.']}, {'end': 29147.637, 'start': 28749.804, 'title': 'Understanding regular expressions with demos', 'summary': 'Demonstrates the use of flags, patterns, and quantifiers in regular expressions through demos, highlighting the impact of case sensitivity, character ranges, quantifiers, special characters, and searching for phone numbers with different formats using javascript.', 'duration': 397.833, 'highlights': ["The demo showcases the impact of case sensitivity when using regular expressions, highlighting the need for flags like case insensitive (I) to ensure proper matching of words, with both words 'this' and 'This' getting highlighted after applying the flag. Impact of case sensitivity on regular expressions, need for flags like case insensitive (I), demonstration of proper matching after applying the flag.", 'The demonstration illustrates the use of patterns in regular expressions, showcasing the selection of letters from A to Z and the impact of case sensitivity on the highlighting of letters, effectively using the insensitive flag to highlight all letters. Illustration of using patterns in regular expressions, impact of case sensitivity on letter highlighting, effective use of insensitive flag to highlight all letters.', 'The demo explains the function of quantifiers in regular expressions, using the asterisk symbol to match occurrences of characters and demonstrating the concept of matching zero or more occurrences, emphasizing the impact on the highlighting of characters and explaining the use of quantifiers in matching specific patterns. Explanation of quantifiers in regular expressions, demonstration of matching occurrences using asterisk symbol, impact on character highlighting, explanation of using quantifiers to match specific patterns.', 'The chapter discusses the use of special characters in regular expressions, highlighting the matching of word characters, non-word characters, white spaces, and digits, as well as the use of curly braces to specify the number of occurrences for matching, effectively demonstrating the functionality of special characters. Discussion of special characters in regular expressions, demonstration of matching word characters, non-word characters, white spaces, and digits, use of curly braces to specify occurrences for matching.', 'The demo showcases the application of regular expressions for searching phone numbers with different formats, demonstrating the use of special characters and patterns to match area codes and varying digit lengths, effectively highlighting phone numbers with different formats. Application of regular expressions for searching phone numbers, demonstration of matching area codes and varying digit lengths, highlighting phone numbers with different formats.']}, {'end': 29472.323, 'start': 29147.898, 'title': 'Javascript email validation', 'summary': 'Introduces javascript email validation, highlighting the importance of validation in user communication and explaining the structure and validation rules for email ids, emphasizing the use of regular expressions and if-else conditions for form validation.', 'duration': 324.425, 'highlights': ['JavaScript email validation ensures user authenticity and facilitates faster processing on the client side, validating name, password, email, date, etc. JavaScript email validation ensures user authenticity and facilitates faster processing on the client side, validating name, password, email, date, etc.', 'The personal data in an email ID can be up to 64 characters, while the domain name can be up to 253 characters, and the personal information can include uppercase and lowercase letters, digits, special characters, and the period character with certain restrictions. The personal data in an email ID can be up to 64 characters, while the domain name can be up to 253 characters, and the personal information can include uppercase and lowercase letters, digits, special characters, and the period character with certain restrictions.', 'The chapter emphasizes the use of regular expressions and if-else conditions for form validation, demonstrating the creation of a function to check the user-provided email ID against a regular expression pattern and alerting the user based on the pattern match result. The chapter emphasizes the use of regular expressions and if-else conditions for form validation, demonstrating the creation of a function to check the user-provided email ID against a regular expression pattern and alerting the user based on the pattern match result.']}, {'end': 29882.571, 'start': 29472.323, 'title': 'Validating email with regular expressions', 'summary': 'Explains the process of validating email ids using a regular expression in javascript, including the construction of the regular expression pattern, the logic for checking validity, and examples of valid and invalid email ids.', 'duration': 410.248, 'highlights': ['The regular expression pattern for validating email IDs is constructed by considering all possible scenarios, including lowercase and uppercase letters, digits, period, underscore, and their occurrences. N/A', 'The plus symbol in the regular expression indicates one or more occurrences of the preceding characters, while the question mark indicates zero or one occurrence of the previous expression. N/A', 'The logic for checking the validity of the email ID involves using if-else statements and the onClick event for validation, where a valid email ID triggers an alert and returns true, while an invalid one triggers a different alert and returns false. N/A', 'Examples of valid and invalid email IDs are provided, demonstrating successful validation for email IDs with correct format and incorrect validation for those with missing symbols. N/A']}], 'duration': 1983.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3827899430.jpg', 'highlights': ['JavaScript facilitates form validation on the client side, enhancing user experience and reducing unnecessary server requests.', 'Form validation verifies the accuracy and completeness of user-provided information, enhancing data integrity and user experience.', 'Data format validation ensures the correctness of user-provided data, enhancing data accuracy and reliability.', 'Basic validation ensures all mandatory fields are completed, enhancing data integrity and user experience.', 'The chapter discusses JavaScript form validation using if-else logic to check email and password fields.', 'The form validation function prevents form submission on empty fields by using return values, returning false for empty fields and true for filled fields.', 'The chapter introduces regular expressions, explaining flags, patterns, and quantifiers with examples.', 'JavaScript email validation ensures user authenticity and facilitates faster processing on the client side, validating name, password, email, date, etc.', 'The personal data in an email ID can be up to 64 characters, while the domain name can be up to 253 characters, and the personal information can include uppercase and lowercase letters, digits, special characters, and the period character with certain restrictions.', 'The chapter emphasizes the use of regular expressions and if-else conditions for form validation, demonstrating the creation of a function to check the user-provided email ID against a regular expression pattern and alerting the user based on the pattern match result.', 'The regular expression pattern for validating email IDs is constructed by considering all possible scenarios, including lowercase and uppercase letters, digits, period, underscore, and their occurrences.', 'The plus symbol in the regular expression indicates one or more occurrences of the preceding characters, while the question mark indicates zero or one occurrence of the previous expression.', 'The logic for checking the validity of the email ID involves using if-else statements and the onClick event for validation, where a valid email ID triggers an alert and returns true, while an invalid one triggers a different alert and returns false.', 'Examples of valid and invalid email IDs are provided, demonstrating successful validation for email IDs with correct format and incorrect validation for those with missing symbols.']}, {'end': 31373.051, 'segs': [{'end': 29969.217, 'src': 'embed', 'start': 29937.074, 'weight': 0, 'content': [{'end': 29938.515, 'text': 'why JavaScript promises?', 'start': 29937.074, 'duration': 1.441}, {'end': 29948.159, 'text': 'Now, JavaScript is predominantly single-threaded, meaning all processes contain the execution of instructions in a single sequence.', 'start': 29939.535, 'duration': 8.624}, {'end': 29953.111, 'text': 'So basically in simple terms, one command is processed at a time.', 'start': 29948.809, 'duration': 4.302}, {'end': 29961.334, 'text': 'Now, if a function relies on the result of another function, it basically has to wait for the other function to finish and return,', 'start': 29953.631, 'duration': 7.703}, {'end': 29964.095, 'text': 'and until then the current function remains idle.', 'start': 29961.334, 'duration': 2.761}, {'end': 29969.217, 'text': "Now this can be extremely frustrating because it's time consuming and very restrictive.", 'start': 29964.675, 'duration': 4.542}], 'summary': "Javascript's single-threaded nature leads to idle time, necessitating the use of promises for efficient asynchronous operations.", 'duration': 32.143, 'max_score': 29937.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3829937074.jpg'}, {'end': 30109.48, 'src': 'embed', 'start': 30080.524, 'weight': 1, 'content': [{'end': 30081.745, 'text': 'They cannot change their state.', 'start': 30080.524, 'duration': 1.221}, {'end': 30085.528, 'text': "So once they're either fulfilled or rejected, they're said to be settled.", 'start': 30082.125, 'duration': 3.403}, {'end': 30089.628, 'text': 'So when a promise is fulfilled, it has to do a particular job.', 'start': 30086.826, 'duration': 2.802}, {'end': 30092.289, 'text': 'So for that we make use of the then method.', 'start': 30090.088, 'duration': 2.201}, {'end': 30099.094, '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': 30092.75, 'duration': 6.344}, {'end': 30103.717, 'text': 'Alright, same with the case of the scenario when the promise is rejected.', 'start': 30099.814, 'duration': 3.903}, {'end': 30109.48, 'text': 'It makes use of a catch method which is used to attach a callback when the promise has been rejected.', 'start': 30104.437, 'duration': 5.043}], 'summary': 'Promises are settled as fulfilled or rejected. use then for fulfilled and catch for rejected.', 'duration': 28.956, 'max_score': 30080.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3830080524.jpg'}, {'end': 30151.208, 'src': 'embed', 'start': 30122.263, 'weight': 2, 'content': [{'end': 30124.023, 'text': 'Now the promise is in the pending state.', 'start': 30122.263, 'duration': 1.76}, {'end': 30128.424, 'text': 'Now this promise runs for an asynchronous action.', 'start': 30125.863, 'duration': 2.561}, {'end': 30130.804, 'text': 'Now we check if the action is successful.', 'start': 30128.904, 'duration': 1.9}, {'end': 30134.025, 'text': 'If it is a yes, then we call the then method.', 'start': 30131.465, 'duration': 2.56}, {'end': 30137.086, 'text': 'And if it is a no, then the catch method is called.', 'start': 30134.485, 'duration': 2.601}, {'end': 30142.107, 'text': 'And to end it, if it is fulfilled, then the asynchronous action is performed.', 'start': 30138.306, 'duration': 3.801}, {'end': 30146.545, 'text': 'And if it is not, that is if it is rejected, then error handling is performed.', 'start': 30142.563, 'duration': 3.982}, {'end': 30151.208, 'text': 'And lastly, the values of these methods is returned to the promise.', 'start': 30147.626, 'duration': 3.582}], 'summary': 'Asynchronous action handling using promise with then and catch methods.', 'duration': 28.945, 'max_score': 30122.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3830122263.jpg'}, {'end': 30407.531, 'src': 'embed', 'start': 30378.764, 'weight': 3, 'content': [{'end': 30381.526, 'text': 'So this was a simple example showing how a promise works.', 'start': 30378.764, 'duration': 2.762}, {'end': 30386.557, 'text': "Now let's go ahead and understand nested promises.", 'start': 30383.493, 'duration': 3.064}, {'end': 30390.363, 'text': 'So for that, let me just comment this out.', 'start': 30387.158, 'duration': 3.205}, {'end': 30396.923, 'text': "And now let's create a function that returns promises.", 'start': 30393.28, 'duration': 3.643}, {'end': 30401.266, 'text': "So in our case, what we're going to do is first we'll check for the fuel tank.", 'start': 30397.503, 'duration': 3.763}, {'end': 30407.531, 'text': "Now in our case, we're taking a scenario where the fuel tank is empty and the engine of the car is overheating.", 'start': 30401.847, 'duration': 5.684}], 'summary': 'Example illustrates promise usage, next focus on nested promises.', 'duration': 28.767, 'max_score': 30378.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3830378764.jpg'}, {'end': 30605.542, 'src': 'embed', 'start': 30571.069, 'weight': 4, 'content': [{'end': 30573.01, 'text': 'So here we simply call the engine function.', 'start': 30571.069, 'duration': 1.941}, {'end': 30577.313, 'text': 'So let me just say return engine.', 'start': 30573.55, 'duration': 3.763}, {'end': 30578.794, 'text': 'All right.', 'start': 30578.414, 'duration': 0.38}, {'end': 30582.036, 'text': 'Now this is a nested promise in itself.', 'start': 30579.975, 'duration': 2.061}, {'end': 30585.339, 'text': 'So on top of it, I can run the then method again.', 'start': 30582.397, 'duration': 2.942}, {'end': 30594.385, 'text': "So if the tank is empty and if the engine is overheating, then I'll just check if it is safe for traveling or not.", 'start': 30586.96, 'duration': 7.425}, {'end': 30605.542, 'text': 'So let me say function and here let me just return the method travel.', 'start': 30595.214, 'duration': 10.328}], 'summary': 'Nested promise checks for empty tank and engine overheating to determine travel safety.', 'duration': 34.473, 'max_score': 30571.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3830571069.jpg'}, {'end': 30780.862, 'src': 'embed', 'start': 30736.274, 'weight': 5, 'content': [{'end': 30738.895, 'text': 'So this was how you can make use of nested promises.', 'start': 30736.274, 'duration': 2.621}, {'end': 30744.043, 'text': "We're going to learn JavaScript asynchronous concepts that is async and await.", 'start': 30739.517, 'duration': 4.526}, {'end': 30750.01, 'text': "Firstly, let's understand the basic concepts of synchronous and asynchronous programming.", 'start': 30745.304, 'duration': 4.706}, {'end': 30754.395, 'text': 'In case of synchronous programming, all the actions are performed sequentially.', 'start': 30750.45, 'duration': 3.945}, {'end': 30758.197, 'text': 'So you have the execution of the function 1.', 'start': 30754.976, 'duration': 3.221}, {'end': 30765.038, 'text': 'after which you have function 2 and then you have function 3 and after all of these are executed, the program terminates.', 'start': 30758.197, 'duration': 6.841}, {'end': 30770.62, 'text': 'Now, although synchronous programming is clean and has lesser errors, it has its own drawbacks.', 'start': 30765.559, 'duration': 5.061}, {'end': 30775.381, 'text': 'The entire system is halted when a particular process is being executed.', 'start': 30771.1, 'duration': 4.281}, {'end': 30780.862, 'text': 'Now, as a result of which it is time consuming and the system is not used to its full capacity.', 'start': 30775.401, 'duration': 5.461}], 'summary': 'Learned about javascript async and await, comparing synchronous and asynchronous programming, with emphasis on drawbacks of synchronous programming.', 'duration': 44.588, 'max_score': 30736.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3830736274.jpg'}, {'end': 30908.225, 'src': 'embed', 'start': 30847.292, 'weight': 7, 'content': [{'end': 30853.474, 'text': 'The function is basically accompanied by the keyword async indicating that it returns a promise.', 'start': 30847.292, 'duration': 6.182}, {'end': 30857.735, 'text': 'Within this function, the await keyword is applied to the promise that is being returned.', 'start': 30853.914, 'duration': 3.821}, {'end': 30861.976, 'text': 'Now the await keyword ensures that the function waits for the promise to resolve.', 'start': 30858.115, 'duration': 3.861}, {'end': 30866.698, 'text': "Now on the surface, the execution looks synchronous while it's actually asynchronous.", 'start': 30862.577, 'duration': 4.121}, {'end': 30872.423, 'text': 'Now at the place of usage of the await keyword, the execution of the function is practically blocked.', 'start': 30867.378, 'duration': 5.045}, {'end': 30878.148, 'text': 'Now async functions make the code more readable and are easier to handle when compared to promises.', 'start': 30873.303, 'duration': 4.845}, {'end': 30884.393, 'text': 'Now to give you the general syntax, you have the async keyword associated with the function name,', 'start': 30878.788, 'duration': 5.605}, {'end': 30887.276, 'text': 'within which we have the await keyword with a particular promise.', 'start': 30884.393, 'duration': 2.883}, {'end': 30891.119, 'text': "Now to help you understand the entire concept better, let's look at a demo.", 'start': 30887.716, 'duration': 3.403}, {'end': 30895.381, 'text': "Now I've created a file called async await in my Visual Studio Code.", 'start': 30891.96, 'duration': 3.421}, {'end': 30901.283, 'text': "So what we're going to be doing is that we're going to have two functions that help you check for the result.", 'start': 30896.121, 'duration': 5.162}, {'end': 30908.225, 'text': 'Now you pass the score as a parameter to these functions, which, in turn, return promises, telling if you have passed,', 'start': 30901.823, 'duration': 6.402}], 'summary': 'Async functions use await to make code more readable and execute asynchronously.', 'duration': 60.933, 'max_score': 30847.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3830847292.jpg'}, {'end': 31210.877, 'src': 'embed', 'start': 31186.634, 'weight': 10, 'content': [{'end': 31194.058, 'text': "Alright, now what I'm going to do is I'm going to call my function, right? So I'm just going to make use of the async keyword while calling it.", 'start': 31186.634, 'duration': 7.424}, {'end': 31206.354, 'text': 'So I say async function and let me call the function calculate results okay.', 'start': 31194.418, 'duration': 11.936}, {'end': 31210.877, 'text': "so now, inside this method i'm going to call the functions result and grade.", 'start': 31206.354, 'duration': 4.523}], 'summary': 'Using async keyword to call calculate results function.', 'duration': 24.243, 'max_score': 31186.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831186634.jpg'}, {'end': 31340.939, 'src': 'embed', 'start': 31311.251, 'weight': 9, 'content': [{'end': 31314.152, 'text': 'What if the value that I pass is less than 50?', 'start': 31311.251, 'duration': 2.901}, {'end': 31316.613, 'text': "Right, for that I'm going to have to catch an error.", 'start': 31314.152, 'duration': 2.461}, {'end': 31321.814, 'text': 'So what I can do is that I can place this entire code within the try block.', 'start': 31317.553, 'duration': 4.261}, {'end': 31324.435, 'text': 'Alright, so let me just say try.', 'start': 31322.414, 'duration': 2.021}, {'end': 31328.75, 'text': 'And now what I can do is I can catch.', 'start': 31326.468, 'duration': 2.282}, {'end': 31334.514, 'text': 'Now, if there is an error, it gets caught and then I display it.', 'start': 31328.77, 'duration': 5.744}, {'end': 31339.838, 'text': 'Let me say console log error.', 'start': 31336.315, 'duration': 3.523}, {'end': 31340.939, 'text': 'All right.', 'start': 31340.519, 'duration': 0.42}], 'summary': 'Code handles errors for values less than 50 by using try-catch block.', 'duration': 29.688, 'max_score': 31311.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831311251.jpg'}], 'start': 29883.072, 'title': 'Javascript promises and asynchronous programming', 'summary': 'Explains javascript promises, their states and methods, enabling asynchronous programming, and covers async/await concepts, with examples demonstrating nested promises and simplified code execution. it also showcases a demo and comparison of synchronous and asynchronous programming, resulting in a pass or fail outcome in a specific scenario.', 'chapters': [{'end': 30146.545, 'start': 29883.072, 'title': 'Javascript promises explained', 'summary': 'Explains the concept of javascript promises, their purpose of overcoming the limitations of single-threaded javascript, their states and methods, and the flow of asynchronous actions, with a focus on enabling asynchronous programming.', 'duration': 263.473, 'highlights': ['JavaScript Promises Purpose JavaScript promises were introduced to overcome the limitations of single-threaded execution, allowing simultaneous processing of asynchronous actions and enabling efficient utilization of the system.', 'JavaScript Promises States and Methods A promise can be in pending, fulfilled, or rejected states, and the then method is used for handling fulfilled promises, while the catch method is used for handling rejected promises.', 'JavaScript Promises Asynchronous Actions Flow The flow of asynchronous actions involves creating a new promise in the pending state, checking the success of the action, and performing the asynchronous action if fulfilled or handling error if rejected.']}, {'end': 30735.314, 'start': 30147.626, 'title': 'Understanding promises in javascript', 'summary': 'Covers the general syntax of creating and using promises in javascript, along with a simple demo and an example of nested promises, demonstrating the resolution and rejection of promises based on specific conditions, with a final message being displayed.', 'duration': 587.688, 'highlights': ['The chapter covers the general syntax of creating and using promises in JavaScript It explains the usage of the let keyword to create a new promise object with a function taking resolve and reject parameters.', 'A simple demo is provided to demonstrate the resolution and rejection of promises based on specific conditions, with a final message being displayed It illustrates the process of resolving and rejecting promises based on the condition of the fuel tank, with corresponding messages being displayed, providing a practical example of promise usage.', "An example of nested promises is presented, demonstrating the resolution and rejection of promises based on specific conditions It showcases the creation of nested promises to check for the empty fuel tank and overheating engine, leading to a message indicating the car's safety for traveling, with a final 'done' message being displayed upon successful resolution of the promises."]}, {'end': 31130.163, 'start': 30736.274, 'title': 'Javascript asynchronous programming', 'summary': 'Explains javascript asynchronous concepts like async and await, comparing synchronous and asynchronous programming, and demonstrates the usage of async and await functions through nested promises.', 'duration': 393.889, 'highlights': ['The chapter explains JavaScript asynchronous concepts like async and await It introduces async and await as purely asynchronous programming concepts built on promises, making the code more readable and easier to handle.', 'Comparing synchronous and asynchronous programming It contrasts synchronous and asynchronous programming, highlighting the drawbacks of synchronous programming, such as system halting and time consumption.', 'Demonstrates the usage of async and await functions through nested promises It demonstrates the usage of async and await functions through the creation and handling of nested promises to check for results and grades based on scores.']}, {'end': 31373.051, 'start': 31130.183, 'title': 'Using async/await in javascript', 'summary': 'Demonstrates the use of async and await in javascript to simplify code execution and handle promises, with an example showing the calculation of grades and error handling, resulting in a pass or fail outcome.', 'duration': 242.868, 'highlights': ['The use of async and await simplifies the code execution by handling promises and making it easier to read and understand.', 'The example demonstrates the calculation of grades where a value below 50 results in an error being caught and displayed.', "The function 'calculate results' is called using the async keyword to handle the asynchronous operations of the result and grade functions, ensuring the sequence of execution and displaying the final grade after resolving the promise.", "The await keyword is used to ensure that the functions 'result' and 'grade' are executed sequentially and their returned values are stored in variables, simplifying the handling of asynchronous operations."]}], 'duration': 1489.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3829883072.jpg', 'highlights': ['JavaScript promises were introduced to overcome the limitations of single-threaded execution, allowing simultaneous processing of asynchronous actions and enabling efficient utilization of the system.', 'A promise can be in pending, fulfilled, or rejected states, and the then method is used for handling fulfilled promises, while the catch method is used for handling rejected promises.', 'The flow of asynchronous actions involves creating a new promise in the pending state, checking the success of the action, and performing the asynchronous action if fulfilled or handling error if rejected.', 'It illustrates the process of resolving and rejecting promises based on the condition of the fuel tank, with corresponding messages being displayed, providing a practical example of promise usage.', "It showcases the creation of nested promises to check for the empty fuel tank and overheating engine, leading to a message indicating the car's safety for traveling, with a final 'done' message being displayed upon successful resolution of the promises.", 'It introduces async and await as purely asynchronous programming concepts built on promises, making the code more readable and easier to handle.', 'It contrasts synchronous and asynchronous programming, highlighting the drawbacks of synchronous programming, such as system halting and time consumption.', 'It demonstrates the usage of async and await functions through the creation and handling of nested promises to check for results and grades based on scores.', 'The use of async and await simplifies the code execution by handling promises and making it easier to read and understand.', 'The example demonstrates the calculation of grades where a value below 50 results in an error being caught and displayed.', "The function 'calculate results' is called using the async keyword to handle the asynchronous operations of the result and grade functions, ensuring the sequence of execution and displaying the final grade after resolving the promise.", "The await keyword is used to ensure that the functions 'result' and 'grade' are executed sequentially and their returned values are stored in variables, simplifying the handling of asynchronous operations."]}, {'end': 34330.553, 'segs': [{'end': 31440.554, 'src': 'embed', 'start': 31416.354, 'weight': 0, 'content': [{'end': 31423.318, 'text': 'React is a JavaScript library used to build fast and interactive user interfaces for both web and mobile applications.', 'start': 31416.354, 'duration': 6.964}, {'end': 31428.042, 'text': "Now one thing that makes React extremely powerful is the fact that it's open source.", 'start': 31423.678, 'duration': 4.364}, {'end': 31432.166, 'text': 'Any user can access its source code, modify it and enhance it.', 'start': 31428.403, 'duration': 3.763}, {'end': 31437.251, 'text': 'In a typical model view controller architecture, React defines the view part of the application.', 'start': 31432.326, 'duration': 4.925}, {'end': 31440.554, 'text': 'It is also responsible for how the app looks and feels.', 'start': 31437.431, 'duration': 3.123}], 'summary': 'React is a fast, open-source javascript library for web and mobile ui, defining the view part of the application.', 'duration': 24.2, 'max_score': 31416.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831416354.jpg'}, {'end': 31482.782, 'src': 'embed', 'start': 31455.629, 'weight': 1, 'content': [{'end': 31461.815, 'text': 'We have the search component, a profile description component, stories component, and a post list component.', 'start': 31455.629, 'duration': 6.186}, {'end': 31466.399, 'text': 'These components make the code easier to debug and always remain discrete.', 'start': 31462.075, 'duration': 4.324}, {'end': 31471.315, 'text': 'Components also make development and maintenance of web applications faster,', 'start': 31466.772, 'duration': 4.543}, {'end': 31476.478, 'text': 'as multiple developers can work simultaneously on different components of the same web application.', 'start': 31471.315, 'duration': 5.163}, {'end': 31479.36, 'text': "Now let's see why React is so popular these days.", 'start': 31476.839, 'duration': 2.521}, {'end': 31482.782, 'text': 'React helps in creation of dynamic web applications.', 'start': 31479.66, 'duration': 3.122}], 'summary': 'Using components makes code easier to debug and faster development, react helps create dynamic web applications.', 'duration': 27.153, 'max_score': 31455.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831455629.jpg'}, {'end': 31642.403, 'src': 'embed', 'start': 31612.111, 'weight': 2, 'content': [{'end': 31614.592, 'text': 'This makes a big difference when it comes to speed.', 'start': 31612.111, 'duration': 2.481}, {'end': 31616.933, 'text': 'Coming to the next feature, performance.', 'start': 31615.012, 'duration': 1.921}, {'end': 31618.753, 'text': 'React uses Virtual DOM.', 'start': 31617.333, 'duration': 1.42}, {'end': 31623.475, 'text': 'As discussed earlier, Virtual DOM impacts the speed of the web applications.', 'start': 31619.134, 'duration': 4.341}, {'end': 31629.037, 'text': 'We also took an example of Instagram and learned how multiple components can affect the development time.', 'start': 31623.875, 'duration': 5.162}, {'end': 31631.698, 'text': 'They help improve performance drastically.', 'start': 31629.237, 'duration': 2.461}, {'end': 31634.139, 'text': 'The next feature is one-way data binding.', 'start': 31631.998, 'duration': 2.141}, {'end': 31637.24, 'text': 'This means information flows in only one direction.', 'start': 31634.419, 'duration': 2.821}, {'end': 31642.403, 'text': 'One-way data binding is specifically used when information is displayed and not updated.', 'start': 31637.72, 'duration': 4.683}], 'summary': "React's virtual dom and one-way data binding enhance speed and performance.", 'duration': 30.292, 'max_score': 31612.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831612111.jpg'}, {'end': 31704.459, 'src': 'embed', 'start': 31674.697, 'weight': 3, 'content': [{'end': 31675.957, 'text': "Now let's look at a few of them.", 'start': 31674.697, 'duration': 1.26}, {'end': 31680.499, 'text': 'React Native lets you build mobile applications using only JavaScript.', 'start': 31676.357, 'duration': 4.142}, {'end': 31686.221, 'text': 'A React Native app is a real mobile application and not just a web application running on your mobile devices.', 'start': 31680.779, 'duration': 5.442}, {'end': 31692.254, 'text': 'Thousands of applications like Facebook, Instagram, Pinterest, Skype use React Native.', 'start': 31686.772, 'duration': 5.482}, {'end': 31695.155, 'text': 'The next popular React extension is Flux.', 'start': 31692.614, 'duration': 2.541}, {'end': 31698.637, 'text': 'Flux is the application architecture that Facebook uses.', 'start': 31695.476, 'duration': 3.161}, {'end': 31704.459, 'text': 'Flux implements a unidirectional flow which makes it easier to understand what actually is going on.', 'start': 31698.997, 'duration': 5.462}], 'summary': 'React native enables building real mobile apps with javascript. thousands of apps like facebook, instagram, and skype use react native. flux, used by facebook, implements a unidirectional flow for easier understanding.', 'duration': 29.762, 'max_score': 31674.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831674697.jpg'}, {'end': 31828.435, 'src': 'embed', 'start': 31783.492, 'weight': 8, 'content': [{'end': 31787.135, 'text': 'Components can be reused multiple times across the application.', 'start': 31783.492, 'duration': 3.643}, {'end': 31789.257, 'text': 'This reduces the development time.', 'start': 31787.415, 'duration': 1.842}, {'end': 31791.399, 'text': 'Consider the following code snippet.', 'start': 31789.597, 'duration': 1.802}, {'end': 31796.643, 'text': 'A component is implemented as a JavaScript class having some state and a render method.', 'start': 31791.779, 'duration': 4.864}, {'end': 31800.124, 'text': 'State is the data which we want the component to render.', 'start': 31797.103, 'duration': 3.021}, {'end': 31804.665, 'text': 'The render method is responsible for how the UI looks and feels to the user.', 'start': 31800.424, 'duration': 4.241}, {'end': 31806.665, 'text': 'The next concept is State.', 'start': 31805.045, 'duration': 1.62}, {'end': 31810.386, 'text': 'State of a component is an object that holds some data.', 'start': 31806.965, 'duration': 3.421}, {'end': 31813.687, 'text': 'This data influences the output of a component.', 'start': 31810.746, 'duration': 2.941}, {'end': 31818.648, 'text': 'Every time the state of an object changes, the component is re-rendered onto the screen.', 'start': 31814.127, 'duration': 4.521}, {'end': 31820.548, 'text': "Now let's see what props are.", 'start': 31818.988, 'duration': 1.56}, {'end': 31825.452, 'text': 'Props, or short for properties, allow us to pass arguments or data to components.', 'start': 31820.808, 'duration': 4.644}, {'end': 31828.435, 'text': 'Properties help make components more dynamic.', 'start': 31825.832, 'duration': 2.603}], 'summary': 'Reusable components reduce development time and improve ui flexibility.', 'duration': 44.943, 'max_score': 31783.492, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831783492.jpg'}, {'end': 31903.063, 'src': 'embed', 'start': 31870.268, 'weight': 4, 'content': [{'end': 31872.77, 'text': "Once you start working on them, you'll get a good hang of it.", 'start': 31870.268, 'duration': 2.502}, {'end': 31879.813, 'text': "Finally, let's go through the impact of React on the IT industry and get insights into the salaries of React developers.", 'start': 31873.09, 'duration': 6.723}, {'end': 31884.735, 'text': 'Statistics show that React developers earn way more than other web developers.', 'start': 31880.353, 'duration': 4.382}, {'end': 31892.338, 'text': 'According to PayScale, the average salary for a React developer in the United States is a whopping US$91, 000.', 'start': 31885.096, 'duration': 7.242}, {'end': 31896, 'text': 'The average salary for a React developer in India is 7.25 lakhs per annum.', 'start': 31892.699, 'duration': 3.301}, {'end': 31903.063, 'text': 'Over the recent years, React has gained immense popularity and is being adopted by many companies.', 'start': 31897.481, 'duration': 5.582}], 'summary': "React developers earn significantly high salaries, averaging us$91,000 in the united states and 7.25 lakhs per annum in india, contributing to react's growing popularity in the it industry.", 'duration': 32.795, 'max_score': 31870.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831870268.jpg'}, {'end': 31954.777, 'src': 'embed', 'start': 31910.325, 'weight': 5, 'content': [{'end': 31917.408, 'text': 'Statistics show that front-end developers have wholeheartedly adopted this lightweight framework, foregoing other available options.', 'start': 31910.325, 'duration': 7.083}, {'end': 31923.601, 'text': 'If you are skilled and have a knack for front-end development, React can help you gain fantastic career opportunities.', 'start': 31917.819, 'duration': 5.782}, {'end': 31931.963, 'text': 'Lastly, talking about a few companies that use React devotionally, we have Facebook, Instagram, Netflix, Dropbox, WhatsApp among others.', 'start': 31924.041, 'duration': 7.922}, {'end': 31936.805, 'text': "In this video, we'll be learning all about React installation on Windows.", 'start': 31932.743, 'duration': 4.062}, {'end': 31943.573, 'text': 'To set up the React development environment, we need two things installed – Node and and a text editor of your choice.', 'start': 31937.025, 'duration': 6.548}, {'end': 31946.194, 'text': "So let's begin by installing Node.js.", 'start': 31943.934, 'duration': 2.26}, {'end': 31949.155, 'text': 'We can head to the official Node.js website.', 'start': 31946.574, 'duration': 2.581}, {'end': 31952.516, 'text': 'Save, Download, Node.js.', 'start': 31949.595, 'duration': 2.921}, {'end': 31954.777, 'text': 'So here you can see the Windows installer.', 'start': 31952.856, 'duration': 1.921}], 'summary': 'Front-end developers favor react; used by facebook, instagram, netflix, dropbox, whatsapp. learning react installation on windows.', 'duration': 44.452, 'max_score': 31910.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831910325.jpg'}, {'end': 32160.143, 'src': 'embed', 'start': 32132.503, 'weight': 7, 'content': [{'end': 32136.465, 'text': 'Notice that each component adds something to how the homepage looks.', 'start': 32132.503, 'duration': 3.962}, {'end': 32141.008, 'text': 'Alright, reusability is one of the salient features of React components.', 'start': 32136.986, 'duration': 4.022}, {'end': 32147.613, 'text': 'One component can be reused several times across the application, and this improves the development speed.', 'start': 32141.508, 'duration': 6.105}, {'end': 32149.354, 'text': 'Components can also be nested.', 'start': 32147.873, 'duration': 1.481}, {'end': 32153.197, 'text': 'One component can internally consist of several other components.', 'start': 32149.755, 'duration': 3.442}, {'end': 32160.143, 'text': 'In its minimal form, a component must define a render method that specifies how exactly the application looks and feels.', 'start': 32153.538, 'duration': 6.605}], 'summary': 'React components boost reusability, improving development speed with nesting and render method.', 'duration': 27.64, 'max_score': 32132.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3832132503.jpg'}, {'end': 32626.973, 'src': 'embed', 'start': 32599.937, 'weight': 9, 'content': [{'end': 32603.118, 'text': "Now I won't get into the nitty gritties of it because they're advanced topics.", 'start': 32599.937, 'duration': 3.181}, {'end': 32609.962, 'text': 'But to give you a brief insight, Higher order components are basically functions that take in a component and return a new component.', 'start': 32603.298, 'duration': 6.664}, {'end': 32616.146, 'text': 'The whole ideology behind higher order components is to facilitate the reusability of component logic.', 'start': 32610.202, 'duration': 5.944}, {'end': 32617.707, 'text': "Okay, so let's see how this works.", 'start': 32616.246, 'duration': 1.461}, {'end': 32619.308, 'text': "Let's go back to our code editor.", 'start': 32617.907, 'duration': 1.401}, {'end': 32622.651, 'text': "Let's create a component in our components folder.", 'start': 32619.569, 'duration': 3.082}, {'end': 32626.973, 'text': "Let's call the component Click.js.", 'start': 32622.931, 'duration': 4.042}], 'summary': 'Higher order components enhance component reusability.', 'duration': 27.036, 'max_score': 32599.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3832599937.jpg'}, {'end': 33029.629, 'src': 'embed', 'start': 32997.131, 'weight': 10, 'content': [{'end': 33002.337, 'text': 'A React component can be considered pure if it renders the same output for the same state and props.', 'start': 32997.131, 'duration': 5.206}, {'end': 33005.377, 'text': "So let's take an example to explain pure components.", 'start': 33002.716, 'duration': 2.661}, {'end': 33012.1, 'text': "So let's go back to our VS code and create two component classes, one for a regular component and the other for a pure component.", 'start': 33005.557, 'duration': 6.543}, {'end': 33016.281, 'text': "Now using this example, I'll show you exactly how pure component is more helpful.", 'start': 33012.199, 'duration': 4.082}, {'end': 33020.142, 'text': "Okay, so let's create a pure component.js file.", 'start': 33016.641, 'duration': 3.501}, {'end': 33021.923, 'text': 'I say pure comp.', 'start': 33020.482, 'duration': 1.441}, {'end': 33029.629, 'text': "So here, I'm going to use a snippet rpce that is going to create a pure component class.", 'start': 33024.144, 'duration': 5.485}], 'summary': 'A react pure component renders the same output for the same state and props.', 'duration': 32.498, 'max_score': 32997.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3832997131.jpg'}, {'end': 33261.069, 'src': 'embed', 'start': 33234.373, 'weight': 11, 'content': [{'end': 33239.716, 'text': 'So in conclusion, pure components optimize React codes and also improves performance.', 'start': 33234.373, 'duration': 5.343}, {'end': 33242.898, 'text': 'So coming to the last topic, component lifecycle.', 'start': 33240.176, 'duration': 2.722}, {'end': 33247.12, 'text': 'So basically, component lifecycle explains the stages the component goes through.', 'start': 33243.057, 'duration': 4.063}, {'end': 33250.622, 'text': 'The entire lifecycle of a component can be divided into three parts.', 'start': 33247.28, 'duration': 3.342}, {'end': 33253.444, 'text': 'We have mounting, updation and unmounting.', 'start': 33250.862, 'duration': 2.582}, {'end': 33258.027, 'text': 'So the first thing that gets invoked in the lifecycle is componentWillMount.', 'start': 33253.604, 'duration': 4.423}, {'end': 33261.069, 'text': 'It is invoked right before the initial rendering occurs.', 'start': 33258.227, 'duration': 2.842}], 'summary': 'Optimizing react codes with pure components improves performance, component lifecycle involves mounting, updating, and unmounting stages.', 'duration': 26.696, 'max_score': 33234.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3833234373.jpg'}, {'end': 33345.258, 'src': 'embed', 'start': 33317.995, 'weight': 12, 'content': [{'end': 33320.777, 'text': 'Properties help make components more dynamic.', 'start': 33317.995, 'duration': 2.782}, {'end': 33325.561, 'text': 'Props are passed to components in the way similar to that of HTML track attributes.', 'start': 33321.057, 'duration': 4.504}, {'end': 33327.902, 'text': "Now, we'll look at this a little later in the video.", 'start': 33325.9, 'duration': 2.002}, {'end': 33331.245, 'text': 'Props in a component are read-only and cannot be changed.', 'start': 33328.102, 'duration': 3.143}, {'end': 33335.908, 'text': 'One thing to remember is that props are sent by the parent to the children components.', 'start': 33331.504, 'duration': 4.404}, {'end': 33339.591, 'text': 'Hence, the children components cannot make any changes to these props.', 'start': 33336.148, 'duration': 3.443}, {'end': 33345.258, 'text': "Now that we've learnt about props in brief, let's go ahead and create our application using props.", 'start': 33340.194, 'duration': 5.064}], 'summary': 'Props in components are read-only, passed from parent to children, and cannot be changed.', 'duration': 27.263, 'max_score': 33317.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3833317995.jpg'}], 'start': 31373.652, 'title': 'Understanding reactjs fundamentals', 'summary': 'Covers the basic concepts and advantages of reactjs, including its popularity, performance enhancements, prerequisites, salary insights, and creating and implementing reusable components. it also explores react basics, state, props, and lifecycle optimization, offering real-world insights and developer advantages.', 'chapters': [{'end': 31476.478, 'start': 31373.652, 'title': 'Introduction to reactjs', 'summary': 'Covers the basic concepts of reactjs, including its definition, the fundamental concepts of components, props, and states, and its real-time application in web development, highlighting its open-source nature and the benefits of using components for faster development.', 'duration': 102.826, 'highlights': ["React is a JavaScript library used to build fast and interactive user interfaces for both web and mobile applications. It's open source and defines the view part of the application.", 'Components make development and maintenance of web applications faster, as multiple developers can work simultaneously on different components of the same web application.', 'The video covers all the basic concepts of ReactJS, including what React.js is, installing and setting up the React environment, and the fundamental concepts of components, props, and states, concluding with creating a simple calculator app.', 'In a typical model view controller architecture, React defines the view part of the application and is responsible for how the app looks and feels.', 'React was built by Jordan Walke, an engineer at Facebook.']}, {'end': 31850.853, 'start': 31476.839, 'title': 'Exploring react: features and advantages', 'summary': 'Explores the features and advantages of react, including its popularity, performance enhancements such as virtual dom and one-way data binding, the ease of learning compared to other frameworks, its use for mobile applications, extensions like react native and flux, and the building blocks of react including components, state, and props.', 'duration': 374.014, 'highlights': ["React uses reusable components, decreasing development time. React's use of reusable components reduces development time by allowing the same components to be used in multiple parts of the application, enhancing efficiency and productivity.", "React's virtual DOM and one-way data binding contribute to performance enhancements. The virtual DOM and one-way data binding in React contribute to performance improvements, making the web applications faster and more efficient compared to traditional methods.", 'React Native, a cross-compatible mobile application development extension, is used by popular applications like Facebook, Instagram, and Pinterest. React Native, an extension of React, is used to build mobile applications that are cross-compatible and has been adopted by popular applications such as Facebook, Instagram, and Pinterest, showcasing its wide usage and reliability.', 'Flux, a unidirectional application architecture used by Facebook, simplifies understanding and interaction within the application. Flux, an application architecture used by Facebook, implements a unidirectional flow, simplifying the understanding and interaction within the application, contributing to a more streamlined development process.', 'Components, state, and props are the essential building blocks of React, providing reusability and dynamic functionality. Components, state, and props are the fundamental building blocks of React, offering reusability, dynamic data management, and enhanced user interface development.']}, {'end': 32619.308, 'start': 31851.514, 'title': 'React basics & salary insights', 'summary': "Discusses the prerequisites for working with react, including programming concepts, javascript, and html familiarity, and highlights the impact of react on the it industry, revealing react developers' higher salaries and its growing popularity. it also provides a step-by-step guide for react installation and development on windows, and explains the basics of react components, including their types, reusability, nesting, and export functionalities.", 'duration': 767.794, 'highlights': ['The average salary for a React developer in the United States is a whopping US$91,000, as per PayScale, showcasing the higher earning potential of React developers.', 'React has gained immense popularity over the recent years and is being adopted by many companies, as indicated by Google Trends data, positioning React as a sought-after framework in the IT industry.', 'Statistics show that front-end developers have wholeheartedly adopted React, foregoing other available options, indicating the strong preference for React in the industry.', 'The transcript provides a detailed step-by-step guide for installing Node.js and a text editor, such as VS Code, for setting up the React development environment on Windows, offering practical insights for beginners.', 'The chapter explains the basics of React components, including their reusability, nesting capabilities, and the types of components, providing fundamental knowledge for beginners in React development.']}, {'end': 33104.288, 'start': 32619.569, 'title': 'Creating react components and implementing reusability', 'summary': 'Demonstrates creating react components, implementing reusability, and using pure components to avoid unnecessary re-renders. it covers creating click.js and counter.js components with button event handling, importing components in app.js, creating a higher-order component for appending user, and explaining pure components with examples.', 'duration': 484.719, 'highlights': ['Implementing event handling and state in Click.js and Counter.js components The chapter demonstrates implementing event handling for button click and mouse enter events in Click.js and Counter.js components, utilizing states and updating values, and importing these components in app.js for functionality testing.', 'Creating and using a higher-order component for reusability and modification The chapter explains the creation of a higher-order component (HOC) named higher-order.js, demonstrating its usage to modify and reuse Counter.js and Click.js components by appending a user-defined message, and includes the process of passing components as parameters and modifying the render output.', "Explaining pure components and their benefits in minimizing unnecessary re-renders The chapter introduces pure components, highlighting their avoidance of unnecessary re-renders by shallow comparison of states and props, and the explanation of shouldComponentUpdate method's absence, emphasizing the rendering of same output for the same state and props for pure components."]}, {'end': 34330.553, 'start': 33104.549, 'title': 'Reactjs state, props, and lifecycle', 'summary': 'Covers the optimization of react code using pure components, the three phases of component lifecycle, the usage of props and its limitations, the usage of state, and the process of updating the state using setstate method. it also demonstrates the application of state to change messages and images in a react component.', 'duration': 1226.004, 'highlights': ['Pure components optimize React codes and improves performance Pure components optimize React codes and improve performance by preventing unnecessary re-rendering. This optimization is beneficial for enhancing the overall performance of React applications.', "The component lifecycle consists of mounting, updating, and unmounting phases The component lifecycle encompasses three phases: mounting, updating, and unmounting. Each phase includes specific methods that are invoked at different stages of a component's life.", 'Props are used to pass data and event handlers to children components Props are utilized to transmit data and event handlers from parent components to their children. They are immutable and cannot be changed by the child components.', 'State is an object that stores component properties and can be updated using the setState method State in React is an object that holds component properties and can be modified using the setState method. This enables the dynamic updating of values in a component.']}], 'duration': 2956.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3831373652.jpg', 'highlights': ['React is a JavaScript library for fast and interactive UIs for web and mobile apps.', 'Components make web app development faster and allow simultaneous work by multiple developers.', "React's virtual DOM and one-way data binding contribute to performance enhancements.", 'React Native is used by popular apps like Facebook, Instagram, and Pinterest.', 'The average salary for a React developer in the US is US$91,000, showcasing higher earning potential.', 'React has gained immense popularity and is being adopted by many companies.', 'The chapter provides a detailed guide for setting up the React development environment on Windows.', 'The chapter explains the basics of React components, including reusability and nesting capabilities.', 'The chapter demonstrates implementing event handling and state in components.', 'Creating and using a higher-order component for reusability and modification is explained.', 'Pure components optimize React codes and improve performance by preventing unnecessary re-rendering.', 'The component lifecycle consists of mounting, updating, and unmounting phases.', 'Props are used to pass data and event handlers to children components.', 'State is an object that stores component properties and can be updated using the setState method.']}, {'end': 35973.437, 'segs': [{'end': 34461.274, 'src': 'embed', 'start': 34438.373, 'weight': 0, 'content': [{'end': 34446.501, 'text': 'Angular and JavaScript together bring in structure and consistency to your web applications and also provide scalability and maintainability.', 'start': 34438.373, 'duration': 8.128}, {'end': 34450.484, 'text': 'Angular is specifically developed for single-page applications.', 'start': 34447.461, 'duration': 3.023}, {'end': 34461.274, 'text': 'So now the question arises, what exactly is Angular? Angular is an open-source JavaScript framework written completely in TypeScript.', 'start': 34450.805, 'duration': 10.469}], 'summary': 'Angular and javascript provide structure, consistency, and scalability for web applications. angular is developed for single-page applications and is an open-source framework written in typescript.', 'duration': 22.901, 'max_score': 34438.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834438373.jpg'}, {'end': 34510.109, 'src': 'embed', 'start': 34484.204, 'weight': 1, 'content': [{'end': 34489.266, 'text': 'Now, these single-page applications are basically applications that get loaded just once.', 'start': 34484.204, 'duration': 5.062}, {'end': 34492.107, 'text': 'So, the main page gets loaded onto your browser.', 'start': 34489.966, 'duration': 2.141}, {'end': 34497.069, 'text': 'So, any further interactions does not lead to loading of subsequent pages.', 'start': 34492.547, 'duration': 4.522}, {'end': 34502.171, 'text': 'Anything that has to be done further is just an addition to the already loaded page.', 'start': 34497.629, 'duration': 4.542}, {'end': 34506.24, 'text': 'So these single page applications are primarily developed using Angular.', 'start': 34502.631, 'duration': 3.609}, {'end': 34510.109, 'text': "Moving ahead, let's look at the features of Angular.", 'start': 34506.882, 'duration': 3.227}], 'summary': 'Single-page applications load once, no subsequent page loading; developed primarily using angular.', 'duration': 25.905, 'max_score': 34484.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834484204.jpg'}, {'end': 34589.472, 'src': 'embed', 'start': 34554.781, 'weight': 3, 'content': [{'end': 34558.144, 'text': 'Moving on to our next feature, we have TypeScript.', 'start': 34554.781, 'duration': 3.363}, {'end': 34566.996, 'text': 'Now TypeScript defines a set of types to JavaScript which helps you write JavaScript that is easier to understand.', 'start': 34559.045, 'duration': 7.951}, {'end': 34574.787, 'text': 'Now all the TypeScript code compiles down to basic JavaScript that can run smoothly on any platform.', 'start': 34568.285, 'duration': 6.502}, {'end': 34580.829, 'text': 'Now TypeScript is not mandatory for developing an Angular application, but it is highly recommended.', 'start': 34575.147, 'duration': 5.682}, {'end': 34589.472, 'text': "The main reason it's highly recommended is that it offers better syntactic structure while making the code base easier to understand and maintain.", 'start': 34581.369, 'duration': 8.103}], 'summary': 'Typescript enhances javascript code for easier understanding and maintenance; not mandatory but highly recommended for angular development.', 'duration': 34.691, 'max_score': 34554.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834554781.jpg'}, {'end': 34631.07, 'src': 'embed', 'start': 34601.378, 'weight': 4, 'content': [{'end': 34607.964, 'text': 'Data binding is a process that allows you to manipulate web page elements using the web browser.', 'start': 34601.378, 'duration': 6.586}, {'end': 34614.709, 'text': 'Now, it mainly employs dynamic HTML and does not require complex scripting or programming.', 'start': 34608.284, 'duration': 6.425}, {'end': 34622.447, 'text': 'It is used in web pages that include interactive components like calculators, tutorials, games, etc.', 'start': 34615.825, 'duration': 6.622}, {'end': 34631.07, 'text': 'Now incremental display of a web page makes data binding extremely convenient when pages contain a large amount of data.', 'start': 34622.888, 'duration': 8.182}], 'summary': "Data binding simplifies web page manipulation using dynamic html, without complex scripting. it's used in pages with interactive components and for convenient incremental display of large data.", 'duration': 29.692, 'max_score': 34601.378, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834601378.jpg'}, {'end': 34696.195, 'src': 'embed', 'start': 34648.367, 'weight': 5, 'content': [{'end': 34652.951, 'text': 'This allows the framework to connect the tom to the model data via the controller.', 'start': 34648.367, 'duration': 4.584}, {'end': 34655.794, 'text': "The last feature we're discussing is testing.", 'start': 34653.652, 'duration': 2.142}, {'end': 34659.805, 'text': 'Angular uses Jasmine to run its various tests.', 'start': 34656.804, 'duration': 3.001}, {'end': 34665.506, 'text': 'The Jasmine framework allows various functionalities to write different kinds of test cases.', 'start': 34660.145, 'duration': 5.361}, {'end': 34674.567, 'text': 'Karma is a task runner for the tests that use a configuration file to set the startup, reporters, and testing framework.', 'start': 34666.226, 'duration': 8.341}, {'end': 34677.208, 'text': "So with that, we've covered the features of Angular.", 'start': 34674.848, 'duration': 2.36}, {'end': 34682.289, 'text': "So let's go ahead and understand the architecture of Angular.", 'start': 34678.148, 'duration': 4.141}, {'end': 34686.527, 'text': 'Angular is a full-fledged MVC framework.', 'start': 34683.664, 'duration': 2.863}, {'end': 34696.195, 'text': 'It provides a strong opinion on how the application should be structured and offers bidirectional data flow and updates the real DOM.', 'start': 34687.327, 'duration': 8.868}], 'summary': 'Angular framework features include testing with jasmine and karma, and it follows the mvc architecture.', 'duration': 47.828, 'max_score': 34648.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834648367.jpg'}, {'end': 34781.85, 'src': 'embed', 'start': 34755.336, 'weight': 7, 'content': [{'end': 34760.699, 'text': "Angular allows you to write modular services and have them injected wherever they're needed.", 'start': 34755.336, 'duration': 5.363}, {'end': 34765.021, 'text': 'This greatly improves the testability and reusability of the same.', 'start': 34761.559, 'duration': 3.462}, {'end': 34768.183, 'text': "Don't worry if you can't wrap your head around these topics.", 'start': 34765.321, 'duration': 2.862}, {'end': 34771.164, 'text': "We're going to discuss them further in the coming videos.", 'start': 34768.583, 'duration': 2.581}, {'end': 34774.106, 'text': 'Next advantage is testing.', 'start': 34772.525, 'duration': 1.581}, {'end': 34778.188, 'text': 'Angular has been built from the ground up with testability in mind.', 'start': 34774.406, 'duration': 3.782}, {'end': 34781.85, 'text': 'You can literally test every part of your application.', 'start': 34778.928, 'duration': 2.922}], 'summary': 'Angular promotes modular services, improving testability and enabling testing of every part of the application.', 'duration': 26.514, 'max_score': 34755.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834755336.jpg'}, {'end': 34925.43, 'src': 'embed', 'start': 34849.655, 'weight': 8, 'content': [{'end': 34855.798, 'text': 'In this release, the Angular CLI was optimized and commands like ng-update and ng-add were added.', 'start': 34849.655, 'duration': 6.143}, {'end': 34863.823, 'text': 'In the Angular 7 release, prompts were introduced which provided tips in CLI about the functions being used.', 'start': 34855.818, 'duration': 8.005}, {'end': 34869.026, 'text': 'In Angular 8, IVRenderer and Bazel were introduced.', 'start': 34865.104, 'duration': 3.922}, {'end': 34873.664, 'text': 'And finally, the most recent release was Angular 9.', 'start': 34870.103, 'duration': 3.561}, {'end': 34876.805, 'text': 'Now, this came with the better framework and Angular material.', 'start': 34873.664, 'duration': 3.141}, {'end': 34881.307, 'text': 'Now, this completely switched to the Ivy renderer as a default compiler.', 'start': 34877.125, 'duration': 4.182}, {'end': 34887.009, 'text': "Now that we've learned about the pros of using Angular, let's look at some of the limitations of Angular.", 'start': 34881.807, 'duration': 5.202}, {'end': 34891.57, 'text': 'First up is the steep learning curve.', 'start': 34889.77, 'duration': 1.8}, {'end': 34898.733, 'text': 'Now, since Angular is a complete full-fledged framework, it becomes difficult for learners to begin with.', 'start': 34891.891, 'duration': 6.842}, {'end': 34906.498, 'text': 'You need to be acquainted with simple topics and then move on to more advanced topics to become proficient in this language.', 'start': 34899.534, 'duration': 6.964}, {'end': 34909.64, 'text': 'Next up is limited SEO options.', 'start': 34907.439, 'duration': 2.201}, {'end': 34916.364, 'text': 'Now, Angular offers limited SEO options and poor accessibility to search engine crawlers.', 'start': 34910.38, 'duration': 5.984}, {'end': 34919.288, 'text': 'with verbose and complex.', 'start': 34917.568, 'duration': 1.72}, {'end': 34925.43, 'text': 'Now a common issue faced by the Angular community is the verbosity of the framework.', 'start': 34919.909, 'duration': 5.521}], 'summary': 'Optimized angular cli, introduced prompts in angular 7, ivrenderer and bazel in angular 8, and ivy renderer in angular 9. angular faced limitations such as steep learning curve, limited seo options, and verbosity.', 'duration': 75.775, 'max_score': 34849.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834849655.jpg'}, {'end': 35013.756, 'src': 'embed', 'start': 34984.409, 'weight': 9, 'content': [{'end': 34987.911, 'text': 'However, the learning curve of Angular is clear-cut.', 'start': 34984.409, 'duration': 3.502}, {'end': 34993.094, 'text': 'In the beginning it could be a little intimidating, but once you start using the tool,', 'start': 34988.652, 'duration': 4.442}, {'end': 34997.036, 'text': 'it becomes way more easier to comprehend and understand what is going on.', 'start': 34993.094, 'duration': 3.942}, {'end': 35002.842, 'text': "And lastly, Let's look at some of the companies that use Angular today.", 'start': 34998.777, 'duration': 4.065}, {'end': 35013.756, 'text': 'Many top-tier companies like Nike, Forbes, Google, HBO, Sony, Upwork among others readily deploy Angular.', 'start': 35003.903, 'duration': 9.853}], 'summary': "Angular's learning curve is clear-cut, making it easier to comprehend and used by top-tier companies like nike, forbes, google, hbo, sony, and upwork.", 'duration': 29.347, 'max_score': 34984.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834984409.jpg'}, {'end': 35404.076, 'src': 'embed', 'start': 35376.595, 'weight': 12, 'content': [{'end': 35379.998, 'text': 'Now, firstly, they are the building blocks of an application.', 'start': 35376.595, 'duration': 3.403}, {'end': 35388.465, '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': 35380.958, 'duration': 7.507}, {'end': 35391.867, 'text': 'and these components are a subset of directives.', 'start': 35389.525, 'duration': 2.342}, {'end': 35396.55, 'text': "Now don't worry about what directives are because we'll cover them later on in the series.", 'start': 35392.287, 'duration': 4.263}, {'end': 35399.312, 'text': 'But to give you an idea, there are three types of directives.', 'start': 35396.891, 'duration': 2.421}, {'end': 35404.076, 'text': 'You have the structural directives, the attribute directives and the component directives.', 'start': 35399.713, 'duration': 4.363}], 'summary': 'Components are the building blocks of an application, forming a hierarchy and comprising three types of directives.', 'duration': 27.481, 'max_score': 35376.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3835376595.jpg'}, {'end': 35513.912, 'src': 'embed', 'start': 35483.857, 'weight': 13, 'content': [{'end': 35486.078, 'text': 'It helps you create your first Angular application.', 'start': 35483.857, 'duration': 2.221}, {'end': 35491.201, 'text': "Now, let's go ahead and create our first component.", 'start': 35487.678, 'duration': 3.523}, {'end': 35496.966, 'text': 'Now, the command used to create our component is ng-gc and your component name.', 'start': 35491.902, 'duration': 5.064}, {'end': 35500.308, 'text': 'Once executed, it creates four different files.', 'start': 35497.706, 'duration': 2.602}, {'end': 35503.611, 'text': "Now, let's just see how this works on our VS Code.", 'start': 35500.689, 'duration': 2.922}, {'end': 35507.754, 'text': 'Now, what you can do is head to your terminal and type in the command ng.', 'start': 35504.251, 'duration': 3.503}, {'end': 35513.912, 'text': 'G, C, and provide a name for your component.', 'start': 35509.95, 'duration': 3.962}], 'summary': "Creating first angular app and component with 'ng-gc' command, resulting in four files.", 'duration': 30.055, 'max_score': 35483.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3835483857.jpg'}, {'end': 35863.266, 'src': 'embed', 'start': 35838.217, 'weight': 14, 'content': [{'end': 35846.962, 'text': "So this is how you can create your own components and don't forget to incorporate these selectors into your final HTML file.", 'start': 35838.217, 'duration': 8.745}, {'end': 35851.508, 'text': 'So moving on to our next topic, component decorator metadata.', 'start': 35847.782, 'duration': 3.726}, {'end': 35859.4, 'text': 'Now as mentioned earlier, the at component decorator accepts a metadata object that provides information about the component.', 'start': 35851.668, 'duration': 7.732}, {'end': 35863.266, 'text': 'Correct? Here is a list of properties of the Metadata object.', 'start': 35860.165, 'duration': 3.101}], 'summary': 'Creating components, incorporating selectors, and understanding component decorator metadata properties.', 'duration': 25.049, 'max_score': 35838.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3835838217.jpg'}], 'start': 34330.914, 'title': 'Angular framework and its components', 'summary': 'Introduces the angular framework, highlighting its features, advantages, and its role in developing single-page applications. it also covers the features of angular including typescript, data binding, mvc, and testing, along with its pros, cons, prerequisites, and a detailed introduction to angular components.', 'chapters': [{'end': 34554.021, 'start': 34330.914, 'title': 'Introduction to angular framework', 'summary': 'Introduces the angular framework, highlighting its features, advantages, and its role in developing single-page applications, with a focus on its relevance in modern web and mobile application development.', 'duration': 223.107, 'highlights': ['Angular is an open-source JavaScript framework written in TypeScript, primarily aimed at developing single-page applications and maintained by Google, providing scalability and maintainability (mentions Google, TypeScript, and scalability).', 'The single-page applications developed using Angular do not lead to the loading of subsequent pages, making it efficient for user interactions and providing a seamless user experience (quantifies the efficiency of single-page applications and seamless user experience).', 'JavaScript, along with Angular, brings structure and consistency to web applications, providing a standard structure for developers and designed for web, desktop, and mobile platforms (emphasizes the structure and consistency brought by JavaScript and Angular, and the target platforms).', 'The features of Angular include the document object model, tag script, data binding, and testing, which contribute to its robustness and effectiveness in developing modern applications (provides insight into the specific features of Angular).', 'The chapter emphasizes the widespread use of mobile and web applications, highlighting the role of Angular in providing a seamless user experience and interface to billions of people globally (quantifies the usage and impact of mobile and web applications).']}, {'end': 34876.805, 'start': 34554.781, 'title': 'Angular: typescript, data binding, mvc, and testing', 'summary': "Covers the features of angular including typescript for easier javascript, data binding for web page manipulation, two-way data binding in angular, and testing using jasmine and karma, followed by an overview of angular's architecture and its advantages, as well as the evolution of different angular versions.", 'duration': 322.024, 'highlights': ["TypeScript offers better syntactic structure and easier code maintenance, and can be installed as an NPM package using the command 'npm install-g typescript' TypeScript defines types to JavaScript, making the code easier to understand and maintain, and can be installed using the command 'npm install-g typescript'", 'Data binding allows manipulation of web page elements using dynamic HTML, particularly useful for incremental display of a large amount of data, and Angular uses two-way data binding to connect the UI element and model state Data binding manipulates web page elements using dynamic HTML, useful for incremental display of data, and Angular uses two-way data binding to connect UI and model state', 'Angular utilizes Jasmine for running tests, and Karma as a task runner with a configuration file for startup, reporters, and testing framework Angular uses Jasmine for tests, and Karma as a task runner with a configuration file for startup, reporters, and testing framework', 'Angular is a full-fledged MVC framework with a strong opinion on application structure, bidirectional data flow, and real DOM updates Angular is a full-fledged MVC framework with a strong opinion on application structure, bidirectional data flow, and real DOM updates', 'Angular provides advantages such as custom components, data binding, dependency injection, testability, comprehensive solutions, and excellent browser compatibility Angular offers custom components, data binding, dependency injection, testability, comprehensive solutions, and excellent browser compatibility', 'Different Angular versions have been released, each adding to the efficiency of the framework, with Angular 9 introducing significant improvements and Angular material Different Angular versions have been released, with Angular 9 introducing significant improvements and Angular material']}, {'end': 35335.945, 'start': 34877.125, 'title': 'Angular: pros, cons, and prerequisites', 'summary': 'Delves into the limitations of angular, such as the steep learning curve, limited seo options, verbosity, and migration issues, while also providing an overview of the prerequisites for learning angular, including node.js, angular cli, and ides. furthermore, it gives a step-by-step demonstration of creating an angular application and highlights the key components and their functionalities.', 'duration': 458.82, '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, indicating its widespread adoption and relevance in the industry.', "Angular offers limited SEO options and poor accessibility to search engine crawlers. Angular's SEO capabilities are restricted, leading to challenges in search engine visibility and accessibility, potentially impacting the discoverability of Angular-powered content.", 'Angular is a complete full-fledged framework, making it difficult for learners to begin with. The comprehensive nature of Angular as a framework presents a steep learning curve for beginners, requiring familiarity with basic and advanced topics to achieve proficiency.']}, {'end': 35973.437, 'start': 35336.926, 'title': 'Introduction to angular components', 'summary': 'Introduces angular components, explaining how they are the building blocks of an application, created using typescript class and decorator, belong to the ng module, and control their runtime behavior by implementing lifecycle hooks. it then demonstrates the practical creation of components and explains the properties of the metadata object used in component decorator. key points include the creation of components using ng-gc command, the structure of component files, and the properties of the metadata object.', 'duration': 636.511, 'highlights': ['Angular components are the building blocks of an application, branching out into a hierarchy and are a subset of directives Components are the fundamental parts of an Angular application, forming a hierarchy and being a subset of directives.', 'Creation of a component using the ng-gc command results in the generation of four different files The ng-gc command generates four files for a new component, including HTML, CSS, .ts, and spec.ts files.', 'Properties of the Metadata object in the component decorator include selector, template, template URL, styles, and style URLs The Metadata object in the component decorator contains properties such as selector, template, template URL, styles, and style URLs, which define various aspects of the component.']}], 'duration': 1642.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3834330914.jpg', 'highlights': ['Angular is an open-source JavaScript framework written in TypeScript, providing scalability and maintainability.', 'The single-page applications developed using Angular are efficient for user interactions and provide a seamless user experience.', 'JavaScript, along with Angular, brings structure and consistency to web applications, designed for web, desktop, and mobile platforms.', 'TypeScript offers better syntactic structure and easier code maintenance, defining types to JavaScript.', 'Data binding allows manipulation of web page elements using dynamic HTML, particularly useful for incremental display of data.', 'Angular utilizes Jasmine for running tests and Karma as a task runner with a configuration file for startup, reporters, and testing framework.', 'Angular is a full-fledged MVC framework with a strong opinion on application structure, bidirectional data flow, and real DOM updates.', 'Angular provides advantages such as custom components, data binding, dependency injection, testability, comprehensive solutions, and excellent browser compatibility.', 'Different Angular versions have been released, each adding to the efficiency of the framework, with Angular 9 introducing significant improvements and Angular material.', 'Several top companies use Angular for their projects, indicating its widespread adoption and relevance in the industry.', 'Angular offers limited SEO options and poor accessibility to search engine crawlers, potentially impacting the discoverability of Angular-powered content.', 'The comprehensive nature of Angular as a framework presents a steep learning curve for beginners, requiring familiarity with basic and advanced topics to achieve proficiency.', 'Angular components are the fundamental parts of an Angular application, forming a hierarchy and being a subset of directives.', 'The ng-gc command generates four files for a new component, including HTML, CSS, .ts, and spec.ts files.', 'The Metadata object in the component decorator contains properties such as selector, template, template URL, styles, and style URLs, which define various aspects of the component.']}, {'end': 38004.052, 'segs': [{'end': 36098.543, 'src': 'embed', 'start': 36070.84, 'weight': 0, 'content': [{'end': 36076.124, 'text': 'So dependency injection or DI keeps the code more flexible, testable, and mutable.', 'start': 36070.84, 'duration': 5.284}, {'end': 36081.269, 'text': 'Also, classes can inherit external logic without having to create on its own.', 'start': 36076.605, 'duration': 4.664}, {'end': 36085.392, 'text': 'And lastly, DI benefits directives, pipes, and components.', 'start': 36081.889, 'duration': 3.503}, {'end': 36091.337, 'text': "Next up, let's have a look at the drawback of not using dependency injection.", 'start': 36087.274, 'duration': 4.063}, {'end': 36098.543, 'text': "Now let's consider class PostalDetails that is dependent on the number and the address class.", 'start': 36092.298, 'duration': 6.245}], 'summary': 'Dependency injection makes code flexible, testable, and benefits directives, pipes, and components.', 'duration': 27.703, 'max_score': 36070.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3836070840.jpg'}, {'end': 36198.478, 'src': 'embed', 'start': 36170.81, 'weight': 1, 'content': [{'end': 36173.312, 'text': "Now let's look at DI as a pattern.", 'start': 36170.81, 'duration': 2.502}, {'end': 36176.567, 'text': 'Dependency injection, as you all know,', 'start': 36174.466, 'duration': 2.101}, {'end': 36183.23, 'text': 'is a coding pattern where a class receives its dependencies from an external source rather than creating them on its own.', 'start': 36176.567, 'duration': 6.663}, {'end': 36191.714, 'text': "So here in the above example, we have moved the definition of dependencies from inside the constructor to the constructor's parameters.", 'start': 36183.55, 'duration': 8.164}, {'end': 36196.177, 'text': "So the postal details class doesn't create the dependencies anymore.", 'start': 36192.415, 'duration': 3.762}, {'end': 36198.478, 'text': 'It just consumes them.', 'start': 36197.157, 'duration': 1.321}], 'summary': 'Dependency injection pattern moves dependency definition to constructor parameters, enabling external source provision.', 'duration': 27.668, 'max_score': 36170.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3836170810.jpg'}, {'end': 36372.169, 'src': 'embed', 'start': 36345.167, 'weight': 3, 'content': [{'end': 36349.03, 'text': 'So now the service contains all the employee data that needs to be displayed.', 'start': 36345.167, 'duration': 3.863}, {'end': 36351.892, 'text': "Right So let's go ahead and write the data.", 'start': 36349.53, 'duration': 2.362}, {'end': 36354.975, 'text': "So first we're going to make use of three arrays.", 'start': 36352.453, 'duration': 2.522}, {'end': 36358.077, 'text': "I'm going to be displaying employee records for three employees.", 'start': 36355.375, 'duration': 2.702}, {'end': 36361.64, 'text': "So I'll have to create three arrays and provide certain information.", 'start': 36358.598, 'duration': 3.042}, {'end': 36363.442, 'text': "So let's go ahead and do that.", 'start': 36362.301, 'duration': 1.141}, {'end': 36367.605, 'text': 'All right.', 'start': 36367.265, 'duration': 0.34}, {'end': 36372.169, 'text': "So the array I'm creating is called info1 for the first employee.", 'start': 36367.645, 'duration': 4.524}], 'summary': 'Service contains employee data for 3 employees, using 3 arrays to display info.', 'duration': 27.002, 'max_score': 36345.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3836345167.jpg'}, {'end': 36577.473, 'src': 'embed', 'start': 36537.93, 'weight': 4, 'content': [{'end': 36543.396, 'text': "So what we need to do is we'll have to first import the service into the component.ts file.", 'start': 36537.93, 'duration': 5.466}, {'end': 36548.95, 'text': 'The key reason behind doing this is that when Angular creates this component,', 'start': 36544.366, 'duration': 4.584}, {'end': 36553.214, 'text': 'an instance of this service class is also made to perform the necessary tasks.', 'start': 36548.95, 'duration': 4.264}, {'end': 36557.017, 'text': "Correct? So let's go ahead and just import it here.", 'start': 36554.155, 'duration': 2.862}, {'end': 36577.473, 'text': "So I'll say import records services, I'm sorry, service from and let's say records.service.", 'start': 36557.037, 'duration': 20.436}], 'summary': 'Import records service into component.ts for angular component instantiation.', 'duration': 39.543, 'max_score': 36537.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3836537930.jpg'}, {'end': 36992.483, 'src': 'embed', 'start': 36966.438, 'weight': 5, 'content': [{'end': 36972.36, 'text': 'Now this approach is a programming paradigm revolving around data flows and propagation of change.', 'start': 36966.438, 'duration': 5.922}, {'end': 36980.084, 'text': 'Now with reactive forms, the component directly manages the data flows between the form controls and the data models.', 'start': 36973.381, 'duration': 6.703}, {'end': 36984.786, 'text': 'Now reactive forms are code driven unlike template driven approach.', 'start': 36981.404, 'duration': 3.382}, {'end': 36992.483, 'text': 'Reactive forms eliminate the anti-pattern of updating the data model via two-way data binding.', 'start': 36986.997, 'duration': 5.486}], 'summary': 'Reactive forms manage data flows code-driven, eliminating two-way data binding.', 'duration': 26.045, 'max_score': 36966.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3836966438.jpg'}, {'end': 37156.787, 'src': 'embed', 'start': 37102.092, 'weight': 6, 'content': [{'end': 37107.195, 'text': "The first thing we need to do is we'll have to import the forms module.", 'start': 37102.092, 'duration': 5.103}, {'end': 37108.016, 'text': 'All right.', 'start': 37107.675, 'duration': 0.341}, {'end': 37112.138, 'text': 'So, but before we begin, let me tell you what the use case is.', 'start': 37108.656, 'duration': 3.482}, {'end': 37117.382, 'text': "So we're going to be creating a user registration form, which is going to include four fields.", 'start': 37112.639, 'duration': 4.743}, {'end': 37120.864, 'text': 'That is the first name, last name, email ID and a password.', 'start': 37117.442, 'duration': 3.422}, {'end': 37124.949, 'text': 'All right, so now let me show you how to import the forms module.', 'start': 37121.567, 'duration': 3.382}, {'end': 37132.533, 'text': "So in your main app.module.ts file, you'll have to import forms module from angular forms.", 'start': 37125.309, 'duration': 7.224}, {'end': 37137.996, 'text': "All right, and then in your imports, you'll have to just call it here.", 'start': 37134.234, 'duration': 3.762}, {'end': 37141.898, 'text': 'All right, so this is just a simple step.', 'start': 37140.397, 'duration': 1.501}, {'end': 37148.662, 'text': "And now once you're done with that, let's go ahead and start our form creation.", 'start': 37143.079, 'duration': 5.583}, {'end': 37156.787, 'text': "so here in my component.html, let's enclose the entire form within a div tag.", 'start': 37149.702, 'duration': 7.085}], 'summary': 'Creating user registration form with 4 fields using angular forms module.', 'duration': 54.695, 'max_score': 37102.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3837102092.jpg'}, {'end': 37750.808, 'src': 'embed', 'start': 37680.883, 'weight': 8, 'content': [{'end': 37688.168, 'text': 'Alright, so here in my input tag, I just mention required, meaning this field cannot be empty.', 'start': 37680.883, 'duration': 7.285}, {'end': 37704.545, 'text': 'and minLength to 2 and maxLength to say 7.', 'start': 37689.495, 'duration': 15.05}, {'end': 37715.392, 'text': "Alright So to check this, let's go to our browser and here let me submit the form without filling the first name.", 'start': 37704.545, 'duration': 10.847}, {'end': 37719.562, 'text': 'and evidently there has to be an error.', 'start': 37716.761, 'duration': 2.801}, {'end': 37732.085, 'text': 'So when I submit it and I look here within forms and here controls and my first name you can see that an error is shown.', 'start': 37720.362, 'duration': 11.723}, {'end': 37735.706, 'text': 'Here it says required equals true.', 'start': 37732.325, 'duration': 3.381}, {'end': 37738.547, 'text': 'That means that there is one error.', 'start': 37736.406, 'duration': 2.141}, {'end': 37741.848, 'text': 'Now you can make use of these form control objects.', 'start': 37739.287, 'duration': 2.561}, {'end': 37750.808, 'text': 'you can leverage form control objects to ensure field validation and display a message whenever an error occurs right?', 'start': 37742.642, 'duration': 8.166}], 'summary': 'Using form control objects to enforce field validation with required, minlength of 2, and maxlength of 7, resulting in error display.', 'duration': 69.925, 'max_score': 37680.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3837680883.jpg'}], 'start': 35973.937, 'title': 'Angular features and forms', 'summary': 'Discusses dependency injection, employee data display, angular forms, including custom tags, reactive and template-driven approaches, and form validation, covering topics such as creating a user registration form and handling form validation rules.', 'chapters': [{'end': 36344.706, 'start': 35973.937, 'title': 'Understanding dependency injection in angular', 'summary': 'Discusses the concept of dependency injection in angular, including its definition, drawbacks of not using it, its design pattern, and a demonstration of how it can be used with services and classes.', 'duration': 370.769, 'highlights': ['Dependency injection (DI) allows reusing the same code across components, making the code flexible and testable, benefitting directives, pipes, and components. DI allows reusing code, making it flexible and testable, benefiting various Angular components.', 'The drawback of not using dependency injection includes inflexibility and unsuitability for testing, as changes in dependencies require corresponding changes in the class, and it leads to chain reactions if classes have dependencies on other classes. Not using DI leads to inflexibility, unsuitability for testing, and potential chain reactions when classes have dependencies.', 'Dependency injection as a pattern involves a class receiving dependencies from an external source, overcoming the drawbacks of not using DI. DI as a pattern involves classes receiving dependencies from external sources, overcoming the drawbacks of not using DI.']}, {'end': 36724.113, 'start': 36345.167, 'title': 'Employee data display', 'summary': 'Covers creating arrays with employee information, importing a service into the component file, retrieving data from the service, and displaying the information on the ui using bootstrap.', 'duration': 378.946, 'highlights': ['Creating arrays with employee information for three employees. The speaker mentions creating three arrays to store employee records, including name, employee ID, and email ID, for three employees.', 'Importing the service into the component file and creating an instance of the service class. The process of importing the service into the component file and creating an instance of the service class for accessing its methods and variables is explained.', 'Retrieving data from the service and adding it to arrays using methods. The speaker demonstrates the creation of methods to retrieve data from the service class and add it to arrays in the component file.', 'Displaying employee information on the UI using Bootstrap and binding methods with buttons. The process of creating buttons for different employees, retrieving data from the service, and displaying it on the UI using Bootstrap classes is detailed.']}, {'end': 37048.855, 'start': 36725.153, 'title': 'Angular forms and dependency injection', 'summary': 'Covers creating a custom html tag for a component, adding it to the main component, and utilizing dependency injection to display employee information, with a demonstration of angular forms, including template-driven and reactive approaches, and form control and form group usage.', 'duration': 323.702, 'highlights': ['Demonstration of creating a custom HTML tag for a component and adding it to the main component Employee details heading, Simply Learn logo, and three different buttons created; information of the employee displayed upon button click', 'Explanation of Angular forms, including template-driven and reactive approaches Two types of form building supported by Angular: template-driven approach and reactive approach', 'Details on template-driven approach for creating forms in Angular Usage of conventional form tag, ngModule tag, and ngControlGroup module for creating forms; form value generation using the form.value object', 'Explanation of reactive forms in Angular Reactive forms involve data flows and propagation of change, and allow for direct management of data flows between form controls and data models', 'Overview of form control and form group in Angular Form control enables validation of input fields, checking for values and states such as touched, untouched, dirty, pristine, valid, and invalid']}, {'end': 37590.427, 'start': 37050.663, 'title': 'Angular forms: creating a user registration form', 'summary': 'Demonstrates the creation of a user registration form in vs code using angular forms, including the import of forms module, form creation, alignment, addition of ngmodel directive, handling form submission, and javascript representation using ngform.', 'duration': 539.764, 'highlights': ['Creation of a user registration form with four fields: first name, last name, email ID, and password The use case is to create a user registration form with four fields: first name, last name, email ID, and password.', 'Importing the forms module from Angular forms and including it in the main app.module.ts file The forms module from Angular forms is imported and included in the main app.module.ts file to enable the use of forms in the application.', "Usage of ngModel directive to provide form controls to input fields in the form The ngModel directive is added to the input tags to provide form controls to every input field, as seen in the browser's inspection.", 'Handling form submission using ngSubmit property and defining the submit method in component.ts file The ngSubmit property is used to handle form submission, and the submit method is defined in the component.ts file to be called upon form submission.', 'Utilizing ngForm directive to create a JavaScript representation for validating form fields The ngForm directive is used to create a JavaScript representation for validating all the form fields, providing a better understanding of form validation.']}, {'end': 38004.052, 'start': 37592.328, 'title': 'Form validation in angular', 'summary': 'Demonstrates how to validate form input fields in angular, including specifying properties such as required, minlength, and maxlength, accessing form control objects like errors, invalid, and touched, and using ng-if to display error messages based on form validation rules.', 'duration': 411.724, 'highlights': ['The chapter demonstrates how to validate form input fields in Angular, including specifying properties such as required, minLength, and maxLength.', 'It shows how to access form control objects like errors, invalid, and touched to ensure field validation and display error messages.', "The demonstration includes using ng-if to display error messages based on form validation rules, such as displaying 'first name required' if the field is empty and 'short first name' if the length is less than two."]}], 'duration': 2030.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3835973937.jpg', 'highlights': ['DI allows reusing code, making it flexible and testable, benefiting various Angular components.', 'Dependency injection as a pattern involves classes receiving dependencies from external sources, overcoming the drawbacks of not using DI.', 'The drawback of not using dependency injection includes inflexibility, unsuitability for testing, and potential chain reactions when classes have dependencies.', 'The speaker mentions creating three arrays to store employee records, including name, employee ID, and email ID, for three employees.', 'The process of importing the service into the component file and creating an instance of the service class for accessing its methods and variables is explained.', 'Reactive forms involve data flows and propagation of change, and allow for direct management of data flows between form controls and data models.', 'Creation of a user registration form with four fields: first name, last name, email ID, and password.', 'The forms module from Angular forms is imported and included in the main app.module.ts file to enable the use of forms in the application.', 'The chapter demonstrates how to validate form input fields in Angular, including specifying properties such as required, minLength, and maxLength.', 'It shows how to access form control objects like errors, invalid, and touched to ensure field validation and display error messages.']}, {'end': 39483.559, 'segs': [{'end': 38170.874, 'src': 'embed', 'start': 38109.611, 'weight': 1, 'content': [{'end': 38111.072, 'text': 'Now that is the extent of it.', 'start': 38109.611, 'duration': 1.461}, {'end': 38117.534, 'text': 'Components make sure that whatever is being rendered onto the screen is right and pristine.', 'start': 38111.632, 'duration': 5.902}, {'end': 38125.296, 'text': 'But in order to execute tasks, we make use of services and this approach is ideal.', 'start': 38118.634, 'duration': 6.662}, {'end': 38131.863, 'text': 'So a component can basically delegate tasks like fetching data from the server,', 'start': 38126.436, 'duration': 5.427}, {'end': 38137.527, 'text': 'validating user input or logging directly to the console to a particular service.', 'start': 38131.863, 'duration': 5.664}, {'end': 38143.191, 'text': 'And these tasks can be made available to any component in the app.', 'start': 38138.648, 'duration': 4.543}, {'end': 38148.235, 'text': "So now let's talk about a few features of Angular services.", 'start': 38144.232, 'duration': 4.003}, {'end': 38157.543, 'text': 'Now typically, an Angular service is simply a TypeScript class with an at injectable decorator.', 'start': 38150.397, 'duration': 7.146}, {'end': 38166.428, 'text': 'This decorator tells Angular that the class is a service and can be injected into components that need that service.', 'start': 38158.539, 'duration': 7.889}, {'end': 38170.874, 'text': 'Now they can be used to share the same piece of code.', 'start': 38167.75, 'duration': 3.124}], 'summary': 'Angular services allow components to delegate tasks, share code, and access features.', 'duration': 61.263, 'max_score': 38109.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3838109611.jpg'}, {'end': 38229.537, 'src': 'embed', 'start': 38201.873, 'weight': 0, 'content': [{'end': 38204.215, 'text': 'In Angular, services are singleton.', 'start': 38201.873, 'duration': 2.342}, {'end': 38214.547, 'text': '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.', 'start': 38204.881, 'duration': 9.666}, {'end': 38222.712, 'text': 'And finally, a service can be registered as a part of a module or it can be registered as a part of the component.', 'start': 38215.027, 'duration': 7.685}, {'end': 38229.537, 'text': "Now to register it as a part of the component, you'll have to specify it in the providers array of the module.", 'start': 38223.293, 'duration': 6.244}], 'summary': 'In angular, services are singleton instances used by every building block.', 'duration': 27.664, 'max_score': 38201.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3838201873.jpg'}, {'end': 38303.952, 'src': 'embed', 'start': 38272.656, 'weight': 3, 'content': [{'end': 38279.182, 'text': "So without delay, let's head to our VS Code and start learning Angular services hands-on.", 'start': 38272.656, 'duration': 6.526}, {'end': 38286.709, 'text': "So here, first I've created a folder called demo underscore Angular within which I've created a file called hello world.", 'start': 38279.783, 'duration': 6.926}, {'end': 38290.172, 'text': 'So this was previously used for a tutorial.', 'start': 38287.309, 'duration': 2.863}, {'end': 38292.134, 'text': 'So the name is just hello world.', 'start': 38290.292, 'duration': 1.842}, {'end': 38293.235, 'text': "So don't get confused.", 'start': 38292.274, 'duration': 0.961}, {'end': 38303.952, 'text': "However, when you look at the browser, I've written an initial code here, which is Angular Services, and I have the Simply Learn logo.", 'start': 38294.15, 'duration': 9.802}], 'summary': "Hands-on learning of angular services in vs code, creating 'hello world' file and writing initial angular code with simply learn logo.", 'duration': 31.296, 'max_score': 38272.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3838272656.jpg'}, {'end': 38636.258, 'src': 'embed', 'start': 38600.34, 'weight': 4, 'content': [{'end': 38603.501, 'text': "So now we've created the employee records.", 'start': 38600.34, 'duration': 3.161}, {'end': 38610.143, 'text': 'So what I have to do is I have to create a method that returns these employee records.', 'start': 38604.161, 'duration': 5.982}, {'end': 38617.505, 'text': "Correct? So for that, I'm just going to create another method called get info one.", 'start': 38610.963, 'duration': 6.542}, {'end': 38629.534, 'text': 'which is of type string and it just returns this dot info one.', 'start': 38620.069, 'duration': 9.465}, {'end': 38631.275, 'text': 'All right.', 'start': 38630.895, 'duration': 0.38}, {'end': 38636.258, 'text': "Similarly for the rest of the two records, I'm just going to retrieve them.", 'start': 38631.935, 'duration': 4.323}], 'summary': 'Created employee records and methods to retrieve them.', 'duration': 35.918, 'max_score': 38600.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3838600340.jpg'}, {'end': 38876.67, 'src': 'embed', 'start': 38832.332, 'weight': 6, 'content': [{'end': 38839.554, 'text': "So now that we have the logic behind what is being displayed, let's go ahead and create the UI for it.", 'start': 38832.332, 'duration': 7.222}, {'end': 38846.355, 'text': "Here in my HTML file, I'm gonna create an unordered list.", 'start': 38840.234, 'duration': 6.121}, {'end': 38862.851, 'text': "And now I'm gonna make use of the ng for director to basically loop over the record and display everything.", 'start': 38850.136, 'duration': 12.715}, {'end': 38865.994, 'text': 'so for that i have to make use of a particular variable.', 'start': 38862.851, 'duration': 3.143}, {'end': 38874.669, 'text': "so i'll just say let info of info received.", 'start': 38865.994, 'duration': 8.675}, {'end': 38876.67, 'text': 'so you can check here.', 'start': 38874.669, 'duration': 2.001}], 'summary': 'Creating ui with ng for directive to loop over records and display information', 'duration': 44.338, 'max_score': 38832.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3838832332.jpg'}, {'end': 38987.743, 'src': 'embed', 'start': 38939.019, 'weight': 7, 'content': [{'end': 38943.423, 'text': "So in order to call this method, we'll have to bind it with a button.", 'start': 38939.019, 'duration': 4.404}, {'end': 38945.344, 'text': "Alright, so that's what we're going to do.", 'start': 38943.983, 'duration': 1.361}, {'end': 38951.49, 'text': "Let's just copy this and here I'm going to create a button.", 'start': 38946.185, 'duration': 5.305}, {'end': 38959.954, 'text': 'All right.', 'start': 38959.594, 'duration': 0.36}, {'end': 38976.347, 'text': 'And the type is button with name button again.', 'start': 38961.075, 'duration': 15.272}, {'end': 38977.808, 'text': 'All right.', 'start': 38976.367, 'duration': 1.441}, {'end': 38980.01, 'text': "So I'm going to bind it with the click event.", 'start': 38977.848, 'duration': 2.162}, {'end': 38985.915, 'text': 'So what happens is that when I click on it, this particular method gets called.', 'start': 38980.671, 'duration': 5.244}, {'end': 38987.743, 'text': 'All right.', 'start': 38987.403, 'duration': 0.34}], 'summary': 'Method bound to button for click event execution.', 'duration': 48.724, 'max_score': 38939.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3838939019.jpg'}, {'end': 39144.193, 'src': 'embed', 'start': 39115.354, 'weight': 8, 'content': [{'end': 39121.918, 'text': 'They can be used to update, modify, alter anything that happens in the backend.', 'start': 39115.354, 'duration': 6.564}, {'end': 39128.823, 'text': 'So you can tweak the code a little bit and you can change the entire view of your application.', 'start': 39122.439, 'duration': 6.384}, {'end': 39134.767, 'text': 'You can add information, you can delete, you can retrieve, you can alter, et cetera.', 'start': 39129.103, 'duration': 5.664}, {'end': 39141.812, 'text': "So for that, what we're gonna do is back in the HTML file, we'll create a form.", 'start': 39135.988, 'duration': 5.824}, {'end': 39144.193, 'text': 'That basically takes the input.', 'start': 39142.592, 'duration': 1.601}], 'summary': 'Backend tools enable code modification, data manipulation, and form creation for application customization.', 'duration': 28.839, 'max_score': 39115.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3839115354.jpg'}, {'end': 39450.901, 'src': 'embed', 'start': 39417.822, 'weight': 9, 'content': [{'end': 39424.045, 'text': "So, since I'm going to be pushing the same information into all of these arrays, that is, info1,, info2, and info3,,", 'start': 39417.822, 'duration': 6.223}, {'end': 39429.987, 'text': "I'm just going to say this.info1.push of info.", 'start': 39424.045, 'duration': 5.942}, {'end': 39432.228, 'text': 'All right.', 'start': 39431.828, 'duration': 0.4}, {'end': 39438.371, 'text': 'And the same for the other two arrays as well.', 'start': 39432.509, 'duration': 5.862}, {'end': 39443.814, 'text': 'Let me just change these.', 'start': 39438.391, 'duration': 5.423}, {'end': 39444.334, 'text': 'All right.', 'start': 39444.014, 'duration': 0.32}, {'end': 39450.901, 'text': "so what exactly i'm doing is that i have, i have a method called add info,", 'start': 39445.797, 'duration': 5.104}], 'summary': 'Adding information into multiple arrays using a method called add info.', 'duration': 33.079, 'max_score': 39417.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3839417822.jpg'}], 'start': 38004.833, 'title': 'Angular services and forms', 'summary': "Covers angular services, including creating a database, managing employee information, and demonstrating hands-on learning. it also explains service and component integration and details form creation in html with data manipulation, emphasizing 'add info' method for data insertion.", 'chapters': [{'end': 38272.036, 'start': 38004.833, 'title': 'Angular services overview', 'summary': 'Explains the concept of angular services, their features, and their use in creating a database and managing employee information, while highlighting the benefits of code reusability and shared data among components.', 'duration': 267.203, 'highlights': ['Angular services are used to avoid rewriting code and share data among several components, ensuring code reusability and efficient task execution. The main use of a service is to write code once and avoid rewriting of it, which can be injected into several components that make use of this particular service.', 'An Angular service is a TypeScript class with an @Injectable decorator, allowing it to be injected into components and share the same piece of code. An Angular service is simply a TypeScript class with an @Injectable decorator, which tells Angular that the class is a service and can be injected into components that need that service.', '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. In 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.', 'Services can be registered as a part of a module or as a part of the component, providing flexibility in their usage within the Angular application. A service can be registered as a part of a module or as a part of the component, providing flexibility in their usage within the Angular application.']}, {'end': 38670.97, 'start': 38272.656, 'title': 'Learning angular services hands-on', 'summary': 'Demonstrates hands-on learning of angular services by creating components, generating a service, and creating methods to retrieve and return employee records, emphasizing the use of dependency injection.', 'duration': 398.314, 'highlights': ['A demonstration of creating components and generating a service in VS Code for hands-on learning of Angular services.', 'Creating methods to retrieve and return employee records, emphasizing the use of dependency injection.', 'Demonstrating the creation of employee records and methods to retrieve them in a .ts file for use in the employee component.']}, {'end': 39115.274, 'start': 38671.671, 'title': 'Angular service and component integration', 'summary': 'Details the process of creating an angular service, injecting it into a component, and using it to retrieve and display information for three employees, with the final output being the successful creation of an angular service and component integration.', 'duration': 443.603, 'highlights': ['The service instance is created and used to perform tasks when the component is created. The service instance is created and used to perform tasks when the component is created, ensuring that the service is injected into the component to perform specific tasks.', "The property 'D service' allows access to methods defined in the service class. The property 'D service' allows access to methods defined in the service class, enabling retrieval of information from the service class.", 'Creation of UI using ngFor directive to loop over and display employee records. Creation of UI using ngFor directive to loop over and display employee records, with the information being retrieved from the service and displayed using a bootstrap class.', "Binding of the method 'getInfoFromService1' to a button for calling the method. Binding of the method 'getInfoFromService1' to a button for calling the method, allowing the retrieval of information when the button is clicked.", 'Successful creation of an Angular service and integration into the component to retrieve employee information. The successful creation of an Angular service and integration into the component to retrieve employee information, resulting in the successful creation of an Angular service and component integration.']}, {'end': 39483.559, 'start': 39115.354, 'title': 'Angular forms and data manipulation', 'summary': "Explains how to create a form in html and use angular forms to update, add, retrieve, and delete information, with a focus on the 'add info' method pushing data into arrays.", 'duration': 368.205, 'highlights': ['The chapter explains how to create a form in HTML and use Angular forms to update, add, retrieve, and delete information. The transcript discusses creating a form in HTML and using Angular forms for data manipulation, demonstrating the ability to update, add, retrieve, and delete information.', "The 'add info' method pushes data into arrays, such as info1, info2, and info3. The 'add info' method is shown to push information into arrays like info1, info2, and info3, demonstrating the process of pushing data into arrays."]}], 'duration': 1478.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3838004833.jpg', 'highlights': ['Angular services are singleton, ensuring efficient task execution and code reusability.', 'An Angular service is a TypeScript class with an @Injectable decorator, allowing it to be injected into components.', 'Services can be registered as a part of a module or as a part of the component, providing flexibility in their usage within the Angular application.', 'Demonstration of creating components and generating a service in VS Code for hands-on learning of Angular services.', 'Creating methods to retrieve and return employee records, emphasizing the use of dependency injection.', 'The service instance is created and used to perform tasks when the component is created.', 'Creation of UI using ngFor directive to loop over and display employee records.', "Binding of the method 'getInfoFromService1' to a button for calling the method.", 'The chapter explains how to create a form in HTML and use Angular forms to update, add, retrieve, and delete information.', "The 'add info' method pushes data into arrays, such as info1, info2, and info3."]}, {'end': 41939.68, 'segs': [{'end': 39555.627, 'src': 'embed', 'start': 39526.22, 'weight': 15, 'content': [{'end': 39531.402, 'text': 'here you can see that we have an input field and a button saying add info.', 'start': 39526.22, 'duration': 5.182}, {'end': 39536.285, 'text': 'so now i can just go ahead and see type usa.', 'start': 39531.402, 'duration': 4.883}, {'end': 39548.412, 'text': 'and when i say add info and when i check on my employee one details usa has been added to the list and same goes with employee two and employee three.', 'start': 39536.285, 'duration': 12.127}, {'end': 39555.627, 'text': 'So I hope this simple demo on Angular services helped you understand the concept better.', 'start': 39550.402, 'duration': 5.225}], 'summary': "Demo added 'usa' to list for employee one, two, and three in angular services.", 'duration': 29.407, 'max_score': 39526.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3839526220.jpg'}, {'end': 39614.698, 'src': 'embed', 'start': 39586.874, 'weight': 13, 'content': [{'end': 39597.237, 'text': 'Now to put it more easily, Bootstrap is a giant collection of handy reusable bits of code written in HTML, CSS, and JavaScript.', 'start': 39586.874, 'duration': 10.363}, {'end': 39606.04, 'text': "It's also a front-end development framework that enables developers and beginners to design quick and responsive websites.", 'start': 39597.998, 'duration': 8.042}, {'end': 39610.182, 'text': 'Now there are several advantages to using Bootstrap.', 'start': 39606.961, 'duration': 3.221}, {'end': 39614.698, 'text': 'To name a few, Bootstrap comes with a responsive grid.', 'start': 39611.175, 'duration': 3.523}], 'summary': 'Bootstrap is a front-end framework with reusable code, enabling quick and responsive website design.', 'duration': 27.824, 'max_score': 39586.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3839586874.jpg'}, {'end': 39709.768, 'src': 'embed', 'start': 39678.619, 'weight': 11, 'content': [{'end': 39681.56, 'text': 'The other method is to use Bootstrap NPM.', 'start': 39678.619, 'duration': 2.941}, {'end': 39687.963, 'text': 'Bootstrap, jQuery and other packages and frameworks can be installed via the command prompt.', 'start': 39682.04, 'duration': 5.923}, {'end': 39694.374, 'text': "In the tutorial that I'm going to be showing you, I've embedded Bootstrap using NPM.", 'start': 39689.364, 'duration': 5.01}, {'end': 39695.135, 'text': 'All right.', 'start': 39694.775, 'duration': 0.36}, {'end': 39699.519, 'text': "So I'm sure you only understand the concept better when you look at a demo.", 'start': 39695.515, 'duration': 4.004}, {'end': 39704.964, 'text': "So let's go ahead and create an application with the help of Angular Bootstrap.", 'start': 39700.5, 'duration': 4.464}, {'end': 39709.768, 'text': "So in this tutorial, what I'm going to be showing is the creation of a blog post.", 'start': 39705.444, 'duration': 4.324}], 'summary': 'Tutorial demonstrates installing bootstrap npm and creating a blog post with angular bootstrap.', 'duration': 31.149, 'max_score': 39678.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3839678619.jpg'}, {'end': 40216.278, 'src': 'embed', 'start': 40182.357, 'weight': 10, 'content': [{'end': 40193.026, 'text': "So I'm going to copy this to the footer and then I'm just going to paste it in my component.html file.", 'start': 40182.357, 'duration': 10.669}, {'end': 40203.453, 'text': 'So as mentioned earlier, I will create components and then place the code for specific parts of the UI in these components.', 'start': 40197.13, 'duration': 6.323}, {'end': 40207.314, 'text': "So let me just see if I've got everything here.", 'start': 40204.513, 'duration': 2.801}, {'end': 40213.277, 'text': "Okay So I'll be creating four components.", 'start': 40207.334, 'duration': 5.943}, {'end': 40216.278, 'text': 'The first one will be for the navigation bar.', 'start': 40213.857, 'duration': 2.421}], 'summary': 'Creating four components, first for navigation bar.', 'duration': 33.921, 'max_score': 40182.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3840182357.jpg'}, {'end': 40521.243, 'src': 'embed', 'start': 40491.688, 'weight': 9, 'content': [{'end': 40498.95, 'text': 'right, okay, so now that we have the template ready, we can go ahead and customize it according to our needs.', 'start': 40491.688, 'duration': 7.262}, {'end': 40501.411, 'text': "so now i'm going to be making a few changes to the code.", 'start': 40498.95, 'duration': 2.461}, {'end': 40507.793, 'text': "we're going to add the simply learn logo, we're going to change the tagline here, we're going to display something else over here.", 'start': 40501.411, 'duration': 6.382}, {'end': 40513.475, 'text': "all right, so let's go back to our vs code to customize and display the final output.", 'start': 40507.793, 'duration': 5.682}, {'end': 40521.243, 'text': "So here the first thing that I'm going to be doing is changing the message here.", 'start': 40514.6, 'duration': 6.643}], 'summary': 'Customizing template with simply learn logo, changing tagline, and displaying new content in vs code.', 'duration': 29.555, 'max_score': 40491.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3840491688.jpg'}, {'end': 40636.542, 'src': 'embed', 'start': 40550.449, 'weight': 6, 'content': [{'end': 40556.657, 'text': 'And the next thing that I want to do is I want to add the image, right? A Simply Learn logo.', 'start': 40550.449, 'duration': 6.208}, {'end': 40565.168, 'text': "So what I've done here is I've already added the logo.png file in my assets folder.", 'start': 40557.526, 'duration': 7.642}, {'end': 40569.929, 'text': "So I'll just go ahead and provide the path to this.", 'start': 40565.948, 'duration': 3.981}, {'end': 40572.47, 'text': "So that's gonna be in our intro file.", 'start': 40570.569, 'duration': 1.901}, {'end': 40597.847, 'text': 'So here image source is going to be assets slash logo dot png.', 'start': 40572.55, 'duration': 25.297}, {'end': 40603.312, 'text': 'so let me save this.', 'start': 40597.847, 'duration': 5.465}, {'end': 40604.253, 'text': 'so there we go.', 'start': 40603.312, 'duration': 0.941}, {'end': 40606.835, 'text': 'the logo is displayed.', 'start': 40604.253, 'duration': 2.582}, {'end': 40611.96, 'text': "so the next thing is, we'll have to change this part of the ui.", 'start': 40606.835, 'duration': 5.125}, {'end': 40621.635, 'text': "so the information that i want to display is this i'm going to be displaying World's Number One Online Bootcamp and other information.", 'start': 40611.96, 'duration': 9.675}, {'end': 40627.638, 'text': "So what I'm going to do is back in my VS Code, I'm just going to delete this.", 'start': 40621.735, 'duration': 5.903}, {'end': 40632.82, 'text': "And instead of that, I'm just going to copy this.", 'start': 40628.738, 'duration': 4.082}, {'end': 40636.542, 'text': "That's World's Number One Online Bootcamp.", 'start': 40633.32, 'duration': 3.222}], 'summary': "Added simply learn logo and displayed 'world's number one online bootcamp' in the ui.", 'duration': 86.093, 'max_score': 40550.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3840550449.jpg'}, {'end': 40751.945, 'src': 'embed', 'start': 40722.779, 'weight': 4, 'content': [{'end': 40728.523, 'text': 'So when you have a look at the browser, let me refresh this.', 'start': 40722.779, 'duration': 5.744}, {'end': 40735.446, 'text': 'You can see it displays the message, get certified, get ahead and all of that.', 'start': 40731.021, 'duration': 4.425}, {'end': 40741.713, 'text': "Well, now what I'm going to do is I'm really not happy with the font size and everything.", 'start': 40737.108, 'duration': 4.605}, {'end': 40744.236, 'text': "So I'm just go ahead and add certain styling.", 'start': 40742.174, 'duration': 2.062}, {'end': 40748.601, 'text': 'You can customize this and provide your own font size and all of that.', 'start': 40744.677, 'duration': 3.924}, {'end': 40751.945, 'text': "So here I'm just going to mention style.", 'start': 40749.402, 'duration': 2.543}], 'summary': 'Customize browser display with personalized styling.', 'duration': 29.166, 'max_score': 40722.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3840722779.jpg'}, {'end': 40938.454, 'src': 'embed', 'start': 40907.325, 'weight': 5, 'content': [{'end': 40910.025, 'text': "And then let's also provide the link for the same.", 'start': 40907.325, 'duration': 2.7}, {'end': 40918.608, 'text': 'Alright, so let me save this and have a look at the browser.', 'start': 40910.045, 'duration': 8.563}, {'end': 40923.842, 'text': 'So you can see that the information has been added.', 'start': 40920.299, 'duration': 3.543}, {'end': 40929.727, 'text': 'You can see it displays postgraduate program in Lean Six Sigma, full stack development and cybersecurity.', 'start': 40924.422, 'duration': 5.305}, {'end': 40937.833, 'text': 'So once I click on more info, it leads you to that page that shows the overview.', 'start': 40930.287, 'duration': 7.546}, {'end': 40938.454, 'text': 'All right.', 'start': 40938.113, 'duration': 0.341}], 'summary': 'The website displays postgraduate programs in lean six sigma, full stack development, and cybersecurity, with a link to more detailed information.', 'duration': 31.129, 'max_score': 40907.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3840907325.jpg'}, {'end': 41024.881, 'src': 'embed', 'start': 40994.666, 'weight': 2, 'content': [{'end': 41001.549, 'text': "And lastly, we'll have to provide the logo for YouTube and then the link to navigate to the YouTube page.", 'start': 40994.666, 'duration': 6.883}, {'end': 41003.83, 'text': "So let's go ahead and do that.", 'start': 41002.149, 'duration': 1.681}, {'end': 41011.533, 'text': "So here again, I've pasted the code for the YouTube logo.", 'start': 41006.371, 'duration': 5.162}, {'end': 41018.616, 'text': "So here you can see that I've added the image that is youtube.png in my assets folder and I've provided the source.", 'start': 41011.973, 'duration': 6.643}, {'end': 41024.881, 'text': "And accordingly, I've also added the styling.", 'start': 41020.036, 'duration': 4.845}], 'summary': 'Added youtube logo and link to navigate to youtube page.', 'duration': 30.215, 'max_score': 40994.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3840994666.jpg'}, {'end': 41164.141, 'src': 'embed', 'start': 41136.994, 'weight': 1, 'content': [{'end': 41141.275, 'text': 'Now to achieve this navigation, we use a mechanism called routing.', 'start': 41136.994, 'duration': 4.281}, {'end': 41146.396, 'text': 'Routing is essentially used to navigate through a website or a web application.', 'start': 41141.675, 'duration': 4.721}, {'end': 41154.358, 'text': 'But how is it achieved in Angular? Especially in Angular, routing plays a major role.', 'start': 41148.457, 'duration': 5.901}, {'end': 41157.359, 'text': 'It is used to create single page applications.', 'start': 41154.799, 'duration': 2.56}, {'end': 41164.141, 'text': 'Now these applications are loaded just once and new content is added dynamically.', 'start': 41158.099, 'duration': 6.042}], 'summary': 'Angular uses routing for navigation, creating single-page applications with dynamic content.', 'duration': 27.147, 'max_score': 41136.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3841136994.jpg'}, {'end': 41216.514, 'src': 'embed', 'start': 41189.946, 'weight': 14, 'content': [{'end': 41197.588, 'text': 'Now, routing is the mechanism that, as discussed earlier, that is used to navigate through the application and load new content.', 'start': 41189.946, 'duration': 7.642}, {'end': 41203.05, 'text': 'Routing helps Angular configure the route and the component that needs to be displayed.', 'start': 41198.689, 'duration': 4.361}, {'end': 41209.272, 'text': "Now, I'm sure you're going to understand the concept of routing better when you work on it hands-on.", 'start': 41204.33, 'duration': 4.942}, {'end': 41216.514, 'text': "So in the demo, we're going to be navigating to the login and the home pages of a web application with the help of routing.", 'start': 41210.052, 'duration': 6.462}], 'summary': 'Angular routing configures routes and components. demo navigates to login and home pages.', 'duration': 26.568, 'max_score': 41189.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3841189946.jpg'}, {'end': 41770.585, 'src': 'embed', 'start': 41727.046, 'weight': 0, 'content': [{'end': 41740.732, 'text': 'The router link basically holds the path to the page and the latter that is the router link active specifies one or more CSS classes that will be applied when the router link is active.', 'start': 41727.046, 'duration': 13.686}, {'end': 41752.6, 'text': 'Alright. so to do that, let me just add router link.', 'start': 41741.652, 'duration': 10.948}, {'end': 41770.585, 'text': "alright, in our case it is home here and we're going to have another directive called router link active and we're just going to say active here alright.", 'start': 41752.6, 'duration': 17.985}], 'summary': 'Explaining router link and router link active usage.', 'duration': 43.539, 'max_score': 41727.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3841727046.jpg'}], 'start': 39483.559, 'title': 'Angular development', 'summary': 'Covers various aspects of angular development, including creating ui components, integrating bootstrap, angular services demo with form submission, updating ui and adding course information, bootstrap integration for an angular website, and angular routing tutorial.', 'chapters': [{'end': 39555.627, 'start': 39483.559, 'title': 'Angular services demo with form submission', 'summary': "Demonstrates a simple angular services demo with form submission, showcasing the addition of 'usa' to the list of employee details using the 'add info' button.", 'duration': 72.068, 'highlights': ["The value received as input is passed on to the method 'update info' using the 'ng submit' and 'update info' function is called to add the input to the list of employee details. The ng submit function is used to call the 'update info' method and pass the form data as an argument, facilitating the addition of input to the employee details list.", "The 'add info' button successfully adds the input 'usa' to the list of employee details for employee one, two, and three. The 'add info' button effectively adds the input 'usa' to the employee details list for multiple employees, demonstrating the functionality of the form submission.", 'The demonstration provides a clear understanding of the concept of Angular services. The demo effectively helps in better understanding the concept of Angular services, providing a clear and simple demonstration of its functionality.']}, {'end': 40181.517, 'start': 39555.647, 'title': 'Understanding bootstrap and embedding it into angular', 'summary': 'Explains the basics of bootstrap, including its advantages, embedding into angular using cdn and npm, and creating a blog post using angular bootstrap.', 'duration': 625.87, 'highlights': ['Bootstrap is a powerful toolkit for creating and building responsive web applications and pages, with its advantages including a responsive grid and automatically resizing images based on screen size. Bootstrap is a powerful toolkit for creating and building responsive web applications and pages. It comes with a responsive grid and code for automatically resizing images based on the current screen size.', 'Embedding Bootstrap into Angular can be done using Bootstrap CDN or Bootstrap NPM, and the tutorial focuses on embedding Bootstrap using NPM. Embedding Bootstrap into Angular can be done using Bootstrap CDN or Bootstrap NPM, and the tutorial focuses on embedding Bootstrap using NPM.', 'The tutorial demonstrates the creation of a blog post using Angular Bootstrap, including adding a blog template, creating components, and adding dependencies like Bootstrap and jQuery using NPM. The tutorial demonstrates the creation of a blog post using Angular Bootstrap, including adding a blog template, creating components, and adding dependencies like Bootstrap and jQuery using NPM.']}, {'end': 40606.835, 'start': 40182.357, 'title': 'Creating ui components and customizing template', 'summary': 'Discusses the process of creating four ui components - navigation bar, introduction, courses, and footer - by generating and customizing code, and incorporating them into the html file, resulting in the successful display of the template with the desired changes, such as adding simply learn logo and altering the tagline.', 'duration': 424.478, 'highlights': ['Creating and incorporating four UI components (navigation bar, introduction, courses, and footer) into the HTML file by generating and customizing code. The chapter details the process of creating and incorporating four UI components into the HTML file, enabling the structured organization of the user interface.', "Successful display of the template with the desired changes, such as adding the Simply Learn logo and altering the tagline. The chapter highlights the successful display of the template with the desired changes, including adding the Simply Learn logo and altering the tagline to 'Simply Learn'.", 'Adding the Simply Learn logo by providing the path to the logo.png file in the assets folder and displaying it in the intro component. The chapter demonstrates the process of adding the Simply Learn logo by providing the path to the logo.png file and displaying it in the intro component, resulting in the successful display of the logo.']}, {'end': 40938.454, 'start': 40606.835, 'title': 'Ui update and course information addition', 'summary': 'Covers updating the ui to display specific information and adding course details for postgraduate programs in lean six sigma, full stack development, and cybersecurity.', 'duration': 331.619, 'highlights': ["Updating UI to display specific information The speaker updates the UI to display 'World's Number One Online Bootcamp' and changes call to action messages to 'explore programs' and 'get certified, get ahead with our programs'.", 'Adding course details for postgraduate programs The speaker adds course details for postgraduate programs in Lean Six Sigma, full stack development, and cybersecurity, including program names, durations, and reference links.', "Styling the UI with font size customization The speaker customizes the font size using 'font size' style attribute, setting it to 'XX large' to improve the display."]}, {'end': 41574.588, 'start': 40939.635, 'title': 'Bootstrap integration for angular website', 'summary': 'Discusses integrating a short video and youtube channel link, adding a logo for youtube with a navigable link, and creating a single-page application with routing in angular, emphasizing its benefits and usage, and setting up the initial navbar and components for the login and home pages.', 'duration': 634.953, 'highlights': ['The chapter discusses integrating a short video and YouTube channel link, adding a logo for YouTube with a navigable link The speaker demonstrates adding a short video from Google and a video from the assets folder, along with the logo for YouTube and a message directing to the YouTube channel, providing a comprehensive visual and navigational experience.', 'Creating a single-page application with routing in Angular, emphasizing its benefits and usage The chapter explains the concept of routing in Angular, focusing on its role in creating single-page applications and its benefits of providing a faster user experience, with examples of dynamic content loading and its usage in major applications like Google, Facebook, Twitter, and Gmail.', 'Setting up the initial navbar and components for the login and home pages The speaker guides through the initial setup for creating the navbar, importing the app routing module, and generating components for the login and home pages, emphasizing the importance of the base tag, and providing Bootstrap code for the navigation bar and login and home components.']}, {'end': 41939.68, 'start': 41575.288, 'title': 'Angular routing tutorial', 'summary': 'Covers the process of configuring routes for an angular application, creating paths for login and home components, linking the routes to ui buttons using router link and router link active directives, and demonstrating the successful execution of the navigation in the browser.', 'duration': 364.392, 'highlights': ['The chapter introduces the process of configuring routes for an Angular application, creating paths for login and home components, and linking the routes to UI buttons using router link and router link active directives.', 'It demonstrates the successful execution of the navigation in the browser, showing the display of content in the home and login components based on user interaction, and the successful creation of routes for navigation.', 'The tutorial emphasizes the importance of the router link and router link active directives for binding routes to specific buttons in the UI, showcasing the functionality of navigation based on user interactions.']}], 'duration': 2456.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nAsBMaaWs38/pics/nAsBMaaWs3839483559.jpg', 'highlights': ['The tutorial emphasizes the importance of the router link and router link active directives for binding routes to specific buttons in the UI, showcasing the functionality of navigation based on user interactions.', 'The chapter explains the concept of routing in Angular, focusing on its role in creating single-page applications and its benefits of providing a faster user experience, with examples of dynamic content loading and its usage in major applications like Google, Facebook, Twitter, and Gmail.', 'The speaker demonstrates adding a short video from Google and a video from the assets folder, along with the logo for YouTube and a message directing to the YouTube channel, providing a comprehensive visual and navigational experience.', 'The chapter discusses integrating a short video and YouTube channel link, adding a logo for YouTube with a navigable link.', "The speaker customizes the font size using 'font size' style attribute, setting it to 'XX large' to improve the display.", 'Adding course details for postgraduate programs The speaker adds course details for postgraduate programs in Lean Six Sigma, full stack development, and cybersecurity, including program names, durations, and reference links.', "Updating UI to display specific information The speaker updates the UI to display 'World's Number One Online Bootcamp' and changes call to action messages to 'explore programs' and 'get certified, get ahead with our programs'.", 'The chapter demonstrates the process of adding the Simply Learn logo by providing the path to the logo.png file and displaying it in the intro component, resulting in the successful display of the logo.', 'Adding the Simply Learn logo by providing the path to the logo.png file in the assets folder and displaying it in the intro component.', 'Successful display of the template with the desired changes, such as adding the Simply Learn logo and altering the tagline.', 'Creating and incorporating four UI components (navigation bar, introduction, courses, and footer) into the HTML file by generating and customizing code.', 'The tutorial demonstrates the creation of a blog post using Angular Bootstrap, including adding a blog template, creating components, and adding dependencies like Bootstrap and jQuery using NPM.', 'Embedding Bootstrap into Angular can be done using Bootstrap CDN or Bootstrap NPM, and the tutorial focuses on embedding Bootstrap using NPM.', 'Bootstrap is a powerful toolkit for creating and building responsive web applications and pages, with its advantages including a responsive grid and automatically resizing images based on screen size.', 'The demonstration provides a clear understanding of the concept of Angular services. The demo effectively helps in better understanding the concept of Angular services, providing a clear and simple demonstration of its functionality.', "The 'add info' button successfully adds the input 'usa' to the list of employee details for employee one, two, and three. The 'add info' button effectively adds the input 'usa' to the employee details list for multiple employees, demonstrating the functionality of the form submission."]}], 'highlights': ['The chapter emphasizes the top five front-end skills essential for securing a job in 2022, offering valuable guidance for individuals aspiring to become front-end developers.', 'The chapter provides insights into JavaScript and its role in adding interactivity to web applications, along with exploring popular libraries and frameworks such as ReactJS and Angular for front-end development.', 'The chapter outlines a complete tutorial on version control systems, Git and GitHub, followed by an in-depth look at HTML, including implementing registration forms and building a quiz app, and a detailed tutorial on CSS.', 'Front-end developers need skills in testing, debugging, languages like SAS, LESS, STYLIST, APIs, and communication.', "Decathlon has 1600 stores in 52 countries with around 100,000 employees, and the IT team of GitHub consists of 1000 members helping to bring shoppers' journey to their devices.", 'Successfully adding the SSH key to the GitHub server', 'Demonstrating creation of a new branch, adding and committing files, and switching between branches with specific examples and commands', 'Git version control system facilitates coordination among multiple developers and collaborators, providing complete tracking of project progress and source code modifications.', 'HTML is the most widely used markup language for developing and structuring web pages on the internet.', 'The chapter introduces the process of developing a quiz application using HTML, JavaScript, and CSS, creating three files: index.html, app.css, and a script file.', 'CSS selectors provide a flexible way to style HTML elements based on various criteria, enhancing the design and user experience.', 'Understanding the different types of CSS selectors empowers designers to efficiently target and style specific elements within a web page.', 'CSS Grid offers more flexibility and control for constructing custom grids, enabling two-dimensional positioning with rows and columns.', 'JavaScript facilitates form validation on the client side, enhancing user experience and reducing unnecessary server requests.', 'JavaScript promises were introduced to overcome the limitations of single-threaded execution, allowing simultaneous processing of asynchronous actions and enabling efficient utilization of the system.', 'React is a JavaScript library for fast and interactive UIs for web and mobile apps.', 'Angular is an open-source JavaScript framework written in TypeScript, providing scalability and maintainability.', 'DI allows reusing code, making it flexible and testable, benefiting various Angular components.', 'Angular services are singleton, ensuring efficient task execution and code reusability.', 'The tutorial emphasizes the importance of the router link and router link active directives for binding routes to specific buttons in the UI, showcasing the functionality of navigation based on user interactions.']}