title
Full Stack Web Development Course 2023 | Complete Full Stack Developer Course | Simplilearn

description
🔥 IITM Pravartak Professional Certificate Program In Full Stack Development - MERN (India Only): https://www.simplilearn.com/full-stack-developer-course-and-certification-iitm-pravartak?utm_campaign=SCE-FullstackIITM&utm_medium=DescriptionFF&utm_source=youtube 🔥Post Graduate Program In Full Stack Web Development: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=FullStackWebDevelopmentCourse2023-R6RX2Zx96fE&utm_medium=Descriptionff&utm_source=youtube 🔥Caltech Coding Bootcamp (US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=FullStackWebDevelopmentCourse2023-R6RX2Zx96fE&utm_medium=Descriptionff&utm_source=youtube In this Full Course on Full Stack Web Development Course 2023 we will discuss about Full stack development after that we will see how to become a full-stack developer in 2023. After that we will learn more about HTML, CSS, and JavaScript. Following that, we will discuss the framework of JavaScript, React, Angular including how to use routing. 00:00:00 - Full Stack Web development Course 2023 00:01:23 - What is Full Stack? 00:07:53 - How To Become A Full Stack Web Developer In 2023 00:19:10 - Front End vs Back End Explained 00:26:47 - How to become frontend developer 00:34:49 - HTML 01:34:48 - What is CSS? 01:40:15 - CSS Color 01:45:19 - CSS Background Image 01:50:02 - CSS Selectors 01:53:32 - CSS BOX model 01:58:13 - CSS Flexbox 02:05:04 - CSS Grid layout 02:20:02 - CSS Forms 02:33:36 - What is JavaScript 02:46:32 - What is Dom 03:03:02 - JavaScript 04:05:15- How To Become A Backend Developer 04:10:05 - Angular 05:13:14 - Angular Routing 05:24:41 - React 06:15:10 - Node js 06:48:05 - What is Django 06:48:34 - Django Tutorial 08:20:57- SQL 08:48:37 - Mongo DB 10:30:27 - What is GitHub 10:37:39 - Full Stack Developer Salary, Skills & Resume 10:45:02 - Top 6 Projects To Add In Your Resume In 2023 10:51:45 - Interview QA HTML 10:56:34 - CSS Inerview Q/A 11:03:53 - JavaScript Interview Q/A 11:09:51 - Angular Interview Q/A 11:16:51 - React Interview Q/A 11:22:50 - Node js Interview Q/A ⏩ Check out the Full Stack tutorial videos: https://youtube.com/playlist?list=PLEiEAq2VkUULCC3eEATL4zzuapTjmo1Z_ ✅Subscribe to our Channel to learn more about the top Technologies: https://bit.ly/2VT4WtH #FullStack #FullStackDevelopment #FullStackWebDevelopment #FullStackDeveloper #FullStackDeveloperCourse #WhatIsFullStack #WhatIsFullStackWebDevelopment #FullStackDeveloperTutorial #FullStackWebDevelopmentCourse #FullStackTraining #FrontEndDevelopment #BackEndDevelopment #Simplilearn ➡️ About Post Graduate Program In Full Stack Web Development This program will give you the foundation for building full-stack web apps using the Java programming language. You'll begin with the basics of JavaScript, and then venture into some of the more advanced concepts like Angular, Spring Boot, Hibernate, JSPs, and MVC. Now is the perfect time to get started on your career as a full-stack web developer! ✅ Key Features - Caltech CTME Post Graduate Certificate - Enrolment in Simplilearn’s JobAssist - Receive up to 25 CEUs from Caltech CTME - Simplilearn's JobAssist helps you get noticed by top hiring companies - Attend Masterclasses from Caltech CTME instructors - Live virtual classes led by industry experts, hands-on projects and integrated labs - Online Convocation by Caltech CTME Program Director - 20 lesson-end and 5 phase-end projects - Capstone Project in 4 domains - Caltech CTME Circle Membership - Build your own portfolio on GitHub ✅ Skills Covered - Agile - JAVA - Hibernate and JPA - Spring Core 50 - DevOps - HTML5 and CSS3 - AWS - JavaScript ES6 - Servlets - SOAP and REST - JSP 👉 Learn More At: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=FullStackWebDevelopmentCourse2023-R6RX2Zx96fE&utm_medium=Description&utm_source=youtube 🔥Caltech Coding Bootcamp (US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=FullStackWebDevelopmentCourse2023-R6RX2Zx96fE&utm_medium=Description&utm_source=youtube 🔥🔥 Interested in Attending Live Classes? Call Us: IN - 18002127688 / US - +18445327688

detail
{'title': 'Full Stack Web Development Course 2023 | Complete Full Stack Developer Course | Simplilearn', 'heatmap': [{'end': 2994.452, 'start': 2565.548, 'weight': 1}, {'end': 7272.555, 'start': 6844.3, 'weight': 0.711}], 'summary': 'The full stack web development course 2023 by simplilearn covers topics including job opportunities and average salaries for full stack developers, front-end development essentials and frameworks, html, css, javascript fundamentals, angular and react basics, node.js overview and industry applications, mongodb essentials and operations, and html, css, and javascript in web development, providing comprehensive coverage of full stack development and essential skills for web development.', 'chapters': [{'end': 1728.864, 'segs': [{'end': 1292.566, 'src': 'embed', 'start': 1262.043, 'weight': 8, 'content': [{'end': 1263.606, 'text': "So let's go ahead and understand them.", 'start': 1262.043, 'duration': 1.563}, {'end': 1268.475, 'text': "Let's begin by understanding what front end development is.", 'start': 1265.609, 'duration': 2.866}, {'end': 1277.822, 'text': 'Now, front-end development is a part of the website that codes and creates front-end elements of a website,', 'start': 1271.26, 'duration': 6.562}, {'end': 1281.923, 'text': 'which are features that are directly viewable and accessible by the client.', 'start': 1277.822, 'duration': 4.101}, {'end': 1292.566, 'text': 'Now, essentially, a front-end developer is in charge of everything you see, be it styling, graphics, text, alignment, navigation, colors, etc.', 'start': 1281.943, 'duration': 10.623}], 'summary': 'Front-end development involves creating visible website features like styling, graphics, and navigation.', 'duration': 30.523, 'max_score': 1262.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE1262043.jpg'}, {'end': 1659.493, 'src': 'embed', 'start': 1559.433, 'weight': 0, 'content': [{'end': 1561.654, 'text': 'we have front-end web designer.', 'start': 1559.433, 'duration': 2.221}, {'end': 1566.437, 'text': 'we have front-end SEO expert, full-stack developer and a UI developer.', 'start': 1561.654, 'duration': 4.783}, {'end': 1577.943, 'text': "Talking about back-end, there's back-end developer, Java developer, full-stack developer, DevOps engineer, software engineer, and an iOS developer.", 'start': 1567.857, 'duration': 10.086}, {'end': 1585.147, 'text': "And lastly, let's look at the salaries offered to these front-end and back-end developers.", 'start': 1580.785, 'duration': 4.362}, {'end': 1592.811, 'text': 'In India, the average salary of a front-end developer is around 6 lakh rupees per annum,', 'start': 1586.228, 'duration': 6.583}, {'end': 1596.133, 'text': 'while a back-end developer earns about 7 lakh rupees per annum.', 'start': 1592.811, 'duration': 3.322}, {'end': 1604.818, 'text': 'In the US, a front-end developer earns around 100,000 US dollars per annum, while a back-end developer earns about 121,000 US dollars per annum.', 'start': 1596.914, 'duration': 7.904}, {'end': 1611.613, 'text': "This session will be about today's topic which is become a front-end developer.", 'start': 1607.312, 'duration': 4.301}, {'end': 1613.293, 'text': 'So, let us begin.', 'start': 1612.273, 'duration': 1.02}, {'end': 1618.675, 'text': 'We are going to discuss the things you need to know to become a web developer.', 'start': 1613.313, 'duration': 5.362}, {'end': 1626.797, 'text': 'First, we will start with basic skills which every web developer must know before moving into more advanced web frameworks.', 'start': 1619.095, 'duration': 7.702}, {'end': 1631.438, 'text': 'Then, we will understand what React is and why it is so popular.', 'start': 1627.437, 'duration': 4.001}, {'end': 1635.639, 'text': 'After that, we will go through another web framework called Angular.', 'start': 1631.958, 'duration': 3.681}, {'end': 1642.317, 'text': 'Then, we will also get to know about a comparatively new front-end framework called VIEW.', 'start': 1636.832, 'duration': 5.485}, {'end': 1649.123, 'text': 'In the end, we will go through the front-end developer salary trends, which will give you an insight of the job market.', 'start': 1642.878, 'duration': 6.245}, {'end': 1652.146, 'text': "So without further ado, let's get started.", 'start': 1649.844, 'duration': 2.302}, {'end': 1654.788, 'text': 'First, the basic skills.', 'start': 1653.287, 'duration': 1.501}, {'end': 1659.493, 'text': 'Let us understand what basic skills are required to become a web developer.', 'start': 1655.529, 'duration': 3.964}], 'summary': 'Session covers front-end and back-end developer skills, average salaries in india and us, and overview of web frameworks.', 'duration': 100.06, 'max_score': 1559.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE1559433.jpg'}, {'end': 1710.534, 'src': 'embed', 'start': 1682.284, 'weight': 9, 'content': [{'end': 1689.305, 'text': 'Git is a tool used to save code and create different versions to better manage the feature updates in the product or an application.', 'start': 1682.284, 'duration': 7.021}, {'end': 1695.327, 'text': 'So followed by the GitHub, the next important thing we have is the data structures and algorithms.', 'start': 1689.325, 'duration': 6.002}, {'end': 1699.488, 'text': 'A data structure is the location used to store and organize data.', 'start': 1695.927, 'duration': 3.561}, {'end': 1704.23, 'text': 'An algorithm is a collection of steps to solve a particular problem.', 'start': 1700.308, 'duration': 3.922}, {'end': 1710.534, 'text': 'Learning data structures and algorithms allow us to write efficient and fast computer programs.', 'start': 1705.651, 'duration': 4.883}], 'summary': 'Git manages code versions; data structures and algorithms enhance program efficiency.', 'duration': 28.25, 'max_score': 1682.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE1682284.jpg'}], 'start': 0.089, 'title': 'Full stack development and job opportunities', 'summary': 'Discusses the increasing demand for full stack developers with an average salary of $125,000 per annum in the us and a projected 27% increase in job opportunities by 2024. it provides comprehensive coverage of full stack development, backend languages, and job roles, as well as the difference between frontend and backend development, and essential skills for web development.', 'chapters': [{'end': 353.446, 'start': 0.089, 'title': 'Full stack development 2023', 'summary': 'Discusses the increasing demand for full stack developers, with an average salary of $125,000 per annum in the us and a projected 27% increase in job opportunities by 2024. it provides a comprehensive curriculum on full stack development, covering front-end and back-end technologies, as well as essential skills and interview preparation.', 'duration': 353.357, 'highlights': ['The average salary of a full-stack developer in the US can go as high as $125,000 per annum. Highlights the high earning potential in the field, providing quantifiable data.', 'By 2024, there will be a 27% increase in the job for developers. Shows a projected increase in job opportunities, providing quantifiable data.', 'The chapter provides a full course on full stack development for 2023, covering front-end and back-end technologies, essential skills, and interview preparation. Summarizes the comprehensive curriculum offered, emphasizing the relevance to the audience.', 'The curriculum covers front-end technologies such as HTML, CSS, JavaScript, and frameworks like React and Angular, as well as back-end development with Node.js and Django. Details the specific technologies and frameworks covered in the curriculum.', 'It also includes discussions on SQL, MongoDB, and GitHub, essential skills, and interview preparation for aspiring full stack developers. Highlights the inclusion of essential skills and interview preparation, providing a well-rounded education.']}, {'end': 557.51, 'start': 354.625, 'title': 'Full stack development and backend languages', 'summary': "Discusses full stack development, backend languages, and database management systems, including popular languages and frameworks such as node, expressjs, python, django, flask, java, spring, java server faces, csharp, asp.net core, asp.net mvc, php, perl, and ruby, as well as commonly used database management systems like mysql, postgresql, microsoft sql server, oracle database, and mongodb. it also outlines simply learn's offerings for full stack development courses and certifications.", 'duration': 202.885, 'highlights': ['Overview of Full Stack Development Full stack development involves building the front end, back end, and database aspects of an application, as exemplified by the process of fetching new images from Instagram servers, providing a seamless user experience.', 'Backend Languages and Frameworks Discusses popular backend languages and frameworks such as Node, ExpressJS, Python (Django, Flask), Java (Spring, Java Server Faces), Csharp (ASP.NET Core, ASP.NET MVC), PHP, Perl, and Ruby, highlighting their significance in application development.', 'Database Management Systems Outlines commonly used database management systems including MySQL, PostgreSQL, Microsoft SQL Server, Oracle Database, and MongoDB, emphasizing their role in efficient data retrieval, insertion, and deletion.', "Simply Learn's Offerings Simply Learn offers full stack development courses and certifications such as the full-stack Java Developer Masters program, postgraduate program in full stack web development, and full stack web developer mean stack masters program, catering to those aspiring for a career as full-stack developers."]}, {'end': 1110.961, 'start': 559.215, 'title': 'Full stack developer overview', 'summary': 'Discusses the responsibilities and skills required for a full stack developer, including knowledge of front-end and back-end languages and frameworks, tools and software, popular trends in 2020, and the average salary of full-stack developers in india and the us.', 'duration': 551.746, 'highlights': ['The average salary of a full-stack developer in the US is around 75,000 US dollars per annum. The average salary of a full-stack developer in the US is a key quantifiable data point that provides insight into the earning potential of full-stack developers in a prominent market.', 'The average salary of a full-stack developer in India is around 5,90,000 rupees per annum. The average salary of a full-stack developer in India is a significant quantifiable data point that provides insight into the earning potential of full-stack developers in the Indian market.', 'React, Vue, and Angular are some of the JavaScript libraries and frameworks that one can use, with React gaining immense popularity over the last few years. The mention of popular JavaScript libraries and frameworks, along with their relative popularity, emphasizes the importance of these tools in the skill set of a full stack developer.', 'Blockchain, AI and chatbots, mobile app development, progressive web applications, and IoT are some of the top trends to look out for in 2020. This highlight provides valuable information about the emerging trends in the technology industry, which is essential for staying updated and relevant as a full stack developer.', 'A full stack developer in the US earns an average salary of around 75,000 US dollars per annum, while in India, the average salary is around 5,90,000 rupees per annum. Reiteration of the average salaries in the US and India emphasizes the financial aspect of pursuing a career as a full stack developer in different regions.']}, {'end': 1512.488, 'start': 1112.302, 'title': 'Frontend vs backend development', 'summary': "Discusses the difference between frontend and backend development, covering web development, frontend and backend development, languages, libraries and frameworks, skills, job roles, and salaries in the context of simply learn's certification courses and the responsibilities of frontend and backend developers.", 'duration': 400.186, 'highlights': ["Web development encompasses frontend and backend development, and Simply Learn offers certification courses for Full Stack Java, .NET, and Meanstack Developer Master's Programs. Simply Learn offers Full Stack Java, .NET, and Meanstack Developer Master's Programs for web development.", 'Frontend development focuses on creating visible and accessible features, while backend development covers server-side logic and system integration. Frontend development involves creating visible and accessible features, while backend development covers server-side logic and system integration.', 'Frontend development languages include HTML, CSS, and JavaScript, while backend languages include Python, C#, Java, Pearl, PHP, Ruby, and JavaScript, with Java and Python being popular choices. Frontend development languages include HTML, CSS, and JavaScript, while backend languages include Python, C#, Java, Pearl, PHP, Ruby, and JavaScript, with Java and Python being popular choices.', 'Frontend frameworks like ReactJS, Angular, Vue, and Bootstrap, and backend frameworks like ExpressJS, Node, Spring, Django, and ASP.NET are crucial for frontend and backend developers. Frontend frameworks like ReactJS, Angular, Vue, and Bootstrap, and backend frameworks like ExpressJS, Node, Spring, Django, and ASP.NET are crucial for frontend and backend developers.', 'Frontend developers require skills in HTML, JavaScript, CSS, and knowledge of testing, debugging, and frontend development tools, while backend developers need to focus on server-side logic, database communication, and system architecture. Frontend developers require skills in HTML, JavaScript, CSS, and knowledge of testing, debugging, and frontend development tools, while backend developers need to focus on server-side logic, database communication, and system architecture.']}, {'end': 1728.864, 'start': 1513.589, 'title': 'Backend and front-end development', 'summary': 'Covers the skills needed for backend and front-end development, job roles, and average salaries for developers in india and the us. it also delves into basic skills required for web development, including git, data structures and algorithms, and text editors.', 'duration': 215.275, 'highlights': ['The average salary of a back-end developer in the US is about 121,000 US dollars per annum, while in India, a back-end developer earns around 7 lakh rupees per annum. Back-end developers in the US earn around 121,000 US dollars per annum, and in India, they earn around 7 lakh rupees per annum.', 'The average salary of a front-end developer in the US is around 100,000 US dollars per annum, while in India, a front-end developer earns around 6 lakh rupees per annum. Front-end developers in the US earn around 100,000 US dollars per annum, and in India, they earn around 6 lakh rupees per annum.', 'Backend developers deal with languages like Java, Ruby on Rails, etc., to make web pages and applications operate. Backend developers work with languages like Java, Ruby on Rails, etc., to make web pages and applications operate.', 'Key skills for web development include Git for version control, data structures and algorithms for efficient programming, and familiarity with text editors like Visual Studio Code. Key skills for web development include Git for version control, data structures and algorithms for efficient programming, and familiarity with text editors like Visual Studio Code.']}], 'duration': 1728.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE89.jpg', 'highlights': ['The average salary of a full-stack developer in the US can go as high as $125,000 per annum.', 'By 2024, there will be a 27% increase in the job for developers.', 'The curriculum covers front-end technologies such as HTML, CSS, JavaScript, and frameworks like React and Angular, as well as back-end development with Node.js and Django.', 'It also includes discussions on SQL, MongoDB, and GitHub, essential skills, and interview preparation for aspiring full stack developers.', 'Full stack development involves building the front end, back end, and database aspects of an application, as exemplified by the process of fetching new images from Instagram servers, providing a seamless user experience.', 'Backend Languages and Frameworks Discusses popular backend languages and frameworks such as Node, ExpressJS, Python (Django, Flask), Java (Spring, Java Server Faces), Csharp (ASP.NET Core, ASP.NET MVC), PHP, Perl, and Ruby, highlighting their significance in application development.', 'Database Management Systems Outlines commonly used database management systems including MySQL, PostgreSQL, Microsoft SQL Server, Oracle Database, and MongoDB, emphasizing their role in efficient data retrieval, insertion, and deletion.', 'Simply Learn offers full stack development courses and certifications such as the full-stack Java Developer Masters program, postgraduate program in full stack web development, and full stack web developer mean stack masters program, catering to those aspiring for a career as full-stack developers.', 'React, Vue, and Angular are some of the JavaScript libraries and frameworks that one can use, with React gaining immense popularity over the last few years.', 'Blockchain, AI and chatbots, mobile app development, progressive web applications, and IoT are some of the top trends to look out for in 2020.', 'A full stack developer in the US earns an average salary of around 75,000 US dollars per annum, while in India, the average salary is around 5,90,000 rupees per annum.', "Web development encompasses frontend and backend development, and Simply Learn offers certification courses for Full Stack Java, .NET, and Meanstack Developer Master's Programs.", 'Frontend development focuses on creating visible and accessible features, while backend development covers server-side logic and system integration.', 'Frontend development languages include HTML, CSS, and JavaScript, while backend languages include Python, C#, Java, Pearl, PHP, Ruby, and JavaScript, with Java and Python being popular choices.', 'Frontend frameworks like ReactJS, Angular, Vue, and Bootstrap, and backend frameworks like ExpressJS, Node, Spring, Django, and ASP.NET are crucial for frontend and backend developers.', 'The average salary of a back-end developer in the US is about 121,000 US dollars per annum, while in India, a back-end developer earns around 7 lakh rupees per annum.', 'The average salary of a front-end developer in the US is around 100,000 US dollars per annum, while in India, a front-end developer earns around 6 lakh rupees per annum.', 'Backend developers deal with languages like Java, Ruby on Rails, etc., to make web pages and applications operate.', 'Key skills for web development include Git for version control, data structures and algorithms for efficient programming, and familiarity with text editors like Visual Studio Code.']}, {'end': 2918.787, 'segs': [{'end': 1798.061, 'src': 'embed', 'start': 1772.97, 'weight': 0, 'content': [{'end': 1780.453, 'text': "Now that we know what basic skills are required to become a front-end developer, let's discuss about the most popular front-end library, that is,", 'start': 1772.97, 'duration': 7.483}, {'end': 1781.033, 'text': 'the React.', 'start': 1780.453, 'duration': 0.58}, {'end': 1791.192, 'text': 'Now, what exactly React is? So, React is a front-end JavaScript library used for building beautiful user interface components.', 'start': 1782.533, 'duration': 8.659}, {'end': 1798.061, 'text': 'It is an open source, meaning it can be used in your commercial projects without any restrictions.', 'start': 1792.253, 'duration': 5.808}], 'summary': 'React is a popular front-end library for building user interface components.', 'duration': 25.091, 'max_score': 1772.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE1772970.jpg'}, {'end': 1881.722, 'src': 'embed', 'start': 1828.809, 'weight': 3, 'content': [{'end': 1838.632, 'text': 'So, basically DOM stands for Document Object Model and is used by every internet browser for rendering a web page or an application.', 'start': 1828.809, 'duration': 9.823}, {'end': 1849.815, 'text': 'React can also be easily integrated with other JavaScript frameworks, like Node.js, resulting in the development of a completely new web application,', 'start': 1840.853, 'duration': 8.962}, {'end': 1851.856, 'text': 'including frontend and the backend.', 'start': 1849.815, 'duration': 2.041}, {'end': 1863.05, 'text': 'It is comparatively easy to maintain large scale applications written in React because it highly promotes code reusability and code readability.', 'start': 1854.045, 'duration': 9.005}, {'end': 1868.414, 'text': 'So followed by React, the next important thing we have is the Angular.', 'start': 1864.792, 'duration': 3.622}, {'end': 1876.699, 'text': 'We have an idea of what React is, but it is not the only framework used for building user interfaces.', 'start': 1870.955, 'duration': 5.744}, {'end': 1879.22, 'text': 'So now let us know about Angular.', 'start': 1877.259, 'duration': 1.961}, {'end': 1881.722, 'text': 'So now what exactly Angular is?', 'start': 1879.981, 'duration': 1.741}], 'summary': 'Dom used by browsers, react integrates with node.js, promotes code reusability, followed by angular.', 'duration': 52.913, 'max_score': 1828.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE1828809.jpg'}, {'end': 2003.004, 'src': 'embed', 'start': 1976.596, 'weight': 2, 'content': [{'end': 1981.299, 'text': 'It is meant to be integrated with other libraries to develop a complete web application.', 'start': 1976.596, 'duration': 4.703}, {'end': 1991.364, 'text': "Like React, Vue.js is mainly focused on the Vue part of the web application and hence it's a bit faster when compared to Angular,", 'start': 1982.359, 'duration': 9.005}, {'end': 1994.026, 'text': 'which is a complete web application solution.', 'start': 1991.364, 'duration': 2.662}, {'end': 2003.004, 'text': 'Vue.js is commonly referred to as Vue and pronounced as Vue.js or Vue is rightly so.', 'start': 1995.396, 'duration': 7.608}], 'summary': 'Vue.js is faster than angular, focuses on vue part of web app, integrates with other libraries', 'duration': 26.408, 'max_score': 1976.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE1976596.jpg'}, {'end': 2052.978, 'src': 'embed', 'start': 2028.15, 'weight': 1, 'content': [{'end': 2038.354, 'text': 'Vue.js has become popular in recent times and many companies are starting to use it owing to its lightweight performance and easy integration with other web libraries and frameworks.', 'start': 2028.15, 'duration': 10.204}, {'end': 2045.555, 'text': "Now with this, let's move into the next section, where we will discuss about the front-end developer salary trends.", 'start': 2039.471, 'duration': 6.084}, {'end': 2052.978, 'text': "Now that we know what skills we need to become a front-end developer, let's now have a look into the salary trends of a front-end developer.", 'start': 2046.435, 'duration': 6.543}], 'summary': "Vue.js is popular for its lightweight performance and easy integration, with companies adopting it. next, we'll discuss front-end developer salary trends.", 'duration': 24.828, 'max_score': 2028.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE2028150.jpg'}, {'end': 2803.575, 'src': 'embed', 'start': 2780.903, 'weight': 8, 'content': [{'end': 2789.607, 'text': 'You can see the HTML tag starts from here and goes till end, right? We have ended this HTML tag at the end of our HTML document.', 'start': 2780.903, 'duration': 8.704}, {'end': 2794.19, 'text': 'Now this tag is necessary for all HTML documents.', 'start': 2791.188, 'duration': 3.002}, {'end': 2798.712, 'text': 'If you are working on an HTML document, then this tag is what we are going to need.', 'start': 2794.57, 'duration': 4.142}, {'end': 2803.575, 'text': 'The HTML tag represents the root and the end of the whole document.', 'start': 2799.593, 'duration': 3.982}], 'summary': 'Html tag is essential for all html documents.', 'duration': 22.672, 'max_score': 2780.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE2780903.jpg'}], 'start': 1730.165, 'title': 'Front-end development essentials and frameworks', 'summary': 'Covers essential front-end development skills including command line proficiency, understanding of http and https, and the importance of react, as well as discusses front-end frameworks, developer salaries, website architecture, and vs code, highlighting the demand for front-end developers, average salaries in india and the us, and the features and advantages of vs code.', 'chapters': [{'end': 1851.856, 'start': 1730.165, 'title': 'Front-end development essentials: text editor, command line, http, https, and react', 'summary': 'Covers essential front-end development skills including command line proficiency, understanding of http and https, and the importance of react for building efficient and reusable web applications.', 'duration': 121.691, 'highlights': ['Understanding of HTTP and HTTPS is crucial for building fast and responsive web applications as the HTTP protocol is the backbone of the internet. HTTP and HTTPS are essential for building fast and responsive web applications.', 'Proficiency in the command line is crucial for developers to efficiently run their code after writing it in a text editor. Proficiency in the command line is crucial for efficient code execution.', "React is a front-end JavaScript library that promotes code reusability through its component-based architecture and is responsible for how the application looks and feels for the end user. React promotes code reusability and is responsible for the application's appearance and user experience.", "React's use of Virtual DOM results in high performance and it can be easily integrated with other JavaScript frameworks like Node.js for developing new web applications. React's use of Virtual DOM and integration with other frameworks result in high performance and flexibility."]}, {'end': 2449.217, 'start': 1854.045, 'title': 'Front-end frameworks and developer salaries', 'summary': 'Discusses react, angular, vue.js, front-end developer salaries, website architecture, html, and vs code, highlighting the demand for front-end developers, average salaries in india and the us, and the features and advantages of vs code.', 'duration': 595.172, 'highlights': ['Front-end developers are always in high demand, offered generous salaries across the globe, with an average of 5,06,000 rupees per annum in India and 76,929 US dollars per annum in the United States. Front-end developers are in high demand and offered generous salaries globally, with an average of 5,06,000 rupees per annum in India and 76,929 US dollars per annum in the United States.', 'VS Code, an open source editor, supports multiple programming languages, offers various extensions, and is available for Mac, Linux, and Windows, making it a versatile and accessible option for developers. VS Code is an open source editor that supports multiple programming languages, offers various extensions, and is available for Mac, Linux, and Windows, making it a versatile and accessible option for developers.', 'HTML, CSS, and JavaScript are the most popular technologies used for front-end development, responsible for creating the graphical user interface and providing a smooth user experience. HTML, CSS, and JavaScript are the most popular technologies used for front-end development, responsible for creating the graphical user interface and providing a smooth user experience.']}, {'end': 2918.787, 'start': 2449.797, 'title': 'Vs code setup and html basics', 'summary': 'Covers the step-by-step process of downloading and installing visual studio code, setting up the environment, and provides an introduction to html basics, including explanations of essential html tags and their functionalities.', 'duration': 468.99, 'highlights': ['The chapter covers the step-by-step process of downloading and installing Visual Studio Code, including selecting the location, additional features, and extensions, such as HTML CSS support and live server. It provides a detailed walkthrough of the installation process for Visual Studio Code, including selecting the location, additional features, and essential extensions, such as HTML CSS support and live server.', 'The transcript introduces the basics of HTML, including the definition of tags, the doc type, HTML tag, and head tag, and their functionalities. It introduces the basics of HTML, explaining the definition and functionalities of essential tags such as doc type, HTML tag, and head tag.', "The importance of the title tag in defining the title of a web page and its impact on the browser's window name is explained, with a demonstration of how changes in the title tag are reflected in the web browser. It explains the significance of the title tag in defining the title of a web page and demonstrates how changes in the title tag are reflected in the web browser's window name."]}], 'duration': 1188.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE1730165.jpg', 'highlights': ['Front-end developers are in high demand globally, with an average salary of 5,06,000 rupees per annum in India and 76,929 US dollars per annum in the United States.', 'Understanding of HTTP and HTTPS is crucial for building fast and responsive web applications.', 'Proficiency in the command line is crucial for efficient code execution.', "React promotes code reusability and is responsible for the application's appearance and user experience.", 'VS Code is an open source editor that supports multiple programming languages and offers various extensions, making it a versatile and accessible option for developers.', 'HTML, CSS, and JavaScript are the most popular technologies used for front-end development, responsible for creating the graphical user interface and providing a smooth user experience.', 'The chapter covers the step-by-step process of downloading and installing Visual Studio Code, including selecting the location, additional features, and essential extensions.', 'It introduces the basics of HTML, explaining the definition and functionalities of essential tags such as doc type, HTML tag, and head tag.', "It explains the significance of the title tag in defining the title of a web page and demonstrates how changes in the title tag are reflected in the web browser's window name."]}, {'end': 6534.588, 'segs': [{'end': 5009.192, 'src': 'embed', 'start': 4973.806, 'weight': 2, 'content': [{'end': 4977.067, 'text': 'So it says E M it stands for emphasis.', 'start': 4973.806, 'duration': 3.261}, {'end': 4982.449, 'text': 'Now save the program and you can see here in the browser, you can see the difference.', 'start': 4977.607, 'duration': 4.842}, {'end': 4986.71, 'text': 'Basically the word YouTube stands out from the rest of the words present in the paragraph.', 'start': 4982.489, 'duration': 4.221}, {'end': 4991.425, 'text': 'To lay some more emphasis on the word YouTube, we can use the title attribute.', 'start': 4987.503, 'duration': 3.922}, {'end': 4995.126, 'text': 'Now, title attribute will be used inside the emphasis tab.', 'start': 4992.385, 'duration': 2.741}, {'end': 4997.167, 'text': "So, let's do it here once.", 'start': 4995.666, 'duration': 1.501}, {'end': 5000.468, 'text': 'So, what we are going to do is we are going to use the title attribute over here.', 'start': 4997.347, 'duration': 3.121}, {'end': 5009.192, 'text': "So, let's say the title says, check a YouTube channel.", 'start': 5001.128, 'duration': 8.064}], 'summary': "Using the title attribute for emphasis on 'youtube' in the paragraph.", 'duration': 35.386, 'max_score': 4973.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE4973806.jpg'}, {'end': 6230.068, 'src': 'embed', 'start': 6150.431, 'weight': 0, 'content': [{'end': 6152.053, 'text': 'One such is htmlcodes.com.', 'start': 6150.431, 'duration': 1.622}, {'end': 6157.858, 'text': 'As you can see in the htmlcodes.com we have the hex value and the RGB value of the desired color.', 'start': 6153.214, 'duration': 4.644}, {'end': 6159.3, 'text': "Let's try one.", 'start': 6158.699, 'duration': 0.601}, {'end': 6168.623, 'text': 'We will add this color with the RGB value 171229 and 27 to our paragraph.', 'start': 6163.942, 'duration': 4.681}, {'end': 6173.284, 'text': 'So for that just type RGB and the color code you want.', 'start': 6169.043, 'duration': 4.241}, {'end': 6186.128, 'text': 'As you can see the color is now changed to our RGB value.', 'start': 6183.587, 'duration': 2.541}, {'end': 6187.488, 'text': "Let's try one more.", 'start': 6186.748, 'duration': 0.74}, {'end': 6201.369, 'text': 'This time we will use this RGB value to our text.', 'start': 6199.008, 'duration': 2.361}, {'end': 6212.454, 'text': 'You can see the color is changed to our desired value.', 'start': 6210.513, 'duration': 1.941}, {'end': 6218.076, 'text': 'In this way you can use the RGB format to change the colors.', 'start': 6215.575, 'duration': 2.501}, {'end': 6220.977, 'text': 'The next way is using the hex values.', 'start': 6219.516, 'duration': 1.461}, {'end': 6223.658, 'text': 'Hexadecimal is the 6 digit representation of a color.', 'start': 6221.517, 'duration': 2.141}, {'end': 6227.92, 'text': 'The first two digits are red, next one two are green and the last are the blue value.', 'start': 6224.118, 'duration': 3.802}, {'end': 6230.068, 'text': "Let's see how you can use the hex values.", 'start': 6228.607, 'duration': 1.461}], 'summary': 'Htmlcodes.com provides rgb and hex values for changing colors in web design.', 'duration': 79.637, 'max_score': 6150.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE6150431.jpg'}, {'end': 6349.623, 'src': 'embed', 'start': 6317.179, 'weight': 1, 'content': [{'end': 6319.2, 'text': 'They are hex, RGB values and the color names.', 'start': 6317.179, 'duration': 2.021}, {'end': 6325.204, 'text': 'In the last two sessions, we have discussed what is CSS and the CSS color property.', 'start': 6319.801, 'duration': 5.403}, {'end': 6330.928, 'text': "In this session, we'll discuss how you can set the background image on your web page.", 'start': 6326.065, 'duration': 4.863}, {'end': 6337.732, 'text': "We'll see the several properties related to background image and how you can use them to customize the image around the web page.", 'start': 6331.748, 'duration': 5.984}, {'end': 6340.694, 'text': "So without further delay, let's get going.", 'start': 6338.773, 'duration': 1.921}, {'end': 6344.599, 'text': "So let's begin by discussing about the background property of the CSS.", 'start': 6341.957, 'duration': 2.642}, {'end': 6349.623, 'text': 'The background image property specifies an image to use as a background of an element.', 'start': 6345.94, 'duration': 3.683}], 'summary': 'Css session covers background image properties and their usage.', 'duration': 32.444, 'max_score': 6317.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE6317179.jpg'}, {'end': 6502.685, 'src': 'embed', 'start': 6475.668, 'weight': 8, 'content': [{'end': 6481.711, 'text': 'So, now as you can see the width of the image is 500 pixels.', 'start': 6475.668, 'duration': 6.043}, {'end': 6484.092, 'text': 'Next, we will set the background repeat property.', 'start': 6482.171, 'duration': 1.921}, {'end': 6486.513, 'text': 'There are three values to background repeat.', 'start': 6484.932, 'duration': 1.581}, {'end': 6487.633, 'text': 'First is no repeat.', 'start': 6486.673, 'duration': 0.96}, {'end': 6491.063, 'text': 'With no repeat value, the images will not be repeated on a page.', 'start': 6488.342, 'duration': 2.721}, {'end': 6495.884, 'text': 'Now, as you can see, the images are not repeated.', 'start': 6494.023, 'duration': 1.861}, {'end': 6499.284, 'text': 'Second is repeatX.', 'start': 6498.124, 'duration': 1.16}, {'end': 6502.685, 'text': 'It will set the images to be repeated on the X axis.', 'start': 6499.564, 'duration': 3.121}], 'summary': 'Image width is 500 pixels. background repeat: no repeat and repeatx.', 'duration': 27.017, 'max_score': 6475.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE6475668.jpg'}], 'start': 2918.887, 'title': 'Html and css basics', 'summary': 'Covers creating and linking css file, introducing html tags and elements, discussing html elements and attributes, covering html formatting tags, explaining html phrase tags and their applications, and understanding css and adding colors, emphasizing practical demonstrations and examples.', 'chapters': [{'end': 2964.841, 'start': 2918.887, 'title': 'Creating and linking css file', 'summary': "Explains the process of creating a css file, naming it as style.css, and linking it to an html document using the tag and specifying the source code as 'style.css'.", 'duration': 45.954, 'highlights': ["Explained the process of creating a CSS file named style.css and linking it to an HTML document using the tag and specifying the source code as 'style.css'."]}, {'end': 3667.918, 'start': 2964.841, 'title': 'Html tags and elements', 'summary': 'Introduces and explains the usage of key html tags such as rel, script, body, heading, paragraph, and empty elements, providing examples and practical demonstrations while emphasizing their significance in web development.', 'duration': 703.077, 'highlights': ['The rel tag specifies the relationship between the current and linked documents, and the script tag is used to declare or use any script within the HTML document, typically for JavaScript. The rel tag specifies the relationship between the current and linked documents, while the script tag is used for JavaScript.', "The body tag defines the document's body and contains all the content of an HTML document, including headings, paragraphs, images, hyperlinks, and lists. The body tag defines the document's body and contains all the content of an HTML document.", 'The chapter covers the usage and significance of heading tags (H1 to H6) in HTML, explaining their hierarchy and visual differences in font size. The chapter covers the usage and significance of heading tags (H1 to H6) in HTML, explaining their hierarchy and visual differences in font size.', 'The paragraph tag is introduced for writing content within a web page, and the concept of HTML elements as a collection of start tag, attributes, content, and end tag is explained with a practical example. The paragraph tag is introduced for writing content within a web page, and the concept of HTML elements as a collection is explained with a practical example.', 'The case sensitivity of HTML tags is discussed, highlighting that HTML tags are not case sensitive. The case sensitivity of HTML tags is discussed, highlighting that HTML tags are not case sensitive.', 'The concept of empty or void elements in HTML, such as the image tag and the nesting of elements, is explained with practical examples and demonstrations. The concept of empty or void elements in HTML is explained, and the nesting of elements is demonstrated.']}, {'end': 4528.68, 'start': 3667.918, 'title': 'Html elements and attributes', 'summary': 'Discusses html elements, attributes, and formatting tags, including examples of nesting elements, using attributes like id, src, alt, and styling with style tags, and applying formatting tags like bold, italic, underline, and delete to text content.', 'duration': 860.762, 'highlights': ['The chapter discusses the basics of HTML elements, attributes, and formatting tags, providing examples of nesting elements, using attributes like id, src, alt, and styling with style tags. The chapter covers the basics of HTML elements, attributes, and formatting tags, including examples of nesting elements, using attributes like id, src, alt, and styling with style tags.', 'The usage and impact of the id attribute in HTML elements for unique identification and the application of CSS properties to style elements are explained, demonstrated, and emphasized. The chapter explains the usage and impact of the id attribute in HTML elements for unique identification and the application of CSS properties to style elements, with a focus on the id attribute and its application for styling.', 'The process and importance of providing the src attribute in the image tag to specify the image source and the usage of the alt attribute for displaying alternate text when the image is not displayed are demonstrated and illustrated. The chapter demonstrates the process and importance of providing the src attribute in the image tag to specify the image source and the usage of the alt attribute for displaying alternate text when the image is not displayed.', 'The explanation and application of various formatting tags such as bold, italic, underline, and delete are provided, along with examples of nesting these tags and showcasing their visual impact on text content. The chapter explains and applies various formatting tags such as bold, italic, underline, and delete, with examples of nesting these tags and showcasing their visual impact on text content.']}, {'end': 5072.742, 'start': 4529.261, 'title': 'Html formatting tags', 'summary': 'Covers the usage of html formatting tags including strike, delete, mark, and font, with examples and detailed explanations, along with a brief introduction to the phrase tag and emphasize tag for structural meaning.', 'duration': 543.481, 'highlights': ['The strike tag is used to put a line through a word or text in HTML. The strike tag is used to put a line through a word or text in HTML, achieving the same effect as the delete tag.', 'The delete tag in HTML is used to represent the deletion of a word or text. The delete tag in HTML is used to represent the deletion of a word or text, providing an alternative to the strike tag for achieving the same effect.', 'The mark tag in HTML is utilized to highlight specific text with a yellow color background. The mark tag in HTML is utilized to highlight specific text with a yellow color background, providing a visual emphasis on the marked text.', 'The font tag in HTML is an inline element used for formatting, allowing changes in font size, color, and style. The font tag in HTML is an inline element used for formatting, allowing changes in font size (from 1 to 7), font color, and font style using attributes such as size, color, and face.', 'The phrase tag in HTML is used to provide structural meaning to a block of text, and the emphasize tag is used to add emphasis to a specific word or text. The phrase tag in HTML is used to provide structural meaning to a block of text, and the emphasize tag is used to add emphasis to a specific word or text, with the option to use the title attribute for additional emphasis.']}, {'end': 5876.187, 'start': 5072.982, 'title': 'Html phrase tags and their applications', 'summary': 'Discusses the applications of phrase tags in html, covering formatting tags, phrase tags, and meta tags, along with their differences and practical usage, emphasizing the importance of css in web development and its advantages in time-saving, maintenance, and better styling.', 'duration': 803.205, 'highlights': ['CSS provides a considerably wider range of properties as well than HTML, so you can give your HTML page a much better look than you can use using HTML attributes. CSS offers a wider range of styling properties than HTML, enabling enhanced visual appeal for HTML pages.', 'To make a modification that affects all elements on all web pages, just modify the style sheet. CSS simplifies maintenance by allowing instant updates across all web pages by modifying the style sheet.', 'CSS is a time saving since you can create it once and reuse it across a number of HTML pages. CSS offers time-saving benefits by enabling the creation and reuse of styles across multiple HTML pages.', "The meta tag does not impact the appearance of a web page; it gives information about the data present on the web page through metadata. The meta tag provides essential information about the web page's data through metadata, without impacting its appearance.", 'The address tag is used to display the address in the web browser and is indicated by a different font, distinguishing it as an address. The address tag displays the address in a distinct font, clearly indicating it as an address in the web browser.']}, {'end': 6534.588, 'start': 5876.927, 'title': 'Understanding css and adding colors', 'summary': 'Explains how css works, including the steps a browser takes to process a document, and provides detailed guidance on using color values in css, covering standard color names, hex and rgb formats, and adding colors to html elements. it also introduces the background image property in css, demonstrating how to add and customize a background image on a web page.', 'duration': 657.661, 'highlights': ["The chapter explains how CSS works, including the steps a browser takes to process a document. It details the process of a browser loading HTML, transforming it into a document object model, loading CSS, parsing the CSS, creating a render tree, and displaying the page's visual representation.", 'Detailed guidance on using color values in CSS, covering standard color names, hex and RGB formats, and adding colors to HTML elements. It explains the use of nearly 140 standard color names, hexadecimal representation of colors, and specifying RGB values for colors, and provides a practical example of adding colors to HTML elements using color names, RGB values, and hex values.', 'Introduction to the background image property in CSS, demonstrating how to add and customize a background image on a web page. It introduces the background image property, explains how to specify an image for the background of an element, and demonstrates setting the background size and repeat properties, with practical examples of adding and customizing a background image on a web page.']}], 'duration': 3615.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE2918887.jpg', 'highlights': ["The process of creating a CSS file named style.css and linking it to an HTML document using the tag and specifying the source code as 'style.css'.", 'The chapter covers the usage and significance of heading tags (H1 to H6) in HTML, explaining their hierarchy and visual differences in font size.', 'The chapter explains the usage and impact of the id attribute in HTML elements for unique identification and the application of CSS properties to style elements, with a focus on the id attribute and its application for styling.', 'The chapter demonstrates the process and importance of providing the src attribute in the image tag to specify the image source and the usage of the alt attribute for displaying alternate text when the image is not displayed.', 'CSS offers a wider range of styling properties than HTML, enabling enhanced visual appeal for HTML pages.', 'CSS simplifies maintenance by allowing instant updates across all web pages by modifying the style sheet.', 'CSS offers time-saving benefits by enabling the creation and reuse of styles across multiple HTML pages.', "The chapter details the process of a browser loading HTML, transforming it into a document object model, loading CSS, parsing the CSS, creating a render tree, and displaying the page's visual representation.", 'It explains the use of nearly 140 standard color names, hexadecimal representation of colors, and specifying RGB values for colors, and provides a practical example of adding colors to HTML elements using color names, RGB values, and hex values.', 'It introduces the background image property, explains how to specify an image for the background of an element, and demonstrates setting the background size and repeat properties, with practical examples of adding and customizing a background image on a web page.']}, {'end': 7727.841, 'segs': [{'end': 6728.241, 'src': 'embed', 'start': 6701.202, 'weight': 3, 'content': [{'end': 6704.283, 'text': 'So, here we have used the hash para1.', 'start': 6701.202, 'duration': 3.081}, {'end': 6708.545, 'text': 'So, all the rules will be applied to the HTML element with ID equal to para1.', 'start': 6704.864, 'duration': 3.681}, {'end': 6710.446, 'text': 'So, this is an ID selector.', 'start': 6709.025, 'duration': 1.421}, {'end': 6714.587, 'text': 'It will be applied to all the HTML elements with ID is equal to para1.', 'start': 6711.426, 'duration': 3.161}, {'end': 6721.419, 'text': 'As you can see, it is applied to the element having the id paraben and all the other elements are defaultly styled.', 'start': 6715.387, 'duration': 6.032}, {'end': 6723.379, 'text': 'CSS class selector.', 'start': 6722.259, 'duration': 1.12}, {'end': 6728.241, 'text': 'The class selector finds the element with a specific class set by the HTML class attribute.', 'start': 6723.94, 'duration': 4.301}], 'summary': 'Using id and class selectors to style html elements.', 'duration': 27.039, 'max_score': 6701.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE6701202.jpg'}, {'end': 7272.555, 'src': 'heatmap', 'start': 6844.3, 'weight': 0.711, 'content': [{'end': 6847.903, 'text': 'The content area consists of content like text, images or other media.', 'start': 6844.3, 'duration': 3.603}, {'end': 6852.966, 'text': 'It is bounded by the content edge and its dimensions are given by the content box width and height.', 'start': 6848.603, 'duration': 4.363}, {'end': 6857.569, 'text': 'The border area is the area between the box padding and margin.', 'start': 6854.648, 'duration': 2.921}, {'end': 6860.67, 'text': 'Its dimensions are given by the width and height of the border.', 'start': 6858.389, 'duration': 2.281}, {'end': 6866.352, 'text': 'The margin area consists of spaces between the border and the margin.', 'start': 6863.451, 'duration': 2.901}, {'end': 6871.074, 'text': 'The dimensions of the margin area are the margin box width and margin box height.', 'start': 6867.133, 'duration': 3.941}, {'end': 6874.155, 'text': 'It is useful to separate the element from its neighbors.', 'start': 6871.995, 'duration': 2.16}, {'end': 6880.647, 'text': "The padding area is the area that includes the element's padding.", 'start': 6876.676, 'duration': 3.971}, {'end': 6885.031, 'text': 'This area is actually the space around the content area and within the border box.', 'start': 6881.308, 'duration': 3.723}, {'end': 6889.555, 'text': 'Its dimensions are given by the width of the padding box and the height of the padding box.', 'start': 6885.812, 'duration': 3.743}, {'end': 6894.279, 'text': "Now let's jump to an example to understand the box model better.", 'start': 6891.556, 'duration': 2.723}, {'end': 6897.141, 'text': 'So, we are on the Sublime Text Editor.', 'start': 6895.3, 'duration': 1.841}, {'end': 6901.625, 'text': 'To get started, I have created a box named simply background color pink.', 'start': 6897.742, 'duration': 3.883}, {'end': 6905.528, 'text': 'The font size is set to pixel and we have set the border to 0 solid green.', 'start': 6902.225, 'duration': 3.303}, {'end': 6907.69, 'text': "Let's see how it looks on our page.", 'start': 6906.409, 'duration': 1.281}, {'end': 6913.981, 'text': 'So as you can see we have a box named simply learn with background going all the way to the end.', 'start': 6909.215, 'duration': 4.766}, {'end': 6921.951, '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 as you can see.', 'start': 6915.002, 'duration': 6.949}, {'end': 6925.496, 'text': "Let's start by adding a padding of 20 pixels to the box.", 'start': 6923.173, 'duration': 2.323}, {'end': 6941.731, 'text': 'If you save the file, you can see the box increased by 20 pixels from all the sides.', 'start': 6938.348, 'duration': 3.383}, {'end': 6944.714, 'text': 'Padding occurs inside the background of an element.', 'start': 6942.712, 'duration': 2.002}, {'end': 6946.956, 'text': 'It goes around the content of the element.', 'start': 6945.275, 'duration': 1.681}, {'end': 6953.523, 'text': 'Most of the buttons inside the CSS is designed using padding so that the background of the button becomes wider than the actual text.', 'start': 6947.577, 'duration': 5.946}, {'end': 6956.626, 'text': 'The next thing we can do is change the border of the element.', 'start': 6954.344, 'duration': 2.282}, {'end': 6961.831, 'text': 'If we change this border size to 15 pixels, we will get a nice solid background of color green.', 'start': 6957.246, 'duration': 4.585}, {'end': 6970.697, 'text': 'The border goes around the padding of our element.', 'start': 6968.817, 'duration': 1.88}, {'end': 6976.319, 'text': 'So we have the 20px of padding around our content and 15px of border around the padding which is around the content.', 'start': 6971.238, 'duration': 5.081}, {'end': 6979.459, 'text': 'Now we will see the working of the margin.', 'start': 6978.039, 'duration': 1.42}, {'end': 6984.08, 'text': 'If we add 30px of margin to our element, you can see the spacing on the outside of our border.', 'start': 6980.14, 'duration': 3.94}, {'end': 6991.302, 'text': "So let's add the 30px margin and refresh.", 'start': 6988.681, 'duration': 2.621}, {'end': 6996.875, 'text': 'You can see the spacing on outside of the border.', 'start': 6994.974, 'duration': 1.901}, {'end': 7000.396, 'text': 'Margin is used to space two elements apart from each other.', 'start': 6997.515, 'duration': 2.881}, {'end': 7003.037, 'text': "Now let's change these values to see the difference.", 'start': 7001.256, 'duration': 1.781}, {'end': 7006.198, 'text': "Let's make the margin 40 pixels.", 'start': 7003.897, 'duration': 2.301}, {'end': 7015.521, 'text': "We'll make the padding 30 pixels and let's keep the border 20 pixels and make it color red.", 'start': 7007.378, 'duration': 8.143}, {'end': 7019.382, 'text': 'This is 40 pixels.', 'start': 7018.402, 'duration': 0.98}, {'end': 7024.905, 'text': "Let's observe the changes.", 'start': 7023.905, 'duration': 1}, {'end': 7034.769, 'text': 'So as you can see our border now has a red background, the padding is 30px, the margin is 40px.', 'start': 7027.726, 'duration': 7.043}, {'end': 7037.59, 'text': "Let's inspect the elements to understand it better.", 'start': 7035.229, 'duration': 2.361}, {'end': 7046.813, 'text': 'By clicking on inspect you can see the different styles.', 'start': 7044.072, 'duration': 2.741}, {'end': 7050.915, 'text': 'Here in the computer tab you can see the box model.', 'start': 7047.594, 'duration': 3.321}, {'end': 7057.015, 'text': 'This is the content area, this is the padding area, this is the border and this is the margin area.', 'start': 7052.031, 'duration': 4.984}, {'end': 7060.879, 'text': 'We have the margin of 40 pixels around the border.', 'start': 7057.816, 'duration': 3.063}, {'end': 7065.343, 'text': 'So when you click on this area, you can see the margin gets highlighted.', 'start': 7061.319, 'duration': 4.024}, {'end': 7068.686, 'text': 'The border area gets highlighted of 20 pixels.', 'start': 7066.424, 'duration': 2.262}, {'end': 7071.428, 'text': 'This is the padding and this is the content.', 'start': 7069.426, 'duration': 2.002}, {'end': 7074.951, 'text': 'You can change the size of the content by adding the height and width.', 'start': 7072.289, 'duration': 2.662}, {'end': 7078.014, 'text': "So let's try adding height and width.", 'start': 7075.812, 'duration': 2.202}, {'end': 7083.408, 'text': "We'll give the height 50 pixels and we'll give the width also 50 pixels.", 'start': 7078.766, 'duration': 4.642}, {'end': 7086.149, 'text': 'Just save the file.', 'start': 7085.289, 'duration': 0.86}, {'end': 7095.974, 'text': 'Now when you refresh, you can see the content area of 15 to 50.', 'start': 7090.451, 'duration': 5.523}, {'end': 7096.914, 'text': 'What is a flexbox?', 'start': 7095.974, 'duration': 0.94}, {'end': 7100.876, 'text': 'Flexbox, also called flexible box model,', 'start': 7098.035, 'duration': 2.841}, {'end': 7106.979, 'text': 'is basically a layout mode or model that provides an easy and clean way to arrange the items within a container.', 'start': 7100.876, 'duration': 6.103}, {'end': 7112.678, 'text': 'If you are using a CSS for a while, you must have used the old block model,', 'start': 7108.354, 'duration': 4.324}, {'end': 7119.344, 'text': 'where you assign width in terms of percentage or fixed width and then use the float to arrange the items on the page.', 'start': 7112.678, 'duration': 6.666}, {'end': 7123.708, 'text': 'Suppose for example, you want to arrange 3 boxes in a row.', 'start': 7120.265, 'duration': 3.443}, {'end': 7128.573, 'text': 'Then you have to enter everything manually from width, height and to padding.', 'start': 7124.789, 'duration': 3.784}, {'end': 7130.995, 'text': 'Flexbox can do all these things with ease.', 'start': 7129.033, 'duration': 1.962}, {'end': 7141.007, 'text': 'Some of the concepts of flexible box model is the ability to alter the item width and height to best fit in the containers available in the free space.', 'start': 7133.143, 'duration': 7.864}, {'end': 7150.632, 'text': 'Flex model is direction agnostic which is different from the box model which is vertically biased and the inline which is horizontally biased.', 'start': 7142.908, 'duration': 7.724}, {'end': 7152.333, 'text': 'Flexbox works for both.', 'start': 7151.113, 'duration': 1.22}, {'end': 7157.156, 'text': 'Flexbox is more effective in small scale layouts.', 'start': 7154.775, 'duration': 2.381}, {'end': 7160.818, 'text': 'So, here are the main properties of the flex.', 'start': 7158.897, 'duration': 1.921}, {'end': 7167.945, 'text': "Okay, so let's jump to some code and learn how these flex properties work.", 'start': 7163.743, 'duration': 4.202}, {'end': 7171.487, 'text': 'Okay, so we are on the sublime text editor.', 'start': 7169.085, 'duration': 2.402}, {'end': 7177.789, 'text': "To get started, let's add a div inside our body here and we will give a class of flexbox container.", 'start': 7172.327, 'duration': 5.462}, {'end': 7181.271, 'text': 'Since this will be the container where all our flexbox items will reside.', 'start': 7178.43, 'duration': 2.841}, {'end': 7201.497, 'text': 'Then, inside this container, we will add another div and give it a class flexbox-item and one more class flexbox-item1,', 'start': 7193.931, 'duration': 7.566}, {'end': 7205.901, 'text': 'which will help us to understand which items we are referring to when we style our elements individually.', 'start': 7201.497, 'duration': 4.404}, {'end': 7223.848, 'text': "Let's just save the file and see how it looks on a page.", 'start': 7221.246, 'duration': 2.602}, {'end': 7230.934, 'text': 'Now if you save the file you can see we have the box because I have already applied some of the styles to these flexbox items.', 'start': 7225.049, 'duration': 5.885}, {'end': 7232.996, 'text': "Let's just see the styling.", 'start': 7231.755, 'duration': 1.241}, {'end': 7240.943, 'text': 'So you can see we have the items styled just a basic styling so that we get the box on our page.', 'start': 7234.797, 'duration': 6.146}, {'end': 7249.51, 'text': "Now let's just copy these and add two more flexbox items and you will see we have two more boxes on our page.", 'start': 7243.825, 'duration': 5.685}, {'end': 7253.787, 'text': 'Just copy and paste them below.', 'start': 7251.986, 'duration': 1.801}, {'end': 7262.471, 'text': 'Give them the class name flexbox-item2 and flexbox-item3.', 'start': 7258.009, 'duration': 4.462}, {'end': 7264.371, 'text': 'Just save the file.', 'start': 7263.451, 'duration': 0.92}, {'end': 7272.555, 'text': 'Now you can see we have three boxes on the page.', 'start': 7270.574, 'duration': 1.981}], 'summary': 'Understanding the css box model and flexbox layout, with practical examples and adjustments of padding, border, and margin dimensions, as well as the application of flexbox properties for arranging items within a container.', 'duration': 428.255, 'max_score': 6844.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE6844300.jpg'}, {'end': 7711.356, 'src': 'embed', 'start': 7661.486, 'weight': 0, 'content': [{'end': 7666.129, 'text': 'They can either be vertical or horizontal and resides on either side of rows and columns.', 'start': 7661.486, 'duration': 4.643}, {'end': 7670.753, 'text': 'A grid column is a space between two adjacent vertical grid lines.', 'start': 7667.69, 'duration': 3.063}, {'end': 7675.076, 'text': 'The size of a grid column is determined by the GridTemplateColumns property.', 'start': 7671.633, 'duration': 3.443}, {'end': 7681.2, 'text': 'On the other hand, a grid row is a space between two adjacent horizontal grid lines.', 'start': 7676.197, 'duration': 5.003}, {'end': 7684.783, 'text': 'Its size is determined by the GridTemplateRows property.', 'start': 7682.281, 'duration': 2.502}, {'end': 7688.975, 'text': 'The grid cell is the single unit of a CSS grid.', 'start': 7686.673, 'duration': 2.302}, {'end': 7695.421, 'text': 'And in grid design, a gutter is basically the width of the space between columns.', 'start': 7691.778, 'duration': 3.643}, {'end': 7704.069, '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': 7696.082, 'duration': 7.987}, {'end': 7711.356, 'text': "So, with this, let's now move on to the hands-on demo and see how the grid system works in actual world.", 'start': 7705.13, 'duration': 6.226}], 'summary': 'Css grid system includes columns, rows, cells, and gutters. gridtemplatecolumns and gridtemplaterows properties determine column and row sizes.', 'duration': 49.87, 'max_score': 7661.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE7661486.jpg'}], 'start': 6535.869, 'title': 'Css and layout fundamentals', 'summary': 'Covers css selectors, box model, flexbox, and grid layout; it explains various selectors and their styling effects, details the css box model and introduces the flexbox model with its advantages, and covers creating flex containers, styling elements, and using grid layout features.', 'chapters': [{'end': 6806.086, 'start': 6535.869, 'title': 'Css selectors overview', 'summary': 'Explains css selectors, including their types such as element, id, class, universal, and group selectors, and demonstrates their styling effects on web elements.', 'duration': 270.217, 'highlights': ['CSS selectors allow you to select and style HTML elements based on their ID, classes, types, attributes, and values of attributes. The chapter explains that CSS selectors enable the selection and styling of HTML elements based on their ID, classes, types, attributes, and attribute values.', 'The chapter discusses the most common types of CSS selectors, including element selectors, ID selectors, class selectors, universal selectors, and group selectors. The chapter details the most common types of CSS selectors, covering element, ID, class, universal, and group selectors.', 'The chapter demonstrates the effects of CSS selectors by applying styling to elements, such as centrally aligning text and changing text color. The chapter demonstrates the effects of CSS selectors by applying styling to elements, including centrally aligning text and changing text color.']}, {'end': 7171.487, 'start': 6806.986, 'title': 'Understanding css box model', 'summary': 'Explains the css box model, detailing the content, padding, border, and margin areas, and their dimensions, with an example demonstrating their application; additionally, it introduces the flexbox model and its advantages over the old block model.', 'duration': 364.501, 'highlights': ['The CSS box model consists of content, padding, border, and margin areas, and their dimensions are defined by the width and height of each area.', "The example demonstrates the impact of adjusting padding, borders, and margins, with specific pixel values resulting in visible changes to the element's layout.", 'The flexbox model is introduced as a more efficient and flexible way to arrange items within a container, providing advantages over the old block model in terms of layout flexibility and ease of use.', 'Flexbox offers direction-agnostic layout capabilities, catering to both vertical and horizontal arrangements, and is particularly effective for small-scale layouts.']}, {'end': 7727.841, 'start': 7172.327, 'title': 'Working with flexbox and grid layout', 'summary': 'Covers the basics of working with flexbox and grid layout, including creating a flex container, styling elements, using flex item properties, and understanding the features of the css grid layout.', 'duration': 555.514, 'highlights': ['The CSS grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position and layer between parts of a control-built HTML primitive. It is a two-dimensional system, meaning it can handle both columns and rows, unlike Flexbox which is largely a one-dimensional system.', 'The grid also contains an algorithm to control the placement of items not given an explicit position on the grid. You can define an explicit grid with a grid layout. The grid layout specification is flexible enough to add additional rows and columns when needed.', "If we want our first item that does not shrink when we shrink our browser, we'll set the flex shrink to zero to our first item. Now if you go back to the page, and try to shrink this. You will see the first item remains the same. It does not shrink.", "To get started, let's add a div inside our body here and we will give a class of flexbox container. Since this will be the container where all our flexbox items will reside. Then, inside this container, we will add another div and give it a class flexbox-item and one more class flexbox-item1, which will help us to understand which items we are referring to when we style our elements individually."]}], 'duration': 1191.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE6535869.jpg', 'highlights': ['The CSS grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position and layer between parts of a control-built HTML primitive. It is a two-dimensional system, meaning it can handle both columns and rows, unlike Flexbox which is largely a one-dimensional system.', 'The chapter discusses the most common types of CSS selectors, including element selectors, ID selectors, class selectors, universal selectors, and group selectors. The chapter details the most common types of CSS selectors, covering element, ID, class, universal, and group selectors.', 'The flexbox model is introduced as a more efficient and flexible way to arrange items within a container, providing advantages over the old block model in terms of layout flexibility and ease of use.', "The example demonstrates the impact of adjusting padding, borders, and margins, with specific pixel values resulting in visible changes to the element's layout.", 'The chapter demonstrates the effects of CSS selectors by applying styling to elements, including centrally aligning text and changing text color.']}, {'end': 9975.283, 'segs': [{'end': 7905.708, 'src': 'embed', 'start': 7879.002, 'weight': 2, 'content': [{'end': 7883.204, 'text': "this is because the grid itself doesn't define any rows and columns for us to work with it.", 'start': 7879.002, 'duration': 4.202}, {'end': 7885.866, 'text': 'just they give the alignment properly.', 'start': 7883.204, 'duration': 2.662}, {'end': 7887.787, 'text': 'therefore, by default, it looks just exactly the same.', 'start': 7885.866, 'duration': 1.921}, {'end': 7893.515, 'text': 'To make the grid look actually great, what you need to do is define columns and rows for a grid.', 'start': 7888.57, 'duration': 4.945}, {'end': 7903.285, 'text': 'So to do this, you will use a set grid template and set the column if you want to set the size of the column.', 'start': 7898.1, 'duration': 5.185}, {'end': 7905.708, 'text': 'We will set the size to 100px and 150px.', 'start': 7903.706, 'duration': 2.002}], 'summary': 'Defining rows and columns enhances grid appearance. set grid template and column size to 100px and 150px.', 'duration': 26.706, 'max_score': 7879.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE7879002.jpg'}, {'end': 7973.034, 'src': 'embed', 'start': 7944.831, 'weight': 1, 'content': [{'end': 7947.352, 'text': 'And instead of a 100 pixel, we want the two fractions of our size.', 'start': 7944.831, 'duration': 2.521}, {'end': 7951.575, 'text': "So we'll just replace with two fractions.", 'start': 7948.433, 'duration': 3.142}, {'end': 7955.287, 'text': 'and this with one fraction.', 'start': 7954.147, 'duration': 1.14}, {'end': 7965.131, 'text': 'Now, if you save the file and go back to the page,', 'start': 7958.749, 'duration': 6.382}, {'end': 7970.113, 'text': 'you will see that the items on our left here in our first column are twice as large as the item on the second column.', 'start': 7965.131, 'duration': 4.982}, {'end': 7973.034, 'text': 'And that is because of the FR unit we have defined.', 'start': 7970.913, 'duration': 2.121}], 'summary': 'Using fractions instead of pixels resulted in first column items being twice as large as the second column.', 'duration': 28.203, 'max_score': 7944.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE7944831.jpg'}, {'end': 8034.884, 'src': 'embed', 'start': 8001.108, 'weight': 0, 'content': [{'end': 8005.87, 'text': "We'll set the number of times we want to repeat and the size of the columns.", 'start': 8001.108, 'duration': 4.762}, {'end': 8011.533, 'text': 'Now if you save the file, you will see we have four columns of 100 pixels wide.', 'start': 8007.771, 'duration': 3.762}, {'end': 8013.972, 'text': 'We can do the same things for row.', 'start': 8012.571, 'duration': 1.401}, {'end': 8018.855, 'text': 'Just set the grid template rows and define the size you want.', 'start': 8014.812, 'duration': 4.043}, {'end': 8030.662, 'text': 'Now you can see we have a symmetric size all around our container.', 'start': 8027.82, 'duration': 2.842}, {'end': 8034.884, 'text': "If you don't know how large your grid is going to be,", 'start': 8032.603, 'duration': 2.281}], 'summary': 'Demonstrating grid layout with 4 columns of 100 pixels each and symmetric size for the container.', 'duration': 33.776, 'max_score': 8001.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE8001108.jpg'}], 'start': 7729.041, 'title': 'Creating grid layout, sizing, positioning, form creation, javascript evolution, and game development', 'summary': 'Covers creating a grid layout, sizing and positioning elements, form creation with html and css, javascript evolution, and its applications including game development. it also introduces the document object model (dom).', 'chapters': [{'end': 7903.285, 'start': 7729.041, 'title': 'Creating grid layout in css', 'summary': 'Discusses creating a grid layout in css, creating a grid container, adding grid items, and styling the grid using css, emphasizing the importance of defining rows and columns for the grid.', 'duration': 174.244, 'highlights': ['The chapter discusses creating a grid layout in CSS, emphasizing the importance of defining rows and columns for the grid.', 'Demonstrates creating a grid container and adding grid items to it, providing a visual demonstration with five grid items on the page.', "Explains the necessity of setting the display property to 'grid' for the grid container in CSS, highlighting the need to define rows and columns for the grid to enhance its appearance."]}, {'end': 8388.946, 'start': 7903.706, 'title': 'Grid sizing and positioning', 'summary': 'Covers setting column and row sizes with pixels and fraction units, using repeat command for columns, defining grid auto rows, setting grid gap to evenly space rows and columns, and positioning items within grid cells horizontally and vertically.', 'duration': 485.24, 'highlights': ['Setting column and row sizes with pixels and fraction units Demonstrates setting column sizes to 100px and 150px, and using fraction units to create flexible-sized columns.', 'Using repeat command for columns Illustrates using the repeat command to create four columns of a size 100 pixels wide.', 'Defining grid auto rows and setting grid gap Explains how to use grid auto rows to determine the size of all rows added after template rows, and demonstrates using grid gap property to space rows and columns evenly.', 'Positioning items within grid cells horizontally and vertically Covers using justify items for horizontal positioning and align items for vertical positioning, as well as aligning the entire grid within the container using justify content and align content.']}, {'end': 9363.904, 'start': 8393.277, 'title': 'Creating and styling a form with html and css', 'summary': 'Covers creating the structure of a form using html and styling it with css, including aligning elements, using different input types, and applying css properties to the form. it also delves into the history and significance of javascript, its initial perception, and its role in making web pages interactive and lively.', 'duration': 970.627, 'highlights': ['Creating the Structure of a Form with HTML The chapter begins with creating the basic structure of a form using HTML, including elements like form, ul, li, label, and input, illustrating the process of creating input fields for name, email, and message.', 'Styling the Form with CSS The tutorial then proceeds to style the form using CSS, covering aspects such as centering the form, setting width, padding, border, border radius, background color, and styling the input elements and text area to create a visually appealing form.', 'JavaScript: History and Significance The latter part of the transcript delves into the history and significance of JavaScript, including its initial perception, the development timeline, the misconception regarding its relation to Java, and its role in making web pages interactive and lively.']}, {'end': 9646.662, 'start': 9365.179, 'title': 'Javascript evolution & applications', 'summary': 'Highlights the evolution and features of javascript, including its use by tech giants like google and paypal, its role in single page websites like gmail, and its applications in web development, app development, smartwatches, and client-side validation.', 'duration': 281.483, 'highlights': ['JavaScript is used by tech giants like Google, PayPal, Amazon, and YouTube, and it has evolved significantly in the past few years.', 'Gmail, a single page website, is based on angular.js, a popular framework by Google, which is free and entirely JavaScript-based.', 'JavaScript is a scripting language that works in the runtime environment without the need for a compiler, making it advantageous over languages like C++ and Java.', 'JavaScript is both a client-side and server-side technology, initially introduced as a client-side technology but now also working in the backend with the introduction of Node.js in 2009.', 'JavaScript is platform independent, object-based, and supports features of object-oriented programming like encapsulation, polymorphism, and prototypal inheritance.', 'JavaScript is widely used in web development with technologies like Angular and Node.js, and it is also employed in app development, including hybrid apps for Android and iOS, as well as in smartwatches like the Bengal.js.', 'One unique application of JavaScript is client-side validation, where it is used to validate user data by cross-checking it with given conditions, ensuring correct user input.']}, {'end': 9975.283, 'start': 9646.662, 'title': 'Javascript game development & dom introduction', 'summary': 'Discusses the application of javascript in game development and introduces the document object model (dom) as an api for html documents, highlighting its role as a mediator between javascript and html, its hierarchical representation of the html document, and the types of nodes present in the dom.', 'duration': 328.621, 'highlights': ['JavaScript game development can be used to make fully fledged 2D or 3D games using different libraries, with a focus on creating games for browsers. JavaScript is utilized for creating fully-fledged 2D or 3D games, primarily focusing on browser-based games.', 'DOM stands for Document Object Model, an API for HTML and XML documents, serving as a mediator between JavaScript and the HTML document. DOM acts as a mediator between JavaScript and the HTML document, providing a hierarchical representation of the HTML document for JavaScript to access and manipulate.', 'The DOM represents the entire HTML document in the form of object and nodes, allowing JavaScript to access or manipulate the entire page content. The DOM represents the entire HTML document in the form of objects and nodes, enabling JavaScript to access and manipulate the entire page content.', 'Different browsers have different implementations of the Document Object Model, yet every browser uses DOM to make the webpage of the document accessible by JavaScript. Different browsers have varied implementations of the DOM, but all browsers use it to make the webpage accessible by JavaScript.', 'The Document Object Model represents the same HTML document with a different representation, making it easy for JavaScript to interpret and manipulate using different functions. The DOM represents the HTML document with a different representation, facilitating JavaScript to interpret and manipulate it with various functions.']}], 'duration': 2246.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE7729041.jpg', 'highlights': ['JavaScript is widely used in web development with technologies like Angular and Node.js, and it is also employed in app development, including hybrid apps for Android and iOS, as well as in smartwatches like the Bengal.js.', 'JavaScript game development can be used to make fully fledged 2D or 3D games using different libraries, with a focus on creating games for browsers.', 'The chapter discusses creating a grid layout in CSS, emphasizing the importance of defining rows and columns for the grid.', 'DOM stands for Document Object Model, an API for HTML and XML documents, serving as a mediator between JavaScript and the HTML document.']}, {'end': 11251.635, 'segs': [{'end': 10217.868, 'src': 'embed', 'start': 10186.434, 'weight': 8, 'content': [{'end': 10188.055, 'text': "javascript won't allow you this.", 'start': 10186.434, 'duration': 1.621}, {'end': 10192.796, 'text': 'if you try to save it, it will throw you an error, invalid or unexpected token.', 'start': 10188.055, 'duration': 4.741}, {'end': 10195.057, 'text': "so you can't do this in javascript.", 'start': 10192.796, 'duration': 2.261}, {'end': 10201.483, 'text': "there is no limit for the length of the variable name, But you can't use reserved keywords in a variable name.", 'start': 10195.057, 'duration': 6.426}, {'end': 10205.548, 'text': "Like let's try to create a variable with name as class.", 'start': 10201.523, 'duration': 4.025}, {'end': 10207.851, 'text': 'Class is a reserved keyword in JavaScript.', 'start': 10205.648, 'duration': 2.203}, {'end': 10210.434, 'text': 'We will save it and see.', 'start': 10208.512, 'duration': 1.922}, {'end': 10213.398, 'text': 'Here it throws an error unexpected token class.', 'start': 10210.554, 'duration': 2.844}, {'end': 10217.868, 'text': 'But you can use a class with capital C.', 'start': 10214.266, 'duration': 3.602}], 'summary': "In javascript, using reserved keywords like 'class' in variable names results in errors. variable names have no length limit.", 'duration': 31.434, 'max_score': 10186.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE10186434.jpg'}, {'end': 10565.857, 'src': 'embed', 'start': 10534.168, 'weight': 11, 'content': [{'end': 10536.429, 'text': '7 plus 5 is equal to 12..', 'start': 10534.168, 'duration': 2.261}, {'end': 10537.769, 'text': 'Now what we will do.', 'start': 10536.429, 'duration': 1.34}, {'end': 10545.952, 'text': "const will let you do this, but if you try to update the value of x, let's suppose we try to update the value of x.", 'start': 10537.769, 'duration': 8.183}, {'end': 10554.754, 'text': 'as x equals to x plus 10, we will print x this time.', 'start': 10545.952, 'duration': 8.802}, {'end': 10557.995, 'text': 'document.write x.', 'start': 10554.754, 'duration': 3.241}, {'end': 10559.115, 'text': "let's save this.", 'start': 10557.995, 'duration': 1.12}, {'end': 10563.456, 'text': 'it will throw an error assignment to a constant variable in line 24.', 'start': 10559.115, 'duration': 4.341}, {'end': 10565.857, 'text': 'so here you want to update the value of x.', 'start': 10563.456, 'duration': 2.401}], 'summary': 'Demonstrating constant variable usage, leading to error in updating x.', 'duration': 31.689, 'max_score': 10534.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE10534168.jpg'}, {'end': 10643.93, 'src': 'embed', 'start': 10620.509, 'weight': 7, 'content': [{'end': 10628.476, 'text': "We discussed earlier that JavaScript is a lightweight scripting language because we don't need to specify any data type in JavaScript.", 'start': 10620.509, 'duration': 7.967}, {'end': 10636.103, 'text': 'After all, all the variables in JavaScript are loosely packed or we can say JavaScript is a dynamically typed scripting language.', 'start': 10628.917, 'duration': 7.186}, {'end': 10638.985, 'text': 'We shall discuss these properties later in this video.', 'start': 10636.403, 'duration': 2.582}, {'end': 10643.93, 'text': 'For now, let me tell you about different data types present in JavaScript.', 'start': 10639.106, 'duration': 4.824}], 'summary': 'Javascript is a dynamically typed language with loosely packed variables and various data types.', 'duration': 23.421, 'max_score': 10620.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE10620509.jpg'}, {'end': 10856.194, 'src': 'embed', 'start': 10824.428, 'weight': 0, 'content': [{'end': 10827.949, 'text': 'When you pass the value to the variable, it will be determined automatically.', 'start': 10824.428, 'duration': 3.521}, {'end': 10837.167, 'text': 'So, these are the three basic primitive data types present in JavaScript, which are number, boolean value and string.', 'start': 10828.209, 'duration': 8.958}, {'end': 10840.848, 'text': "So let's move on to the next one which is undefined.", 'start': 10838.087, 'duration': 2.761}, {'end': 10845.09, 'text': "We'll define a variable p and we'll leave it as it is.", 'start': 10841.369, 'duration': 3.721}, {'end': 10848.411, 'text': 'So this variable p has an undefined data type.', 'start': 10845.47, 'duration': 2.941}, {'end': 10856.194, 'text': 'It means that any variable which is already declared but has no value inside it, it has an undefined data type.', 'start': 10848.531, 'duration': 7.663}], 'summary': 'Javascript has three primitive data types: number, boolean, and string, and also an undefined data type for variables with no value.', 'duration': 31.766, 'max_score': 10824.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE10824428.jpg'}, {'end': 10933.435, 'src': 'embed', 'start': 10905.825, 'weight': 9, 'content': [{'end': 10909.447, 'text': 'this means that this variable has a value which is a number.', 'start': 10905.825, 'duration': 3.622}, {'end': 10912.829, 'text': 'similarly, we will check for all the variables present here.', 'start': 10909.447, 'duration': 3.382}, {'end': 10914.29, 'text': "we'll check for every variable.", 'start': 10912.829, 'duration': 1.461}, {'end': 10917.992, 'text': "we'll check for y, we'll check for flag and we'll check for p as well.", 'start': 10914.29, 'duration': 3.702}, {'end': 10933.435, 'text': "let's copy this and paste it three times and let's change the value here from x to y in this line and from x to flag here and here we will change it to p.", 'start': 10917.992, 'duration': 15.443}], 'summary': 'Checking for values of variables y, flag, and p in the code.', 'duration': 27.61, 'max_score': 10905.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE10905825.jpg'}], 'start': 9975.884, 'title': 'Javascript fundamentals', 'summary': 'Covers javascript variables and attributes, variable declaration, data types, and control statements. it emphasizes the manipulation of html attributes, variable declaration, data type distinctions, and the importance of control statements in program flow, featuring examples and code explanations.', 'chapters': [{'end': 10044.404, 'start': 9975.884, 'title': 'Javascript variables and attributes', 'summary': 'Discusses how javascript can access and manipulate html attributes, particularly focusing on variables as named storage that can change according to conditions.', 'duration': 68.52, 'highlights': ['JavaScript can access and manipulate HTML attributes, allowing the user to work with them as per requirements.', 'Variables are named storage that can change according to conditions and refer to memory blocks inside the computer where information can be stored.', 'Introduction of ES6 or ECMAScript updated the version of JavaScript and allowed the declaration of variables using a single keyword, WHERE.']}, {'end': 10595.12, 'start': 10044.504, 'title': 'Variables declaration in javascript', 'summary': 'Introduces the concept of variable declaration in javascript, featuring examples of variable assignment, naming conventions, and the introduction of let and const in ecmascript 2015. it also explains the limitations and scope of let and const through code examples, highlighting their differences from where and their impact on redeclaration and variable mutability.', 'duration': 550.616, 'highlights': ['The chapter introduces the concept of variable declaration in JavaScript It covers the declaration of variables a, b, and c, demonstrating variable assignment and the calculation of the value of c as a plus b.', 'The introduction of LET and CONST in ECMAScript in 2015 It mentions the introduction of LET and CONST as new ways to declare a variable in ECMAScript 2015, emphasizing their significance in modern JavaScript development.', 'Explanation of limitations and scope of LET and CONST through code examples It discusses the limitations of LET, emphasizing its restricted scope outside the block in which it is declared and compares it with WHERE, showcasing its limited usage and inability to redeclare variables. It further explains the immutability and redeclaration restrictions of CONST through code examples.']}, {'end': 11022.074, 'start': 10595.12, 'title': 'Javascript data types', 'summary': 'Discusses javascript data types, including primitive and non-primitive types, with examples and explanations, emphasizing the dynamically typed nature of javascript and the distinction between primitive and non-primitive data types.', 'duration': 426.954, 'highlights': ['JavaScript variables are loosely packed and JavaScript is a dynamically typed scripting language, determining data types based on the values assigned, demonstrated through examples. Emphasizes the dynamically typed nature of JavaScript, where data types are determined by the assigned values, showcasing the lack of explicit data type declarations.', 'JavaScript data types are divided into two categories: primitive data types (stored in stack) and non-primitive data types (stored in heap), explained with a focus on the distinction between the two and their storage locations. Explains the categorization of data types into primitive and non-primitive, clarifying their storage locations in stack and heap.', 'Primitive data types in JavaScript include numbers, strings, boolean, undefined, and null, with clear examples and explanations for each type, demonstrated through variable declarations and use of the typeof operator. Provides a comprehensive overview of primitive data types, including examples and the use of the typeof operator to determine the data types of variables.']}, {'end': 11251.635, 'start': 11022.314, 'title': 'Control statements in javascript', 'summary': 'Introduces control statements in javascript, explaining their importance in governing the flow of program control, and discussing two types of control statements: conditional and iterative, with four different types of loops available in javascript.', 'duration': 229.321, 'highlights': ['Control statements govern the flow of control in a program and are used to perform a certain activity n number of times or to make certain decision-making scenarios in JavaScript. The importance of control statements in governing program control and performing activities in JavaScript.', 'Conditional control statements are used for decision-making scenarios based on conditions, with two types available: if-else statements and switch case. The explanation of using conditional control statements for decision-making based on conditions in JavaScript.', 'Iterative or looping control statements, including for, while, do while, and for in loop, are used to perform an action more than once with specific conditions in JavaScript. The explanation of using iterative control statements for performing actions more than once with specific conditions in JavaScript.']}], 'duration': 1275.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE9975884.jpg', 'highlights': ['JavaScript can access and manipulate HTML attributes.', 'Variables are named storage that can change according to conditions.', 'Introduction of ES6 updated the version of JavaScript and allowed the declaration of variables using a single keyword.', 'The chapter introduces the concept of variable declaration in JavaScript.', 'Introduction of LET and CONST in ECMAScript in 2015.', 'Explanation of limitations and scope of LET and CONST through code examples.', 'JavaScript variables are loosely packed and dynamically typed.', 'JavaScript data types are divided into primitive and non-primitive categories.', 'Primitive data types in JavaScript include numbers, strings, boolean, undefined, and null.', 'Control statements govern the flow of control in a program in JavaScript.', 'Conditional control statements are used for decision-making scenarios based on conditions.', 'Iterative or looping control statements are used to perform an action more than once with specific conditions.']}, {'end': 12440.753, 'segs': [{'end': 11498.209, 'src': 'embed', 'start': 11476.569, 'weight': 7, 'content': [{'end': 11485.646, 'text': 'So now what it will do, it will check for two conditions that if the value x is holding is less than 10 or equals to 10.', 'start': 11476.569, 'duration': 9.077}, {'end': 11486.826, 'text': "and what we'll do.", 'start': 11485.646, 'duration': 1.18}, {'end': 11489.147, 'text': "we'll update it as so.", 'start': 11486.826, 'duration': 2.321}, {'end': 11492.428, 'text': "let's check the output now, save and see here.", 'start': 11489.147, 'duration': 3.281}, {'end': 11495.389, 'text': 'it says the value of x is equals to 10.', 'start': 11492.428, 'duration': 2.961}, {'end': 11498.209, 'text': 'right, so i hope you guys are getting this.', 'start': 11495.389, 'duration': 2.82}], 'summary': 'Code checks if x is less than or equal to 10, output is x=10.', 'duration': 21.64, 'max_score': 11476.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE11476569.jpg'}, {'end': 11543.318, 'src': 'embed', 'start': 11517.123, 'weight': 2, 'content': [{'end': 11523.523, 'text': 'If yes, if x is equals to 10, then it will print the value of x is equals to 10.', 'start': 11517.123, 'duration': 6.4}, {'end': 11527.406, 'text': 'if not, then otherwise it will move to else statement and print.', 'start': 11523.523, 'duration': 3.883}, {'end': 11529.088, 'text': 'the value of X is greater than 10.', 'start': 11527.406, 'duration': 1.682}, {'end': 11532.49, 'text': "we don't need to specify any particular condition for this.", 'start': 11529.088, 'duration': 3.402}, {'end': 11539.716, 'text': 'you know because we have already specified the two conditions that if X is less than 10 or if X is equals to 10.', 'start': 11532.49, 'duration': 7.226}, {'end': 11543.318, 'text': "now we'll take a look at some basic programs other than this one.", 'start': 11539.716, 'duration': 3.602}], 'summary': 'Explains how to handle conditions in programming.', 'duration': 26.195, 'max_score': 11517.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE11517123.jpg'}, {'end': 11782.195, 'src': 'embed', 'start': 11754.574, 'weight': 1, 'content': [{'end': 11758.477, 'text': 'even it will print the number is positive and odd.', 'start': 11754.574, 'duration': 3.903}, {'end': 11760.799, 'text': 'so here you can see the difference.', 'start': 11758.477, 'duration': 2.322}, {'end': 11766.543, 'text': 'what the interpreter is doing is it will check for the number as positive and if the number is positive,', 'start': 11760.799, 'duration': 5.744}, {'end': 11775.77, 'text': 'then it will move on to the nested if and check for the even or odd, so if it finds that the number is even, it will print positive and even.', 'start': 11766.543, 'duration': 9.227}, {'end': 11778.272, 'text': 'otherwise it will print positive and odd.', 'start': 11775.77, 'duration': 2.502}, {'end': 11782.195, 'text': 'then it will move on to the next condition, which is for negative number.', 'start': 11778.852, 'duration': 3.343}], 'summary': 'Interpreter checks positive and even/odd numbers in nested if statements.', 'duration': 27.621, 'max_score': 11754.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE11754574.jpg'}, {'end': 12092.708, 'src': 'embed', 'start': 12043.784, 'weight': 0, 'content': [{'end': 12046.126, 'text': 'right?. We can use switch case in this scenario.', 'start': 12043.784, 'duration': 2.342}, {'end': 12048.388, 'text': "So, let's create a variable first.", 'start': 12046.807, 'duration': 1.581}, {'end': 12056.915, 'text': "Let's say we are creating a variable where month and you can give any value to this variable from 1 to 12.", 'start': 12048.508, 'duration': 8.407}, {'end': 12059.097, 'text': 'You can provide it with any initial value.', 'start': 12056.915, 'duration': 2.182}, {'end': 12061.599, 'text': "So, let's create a variable first.", 'start': 12059.958, 'duration': 1.641}, {'end': 12069.404, 'text': "Let's say we are creating a variable where month and the value we are providing it 1 as the hardcore initial value.", 'start': 12061.719, 'duration': 7.685}, {'end': 12073.987, 'text': 'For simplicity, again we are not taking the input from the user or from the browser.', 'start': 12069.685, 'duration': 4.302}, {'end': 12080.752, 'text': "To do so, we have to first go through the DOM manipulations and we'll go through it in later videos.", 'start': 12074.508, 'duration': 6.244}, {'end': 12083.054, 'text': "So, let's start with the switch case now.", 'start': 12081.312, 'duration': 1.742}, {'end': 12086.316, 'text': 'The syntax for switch case is quite simple.', 'start': 12083.914, 'duration': 2.402}, {'end': 12092.708, 'text': 'Just write down switch and pass the variable month.', 'start': 12086.396, 'duration': 6.312}], 'summary': "Using switch case for variable 'month' from 1 to 12.", 'duration': 48.924, 'max_score': 12043.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE12043784.jpg'}], 'start': 11252.455, 'title': 'Conditional programming basics', 'summary': 'Covers the basics of conditional programming including single and multiple conditions, using if-else and else if statements, checking for even/odd numbers, positive/negative values, and the usage of switch case over if-else in programming.', 'chapters': [{'end': 11301.662, 'start': 11252.455, 'title': 'Introduction to break and continue statements', 'summary': 'Introduces the concepts of break and continue statements, which are used to control loops and switch statements, where the break statement is used to exit a loop or switch statement, while the continue statement breaks a single iteration in a loop, and how if else conditional statements are used when working with conditions.', 'duration': 49.207, 'highlights': ['The break statement is used to exit a switch statement or loop, like when used in a loop, it breaks the loop and continues executing the code after it. It assists in controlling the flow of loops and switch statements.', 'The continue statement breaks a single iteration when used in a loop, breaking the iteration only if the specified condition occurs, and will continue with the next iteration in the loop. This provides a way to skip certain iterations based on specific conditions.', 'If else conditional statement is used whenever we work with condition, providing a way to execute code based on a specific condition.']}, {'end': 11996.971, 'start': 11302.362, 'title': 'Conditional programming basics', 'summary': 'Covers the basics of conditional programming including single and multiple conditions, using if-else and else if statements, checking for even/odd numbers, positive/negative values, and the usage of switch case over if-else in programming.', 'duration': 694.609, 'highlights': ['The chapter covers the basics of conditional programming including single and multiple conditions, using if-else and else if statements. It discusses writing a basic program with single and multiple conditions, demonstrating the usage of if-else and else if statements in checking the value of a variable.', 'Explains the logic of checking for even/odd numbers and positive/negative values in programming. It explains the logic to find even or odd numbers using the modulus operator and the conditions for determining positive, negative, or zero values.', 'Discusses the usage of switch case over if-else in programming, especially when dealing with a large number of test cases or conditions. It explains the preference of using switch case over if-else when dealing with numerous test cases or conditions, providing an example of converting numeric input to textual form.']}, {'end': 12440.753, 'start': 11997.892, 'title': 'Switch case efficiency in month identification', 'summary': 'Explains the efficiency of switch case over if else for executing a program to identify a month in a year, demonstrating the syntax and usage of switch case with 12 different conditions and a default case for handling any value other than 1 to 12.', 'duration': 442.861, 'highlights': ['Switch case is much more efficient than if else when it comes to execution time, especially with n number of conditions. Switch case is more efficient than if else, especially with n number of conditions.', 'Demonstration of writing a program using switch case to identify a month in a year, with examples of input and corresponding output. Demonstration of writing a program using switch case to identify a month in a year, with examples of input and corresponding output.', "Explanation and demonstration of the syntax for switch case, including the use of 'case' and 'default' for handling different conditions and any other value. Explanation and demonstration of the syntax for switch case, including the use of 'case' and 'default' for handling different conditions and any other value.", "Importance of including a 'break' statement in each 'case' to control the flow of execution and prevent unintended output. Importance of including a 'break' statement in each 'case' to control the flow of execution and prevent unintended output.", "Inclusion of a 'default' case to handle any value other than 1 to 12, providing a prompt for wrong input. Inclusion of a 'default' case to handle any value other than 1 to 12, providing a prompt for wrong input."]}], 'duration': 1188.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE11252455.jpg', 'highlights': ['The break statement is used to exit a switch statement or loop, like when used in a loop, it breaks the loop and continues executing the code after it. It assists in controlling the flow of loops and switch statements.', 'Switch case is much more efficient than if else when it comes to execution time, especially with n number of conditions. Switch case is more efficient than if else, especially with n number of conditions.', 'Demonstration of writing a program using switch case to identify a month in a year, with examples of input and corresponding output. Demonstration of writing a program using switch case to identify a month in a year, with examples of input and corresponding output.', 'The continue statement breaks a single iteration when used in a loop, breaking the iteration only if the specified condition occurs, and will continue with the next iteration in the loop. This provides a way to skip certain iterations based on specific conditions.', 'Explains the logic of checking for even/odd numbers and positive/negative values in programming. It explains the logic to find even or odd numbers using the modulus operator and the conditions for determining positive, negative, or zero values.', "Importance of including a 'break' statement in each 'case' to control the flow of execution and prevent unintended output. Importance of including a 'break' statement in each 'case' to control the flow of execution and prevent unintended output.", "Explanation and demonstration of the syntax for switch case, including the use of 'case' and 'default' for handling different conditions and any other value. Explanation and demonstration of the syntax for switch case, including the use of 'case' and 'default' for handling different conditions and any other value.", 'If else conditional statement is used whenever we work with condition, providing a way to execute code based on a specific condition.']}, {'end': 14694.498, 'segs': [{'end': 12500.219, 'src': 'embed', 'start': 12471.735, 'weight': 0, 'content': [{'end': 12477.077, 'text': 'like, switch case is also present in C++ and Java, but in JavaScript it is a bit different.', 'start': 12471.735, 'duration': 5.342}, {'end': 12480.878, 'text': 'So in JavaScript switch case can accept numbers.', 'start': 12477.517, 'duration': 3.361}, {'end': 12483.899, 'text': 'It can accept strings and Boolean values as well.', 'start': 12481.298, 'duration': 2.601}, {'end': 12489.021, 'text': "Now let's have a look at how the switch case works with string values.", 'start': 12484.579, 'duration': 4.442}, {'end': 12492.47, 'text': 'So here is an example of string values.', 'start': 12490.208, 'duration': 2.262}, {'end': 12496.114, 'text': 'You can see the value variable month is holding is June.', 'start': 12492.931, 'duration': 3.183}, {'end': 12500.219, 'text': 'Right And you can use this string in case as well.', 'start': 12496.555, 'duration': 3.664}], 'summary': 'Javascript switch case can accept numbers, strings, and boolean values, including an example of using string values.', 'duration': 28.484, 'max_score': 12471.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE12471735.jpg'}, {'end': 12911.94, 'src': 'embed', 'start': 12884.389, 'weight': 2, 'content': [{'end': 12893.899, 'text': 'see here the multiplication table of 10 is printed on the browser you can see 10 20 30 40 so on and so forth till 100.', 'start': 12884.389, 'duration': 9.51}, {'end': 12900.206, 'text': 'so what is happening is firstly, the for loop is also known as the entry control loop.', 'start': 12893.899, 'duration': 6.307}, {'end': 12903.87, 'text': 'it means that the condition is checked initially.', 'start': 12900.206, 'duration': 3.664}, {'end': 12908.716, 'text': 'the first time the for loop runs we perform initialization only once.', 'start': 12903.87, 'duration': 4.846}, {'end': 12911.94, 'text': 'so here the value stored at variable a is 1.', 'start': 12908.716, 'duration': 3.224}], 'summary': 'A multiplication table of 10 is printed on the browser using a for loop with an entry control loop, initializing the value at 1.', 'duration': 27.551, 'max_score': 12884.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE12884389.jpg'}, {'end': 13617.208, 'src': 'embed', 'start': 13582.04, 'weight': 3, 'content': [{'end': 13582.4, 'text': 'Save it.', 'start': 13582.04, 'duration': 0.36}, {'end': 13586.441, 'text': 'Here you can see the output is still welcome to simply code.', 'start': 13583.04, 'duration': 3.401}, {'end': 13592.523, 'text': 'The execution flow of this program will be like, it will first perform the iteration before checking the condition.', 'start': 13586.701, 'duration': 5.822}, {'end': 13596.749, 'text': 'and it will print here, welcome to Simply Code for the first time.', 'start': 13593.263, 'duration': 3.486}, {'end': 13603.399, 'text': 'When the loop will start executing, it will first perform this statement and it will write here, welcome to Simply Code.', 'start': 13597.069, 'duration': 6.33}, {'end': 13611.424, 'text': 'So, then it will perform x minus minus means the value of x is now 5 because we are decrementing the value by 1.', 'start': 13604.218, 'duration': 7.206}, {'end': 13617.208, 'text': 'So, when the value of x is 5 then it will check for the condition if x is greater than 5 or not.', 'start': 13611.424, 'duration': 5.784}], 'summary': "Program iterates through code, printing 'welcome to simply code' and decrements x to 5, then checks if x is greater than 5.", 'duration': 35.168, 'max_score': 13582.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE13582040.jpg'}, {'end': 14028.242, 'src': 'embed', 'start': 14001.429, 'weight': 6, 'content': [{'end': 14005.312, 'text': "if we take here any number which is divisible by, so let's say we are taking 75.", 'start': 14001.429, 'duration': 3.883}, {'end': 14010.516, 'text': 'save it now and see it says 75 is not a prime number.', 'start': 14005.312, 'duration': 5.204}, {'end': 14013.12, 'text': "okay, here's a spelling mistake.", 'start': 14010.936, 'duration': 2.184}, {'end': 14016.046, 'text': 'it says 75 is a not prime number.', 'start': 14013.12, 'duration': 2.926}, {'end': 14017.429, 'text': 'so here we will correct.', 'start': 14016.046, 'duration': 1.383}, {'end': 14025.279, 'text': 'this is So we are done with it and save it now.', 'start': 14017.429, 'duration': 7.85}, {'end': 14028.242, 'text': 'Now it says 75 is not a prime number.', 'start': 14025.499, 'duration': 2.743}], 'summary': 'Transcript: 75 is not a prime number as per the system.', 'duration': 26.813, 'max_score': 14001.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE14001429.jpg'}, {'end': 14176.478, 'src': 'embed', 'start': 14147.677, 'weight': 1, 'content': [{'end': 14157.484, 'text': 'So, for example, 153 is an Armstrong number, since 1 x 1 x 1, it means the cube of the digit 1 plus the cube of 5.', 'start': 14147.677, 'duration': 9.807}, {'end': 14165.149, 'text': 'that is 5 x 5 x 5, which is equal to 125, and the cube of 3, which is 3 x 3, is 9 and 9 x 3 is 27.', 'start': 14157.484, 'duration': 7.665}, {'end': 14176.478, 'text': 'so it will go like 125 plus 27 plus 1, so which is equal to 153.', 'start': 14165.149, 'duration': 11.329}], 'summary': '153 is an armstrong number, as 1^3 + 5^3 + 3^3 = 153.', 'duration': 28.801, 'max_score': 14147.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE14147677.jpg'}], 'start': 12441.519, 'title': 'Javascript loops', 'summary': 'Covers javascript switch case, for loop, while loop, and do while loop with examples and outputs, including finding months, printing tables, checking prime numbers, and executing looping programs.', 'chapters': [{'end': 12636.403, 'start': 12441.519, 'title': 'Javascript switch case example', 'summary': 'Covers a javascript program to find the month by accepting its number, demonstrating the switch case statement with string, numerical, and boolean values, providing examples and outputs.', 'duration': 194.884, 'highlights': ['The switch case in JavaScript works differently from other languages, as it can accept numbers, strings, and boolean values, unlike in C++ and Java.', "Demonstrated the usage of switch case with string values, providing examples of inputting 'June' and 'July' to output 'sixth month' and 'seventh month' respectively.", "Illustrated the switch case functionality with boolean values, showcasing that inputting 'true' gives an output of '1' and 'false' gives an output of '0'."]}, {'end': 13052.118, 'start': 12636.403, 'title': 'Javascript for loop', 'summary': 'Covers the basics of for loop in javascript, including its syntax and usage to print a multiplication table of 10 and odd numbers between 1 and 10, demonstrating the iteration process and control flow.', 'duration': 415.715, 'highlights': ['The for loop in JavaScript is used for iterating a specific number of times, making the code more efficient. The for loop is a key iterative control statement in JavaScript, used for performing an activity multiple times or n number of times, improving code efficiency.', 'The syntax of the for loop includes initialization, condition, and increment/decrement parts, with the body enclosed in curly braces. The for loop syntax consists of initialization, condition, and increment/decrement parts, enclosed in curly braces, providing a structured approach to iteration.', "The for loop's entry control nature ensures that the condition is checked initially, followed by performing the initialization only once. The for loop's entry control nature verifies the condition initially and executes the initialization only once, ensuring controlled iteration.", 'The for loop iterates through the specified range, printing the multiplication table of 10 and the odd numbers between 1 and 10 based on the defined conditions. The for loop iterates through the specified range, demonstrating by printing the multiplication table of 10 and the odd numbers between 1 and 10 based on the defined conditions.']}, {'end': 13655.508, 'start': 13052.118, 'title': 'While loop in javascript', 'summary': 'Introduces the while loop, explaining its difference from the for loop, demonstrating a program to print odd numbers up to 50 using the while loop, and highlighting the importance of incrementing the loop variable, with a mention of do while loop and its execution flow.', 'duration': 603.39, 'highlights': ['The while loop is demonstrated by printing odd numbers up to 50, showcasing the importance of incrementing the loop variable and preventing an infinite loop. The demonstration of the while loop includes printing odd numbers up to 50, emphasizing the significance of incrementing the loop variable to prevent an infinite loop.', 'The do while loop is introduced with an example, emphasizing its execution flow and the necessity of an increment or decrement operator. The introduction of the do while loop includes an example highlighting its execution flow, emphasizing the necessity of an increment or decrement operator to control the loop.', "The difference between entry control loops (for and while) and exit control loop (do while) is explained, emphasizing the behavior of the do while loop to execute at least once. The explanation of the difference between entry control loops (for and while) and exit control loop (do while) emphasizes the do while loop's behavior to execute at least once, regardless of the condition."]}, {'end': 14056.046, 'start': 13657.014, 'title': 'Understanding do while loop and prime number check', 'summary': 'Explains the usage of the do while loop in javascript and demonstrates a program to check whether a number is prime or not, using 83 as a prime number example and 75 as a non-prime number example.', 'duration': 399.032, 'highlights': ['The code demonstrates the usage of the do while loop and the concept of prime numbers with examples such as 83 and 75. The chapter explains the usage of the do while loop and demonstrates a program to check whether a number is prime or not, using 83 as a prime number example and 75 as a non-prime number example.', 'It explains the process of determining whether a number is prime or not, including the use of for loops and the logic behind checking for prime numbers. The chapter goes through the process of determining whether a number is prime or not, including the use of for loops and the logic behind checking for prime numbers.', 'The program outputs whether a number is prime or not based on the conditions and examples of 83 and 75. The program outputs whether a number is prime or not based on the conditions and examples of 83 and 75.']}, {'end': 14694.498, 'start': 14057.266, 'title': 'Looping programs in javascript', 'summary': 'Covers three javascript programs: checking if a number is prime or composite, determining if a number is an armstrong number, and finding the factorial of a number using for, while, and do while loops.', 'duration': 637.232, 'highlights': ['The program demonstrates using a while loop to check if a number is prime or composite. The program uses a while loop to check if a number is prime or composite, displaying that 1 is neither prime nor composite.', 'The transcript presents a JavaScript program to determine if a number is an Armstrong number using a while loop and defines an Armstrong number as one whose sum of the cubes of its digits equals the number itself. The program explains the concept of an Armstrong number and provides a JavaScript code to check if a number is an Armstrong number or not, using the sum of the cubes of its digits.', 'A JavaScript program to find the factorial of a number using a do while loop is showcased, illustrating the calculation of the factorial of a given number. The program details the use of a do while loop to find the factorial of a number, demonstrating the iterative multiplication process to calculate the factorial.']}], 'duration': 2252.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE12441519.jpg', 'highlights': ['The switch case in JavaScript accepts numbers, strings, and boolean values, unlike in C++ and Java.', 'The for loop in JavaScript is used for iterating a specific number of times, improving code efficiency.', "The for loop's entry control nature ensures that the condition is checked initially, followed by performing the initialization only once.", 'The while loop is demonstrated by printing odd numbers up to 50, emphasizing the significance of incrementing the loop variable.', 'The do while loop is introduced with an example, emphasizing its execution flow and the necessity of an increment or decrement operator.', 'The code demonstrates the usage of the do while loop and the concept of prime numbers with examples such as 83 and 75.', 'The program demonstrates using a while loop to check if a number is prime or composite, displaying that 1 is neither prime nor composite.', 'The transcript presents a JavaScript program to determine if a number is an Armstrong number using a while loop.', 'A JavaScript program to find the factorial of a number using a do while loop is showcased.']}, {'end': 16727.934, 'segs': [{'end': 14750.214, 'src': 'embed', 'start': 14721.014, 'weight': 20, 'content': [{'end': 14728.218, 'text': "So if you're wondering how to become a backend developer, what skills are required and what the responsibilities are, then you're in the right place.", 'start': 14721.014, 'duration': 7.204}, {'end': 14731.2, 'text': "But let's wait for a while for more people to tune in.", 'start': 14729.019, 'duration': 2.181}, {'end': 14744.813, 'text': "I'd also like to thank all our viewers for actively participating in these sessions.", 'start': 14740.632, 'duration': 4.181}, {'end': 14746.313, 'text': 'All right.', 'start': 14745.813, 'duration': 0.5}, {'end': 14750.214, 'text': "so, whilst you're at it, if you haven't subscribed to our channel already,", 'start': 14746.313, 'duration': 3.901}], 'summary': 'Exploring backend developer skills, responsibilities, and encouraging channel subscriptions.', 'duration': 29.2, 'max_score': 14721.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE14721014.jpg'}, {'end': 14887.33, 'src': 'embed', 'start': 14832.275, 'weight': 4, 'content': [{'end': 14840.658, 'text': "scripting and writing code that serves as a means of communication between the website's database and the browser and, lastly,", 'start': 14832.275, 'duration': 8.383}, {'end': 14843.5, 'text': 'to ensure data integrity and consistency.', 'start': 14840.658, 'duration': 2.842}, {'end': 14848.822, 'text': "So now let's look at the skills required to become a backend developer.", 'start': 14844.56, 'duration': 4.262}, {'end': 14857.787, 'text': 'It is vital for you to have a good understanding of programming concepts like data structures and algorithms.', 'start': 14851.403, 'duration': 6.384}, {'end': 14866.513, 'text': 'This includes stacks, queues, linked lists, trees and graphs, sorting algorithms and search algorithms.', 'start': 14858.688, 'duration': 7.825}, {'end': 14871.437, 'text': 'Next up is programming languages and frameworks.', 'start': 14868.495, 'duration': 2.942}, {'end': 14878.642, 'text': 'One of the most critical skills of a backend developer is the depth of knowledge in backend programming languages.', 'start': 14872.317, 'duration': 6.325}, {'end': 14885.368, 'text': 'This includes proficiency in JavaScript and its environments like Node.js and Express.js.', 'start': 14879.884, 'duration': 5.484}, {'end': 14887.33, 'text': "Next there's Java.", 'start': 14886.349, 'duration': 0.981}], 'summary': 'Backend developers need skills in programming, data structures, algorithms, javascript, node.js, express.js, and java.', 'duration': 55.055, 'max_score': 14832.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE14832275.jpg'}, {'end': 14998.962, 'src': 'embed', 'start': 14971.112, 'weight': 17, 'content': [{'end': 14977.954, 'text': 'They help manage the project files and keep track of the entire history of things that the developer is working on.', 'start': 14971.112, 'duration': 6.842}, {'end': 14982.116, 'text': "And lastly, there's cloud hosting platforms.", 'start': 14979.915, 'duration': 2.201}, {'end': 14990.499, 'text': 'These platforms allow you to deploy your product on the cloud service provider so that it can be accessed from the worldwide web.', 'start': 14982.976, 'duration': 7.523}, {'end': 14998.962, 'text': 'Most popular ones are Amazon Web Services, Google Cloud Platform, Heroku, and Microsoft Azure.', 'start': 14991.599, 'duration': 7.363}], 'summary': 'Project files are managed, and products can be deployed on popular cloud hosting platforms like amazon web services, google cloud platform, heroku, and microsoft azure.', 'duration': 27.85, 'max_score': 14971.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE14971112.jpg'}, {'end': 15173.775, 'src': 'embed', 'start': 15144.102, 'weight': 3, 'content': [{'end': 15148.745, 'text': "the learning curve of Angular and finally, we'll look at some of the companies that deploy Angular.", 'start': 15144.102, 'duration': 4.643}, {'end': 15151.526, 'text': "So without further delay, let's begin.", 'start': 15149.365, 'duration': 2.161}, {'end': 15158.286, 'text': 'Why Angular? Now, JavaScript is the most commonly used client-side scripting language.', 'start': 15152.819, 'duration': 5.467}, {'end': 15164.294, 'text': 'It is written into HTML documents, enabling interactions with web pages in many unique ways.', 'start': 15158.807, 'duration': 5.487}, {'end': 15173.775, 'text': 'So as a relatively easy to learn language with almost pervasive support, it is exceptionally well suited to develop modern applications.', 'start': 15165.367, 'duration': 8.408}], 'summary': 'Angular is a widely used client-side scripting language, suitable for developing modern applications.', 'duration': 29.673, 'max_score': 15144.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE15144102.jpg'}, {'end': 15222.132, 'src': 'embed', 'start': 15190.91, 'weight': 0, 'content': [{'end': 15192.952, 'text': 'With respect to front-end development.', 'start': 15190.91, 'duration': 2.042}, {'end': 15201.079, 'text': 'Angular and JavaScript together bring in structure and consistency to your web applications and also provide scalability and maintainability.', 'start': 15192.952, 'duration': 8.127}, {'end': 15205.062, 'text': 'Angular is specifically developed for single-page applications.', 'start': 15202.039, 'duration': 3.023}, {'end': 15215.848, 'text': 'So now the question arises, what exactly is Angular? Angular is an open-source JavaScript framework written completely in TypeScript.', 'start': 15205.382, 'duration': 10.466}, {'end': 15222.132, 'text': 'It was primarily aimed to develop single-page applications and is maintained by Google.', 'start': 15216.828, 'duration': 5.304}], 'summary': 'Angular and javascript provide structure and scalability for single-page applications, maintained by google.', 'duration': 31.222, 'max_score': 15190.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE15190910.jpg'}, {'end': 15355.566, 'src': 'embed', 'start': 15309.359, 'weight': 11, 'content': [{'end': 15312.703, 'text': 'Moving on to our next feature, we have TypeScript.', 'start': 15309.359, 'duration': 3.344}, {'end': 15321.569, 'text': 'Now TypeScript defines a set of types to JavaScript which helps you write JavaScript that is easier to understand.', 'start': 15313.618, 'duration': 7.951}, {'end': 15329.361, 'text': 'Now all the TypeScript code compiles down to basic JavaScript that can run smoothly on any platform.', 'start': 15322.875, 'duration': 6.486}, {'end': 15335.427, 'text': 'Now TypeScript is not mandatory for developing an Angular application, but it is highly recommended.', 'start': 15329.721, 'duration': 5.706}, {'end': 15343.975, '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': 15335.947, 'duration': 8.028}, {'end': 15347.098, 'text': 'Now TypeScript can be installed as an npm package.', 'start': 15344.275, 'duration': 2.823}, {'end': 15353.664, 'text': 'Now to do that you just have to run the command npm install hyphen g typescript on your command prompt.', 'start': 15347.698, 'duration': 5.966}, {'end': 15355.566, 'text': 'Next up is data binding.', 'start': 15354.104, 'duration': 1.462}], 'summary': 'Typescript enhances javascript with better structure and maintenance, and can be installed as an npm package.', 'duration': 46.207, 'max_score': 15309.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE15309359.jpg'}, {'end': 15768.229, 'src': 'embed', 'start': 15709.611, 'weight': 6, 'content': [{'end': 15715.273, 'text': 'Now, if you wish to learn Angular, you need to be acquainted with basic topics in Angular.', 'start': 15709.611, 'duration': 5.662}, {'end': 15725.498, 'text': 'Some of them are directives, modules, decorators, components, services, dependency injection, pipes and templates.', 'start': 15715.894, 'duration': 9.604}, {'end': 15738.273, 'text': "Once you've mastered your basics, you will want to go and understand more advanced topics such as change detection zones, AOT compilation and Rx.js.", 'start': 15726.631, 'duration': 11.642}, {'end': 15742.394, 'text': 'However, the learning curve of Angular is clear-cut.', 'start': 15738.913, 'duration': 3.481}, {'end': 15747.575, 'text': 'In the beginning it could be a little intimidating, but once you start using the tool,', 'start': 15743.134, 'duration': 4.441}, {'end': 15751.456, 'text': 'it becomes way more easier to comprehend and understand what is going on.', 'start': 15747.575, 'duration': 3.881}, {'end': 15757.322, 'text': "And lastly, let's look at some of the companies that use Angular today.", 'start': 15753.26, 'duration': 4.062}, {'end': 15768.229, 'text': 'Many top-tier companies like Nike, Forbes, Google, HBO, Sony, Upwork, among others, readily deploy Angular.', 'start': 15758.383, 'duration': 9.846}], 'summary': 'Learning angular involves mastering basics and advanced topics. many top-tier companies like nike, forbes, google, hbo, sony, and upwork use angular.', 'duration': 58.618, 'max_score': 15709.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE15709611.jpg'}, {'end': 15844.381, 'src': 'embed', 'start': 15816.255, 'weight': 8, 'content': [{'end': 15820.398, 'text': 'Now the next thing that you will need is an IDE or a text editor to type your code.', 'start': 15816.255, 'duration': 4.143}, {'end': 15823.2, 'text': 'Now there are several IDEs that you can choose from.', 'start': 15820.938, 'duration': 2.262}, {'end': 15826.422, 'text': "But in this series, we've used VS Code throughout.", 'start': 15823.74, 'duration': 2.682}, {'end': 15828.964, 'text': 'So it is available on all platforms.', 'start': 15826.943, 'duration': 2.021}, {'end': 15831.746, 'text': "So go ahead and download it if you haven't already.", 'start': 15829.424, 'duration': 2.322}, {'end': 15834.699, 'text': 'Now moving on to the final part is the demo.', 'start': 15832.418, 'duration': 2.281}, {'end': 15841.52, 'text': "Now that you have a basic understanding of Angular and its prerequisites, I think you're ready to create your first Angular application.", 'start': 15835.099, 'duration': 6.421}, {'end': 15844.381, 'text': "So let's head to our VS Code and begin.", 'start': 15842.18, 'duration': 2.201}], 'summary': 'Use vs code as the ide for creating an angular application.', 'duration': 28.126, 'max_score': 15816.255, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE15816255.jpg'}, {'end': 16332.544, 'src': 'embed', 'start': 16308.135, 'weight': 22, 'content': [{'end': 16317.717, 'text': 'Then you have the .ts file which includes the component decorator and finally you have spec.ts which is basically a unit test file.', 'start': 16308.135, 'duration': 9.582}, {'end': 16326.521, 'text': "Alright, and then in your app.module.ts, you can observe that the component that you've created that is text component has been imported.", 'start': 16318.177, 'duration': 8.344}, {'end': 16328.622, 'text': 'That is what the message conveys here.', 'start': 16327.041, 'duration': 1.581}, {'end': 16332.544, 'text': "Alright, now let's go back to our app.component.html.", 'start': 16328.902, 'duration': 3.642}], 'summary': 'The .ts, .spec.ts, and app.module.ts files are discussed, focusing on component decoration and importation.', 'duration': 24.409, 'max_score': 16308.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE16308135.jpg'}], 'start': 14694.498, 'title': 'Backend developer skills, angular framework, and advantages', 'summary': 'Covers the skills and responsibilities of a backend developer, including average salaries, provides an overview of the angular framework, its advantages and prerequisites, and introduces angular components, with emphasis on their features, creation process, and usage.', 'chapters': [{'end': 14782.569, 'start': 14694.498, 'title': 'Backend developer: skills and responsibilities', 'summary': 'Discusses how to become a backend developer, including the factorial of 10 being 3,628,800 and the importance of backend development in social media applications.', 'duration': 88.071, 'highlights': ['The factorial of 10 is 3,628,800, which can be verified through calculation or online search.', 'The discussion focuses on the skills and responsibilities required to become a backend developer.', 'Backend development is crucial in social media applications for displaying corresponding information on the screen.']}, {'end': 15099.085, 'start': 14783.45, 'title': 'Backend developer skills and responsibilities', 'summary': 'Discusses the skills and responsibilities of a backend developer, emphasizing the importance of programming languages, database management systems, version control, and cloud hosting platforms, as well as highlighting the average salaries of backend developers in the united states and india.', 'duration': 315.635, 'highlights': ["Backend developer's responsibilities include understanding performance needs, developing APIs, securely storing data, writing code, and organizing system logic, often using agile scrum framework.", 'Backend programming languages like JavaScript, Node.js, Express.js, Java, Spring, Python, Django, Flask, and C# are crucial for a backend developer, with proficiency in these languages being essential.', 'Database management systems such as MySQL, SQL Server, and PostgreSQL are important for a backend developer to perform relational mapping and fetch data from the database.', 'Version control systems like Git and Subversion help backend developers manage project files and track the history of their work.', 'Cloud hosting platforms like Amazon Web Services, Google Cloud Platform, Heroku, and Microsoft Azure enable backend developers to deploy products for worldwide web access.', 'The average salary of a backend developer in the United States is around 102,000 US dollars per year, while in India it is around 7,23,000 Indian rupees per annum.']}, {'end': 15474.63, 'start': 15099.778, 'title': 'Angular framework overview', 'summary': 'Provides an overview of the widely-used angular framework, covering its introduction, features, architecture, and advantages, with emphasis on its suitability for single-page applications and use of typescript, two-way data binding, and mvc architecture.', 'duration': 374.852, 'highlights': ['Suitability for Single-Page Applications Angular is specifically developed for single-page applications, offering structure, consistency, scalability, and maintainability, which is ideal for modern applications.', 'Use of TypeScript TypeScript enhances JavaScript by offering better syntactic structure, making the code base easier to understand and maintain. It is highly recommended for Angular application development.', 'Two-Way Data Binding Angular uses two-way data binding, allowing changes made in the UI element to be reflected in the corresponding model state and vice versa, connecting the DOM to the model data via the controller.', 'MVC Architecture Angular is a full-fledged MVC framework, separating the application layer into model, view, and controller, with model handling data-related logic, view for UI logic, and controller acting as an interface between the model and view.']}, {'end': 16090.422, 'start': 15476.11, 'title': 'Advantages of angular and prerequisites', 'summary': 'Explores the advantages of angular, including custom components, dependency injection, testing, comprehensive features, and browser compatibility, as well as the prerequisites for using angular, such as node.js, angular cli, and an ide. it also highlights the limitations of angular, the learning curve, companies using angular, and provides a demo on creating an angular application.', 'duration': 614.312, 'highlights': ['Angular offers custom components, allowing reusable pieces of functionality and rendering logic, enhancing reusability and modularity. Custom components in Angular enhance reusability and modularity.', 'Dependency injection in Angular improves testability and reusability of modular services. Dependency injection in Angular enhances testability and reusability.', 'Angular is built with testability in mind, allowing comprehensive testing of every part of the application. Angular is designed for comprehensive testing of every part of the application.', 'Angular provides out-of-the-box solutions for server communication, routing, and more, making it a full-fledged framework. Angular provides out-of-the-box solutions for server communication, routing, and more.', 'Angular is cross-platform and browser compatible, running on all major browsers and platforms. Angular is cross-platform and browser compatible, running on all major browsers and platforms.', 'Angular has a steep learning curve, limited SEO options, verbosity, complexity, and poor migration capabilities. Angular has a steep learning curve, limited SEO options, verbosity, complexity, and poor migration capabilities.', 'Basic topics for learning Angular include directives, modules, decorators, components, services, dependency injection, pipes, and templates, progressing to advanced topics like change detection zones, AOT compilation, and Rx.js. Basic and advanced topics for learning Angular.', 'Top-tier companies like Nike, Forbes, Google, HBO, Sony, and Upwork use Angular for their applications. Top-tier companies like Nike, Forbes, Google, HBO, Sony, and Upwork use Angular for their applications.', 'Prerequisites for using Angular include Node.js, Angular CLI, and an IDE or text editor like VS Code. Prerequisites for using Angular include Node.js, Angular CLI, and an IDE or text editor like VS Code.', "The demonstration includes creating an Angular application using the Angular CLI, changing the message displayed, and explaining the background of the application files and folders. The demonstration includes creating an Angular application, changing the displayed message, and explaining the application's background."]}, {'end': 16727.934, 'start': 16091.414, 'title': 'Introduction to angular components', 'summary': 'Introduces angular components as the building blocks of an application, explaining their features, creation process, and usage, with a demonstration of creating and incorporating components into an angular application, and details on component decorator metadata.', 'duration': 636.52, 'highlights': ['Angular components are like Lego blocks combined to form the final application Components are compared to Lego blocks, emphasizing their role as building blocks for the application, illustrating the concept with a visual analogy.', 'Components control the UI of the application when embedded When embedded, components define the UI of the application, highlighting their influence on the user interface.', 'The root component branches out into other components, creating a hierarchy The root component leads to a hierarchy of other components, illustrating the structure of component relationships.', 'A TypeScript class decorated with @Component is used to create a component Creation of a component involves using a TypeScript class decorated with @Component, demonstrating the technical process of component creation.', 'Components control their runtime behavior by implementing lifecycle hooks Components manage their runtime behavior by implementing lifecycle hooks, showcasing their control over runtime processes.']}], 'duration': 2033.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE14694498.jpg', 'highlights': ["Backend developer's responsibilities include understanding performance needs, developing APIs, securely storing data, writing code, and organizing system logic.", 'Backend programming languages like JavaScript, Node.js, Express.js, Java, Spring, Python, Django, Flask, and C# are crucial for a backend developer.', 'Database management systems such as MySQL, SQL Server, and PostgreSQL are important for a backend developer to perform relational mapping and fetch data from the database.', 'Version control systems like Git and Subversion help backend developers manage project files and track the history of their work.', 'Cloud hosting platforms like Amazon Web Services, Google Cloud Platform, Heroku, and Microsoft Azure enable backend developers to deploy products for worldwide web access.', 'The average salary of a backend developer in the United States is around 102,000 US dollars per year, while in India it is around 7,23,000 Indian rupees per annum.', 'Angular is specifically developed for single-page applications, offering structure, consistency, scalability, and maintainability, which is ideal for modern applications.', 'TypeScript enhances JavaScript by offering better syntactic structure, making the code base easier to understand and maintain. It is highly recommended for Angular application development.', 'Angular uses two-way data binding, allowing changes made in the UI element to be reflected in the corresponding model state and vice versa, connecting the DOM to the model data via the controller.', 'Angular is a full-fledged MVC framework, separating the application layer into model, view, and controller, with model handling data-related logic, view for UI logic, and controller acting as an interface between the model and view.', 'Angular offers custom components, allowing reusable pieces of functionality and rendering logic, enhancing reusability and modularity.', 'Dependency injection in Angular improves testability and reusability of modular services.', 'Angular is built with testability in mind, allowing comprehensive testing of every part of the application.', 'Angular provides out-of-the-box solutions for server communication, routing, and more, making it a full-fledged framework.', 'Angular is cross-platform and browser compatible, running on all major browsers and platforms.', 'Basic and advanced topics for learning Angular.', 'Top-tier companies like Nike, Forbes, Google, HBO, Sony, and Upwork use Angular for their applications.', 'Prerequisites for using Angular include Node.js, Angular CLI, and an IDE or text editor like VS Code.', 'Angular components are like Lego blocks combined to form the final application Components are compared to Lego blocks, emphasizing their role as building blocks for the application, illustrating the concept with a visual analogy.', 'Components control the UI of the application when embedded When embedded, components define the UI of the application, highlighting their influence on the user interface.', 'The root component leads to a hierarchy of other components, illustrating the structure of component relationships.', 'Creation of a component involves using a TypeScript class decorated with @Component, demonstrating the technical process of component creation.', 'Components manage their runtime behavior by implementing lifecycle hooks, showcasing their control over runtime processes.']}, {'end': 18764.769, 'segs': [{'end': 16756.822, 'src': 'embed', 'start': 16728.434, 'weight': 4, 'content': [{'end': 16733.235, 'text': 'Now this is a list of URLs to your style sheets that are applied on your components view.', 'start': 16728.434, 'duration': 4.801}, {'end': 16735.587, 'text': 'Next up, you have providers.', 'start': 16734.266, 'duration': 1.321}, {'end': 16740.39, 'text': 'Now, this is again an array where certain services can be registered for your component.', 'start': 16735.987, 'duration': 4.403}, {'end': 16742.872, 'text': 'Lastly, we have animations.', 'start': 16741.51, 'duration': 1.362}, {'end': 16747.255, 'text': 'As the name suggests, these are animations that can be listed for your components.', 'start': 16743.392, 'duration': 3.863}, {'end': 16751.158, 'text': "First, we'll understand what exactly dependency injection is.", 'start': 16748.236, 'duration': 2.922}, {'end': 16756.822, 'text': "Then we'll understand the demerit or the drawback of not using dependency injection.", 'start': 16752.419, 'duration': 4.403}], 'summary': 'Transcript discusses urls, providers, and animations for components, followed by an explanation of dependency injection and its drawbacks.', 'duration': 28.388, 'max_score': 16728.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE16728434.jpg'}, {'end': 17048.169, 'src': 'embed', 'start': 17021.857, 'weight': 1, 'content': [{'end': 17026.56, 'text': "Later, we're going to inject the service into the class using dependency injection.", 'start': 17021.857, 'duration': 4.703}, {'end': 17030.042, 'text': "So let's head to our Visual Studio Code for the demonstration.", 'start': 17027.26, 'duration': 2.782}, {'end': 17031.933, 'text': 'All right.', 'start': 17031.553, 'duration': 0.38}, {'end': 17033.535, 'text': 'so, as discussed,', 'start': 17031.933, 'duration': 1.602}, {'end': 17041.743, 'text': "I'll have to first create a component that displays a button for the employee and then I have to create a service class and inject it into my component.", 'start': 17033.535, 'duration': 8.208}, {'end': 17048.169, 'text': 'Now, this service holds the employee details such as name, employee ID, email ID, etc.', 'start': 17042.183, 'duration': 5.986}], 'summary': 'Demonstrating dependency injection in visual studio code to display employee details.', 'duration': 26.312, 'max_score': 17021.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE17021857.jpg'}, {'end': 17954.14, 'src': 'embed', 'start': 17882.328, 'weight': 0, 'content': [{'end': 17885.791, 'text': 'That is the first name, last name, email ID, and a password.', 'start': 17882.328, 'duration': 3.463}, {'end': 17886.772, 'text': 'All right.', 'start': 17886.451, 'duration': 0.321}, {'end': 17889.854, 'text': 'So now let me show you how to import the forms module.', 'start': 17887.232, 'duration': 2.622}, {'end': 17897.42, 'text': "So in your main app.module.ts file, you'll have to import forms module from Angular forms.", 'start': 17890.214, 'duration': 7.206}, {'end': 17899.482, 'text': 'All right.', 'start': 17899.142, 'duration': 0.34}, {'end': 17902.888, 'text': "And then in your imports, you'll have to just call it here.", 'start': 17899.986, 'duration': 2.902}, {'end': 17906.79, 'text': 'Alright, so this is just a simple step.', 'start': 17905.289, 'duration': 1.501}, {'end': 17913.594, 'text': "And now once you're done with that, let's go ahead and start our form creation.", 'start': 17907.971, 'duration': 5.623}, {'end': 17921.059, 'text': "So here in my component.html, let's enclose the entire form within a div tag.", 'start': 17914.595, 'duration': 6.464}, {'end': 17929.124, 'text': 'So here, let me say div class is a container.', 'start': 17921.699, 'duration': 7.425}, {'end': 17944.093, 'text': 'within which let me just have one heading which says user registration.', 'start': 17933.806, 'duration': 10.287}, {'end': 17948.576, 'text': "all right, and now let's go ahead and create our form.", 'start': 17944.093, 'duration': 4.483}, {'end': 17954.14, 'text': 'so first let me just say form.', 'start': 17948.576, 'duration': 5.564}], 'summary': 'Demonstration of importing forms module and creating a user registration form.', 'duration': 71.812, 'max_score': 17882.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE17882328.jpg'}, {'end': 18055.994, 'src': 'embed', 'start': 18000.428, 'weight': 3, 'content': [{'end': 18018.785, 'text': "Next we have the field, so let's say input, type is text, name is first name and we have a class which is the form control class.", 'start': 18000.428, 'duration': 18.357}, {'end': 18025.599, 'text': 'Alright, so this we have to do for all the other fields.', 'start': 18021.337, 'duration': 4.262}, {'end': 18032.902, 'text': 'So let me just copy this and paste it like four times.', 'start': 18026.279, 'duration': 6.623}, {'end': 18038.725, 'text': "I'll also add the tag pre for spacing.", 'start': 18034.363, 'duration': 4.362}, {'end': 18043.367, 'text': "Let's do that here.", 'start': 18042.346, 'duration': 1.021}, {'end': 18055.994, 'text': "and finally we'll have the button.", 'start': 18048.428, 'duration': 7.566}], 'summary': 'Creating form fields for first name with form control class, repeated four times and a button added.', 'duration': 55.566, 'max_score': 18000.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE18000428.jpg'}], 'start': 16728.434, 'title': 'Angular dependency injection and forms', 'summary': 'Covers the concept of dependency injection in angular, including its application in components, creating services, retrieving employee data, form building approaches, and form validation in javascript, with practical demonstrations and examples.', 'chapters': [{'end': 17216.018, 'start': 16728.434, 'title': 'Understanding dependency injection in angular', 'summary': 'Explains the concept of dependency injection in angular, including its use in components, drawbacks of not using it, and its application in a demonstration. it also covers the creation of a service and its injection into a component for displaying employee data.', 'duration': 487.584, 'highlights': ['Explanation of Dependency Injection Dependency injection is explained as a means to inject the same code into every component, improving flexibility, testability, and code reusability. It is vital for directives, pipes, and components.', 'Drawbacks of Not Using Dependency Injection The drawbacks of not using dependency injection are highlighted, including inflexibility and unsuitability for testing when dependencies change. It illustrates how traditional methods lead to code fragility and limitations.', 'Demonstration of Dependency Injection A demonstration is presented to showcase the use of dependency injection with services and injecting them into classes, emphasizing the separation of concerns between components and services for efficient task execution.']}, {'end': 17589.607, 'start': 17216.518, 'title': 'Retrieving employee data in angular component', 'summary': 'Covers creating methods to retrieve employee data, importing a service into the component, using dependency injection to access the service instance, and displaying employee details on the ui with buttons for three different employees.', 'duration': 373.089, 'highlights': ['Creating methods to retrieve employee data and adding it to arrays in the component.ts file, for three different employees. 3 different methods created', "Importing the service 'records.service' into the component.ts file and declaring the instance in the providers area. Service instance declared", 'Using dependency injection to create an object that accesses the methods and variables of the service class in the constructor method. Object created for accessing service methods', 'Creating buttons for three different employees and binding the methods to retrieve employee data with the click event. Buttons created for 3 employees', 'Creating a custom HTML tag for the component and adding it to the main component for displaying employee details, along with adding styling and Simply Learn logo. Custom HTML tag created and added to main component']}, {'end': 17832.01, 'start': 17591.816, 'title': 'Angular forms & dependency injection', 'summary': 'Introduces angular forms and explains the two types of form building supported by angular - template-driven approach and reactive approach, highlighting their key features and differences, alongside the role of form control and form group in managing form data.', 'duration': 240.194, 'highlights': ['Angular supports two types of form building: template-driven approach and reactive approach, with the former using conventional form tags and the latter involving code-driven data management.', 'Template-driven approach uses modules like ngModule and ngControlGroup for creating controls, while reactive approach eliminates two-way data binding and allows synchronous control creation and unit testing.', "A form control class is used to validate input fields, checking values for touch, dirty, pristine, valid, and invalid, aiding in understanding the status of each field's value.", 'A form group class represents a group of controls, providing validation errors if any control is invalid and returning true if all controls are valid.']}, {'end': 18371.763, 'start': 17832.611, 'title': 'Creating user registration form in angular', 'summary': 'Explains the process of creating a user registration form in angular, including importing the forms module, creating form fields for first name, last name, email id, and password, adding form controls using ng-model directive, binding the form submission to a method, and generating javascript representation for form validation.', 'duration': 539.152, 'highlights': ['The chapter explains the process of creating a user registration form in Angular, including importing the forms module, creating form fields for first name, last name, email ID, and password, adding form controls using ng-model directive, binding the form submission to a method, and generating JavaScript representation for form validation.', 'The form will include four fields: first name, last name, email ID, and a password.', 'The ng-model directive, when added to the input tag, provides form controls to every input field, resulting in classes like ng-untouched, ng-pristine, and ng-valid being added by Angular to indicate form recognition and validation status.', 'The output property ngSubmit can be bound to a method, such as the submit method, which is called upon form submission.', 'The JavaScript representation, obtained using the ngForm directive assigned to a template variable, helps with validating all the form fields.']}, {'end': 18764.769, 'start': 18374.065, 'title': 'Form validation in javascript', 'summary': 'Demonstrates form validation in javascript, showcasing how to use form control objects to ensure field validation, with examples of disabling the submit button, specifying properties for input fields, and displaying error messages based on validation rules.', 'duration': 390.704, 'highlights': ['You can leverage form control objects to ensure field validation and display a message whenever an error occurs. Form control objects can be used to ensure field validation and display error messages, enhancing user experience.', 'Disabling the submit button is one way to ensure that incorrect fields are not submitted. Disabling the submit button is a method to prevent submission of incorrect fields, improving data integrity.', 'Specifying properties in the input tag allows defining validation rules, such as requiring a field to be filled and setting minimum and maximum length. By specifying properties in the input tag, validation rules like required field, minimum, and maximum length can be defined for input fields.']}], 'duration': 2036.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE16728434.jpg', 'highlights': ['Demonstration of Dependency Injection: Showcases the use of dependency injection with services and injecting them into classes, emphasizing the separation of concerns between components and services for efficient task execution.', 'Creating a custom HTML tag for the component and adding it to the main component for displaying employee details, along with adding styling and Simply Learn logo: Demonstrates the creation and integration of a custom HTML tag for displaying employee details.', 'Angular supports two types of form building: template-driven approach and reactive approach, with the former using conventional form tags and the latter involving code-driven data management: Explains the two types of form building supported by Angular.', 'The chapter explains the process of creating a user registration form in Angular, including importing the forms module, creating form fields for first name, last name, email ID, and password, adding form controls using ng-model directive, binding the form submission to a method, and generating JavaScript representation for form validation: Details the process of creating a user registration form in Angular.', 'Disabling the submit button is one way to ensure that incorrect fields are not submitted: Describes a method to prevent submission of incorrect fields, improving data integrity.']}, {'end': 20060.936, 'segs': [{'end': 19182.062, 'src': 'embed', 'start': 19125.527, 'weight': 1, 'content': [{'end': 19132.711, 'text': "NGGC, I'm just gonna call it login for my login component.", 'start': 19125.527, 'duration': 7.184}, {'end': 19141.516, 'text': "All right, and then I'm gonna say NGGC home for the home component.", 'start': 19136.934, 'duration': 4.582}, {'end': 19152.503, 'text': "All right, so I'm just going to copy the code for the login component.", 'start': 19146.339, 'duration': 6.164}, {'end': 19164.498, 'text': "So back in my login.html file, I'll just paste the code here.", 'start': 19153.556, 'duration': 10.942}, {'end': 19182.062, 'text': "Okay Also note that I've added the Simply Learn logo in my assets folder, and then just provided the source for it here.", 'start': 19169.639, 'duration': 12.423}], 'summary': 'Creating nggc login and home components, adding simply learn logo.', 'duration': 56.535, 'max_score': 19125.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE19125527.jpg'}, {'end': 19251.885, 'src': 'embed', 'start': 19205.279, 'weight': 3, 'content': [{'end': 19212.221, 'text': "Correct So here we're going to just paste the code for all of these three and then just display it when the home button is clicked.", 'start': 19205.279, 'duration': 6.942}, {'end': 19217.657, 'text': "Alright, so what I'm going to do is I'll just paste it here.", 'start': 19214.249, 'duration': 3.408}, {'end': 19222.187, 'text': 'So this basically has all the content.', 'start': 19219.966, 'duration': 2.221}, {'end': 19229.411, 'text': 'One thing I want to tell you is that in the previous video, we made sure that the code was written in three different components.', 'start': 19222.928, 'duration': 6.483}, {'end': 19233.354, 'text': "However, for this, I've just added all the code in the same component.", 'start': 19229.912, 'duration': 3.442}, {'end': 19236.195, 'text': 'Now I agree that this is not the best practice.', 'start': 19233.794, 'duration': 2.401}, {'end': 19238.176, 'text': 'So, if you want,', 'start': 19236.695, 'duration': 1.481}, {'end': 19248.142, 'text': 'you can go ahead and create three different components and separate the code into these three components and just add the custom HTML tags in your home component.', 'start': 19238.176, 'duration': 9.966}, {'end': 19251.885, 'text': "I'm just hoping you're following me right now.", 'start': 19249.324, 'duration': 2.561}], 'summary': 'Code for three components pasted in one; not best practice, recommend separating into three components.', 'duration': 46.606, 'max_score': 19205.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE19205279.jpg'}, {'end': 19417.98, 'src': 'embed', 'start': 19378.229, 'weight': 0, 'content': [{'end': 19382.352, 'text': "So we're gonna make use of the nav tag and an anchor tag for this.", 'start': 19378.229, 'duration': 4.123}, {'end': 19391.734, 'text': 'You can see that we have a nav tag and an anchor tag which encloses the login and the home components.', 'start': 19383.152, 'duration': 8.582}, {'end': 19400.696, 'text': "Alright, now we're going to make use of two directives from the router package called router link and router link active.", 'start': 19392.734, 'duration': 7.962}, {'end': 19403.697, 'text': 'Now these are specified within the anchor tag.', 'start': 19401.416, 'duration': 2.281}, {'end': 19417.98, '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': 19404.317, 'duration': 13.663}], 'summary': 'Using nav and anchor tags with router link and router link active for page paths and css classes.', 'duration': 39.751, 'max_score': 19378.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE19378229.jpg'}, {'end': 19637.229, 'src': 'embed', 'start': 19609.527, 'weight': 2, 'content': [{'end': 19613.13, 'text': 'The entire UI of the web page is divided into several components.', 'start': 19609.527, 'duration': 3.603}, {'end': 19619.674, 'text': 'We have the search component, a profile description component, stories component, and a post list component.', 'start': 19613.49, 'duration': 6.184}, {'end': 19624.277, 'text': 'These components make the code easier to debug and always remain discrete.', 'start': 19619.954, 'duration': 4.323}, {'end': 19629.184, 'text': 'Components also make development and maintenance of web applications faster,', 'start': 19624.642, 'duration': 4.542}, {'end': 19634.347, 'text': 'as multiple developers can work simultaneously on different components of the same web application.', 'start': 19629.184, 'duration': 5.163}, {'end': 19637.229, 'text': "Now let's see why React is so popular these days.", 'start': 19634.707, 'duration': 2.522}], 'summary': 'Web page ui divided into components for easier debugging and faster development with react.', 'duration': 27.702, 'max_score': 19609.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE19609527.jpg'}], 'start': 18764.769, 'title': 'Angular and react fundamentals', 'summary': 'Covers angular routing basics, including its significance in single-page applications and examples. it also explains configuring routes and navigation in angular, and introduces react.js, covering its features, industry trends, and impact, including statistics on high salaries for react developers.', 'chapters': [{'end': 19251.885, 'start': 18764.769, 'title': 'Angular routing basics', 'summary': 'Explains the basics of routing in angular, discussing its significance in creating single page applications and providing examples of popular single-page applications like google, facebook, twitter, and gmail. it also provides a step-by-step guide on setting up routing in angular and creating components for the home and login pages.', 'duration': 487.116, 'highlights': ['The chapter explains the basics of routing in Angular, discussing its significance in creating single page applications. Routing in Angular is used to create single-page applications, which are loaded just once and new content is added dynamically, providing an improved user experience and faster loading times.', 'Examples of popular single-page applications like Google, Facebook, Twitter, and Gmail are provided. Popular single-page applications like Google, Facebook, Twitter, and Gmail are highlighted as examples of the effectiveness of single-page applications in providing a seamless user experience.', 'A step-by-step guide on setting up routing in Angular is explained. The chapter provides a step-by-step guide on setting up routing in Angular, including checking if the app routing module has been imported and mentioning it in the imports array.', 'Creating components for the home and login pages is demonstrated. The process of creating components for the home and login pages using Angular is explained, along with the recommendation to use Bootstrap for defining the user interface for these components.']}, {'end': 19536.77, 'start': 19252.585, 'title': 'Configuring routes and navigation', 'summary': 'Covers configuring routes for the application, including creating paths for login and home components, linking routes to buttons using router link and router link active directives, and using router outlet directive to display components, resulting in a simple navigation bar with different options.', 'duration': 284.185, 'highlights': ['Creating paths for login and home components with their respective routes and components. Two different routes are created for login and home components, each with a path and corresponding component.', 'Linking routes to buttons using router link and router link active directives. Usage of router link and router link active directives to bind routes to specific buttons on the UI.', 'Using router outlet directive to display components and creating a simple navigation bar with different options for home, about, services, and link. Implementation of router outlet directive to specify where components are displayed, resulting in a navigation bar with different options.']}, {'end': 19716.566, 'start': 19537.871, 'title': 'Introduction to react.js', 'summary': 'Introduces react.js, covering its definition, features, industry trends, and its popularity, including details on its open source nature, creation of dynamic web applications, performance enhancements, and the release of react native for cross-compatible mobile applications.', 'duration': 178.695, 'highlights': ["React is a JavaScript library used to build fast and interactive user interfaces for both web and mobile applications, and it's open source. React is a JavaScript library for building fast and interactive user interfaces for both web and mobile applications. It is open source, allowing users to access, modify, and enhance its source code.", 'React involves unidirectional flow of data, has a small learning curve, and can be used for mobile applications, with the release of React Native for cross-compatible mobile applications. React involves a unidirectional flow of data, has a small learning curve, and can be used for mobile applications, with the release of React Native for cross-compatible mobile applications.', 'JSX is a syntax extension to JavaScript, used to add HTML to the JavaScript file, making the code easier to understand and debug. JSX is a syntax extension to JavaScript, used to add HTML to the JavaScript file, making the code easier to understand and debug.']}, {'end': 20060.936, 'start': 19717.046, 'title': 'React: virtual dom, performance, extensions & impact', 'summary': "Covers react's features including virtual dom for speed, one-way data binding, extensions like react native and flux, and the impact of react on the it industry, with statistics showing high salaries for react developers.", 'duration': 343.89, 'highlights': ['High Salaries for React Developers Statistics show that React developers earn way more than other web developers, with an average salary of US$91,000 in the United States and 7.25 lakhs per annum in India.', 'Virtual DOM and Performance React utilizes Virtual DOM, enabling faster web application performance by updating only the changed objects in the virtual DOM, leading to improved speed and performance.', 'React Extensions: React Native and Flux React offers extensions like React Native for mobile app development using JavaScript, with popular apps like Facebook and Instagram built using React Native, and Flux for implementing a unidirectional flow in application architecture.', 'One-Way Data Binding and Functional Components React features one-way data binding, where information flows in one direction, and utilizes functional components that receive and pass information through arguments and return values.']}], 'duration': 1296.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE18764769.jpg', 'highlights': ['Routing in Angular creates single-page applications, providing improved user experience and faster loading times.', 'Popular single-page applications like Google, Facebook, Twitter, and Gmail are highlighted as examples of the effectiveness of single-page applications.', 'The chapter provides a step-by-step guide on setting up routing in Angular, including creating components for the home and login pages.', 'Two different routes are created for login and home components, each with a path and corresponding component.', 'Usage of router link and router link active directives to bind routes to specific buttons on the UI.', 'React is a JavaScript library for building fast and interactive user interfaces for both web and mobile applications.', 'React involves a unidirectional flow of data, has a small learning curve, and can be used for mobile applications.', 'Statistics show that React developers earn way more than other web developers, with an average salary of US$91,000 in the United States and 7.25 lakhs per annum in India.', 'React utilizes Virtual DOM, enabling faster web application performance by updating only the changed objects in the virtual DOM.', 'React features one-way data binding and utilizes functional components that receive and pass information through arguments and return values.']}, {'end': 22509.93, 'segs': [{'end': 20911.874, 'src': 'embed', 'start': 20884.947, 'weight': 1, 'content': [{'end': 20892.792, 'text': "so here again i say import click from components, click, and let's define it here.", 'start': 20884.947, 'duration': 7.845}, {'end': 20894.393, 'text': "so let's check our browser.", 'start': 20892.792, 'duration': 1.601}, {'end': 20898.075, 'text': 'every time we click on the button, the value gets incremented, all right.', 'start': 20894.393, 'duration': 3.682}, {'end': 20905.08, 'text': "so let's go ahead and create another component, say counter.js, wherein every time the user hovers the mouse on the button,", 'start': 20898.075, 'duration': 7.005}, {'end': 20906.601, 'text': 'the count value increases.', 'start': 20905.08, 'duration': 1.521}, {'end': 20908.021, 'text': "so let's go ahead and do that.", 'start': 20906.601, 'duration': 1.42}, {'end': 20911.874, 'text': 'i say counter.js.', 'start': 20908.021, 'duration': 3.853}], 'summary': 'Using react components to increment values on clicks and mouse hovers.', 'duration': 26.927, 'max_score': 20884.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE20884947.jpg'}, {'end': 21208.116, 'src': 'embed', 'start': 21180.187, 'weight': 11, 'content': [{'end': 21183.691, 'text': "Okay, so let's create a pure component.js file.", 'start': 21180.187, 'duration': 3.504}, {'end': 21185.453, 'text': 'I say pure comp.', 'start': 21184.031, 'duration': 1.422}, {'end': 21187.675, 'text': 'dot js.', 'start': 21186.353, 'duration': 1.322}, {'end': 21193.421, 'text': "so here i'm going to use a snippet rpce that is going to create a pure component class.", 'start': 21187.675, 'duration': 5.746}, {'end': 21201.369, 'text': "let me get rid of this export and here in my div tag, i'll display the text say i am the pure component.", 'start': 21193.421, 'duration': 7.948}, {'end': 21204.333, 'text': "all right now let's go ahead and create a regular component.", 'start': 21201.369, 'duration': 2.964}, {'end': 21208.116, 'text': 'let me call it regular component.js.', 'start': 21204.333, 'duration': 3.783}], 'summary': 'Creating pure and regular components in component.js.', 'duration': 27.929, 'max_score': 21180.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE21180187.jpg'}, {'end': 21299.54, 'src': 'embed', 'start': 21268.065, 'weight': 0, 'content': [{'end': 21270.305, 'text': "And I'm going to be setting it to 3 seconds.", 'start': 21268.065, 'duration': 2.24}, {'end': 21276.547, 'text': "Now within the arrow function, I'll make use of the setState function to set the state of my property.", 'start': 21270.725, 'duration': 5.822}, {'end': 21279.487, 'text': 'However, I do not change the name.', 'start': 21276.807, 'duration': 2.68}, {'end': 21281.688, 'text': 'I keep it simply done itself.', 'start': 21279.507, 'duration': 2.181}, {'end': 21288.993, 'text': "Moving on, let's import pure component and the regular component into our parent component and then pass name as a property.", 'start': 21282.148, 'duration': 6.845}, {'end': 21299.54, 'text': 'So to do that, first import pure comp from pure component and then I say import regular comp from regular comp.js.', 'start': 21289.233, 'duration': 10.307}], 'summary': 'Setting state to 3 seconds, using setstate function, and importing pure and regular components into parent component.', 'duration': 31.475, 'max_score': 21268.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE21268065.jpg'}, {'end': 21552.265, 'src': 'embed', 'start': 21520.543, 'weight': 2, 'content': [{'end': 21525.347, 'text': "So back in my code editor, that is VS Code, I've opened a folder called React props.", 'start': 21520.543, 'duration': 4.804}, {'end': 21533.895, 'text': "And now I'm going to create a component, a class component, and I'll call it class props.js.", 'start': 21526.108, 'duration': 7.787}, {'end': 21535.936, 'text': "So let's create the class component.", 'start': 21534.155, 'duration': 1.781}, {'end': 21538.657, 'text': 'I give rce the snippet.', 'start': 21536.216, 'duration': 2.441}, {'end': 21543.66, 'text': 'And here, I display a message saying an h1 tag, basically.', 'start': 21539.378, 'duration': 4.282}, {'end': 21545.841, 'text': 'All right.', 'start': 21543.68, 'duration': 2.161}, {'end': 21552.265, 'text': 'Now let me get rid of export here and import it in my app.js main component.', 'start': 21546.942, 'duration': 5.323}], 'summary': 'Creating a class component in vs code for react props folder.', 'duration': 31.722, 'max_score': 21520.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE21520543.jpg'}, {'end': 21915.783, 'src': 'embed', 'start': 21886.001, 'weight': 3, 'content': [{'end': 21888.164, 'text': 'And now if you look at a browser, here we go.', 'start': 21886.001, 'duration': 2.163}, {'end': 21889.986, 'text': 'We get the output as expected.', 'start': 21888.364, 'duration': 1.622}, {'end': 21894.227, 'text': "So let's begin and learn what exactly is a state in React.", 'start': 21891.004, 'duration': 3.223}, {'end': 21899.891, 'text': 'Typically, a state is an object that stores the values of properties belonging to a component.', 'start': 21894.367, 'duration': 5.524}, {'end': 21905.736, 'text': 'Now these values can change over a period of time either via user interactions or network changes.', 'start': 21900.152, 'duration': 5.584}, {'end': 21908.679, 'text': 'And the state helps facilitate this functionality.', 'start': 21905.957, 'duration': 2.722}, {'end': 21913.081, 'text': 'Every time the state changes, React re-renders the component to the browser.', 'start': 21909.079, 'duration': 4.002}, {'end': 21915.783, 'text': 'The state is initialized in the constructor.', 'start': 21913.481, 'duration': 2.302}], 'summary': 'React state stores component properties; triggers re-render upon change.', 'duration': 29.782, 'max_score': 21886.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE21886001.jpg'}, {'end': 21971.943, 'src': 'embed', 'start': 21944.655, 'weight': 7, 'content': [{'end': 21950.937, 'text': 'Firstly, props in a component are used to pass data and event handlers to its children, while state, on the other hand,', 'start': 21944.655, 'duration': 6.282}, {'end': 21954.058, 'text': 'is used to store the data that has to be rendered on the webpage.', 'start': 21950.937, 'duration': 3.121}, {'end': 21955.359, 'text': 'Props are immutable.', 'start': 21954.298, 'duration': 1.061}, {'end': 21957.942, 'text': 'Once set by the parent, they cannot be changed.', 'start': 21955.699, 'duration': 2.243}, {'end': 21961.505, 'text': 'State holds volatile data and can be changed over time.', 'start': 21958.282, 'duration': 3.223}, {'end': 21966.851, 'text': 'Props can be used in functional and class components, while state is restricted to class components.', 'start': 21961.846, 'duration': 5.005}, {'end': 21971.943, 'text': 'Props are set by the parent component, while a state is generally updated by event handlers.', 'start': 21967.199, 'duration': 4.744}], 'summary': 'Props pass data to children, state stores data for rendering. props immutable, state volatile and can change.', 'duration': 27.288, 'max_score': 21944.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE21944655.jpg'}, {'end': 22062.63, 'src': 'embed', 'start': 22033.032, 'weight': 9, 'content': [{'end': 22034.953, 'text': 'And if you look at the browser, we have welcome.', 'start': 22033.032, 'duration': 1.921}, {'end': 22036.954, 'text': "Now let's beautify our code.", 'start': 22035.293, 'duration': 1.661}, {'end': 22038.814, 'text': "To do that, let's add some styling.", 'start': 22037.134, 'duration': 1.68}, {'end': 22043.217, 'text': 'So here in my app.js class component, I say styles.', 'start': 22039.155, 'duration': 4.062}, {'end': 22047.9, 'text': 'equals, and I say font style.', 'start': 22043.937, 'duration': 3.963}, {'end': 22050.522, 'text': 'and I set it to say bold.', 'start': 22047.9, 'duration': 2.622}, {'end': 22054.144, 'text': 'and I say color, say teal.', 'start': 22050.522, 'duration': 3.622}, {'end': 22061.449, 'text': 'and here in my h1 tag I say style equals this dot styles.', 'start': 22054.144, 'duration': 7.305}, {'end': 22062.63, 'text': 'so let me save it.', 'start': 22061.449, 'duration': 1.181}], 'summary': 'Beautifying the code by adding font style and color to the h1 tag.', 'duration': 29.598, 'max_score': 22033.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22033032.jpg'}, {'end': 22313.286, 'src': 'embed', 'start': 22286.266, 'weight': 4, 'content': [{'end': 22289.628, 'text': 'Now here I define the arrow function button change.', 'start': 22286.266, 'duration': 3.362}, {'end': 22294.03, 'text': 'If you are not familiar with arrow functions, I suggest you read up on them.', 'start': 22290.088, 'duration': 3.942}, {'end': 22295.971, 'text': 'And this is the general syntax.', 'start': 22294.45, 'duration': 1.521}, {'end': 22299.833, 'text': 'And here I say this dot set state.', 'start': 22296.231, 'duration': 3.602}, {'end': 22307.937, 'text': 'And inside I change my message to hit the bell icon to never miss an update.', 'start': 22300.133, 'duration': 7.804}, {'end': 22311.579, 'text': 'And my sub value changes to subscribed.', 'start': 22308.357, 'duration': 3.222}, {'end': 22313.286, 'text': "Let's save this.", 'start': 22312.406, 'duration': 0.88}], 'summary': 'Defined arrow function for button change, updating message and sub value.', 'duration': 27.02, 'max_score': 22286.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22286266.jpg'}, {'end': 22391.285, 'src': 'embed', 'start': 22366.434, 'weight': 5, 'content': [{'end': 22373.216, 'text': 'One is the source attribute that specifies the URL and the other is the alt attribute that specifies an alternate text for the image.', 'start': 22366.434, 'duration': 6.782}, {'end': 22382.999, 'text': 'So here in my component, I say I make use of a paragraph tag that will help display the image in the next line and then I use the image tag.', 'start': 22373.596, 'duration': 9.403}, {'end': 22391.285, 'text': "Now since my image changes once it's clicked, I have to define a property and pass the event handler click that will update the image.", 'start': 22383.559, 'duration': 7.726}], 'summary': 'Component uses source and alt attributes to display and update images.', 'duration': 24.851, 'max_score': 22366.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22366434.jpg'}, {'end': 22453.088, 'src': 'embed', 'start': 22431.058, 'weight': 6, 'content': [{'end': 22440.484, 'text': 'So back in my VS Code, I define style with width say 30 pixels and a height with again 30 pixels.', 'start': 22431.058, 'duration': 9.426}, {'end': 22444.905, 'text': 'Let me save this and now if you look at the browser, we have a smaller icon.', 'start': 22440.884, 'duration': 4.021}, {'end': 22450.847, 'text': 'So once the user clicks on this image, the image changes and the message displayed here gets updated.', 'start': 22445.246, 'duration': 5.601}, {'end': 22453.088, 'text': "To do that, we'll have to define an event.", 'start': 22451.067, 'duration': 2.021}], 'summary': 'Using vs code, defined style with width and height of 30 pixels. image changes on click and message gets updated.', 'duration': 22.03, 'max_score': 22431.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22431058.jpg'}], 'start': 20061.276, 'title': 'React: components and state', 'summary': "Delves into react's growth, installation, and component creation, covering higher-order components, reusability, pure components, and state management, with examples and explanations.", 'chapters': [{'end': 20782.842, 'start': 20061.276, 'title': 'Mastering react: installation and components', 'summary': 'Highlights the impressive growth of react compared to other frameworks, the installation process on windows, and a tutorial on creating react applications using components, providing insights into the development environment and the types of components.', 'duration': 721.566, 'highlights': ["React's impressive growth compared to other frameworks React has had a better growth scale compared to other frameworks like Angular and Vue, with front-end developers wholeheartedly adopting this lightweight framework, indicating fantastic career opportunities.", 'Companies devotedly using React Facebook, Instagram, Netflix, Dropbox, WhatsApp, among others, are devotionally using React, showcasing its widespread adoption and relevance in the industry.', 'Installation of Node.js and text editor for React development The installation process for Node.js and a text editor like VS Code is essential for setting up the React development environment, laying the foundation for creating React applications.', 'Tutorial on creating React applications using components The tutorial covers creating a folder, installing necessary ReactJS modules, checking the version, developing a React application, and utilizing components like functional and class components, providing a hands-on approach to learning.']}, {'end': 21123.485, 'start': 20783.102, 'title': 'Creating react components and higher-order components', 'summary': "Covers creating the click.js and counter.js components with incrementing values on button click and mouse hover, and creating a higher-order component to append 'user' before messages, with examples and explanations throughout.", 'duration': 340.383, 'highlights': ['Creating Click.js component with incrementing value on button click Explains creating a Click.js component with a button that increments the value on each click and using the concept of states.', 'Creating Counter.js component with incrementing value on mouse hover Describes creating a Counter.js component with a button that increments the value on mouse hover, and importing it in app.js.', "Creating a higher-order component to append 'user' before messages Demonstrates creating a higher-order component to append 'user' before messages, and passing Counter.js and Click.js as parameters to create a new component."]}, {'end': 21977.528, 'start': 21123.485, 'title': 'React reusability and pure components', 'summary': 'Discusses how react implements reusability of components, the importance of pure components in avoiding unnecessary re-renders and optimizing performance, and the component lifecycle stages, with a focus on mounting, updation, and unmounting.', 'duration': 854.043, 'highlights': ['Pure components ensure shallow comparison of states and props, optimizing performance by avoiding unnecessary re-renders Pure components avoid unnecessary re-renders by ensuring a shallow comparison of states and props, rendering to the DOM only when necessary, which improves performance.', 'Comparison between regular and pure components demonstrates the benefits of pure components in reusability and performance The comparison between regular and pure components illustrates the advantages of pure components in terms of reusability and performance optimization.', 'Component lifecycle stages are explained, covering mounting, updation, and unmounting phases The component lifecycle stages, including mounting, updation, and unmounting, are detailed, showcasing the sequence of events a component goes through during its lifecycle.']}, {'end': 22509.93, 'start': 21977.728, 'title': 'Creating react components and managing state', 'summary': 'Covers creating class components and managing state in react, including creating a class component, initializing state, updating state with event handlers, and handling image changes through state.', 'duration': 532.202, 'highlights': ["Creating a class component and initializing state The instructor demonstrates creating a class component 'app' and initializing state to display a welcome message using JSX conventions.", 'Updating state with event handlers The instructor explains using the setState method to update the state when the user clicks the subscribe button, changing the displayed message to instruct the user to click on the bell icon.', 'Handling image changes through state The instructor showcases using the setState method to change the displayed image and message when the user clicks on the bell icon.']}], 'duration': 2448.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE20061276.jpg', 'highlights': ["React's impressive growth compared to other frameworks", 'Companies devotedly using React like Facebook, Instagram, Netflix, Dropbox, WhatsApp', 'Installation of Node.js and text editor for React development is essential', 'Tutorial on creating React applications using components', 'Creating Click.js component with incrementing value on button click', 'Creating Counter.js component with incrementing value on mouse hover', "Creating a higher-order component to append 'user' before messages", 'Pure components ensure shallow comparison of states and props, optimizing performance', 'Comparison between regular and pure components demonstrates the benefits of pure components', 'Component lifecycle stages are explained, covering mounting, updation, and unmounting phases', 'Creating a class component and initializing state', 'Updating state with event handlers', 'Handling image changes through state']}, {'end': 23711.618, 'segs': [{'end': 22574.394, 'src': 'embed', 'start': 22547.71, 'weight': 0, 'content': [{'end': 22553.778, 'text': 'It is used to develop IO-intensive web applications like video streaming sites, single-page applications,', 'start': 22547.71, 'duration': 6.068}, {'end': 22556.221, 'text': 'online chatting applications and other web applications.', 'start': 22553.778, 'duration': 2.443}, {'end': 22560.344, 'text': 'It is used by large established companies and newly minted startups.', 'start': 22556.701, 'duration': 3.643}, {'end': 22568.128, 'text': 'Node.js was developed by Ryan Dal in 2009 and at the same time of this session, its latest version is v13.3.0.', 'start': 22560.804, 'duration': 7.324}, {'end': 22574.394, 'text': "Now that we know what Node.js is, let's go ahead and look at why it was so prevalent in the field of web development.", 'start': 22568.81, 'duration': 5.584}], 'summary': 'Node.js is used for io-intensive web applications by large companies and startups. latest version: v13.3.0.', 'duration': 26.684, 'max_score': 22547.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22547710.jpg'}, {'end': 22764.142, 'src': 'embed', 'start': 22736.513, 'weight': 1, 'content': [{'end': 22740.598, 'text': 'A stream is an abstract interface for working with streaming data in Node.js.', 'start': 22736.513, 'duration': 4.085}, {'end': 22744.843, 'text': 'Streams are objects that let you read data or write data continuously.', 'start': 22741.098, 'duration': 3.745}, {'end': 22746.405, 'text': 'There are four types of streams.', 'start': 22745.063, 'duration': 1.342}, {'end': 22748.046, 'text': 'First one is the readable.', 'start': 22746.905, 'duration': 1.141}, {'end': 22751.21, 'text': 'These are the types of streams from which data can be read.', 'start': 22748.467, 'duration': 2.743}, {'end': 22754.954, 'text': 'Writable, these are the types of streams to which data can be written.', 'start': 22751.751, 'duration': 3.203}, {'end': 22758.617, 'text': 'Duplex, these are both readable and writable streams.', 'start': 22755.695, 'duration': 2.922}, {'end': 22760.519, 'text': 'Lastly, we have transform.', 'start': 22759.318, 'duration': 1.201}, {'end': 22764.142, 'text': 'These streams can manipulate the data while it is being read or written.', 'start': 22760.859, 'duration': 3.283}], 'summary': 'Node.js streams include readable, writable, duplex, and transform streams for continuous data reading and writing.', 'duration': 27.629, 'max_score': 22736.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22736513.jpg'}, {'end': 22810.541, 'src': 'embed', 'start': 22780.234, 'weight': 4, 'content': [{'end': 22781.635, 'text': 'Next up, we have domain.', 'start': 22780.234, 'duration': 1.401}, {'end': 22786.059, 'text': 'Domains provide a way to handle different IO operations as a single group.', 'start': 22781.936, 'duration': 4.123}, {'end': 22789.522, 'text': 'Domain module intercepts errors that remain unhandled.', 'start': 22786.4, 'duration': 3.122}, {'end': 22793.045, 'text': 'There are two types of methods that are used for intercepting these errors.', 'start': 22789.823, 'duration': 3.222}, {'end': 22794.987, 'text': 'Firstly, we have internal binding.', 'start': 22793.506, 'duration': 1.481}, {'end': 22798.931, 'text': 'In this case, the error emitter executes its code inside the error method.', 'start': 22795.247, 'duration': 3.684}, {'end': 22800.972, 'text': 'Next up is the external binding.', 'start': 22799.511, 'duration': 1.461}, {'end': 22805.517, 'text': 'Now here the error emitter is explicitly added to a domain via its add method.', 'start': 22801.233, 'duration': 4.284}, {'end': 22807.699, 'text': 'The next component is the DNS.', 'start': 22805.957, 'duration': 1.742}, {'end': 22810.541, 'text': 'The DNS module enables name resolution.', 'start': 22808.099, 'duration': 2.442}], 'summary': 'Domains group io operations, intercept errors via internal/external binding, and dns resolves names.', 'duration': 30.307, 'max_score': 22780.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22780234.jpg'}, {'end': 23198.818, 'src': 'embed', 'start': 23174.679, 'weight': 2, 'content': [{'end': 23180.564, 'text': 'According to NodeSource, the total number of Node.js downloads increased by 40% in the last one year.', 'start': 23174.679, 'duration': 5.885}, {'end': 23186.468, 'text': 'The use of Node.js in production has increased dramatically since its release in 2010.', 'start': 23181.084, 'duration': 5.384}, {'end': 23194.554, 'text': 'With early adopters such as LinkedIn, PayPal and Netflix among others, Node.js has seen an exponential increase in its use in web development.', 'start': 23186.468, 'duration': 8.086}, {'end': 23198.818, 'text': 'The popularity of Node.js is also accounted to JavaScript.', 'start': 23195.074, 'duration': 3.744}], 'summary': 'Node.js downloads increased by 40% in the last year, gaining popularity in web development.', 'duration': 24.139, 'max_score': 23174.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE23174679.jpg'}], 'start': 22511.229, 'title': 'Node.js overview and industry applications', 'summary': 'Provides an overview of node.js, its components, and use cases in industry. it highlights its applications, features, and components such as its speed and asynchronous nature. it also discusses its role in web development and its popularity in industry, citing top industry leaders using node.js and the increase in node.js downloads and salaries.', 'chapters': [{'end': 22779.834, 'start': 22511.229, 'title': 'Understanding node.js', 'summary': 'Provides an overview of node.js, highlighting its applications, features, and components such as its speed, asynchronous nature, and usage of modules. it also discusses its role in web development and the reasons for its popularity, including its open-source nature and ease of use for beginners.', 'duration': 268.605, 'highlights': ["Node.js Applications and Features Node.js is used to develop IO-intensive web applications like video streaming sites, single-page applications, and online chatting applications. It is extremely fast due to its use of Google Chrome's V8 JavaScript engine, with the Node Package Manager offering around 50,000 bundles for developers. Its asynchronous APIs and open-source nature make it popular and easy for beginners in web development.", 'Components of Node.js Node.js consists of several components including modules, console, cluster, global objects, error handling, streaming, and buffer. Modules are used to include sets of functions, with the console module providing a simple debugging console. Cluster allows the user to launch a cluster of Node.js processes to handle the load, and error handling is important for managing different types of errors in Node.js applications. Additionally, the use of streams and buffers allows for the manipulation and handling of streaming data and binary data.', 'Reasons for Node.js Popularity Node.js is popular due to its speed, asynchronous nature, open-source platform, and ease of use for beginners in web development. Its fast code execution, vast library through the Node Package Manager, and non-blocking APIs contribute to its widespread adoption by organizations and businesses.']}, {'end': 23074.513, 'start': 22780.234, 'title': 'Node.js components and use cases', 'summary': 'Covers the components of node.js, including domain, dns, debugger, and express framework, and highlights the use cases of node.js by top industry leaders like netflix, walmart, uber, and nasa citing reasons such as application scalability, data intensive application, asynchronous io, and efficient handling of concurrent requests.', 'duration': 294.279, 'highlights': ['Node.js is used by Netflix, Walmart, Uber, and NASA for reasons such as application scalability, data intensive application, asynchronous IO, and efficient handling of concurrent requests. Top industry leaders like Netflix, Walmart, Uber, and NASA incorporate Node.js for reasons such as application scalability, data intensive application, asynchronous IO, and efficient handling of concurrent requests.', 'Node.js is chosen by Netflix due to application scalability and data intensive application, by Walmart for asynchronous IO and efficient handling of concurrent requests, by Uber for asynchronous IO, quick iterations, and active open-source community. Netflix chose Node.js for application scalability and data intensive application, Walmart for asynchronous IO and efficient handling of concurrent requests, and Uber for asynchronous IO, quick iterations, and active open-source community.', 'Domains in Node.js provide a way to handle different IO operations as a single group and intercept errors using internal and external binding methods. Domains in Node.js allow handling different IO operations as a single group and intercepting errors using internal and external binding methods.', 'The DNS module in Node.js enables name resolution, performs name resolution using methods like dns.resolve and dns.lookup. The DNS module in Node.js enables name resolution and performs name resolution using methods like dns.resolve and dns.lookup.', 'The Node.js debugger is an out-of-process debugging utility, accessible via a v8 inspector and built-in debugging client, supporting simple code inspection. The Node.js debugger is an out-of-process debugging utility, supporting simple code inspection and accessible via a v8 inspector and built-in debugging client.']}, {'end': 23236.337, 'start': 23074.853, 'title': 'Node.js in industry', 'summary': "Highlights the reasons and benefits of companies like nasa, paypal, medium choosing node.js, the demand for node.js developers, and the increase in node.js usage and salaries, with a 40% increase in node.js downloads in the last year and the popularity of node.js due to javascript's popularity.", 'duration': 161.484, 'highlights': ['reasons_choosing_nodejs The companies like NASA, PayPal, and Medium chose Node.js due to reduced access times, handling of data intensive tasks, fast build times, fewer lines of code, and its efficiency in handling large amounts of data.', "demand_for_nodejs_developers Node.js developers are in demand globally with a 40% increase in Node.js downloads in the last year, and it's one of the top 10 most in-demand jobs according to Forbes.", 'increase_in_nodejs_usage_and_salaries The use of Node.js in production has increased dramatically since its release in 2010, with early adopters such as LinkedIn, PayPal, and Netflix among others, and Node.js developers are offered better salary options than other web technology developers, with an average salary of around 6,13,000 rupees per year in India, and around 105,000 US dollars per year in the United States.', "popularity_of_nodejs Node.js has seen an exponential increase in its use in web development due to JavaScript's popularity, and many developers can start working on Node.js library with not much of a learning curve, and it's accounted to be the most popular language according to a survey conducted by Stack Overflow in 2019."]}, {'end': 23711.618, 'start': 23236.858, 'title': 'Node.js installation and architecture', 'summary': 'Covers the installation process of node.js, including verification and updating npm, creating and running a simple program, and delves into node.js architecture, emphasizing its single threaded event loop and javascript event-based model, detailing request handling, event queue, threaded pool, and external interactions.', 'duration': 474.76, 'highlights': ['Node.js architecture includes a single threaded event loop which allows handling many concurrent clients and a JavaScript event-based model with a callback mechanism for standard interactions. Node.js architecture is based on a single threaded event loop, enabling handling of multiple concurrent clients, along with a JavaScript event-based model and callback mechanism for standard client-server interactions.', 'The event loop in Node.js architecture consists of an event queue, threaded pool, and external system interactions, which facilitates seamless processing and scalability. Node.js event loop encompasses an event queue, threaded pool, and interactions with external systems, enabling seamless processing and scalability.', 'Node.js is a well-established technology, having been around for almost a decade, and is widely used by major websites. Node.js is a well-established technology, with almost a decade of existence, and is extensively utilized by major websites.', 'The installation process of Node.js involves downloading, running the installer, and verification using command prompt commands. The installation process of Node.js entails downloading, running the installer, and verifying the installation through command prompt commands.', 'Creating and running a simple program in Node.js involves using a text editor, such as VS Code, and implementing a basic program to display a message on the web browser. Creating and running a simple program in Node.js requires using a text editor, like VS Code, and developing a basic program to showcase a message on the web browser.']}], 'duration': 1200.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE22511229.jpg', 'highlights': ['Node.js is used by top industry leaders like Netflix, Walmart, Uber, and NASA for reasons such as application scalability, data intensive application, asynchronous IO, and efficient handling of concurrent requests.', "Node.js developers are in demand globally with a 40% increase in Node.js downloads in the last year, and it's one of the top 10 most in-demand jobs according to Forbes.", "Node.js has seen an exponential increase in its use in web development due to JavaScript's popularity, and many developers can start working on Node.js library with not much of a learning curve, and it's accounted to be the most popular language according to a survey conducted by Stack Overflow in 2019.", 'Node.js architecture includes a single threaded event loop which allows handling many concurrent clients and a JavaScript event-based model with a callback mechanism for standard interactions.', 'The use of Node.js in production has increased dramatically since its release in 2010, with early adopters such as LinkedIn, PayPal, and Netflix among others, and Node.js developers are offered better salary options than other web technology developers, with an average salary of around 6,13,000 rupees per year in India, and around 105,000 US dollars per year in the United States.']}, {'end': 26502.282, 'segs': [{'end': 23963.613, 'src': 'embed', 'start': 23935.215, 'weight': 7, 'content': [{'end': 23940.098, 'text': "so you can actually take it full advantage of that program and verify that it's actually up and running.", 'start': 23935.215, 'duration': 4.883}, {'end': 23948.303, 'text': "We're actually going to go ahead and actually run a demo of using MPM and to do that I've got three windows in front of me right now.", 'start': 23940.699, 'duration': 7.604}, {'end': 23951.025, 'text': 'So I have this window here which is my terminal window.', 'start': 23948.383, 'duration': 2.642}, {'end': 23953.626, 'text': "where I'll be doing all of my instructions.", 'start': 23951.725, 'duration': 1.901}, {'end': 23960.01, 'text': "Then I also have a folder which shows where I'll be putting all of the files.", 'start': 23954.467, 'duration': 5.543}, {'end': 23963.613, 'text': "And then finally, I'll actually have a text editor.", 'start': 23960.611, 'duration': 3.002}], 'summary': 'Demonstrating mpm usage with three windows for terminal, folder, and text editor.', 'duration': 28.398, 'max_score': 23935.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE23935215.jpg'}, {'end': 24006.484, 'src': 'embed', 'start': 23979.122, 'weight': 5, 'content': [{'end': 23985.187, 'text': 'So first thing we want to do is we want to go ahead and create a new project folder.', 'start': 23979.122, 'duration': 6.065}, {'end': 23988.69, 'text': "So I'm going to go in and I'm just going to move into.", 'start': 23985.327, 'duration': 3.363}, {'end': 23999.238, 'text': "Change directory and go into the project folder and we'll see down here that we have an empty project folder.", 'start': 23990.611, 'duration': 8.627}, {'end': 24006.484, 'text': "but for this one I'm actually going to go ahead and I'm going to create a new directory in this one and I'm going to call this one simply learn.", 'start': 23999.238, 'duration': 7.246}], 'summary': "Creating a new project folder called 'learn'.", 'duration': 27.362, 'max_score': 23979.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE23979122.jpg'}, {'end': 24089.558, 'src': 'embed', 'start': 24061.795, 'weight': 8, 'content': [{'end': 24065.777, 'text': "So what I'm now going to go ahead and do is I'm going to initialize this folder.", 'start': 24061.795, 'duration': 3.982}, {'end': 24072.94, 'text': "So to do that, just do npm init and you'll see that the path is that we're already in the Simply Learn folder.", 'start': 24065.817, 'duration': 7.123}, {'end': 24078.101, 'text': "And then when you do that, It's going to ask you some questions.", 'start': 24073.42, 'duration': 4.681}, {'end': 24084.37, 'text': "So what is the package name? We're going to go with the defaults for right now and then I can show you how we can edit those in a little bit.", 'start': 24078.141, 'duration': 6.229}, {'end': 24089.558, 'text': 'We go with just say yes to all of these just by hitting return.', 'start': 24085.311, 'duration': 4.247}], 'summary': "Initializing the folder using 'npm init' in simply learn folder.", 'duration': 27.763, 'max_score': 24061.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE24061795.jpg'}, {'end': 24681.991, 'src': 'embed', 'start': 24658.439, 'weight': 2, 'content': [{'end': 24666.422, 'text': 'now this is necessary in Django, because often we make applications, we have completely built the application and now we do not want to touch them.', 'start': 24658.439, 'duration': 7.983}, {'end': 24668.523, 'text': 'we do not want to create anything new.', 'start': 24666.422, 'duration': 2.101}, {'end': 24671.444, 'text': 'we do not want to update any packages that are already being used.', 'start': 24668.523, 'duration': 2.921}, {'end': 24675.907, 'text': "So if you're creating a new application for which you need to update the packages,", 'start': 24671.644, 'duration': 4.263}, {'end': 24681.991, 'text': "we don't want the implementation of that to hamper with the implementation of our current application.", 'start': 24675.907, 'duration': 6.084}], 'summary': 'Django apps require separate package updates to avoid interference with existing apps.', 'duration': 23.552, 'max_score': 24658.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE24658439.jpg'}, {'end': 25188.67, 'src': 'embed', 'start': 25143.597, 'weight': 0, 'content': [{'end': 25147.178, 'text': 'now, under this app, there are more number of files.', 'start': 25143.597, 'duration': 3.581}, {'end': 25148.518, 'text': 'so what do these files do?', 'start': 25147.178, 'duration': 1.34}, {'end': 25149.859, 'text': "we'll discuss that first.", 'start': 25148.518, 'duration': 1.341}, {'end': 25152.739, 'text': 'well, first is our migrations folder.', 'start': 25149.859, 'duration': 2.88}, {'end': 25157.28, 'text': "now, inside this migration folder, there'll be a number of files which will be created.", 'start': 25152.739, 'duration': 4.541}, {'end': 25163.762, 'text': "once we go through our project, we'll see every time we execute a particular command, a new file is inserted into the migrations folder.", 'start': 25157.28, 'duration': 6.482}, {'end': 25172.044, 'text': 'so this basically connects your database with your source code and that might seem very complicated, but actually django makes it extremely easy.', 'start': 25163.762, 'duration': 8.282}, {'end': 25174.365, 'text': 'and then you have the admins page.', 'start': 25172.364, 'duration': 2.001}, {'end': 25180.667, 'text': 'now this admin file or this admin page that django provides is extremely useful.', 'start': 25174.365, 'duration': 6.302}, {'end': 25188.67, 'text': "so it's like the dummy admin page where you can actually go and you can view your entire database there in a very formatted way.", 'start': 25180.667, 'duration': 8.003}], 'summary': 'The app contains numerous files, including migrations and an admin page, which simplifies database management.', 'duration': 45.073, 'max_score': 25143.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE25143597.jpg'}, {'end': 26419.332, 'src': 'embed', 'start': 26391.548, 'weight': 6, 'content': [{'end': 26394.671, 'text': "objects.all and it's empty.", 'start': 26391.548, 'duration': 3.123}, {'end': 26402.999, 'text': "So what's wrong? We created an object in which we inserted all the values but then still our database seems to be empty.", 'start': 26395.111, 'duration': 7.888}, {'end': 26410.005, 'text': 'So this is because so far this collection object that we created is only stored in our shells memory.', 'start': 26403.219, 'duration': 6.786}, {'end': 26413.088, 'text': 'We have not actually committed this to the database.', 'start': 26410.345, 'duration': 2.743}, {'end': 26419.332, 'text': 'so the command for committing this to the database would be our object name, which is call1.save.', 'start': 26413.328, 'duration': 6.004}], 'summary': 'Database not updated with object data; use call1.save command.', 'duration': 27.784, 'max_score': 26391.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE26391548.jpg'}], 'start': 23712.538, 'title': 'Understanding npm and introduction to django framework', 'summary': 'Discusses the functionalities of npm, serving as a central repository for node.js packages and modules, and the utility for installing and managing these packages, emphasizing its role in extending project functionality and modularity. additionally, it introduces django, a popular framework for web development, discussing its features, design pattern, and prerequisites, including the installation of python, pip, and virtual environment, as well as the creation of a django project and the structure of its files.', 'chapters': [{'end': 23828.342, 'start': 23712.538, 'title': 'Understanding node package manager (npm)', 'summary': 'Discusses the functionalities of npm, serving as a central repository for node.js packages and modules, and the utility for installing and managing these packages, emphasizing its role in extending project functionality and modularity.', 'duration': 115.804, 'highlights': ['NPM serves as a central repository for all packages and modules within Node.js, accessible through search.nodejs.org, offering version management and dependency control.', "NPM enables the installation and management of packages, facilitating the extension of project functionality by utilizing individual packages as 'Lego bricks' to build comprehensive solutions."]}, {'end': 24476.967, 'start': 23829.903, 'title': 'Working with npm for node.js', 'summary': 'Explains the process of setting up and using npm for node.js, including verifying the installation, initializing a project folder, installing and removing packages, and managing dependencies.', 'duration': 647.064, 'highlights': ['Setting up NPM and verifying installation The chapter explains how to verify the installation of Node.js and NPM through command line, ensuring the necessary tools are available for package management.', 'Initializing a project folder with npm init The process of initializing a project folder for working with NPM is detailed, including the use of npm init to create a package.json file and the ability to update metadata.', 'Installing and removing packages with npm The chapter demonstrates the installation and removal of packages using npm, showcasing the addition and removal of the Express and Bootstrap packages, enabling efficient package management.']}, {'end': 24920.292, 'start': 24476.967, 'title': 'Introduction to django framework', 'summary': 'Introduces django, a popular framework for web development, discussing its features, design pattern, and prerequisites, including the installation of python, pip, and virtual environment, as well as the creation of a django project and the structure of its files.', 'duration': 443.325, 'highlights': ['Django is a high-level Python web framework used by popular websites like Instagram, Bitbucket, Pinterest, and NASA. Django is utilized by popular websites like Instagram, Bitbucket, Pinterest, and NASA, highlighting its widespread adoption and relevance in the industry.', "The chapter introduces the MTV design pattern used by Django, where MTV stands for Model Template View. The MTV design pattern used by Django is introduced, with the explanation that MTV stands for Model Template View, providing a fundamental understanding of Django's design architecture.", 'The chapter covers the prerequisites for Django, including the installation of Python, pip, and virtual environment, as well as the creation of a Django project and the structure of its files. The chapter covers the prerequisites for Django, including the installation of Python, pip, and virtual environment, as well as the creation of a Django project and the structure of its files, providing a comprehensive overview of the necessary setup for working with Django.']}, {'end': 25826.649, 'start': 24920.292, 'title': 'Understanding django project structure', 'summary': "Details the structure of a django project, including the functionality of key files such as wsgi.py, manage.py, and the urls page, emphasizing the concept of 'apps' and the process of creating a basic web page, as well as the synchronization of the sqlite database with the source code.", 'duration': 906.357, 'highlights': ["Creating Apps in Django The chapter explains the concept of 'apps' in Django, highlighting that each page of a website is considered an app and should have a single purpose, with a clear description of its functionality, and provides a step-by-step guide for creating the first app 'genre' using the command 'python manage.py startapp genre'.", 'Understanding Django Models The explanation of models in Django is provided, emphasizing that each class created in the models file represents a database table, with its attributes forming columns, and the process of creating models and accessing the admin page to manage the database is described.', "Defining URLs and Views The process of defining URLs and views in Django is outlined, with a focus on creating URL patterns for different pages, linking subpages to the base app, and defining the response for each URL using the views page, demonstrated through the creation of the 'genres' page and the 'index' response.", "Synchronization of Database and Source Code The chapter details the synchronization of the SQLite database with the source code using migrations, explaining the process of running 'python manage.py migrate' to ensure the database is synced with the installed apps, enabling access to data and the smooth functioning of the project."]}, {'end': 26502.282, 'start': 25826.729, 'title': 'Creating django models for genre and articles', 'summary': "Covers creating two django models, 'collection' and 'piece', with attributes like collection name, description, and cover image, and linking pieces to collections using foreign keys, through a detailed process including shell commands and migrations.", 'duration': 675.553, 'highlights': ["The chapter covers creating two Django models, 'collection' and 'piece', with attributes like collection name, description, and cover image. Provides an overview of the main focus of the chapter, highlighting the creation of Django models for 'collection' and 'piece' with their respective attributes.", 'Linking pieces to collections using foreign keys, through a detailed process including shell commands and migrations. Explains the process of linking pieces to collections using foreign keys, including the usage of shell commands and migrations for database management.', 'Detailed process of entering values for attributes, saving, and modifying data in the database using the Django shell. Describes the process of entering, saving, and modifying data in the database using the Django shell, providing a practical understanding of database management.']}], 'duration': 2789.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE23712538.jpg', 'highlights': ['NPM serves as a central repository for all packages and modules within Node.js, offering version management and dependency control.', 'NPM enables the installation and management of packages, facilitating the extension of project functionality.', 'Django is a high-level Python web framework used by popular websites like Instagram, Bitbucket, Pinterest, and NASA.', "The MTV design pattern used by Django is introduced, providing a fundamental understanding of Django's design architecture.", 'The chapter covers the prerequisites for Django, including the installation of Python, pip, and virtual environment, as well as the creation of a Django project and the structure of its files.', 'Creating Apps in Django: Each page of a website is considered an app and should have a single purpose, with a clear description of its functionality.', 'Understanding Django Models: Each class created in the models file represents a database table, with its attributes forming columns.', 'Defining URLs and Views: The process of defining URLs and views in Django is outlined, with a focus on creating URL patterns for different pages.', 'Synchronization of Database and Source Code: The chapter details the synchronization of the SQLite database with the source code using migrations.']}, {'end': 27649.795, 'segs': [{'end': 26740.387, 'src': 'embed', 'start': 26711.778, 'weight': 3, 'content': [{'end': 26714.239, 'text': 'and finally we have the collection cover.', 'start': 26711.778, 'duration': 2.461}, {'end': 26715.319, 'text': 'paste the link here.', 'start': 26714.239, 'duration': 1.08}, {'end': 26716.179, 'text': 'save this job.', 'start': 26715.319, 'duration': 0.86}, {'end': 26719.32, 'text': 'so now we have three objects under collection.', 'start': 26716.179, 'duration': 3.141}, {'end': 26726.282, 'text': 'now, as you see here, all our collection objects, just say collection object with a number in bracket.', 'start': 26719.32, 'duration': 6.962}, {'end': 26736.164, 'text': 'in the similar manner, when we were also going through our shell, every time we executed the command collection.objects.all, we got just the name,', 'start': 26726.282, 'duration': 9.882}, {'end': 26737.764, 'text': 'collection object and a number.', 'start': 26736.164, 'duration': 1.6}, {'end': 26740.387, 'text': 'but we want something more meaningful.', 'start': 26738.104, 'duration': 2.283}], 'summary': 'Three collection objects need more meaningful names.', 'duration': 28.609, 'max_score': 26711.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE26711778.jpg'}, {'end': 26874.245, 'src': 'embed', 'start': 26849.167, 'weight': 4, 'content': [{'end': 26857.673, 'text': 'Now, from that page there will be certain links, and when the user clicks those links, he or she can move to another web page,', 'start': 26849.167, 'duration': 8.506}, {'end': 26864.158, 'text': 'and that is the web page where the particular article present inside our collection would be displayed.', 'start': 26857.673, 'duration': 6.485}, {'end': 26870.522, 'text': "so i'll just put down in comment what pattern of the url we are matching for each of these part.", 'start': 26864.158, 'duration': 6.364}, {'end': 26874.245, 'text': 'so the first one that we are matching is just genre, followed by nothing.', 'start': 26870.522, 'duration': 3.723}], 'summary': 'User can click links to move to another webpage to view specific articles.', 'duration': 25.078, 'max_score': 26849.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE26849167.jpg'}, {'end': 27032.527, 'src': 'embed', 'start': 27008.636, 'weight': 0, 'content': [{'end': 27017.421, 'text': "ID is an integer, but we cannot concatenate an integer with a string, so we need to convert this to a string, and that's it.", 'start': 27008.636, 'duration': 8.785}, {'end': 27021.223, 'text': "so let's go back to our web page and run this page.", 'start': 27017.421, 'duration': 3.802}, {'end': 27024.345, 'text': 'so the first page, which is genres, displays hello world.', 'start': 27021.223, 'duration': 3.122}, {'end': 27029.406, 'text': 'now, if I enter genre, slash 1, which is what we created newly.', 'start': 27024.745, 'duration': 4.661}, {'end': 27030.147, 'text': 'run the code.', 'start': 27029.406, 'duration': 0.741}, {'end': 27032.527, 'text': 'you see here the genre ID is 1.', 'start': 27030.147, 'duration': 2.38}], 'summary': 'Converting id to string allows concatenation. genre id 1 displayed on web page.', 'duration': 23.891, 'max_score': 27008.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE27008636.jpg'}, {'end': 27382.907, 'src': 'embed', 'start': 27360.776, 'weight': 2, 'content': [{'end': 27369.641, 'text': 'okay, so first we have the image IMG source, and in here I need to insert the link for that particular image.', 'start': 27360.776, 'duration': 8.865}, {'end': 27372.863, 'text': 'so the link I actually already stored in my database.', 'start': 27369.641, 'duration': 3.222}, {'end': 27377.266, 'text': 'as I showed, we did that through the shell and then later on through the admin page too.', 'start': 27372.863, 'duration': 4.403}, {'end': 27380.167, 'text': 'So how do we access that particular link??', 'start': 27377.566, 'duration': 2.601}, {'end': 27382.907, 'text': 'Well, just like you would in a Python code,', 'start': 27380.407, 'duration': 2.5}], 'summary': 'Storing image links in database for access', 'duration': 22.131, 'max_score': 27360.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE27360776.jpg'}, {'end': 27558.947, 'src': 'embed', 'start': 27530.891, 'weight': 5, 'content': [{'end': 27534.732, 'text': 'over here we collect all the objects in our collection table.', 'start': 27530.891, 'duration': 3.841}, {'end': 27538.254, 'text': "we convert that into a dictionary so that it's iterable.", 'start': 27534.732, 'duration': 3.522}, {'end': 27540.515, 'text': 'then we pass it using the render function.', 'start': 27538.254, 'duration': 2.261}, {'end': 27550.86, 'text': 'so the render function will take your template and it will tie that along with the context which is the dictionary, and it will pass an object,', 'start': 27540.515, 'duration': 10.345}, {'end': 27553.962, 'text': 'a response object, to our HTML file.', 'start': 27550.86, 'duration': 3.102}, {'end': 27558.947, 'text': 'this response object will be called object.list and it is iterable.', 'start': 27553.962, 'duration': 4.985}], 'summary': 'Convert collection table to dictionary for rendering html with iterable object.list', 'duration': 28.056, 'max_score': 27530.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE27530891.jpg'}], 'start': 26502.702, 'title': 'Creating admin, web views, and html template', 'summary': 'Covers creating a super user, adding models to the admin page, defining special methods, resulting in three added objects. it also discusses creating web views for genre display, defining urls, matching patterns, and displaying content based on user choices. additionally, it explains creating an html template for the genres page, including iteration over objects in a collection table, passing objects to an html file, and displaying them in a specific format, resulting in the first web page being rendered with images, names, and descriptions of genres.', 'chapters': [{'end': 26813.161, 'start': 26502.702, 'title': 'Creating admin page and adding objects', 'summary': 'Covers creating a super user, adding models to the admin page, and defining special methods for meaningful object representation in the admin page, resulting in the addition of three objects under collection with relevant details.', 'duration': 310.459, 'highlights': ['Adding Objects to Admin Page The process of creating a super user and adding models to the admin page is explained, resulting in the addition of three objects under collection with relevant details.', 'Defining Special Methods for Meaningful Object Representation The process of defining special methods for meaningful object representation in the admin page is detailed, resulting in a clear representation of objects under the table collection.', 'Simpler Way of Adding Values to the Database The simpler way of adding values to the database is mentioned, hinting at a more efficient method than using the shell.']}, {'end': 27120.565, 'start': 26813.321, 'title': 'Creating web views for genre display and details', 'summary': 'Discusses creating web views for genre display and details, including defining urls, matching patterns, and displaying content based on user choices, with examples of url patterns and integer conversions.', 'duration': 307.244, 'highlights': ['Defining URL patterns and response functions for genre display and details Defining URLs and response functions for genre display and details, including patterns for matching URLs and providing responses based on user choices', 'Matching URL patterns for different collections and handling user choices Matching URL patterns for different collections, handling user choices, and displaying content based on user-selected collection IDs', 'Converting integer collection IDs to strings for display purposes Converting integer collection IDs to strings for display purposes, ensuring proper concatenation with strings for web page display', 'Importing models for database access and fetching information Importing models for database access and fetching information from the database, including collections and pieces', 'Iterating over objects and displaying them on the web page Iterating over objects and displaying them on the web page, using a dictionary to store and iterate over objects for display']}, {'end': 27649.795, 'start': 27120.845, 'title': 'Creating html template for genres page', 'summary': 'Explains the process of creating an html template for the genres page in django, including the iteration over objects in a collection table, passing objects to an html file, and displaying them in a specific format, resulting in the first web page being rendered with images, names, and descriptions of genres.', 'duration': 528.95, 'highlights': ['The process of creating an HTML template for the genres page in Django The transcript details the step-by-step process of creating an HTML template for the genres page in Django, including the structure of folders, file naming, and content.', 'Iteration over objects in a collection table The transcript explains the iteration over every object in a collection table and the need to display them in a specific format within an HTML file.', 'Passing objects to an HTML file and displaying them in a specific format It describes the process of passing objects to an HTML file using the render function, and displaying them with specific formatting including images, clickable names, and descriptions.', 'Rendering of the first web page with images, names, and descriptions of genres The transcript explains the result of the process, which is the rendering of the first web page with images, names, and descriptions of genres, and the redirection of users to another page upon clicking the name.']}], 'duration': 1147.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE26502702.jpg', 'highlights': ['Adding Objects to Admin Page The process of creating a super user and adding models to the admin page is explained, resulting in the addition of three objects under collection with relevant details.', 'Defining Special Methods for Meaningful Object Representation The process of defining special methods for meaningful object representation in the admin page is detailed, resulting in a clear representation of objects under the table collection.', 'Defining URL patterns and response functions for genre display and details Defining URLs and response functions for genre display and details, including patterns for matching URLs and providing responses based on user choices', 'The process of creating an HTML template for the genres page in Django The transcript details the step-by-step process of creating an HTML template for the genres page in Django, including the structure of folders, file naming, and content.', 'Rendering of the first web page with images, names, and descriptions of genres The transcript explains the result of the process, which is the rendering of the first web page with images, names, and descriptions of genres, and the redirection of users to another page upon clicking the name.', 'Iterating over objects and displaying them on the web page Iterating over objects and displaying them on the web page, using a dictionary to store and iterate over objects for display']}, {'end': 30045.153, 'segs': [{'end': 27730.325, 'src': 'embed', 'start': 27702.387, 'weight': 3, 'content': [{'end': 27705.849, 'text': 'Click on fiction and yeah, we got our dummy page back.', 'start': 27702.387, 'duration': 3.462}, {'end': 27709.311, 'text': 'So now our next step is to design this page.', 'start': 27706.37, 'duration': 2.941}, {'end': 27719.318, 'text': 'Go back to your code and again designing the page means we need to start putting content into our details function.', 'start': 27709.772, 'duration': 9.546}, {'end': 27723.641, 'text': 'Now before we start designing this function we need to populate the piece table.', 'start': 27719.638, 'duration': 4.003}, {'end': 27726.182, 'text': "So again let's go back to our admin page.", 'start': 27723.841, 'duration': 2.341}, {'end': 27730.325, 'text': "We'll add the data through the admin page since that's much easier.", 'start': 27726.442, 'duration': 3.883}], 'summary': 'Design dummy page, populate piece table, add data through admin page', 'duration': 27.938, 'max_score': 27702.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE27702387.jpg'}, {'end': 28020.893, 'src': 'embed', 'start': 27984.36, 'weight': 0, 'content': [{'end': 27996.984, 'text': "now all we have left is to actually code the html file, so i'll just copy paste this here and then make the required correction.", 'start': 27984.36, 'duration': 12.624}, {'end': 28009.131, 'text': 'so in p item and this would be piece object you align its center, and piece obj is the cover.', 'start': 27996.984, 'duration': 12.147}, {'end': 28016.912, 'text': 'we do not really need a href here, so delete that part out, because this is the final page.', 'start': 28009.131, 'duration': 7.781}, {'end': 28020.893, 'text': 'we are not redirecting to any other page from here.', 'start': 28016.912, 'duration': 3.981}], 'summary': 'Coding the html file with required corrections and no redirection to other pages.', 'duration': 36.533, 'max_score': 27984.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE27984360.jpg'}, {'end': 28115.151, 'src': 'embed', 'start': 28088.994, 'weight': 2, 'content': [{'end': 28096.6, 'text': "refresh it once again and we'll click on one of the genres and yeah, as you see,", 'start': 28088.994, 'duration': 7.606}, {'end': 28105.946, 'text': 'the particular piece related to that genre gets displayed The Pet Sematary by Stephen King, which is a novel published in the year 1983..', 'start': 28096.6, 'duration': 9.346}, {'end': 28112.089, 'text': "So now we're back to our code and well our first and our second page is designed, it's working fine.", 'start': 28105.946, 'duration': 6.143}, {'end': 28115.151, 'text': 'So now we are not going to create something new.', 'start': 28112.55, 'duration': 2.601}], 'summary': "Website displays genre-related content like 'pet sematary' novel by stephen king, published in 1983. first and second page designed and working fine.", 'duration': 26.157, 'max_score': 28088.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE28088994.jpg'}, {'end': 28173.409, 'src': 'embed', 'start': 28142.612, 'weight': 1, 'content': [{'end': 28146.797, 'text': "In fact, it's not just the easier method, this is also recommended.", 'start': 28142.612, 'duration': 4.185}, {'end': 28149.019, 'text': "So I'll tell you how that is done.", 'start': 28147.618, 'duration': 1.401}, {'end': 28151.942, 'text': 'First of all, we need to import the generic package.', 'start': 28149.239, 'duration': 2.703}, {'end': 28162.434, 'text': "So from django.views import generic and now let's delete this entire thing.", 'start': 28152.603, 'duration': 9.831}, {'end': 28170.427, 'text': 'So our first function is basically listing out all the objects in the table.', 'start': 28165.464, 'duration': 4.963}, {'end': 28173.409, 'text': 'So you have multiple objects, all of them are being listed out.', 'start': 28170.447, 'duration': 2.962}], 'summary': 'Demonstrates an easier method for listing objects using django.views.generic package.', 'duration': 30.797, 'max_score': 28142.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE28142612.jpg'}, {'end': 28254.932, 'src': 'embed', 'start': 28229.133, 'weight': 5, 'content': [{'end': 28240.786, 'text': 'collection.objects.all. so the same query we were using previously, but now we do not need to take the objects from the query and then convert them into a dictionary,', 'start': 28229.133, 'duration': 11.653}, {'end': 28244.009, 'text': 'then pass it on using the render function.', 'start': 28240.786, 'duration': 3.223}, {'end': 28254.932, 'text': 'we can simply do this one statement and all our objects will be sent to a template, where now, in the template so far, we were seeing all collection,', 'start': 28244.009, 'duration': 10.923}], 'summary': 'Using collection.objects.all simplifies query process and sends all objects to template directly.', 'duration': 25.799, 'max_score': 28229.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE28229133.jpg'}], 'start': 27649.795, 'title': 'Django views and navigation', 'summary': 'Covers designing views, coding detail pages, optimizing views with generic classes, creating a common navigation bar, and user form views in django, including processes, advantages, and specific functionalities.', 'chapters': [{'end': 27810.518, 'start': 27649.795, 'title': 'Designing view for django project', 'summary': 'Covers the process of designing a view for a django project, including adding data through the admin page, populating the piece table, and accessing objects from the collection table.', 'duration': 160.723, 'highlights': ['Adding data through the admin page The process of adding data through the admin page is explained, including adding details for fiction, inspiration, and horror categories.', 'Populating the piece table The steps for populating the piece table are outlined, including adding details for fiction, inspiration, and horror categories with specific titles, artists, types, and publication years.', 'Accessing objects from the collection table The concept of accessing objects from the collection table is discussed, specifically focusing on accessing the ID for genre objects and displaying the front page for different categories such as fiction.']}, {'end': 28115.151, 'start': 27811.365, 'title': 'Detail page coding in django', 'summary': 'Explains the process of coding the detail page in django, involving extraction of objects from different tables, filtering them based on user selection, and rendering the html file, resulting in the display of a specific piece related to a genre.', 'duration': 303.786, 'highlights': ["The process involves extracting the object selected by the user from the genres page using 'collection.objects.get(pk=genre_id)', where genre_id is a number (1, 2, or 3) representing the selected genre, and then filtering the related piece object based on the collection category.", 'The extracted object is used to filter and display a specific piece related to the selected genre, with details such as title, artist name, year, and type, resulting in the display of a particular piece related to the selected genre.', "The detail page is designed to display the specific piece related to the selected genre, as demonstrated by the example of displaying 'The Pet Sematary' by Stephen King, a novel published in 1983, upon clicking on a genre on the web page."]}, {'end': 28743.194, 'start': 28115.791, 'title': 'Optimizing django views with generic classes', 'summary': "Discusses the advantages of using django's generic views, which can reduce code size, improve code readability, and simplify the process of displaying objects and details in web pages.", 'duration': 627.403, 'highlights': ["Django provides generic views which can reduce code size from four lines to two or three lines and is the recommended method. Using Django's generic views can reduce code size and improve code readability, making the process of displaying objects and details more efficient.", "The 'list view' class simplifies the function of listing objects from a table by using a query set to return all objects to a template, enhancing code simplicity and efficiency. The 'list view' class simplifies the process of listing objects by using a query set to return all objects to a template, reducing the complexity of the code.", "The 'detail view' class simplifies the process of displaying the details of an object and can be called as a function, improving code simplicity and readability. The 'detail view' class simplifies the process of displaying object details and can be called as a function, enhancing code simplicity and readability.", 'Creating a base template for the navigation bar and using bootstrap to create it can reduce code repeatability and improve the structure of the website. Creating a base template for the navigation bar and using bootstrap can enhance the structure of the website and reduce code repeatability.']}, {'end': 29161.782, 'start': 28743.194, 'title': 'Creating common navigation bar for multiple pages', 'summary': 'Explains the process of creating a common navigation bar for multiple pages, involving the use of block content, extending base.html file, and creating a blueprint for user registration form, including the creation of a user form class with specific fields like username, email, and password.', 'duration': 418.588, 'highlights': ['The chapter explains the process of creating a common navigation bar for multiple pages. The process involves using block content and extending the base.html file to ensure the navigation bar is present on every page.', 'Creation of a blueprint for user registration form, including the creation of a user form class. A user form class is created with specific fields like username, email, and password, and a blueprint is established to define the form for user registration.', 'Specification of fields for the user form class, including username, email, and password. The user form class specifies the fields to be used, such as username, email, and password, and further defines the password field as a specific type using forms.car field and widget forms.password import.']}, {'end': 29702.542, 'start': 29161.882, 'title': 'Creating user form view in django', 'summary': 'Covers creating a user form view in django, including defining the form class, handling get and post methods, and saving user data in the database while ensuring password hashing and user authentication.', 'duration': 540.66, 'highlights': ['Defining the form class and template for user form view The chapter starts with defining the form class and template for the user form view, highlighting the importance of specifying the outlook of the form and creating a blueprint for the form.', 'Handling get and post methods for the form The chapter explains the functionality of the get and post methods, providing an empty form to the user with the get method and checking and saving user-entered data in the post method.', "Saving user data in the database and ensuring password hashing The chapter details the process of saving user data in the database, including separating and cleaning the fields, hashing the password using 'set_password' function, and then saving the data in the shell and database.", 'Redirecting the user to the index page after registration and combining login The chapter concludes by explaining the redirection of users to the index page after registration, along with combining login to authenticate and log in the user based on the provided username and password.']}, {'end': 30045.153, 'start': 29706.144, 'title': 'Creating user form view', 'summary': 'Discusses the creation of a user form view using django, including the use of the redirect function, csrf token for security, and the process of creating a new user and the subsequent impact on the admin profile.', 'duration': 339.009, 'highlights': ['The chapter discusses the creation of a user form view using Django It covers the process of creating a user form view using Django, including the use of the redirect function and the CSRF token for security.', 'The process of creating a new user and the subsequent impact on the admin profile It explains the process of creating a new user, the impact of the new user becoming the active user, and the subsequent impact on the admin profile.', 'Explanation of CSRF token for security It provides an explanation of the CSRF token used for security in Django, including the importance of including it when having an interactive form and the potential security risks it mitigates.']}], 'duration': 2395.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE27649795.jpg', 'highlights': ['Django provides generic views to reduce code size and improve code readability, enhancing efficiency.', 'Creating a base template for the navigation bar and using bootstrap can enhance the structure of the website and reduce code repeatability.', 'The process of creating a common navigation bar involves using block content and extending the base.html file to ensure its presence on every page.', "The chapter explains the process of saving user data in the database, including separating and cleaning the fields, hashing the password using 'set_password' function, and then saving the data in the shell and database.", 'The process of creating a user form view using Django covers the use of the redirect function and the CSRF token for security.', "The detail page is designed to display the specific piece related to the selected genre, as demonstrated by the example of displaying 'The Pet Sematary' by Stephen King, a novel published in 1983, upon clicking on a genre on the web page."]}, {'end': 31679.4, 'segs': [{'end': 30282.924, 'src': 'embed', 'start': 30257.643, 'weight': 9, 'content': [{'end': 30264.466, 'text': 'SQL, when deployed as data control language helps protect your database from unauthorized access.', 'start': 30257.643, 'duration': 6.823}, {'end': 30271.088, 'text': "After knowing SQL with its features and applications, let's go through some basic queries in SQL.", 'start': 30265.586, 'duration': 5.502}, {'end': 30282.924, 'text': 'i.e. DDL, Data Definition Language, DML, Data Manipulation Language, DCL, Data Control Language, TCL, Transaction Control Language.', 'start': 30272.942, 'duration': 9.982}], 'summary': 'Sql dcl protects database from unauthorized access.', 'duration': 25.281, 'max_score': 30257.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE30257643.jpg'}, {'end': 30666.625, 'src': 'embed', 'start': 30630.164, 'weight': 6, 'content': [{'end': 30631.344, 'text': 'date of purchase.', 'start': 30630.164, 'duration': 1.18}, {'end': 30633.165, 'text': 'this is the date of purchase.', 'start': 30631.344, 'duration': 1.821}, {'end': 30636.046, 'text': 'address pune item.', 'start': 30633.165, 'duration': 2.881}, {'end': 30637.647, 'text': 'that is where the table purchased.', 'start': 30636.046, 'duration': 1.601}, {'end': 30639.688, 'text': 'price, that is 80..', 'start': 30637.647, 'duration': 2.041}, {'end': 30644.871, 'text': 'so now we will run this command and all these records.', 'start': 30639.688, 'duration': 5.183}, {'end': 30651.394, 'text': 'they would be inserted into the table and these are 20 commands.', 'start': 30644.871, 'duration': 6.523}, {'end': 30661.019, 'text': '20 records You can see insert into customer values.', 'start': 30651.394, 'duration': 9.625}, {'end': 30666.625, 'text': 'The command has been executed and they have been inserted into the table.', 'start': 30662.661, 'duration': 3.964}], 'summary': '20 records of customer purchases inserted into the table.', 'duration': 36.461, 'max_score': 30630.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE30630164.jpg'}, {'end': 30764.633, 'src': 'embed', 'start': 30719.705, 'weight': 0, 'content': [{'end': 30730.253, 'text': 'now you see another command and for that we would just get the output as customer id and customer name in the output grid.', 'start': 30719.705, 'duration': 10.548}, {'end': 30749.042, 'text': "for that we'll write the command select customer id, comma, customer name from customers,", 'start': 30730.253, 'duration': 18.789}, {'end': 30761.691, 'text': "semicolon and we'll run this command and we will get both the columns customer id and customer name in our output grid.", 'start': 30749.042, 'duration': 12.649}, {'end': 30764.633, 'text': "now we'll see another command that would be drop.", 'start': 30761.691, 'duration': 2.942}], 'summary': 'Demonstrating sql commands; select customer id and name, drop command next.', 'duration': 44.928, 'max_score': 30719.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE30719705.jpg'}, {'end': 31158.098, 'src': 'embed', 'start': 31023.494, 'weight': 2, 'content': [{'end': 31040.238, 'text': 'this would be the comment and you can also use slash, star and that text inside it and star and slash.', 'start': 31023.494, 'duration': 16.744}, {'end': 31043.281, 'text': 'so this is also the comment section.', 'start': 31040.238, 'duration': 3.043}, {'end': 31047.424, 'text': 'you can write comment with this syntax or with this syntax.', 'start': 31043.281, 'duration': 4.143}, {'end': 31049.165, 'text': 'they both work.', 'start': 31047.424, 'duration': 1.741}, {'end': 31052.368, 'text': "now we'll see another command that would be update.", 'start': 31049.165, 'duration': 3.203}, {'end': 31057.992, 'text': 'this is also used to manipulate data in the table, to update any record into the table.', 'start': 31052.368, 'duration': 5.624}, {'end': 31063.543, 'text': 'so we will write update table name.', 'start': 31057.992, 'duration': 5.551}, {'end': 31068.987, 'text': 'that would be customers and what we should update.', 'start': 31063.543, 'duration': 5.444}, {'end': 31071.008, 'text': 'okay, we will update a record.', 'start': 31068.987, 'duration': 2.021}, {'end': 31078.334, 'text': 'we will change the customer name and address and we have the primary key as customer id.', 'start': 31071.008, 'duration': 7.326}, {'end': 31079.975, 'text': 'so we will use that.', 'start': 31078.334, 'duration': 1.641}, {'end': 31082.457, 'text': 'so update customers.', 'start': 31079.975, 'duration': 2.482}, {'end': 31116.762, 'text': 'set customer name equal to james comma and address equal to boston where customer id equal to 101.', 'start': 31082.457, 'duration': 34.305}, {'end': 31122.212, 'text': 'okay, you can see here in the table 101 customer id.', 'start': 31116.762, 'duration': 5.45}, {'end': 31125.453, 'text': 'the customer name is joseph and the address is pune.', 'start': 31122.212, 'duration': 3.241}, {'end': 31128.775, 'text': 'we have updated command and we will execute it.', 'start': 31125.453, 'duration': 3.322}, {'end': 31129.595, 'text': "let's see.", 'start': 31128.775, 'duration': 0.82}, {'end': 31134.978, 'text': 'okay, okay, we have an error here.', 'start': 31129.595, 'duration': 5.383}, {'end': 31136.619, 'text': "uh yeah, that's correct.", 'start': 31134.978, 'duration': 1.641}, {'end': 31139.721, 'text': 'we will execute this command.', 'start': 31136.619, 'duration': 3.102}, {'end': 31150.326, 'text': 'yeah, the command has been executed successfully and now we check the table with the command select star from customers semicolon.', 'start': 31139.721, 'duration': 10.605}, {'end': 31158.098, 'text': 'you can see the row has been updated.', 'start': 31155.137, 'duration': 2.961}], 'summary': "The transcript explains how to use the 'update' command to modify data in a table, with an example of updating a customer's name and address in a database.", 'duration': 134.604, 'max_score': 31023.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE31023494.jpg'}, {'end': 31383.819, 'src': 'embed', 'start': 31317.536, 'weight': 5, 'content': [{'end': 31330.42, 'text': 'they have the column price and in that we have all the prices and from that the minimum price is 60 and we have get it at less price.', 'start': 31317.536, 'duration': 12.884}, {'end': 31332.72, 'text': 'similarly, we have the maximum command.', 'start': 31330.42, 'duration': 2.3}, {'end': 31342.76, 'text': 'to get the maximum amount from the column, we will use the maximum command select max.', 'start': 31332.72, 'duration': 10.04}, {'end': 31343.42, 'text': 'in bracket.', 'start': 31342.76, 'duration': 0.66}, {'end': 31365.166, 'text': 'we would write the attribute name as max price from customers and we will execute this command and what we get is 3400 is the maximum price from the price column.', 'start': 31343.42, 'duration': 21.746}, {'end': 31366.607, 'text': 'now we will see another command.', 'start': 31365.166, 'duration': 1.441}, {'end': 31369.432, 'text': 'that would be count count command.', 'start': 31366.607, 'duration': 2.825}, {'end': 31372.894, 'text': 'it returns the number of rows according to the query.', 'start': 31369.432, 'duration': 3.462}, {'end': 31383.819, 'text': 'so we will run the query and see like how it works right select count and the attribute name.', 'start': 31372.894, 'duration': 10.925}], 'summary': 'The minimum price is 60, maximum price is 3400, and the count of rows is obtained using sql commands.', 'duration': 66.283, 'max_score': 31317.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE31317536.jpg'}], 'start': 30045.153, 'title': 'Sql fundamentals and mysql workbench', 'summary': 'Covers sql basics, database significance, and mysql workbench queries, including creating users, fundamental sql queries, mysql workbench basic queries, and sql command functions and syntax.', 'chapters': [{'end': 30094.465, 'start': 30045.153, 'title': 'Sql basics for beginners', 'summary': 'Introduces the creation of a new user in the users group via an email id, and outlines the topics to be covered in the video tutorial, including the need for a database, basic sql queries, features and applications of sql queries, and an invitation to subscribe to the channel.', 'duration': 49.312, 'highlights': ['The chapter introduces the creation of a new user in the users group via an email ID.', 'The tutorial will cover the need for a database, basic SQL queries, features and applications of SQL queries.', 'An invitation is extended to subscribe to the channel for tech video updates.']}, {'end': 30383.205, 'start': 30095.146, 'title': 'Understanding databases and sql basics', 'summary': "Explains the significance of databases in the digital world, emphasizing sql's role in efficient data manipulation and its applications, and delves into the fundamental sql queries and language components.", 'duration': 288.059, 'highlights': ["Data has become the new oil which has mandate companies and businesses to rely on an excellent database to store their vast amounts of data. Data is likened to 'the new oil,' compelling companies to rely on excellent databases for storing vast amounts of data.", 'The tech giants are accumulating vast amounts of data that need to be stored. Tech giants are amassing significant amounts of data that necessitate storage.', 'SQL is used to create a database, define its structure, implement it and lets you perform many functions. SQL is utilised for creating, defining, implementing, and performing various functions within a database.', "The structured query language is compatible with all database systems from Oracle, IBM to Microsoft, and it doesn't require much coding to manage databases. SQL is compatible with various database systems and is efficient in managing databases with minimal coding.", 'SQL is extensively used as a client-server language to connect the front-end with the back-end, thus supporting the client-server architecture. SQL is widely employed as a client-server language, supporting the front-end to back-end connection, and consequently, the client-server architecture.']}, {'end': 31063.543, 'start': 30383.745, 'title': 'Mysql workbench basic queries', 'summary': 'Covers executing basic queries in mysql workbench such as creating and manipulating tables, inserting and manipulating records, selecting specific columns, dropping and truncating tables, altering table columns, and adding comments during execution.', 'duration': 679.798, 'highlights': ["20 records inserted into the table using the 'insert' command, covering attributes like customer id, customer name, age, gender, date of purchase, address, item purchased, and price. The 'insert' command was used to insert 20 records into the table, covering attributes such as customer id, customer name, age, gender, date of purchase, address, item purchased, and price.", "The 'drop' command successfully removed the 'customers' table from the database and verified with the 'select' command, resulting in an error confirming the removal. The 'drop' command successfully removed the 'customers' table from the database, as verified by the error message from the 'select' command confirming the absence of the table.", "The 'alter' command was used to drop the 'age' column from the 'customers' table, verified by the 'select' command. The 'alter' command was used to drop the 'age' column from the 'customers' table, as verified by the output of the 'select' command.", "The 'truncate' command effectively removed all records from the table, as confirmed by the subsequent 'select' command. The 'truncate' command effectively removed all records from the table, as confirmed by the output of the subsequent 'select' command.", 'The chapter covers adding comments during execution using double minus signs or slash-star syntax. The chapter covers adding comments during execution using double minus signs or slash-star syntax.']}, {'end': 31679.4, 'start': 31063.543, 'title': 'Sql command functions and syntax', 'summary': 'Covers sql commands for updating, deleting, and retrieving data, including examples of update and delete commands, distinct, minimum, maximum, count, average, sum, where, group by, and having commands, with relevant syntax and result explanations.', 'duration': 615.857, 'highlights': ["The command has been executed successfully. The customer name is James and the address is Boston after updating the record using the 'update' command with 'set' and 'where' clauses.", "The 'delete' command successfully removed the row with customer id 102 from the table, as verified by checking the table after executing the command.", "The 'distinct' command returned unique addresses from the 'customers' table, demonstrating the function of retrieving different values using the 'distinct' keyword in the 'select' statement.", "The 'count' command returned the total number of customer IDs, which was 19, from the 'customers' table, showing the usage of the 'count' function to count the rows according to the query.", "The 'sum' command provided the sum of the prices from the 'customers' table, showcasing how to use the 'sum' function to add up all the values from a specific column in the table."]}], 'duration': 1634.247, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE30045153.jpg', 'highlights': ['SQL is used to create a database, define its structure, implement it and lets you perform many functions.', "The structured query language is compatible with all database systems and doesn't require much coding to manage databases.", 'The chapter covers adding comments during execution using double minus signs or slash-star syntax.', "The 'insert' command was used to insert 20 records into the table, covering attributes such as customer id, customer name, age, gender, date of purchase, address, item purchased, and price.", "The 'drop' command successfully removed the 'customers' table from the database, as verified by the error message from the 'select' command confirming the absence of the table.", "The 'truncate' command effectively removed all records from the table, as confirmed by the output of the subsequent 'select' command.", "The 'distinct' command returned unique addresses from the 'customers' table, demonstrating the function of retrieving different values using the 'distinct' keyword in the 'select' statement.", "The 'count' command returned the total number of customer IDs, which was 19, from the 'customers' table, showing the usage of the 'count' function to count the rows according to the query.", "The 'sum' command provided the sum of the prices from the 'customers' table, showcasing how to use the 'sum' function to add up all the values from a specific column in the table.", "The 'delete' command successfully removed the row with customer id 102 from the table, as verified by checking the table after executing the command."]}, {'end': 33536.002, 'segs': [{'end': 31837.503, 'src': 'embed', 'start': 31795.758, 'weight': 5, 'content': [{'end': 31806.203, 'text': 'Native aggregation allows its users to extract and transform data from MongoDB and either load them in a new format or export it from MongoDB to other data sources.', 'start': 31795.758, 'duration': 10.445}, {'end': 31808.164, 'text': 'It makes it extremely compatible.', 'start': 31806.663, 'duration': 1.501}, {'end': 31812.291, 'text': 'Lastly, as mentioned earlier, the schema-free model.', 'start': 31809.389, 'duration': 2.902}, {'end': 31818.397, 'text': 'Now applications get the power and responsibility to interpret different properties in different ways.', 'start': 31812.692, 'duration': 5.705}, {'end': 31825.623, 'text': "Now that you know what MongoDB is and why exactly it's used, let's have a look at the characteristics of MongoDB.", 'start': 31818.977, 'duration': 6.646}, {'end': 31828.605, 'text': "Firstly, it's a general purpose database.", 'start': 31826.563, 'duration': 2.042}, {'end': 31834.21, 'text': 'Now MongoDB can serve heterogeneous loads and multiple purposes within an application.', 'start': 31829.105, 'duration': 5.105}, {'end': 31837.503, 'text': 'Again, it has a flexible schema design.', 'start': 31835.382, 'duration': 2.121}], 'summary': 'Native aggregation in mongodb allows users to extract, transform, and load data, providing compatibility and flexibility with a general purpose database and a flexible schema design.', 'duration': 41.745, 'max_score': 31795.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE31795758.jpg'}, {'end': 31941.315, 'src': 'embed', 'start': 31864.175, 'weight': 1, 'content': [{'end': 31870.621, 'text': 'When it comes to load balancing, this happens automatically and transparently to the user by the shard balancer.', 'start': 31864.175, 'duration': 6.446}, {'end': 31873.724, 'text': 'Again, we have aggregation framework.', 'start': 31872.042, 'duration': 1.682}, {'end': 31881.011, 'text': 'Now MongoDB offers an extract, transform and load framework that eliminates the need for complex data pipelines.', 'start': 31874.144, 'duration': 6.867}, {'end': 31884.074, 'text': 'Native replication.', 'start': 31883.073, 'duration': 1.001}, {'end': 31889.439, 'text': 'Now data will get replicated across a replica set without complicated setup.', 'start': 31884.434, 'duration': 5.005}, {'end': 31896.634, 'text': 'Security features, both authentication and authorization are taken into account in MongoDB.', 'start': 31890.97, 'duration': 5.664}, {'end': 31899.195, 'text': 'Next up is JSON.', 'start': 31898.055, 'duration': 1.14}, {'end': 31904.299, 'text': 'Now, JSON is widely used across the web for front-end and API communication.', 'start': 31899.556, 'duration': 4.743}, {'end': 31909.262, 'text': "And as such, it's easier when the database is also compatible with the same protocol.", 'start': 31904.719, 'duration': 4.543}, {'end': 31912.866, 'text': 'Lastly, we have MapReduce.', 'start': 31911.365, 'duration': 1.501}, {'end': 31919.629, 'text': 'Now again, MapReduce is an excellent tool to build data pipelines and MongoDB uses MapReduce readily.', 'start': 31913.166, 'duration': 6.463}, {'end': 31923.271, 'text': "Now let's quickly have a look at the working of MongoDB.", 'start': 31920.089, 'duration': 3.182}, {'end': 31928.053, 'text': 'Data is stored in documents with the help of key value pairs.', 'start': 31924.431, 'duration': 3.622}, {'end': 31931.255, 'text': 'Now the data is stored in the BSON format.', 'start': 31928.653, 'duration': 2.602}, {'end': 31937.478, 'text': 'At the backend, MongoDB converts JSON data into a binary format known as BSON.', 'start': 31931.955, 'duration': 5.523}, {'end': 31941.315, 'text': 'MongoDB also makes provision for nested data.', 'start': 31938.413, 'duration': 2.902}], 'summary': 'Mongodb offers automatic load balancing, replication, security, json compatibility, and mapreduce for efficient data management.', 'duration': 77.14, 'max_score': 31864.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE31864175.jpg'}, {'end': 32053.111, 'src': 'embed', 'start': 31988.146, 'weight': 0, 'content': [{'end': 31993.028, 'text': "Now all said and done, let's look at some of the companies that use MongoDB currently.", 'start': 31988.146, 'duration': 4.882}, {'end': 32003.531, 'text': 'Companies like Toyota, SAP, AstraZeneca, Adobe Verizon, Cisco, Barclays and Google, among others,', 'start': 31994.268, 'duration': 9.263}, {'end': 32006.932, 'text': 'readily deploy MongoDB as their database management system.', 'start': 32003.531, 'duration': 3.401}, {'end': 32012.814, 'text': "In this video, I'm going to help you install and set up MongoDB on your Windows system.", 'start': 32007.492, 'duration': 5.322}, {'end': 32023.083, 'text': 'You will have to navigate to the official MongoDB website and here you can see software.', 'start': 32013.939, 'duration': 9.144}, {'end': 32035.848, 'text': 'So go ahead and click on community server under software and you can see that the current version is 4.4.4 and the platform is Windows,', 'start': 32023.843, 'duration': 12.005}, {'end': 32038.208, 'text': 'and make sure that the package is MSI.', 'start': 32035.848, 'duration': 2.36}, {'end': 32039.029, 'text': 'All right.', 'start': 32038.709, 'duration': 0.32}, {'end': 32042.01, 'text': 'Now go ahead and press download.', 'start': 32039.309, 'duration': 2.701}, {'end': 32045.793, 'text': 'So this could take a while.', 'start': 32044.71, 'duration': 1.083}, {'end': 32053.111, 'text': "Alright, so once it's downloaded, go ahead and install it.", 'start': 32045.813, 'duration': 7.298}], 'summary': 'Companies like toyota, sap, astrazeneca, adobe, verizon, cisco, barclays, and google use mongodb as their database management system, and the current version for windows is 4.4.4.', 'duration': 64.965, 'max_score': 31988.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE31988146.jpg'}, {'end': 32219.345, 'src': 'embed', 'start': 32187.714, 'weight': 7, 'content': [{'end': 32191.816, 'text': 'So you can right now just type show DBS.', 'start': 32187.714, 'duration': 4.102}, {'end': 32201.517, 'text': 'when you click on it, it says admin config and localhost, and all of it is zero.', 'start': 32196.635, 'duration': 4.882}, {'end': 32208.52, 'text': "so with that, you have successfully installed MongoDB on your system and it's up and running all right.", 'start': 32201.517, 'duration': 7.003}, {'end': 32218.164, 'text': 'in this particular tutorial, we will be learning what MongoDB is all about and their advantages, and some practical demonstrations.', 'start': 32208.52, 'duration': 9.644}, {'end': 32219.345, 'text': "so let's get started now.", 'start': 32218.164, 'duration': 1.181}], 'summary': 'Installed mongodb with 0 admin config, localhost. tutorial covers mongodb advantages and practical demonstrations.', 'duration': 31.631, 'max_score': 32187.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE32187714.jpg'}, {'end': 32529.844, 'src': 'embed', 'start': 32505.704, 'weight': 18, 'content': [{'end': 32514.108, 'text': "Okay Since I'm using the Mac book here, the concept is little different about how MongoDB can be used.", 'start': 32505.704, 'duration': 8.404}, {'end': 32519.891, 'text': 'Okay So this is just a basic way of how the Mo is being used into your code.', 'start': 32515.049, 'duration': 4.842}, {'end': 32522.1, 'text': 'okay, everyone.', 'start': 32521.44, 'duration': 0.66}, {'end': 32529.844, 'text': 'so now, as we are in the macbook, so here to start mongodb, we have a very special way to start with.', 'start': 32522.1, 'duration': 7.744}], 'summary': 'Using mongodb on a macbook presents a different approach to starting the database.', 'duration': 24.14, 'max_score': 32505.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE32505704.jpg'}, {'end': 33536.002, 'src': 'embed', 'start': 33494.989, 'weight': 15, 'content': [{'end': 33502.852, 'text': "I'm giving the name called what? Bangalore.", 'start': 33494.989, 'duration': 7.863}, {'end': 33506.392, 'text': 'The another one we are using that is called state.', 'start': 33504.131, 'duration': 2.261}, {'end': 33512.616, 'text': 'Let me remove this state.', 'start': 33511.114, 'duration': 1.502}, {'end': 33523.83, 'text': 'ok, and the third property we are using, that is known as called country.', 'start': 33514.201, 'duration': 9.629}, {'end': 33529.614, 'text': 'here is saying IE, that is called India, so it is closing here.', 'start': 33523.83, 'duration': 5.784}, {'end': 33532.841, 'text': 'OK, and it is closing here.', 'start': 33531.061, 'duration': 1.78}, {'end': 33536.002, 'text': 'So the inner document and outer document both are closed.', 'start': 33532.881, 'duration': 3.121}], 'summary': 'Transcript: a discussion about properties named bangalore, state, and country, with india as the value.', 'duration': 41.013, 'max_score': 33494.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE33494989.jpg'}], 'start': 31679.4, 'title': 'Mongodb essentials', 'summary': 'Covers the introduction to mongodb, its installation and usage on mac and windows, working with mongodb, including collection management, creation, and document insertion, and its features, such as flexibility, scalability, and application in various technologies and companies like toyota, sap, and google.', 'chapters': [{'end': 32104.334, 'start': 31679.4, 'title': 'Introduction to mongodb', 'summary': 'Introduces mongodb, a document-oriented nosql database released on august 27, 2009, highlighting its key features such as flexibility, native aggregation, schema-free model, scalability, load balancing, aggregation framework, native replication, security features, json compatibility, mapreduce, data storage in bson format, and its application in various technologies and adoption by companies like toyota, sap, google, and more.', 'duration': 424.934, 'highlights': ['Native Replication Data is replicated across a replica set without complicated setup, ensuring data redundancy and fault tolerance.', 'Scalability and Load Balancing MongoDB is designed to scale both vertically and horizontally, using sharding to share load between instances, achieving read and write scalability, and automatic load balancing using the shard balancer.', 'Flexibility and Schema Design MongoDB offers a flexible schema design, allowing document-oriented approaches with non-defined attributes that can be modified on the fly.', "JSON Compatibility MongoDB's compatibility with JSON simplifies front-end and API communication, aligning with widely-used web technologies.", 'Introduction to MongoDB An overview of MongoDB, a document-oriented NoSQL database released on August 27, 2009, highlighting its key features and adoption in various technologies and by companies like Toyota, SAP, Google, and more.']}, {'end': 32342.782, 'start': 32104.334, 'title': 'Installing and running mongodb', 'summary': "Covers the installation of mongodb, creating a path for easy execution, confirming successful installation, and an overview of mongodb's features including its document-based storage, nosql nature and schema-free environment.", 'duration': 238.448, 'highlights': ["MongoDB server is successfully generated and up and running after installation. By typing 'Mongo' in the command prompt, the server is confirmed to be up and running.", 'MongoDB is a document-based NoSQL database providing a schema-free environment for better flexibility. MongoDB stores data in documents, representing hierarchical relationships and offering a schemaless environment for unorganized data.', 'NoSQL databases, including MongoDB, store relationship data in documents rather than using tables with rows and columns. NoSQL databases like MongoDB do not employ table structures and instead store relationship data in documents.']}, {'end': 32738.798, 'start': 32343.763, 'title': 'Mongodb installation and usage', 'summary': "Covers the simple installation process of mongodb for both mac and windows, including important steps like creating the 'data/db' folder and starting the mongodb server, as well as demonstrating how to access, create, and identify databases.", 'duration': 395.035, 'highlights': ['The installation process for MongoDB is straightforward, and the current version is 4.4.6 for Mac OS. The installation process is simple, and the current version is 4.4.6 for Mac OS.', 'Recommendation to choose the zip file for Windows installation to prevent unnecessary running of MongoDB services. Suggestion to opt for the zip file during Windows installation to avoid unnecessary running of MongoDB services.', "Important step of creating the 'data/db' folder in the C drive for MongoDB to start automatically in Windows. The essential step of creating the 'data/db' folder in the C drive for MongoDB to start automatically in Windows.", "Demonstration of starting MongoDB on Mac using the terminal and creating a database using the 'use' command. Explanation of starting MongoDB on Mac using the terminal and creating a database using the 'use' command.", "Guidance on checking and creating new databases using commands like 'show DBS' and 'use simply db'. Guidance on checking and creating new databases using commands like 'show DBS' and 'use simply db'."]}, {'end': 33013.921, 'start': 32739.258, 'title': 'Working with mongodb', 'summary': "Explains how to work with mongodb, including creating and checking databases and collections, with an emphasis on mongodb's document-based structure and the use of commands to create collections and insert records.", 'duration': 274.663, 'highlights': ['MongoDB follows a document-based structure, where tables are referred to as collections and rows as documents.', 'The process of creating a collection in MongoDB involves using the command db.createCollection followed by the collection name, and once created, the database can be viewed using the command show DBS.', 'An alternative method to create a collection and add a record is by directly using the command db.dbName.insert followed by the property name and value, which results in both creating the collection and adding a record.', 'The reason why the databases created may not be listed is because according to MongoDB rule, a database will only show in the list if it contains at least one record or collection.']}, {'end': 33291.248, 'start': 33014.462, 'title': 'Mongodb collection management', 'summary': 'Discusses the creation and management of collections in mongodb, including commands like insert, show collections, find, and db.createcollection, and the significance of using db.createcollection with capped and size options for limiting the number and size of documents in a collection.', 'duration': 276.786, 'highlights': ["The 'insert' command is used to insert a record into a collection in MongoDB, and 'show collections' is used to list the existing collections.", "The 'find' function is used to list out the number of records in a collection, and 'db.createCollection' with 'capped' and 'size' options can be used to limit the number and size of documents in a collection.", "Using 'db.createCollection' with 'capped' true and 'size' option, a maximum number of documents and a maximum collective size of documents can be set for a collection in MongoDB."]}, {'end': 33536.002, 'start': 33291.248, 'title': 'Mongodb: collection creation and document insertion', 'summary': 'Discusses the creation of collections, database switching, and document insertion in mongodb, emphasizing the use of embedded documents and providing an example of inserting a record with embedded documents and multiple properties.', 'duration': 244.754, 'highlights': ['The chapter discusses the creation of collections, database switching, and document insertion in MongoDB The discussion covers key functionalities of MongoDB, including collection creation, database switching, and document insertion.', 'Emphasizes the use of embedded documents in MongoDB for scaling up applications The chapter recommends the use of embedded documents in MongoDB for scaling up applications without hurdles, highlighting the benefits of using embedded documents.', 'Provides an example of inserting a record with embedded documents and multiple properties An example of inserting a record with embedded documents and multiple properties is presented, showcasing the use of embedded documents and multiple techniques for document insertion.']}], 'duration': 1856.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE31679400.jpg', 'highlights': ['Introduction to MongoDB An overview of MongoDB, a document-oriented NoSQL database released on August 27, 2009, highlighting its key features and adoption in various technologies and by companies like Toyota, SAP, Google, and more.', 'Native Replication Data is replicated across a replica set without complicated setup, ensuring data redundancy and fault tolerance.', 'Scalability and Load Balancing MongoDB is designed to scale both vertically and horizontally, using sharding to share load between instances, achieving read and write scalability, and automatic load balancing using the shard balancer.', 'Flexibility and Schema Design MongoDB offers a flexible schema design, allowing document-oriented approaches with non-defined attributes that can be modified on the fly.', "JSON Compatibility MongoDB's compatibility with JSON simplifies front-end and API communication, aligning with widely-used web technologies.", "MongoDB server is successfully generated and up and running after installation. By typing 'Mongo' in the command prompt, the server is confirmed to be up and running.", 'MongoDB is a document-based NoSQL database providing a schema-free environment for better flexibility. MongoDB stores data in documents, representing hierarchical relationships and offering a schemaless environment for unorganized data.', 'NoSQL databases, including MongoDB, store relationship data in documents rather than using tables with rows and columns. NoSQL databases like MongoDB do not employ table structures and instead store relationship data in documents.', 'The installation process for MongoDB is straightforward, and the current version is 4.4.6 for Mac OS. The installation process is simple, and the current version is 4.4.6 for Mac OS.', 'Recommendation to choose the zip file for Windows installation to prevent unnecessary running of MongoDB services. Suggestion to opt for the zip file during Windows installation to avoid unnecessary running of MongoDB services.', "Important step of creating the 'data/db' folder in the C drive for MongoDB to start automatically in Windows. The essential step of creating the 'data/db' folder in the C drive for MongoDB to start automatically in Windows.", "Demonstration of starting MongoDB on Mac using the terminal and creating a database using the 'use' command. Explanation of starting MongoDB on Mac using the terminal and creating a database using the 'use' command.", "Guidance on checking and creating new databases using commands like 'show DBS' and 'use simply db'. Guidance on checking and creating new databases using commands like 'show DBS' and 'use simply db'.", 'MongoDB follows a document-based structure, where tables are referred to as collections and rows as documents.', 'The process of creating a collection in MongoDB involves using the command db.createCollection followed by the collection name, and once created, the database can be viewed using the command show DBS.', 'An alternative method to create a collection and add a record is by directly using the command db.dbName.insert followed by the property name and value, which results in both creating the collection and adding a record.', 'The reason why the databases created may not be listed is because according to MongoDB rule, a database will only show in the list if it contains at least one record or collection.', "The 'insert' command is used to insert a record into a collection in MongoDB, and 'show collections' is used to list the existing collections.", "The 'find' function is used to list out the number of records in a collection, and 'db.createCollection' with 'capped' and 'size' options can be used to limit the number and size of documents in a collection.", "Using 'db.createCollection' with 'capped' true and 'size' option, a maximum number of documents and a maximum collective size of documents can be set for a collection in MongoDB.", 'The chapter discusses the creation of collections, database switching, and document insertion in MongoDB The discussion covers key functionalities of MongoDB, including collection creation, database switching, and document insertion.', 'Emphasizes the use of embedded documents in MongoDB for scaling up applications The chapter recommends the use of embedded documents in MongoDB for scaling up applications without hurdles, highlighting the benefits of using embedded documents.', 'Provides an example of inserting a record with embedded documents and multiple properties An example of inserting a record with embedded documents and multiple properties is presented, showcasing the use of embedded documents and multiple techniques for document insertion.']}, {'end': 36978.577, 'segs': [{'end': 35371.637, 'src': 'embed', 'start': 35333.357, 'weight': 2, 'content': [{'end': 35342.26, 'text': 'it will examine all the millions, number of records to search the result, which certainly gonna be taking huge amount of time.', 'start': 35333.357, 'duration': 8.903}, {'end': 35353.044, 'text': "and that's where exactly when you try to search the record, fine, when you have no indexing is available, okay.", 'start': 35342.26, 'duration': 10.784}, {'end': 35354.344, 'text': 'so you need to understand.', 'start': 35353.044, 'duration': 1.3}, {'end': 35368.853, 'text': 'one important thing is, by default, index is applied on your underscore id, db dot, new emp.', 'start': 35354.344, 'duration': 14.509}, {'end': 35371.637, 'text': 'um, yeah, db dot, nump dot.', 'start': 35368.853, 'duration': 2.784}], 'summary': 'Millions of records need efficient indexing for faster searches.', 'duration': 38.28, 'max_score': 35333.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE35333357.jpg'}, {'end': 36011.583, 'src': 'embed', 'start': 35986.939, 'weight': 1, 'content': [{'end': 35995.765, 'text': 'Now, here my first requirement is we want to filter data based on a section A because students belong to different sections.', 'start': 35986.939, 'duration': 8.826}, {'end': 36001.85, 'text': 'As you can see now, they belong to different sections, section A, B, C, D.', 'start': 35996.526, 'duration': 5.324}, {'end': 36006.533, 'text': 'So I just want to filter the data based on a section A.', 'start': 36001.85, 'duration': 4.683}, {'end': 36009.756, 'text': 'Okay So for filter out, I would like to use dollar match.', 'start': 36006.533, 'duration': 3.223}, {'end': 36011.583, 'text': "Let's see how it works.", 'start': 36010.543, 'duration': 1.04}], 'summary': 'Filtering data based on section a using dollar match.', 'duration': 24.644, 'max_score': 35986.939, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE35986939.jpg'}, {'end': 36153.693, 'src': 'embed', 'start': 36115.214, 'weight': 3, 'content': [{'end': 36118.035, 'text': 'Okay After this match, we are starting this curly braces.', 'start': 36115.214, 'duration': 2.821}, {'end': 36125.196, 'text': 'Okay So after this match, we would like to bring and.', 'start': 36120.455, 'duration': 4.741}, {'end': 36131.796, 'text': 'we say dollar and and again colon.', 'start': 36127.392, 'duration': 4.404}, {'end': 36143.865, 'text': 'again we are starting this square bracket now, okay, we talk about what section a number one, and after this the first curly braces.', 'start': 36131.796, 'duration': 12.069}, {'end': 36145.627, 'text': 'we would like to use marks.', 'start': 36143.865, 'duration': 1.762}, {'end': 36153.693, 'text': 'we say marks colon, and once again they would like to start curly braces.', 'start': 36145.627, 'duration': 8.066}], 'summary': 'Discussing data structures and syntax for a new feature.', 'duration': 38.479, 'max_score': 36115.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE36115214.jpg'}, {'end': 36251.295, 'src': 'embed', 'start': 36218.45, 'weight': 0, 'content': [{'end': 36227.974, 'text': 'okay, after the dollar match we are using another curly braces and we have a call and operator after this and we have a call.', 'start': 36218.45, 'duration': 9.524}, {'end': 36230.975, 'text': 'this now square bracket, then curly braces.', 'start': 36227.974, 'duration': 3.001}, {'end': 36234.797, 'text': 'section a after section is getting closed.', 'start': 36230.975, 'duration': 3.822}, {'end': 36239.379, 'text': 'we are using another curly braces, marks colon, dollar gt.', 'start': 36234.797, 'duration': 4.582}, {'end': 36246.734, 'text': 'okay, and we are using what colon 80.', 'start': 36241.713, 'duration': 5.021}, {'end': 36251.295, 'text': 'after that we are closing this and using two more curly braces.', 'start': 36246.734, 'duration': 4.561}], 'summary': "Transcript contains 1 call and operator, 1 section, and 1 'what' with 80.", 'duration': 32.845, 'max_score': 36218.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE36218450.jpg'}], 'start': 33536.822, 'title': 'Mongodb operations and aggregation', 'summary': 'Covers mongodb document insertion, multiple operations, crud operations, and querying, indexing basics, and aggregation basics. it demonstrates the process with quantifiable examples, such as inserting multiple records and filtering data using mongodb aggregation functionalities.', 'chapters': [{'end': 33905.868, 'start': 33536.822, 'title': 'Mongodb document insertion', 'summary': 'Explains the process of inserting records into a mongodb document, highlighting the use of primary keys, the underscore id property, and the alternative option for bulk insertion.', 'duration': 369.046, 'highlights': ['The underscore ID property is a unique primary key automatically associated with every MongoDB document, which can be overridden with a custom value.', 'In MongoDB, only the underscore ID property can serve as a primary key, and there is no concept of composite keys as in traditional DBMS.', "The chapter also introduces an alternative option for bulk insertion using the 'var myEmp' concept, demonstrating the addition of multiple records in a single operation."]}, {'end': 34457.54, 'start': 33906.268, 'title': 'Performing multiple operations in mongodb', 'summary': 'Discusses how to insert multiple records, perform updates using predefined functions, update multiple records, and use the upsert feature in mongodb, demonstrating the simplicity and straightforwardness of the operations with quantifiable examples.', 'duration': 551.272, 'highlights': ['The chapter discusses how to insert multiple records in MongoDB in a simple and straightforward manner, demonstrating the insertion of three records with default object IDs. Insertion of three records', "It explains the process of updating records with predefined functions, showcasing the use of the 'update' function and modifying specific properties based on given conditions. Demonstration of updating records", "The concept of updating multiple records is demonstrated, emphasizing the use of 'multi: true' to update multiple search or repetitions, with an example showing the modification of two records. Modification of two records", 'The feature of upsert, a combination of update and insert, is explained, showcasing how it inserts a new record if the specified records are not found during the update process, with quantifiable examples of records matched, inserted, and modified. Demonstration of upsert feature']}, {'end': 35287.568, 'start': 34458.161, 'title': 'Performing crud operations and querying in mongodb', 'summary': 'Covers performing crud operations and querying in mongodb, including adding, removing, and finding records, applying conditions and limits, sorting in ascending and descending order, searching based on embedded properties, and working with indexing.', 'duration': 829.407, 'highlights': ['The chapter covers performing CRUD operations and querying in MongoDB, including adding, removing, and finding records, applying conditions and limits, sorting in ascending and descending order, searching based on embedded properties, and working with indexing.', 'The remove function in MongoDB can eliminate more than one record at the same time, offering flexibility in data management.', 'The find function in MongoDB allows for applying conditions and limits to the query, enabling users to retrieve specific records and control the number of records shown.', 'MongoDB supports sorting in ascending and descending order, providing users with the ability to arrange query results based on specified properties.', 'Searching based on embedded properties in MongoDB is possible, allowing users to retrieve records based on specific embedded attributes.', 'MongoDB allows the use of conditions such as less than, greater than, or equal to when querying, enabling users to filter records based on specific criteria.', 'The use of indexing in MongoDB can significantly impact the performance of queries, especially when dealing with a large number of records, by optimizing the retrieval process.']}, {'end': 35782.269, 'start': 35287.568, 'title': 'Mongodb indexing basics', 'summary': 'Explains the basics of mongodb indexing, including the default index on underscore id, the process of applying indexes on properties, the impact on query performance, and the ability to create, check, and drop indexes, with a focus on improving performance and reducing the number of documents examined.', 'duration': 494.701, 'highlights': ['By default, the total number of documents examined is 3, but after applying an index on a property, the total number of documents examined is reduced to 1, improving performance. After applying an index on a property, the total number of documents examined is reduced from 3 to 1, indicating a performance improvement.', 'Applying an index on multiple properties increases the number of available indexes, thereby improving query performance and allowing for index dropping as needed. Applying an index on multiple properties increases the available indexes, leading to improved query performance and the ability to drop indexes if necessary.', 'The default index is applied on underscore ID, and users can create indexes on specific properties, such as emp name and emp id, to enhance query performance. The default index is applied on underscore ID, and users can create indexes on specific properties, such as emp name and emp id, to enhance query performance.']}, {'end': 36978.577, 'start': 35782.409, 'title': 'Mongodb aggregation basics', 'summary': 'Introduces mongodb aggregation basics, including the use of dollar project and dollar match functionalities, to filter, project and aggregate data from a mongodb collection, showcasing examples of filtering records based on section a, using and operator to filter records with marks greater than 80, and calculating total marks and average marks for each section.', 'duration': 1196.168, 'highlights': ['The chapter introduces MongoDB aggregation basics, including the use of dollar project and dollar match functionalities, to filter, project and aggregate data from a MongoDB collection. The chapter discusses the fundamental concepts of MongoDB aggregation, emphasizing the use of dollar project and dollar match functionalities for filtering, projecting, and aggregating data in a MongoDB collection.', 'Examples of filtering records based on section A, using and operator to filter records with marks greater than 80. The chapter provides examples of using dollar match to filter records based on section A, and demonstrates the use of the and operator to filter records with marks greater than 80.', 'Calculating total marks and average marks for each section using the dollar group functionality. The chapter illustrates the calculation of total marks and average marks for each section using the dollar group functionality, showcasing the use of dollar sum and dollar avg to perform these calculations.']}], 'duration': 3441.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE33536822.jpg', 'highlights': ['The chapter covers performing CRUD operations and querying in MongoDB, including adding, removing, and finding records, applying conditions and limits, sorting in ascending and descending order, searching based on embedded properties, and working with indexing.', 'The chapter introduces MongoDB aggregation basics, including the use of dollar project and dollar match functionalities, to filter, project and aggregate data from a MongoDB collection.', 'Applying an index on multiple properties increases the number of available indexes, thereby improving query performance and allowing for index dropping as needed.', 'The feature of upsert, a combination of update and insert, is explained, showcasing how it inserts a new record if the specified records are not found during the update process, with quantifiable examples of records matched, inserted, and modified.', 'The underscore ID property is a unique primary key automatically associated with every MongoDB document, which can be overridden with a custom value.']}, {'end': 39099.007, 'segs': [{'end': 37868.457, 'src': 'embed', 'start': 37839.707, 'weight': 3, 'content': [{'end': 37845.249, 'text': "The used case we will consider today is of the world's largest sporting goods retail brand, Decathlon.", 'start': 37839.707, 'duration': 5.542}, {'end': 37851.951, 'text': 'Decathlon has 1,600 stores spread in 52 countries with around 100,000 employees.', 'start': 37846.389, 'duration': 5.562}, {'end': 37860.814, 'text': "The IT team of GitHub consists of 1,000 members that helps Decathlon to bring its shopper's journey to their devices.", 'start': 37853.212, 'duration': 7.602}, {'end': 37868.457, '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': 37861.935, 'duration': 6.522}], 'summary': 'Decathlon, with 1,600 stores in 52 countries and 100,000 employees, utilized a 1,000-member it team from github to address their business challenges.', 'duration': 28.75, 'max_score': 37839.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE37839707.jpg'}, {'end': 38186.731, 'src': 'embed', 'start': 38157.778, 'weight': 7, 'content': [{'end': 38162.545, 'text': 'The packages can be easily downloaded from the GitHub to use and reuse them.', 'start': 38157.778, 'duration': 4.767}, {'end': 38166.251, 'text': 'Next feature is the effective team management.', 'start': 38163.687, 'duration': 2.564}, {'end': 38176.402, 'text': "Now, as all the team members can stay updated with all that's happening on the project, so this helps them in staying organized and well coordinated.", 'start': 38167.634, 'duration': 8.768}, {'end': 38182.247, 'text': 'The pull request and other modification tools make sure that the team focuses on the code.', 'start': 38177.042, 'duration': 5.205}, {'end': 38186.731, 'text': 'Moving on, the next feature is improved code writing.', 'start': 38183.388, 'duration': 3.343}], 'summary': 'Github packages aid team in effective code management and improved writing.', 'duration': 28.953, 'max_score': 38157.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38157778.jpg'}, {'end': 38236.494, 'src': 'embed', 'start': 38206.835, 'weight': 4, 'content': [{'end': 38212.339, 'text': "GitHub uses CodeQL, which is the industry's leading semantic code analysis engine.", 'start': 38206.835, 'duration': 5.504}, {'end': 38217.542, 'text': 'This tends to find risks in the code which other tools tend to miss.', 'start': 38213.019, 'duration': 4.523}, {'end': 38222.005, 'text': 'The last feature we shall see is Easy Code Hosting.', 'start': 38218.462, 'duration': 3.543}, {'end': 38226.848, 'text': 'As the name suggests, the codes and documentations are hosted in one place.', 'start': 38222.925, 'duration': 3.923}, {'end': 38236.494, 'text': 'We also know that there are thousands of repositories on GitHub, so each repository has their own set of tools to release and host the code.', 'start': 38227.728, 'duration': 8.766}], 'summary': 'Github uses codeql to find code risks, and offers easy code hosting for thousands of repositories.', 'duration': 29.659, 'max_score': 38206.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38206835.jpg'}, {'end': 38360.079, 'src': 'embed', 'start': 38331.15, 'weight': 11, 'content': [{'end': 38333.592, 'text': 'CSS, on the other hand, is a styling sheet.', 'start': 38331.15, 'duration': 2.442}, {'end': 38339.515, 'text': 'It helps with beautifying the content on your screen in the form of font size, colors and spacing.', 'start': 38334.132, 'duration': 5.383}, {'end': 38343.497, 'text': 'Next crucial necessity is JavaScript.', 'start': 38341.296, 'duration': 2.201}, {'end': 38350.857, 'text': 'It is a powerful client-side programming language mainly used for enhancing user interaction with the application.', 'start': 38344.815, 'duration': 6.042}, {'end': 38356.578, 'text': 'It offers several libraries and frameworks like React, Angular, Vue, and jQuery.', 'start': 38351.397, 'duration': 5.181}, {'end': 38360.079, 'text': 'You need to be proficient in one or more of these tools.', 'start': 38357.238, 'duration': 2.841}], 'summary': 'Css styles content, javascript enhances interaction with libraries like react, angular, vue, and jquery.', 'duration': 28.929, 'max_score': 38331.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38331150.jpg'}, {'end': 38559.708, 'src': 'embed', 'start': 38532.876, 'weight': 15, 'content': [{'end': 38538.499, 'text': 'In India, the average salary of a full-stack developer is about 5,90,000 rupees per annum.', 'start': 38532.876, 'duration': 5.623}, {'end': 38542.982, 'text': 'In the US, the average salary of a full-stack developer is around 75,000 US dollars.', 'start': 38539.58, 'duration': 3.402}, {'end': 38552.881, 'text': 'Now if you wish to make a career as a full-stack developer or wish to look out for better opportunities, a good resume is key.', 'start': 38546.135, 'duration': 6.746}, {'end': 38556.665, 'text': "First, let's look at a sample resume for a fresh graduate.", 'start': 38553.382, 'duration': 3.283}, {'end': 38559.708, 'text': 'First up is personal information.', 'start': 38557.886, 'duration': 1.822}], 'summary': 'Average full-stack developer salaries: india - 5,90,000 inr, us - $75,000', 'duration': 26.832, 'max_score': 38532.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38532876.jpg'}, {'end': 38773.581, 'src': 'embed', 'start': 38747.997, 'weight': 0, 'content': [{'end': 38753.759, 'text': 'So in order to make them notice the best projects you have worked on, you have to include them in proper place in the resume.', 'start': 38747.997, 'duration': 5.762}, {'end': 38761.861, 'text': 'You can include technical projects in your work experience section so that the hiring managers can see them when they examine your resume.', 'start': 38754.399, 'duration': 7.462}, {'end': 38767.523, 'text': 'Also, if you have the prior employment experience, include your programming projects in the extra experience box.', 'start': 38762.401, 'duration': 5.122}, {'end': 38773.581, 'text': 'You can mention the description of the projects, the technologies you have used while creating the project,', 'start': 38768.496, 'duration': 5.085}], 'summary': 'Include technical projects in work experience section of resume to grab attention of hiring managers.', 'duration': 25.584, 'max_score': 38747.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38747997.jpg'}, {'end': 38895.448, 'src': 'embed', 'start': 38865.889, 'weight': 12, 'content': [{'end': 38869.37, 'text': 'Web scrapping is a practice of obtaining information and content from a website.', 'start': 38865.889, 'duration': 3.481}, {'end': 38873.272, 'text': 'It is especially prohibited to do this for publicly unavailable domain.', 'start': 38869.87, 'duration': 3.402}, {'end': 38876.893, 'text': 'Including web scrapping skills on your resume can be a valuable asset.', 'start': 38873.832, 'duration': 3.061}, {'end': 38882.201, 'text': 'particularly if you are interested in careers in data analysis, data mining, or software development.', 'start': 38877.498, 'duration': 4.703}, {'end': 38887.523, 'text': 'Web scrapping can be a useful tool for collecting and organizing data from a variety of sources.', 'start': 38883.061, 'duration': 4.462}, {'end': 38891.966, 'text': 'Python web scrapping projects are popular among beginners these days.', 'start': 38888.704, 'duration': 3.262}, {'end': 38895.448, 'text': 'Our channel already includes a Python web scrapping tutorial.', 'start': 38892.646, 'duration': 2.802}], 'summary': 'Web scraping is valuable for data analysis and software development. python projects are popular.', 'duration': 29.559, 'max_score': 38865.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38865889.jpg'}, {'end': 38944.883, 'src': 'embed', 'start': 38904.075, 'weight': 1, 'content': [{'end': 38907.536, 'text': 'As a web developer using search inputs is an important skill to have.', 'start': 38904.075, 'duration': 3.461}, {'end': 38911.137, 'text': 'So consider adding an API to your list of programming projects.', 'start': 38908.036, 'duration': 3.101}, {'end': 38918.759, 'text': 'API or application programming interface which is an intermediate between software that allows two apps to interact with one another.', 'start': 38911.917, 'duration': 6.842}, {'end': 38924.221, 'text': 'APIs provide an easy way to retrieve and distribute data within and across companies.', 'start': 38920.197, 'duration': 4.024}, {'end': 38930.888, 'text': "There are a lot of APIs available on the internet, including Twitter's API, Amazon API, and various other APIs.", 'start': 38924.682, 'duration': 6.206}, {'end': 38939.701, 'text': 'Creating an API based project allows you to manipulate data, understand client server architecture and obtain data from HTTP servers.', 'start': 38931.818, 'duration': 7.883}, {'end': 38944.883, 'text': 'It is necessary to have basic programming knowledge to create this type of project,', 'start': 38940.662, 'duration': 4.221}], 'summary': 'Web developers should consider adding an api to their projects to interact with other apps and manipulate data.', 'duration': 40.808, 'max_score': 38904.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38904075.jpg'}, {'end': 39017.918, 'src': 'embed', 'start': 38993.579, 'weight': 9, 'content': [{'end': 38999.564, 'text': 'Not only that, using game engine software such as Unity, Visual Studio or Unreal Engine,', 'start': 38993.579, 'duration': 5.985}, {'end': 39003.887, 'text': 'you can modify or develop an original game with unique 3D characters and storylines.', 'start': 38999.564, 'duration': 4.323}, {'end': 39012.573, 'text': 'Overall, a game project can be an excellent addition to your resume because it showcases various technical talents in great demand in the gaming business.', 'start': 39004.387, 'duration': 8.186}, {'end': 39017.918, 'text': 'It can also be a great opportunity to demonstrate your creativity and passion for game development.', 'start': 39013.434, 'duration': 4.484}], 'summary': 'Game projects showcase technical talents in demand and demonstrate creativity and passion for game development.', 'duration': 24.339, 'max_score': 38993.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE38993579.jpg'}, {'end': 39080.443, 'src': 'embed', 'start': 39037.252, 'weight': 16, 'content': [{'end': 39042.336, 'text': 'To make one, you can use a popular programming language such as Python, Java, or PHP.', 'start': 39037.252, 'duration': 5.084}, {'end': 39048.678, 'text': 'These are significant commercial projects and the recruiting manager would like to learn more about you.', 'start': 39043.517, 'duration': 5.161}, {'end': 39053.379, 'text': 'Now coming to the next project which is an e-commerce project.', 'start': 39050.298, 'duration': 3.081}, {'end': 39059.78, 'text': 'So the majority of the websites and application with which we interact are an e-commerce platforms.', 'start': 39054.479, 'duration': 5.301}, {'end': 39063.601, 'text': 'An e-commerce websites is one that allows you to buy things online.', 'start': 39060.54, 'duration': 3.061}, {'end': 39071.662, 'text': 'Some examples of e-commerce website is Flipkart, Amazon, Zomato, Oyo, Big Basket, Grofers etc.', 'start': 39064.461, 'duration': 7.201}, {'end': 39080.443, 'text': 'Including an e-commerce project on your resume can be a perfect way to demonstrate your technical skills and experience working on a complex project.', 'start': 39073.041, 'duration': 7.402}], 'summary': 'E-commerce project experience is valuable for showcasing technical skills. examples include flipkart and amazon.', 'duration': 43.191, 'max_score': 39037.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE39037252.jpg'}], 'start': 36978.577, 'title': 'Mongodb, decathlon, and full-stack developer', 'summary': "Covers mongodb replication, cluster creation, network and database access setup, decathlon's github transformation, and the role of a full-stack developer including salary and resume building.", 'chapters': [{'end': 37357.241, 'start': 36978.577, 'title': 'Mongodb replication and cluster creation', 'summary': 'Discusses the concept of mongodb replication, highlighting the master-slave structure, the availability of mongodb atlas as a free cloud-based tool for cluster creation, and the configuration of a cluster with primary and secondary nodes, enabling automatic data replication and read-write operations.', 'duration': 378.664, 'highlights': ['MongoDB Atlas is a free cloud-based tool for cluster creation, suitable for testing purposes, offering a limited amount of space but requiring no installation of MongoDB on the local machine. MongoDB Atlas provides a free cloud environment for cluster creation, allowing testing without the need for local installation and offering limited space.', 'The master-slave structure in MongoDB replication features a master responsible for replicating data to multiple slaves, ensuring high availability and automatic data retrieval from other nodes in case of node failure. The master-slave structure in MongoDB replication ensures high availability and automatic data retrieval from other nodes in case of node failure.', 'MongoDB clusters are configured with a primary node (master) and multiple secondary nodes (slaves), enabling automatic data replication and read-write operations, with the primary node responsible for data insertion and the secondary nodes for data reading. MongoDB clusters are configured with a primary node (master) and multiple secondary nodes (slaves), enabling automatic data replication and read-write operations.']}, {'end': 37838.862, 'start': 37357.881, 'title': 'Setting up mongodb: network and database access', 'summary': 'Explains the steps to set up network and database access in mongodb, including whitelisting ip addresses, creating new users, databases, collections, and connecting to the mongodb compass and shell. it also includes a demonstration of creating a new collection and inserting records.', 'duration': 480.981, 'highlights': ['The process of setting up network access by whitelisting IP addresses or allowing all IP addresses for MongoDB, ensuring enabling it for access from third-party locations. IP whitelisting, enabling network access from third-party locations', 'The importance of creating new users for database access in MongoDB, including the steps to add a new user with a username and password. Creating new users for database access', 'Demonstration of creating a new database and collection in MongoDB, including the steps to create a new database and collection, and a quick demo of creating a collection with a specific name and username. Creating a new database and collection, demo of creating a collection with a specific name and username', 'Connecting to MongoDB compass and shell, including the process of connecting to MongoDB compass and using the mongo shell to connect with a username and password. Connecting to MongoDB compass and shell, using mongo shell with username and password', 'Demonstration of inserting records into a collection, including the process of adding records into a collection and verifying the added records. Inserting records into a collection']}, {'end': 38255.128, 'start': 37839.707, 'title': "Decathlon's github transformation", 'summary': 'Discusses how decathlon, with 1,600 stores in 52 countries and 100,000 employees, overcame challenges by transitioning to github, an open source community, for better workflow visibility, global developer collaboration, and enhanced code management and safety.', 'duration': 415.421, 'highlights': ['Transition to GitHub Decathlon, with 1,600 stores in 52 countries and 100,000 employees, overcame challenges by transitioning to GitHub, which improved workflow visibility and allowed global developer collaboration.', 'Global Developer Collaboration GitHub facilitated collaboration with developers worldwide, enabling potential contributors to benefit the global community, thereby resolving the challenge of hiring developers in various locations.', 'Version Control System and Git The version control system and Git simplified software development, provided easy source code management, and allowed for easy collaboration and merging of changes, particularly beneficial for large projects and multiple contributors.', 'GitHub Features GitHub offers various features including easy project management, increased code safety, improved code writing, and effective team management, enhancing coordination, code quality, and overall project efficiency.', 'Competitors of GitHub Competitors of GitHub include Atlassian Bitbucket, FugBugs, SurroundSCM, and GitLab, highlighting the competitive landscape of code hosting and collaboration platforms.']}, {'end': 38559.708, 'start': 38255.909, 'title': 'Full-stack developer: skills, salary & resume', 'summary': 'Explores the role of a full-stack developer, detailing the necessary skills including front-end development, version control, backend skills, and soft skills. it also reveals the average salary of a full-stack developer in india and the us, and provides guidance on building a resume for fresh graduates.', 'duration': 303.799, 'highlights': ['The average salary of a full-stack developer in the US is around 75,000 US dollars per annum, while in India, it is about 5,90,000 rupees per annum. The average annual salary for full-stack developers in the US and India is 75,000 USD and 5,90,000 INR respectively.', 'Front-end development skills include proficiency in HTML, CSS, and JavaScript, along with knowledge of libraries and frameworks like React, Angular, Vue, and jQuery. Front-end development skills encompass proficiency in HTML, CSS, and JavaScript, including knowledge of frameworks such as React, Angular, Vue, and jQuery.', 'Back-end skills encompass knowledge of Node.js, Python, and databases such as Cassandra, MongoDB, and Oracle Database, as well as understanding of version control systems like Git and GitHub. Back-end skills include knowledge of Node.js, Python, and databases like Cassandra, MongoDB, and Oracle, along with understanding version control systems like Git and GitHub.', 'Soft skills required for full-stack developers include creativity, strategic planning, analytical skills, problem-solving skills, and time management skills. Soft skills necessary for full-stack developers include creativity, strategic planning, analytical skills, problem-solving skills, and time management skills.', 'The chapter provides guidance on building a resume for fresh graduates, starting with personal information. The chapter offers guidance on creating a resume for fresh graduates, commencing with personal information.']}, {'end': 39099.007, 'start': 38560.028, 'title': 'Adding programming projects to your resume', 'summary': 'Discusses the importance of adding programming projects to a resume, emphasizing the types of projects like portfolio, web scrapping, api based, games, e-commerce, and their significance in showcasing technical skills and experience, enabling candidates to stand out from the crowd in the recruitment process.', 'duration': 538.979, 'highlights': ['Including portfolio projects on your resume can be especially valuable if you apply for a creative field such as design, writing or marketing. Portfolio projects on the resume are beneficial for creative fields, showcasing tangible examples of work.', 'Web scrapping is a practice of obtaining information and content from a website. Including web scrapping skills on your resume can be a valuable asset, particularly if you are interested in careers in data analysis, data mining, or software development. Web scrapping skills on the resume are valuable, especially for careers in data-related fields.', 'Creating an API based project allows you to manipulate data, understand client server architecture and obtain data from HTTP servers. It is necessary to have basic programming knowledge to create this type of project, and it will take around two to three weeks to complete this project. API based projects demonstrate the ability to manipulate data and understand client-server architecture, requiring basic programming knowledge and taking two to three weeks to complete.', 'A game project can showcase various skills, such as programming skills, game design skills, graphic design skills and project management skills. Game projects can display a range of skills, including programming, game design, graphic design, and project management.', 'Including an e-commerce project on your resume can be a perfect way to demonstrate your technical skills and experience working on a complex project. E-commerce projects on the resume demonstrate technical skills and experience in handling complex projects.']}], 'duration': 2120.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE36978577.jpg', 'highlights': ['MongoDB Atlas provides a free cloud environment for cluster creation, allowing testing without the need for local installation and offering limited space.', 'The master-slave structure in MongoDB replication ensures high availability and automatic data retrieval from other nodes in case of node failure.', 'MongoDB clusters are configured with a primary node (master) and multiple secondary nodes (slaves), enabling automatic data replication and read-write operations.', 'IP whitelisting, enabling network access from third-party locations', 'Creating new users for database access', 'Demonstration of creating a new database and collection in MongoDB, including the steps to create a new database and collection, and a quick demo of creating a collection with a specific name and username', 'Connecting to MongoDB compass and shell, using mongo shell with username and password', 'Demonstration of inserting records into a collection', 'GitHub facilitated collaboration with developers worldwide, enabling potential contributors to benefit the global community, thereby resolving the challenge of hiring developers in various locations.', 'The version control system and Git simplified software development, provided easy source code management, and allowed for easy collaboration and merging of changes, particularly beneficial for large projects and multiple contributors.', 'GitHub offers various features including easy project management, increased code safety, improved code writing, and effective team management, enhancing coordination, code quality, and overall project efficiency.', 'The average annual salary for full-stack developers in the US and India is 75,000 USD and 5,90,000 INR respectively.', 'Front-end development skills encompass proficiency in HTML, CSS, and JavaScript, including knowledge of frameworks such as React, Angular, Vue, and jQuery.', 'Back-end skills include knowledge of Node.js, Python, and databases like Cassandra, MongoDB, and Oracle, along with understanding version control systems like Git and GitHub.', 'Soft skills necessary for full-stack developers include creativity, strategic planning, analytical skills, problem-solving skills, and time management skills.', 'The chapter offers guidance on creating a resume for fresh graduates, commencing with personal information.', 'Portfolio projects on the resume are beneficial for creative fields, showcasing tangible examples of work.', 'Web scrapping skills on the resume are valuable, especially for careers in data-related fields.', 'API based projects demonstrate the ability to manipulate data and understand client-server architecture, requiring basic programming knowledge and taking two to three weeks to complete.', 'Game projects can display a range of skills, including programming, game design, graphic design, and project management.', 'E-commerce projects on the resume demonstrate technical skills and experience in handling complex projects.']}, {'end': 40148.906, 'segs': [{'end': 39699.713, 'src': 'embed', 'start': 39650.377, 'weight': 1, 'content': [{'end': 39655.819, 'text': 'in a content box these are the default width and the height which can apply to the elements.', 'start': 39650.377, 'duration': 5.442}, {'end': 39658.6, 'text': 'content which are there under the content box.', 'start': 39655.819, 'duration': 2.781}, {'end': 39660.901, 'text': 'okay, padding box are here.', 'start': 39658.6, 'duration': 2.301}, {'end': 39667.204, 'text': 'you talk about the dimensions which are added to the box elements of the content padding.', 'start': 39660.901, 'duration': 6.303}, {'end': 39669.264, 'text': 'third, which is available, called border box.', 'start': 39667.204, 'duration': 2.06}, {'end': 39672.926, 'text': 'so here the dimensions added to the content padding and the border.', 'start': 39669.264, 'duration': 3.662}, {'end': 39675.785, 'text': 'now what are the difference?', 'start': 39674.844, 'duration': 0.941}, {'end': 39678.667, 'text': 'way to hide the element in a css.', 'start': 39675.785, 'duration': 2.882}, {'end': 39680.209, 'text': 'so we have a different way either.', 'start': 39678.667, 'duration': 1.542}, {'end': 39682.331, 'text': 'we can use display none.', 'start': 39680.209, 'duration': 2.122}, {'end': 39684.472, 'text': 'that means whatever is there inside the dom.', 'start': 39682.331, 'duration': 2.141}, {'end': 39685.533, 'text': "it won't be visible to you.", 'start': 39684.472, 'duration': 1.061}, {'end': 39690.418, 'text': 'second option is visibility hidden.', 'start': 39685.533, 'duration': 4.885}, {'end': 39696.411, 'text': 'that is another property through which you can Eliminate the visibility.', 'start': 39690.418, 'duration': 5.993}, {'end': 39699.713, 'text': 'but the thing is like it is not visible to the user.', 'start': 39696.411, 'duration': 3.302}], 'summary': 'Discussion on content box, padding box, and border box dimensions in css, along with methods to hide elements using display none and visibility hidden.', 'duration': 49.336, 'max_score': 39650.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE39650377.jpg'}, {'end': 39775.917, 'src': 'embed', 'start': 39747.977, 'weight': 0, 'content': [{'end': 39755.099, 'text': 'So when you talk about PID equal to what thing, so it automatically tried to override the highest precedence.', 'start': 39747.977, 'duration': 7.122}, {'end': 39760.453, 'text': 'okay, now what are the css sprites?', 'start': 39756.952, 'duration': 3.501}, {'end': 39767.575, 'text': 'css sprites is a technique where you can basically take a larger image.', 'start': 39760.453, 'duration': 7.122}, {'end': 39775.917, 'text': 'okay, download in a single shot and try to cut down into the pieces and utilize the way you always want.', 'start': 39767.575, 'duration': 8.342}], 'summary': 'Discussion on pid, css sprites, and image optimization technique.', 'duration': 27.94, 'max_score': 39747.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE39747977.jpg'}, {'end': 40129.537, 'src': 'embed', 'start': 40104.242, 'weight': 9, 'content': [{'end': 40112.212, 'text': "there's another function called, You can say DIAG, which you are exporting it and importing it just the way you always want.", 'start': 40104.242, 'duration': 7.97}, {'end': 40115.978, 'text': 'So that is how it is importing and exporting.', 'start': 40112.332, 'duration': 3.646}, {'end': 40121.553, 'text': 'What is the difference between undefined, undeclared and null in a JavaScript?', 'start': 40117.731, 'duration': 3.822}, {'end': 40127.956, 'text': 'See, undefined means a variable that is declared but the value has not been assigned yet.', 'start': 40122.473, 'duration': 5.483}, {'end': 40129.537, 'text': 'That is called undefined.', 'start': 40128.456, 'duration': 1.081}], 'summary': 'Javascript: understand the differences between undefined, undeclared, and null variables.', 'duration': 25.295, 'max_score': 40104.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE40104242.jpg'}], 'start': 39100.051, 'title': 'Html, css, and javascript in web development', 'summary': 'Covers html interview questions, attributes, the mark element, html semantics, svg, css styling, advanced css like sass, less, and stylus, css sprites for optimizing web page loading time, and various javascript concepts including data types, callbacks, closures, and imports/exports.', 'chapters': [{'end': 39173.864, 'start': 39100.051, 'title': 'Html interview questions', 'summary': 'Discusses html interview questions, covering topics such as attributes and the mark element, highlighting the definition and usage of attributes and the purpose of the mark element in html.', 'duration': 73.813, 'highlights': ['The mark element in HTML is used to display important information that needs to scroll at the bottom or after a specific period of time, and it is an old element available under the HTML page.', 'Attributes in HTML are properties that can be added into the HTML tag, changing the way the tag behaves or is displayed, and they are added right after the name of the HTML tag.']}, {'end': 39729.15, 'start': 39175.405, 'title': 'Html semantics, svg, css styling, and advanced css', 'summary': 'Covers html semantics, svg, css styling, and advanced css including detailed explanations of semantics usage, svg features, table layout in html, css styling techniques, and advanced css such as sass, less, and stylus.', 'duration': 553.745, 'highlights': ['The chapter covers HTML semantics, including the usage of div, span, strong, em, table tag, and SVG. It explains the reinforcement of content meaning using standard tags like div, span, strong, em, and table tag, and the features of SVG for high-quality graphics.', 'Detailed explanation of creating a table layout in an HTML webpage and features of SVG for high-quality graphics. It provides a detailed explanation of creating a table layout in an HTML webpage using table, table head, table body, table row, and table columns, and the features of SVG for high-quality graphics that do not deteriorate when zoomed.', 'Understanding the usage of different CSS styling techniques including inline CSS, external style sheet, internal style sheet, and various CSS selectors. It explains the different ways of adding CSS styling in HTML including inline CSS, external style sheet, internal style sheet, and various CSS selectors like universal, element type, ID, class, descendant, child combinator, general sibling, and attribute selectors.', "Explanation of advanced CSS features including SASS, LESS, and stylus and the differences among them. It covers advanced CSS features such as SASS, LESS, and stylus, explaining SASS as 'systematically awesome style sheet' offering mathematical functions, LESS as a linear style sheet using statements starting with @ sign, and stylus as a flexible CSS without using @ or $ for defining variables."]}, {'end': 40148.906, 'start': 39729.89, 'title': 'Css, javascript and web technologies', 'summary': 'Discusses the important keyword in css, css sprites for optimizing web page loading time, and various javascript concepts including data types, callbacks, closures, and imports/exports.', 'duration': 419.016, 'highlights': ['CSS sprites technique CSS sprites is a technique to combine multiple smaller pictures into a single image, reducing the loading time of a web page by minimizing the number of HTTP calls.', 'JavaScript data types JavaScript supports various data types such as byte, short int, long, float, double, character, and boolean.', 'JavaScript callbacks A callback in JavaScript is a function passed as an argument to another function, used to prevent non-blocking behavior and code execution delays.', 'Cookies in JavaScript Cookies in JavaScript are created by the server, stored in the client side, and used to store necessary client activities for providing better user recommendations.', "Closures in JavaScript Closures in JavaScript allow inner functions to access outer function's variables and properties, providing access to its own scope, outer function variables, and global variables.", 'Imports and exports in JavaScript In JavaScript, import and export statements are used to access file properties or methods outside of the file, allowing the export of specific properties or functions for import in other files.', 'Important keyword in CSS The important keyword in CSS indicates the highest precedence, overriding cascade properties, and is used to override specific styles in HTML elements.']}], 'duration': 1048.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE39100051.jpg', 'highlights': ['The mark element in HTML is used to display important information that needs to scroll at the bottom or after a specific period of time, and it is an old element available under the HTML page.', 'Attributes in HTML are properties that can be added into the HTML tag, changing the way the tag behaves or is displayed, and they are added right after the name of the HTML tag.', 'The chapter covers HTML semantics, including the usage of div, span, strong, em, table tag, and SVG. It explains the reinforcement of content meaning using standard tags like div, span, strong, em, and table tag, and the features of SVG for high-quality graphics.', 'Understanding the usage of different CSS styling techniques including inline CSS, external style sheet, internal style sheet, and various CSS selectors. It explains the different ways of adding CSS styling in HTML including inline CSS, external style sheet, internal style sheet, and various CSS selectors like universal, element type, ID, class, descendant, child combinator, general sibling, and attribute selectors.', "Explanation of advanced CSS features including SASS, LESS, and stylus and the differences among them. It covers advanced CSS features such as SASS, LESS, and stylus, explaining SASS as 'systematically awesome style sheet' offering mathematical functions, LESS as a linear style sheet using statements starting with @ sign, and stylus as a flexible CSS without using @ or $ for defining variables.", 'CSS sprites technique CSS sprites is a technique to combine multiple smaller pictures into a single image, reducing the loading time of a web page by minimizing the number of HTTP calls.', 'JavaScript data types JavaScript supports various data types such as byte, short int, long, float, double, character, and boolean.', 'JavaScript callbacks A callback in JavaScript is a function passed as an argument to another function, used to prevent non-blocking behavior and code execution delays.', "Closures in JavaScript Closures in JavaScript allow inner functions to access outer function's variables and properties, providing access to its own scope, outer function variables, and global variables.", 'Imports and exports in JavaScript In JavaScript, import and export statements are used to access file properties or methods outside of the file, allowing the export of specific properties or functions for import in other files.']}, {'end': 42774.544, 'segs': [{'end': 40177.501, 'src': 'embed', 'start': 40150.467, 'weight': 0, 'content': [{'end': 40158.511, 'text': 'How to remove the duplication from the JavaScript array? So, you basically need to use the standard filter methods.', 'start': 40150.467, 'duration': 8.044}, {'end': 40166.054, 'text': 'Okay, this is basically responsible to help you to analyze whether we have some duplicates available or not.', 'start': 40159.151, 'duration': 6.903}, {'end': 40170.093, 'text': "so we'll be using using filter methods.", 'start': 40167.029, 'duration': 3.064}, {'end': 40177.501, 'text': 'okay, so these are basically known as called array and the current element and the index of current element, and by using the for loop,', 'start': 40170.093, 'duration': 7.408}], 'summary': 'Use filter method to remove duplication from javascript array.', 'duration': 27.034, 'max_score': 40150.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE40150467.jpg'}, {'end': 40294.951, 'src': 'embed', 'start': 40242.551, 'weight': 1, 'content': [{'end': 40251.922, 'text': 'so it is used to Typically keep the model and view in sync with each other to have the data interchange.', 'start': 40242.551, 'duration': 9.371}, {'end': 40252.823, 'text': 'What is the typescript.', 'start': 40251.922, 'duration': 0.901}, {'end': 40263.454, 'text': 'typescript is a typical, I would say, a language which is used by angular okay to develop angular component services, pipes,', 'start': 40252.823, 'duration': 10.631}, {'end': 40270.761, 'text': 'decorators and multiple things, and it is a super set of javascript and it supports javascript libraries and apis.', 'start': 40263.454, 'duration': 7.307}, {'end': 40277.166, 'text': 'it is a pure object oriented in nature, uses object oriented principles, better development time,', 'start': 40270.761, 'duration': 6.405}, {'end': 40280.929, 'text': 'fast to load and additional features to the javascript, for sure.', 'start': 40277.166, 'duration': 3.763}, {'end': 40284.74, 'text': 'Okay, what is an AOT compilation?', 'start': 40282.358, 'duration': 2.382}, {'end': 40286.102, 'text': 'How it is different from JIT?', 'start': 40284.801, 'duration': 1.301}, {'end': 40294.951, 'text': 'AOT stands for ahead of time compiler, which is converting all Angular and HTML and TypeScript code into the JavaScript code during the build phase,', 'start': 40286.342, 'duration': 8.609}], 'summary': 'Typescript is a language used by angular for developing components, services, and pipes. aot compilation converts angular code into javascript during the build phase.', 'duration': 52.4, 'max_score': 40242.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE40242551.jpg'}, {'end': 40425.707, 'src': 'embed', 'start': 40396.531, 'weight': 7, 'content': [{'end': 40400.778, 'text': 'A single instance of the pure pipe is used throughout all components.', 'start': 40396.531, 'duration': 4.247}, {'end': 40406.468, 'text': 'okay. so this is how you see how that pipes are being used.', 'start': 40402.423, 'duration': 4.045}, {'end': 40415.277, 'text': 'so we have defined the pipe okay, which is the value called true and false for the pure, and giving the class by implementing pipe transform.', 'start': 40406.468, 'duration': 8.809}, {'end': 40425.707, 'text': 'so you can see here the impure pipes for the say, for every change detection actually happens in an angular And impure is called.', 'start': 40415.277, 'duration': 10.43}], 'summary': 'A single pure pipe is used throughout all components.', 'duration': 29.176, 'max_score': 40396.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE40396531.jpg'}, {'end': 40521.007, 'src': 'embed', 'start': 40491.468, 'weight': 9, 'content': [{'end': 40496.071, 'text': 'these are two predefined objects comes with your angular.', 'start': 40491.468, 'duration': 4.603}, {'end': 40499.643, 'text': 'so these all text boxes from you.', 'start': 40496.071, 'duration': 3.572}, {'end': 40500.423, 'text': 'take the input.', 'start': 40499.643, 'duration': 0.78}, {'end': 40506.364, 'text': 'it may be radio buttons, it may be the drop down, it may be the check boxes are called form controls.', 'start': 40500.423, 'duration': 5.941}, {'end': 40514.386, 'text': 'okay, so form controls is a class that enables the validation for every single input class, whichever you are creating it now.', 'start': 40506.364, 'duration': 8.022}, {'end': 40521.007, 'text': 'so they check the values which are touched, untouched or the dirty clear.', 'start': 40514.386, 'duration': 6.621}], 'summary': 'Angular provides predefined form controls for input validation and tracking input states.', 'duration': 29.539, 'max_score': 40491.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE40491468.jpg'}, {'end': 40605.653, 'src': 'embed', 'start': 40581.053, 'weight': 5, 'content': [{'end': 40592.699, 'text': "so in a bigger application we really don't make easy eager loading because it hamper the performance and you want only when the client asks you want to use lazy loading.", 'start': 40581.053, 'duration': 11.646}, {'end': 40594.2, 'text': 'what is the string interpolation?', 'start': 40592.699, 'duration': 1.501}, {'end': 40598.551, 'text': 'in angular, See string interpolation is written under the double curly braces.', 'start': 40594.2, 'duration': 4.351}, {'end': 40605.653, 'text': 'It is a typically one way binding where you get the data from the TypeScript classes and display directly over your browser.', 'start': 40599.171, 'duration': 6.482}], 'summary': "In large applications, use lazy loading for better performance. angular's string interpolation displays data from typescript classes in double curly braces.", 'duration': 24.6, 'max_score': 40581.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE40581053.jpg'}, {'end': 41105.704, 'src': 'embed', 'start': 41082.107, 'weight': 8, 'content': [{'end': 41093.75, 'text': "We'll see this later on and you may want to talk a little bit about using ExpressJS and how you can build out APIs to work with Node.js and connecting to databases such as MongoDB.", 'start': 41082.107, 'duration': 11.643}, {'end': 41105.704, 'text': 'And that is also really good for being able to store data intensive applications that are asynchronous and event driven in their model.', 'start': 41095.552, 'duration': 10.152}], 'summary': 'Expressjs enables building apis for data-intensive, asynchronous applications with mongodb.', 'duration': 23.597, 'max_score': 41082.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE41082107.jpg'}], 'start': 40150.467, 'title': 'Javascript, angular, react, and node.js', 'summary': 'Discusses javascript array duplication removal, angular interview insights, and react key concepts, including aot compiler, pipes, promises, observables, node.js key points, technologies, pros, cons, and package.json importance.', 'chapters': [{'end': 40321.17, 'start': 40150.467, 'title': 'Javascript array duplication removal & angular interview insights', 'summary': 'Discusses the removal of duplication from a javascript array using filter methods and provides insights into angular interviews, covering topics such as data binding, typescript, aot compilation, and jit compilation.', 'duration': 170.703, 'highlights': ['The chapter discusses the removal of duplication from a JavaScript array using filter methods The standard filter method is used to analyze and remove duplicates from a JavaScript array, facilitating the identification and storage of repeated elements.', 'Insights into angular interviews covering data binding, TypeScript, AOT compilation, and JIT compilation Insights into angular interviews are provided, including explanations of data binding, TypeScript, AOT compilation, and JIT compilation, highlighting their significance in angular development.', 'Explanation of two-way data binding in Angular Angular uses two-way data binding to synchronize model and view, effecting changes in both when one is altered, facilitating seamless data interchange.']}, {'end': 40950.154, 'start': 40321.19, 'title': 'Angular and react: key concepts', 'summary': 'Covers key concepts in angular and react, such as aot compiler, pipes, promises, observables, form controls, eager and lazy loading, string interpolation, jsx, virtual dom, react extensions, event handling, components, state, and higher order components and pure components.', 'duration': 628.964, 'highlights': ['Eager and lazy loading concepts in Angular Eager loading is the default module loading strategy in Angular and is used before the application starts, while lazy loading is designed for dynamic loading of features only on demand, making the application faster.', 'State in React and its management State in React stores values for a specific period of time and changes due to user or application actions, and it is managed through the set state method, rendering, and updating the state.', 'Virtual DOM in React Virtual DOM in React represents a DOM in memory, making updates more efficient by comparing the previous state and identifying specific areas for updates, resulting in faster page loads.', 'Pipes and pure functions in Angular Pipes in Angular are used for representation purposes and can be predefined or customized, with pure pipes using pure functions and not maintaining internal state, ensuring consistent output with parameter changes.']}, {'end': 41793.631, 'start': 40950.154, 'title': 'Node.js interview: key points & technologies', 'summary': 'Covers key aspects of node.js for interviews, including its definition, applications, working mechanism, npm, modules, and comparisons with other technologies, emphasizing its speed, flexibility, and common language with javascript.', 'duration': 843.477, 'highlights': ['Node.js is a popular open-source cross-platform JavaScript program for building server-side web applications and DevOps solutions. Node.js is described as one of the most popular open-source cross-platform JavaScript programs used for building out web applications that run on the server, allowing flexibility and quick solution implementation.', 'Node.js is built on the V8 JavaScript engine, offering high output, non-blocking IO, and a single-threaded event loop. Node.js is built on the V8 engine, providing high output and non-blocking IO, which is crucial for applications that need to scale rapidly.', 'Node.js allows for connecting to databases such as MongoDB, suitable for data-intensive and scalable applications. Node.js enables connecting to databases like MongoDB, beneficial for creating data-intensive applications that can scale rapidly.', 'Node.js uses Node Package Manager (NPM) to manage online repositories of modules and packages, providing over 50,000 bundles. Node.js uses NPM to manage online repositories of modules and packages, offering over 50,000 bundles for quick solution development.', 'Node.js is preferred over backend technologies like Java and PHP due to its speed, NPM functionality, and easy synchronization between the server and client. Node.js is preferred over backend technologies like Java and PHP due to its speed, NPM functionality, and easy synchronization between the server and client.']}, {'end': 42231.381, 'start': 41795.717, 'title': 'Node.js: pros, cons, and key concepts', 'summary': 'Discusses the advantages and disadvantages of using node.js, including its speed, event-driven model, and challenges with heavy computational tasks, as well as key concepts such as event-driven programming, event loop, event emitter, and api functions.', 'duration': 435.664, 'highlights': ['Node.js is extremely fast at processing an event-based model. Node.js is lauded for its high speed in processing an event-based model, showcasing its efficiency in handling events.', "Node Package Manager offers access to over 50,000 packages, providing a wide range of functionality. The Node Package Manager's extensive library of over 50,000 packages demonstrates the vast range of functionality available, enabling diverse solutions.", 'Node.js is designed for streaming huge amounts of data in and out. Node.js is specifically designed for efficiently handling large volumes of data streaming in and out, emphasizing its suitability for data-intensive applications.', 'The drawbacks of Node.js include challenges with heavy computational tasks and working with relational databases. Node.js presents challenges in handling heavy computational tasks and working with relational databases, requiring alternative approaches for these specific scenarios.', 'Event driven programming means that if something happens, something else will happen in response, exemplifying cause and effect. Event-driven programming involves actions triggering corresponding reactions, akin to a cause-and-effect relationship, showcasing the fundamental principle of this programming paradigm.']}, {'end': 42774.544, 'start': 42233.052, 'title': 'Understanding package.json in node.js', 'summary': 'Explains the importance of package.json in node.js, covering metadata details such as project name, version, and requirements, as well as practical usage of url module, expressjs, streams, dependency management, synchronous and non-blocking apis, async implementation, and module exports.', 'duration': 541.492, 'highlights': ['Practical Usage of URL Module The URL module in Node.js allows for resolution passing of a URL for utilities, and it enables the splitting up of web addresses into a readable format, providing a tangible example of its functionality.', 'Importance of package.json Metadata The metadata in package.json includes key details such as project name, version, description, and the main or starting part for the solution, highlighting the essential information stored in the package.json file.', 'Practical Usage of ExpressJS ExpressJS is a web application framework that simplifies building web solutions for both mobile and traditional desktop right inside of Node.js, demonstrated through a clear example of building a solution with ExpressJS.', 'Understanding Streams in Node.js Streams in Node.js allow continuous reading and writing of data, categorized into readable, writable, duplex, and transform streams, providing a fundamental understanding of how data is managed within applications.', 'Dependency Management in Node.js The process of updating and deleting dependencies in Node.js is explained, including the commands for installation, update, and uninstallation, offering practical guidance for managing dependencies.', 'Asynchronous Implementation in Node.js The usage of async functions in Node.js is highlighted, showcasing its quick and efficient application for asynchronous code and error handling, providing a clear example of its practical implementation.', 'Module Exports in Node.js Module exports are explained as a way to encapsulate and share the entire code for a solution, promoting collaboration and code reuse among developers, emphasizing the benefits of encapsulation and collaboration in Node.js development.']}], 'duration': 2624.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/R6RX2Zx96fE/pics/R6RX2Zx96fE40150467.jpg', 'highlights': ['Node.js uses Node Package Manager (NPM) to manage online repositories of modules and packages, providing over 50,000 bundles.', 'Node.js is preferred over backend technologies like Java and PHP due to its speed, NPM functionality, and easy synchronization between the server and client.', 'Node.js is built on the V8 JavaScript engine, offering high output, non-blocking IO, and a single-threaded event loop.', 'Node.js enables connecting to databases like MongoDB, beneficial for creating data-intensive applications that can scale rapidly.', 'Node.js is lauded for its high speed in processing an event-based model, showcasing its efficiency in handling events.', "The Node Package Manager's extensive library of over 50,000 packages demonstrates the vast range of functionality available, enabling diverse solutions.", 'Node.js is specifically designed for efficiently handling large volumes of data streaming in and out, emphasizing its suitability for data-intensive applications.', 'Event-driven programming involves actions triggering corresponding reactions, akin to a cause-and-effect relationship, showcasing the fundamental principle of this programming paradigm.', 'The metadata in package.json includes key details such as project name, version, description, and the main or starting part for the solution, highlighting the essential information stored in the package.json file.', 'Streams in Node.js allow continuous reading and writing of data, categorized into readable, writable, duplex, and transform streams, providing a fundamental understanding of how data is managed within applications.', 'Module exports are explained as a way to encapsulate and share the entire code for a solution, promoting collaboration and code reuse among developers, emphasizing the benefits of encapsulation and collaboration in Node.js development.', 'Insights into angular interviews covering data binding, TypeScript, AOT compilation, and JIT compilation.', 'Eager and lazy loading concepts in Angular.', 'State in React stores values for a specific period of time and changes due to user or application actions, and it is managed through the set state method, rendering, and updating the state.', 'Virtual DOM in React represents a DOM in memory, making updates more efficient by comparing the previous state and identifying specific areas for updates, resulting in faster page loads.', 'Pipes in Angular are used for representation purposes and can be predefined or customized, with pure pipes using pure functions and not maintaining internal state, ensuring consistent output with parameter changes.']}], 'highlights': ['The average salary of a full-stack developer in the US can go as high as $125,000 per annum.', 'By 2024, there will be a 27% increase in the job for developers.', 'The curriculum covers front-end technologies such as HTML, CSS, JavaScript, and frameworks like React and Angular, as well as back-end development with Node.js and Django.', 'Full stack development involves building the front end, back end, and database aspects of an application, as exemplified by the process of fetching new images from Instagram servers, providing a seamless user experience.', 'Simply Learn offers full stack development courses and certifications such as the full-stack Java Developer Masters program, postgraduate program in full stack web development, and full stack web developer mean stack masters program, catering to those aspiring for a career as full-stack developers.', 'Frontend development focuses on creating visible and accessible features, while backend development covers server-side logic and system integration.', 'JavaScript is widely used in web development with technologies like Angular and Node.js, and it is also employed in app development, including hybrid apps for Android and iOS, as well as in smartwatches like the Bengal.js.', "The process of creating a CSS file named style.css and linking it to an HTML document using the tag and specifying the source code as 'style.css'.", 'The chapter covers the usage and significance of heading tags (H1 to H6) in HTML, explaining their hierarchy and visual differences in font size.', 'The chapter explains the usage and impact of the id attribute in HTML elements for unique identification and the application of CSS properties to style elements, with a focus on the id attribute and its application for styling.', 'The chapter demonstrates the process and importance of providing the src attribute in the image tag to specify the image source and the usage of the alt attribute for displaying alternate text when the image is not displayed.', 'The CSS grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position and layer between parts of a control-built HTML primitive. It is a two-dimensional system, meaning it can handle both columns and rows, unlike Flexbox which is largely a one-dimensional system.', 'The chapter discusses the most common types of CSS selectors, including element selectors, ID selectors, class selectors, universal selectors, and group selectors.', 'The flexbox model is introduced as a more efficient and flexible way to arrange items within a container, providing advantages over the old block model in terms of layout flexibility and ease of use.', 'The average salary of a backend developer in the United States is around 102,000 US dollars per year, while in India it is around 7,23,000 Indian rupees per annum.', 'Angular is specifically developed for single-page applications, offering structure, consistency, scalability, and maintainability, which is ideal for modern applications.', 'Node.js is used by top industry leaders like Netflix, Walmart, Uber, and NASA for reasons such as application scalability, data intensive application, asynchronous IO, and efficient handling of concurrent requests.', 'NPM serves as a central repository for all packages and modules within Node.js, offering version management and dependency control.', 'Django is a high-level Python web framework used by popular websites like Instagram, Bitbucket, Pinterest, and NASA.', 'Routing in Angular creates single-page applications, providing improved user experience and faster loading times.', 'The chapter covers performing CRUD operations and querying in MongoDB, including adding, removing, and finding records, applying conditions and limits, sorting in ascending and descending order, searching based on embedded properties, and working with indexing.', 'Node.js uses Node Package Manager (NPM) to manage online repositories of modules and packages, providing over 50,000 bundles.', 'Streams in Node.js allow continuous reading and writing of data, categorized into readable, writable, duplex, and transform streams, providing a fundamental understanding of how data is managed within applications.', 'Module exports are explained as a way to encapsulate and share the entire code for a solution, promoting collaboration and code reuse among developers, emphasizing the benefits of encapsulation and collaboration in Node.js development.', 'State in React stores values for a specific period of time and changes due to user or application actions, and it is managed through the set state method, rendering, and updating the state.', 'Pipes in Angular are used for representation purposes and can be predefined or customized, with pure pipes using pure functions and not maintaining internal state, ensuring consistent output with parameter changes.']}