title
Full Stack Web Development Full Course - 10 Hours | Full Stack Web Developer Course | Edureka

description
🔥𝐄𝐝𝐮𝐫𝐞𝐤𝐚 𝐅𝐮𝐥𝐥 𝐒𝐭𝐚𝐜𝐤 𝐖𝐞𝐛 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐈𝐧𝐭𝐞𝐫𝐧𝐬𝐡𝐢𝐩 𝐏𝐫𝐨𝐠𝐫𝐚𝐦: https://www.edureka.co/internship/full-stack-web-development This Edureka "Full Stack Web Development Full Course" video will help you understand and learn Full Stack Web Development technologies and concepts in detail. This Full Stack Web Development Tutorial is ideal for both beginners as well as professionals who want to master Frontend and Backend Web Development technologies. Topics covered in this Full Stack Web Development Full Course video: 00:00:00 Introduction to Full Stack Web Development Full Course 00:01:46 HTML 00:02:03 What is HTML? 00:02:45 Structure of HTML 00:03:38 HTML Editors 00:04:21 Writing a HTML program 00:05:14 Doctype Declaration 00:06:30 Elements 00:15:40 HTML Forms 00:30:55 CSS 00:30:54 What is CSS? 00:31:59 CSS Syntax 00:32:32 CSS Selectors 00:33:54 CSS Box Model 00:34:31 CSS Units 01:34:26 JavaScript 01:35:01 What is Javascript? 01:36:46 JavaScript Stats 01:37:34 What can JavaScript do? 01:38:58 JavaScript Framework 01:41:44 Top Websites Built Using JavaScript 01:42:10 Benefits of JavaScript 01:44:21 JavaScript Fundamentals 01:51:23 JavaScript Variables 01:52:59 JavaScript Constants 01:52:58 JavaScript Data Types 02:03:31 JavaScript Objects 02:09:30 JavaScript Functions 02:12:38 JavaScript Conditional Statements 02:18:35 JavaScript Loops 02:27:36 JavaScript Switch Case 02:30:34 jQuery 02:34:21 Why use jQuery? 02:36:51 Getting started with jQuery 02:39:31 DOM 02:40:19 jQuery Selectors 02:47:58 jQuery Methods 03:20:58 jQuery Effects 03:36:46 jQuery UI 03:45:25 Angular 03:51:56 What is Angular? 03:56:44 Single Page Application 03:58:31 Angular 8: What's new? 04:02:03 Angular Project Setup 04:06:16 Writing the Angular First App 04:21:32 What is Typescript? 04:22:59 Integrating Ext CSS 04:32:53 Angular Components 04:55:38 Data Binding 05:06:51 Event Binding 05:25:20 Using Built-in Directives 05:44:37 React.js 05:45:57 Why ReactJs? 05:50:14 Introduction to ReactJS 05:53:39 Advantages of ReactJS 05:54:10 ReactJS Installation 05:59:37 RasctJS Fundamentals 06:00:17 JSX 06:04:30 React Components 06:09:12 React Props 06:11:49 React States 06:16:54 React Lifecycle 06:22:34 React Events 06:31:06 React Refs 06:38:47 React Keys 06:39:48 React Routers 06:52:14 Node.js 06:53:24 What is Node.js? 06:54:43 Features of Node.js 06:55:34 Node.js Architecture 06:57:27 NPM 06:58:58 Node.js Modules 07:01:04 JSON File 07:06:00 Node.js basics 07:08:12 Node.js Operators 07:10:21 Node.js Functions 07:11:42 Node.js Objects 07:12:34 Node.js File System 07:16:21 Node.js Events 07:27:11 Node.js HTTP Module 07:28:14 Express.JS 07:29:29 Node.js Demo 07:41:13 MEAN Stack Application 07:44:51 CRUD Operations 07:44:56 RESTful API 07:45:39 Contact List MEAN App 09:00:49 MERN Stack Applications 09:03:15 MERN CRUD 09:04:02 MERN Application To-Do List App 10:05:10 How to Become a Full Stack Web Developer? 🔴 Subscribe to our channel to get video updates. Hit the subscribe button above: https://goo.gl/6ohpTV 🔴 𝐄𝐝𝐮𝐫𝐞𝐤𝐚 𝐎𝐧𝐥𝐢𝐧𝐞 𝐓𝐫𝐚𝐢𝐧𝐢𝐧𝐠 𝐚𝐧𝐝 𝐂𝐞𝐫𝐭𝐢𝐟𝐢𝐜𝐚𝐭𝐢𝐨𝐧𝐬 🌕 React Online Training: http://bit.ly/3Vc4yDw 🔵 Angular Online Training: http://bit.ly/3EYcCTe 🌕 AWS Online Training: http://bit.ly/3ADYwDY 🔵 DevOps Online Training: http://bit.ly/3VkBRUT 🌕 Tableau Online Training: http://bit.ly/3guTe6J 🔵 Power BI Online Training: http://bit.ly/3VntjMY 🌕 Selenium Online Training: http://bit.ly/3EVDtis 🔵 PMP Online Training: http://bit.ly/3XugO44 🌕 Salesforce Online Training: http://bit.ly/3OsAXDH 🔵 Cybersecurity Online Training: http://bit.ly/3tXgw8t 🌕 Java Online Training: http://bit.ly/3tRxghg 🔵 Python Online Training: http://bit.ly/3Oubt8M 🌕 Azure Online Training: http://bit.ly/3i4P85F 🔵 GCP Online Training: http://bit.ly/3VkCzS3 🌕 Microservices Online Training: http://bit.ly/3gxYqqv 🔵 Data Science Online Training: http://bit.ly/3V3nLrc 🌕 CEHv12 Online Training: http://bit.ly/3Vhq8Hj 🔴 𝐄𝐝𝐮𝐫𝐞𝐤𝐚 𝐑𝐨𝐥𝐞-𝐁𝐚𝐬𝐞𝐝 𝐂𝐨𝐮𝐫𝐬𝐞𝐬 🌕 Full Stack Developer Masters Program : http://bit.ly/3tWCE2S 🔵 DevOps Engineer Masters Program: http://bit.ly/3Oud9PC 🌕 Cloud Architect Masters Program: http://bit.ly/3OvueZy 🔵 Machine Learning Engineer Masters Program: http://bit.ly/3AEq4c4 🌕 Business Intelligence Masters Program: http://bit.ly/3UZPqJz 🔵 Cyber Security Masters Program: http://bit.ly/3U25rNR 🌕 Python Developer Masters Program : https://bit.ly/3EV6kDv 🔵 Automation Testing Engineer Masters Program : http://bit.ly/3AGXg2J 🌕 Azure Cloud Engineer Masters Program: http://bit.ly/3AEBHzH 🔴 𝐄𝐝𝐮𝐫𝐞𝐤𝐚 𝐔𝐧𝐢𝐯𝐞𝐫𝐬𝐢𝐭𝐲 𝐏𝐫𝐨𝐠𝐫𝐚𝐦𝐬 🌕 Professional Certificate Program in DevOps with Purdue University: https://bit.ly/3Ov52lT 📢📢 𝐓𝐨𝐩 𝟏𝟎 𝐓𝐫𝐞𝐧𝐝𝐢𝐧𝐠 𝐓𝐞𝐜𝐡𝐧𝐨𝐥𝐨𝐠𝐢𝐞𝐬 𝐭𝐨 𝐋𝐞𝐚𝐫𝐧 𝐢𝐧 2023 𝐒𝐞𝐫𝐢𝐞𝐬 📢📢 ⏩ NEW Top 10 Technologies To Learn In 2023 - https://youtu.be/udD_GQVDt5g #edureka #FullStack #FullStackDevelopment #FullStackWebDevelopment #WhatIsFullStack #FullStackWebDevelopmentCourse #FullStackTraining Please write back to us at sales@edureka.co or call us at IND: 9606058406 / US: 18338555775 (toll-free) for more information.

detail
{'title': 'Full Stack Web Development Full Course - 10 Hours | Full Stack Web Developer Course | Edureka', 'heatmap': [{'end': 1821.507, 'start': 1083.945, 'weight': 1}, {'end': 2910.316, 'start': 2177.568, 'weight': 0.911}], 'summary': 'The full stack web development course by edureka provides an overview of the field, essential skills, and tools, covering html, css, javascript, jquery, angular, react.js, node.js, mongodb, rest api creation, github, maven, continuous integration with jenkins, automation, and docker deployment, with practical examples and demonstrations.', 'chapters': [{'end': 508.954, 'segs': [{'end': 283.649, 'src': 'embed', 'start': 254.469, 'weight': 0, 'content': [{'end': 257.051, 'text': 'Then comes the logic layer or the backend layer.', 'start': 254.469, 'duration': 2.582}, {'end': 261.594, 'text': 'Now this layer forms a dynamic connection between the front end and the database.', 'start': 257.451, 'duration': 4.143}, {'end': 269.66, 'text': "So every time you search the web, it's the logic layer that transmits your requirements to the database and returns what you searched for.", 'start': 262.014, 'duration': 7.646}, {'end': 272.101, 'text': 'All of this is powered by a web server.', 'start': 270.2, 'duration': 1.901}, {'end': 279.807, 'text': "Now in order to get this layer working, it's important to know at least one of the programming languages such as Python, Java, or C hash.", 'start': 272.602, 'duration': 7.205}, {'end': 283.649, 'text': 'okay now, lastly, we have the database layer.', 'start': 280.447, 'duration': 3.202}], 'summary': 'The logic layer connects front end to database, powered by a web server, requires knowledge of programming languages like python, java, or c#.', 'duration': 29.18, 'max_score': 254.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE254469.jpg'}, {'end': 516.837, 'src': 'embed', 'start': 486.433, 'weight': 6, 'content': [{'end': 492.816, 'text': 'Of course, one requires to have work experience and a lot of knowledge, but nothing is unachievable if you have the will to do it.', 'start': 486.433, 'duration': 6.383}, {'end': 497.679, 'text': 'Apart from that, a full stack developer is highly valued in all parts of the world.', 'start': 493.236, 'duration': 4.443}, {'end': 504.431, 'text': 'In the US, the average salary of a full stack developer is over $110,000.', 'start': 498.199, 'duration': 6.232}, {'end': 508.954, 'text': 'Not only in the US, all around the world, full stack developers are in high demand.', 'start': 504.432, 'duration': 4.522}, {'end': 516.837, 'text': "Now that you have a basic understanding about what a full stack developer is, let's dive deep into how to become a full stack developer.", 'start': 509.595, 'duration': 7.242}], 'summary': 'Becoming a full stack developer is achievable with work experience and knowledge; highly valued globally, with an average salary over $110,000 in the us.', 'duration': 30.404, 'max_score': 486.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE486433.jpg'}], 'start': 7.383, 'title': 'Full-stack web development', 'summary': 'Provides an overview of full-stack web development, its high demand and salary potential, and the technologies and skills involved, with an emphasis on an average salary of over $110,000 in the us.', 'chapters': [{'end': 162.903, 'start': 7.383, 'title': 'Full-stack web development: introduction and technologies', 'summary': 'Discusses the high-demand and high-paid nature of full-stack web development, and provides an overview of the skills and technologies involved, from html, css, javascript, jquery to angular, reactjs, nodejs, mongodb, rest api, git, github, maven, jenkins, and docker.', 'duration': 155.52, 'highlights': ['Full-stack web development is a high-demand, high-paid job in the market. The field of full-stack web development has consistently been one of the high-demand, high-paid jobs in the market.', 'Introduction to various technologies involved in full-stack web development, including HTML, CSS, JavaScript, jQuery, Angular, ReactJS, NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker. The chapter provides an overview of the skills and technologies involved in full-stack web development, including HTML, CSS, JavaScript, jQuery, Angular, ReactJS, NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker.', 'Explanation of the role of each technology in full-stack web development, from front-end technologies like HTML, CSS, JavaScript, jQuery to back-end technologies like NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker. The chapter explains the role of each technology in full-stack web development, from front-end technologies like HTML, CSS, JavaScript, jQuery to back-end technologies like NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker.']}, {'end': 508.954, 'start': 163.763, 'title': 'Introduction to full stack web development', 'summary': 'Introduces full-stack web development, covering the layers of full-stack, the roles of front-end, back-end, and full stack developers, and the reasons to practice full stack web development, emphasizing the high demand and salary potential, including an average salary of over $110,000 in the us.', 'duration': 345.191, 'highlights': ['Full stack developers can choose from a rich set of tools and technologies for creating and designing unique code, not restricted to a certain set of tools for development. Full stack developers have the flexibility to choose from numerous frameworks and libraries, enabling them to create and design unique code, not limited to a specific set of tools, which enhances the effectiveness of web applications.', 'A full stack developer is highly valued in all parts of the world, with the average salary in the US being over $110,000, and in high demand globally. Full stack developers are highly sought after worldwide, with the average salary in the US exceeding $110,000, indicating high demand and lucrative opportunities for full stack developers globally.', 'Full stack developers are responsible for both developing and designing applications, showcasing versatility and creativity in creating bug-free applications. Full stack developers possess the ability to both develop and design applications, enabling them to showcase creativity and versatility, ultimately leading to the creation of bug-free applications.', 'Introduction to the layers of full-stack, including the presentation layer (front end), logic layer (backend), and database layer, with the required knowledge and languages for each layer. The chapter provides an introduction to the layers of full-stack, detailing the presentation layer (front end), logic layer (backend), and database layer, along with the essential knowledge and languages required for each layer.', 'Roles of front-end and back-end developers, including the required languages, frameworks, and libraries for each role. The chapter discusses the roles of front-end and back-end developers, highlighting the necessary languages, frameworks, and libraries for each role, providing a comprehensive understanding of the responsibilities and requirements for each position.']}], 'duration': 501.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE7383.jpg', 'highlights': ['Full-stack web development is a high-demand, high-paid job in the market.', 'Full stack developers are highly valued in all parts of the world, with the average salary in the US being over $110,000, and in high demand globally.', 'Introduction to various technologies involved in full-stack web development, including HTML, CSS, JavaScript, jQuery, Angular, ReactJS, NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker.', 'Full stack developers have the flexibility to choose from numerous frameworks and libraries, enabling them to create and design unique code, not limited to a specific set of tools, which enhances the effectiveness of web applications.', 'The chapter explains the role of each technology in full-stack web development, from front-end technologies like HTML, CSS, JavaScript, jQuery to back-end technologies like NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker.', 'Full stack developers are responsible for both developing and designing applications, showcasing versatility and creativity in creating bug-free applications.', 'The chapter provides an introduction to the layers of full-stack, detailing the presentation layer (front end), logic layer (backend), and database layer, along with the essential knowledge and languages required for each layer.', 'The chapter discusses the roles of front-end and back-end developers, highlighting the necessary languages, frameworks, and libraries for each role, providing a comprehensive understanding of the responsibilities and requirements for each position.']}, {'end': 2450.369, 'segs': [{'end': 857.612, 'src': 'embed', 'start': 828.303, 'weight': 1, 'content': [{'end': 834.045, 'text': 'Now like the name suggests it creates versions of your code or your file every time you change something.', 'start': 828.303, 'duration': 5.742}, {'end': 838.766, 'text': "So let's say that you created a web application and added an additional feature to it.", 'start': 834.505, 'duration': 4.261}, {'end': 844.868, 'text': 'But for some reason this feature slowed down your website and you want to go back to the old version of your website.', 'start': 839.166, 'duration': 5.702}, {'end': 848.769, 'text': 'So usually it is very hard to revert back to an older version,', 'start': 845.248, 'duration': 3.521}, {'end': 857.612, 'text': "but a version control system takes care of this because it has a track of all the code changes that you've made and it can easily revert back to any code change.", 'start': 848.769, 'duration': 8.843}], 'summary': 'Version control system tracks code changes, enabling easy reversion to previous versions.', 'duration': 29.309, 'max_score': 828.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE828303.jpg'}, {'end': 897.607, 'src': 'embed', 'start': 869.17, 'weight': 0, 'content': [{'end': 873.413, 'text': 'Frameworks like Node.js can help with back-end development of a webpage,', 'start': 869.17, 'duration': 4.243}, {'end': 878.275, 'text': 'and JavaScript libraries such as jQuery can help at the front end to design a webpage.', 'start': 873.413, 'duration': 4.862}, {'end': 884.399, 'text': 'Then there is Angular, React, Backbone, Meteor, which are all very useful to a full-stack developer.', 'start': 878.796, 'duration': 5.603}, {'end': 891.503, 'text': 'A full-stack web developer is always familiar with a couple of JavaScript frameworks, and the best part of these frameworks is that,', 'start': 884.859, 'duration': 6.644}, {'end': 897.607, 'text': "after learning JavaScript which you'll definitely need while developing the front end they are very easy to understand.", 'start': 891.503, 'duration': 6.104}], 'summary': 'Javascript frameworks like node.js, angular, react, backbone, and meteor are essential for full-stack web development.', 'duration': 28.437, 'max_score': 869.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE869170.jpg'}, {'end': 964.417, 'src': 'embed', 'start': 932.807, 'weight': 5, 'content': [{'end': 940.649, 'text': 'a full stack developer obviously needs to have prior knowledge about running the application on operating systems such as Linux, Windows and so on,', 'start': 932.807, 'duration': 7.842}, {'end': 944.77, 'text': 'because at the end of the day, all of this is running on top of an operating system.', 'start': 940.649, 'duration': 4.121}, {'end': 955.133, 'text': 'Also, a lot of full stack developers have brushed up on various project management tools like Jira ThemeWorks Basecamp to effectively carry out the web development process.', 'start': 945.27, 'duration': 9.863}, {'end': 960.373, 'text': 'So guys, becoming a full stack web developer requires good amount of effort and dedication.', 'start': 955.868, 'duration': 4.505}, {'end': 964.417, 'text': 'But is it worth all the effort? I would say definitely it is.', 'start': 960.793, 'duration': 3.624}], 'summary': 'Full stack developers need os knowledge, project management tools, effort, worth it', 'duration': 31.61, 'max_score': 932.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE932807.jpg'}, {'end': 1821.507, 'src': 'heatmap', 'start': 1083.945, 'weight': 1, 'content': [{'end': 1091.111, 'text': 'and these contains elements like h1 tags or paragraph tags, which are known by p tags, and they make up the mass of your content.', 'start': 1083.945, 'duration': 7.166}, {'end': 1094.573, 'text': 'Now, to create an HTML page, there are a few steps.', 'start': 1092.031, 'duration': 2.542}, {'end': 1098.036, 'text': 'So firstly, you need to open any sort of text editor.', 'start': 1094.953, 'duration': 3.083}, {'end': 1102.86, 'text': 'It could be Notepad++, Notepad, Sublime Text, or even Visual Studio Code.', 'start': 1098.376, 'duration': 4.484}, {'end': 1105.862, 'text': 'You have the freedom to use whatever text editor you want.', 'start': 1103.42, 'duration': 2.442}, {'end': 1113.789, 'text': 'Next, you have to write up some HTML code that you want to show on your web page, and then you just save your file as a .html.', 'start': 1106.723, 'duration': 7.066}, {'end': 1118.353, 'text': 'And to open the file, all you have to do is just view it on your browser.', 'start': 1114.349, 'duration': 4.004}, {'end': 1124.137, 'text': "Now let me just give you a quick demonstration on how that is actually done, if you've still not understood that.", 'start': 1119.033, 'duration': 5.104}, {'end': 1126.838, 'text': 'So let us create a folder first.', 'start': 1124.897, 'duration': 1.941}, {'end': 1130.221, 'text': "So let's call this folder html-demo.", 'start': 1127.359, 'duration': 2.862}, {'end': 1135.665, 'text': "And now we're just going to use Sublime Text, because that's my favorite text editor.", 'start': 1130.921, 'duration': 4.744}, {'end': 1142.211, 'text': "Out here all you have to do is create a new file and I'm going to be saying that it's a HTML type.", 'start': 1136.505, 'duration': 5.706}, {'end': 1144.533, 'text': 'Then you just fit in your HTML boilerplate.', 'start': 1142.391, 'duration': 2.142}, {'end': 1152.741, 'text': "I'm going to tell my title is going to be my first webpage and that is the title of our webpage.", 'start': 1144.713, 'duration': 8.028}, {'end': 1155.864, 'text': "Now let's put in some content into this.", 'start': 1153.942, 'duration': 1.922}, {'end': 1161.709, 'text': "So it's going to have an h1 which says, this is just some text.", 'start': 1156.484, 'duration': 5.225}, {'end': 1162.95, 'text': "Let's save this.", 'start': 1162.21, 'duration': 0.74}, {'end': 1167.114, 'text': 'This is going to be saved into our HTML demo.', 'start': 1163.551, 'duration': 3.563}, {'end': 1168.516, 'text': "So let's open it.", 'start': 1167.495, 'duration': 1.021}, {'end': 1171.318, 'text': "Let's save it as index.html.", 'start': 1168.876, 'duration': 2.442}, {'end': 1175.762, 'text': "Now once you've saved it, all you have to do to view it is go into your folder.", 'start': 1171.839, 'duration': 3.923}, {'end': 1178.472, 'text': 'and just open it on your browser.', 'start': 1176.591, 'duration': 1.881}, {'end': 1186.137, 'text': 'So as you guys can see, the title is written out here on the tab and this is our H1 that we just created.', 'start': 1178.973, 'duration': 7.164}, {'end': 1189.8, 'text': "Okay? So that's how you basically create an HTML page.", 'start': 1186.498, 'duration': 3.302}, {'end': 1191.201, 'text': "So let's move on.", 'start': 1190.56, 'duration': 0.641}, {'end': 1195.382, 'text': 'Now there are some elements that I want to tell you all about which is very important.', 'start': 1191.821, 'duration': 3.561}, {'end': 1196.983, 'text': 'So first is the doc type element.', 'start': 1195.662, 'duration': 1.321}, {'end': 1204.366, 'text': "So the doc type declaration represents that the file you're working is a document type and helps the browser to display web pages correctly,", 'start': 1197.183, 'duration': 7.183}, {'end': 1210.648, 'text': 'and it only appears once at the top of the page before any HTML tag, and the doc type declaration is not case sensitive.', 'start': 1204.366, 'duration': 6.282}, {'end': 1214.264, 'text': 'Okay, so this is what HTML actually looks like.', 'start': 1211.542, 'duration': 2.722}, {'end': 1222.05, 'text': 'Now before we move further with some HTML coding, I want to make you all aware that a web page is fundamentally made up of three constituents.', 'start': 1214.684, 'duration': 7.366}, {'end': 1228.855, 'text': 'The first is HTML, the second is CSS or cascading style sheets, and the third is JavaScript.', 'start': 1222.73, 'duration': 6.125}, {'end': 1233.498, 'text': 'Now, HTML will only give the structure of the webpage.', 'start': 1229.795, 'duration': 3.703}, {'end': 1239.482, 'text': 'It has nothing to do with the styling, while CSS is completely responsible for how beautiful your webpage looks,', 'start': 1233.738, 'duration': 5.744}, {'end': 1244.466, 'text': "what colors you're using as the background, how your images are actually lined up and all those sorts of things.", 'start': 1239.482, 'duration': 4.984}, {'end': 1250.331, 'text': 'To learn more about CSS, you can always refer to our CSS tutorial on the same page of Edureka.', 'start': 1245.007, 'duration': 5.324}, {'end': 1254.922, 'text': 'And thirdly, JavaScript is for making your page much more dynamic.', 'start': 1251.261, 'duration': 3.661}, {'end': 1258.623, 'text': "If you're clicking on a button, your posts are being actually submitted.", 'start': 1255.122, 'duration': 3.501}, {'end': 1260.284, 'text': "That's all being done by JavaScript.", 'start': 1258.783, 'duration': 1.501}, {'end': 1265.045, 'text': 'And if you want to learn about JavaScript, we also have tutorials for that and you can surely check them out.', 'start': 1260.344, 'duration': 4.701}, {'end': 1271.047, 'text': "Okay, so now let's go ahead and create some elements and see how they look like on an HTML page.", 'start': 1265.825, 'duration': 5.222}, {'end': 1273.167, 'text': "So let's go back to our HTML page.", 'start': 1271.527, 'duration': 1.64}, {'end': 1274.788, 'text': 'So this is what an H1 looks like.', 'start': 1273.227, 'duration': 1.561}, {'end': 1280.949, 'text': 'So let me just copy this down now, and let me show you all the types of headings that HTML provides us.', 'start': 1275.088, 'duration': 5.861}, {'end': 1287.59, 'text': "It's actually H1 through H6, so H2, H3, H4, H5, and H6.", 'start': 1281.529, 'duration': 6.061}, {'end': 1291.991, 'text': "Let's also change them here.", 'start': 1288.91, 'duration': 3.081}, {'end': 1298.773, 'text': "H6, H5, H4, H3, Now, let's save it.", 'start': 1292.011, 'duration': 6.762}, {'end': 1300.755, 'text': "Let's go ahead and reload our page.", 'start': 1299.293, 'duration': 1.462}, {'end': 1303.477, 'text': 'So, this is how the different types of headings look like.', 'start': 1301.135, 'duration': 2.342}, {'end': 1306.939, 'text': 'This is H1 being the biggest and H6 being the smallest.', 'start': 1303.797, 'duration': 3.142}, {'end': 1309.521, 'text': 'Okay, so that was about headings.', 'start': 1308.2, 'duration': 1.321}, {'end': 1314.084, 'text': "Now we have some other tags also that I want to make y'all aware of.", 'start': 1310.62, 'duration': 3.464}, {'end': 1315.485, 'text': "So there's a P tag first.", 'start': 1314.144, 'duration': 1.341}, {'end': 1318.168, 'text': 'So P normally stands for paragraph.', 'start': 1316.326, 'duration': 1.842}, {'end': 1325.896, 'text': 'Now paragraph is basically what it looks like and it normally contains random text or paragraphs of your webpage.', 'start': 1318.568, 'duration': 7.328}, {'end': 1327.718, 'text': 'And this is what they look like.', 'start': 1326.737, 'duration': 0.981}, {'end': 1329.66, 'text': 'So this is what a paragraph looks like.', 'start': 1327.738, 'duration': 1.922}, {'end': 1332.617, 'text': 'Okay, so that was all about adding a paragraph.', 'start': 1330.856, 'duration': 1.761}, {'end': 1339.959, 'text': 'So how do you add images? So you can simply add image with the image tag and all you have to say is a source.', 'start': 1333.257, 'duration': 6.702}, {'end': 1345.62, 'text': 'Now I already have a beautiful picture of a Pokemon that I really loved as a kid.', 'start': 1340.379, 'duration': 5.241}, {'end': 1347.841, 'text': 'So let me just copy that down into the folder.', 'start': 1345.88, 'duration': 1.961}, {'end': 1353.203, 'text': "Okay, so now that we've copied down our image into our folder, all you have to do is give the source.", 'start': 1348.661, 'duration': 4.542}, {'end': 1356.684, 'text': 'Now this can be Ninetales.png.', 'start': 1354.003, 'duration': 2.681}, {'end': 1359.565, 'text': "That's the name of our image.", 'start': 1356.964, 'duration': 2.601}, {'end': 1361.566, 'text': "let's go back to our page.", 'start': 1359.565, 'duration': 2.001}, {'end': 1362.587, 'text': "let's reload it.", 'start': 1361.566, 'duration': 1.021}, {'end': 1372.333, 'text': 'okay, now you can also put in attributes like height and you could say the height is gonna be 7 or 500 pixels.', 'start': 1362.587, 'duration': 9.746}, {'end': 1377.716, 'text': "and then you can also put in an attribute called width and say that's also gonna be 500 pixels.", 'start': 1372.333, 'duration': 5.383}, {'end': 1380.998, 'text': 'yeah, so that changes the height and width of your image.', 'start': 1377.716, 'duration': 3.282}, {'end': 1384.26, 'text': 'you can also make it smaller by saying something like 100 pixels.', 'start': 1380.998, 'duration': 3.262}, {'end': 1386.822, 'text': "so let me just show you that, save it, let's reload it.", 'start': 1384.26, 'duration': 2.562}, {'end': 1390.023, 'text': 'and yeah, now we have a much smaller nine tails out there.', 'start': 1387.242, 'duration': 2.781}, {'end': 1394.065, 'text': "now, suppose you don't have a picture, you can also put an alt tag.", 'start': 1390.023, 'duration': 4.042}, {'end': 1401.068, 'text': 'so this will say there was supposed to be an image here.', 'start': 1394.065, 'duration': 7.003}, {'end': 1402.388, 'text': "so let's save that.", 'start': 1401.068, 'duration': 1.32}, {'end': 1405.809, 'text': 'now you will not be able to see the alt tag because our image is working.', 'start': 1402.388, 'duration': 3.421}, {'end': 1410.671, 'text': "but suppose i misspelled the name of my image and now you'll see something like that out there.", 'start': 1405.809, 'duration': 4.862}, {'end': 1412.552, 'text': 'so there was supposed to be an image out here.', 'start': 1410.671, 'duration': 1.881}, {'end': 1413.873, 'text': "so it's showing the alternate thing.", 'start': 1412.552, 'duration': 1.321}, {'end': 1418.635, 'text': 'Right, we can also have line breaks in our HTML.', 'start': 1414.813, 'duration': 3.822}, {'end': 1422.016, 'text': 'So you do that simply by saying slash br.', 'start': 1418.815, 'duration': 3.201}, {'end': 1426.758, 'text': 'And there will be a line break between this word olamco and laboris.', 'start': 1422.776, 'duration': 3.982}, {'end': 1427.838, 'text': "So let's save that.", 'start': 1426.878, 'duration': 0.96}, {'end': 1429.399, 'text': "Let's cancel this out.", 'start': 1427.858, 'duration': 1.541}, {'end': 1435.301, 'text': 'Okay, so now olamco and laboris are on different lines.', 'start': 1431.42, 'duration': 3.881}, {'end': 1438.523, 'text': 'We can also make stuff bold.', 'start': 1436.782, 'duration': 1.741}, {'end': 1442.804, 'text': 'So suppose you want to make this first word bold.', 'start': 1438.863, 'duration': 3.941}, {'end': 1443.885, 'text': 'So you can go b.', 'start': 1443.184, 'duration': 0.701}, {'end': 1447.787, 'text': "slash B and that'll make it bold.", 'start': 1445.845, 'duration': 1.942}, {'end': 1450.689, 'text': 'Yep, now lorem is bold.', 'start': 1449.368, 'duration': 1.321}, {'end': 1457.856, 'text': "You can also, for making things bold, you can use a strong tag and now let's say this is also bold.", 'start': 1451.19, 'duration': 6.666}, {'end': 1463.762, 'text': 'and now this is also bold comes up right there.', 'start': 1461.021, 'duration': 2.741}, {'end': 1465.803, 'text': 'then you can change the size of text.', 'start': 1463.762, 'duration': 2.041}, {'end': 1470.965, 'text': "so let's just create some other text so it not, so that it doesn't get cluttered up.", 'start': 1465.803, 'duration': 5.162}, {'end': 1474.746, 'text': 'so we have tags like big and we also have tags like small.', 'start': 1470.965, 'duration': 3.781}, {'end': 1477.167, 'text': 'so let me just show you the difference.', 'start': 1474.746, 'duration': 2.421}, {'end': 1483.609, 'text': 'this text is big and this is small.', 'start': 1477.167, 'duration': 6.442}, {'end': 1484.71, 'text': "let's do that.", 'start': 1483.609, 'duration': 1.101}, {'end': 1485.75, 'text': 'so this text is big.', 'start': 1484.71, 'duration': 1.04}, {'end': 1486.631, 'text': 'well, this is small.', 'start': 1485.75, 'duration': 0.881}, {'end': 1489.952, 'text': 'so let me just put a line break here.', 'start': 1486.631, 'duration': 3.321}, {'end': 1498.939, 'text': "save that, let's also put a line break here, and now let's put back our image.", 'start': 1489.952, 'duration': 8.987}, {'end': 1502.062, 'text': 'yeah, this text is big, while this is small.', 'start': 1498.939, 'duration': 3.123}, {'end': 1506.866, 'text': 'now you can also put in horizontal lines inside your HTML.', 'start': 1502.062, 'duration': 4.804}, {'end': 1511.47, 'text': "all you have to say is HR and that'll put in horizontal line out there, right.", 'start': 1506.866, 'duration': 4.604}, {'end': 1514.876, 'text': 'like that, You can also put the width and height out here.', 'start': 1511.47, 'duration': 3.406}, {'end': 1518.037, 'text': "So width, there's no reason to put a height because it's not there.", 'start': 1514.996, 'duration': 3.041}, {'end': 1522.939, 'text': 'And width is going to be something like 70%, you could say, 70%.', 'start': 1518.517, 'duration': 4.422}, {'end': 1525.419, 'text': 'And you have a line that goes 70% through the screen.', 'start': 1522.939, 'duration': 2.48}, {'end': 1528.621, 'text': 'Next, we can also put in links into our HTML.', 'start': 1526.78, 'duration': 1.841}, {'end': 1532.142, 'text': 'So suppose you want to go to a site.', 'start': 1529.201, 'duration': 2.941}, {'end': 1533.762, 'text': "So let's say you want to go to Edureka.", 'start': 1532.342, 'duration': 1.42}, {'end': 1539.851, 'text': 'We can put some text, like say this is a link to a website.', 'start': 1535.768, 'duration': 4.083}, {'end': 1541.712, 'text': 'Save that.', 'start': 1541.312, 'duration': 0.4}, {'end': 1543.213, 'text': 'Just put it here.', 'start': 1541.732, 'duration': 1.481}, {'end': 1546.015, 'text': 'And now this will take us to edureka.co.', 'start': 1543.693, 'duration': 2.322}, {'end': 1548.116, 'text': "Yep, so that's how it works.", 'start': 1546.855, 'duration': 1.261}, {'end': 1550.718, 'text': 'You can also put links on images.', 'start': 1549.077, 'duration': 1.641}, {'end': 1559.843, 'text': 'So suppose we were to remove this text out here, copy this image from here, and just put it out here.', 'start': 1551.098, 'duration': 8.745}, {'end': 1563.026, 'text': "Now if we were to click on the image, it'll take us to edureka.co.", 'start': 1560.084, 'duration': 2.942}, {'end': 1568.811, 'text': 'Okay, you can also add lists into your HTML page.', 'start': 1564.545, 'duration': 4.266}, {'end': 1570.653, 'text': 'So there are two types of lists.', 'start': 1568.951, 'duration': 1.702}, {'end': 1572.816, 'text': 'One is an ordered list.', 'start': 1571.094, 'duration': 1.722}, {'end': 1577.102, 'text': 'So ordered lists are numbered lists and you can put in list items like this.', 'start': 1573.197, 'duration': 3.905}, {'end': 1580.406, 'text': "So let's put in a bunch of list items.", 'start': 1578.624, 'duration': 1.782}, {'end': 1586.072, 'text': "Okay, so let's type in some text.", 'start': 1584.651, 'duration': 1.421}, {'end': 1589.435, 'text': 'So this is a random list.', 'start': 1586.132, 'duration': 3.303}, {'end': 1593.439, 'text': "So list items are actually going to be the things that you're going to list out.", 'start': 1590.016, 'duration': 3.423}, {'end': 1595.501, 'text': "So these could be anything that you're listing out.", 'start': 1593.619, 'duration': 1.882}, {'end': 1597.002, 'text': 'You could list out your favorite dogs.', 'start': 1595.541, 'duration': 1.461}, {'end': 1599.104, 'text': 'You could list out your favorite chocolates or anything like that.', 'start': 1597.042, 'duration': 2.062}, {'end': 1600.905, 'text': 'Let me just show you what that looks like.', 'start': 1599.124, 'duration': 1.781}, {'end': 1602.287, 'text': "Let's go back to our page.", 'start': 1601.186, 'duration': 1.101}, {'end': 1604.248, 'text': 'and this is what it looks like.', 'start': 1602.967, 'duration': 1.281}, {'end': 1608.671, 'text': 'so, as you guys can see, we have a list out here which says this is a random list.', 'start': 1604.248, 'duration': 4.423}, {'end': 1614.376, 'text': "this is a random list and just to make it a little more creative, let's go and put in some stuff like that.", 'start': 1608.671, 'duration': 5.705}, {'end': 1617.818, 'text': "so firstly, let's put an h2 out here.", 'start': 1614.376, 'duration': 3.442}, {'end': 1623.362, 'text': 'these are some of my favorite dogs.', 'start': 1617.818, 'duration': 5.544}, {'end': 1633.81, 'text': "let's say i love samuets, i also love corgis, i love huskies and I also love golden retrievers.", 'start': 1623.362, 'duration': 10.448}, {'end': 1637.733, 'text': "So now we'll have an actually good list out here.", 'start': 1635.451, 'duration': 2.282}, {'end': 1639.234, 'text': 'So these are some of my favorite dogs.', 'start': 1637.753, 'duration': 1.481}, {'end': 1644.938, 'text': 'Now, if I were to just make this an unordered list, so we could also have unordered lists.', 'start': 1640.215, 'duration': 4.723}, {'end': 1646.819, 'text': 'So this is how you create an unordered list.', 'start': 1644.998, 'duration': 1.821}, {'end': 1649.401, 'text': 'You just go UL and then you put in your list items.', 'start': 1646.839, 'duration': 2.562}, {'end': 1653.144, 'text': "So I'm going to say, so let's put an H2 again.", 'start': 1649.922, 'duration': 3.222}, {'end': 1662.935, 'text': 'And these are some of my favorite heroes in Dota 2.', 'start': 1653.204, 'duration': 9.731}, {'end': 1668.279, 'text': "So list item, this is going to be, let's see, I really love playing Shadow Fiend.", 'start': 1662.935, 'duration': 5.344}, {'end': 1677.647, 'text': "Then let's put in some other heroes like Storm Spirit, Invoker and let's see.", 'start': 1669.38, 'duration': 8.267}, {'end': 1680.628, 'text': 'Templar assassin.', 'start': 1678.107, 'duration': 2.521}, {'end': 1683.429, 'text': "let's save that and let's see.", 'start': 1680.628, 'duration': 2.801}, {'end': 1686.11, 'text': 'so these are some of my favorite heroes in dota 2.', 'start': 1683.429, 'duration': 2.681}, {'end': 1691.072, 'text': 'now, if you see, our h2 is kind of indented, that is because we have put it inside our list.', 'start': 1686.11, 'duration': 4.962}, {'end': 1697.334, 'text': "now, if you were to just cut it out and put it outside, let's read in my lines and let's see.", 'start': 1691.072, 'duration': 6.262}, {'end': 1699.095, 'text': "so now it's properly showing.", 'start': 1697.334, 'duration': 1.761}, {'end': 1701.975, 'text': 'so these are some of my favorite heroes in dota 2..', 'start': 1699.095, 'duration': 2.88}, {'end': 1704.876, 'text': 'you can also put in images in these list items.', 'start': 1701.975, 'duration': 2.901}, {'end': 1709.237, 'text': 'so suppose we were to put in some images of shadow fiend, storm spirit.', 'start': 1704.876, 'duration': 4.361}, {'end': 1713.018, 'text': 'you would just put an image out here and you would put the source.', 'start': 1709.237, 'duration': 3.781}, {'end': 1716.499, 'text': "now i don't really have images, but you can also put in the url of images.", 'start': 1713.018, 'duration': 3.481}, {'end': 1718.12, 'text': 'so let me just show you how to do that.', 'start': 1716.499, 'duration': 1.621}, {'end': 1719.78, 'text': "so let's see shadow fiend.", 'start': 1718.12, 'duration': 1.66}, {'end': 1723.604, 'text': "Let's go into the images.", 'start': 1722.602, 'duration': 1.002}, {'end': 1726.811, 'text': "Let's find something small, like let's say 300x300.", 'start': 1724.466, 'duration': 2.345}, {'end': 1734.644, 'text': 'okay, so this looks like a nice cartoonish figure.', 'start': 1730.623, 'duration': 4.021}, {'end': 1740.506, 'text': 'so we open this image in the new tab and we copy down this link so you can see.', 'start': 1734.644, 'duration': 5.862}, {'end': 1743.547, 'text': "the source is this link let's save it.", 'start': 1740.506, 'duration': 3.041}, {'end': 1745.348, 'text': "let's see if it shows up.", 'start': 1743.547, 'duration': 1.801}, {'end': 1748.909, 'text': 'yep, and now this thing shows up just outside shadow fiend.', 'start': 1745.348, 'duration': 3.561}, {'end': 1751.77, 'text': 'you can also put in some styling or some attributes.', 'start': 1748.909, 'duration': 2.861}, {'end': 1759.794, 'text': 'like you say, width is going to be 100 pixels And height is going to be 100 pixels.', 'start': 1751.77, 'duration': 8.024}, {'end': 1761.035, 'text': "So let's save that now.", 'start': 1759.934, 'duration': 1.101}, {'end': 1764.237, 'text': "And now it's a much smaller image of Shadowfian.", 'start': 1762.036, 'duration': 2.201}, {'end': 1767.339, 'text': 'Now we have other types of tags also.', 'start': 1765.658, 'duration': 1.681}, {'end': 1768.98, 'text': 'So these are called div tags.', 'start': 1767.579, 'duration': 1.401}, {'end': 1770.841, 'text': 'So div tag stands for division.', 'start': 1769.38, 'duration': 1.461}, {'end': 1776.185, 'text': 'So to divide your page into separate parts, you could say this will contain the footer.', 'start': 1771.101, 'duration': 5.084}, {'end': 1779.287, 'text': 'So footer tags are normally coming in the end.', 'start': 1776.985, 'duration': 2.302}, {'end': 1782.269, 'text': 'Now you could also have a div tag in the beginning.', 'start': 1779.807, 'duration': 2.462}, {'end': 1784.705, 'text': 'And this could contain the header.', 'start': 1783.264, 'duration': 1.441}, {'end': 1787.667, 'text': 'So these tags will contain the header.', 'start': 1785.806, 'duration': 1.861}, {'end': 1789.708, 'text': 'So let me just put in some header.', 'start': 1788.147, 'duration': 1.561}, {'end': 1795.992, 'text': 'So this is the header and this is the footer.', 'start': 1789.748, 'duration': 6.244}, {'end': 1798.054, 'text': 'So this is the header.', 'start': 1797.233, 'duration': 0.821}, {'end': 1799.254, 'text': 'Headers always come on top.', 'start': 1798.094, 'duration': 1.16}, {'end': 1800.195, 'text': 'And this is the footer.', 'start': 1799.474, 'duration': 0.721}, {'end': 1804.528, 'text': 'Now you can also create forms using HTML.', 'start': 1802.065, 'duration': 2.463}, {'end': 1806.49, 'text': "So let's go ahead and create one.", 'start': 1804.808, 'duration': 1.682}, {'end': 1809.814, 'text': 'So our form is going to be called a registration form.', 'start': 1806.951, 'duration': 2.863}, {'end': 1814.399, 'text': "Okay, so now let's put our form in a div first of all.", 'start': 1810.575, 'duration': 3.824}, {'end': 1816.642, 'text': "So let's give our div an ID.", 'start': 1814.639, 'duration': 2.003}, {'end': 1821.507, 'text': 'So IDs and classes are actually used to select stuff on an HTML page.', 'start': 1817.082, 'duration': 4.425}], 'summary': 'Creating an html page involves opening a text editor, writing html code, and adding elements such as headings, paragraphs, images, links, lists, and forms, which can be styled using css and made dynamic using javascript.', 'duration': 737.562, 'max_score': 1083.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE1083945.jpg'}, {'end': 1191.201, 'src': 'embed', 'start': 1163.551, 'weight': 10, 'content': [{'end': 1167.114, 'text': 'This is going to be saved into our HTML demo.', 'start': 1163.551, 'duration': 3.563}, {'end': 1168.516, 'text': "So let's open it.", 'start': 1167.495, 'duration': 1.021}, {'end': 1171.318, 'text': "Let's save it as index.html.", 'start': 1168.876, 'duration': 2.442}, {'end': 1175.762, 'text': "Now once you've saved it, all you have to do to view it is go into your folder.", 'start': 1171.839, 'duration': 3.923}, {'end': 1178.472, 'text': 'and just open it on your browser.', 'start': 1176.591, 'duration': 1.881}, {'end': 1186.137, 'text': 'So as you guys can see, the title is written out here on the tab and this is our H1 that we just created.', 'start': 1178.973, 'duration': 7.164}, {'end': 1189.8, 'text': "Okay? So that's how you basically create an HTML page.", 'start': 1186.498, 'duration': 3.302}, {'end': 1191.201, 'text': "So let's move on.", 'start': 1190.56, 'duration': 0.641}], 'summary': 'Creating an html page with title and h1, saved as index.html.', 'duration': 27.65, 'max_score': 1163.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE1163551.jpg'}, {'end': 1339.959, 'src': 'embed', 'start': 1308.2, 'weight': 11, 'content': [{'end': 1309.521, 'text': 'Okay, so that was about headings.', 'start': 1308.2, 'duration': 1.321}, {'end': 1314.084, 'text': "Now we have some other tags also that I want to make y'all aware of.", 'start': 1310.62, 'duration': 3.464}, {'end': 1315.485, 'text': "So there's a P tag first.", 'start': 1314.144, 'duration': 1.341}, {'end': 1318.168, 'text': 'So P normally stands for paragraph.', 'start': 1316.326, 'duration': 1.842}, {'end': 1325.896, 'text': 'Now paragraph is basically what it looks like and it normally contains random text or paragraphs of your webpage.', 'start': 1318.568, 'duration': 7.328}, {'end': 1327.718, 'text': 'And this is what they look like.', 'start': 1326.737, 'duration': 0.981}, {'end': 1329.66, 'text': 'So this is what a paragraph looks like.', 'start': 1327.738, 'duration': 1.922}, {'end': 1332.617, 'text': 'Okay, so that was all about adding a paragraph.', 'start': 1330.856, 'duration': 1.761}, {'end': 1339.959, 'text': 'So how do you add images? So you can simply add image with the image tag and all you have to say is a source.', 'start': 1333.257, 'duration': 6.702}], 'summary': 'The transcript covers html tags including p tag and image tag, explaining their usage and appearance.', 'duration': 31.759, 'max_score': 1308.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE1308200.jpg'}, {'end': 1450.689, 'src': 'embed', 'start': 1422.776, 'weight': 17, 'content': [{'end': 1426.758, 'text': 'And there will be a line break between this word olamco and laboris.', 'start': 1422.776, 'duration': 3.982}, {'end': 1427.838, 'text': "So let's save that.", 'start': 1426.878, 'duration': 0.96}, {'end': 1429.399, 'text': "Let's cancel this out.", 'start': 1427.858, 'duration': 1.541}, {'end': 1435.301, 'text': 'Okay, so now olamco and laboris are on different lines.', 'start': 1431.42, 'duration': 3.881}, {'end': 1438.523, 'text': 'We can also make stuff bold.', 'start': 1436.782, 'duration': 1.741}, {'end': 1442.804, 'text': 'So suppose you want to make this first word bold.', 'start': 1438.863, 'duration': 3.941}, {'end': 1443.885, 'text': 'So you can go b.', 'start': 1443.184, 'duration': 0.701}, {'end': 1447.787, 'text': "slash B and that'll make it bold.", 'start': 1445.845, 'duration': 1.942}, {'end': 1450.689, 'text': 'Yep, now lorem is bold.', 'start': 1449.368, 'duration': 1.321}], 'summary': 'Demonstration of formatting text in a document, including line breaks and making text bold.', 'duration': 27.913, 'max_score': 1422.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE1422776.jpg'}, {'end': 1751.77, 'src': 'embed', 'start': 1722.602, 'weight': 4, 'content': [{'end': 1723.604, 'text': "Let's go into the images.", 'start': 1722.602, 'duration': 1.002}, {'end': 1726.811, 'text': "Let's find something small, like let's say 300x300.", 'start': 1724.466, 'duration': 2.345}, {'end': 1734.644, 'text': 'okay, so this looks like a nice cartoonish figure.', 'start': 1730.623, 'duration': 4.021}, {'end': 1740.506, 'text': 'so we open this image in the new tab and we copy down this link so you can see.', 'start': 1734.644, 'duration': 5.862}, {'end': 1743.547, 'text': "the source is this link let's save it.", 'start': 1740.506, 'duration': 3.041}, {'end': 1745.348, 'text': "let's see if it shows up.", 'start': 1743.547, 'duration': 1.801}, {'end': 1748.909, 'text': 'yep, and now this thing shows up just outside shadow fiend.', 'start': 1745.348, 'duration': 3.561}, {'end': 1751.77, 'text': 'you can also put in some styling or some attributes.', 'start': 1748.909, 'duration': 2.861}], 'summary': 'Locating and saving a 300x300 cartoon image for use, then adding styling and attributes.', 'duration': 29.168, 'max_score': 1722.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE1722602.jpg'}, {'end': 2133.915, 'src': 'embed', 'start': 2104.328, 'weight': 13, 'content': [{'end': 2106.69, 'text': "That's how you make a form that inputs a password.", 'start': 2104.328, 'duration': 2.362}, {'end': 2112.133, 'text': 'Okay, so that was how you take in emails and passwords in a form.', 'start': 2109.091, 'duration': 3.042}, {'end': 2115.555, 'text': 'Now, there are some other stuff that I want to show you.', 'start': 2113.214, 'duration': 2.341}, {'end': 2117.396, 'text': "So let's dive right into that.", 'start': 2115.755, 'duration': 1.641}, {'end': 2118.557, 'text': "So let's create another div.", 'start': 2117.496, 'duration': 1.061}, {'end': 2122.28, 'text': 'Okay so first of all we need a select tag.', 'start': 2120.037, 'duration': 2.243}, {'end': 2125.284, 'text': 'So select tags are used for making selections.', 'start': 2122.741, 'duration': 2.543}, {'end': 2127.527, 'text': 'So let me show you how that works.', 'start': 2125.925, 'duration': 1.602}, {'end': 2133.915, 'text': "So firstly let's give this a name and let's call this birthday or let's call this the month.", 'start': 2127.987, 'duration': 5.928}], 'summary': 'Tutorial on creating a form with password input and select tag for month', 'duration': 29.587, 'max_score': 2104.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE2104328.jpg'}, {'end': 2268.499, 'src': 'embed', 'start': 2239.02, 'weight': 15, 'content': [{'end': 2244.581, 'text': "Now if you reload this, there's nothing, but you get all these different values.", 'start': 2239.02, 'duration': 5.561}, {'end': 2251.751, 'text': 'Now instead of just making it blank, you could say that this could say month.', 'start': 2246.229, 'duration': 5.522}, {'end': 2256.973, 'text': 'So now this says month and you could create something similar for days also.', 'start': 2253.212, 'duration': 3.761}, {'end': 2263.676, 'text': 'So for days you need to create 30 of these and I hope you get the logic of creating this thing.', 'start': 2258.094, 'duration': 5.582}, {'end': 2268.499, 'text': 'now our form also needs a button to submit.', 'start': 2266.297, 'duration': 2.202}], 'summary': 'Creating dynamic form fields for month and days, and adding a submit button.', 'duration': 29.479, 'max_score': 2239.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE2239020.jpg'}, {'end': 2421.826, 'src': 'embed', 'start': 2391.501, 'weight': 18, 'content': [{'end': 2394.122, 'text': 'so for that you use the table data tag, so td.', 'start': 2391.501, 'duration': 2.621}, {'end': 2397.662, 'text': "so let's say our dog is called.", 'start': 2394.122, 'duration': 3.54}, {'end': 2402.024, 'text': "so let's make this rather dog owner name Right.", 'start': 2397.662, 'duration': 4.362}, {'end': 2405.468, 'text': "so I had a dog and my dog's name was Stoner.", 'start': 2402.024, 'duration': 3.444}, {'end': 2407.069, 'text': "Let's call him Stoner.", 'start': 2405.488, 'duration': 1.581}, {'end': 2412.576, 'text': "And Stoner was a street dog, so let's just keep the breed as street.", 'start': 2408.171, 'duration': 4.405}, {'end': 2415.279, 'text': 'Okay, so that was one table row.', 'start': 2413.457, 'duration': 1.822}, {'end': 2416.42, 'text': 'Save it.', 'start': 2416.079, 'duration': 0.341}, {'end': 2421.826, 'text': "Now we'll be needing multiple table rows, so let's just copy that, paste it.", 'start': 2417.161, 'duration': 4.665}], 'summary': 'Using the table data tag, create multiple rows for dog information.', 'duration': 30.325, 'max_score': 2391.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE2391501.jpg'}], 'start': 509.595, 'title': 'Full stack web development', 'summary': 'Discusses essential skills and tools for becoming a full stack web developer, including html, css, javascript, and backend programming languages. it also covers creating html elements, adding images and formatting, creating forms and tables, and using input types and tags.', 'chapters': [{'end': 932.807, 'start': 509.595, 'title': 'Full stack developer: becoming and responsibilities', 'summary': 'Discusses the responsibilities and technologies required to become a full stack developer, including html, css, javascript, backend programming languages, version control systems, javascript frameworks, and http protocols.', 'duration': 423.212, 'highlights': ['A full stack developer is responsible for both front-end and back-end development of a webpage. The developer is responsible for creating both the front end and the backend of a webpage, requiring a good understanding of technologies like HTML, CSS, JavaScript, server-side languages, and databases.', 'HTML, CSS, and JavaScript are fundamental technologies for front-end web development. To master front-end web development, it is essential to have a good understanding of HTML, CSS, and JavaScript, which are the main technologies used in structuring web pages and adding styling and interactivity.', 'Backend developers program web servers to respond with the correct resources and connect to databases for data retrieval. Backend developers program web servers to respond with the correct resources and connect to databases for data retrieval, using server-side languages like java, python, php, node.js, and databases such as mysql, mongodb, and sql.', 'Version control systems like Git and Subversion are essential tools for tracking code changes and reverting to previous versions. Version control systems like Git and Subversion are essential tools for tracking code changes and reverting to previous versions, making it easier to manage and maintain code changes throughout the development process.', 'Knowledge of HTTP and REST is essential for enabling communication between the front end and back end of web applications. Understanding HTTP and REST is essential for enabling communication between the front end and back end of web applications, allowing clients to communicate with servers and ensuring the proper functioning of web protocols.']}, {'end': 1329.66, 'start': 932.807, 'title': 'Full stack web development', 'summary': 'Discusses the essential skills and tools required for becoming a full stack web developer, including knowledge of operating systems and project management tools, the value of full stack web development, and a detailed introduction to html, its structure, and the process of creating an html page. it also covers the fundamental components of a web page, including html, css, and javascript, and provides a demonstration of creating html elements such as headings and paragraphs.', 'duration': 396.853, 'highlights': ['Full stack developers require knowledge of operating systems such as Linux and Windows for running applications, and familiarity with project management tools like Jira and Basecamp. Full stack developers need prior knowledge of operating systems and project management tools.', 'Becoming a full stack web developer requires effort and dedication, and it is a highly valued designation in the field of web development. Becoming a full stack web developer requires effort and dedication and is a highly valued designation.', 'HTML is a standard markup language used to create web pages and applications, with elements represented by tags. HTML is a standard markup language used to create web pages and applications, with elements represented by tags.', 'The structure of an HTML page includes HTML tags, head tag containing meta information, title element, and body tag containing visible content. An HTML page structure includes HTML tags, head tag with meta information, title element, and body tag with visible content.', 'Steps for creating an HTML page involve using a text editor to write HTML code, saving the file as .html, and viewing it in a web browser. Creating an HTML page involves using a text editor to write HTML code, saving the file as .html, and viewing it in a web browser.', 'The doc type declaration in HTML represents the document type and appears once at the top of the page before any HTML tag. The doc type declaration in HTML represents the document type and appears once at the top of the page before any HTML tag.', 'Web pages are composed of HTML, CSS for styling, and JavaScript for dynamic functionality. Web pages consist of HTML, CSS for styling, and JavaScript for dynamic functionality.', 'HTML provides different heading tags (H1 to H6) and paragraph tags (P) for structuring content on a webpage. HTML provides heading tags (H1 to H6) and paragraph tags (P) for structuring content on a webpage.']}, {'end': 1751.77, 'start': 1330.856, 'title': 'Adding images and formatting in html', 'summary': 'Explained how to add images with attributes like height and width, create line breaks, make text bold, change text size, add horizontal lines, insert links, and create ordered and unordered lists with list items and images, showcasing examples and practical demonstrations.', 'duration': 420.914, 'highlights': ['How to add images with attributes like height and width The chapter demonstrated adding images with attributes like height and width, showcasing examples of changing the height and width of the image.', 'Creating ordered and unordered lists with list items and images The chapter explained how to create ordered and unordered lists with list items, and demonstrated adding images within list items.', 'Inserting links and practical demonstrations The chapter detailed how to insert links and provided practical demonstrations of adding links to text and images.', "Making text bold and changing text size The chapter demonstrated making text bold using 'b' tag and changing text size using 'big' and 'small' tags.", 'Adding horizontal lines and attributes The chapter explained how to add horizontal lines and showcased adding attributes like width to the horizontal line.']}, {'end': 2127.527, 'start': 1751.77, 'title': 'Html basics: tags, forms, and input types', 'summary': 'Covers the usage of div tags for page division, creating forms with input types such as text, radio, email, and password, and the selection functionality using the select tag.', 'duration': 375.757, 'highlights': ['Explaining div tags for page division and their usage for containing header and footer elements. The transcript explains the usage of div tags for page division, with examples of containing header and footer elements, to separate the page into distinct parts.', 'Creating a registration form with input types for text, radio buttons for gender selection, and input types for email and password. The transcript demonstrates creating a registration form with input types for text, radio buttons for gender selection, and input types for email and password, including the usage of required attribute for mandatory fields.', 'Demonstrating the usage of select tags for making selections. The transcript explains the usage of select tags for making selections, demonstrating the functionality of select tags in HTML forms.']}, {'end': 2450.369, 'start': 2127.987, 'title': 'Creating form and table in html', 'summary': 'Demonstrates creating a form with a dropdown for months, checkbox for agreement, and a submit button, as well as creating a table for dogs and their breeds in html.', 'duration': 322.382, 'highlights': ['Creating a form with a dropdown for months, checkbox for agreement, and a submit button The chapter demonstrates creating a form with a dropdown for 12 months, a checkbox for agreement, and a submit button, showcasing the process of creating different form elements in HTML.', 'Creating a table for dogs and their breeds in HTML The chapter illustrates creating a table for dogs and their breeds in HTML, using table tags, table headers, and table rows with table data to display information about different dogs and their breeds.']}], 'duration': 1940.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE509595.jpg', 'highlights': ['Full stack developers need knowledge of operating systems and project management tools.', 'Becoming a full stack web developer requires effort and dedication and is highly valued.', 'HTML, CSS, and JavaScript are fundamental for front-end web development.', 'Backend developers program web servers to connect to databases using server-side languages.', 'Version control systems like Git and Subversion are essential for tracking code changes.', 'Understanding HTTP and REST is essential for enabling communication between front end and back end.', 'HTML is a standard markup language used to create web pages and applications.', 'Steps for creating an HTML page involve using a text editor to write HTML code.', 'The doc type declaration in HTML represents the document type and appears at the top of the page.', 'Web pages consist of HTML, CSS for styling, and JavaScript for dynamic functionality.', 'HTML provides different heading tags (H1 to H6) and paragraph tags (P) for structuring content.', 'The chapter demonstrated adding images with attributes like height and width.', 'The chapter explained how to create ordered and unordered lists with list items.', 'The chapter detailed how to insert links and provided practical demonstrations.', "The chapter demonstrated making text bold using 'b' tag and changing text size using 'big' and 'small' tags.", 'The chapter explained how to add horizontal lines and showcased adding attributes like width to the horizontal line.', 'The transcript explains the usage of div tags for page division.', 'The transcript demonstrates creating a registration form with input types for text, radio buttons, email, and password.', 'The transcript explains the usage of select tags for making selections.', 'The chapter demonstrates creating a form with a dropdown for 12 months, a checkbox for agreement, and a submit button.', 'The chapter illustrates creating a table for dogs and their breeds in HTML.']}, {'end': 5069.212, 'segs': [{'end': 2673.052, 'src': 'embed', 'start': 2644.195, 'weight': 2, 'content': [{'end': 2646.016, 'text': "Now let's put in some other paragraphs.", 'start': 2644.195, 'duration': 1.821}, {'end': 2650.079, 'text': 'So now lorem ipsum and some more paragraphs, I guess.', 'start': 2646.457, 'duration': 3.622}, {'end': 2653.021, 'text': "Because this is a blog, so let's make it look like a blog.", 'start': 2650.94, 'duration': 2.081}, {'end': 2654.523, 'text': 'Save that.', 'start': 2654.082, 'duration': 0.441}, {'end': 2659.646, 'text': "And let's also give it a horizontal line to make it look neat.", 'start': 2656.244, 'duration': 3.402}, {'end': 2663.169, 'text': 'Save this.', 'start': 2662.668, 'duration': 0.501}, {'end': 2664.73, 'text': "Let's load it.", 'start': 2664.009, 'duration': 0.721}, {'end': 2670.389, 'text': 'Okay, so we have this nice looking article and it has this image.', 'start': 2665.945, 'duration': 4.444}, {'end': 2673.052, 'text': "If we click on this image, it'll take us to Edureka's site.", 'start': 2670.449, 'duration': 2.603}], 'summary': "Blog article created with neat formatting and an image linked to edureka's site.", 'duration': 28.857, 'max_score': 2644.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE2644195.jpg'}, {'end': 3108.454, 'src': 'embed', 'start': 3072.711, 'weight': 1, 'content': [{'end': 3075.432, 'text': "okay, Now let's see how we actually select IDs.", 'start': 3072.711, 'duration': 2.721}, {'end': 3078.374, 'text': 'So we select IDs with the hash.', 'start': 3076.033, 'duration': 2.341}, {'end': 3081.656, 'text': 'So we have an ID called quote out here if you go and see.', 'start': 3078.895, 'duration': 2.761}, {'end': 3087.7, 'text': 'So where is that thing gone? Okay, so this paragraph out here that you see has the ID called quote.', 'start': 3082.237, 'duration': 5.463}, {'end': 3091.422, 'text': "So we're going to select that and put in some of our own CSS.", 'start': 3088.24, 'duration': 3.182}, {'end': 3093.224, 'text': "So, let's see.", 'start': 3092.523, 'duration': 0.701}, {'end': 3098.727, 'text': "Now that we've selected our ID, we can say, suppose we want to change the font family.", 'start': 3093.604, 'duration': 5.123}, {'end': 3108.454, 'text': "So we could say font family is Verdana and you could also put in alternate font families just in case Verdana doesn't exist in your system,", 'start': 3099.248, 'duration': 9.206}], 'summary': 'Selecting ids using hash and applying css properties like font family.', 'duration': 35.743, 'max_score': 3072.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE3072711.jpg'}, {'end': 4007.808, 'src': 'embed', 'start': 3982.67, 'weight': 4, 'content': [{'end': 3989.333, 'text': 'first of all, we have three types of positioning in CSS absolute, fixed and relative.', 'start': 3982.67, 'duration': 6.663}, {'end': 3993.075, 'text': "so first of all, I'm gonna show absolute positioning to you guys.", 'start': 3989.333, 'duration': 3.742}, {'end': 3999.178, 'text': 'now, before I show absolute positioning, let me just show you guys how text and stuff can be centered first of all.', 'start': 3993.075, 'duration': 6.103}, {'end': 4001.359, 'text': "so let's start doing some random CSS.", 'start': 3999.178, 'duration': 2.181}, {'end': 4005.304, 'text': 'So first of all, we are going to target this ID called container.', 'start': 4002.199, 'duration': 3.105}, {'end': 4007.808, 'text': "So let's go hashtag container.", 'start': 4005.705, 'duration': 2.103}], 'summary': "The transcript covers css positioning types and targeting the 'container' id for styling.", 'duration': 25.138, 'max_score': 3982.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE3982670.jpg'}, {'end': 4326.32, 'src': 'embed', 'start': 4296.858, 'weight': 0, 'content': [{'end': 4299.501, 'text': "Now let's go ahead and do some fixed positioning.", 'start': 4296.858, 'duration': 2.643}, {'end': 4306.548, 'text': "So for fixed positioning we have this ID called fixed which contains a paragraph saying I'm staying right here.", 'start': 4300.001, 'duration': 6.547}, {'end': 4308.31, 'text': "So let's select that first.", 'start': 4306.908, 'duration': 1.402}, {'end': 4312.434, 'text': "Let me just remove all this stuff so that it's not cluttered anymore.", 'start': 4308.83, 'duration': 3.604}, {'end': 4315.017, 'text': 'Let me reload the page.', 'start': 4313.737, 'duration': 1.28}, {'end': 4316.718, 'text': 'Save it.', 'start': 4316.138, 'duration': 0.58}, {'end': 4317.598, 'text': 'Reload it.', 'start': 4316.978, 'duration': 0.62}, {'end': 4318.318, 'text': "And that's how.", 'start': 4317.758, 'duration': 0.56}, {'end': 4319.379, 'text': "So I'm staying here.", 'start': 4318.358, 'duration': 1.021}, {'end': 4321.639, 'text': "First of all, this is what it's going to change.", 'start': 4319.619, 'duration': 2.02}, {'end': 4322.939, 'text': 'Fixed positioning.', 'start': 4321.739, 'duration': 1.2}, {'end': 4326.32, 'text': 'Is that what we called it? Fixed position.', 'start': 4323.68, 'duration': 2.64}], 'summary': "Demonstration of fixed positioning with 'fixed' id containing a paragraph.", 'duration': 29.462, 'max_score': 4296.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE4296858.jpg'}], 'start': 2450.689, 'title': 'Css basics and practical applications', 'summary': 'Covers creating html tables and blogs, introducing css basics, including styling properties, positioning, and selectors, with practical examples and visual improvements made with css.', 'chapters': [{'end': 2701.022, 'start': 2450.689, 'title': 'Html table and blog creation', 'summary': "Demonstrated the creation of a table in html with dog owners' names, their dogs' names, and breeds, and also showcased the creation of a polished blog with a linked style sheet, divs, classes, paragraphs, images, and a clickable link, emphasizing the visual improvements made with css.", 'duration': 250.333, 'highlights': ["The chapter demonstrated the creation of a table in HTML with dog owners' names, their dogs' names, and breeds.", 'The creation of a polished blog was showcased with a linked style sheet, divs, classes, paragraphs, images, and a clickable link.', 'Visual improvements were emphasized, including the addition of a border to the table and the neat appearance of the blog with images and a horizontal line.', 'CSS was used to make the table and blog look much neater, with the table and tds given a border of 1px solid black, and the blog having a visually appealing appearance with images and a horizontal line.']}, {'end': 3442.274, 'start': 2702.043, 'title': 'Introduction to css basics', 'summary': 'Introduces cascading style sheets (css) explaining its purpose, history, syntax, selectors, pseudo selectors, box model, and units, and demonstrates practical application through styling html elements with various selectors, text transformation, and box model elements.', 'duration': 740.231, 'highlights': ['The chapter introduces CSS as the acronym for Cascading Style Sheets, used to control the display of HTML tags and elements, and explains its purpose and relevance in webpage styling. CSS stands for Cascading Style Sheets and is generally used to control how HTML tags and elements are displayed on your screen.', "It explains the history of CSS, highlighting its creation to solve problems introduced in HTML 3.2, which cluttered code and made the developer's life difficult, leading to the development of CSS by W3C. CSS was made to solve problems introduced in HTML 3.2 and to keep the structure of the webpage separate from styling.", 'The chapter covers the basic syntax of CSS, including selectors, properties and value pairs, and explains the methods of including CSS into HTML through link tags, inline CSS, and internal CSS. The basic syntax of CSS includes selectors, properties, and value pairs, and CSS can be included in HTML via link tags, inline CSS, and internal CSS.', 'It discusses the different types of CSS selectors, explaining their functionality, and recommends referencing W3Schools for comprehensive information on selectors and pseudo-selectors. The chapter covers different types of CSS selectors and recommends referring to W3Schools for comprehensive information on selectors and pseudo-selectors.', 'The chapter provides an overview of pseudo-selectors, demonstrating their usage and listing different types, such as hover, active, and visited, with examples of applying specific styles to elements. The chapter explains pseudo-selectors and provides examples of applying specific styles to elements, such as on hover or when visited.', 'It explains the box model, outlining its components - content, padding, border, and margin, and visually illustrates how they are positioned relative to each other. The box model includes content, padding, border, and margin, and their positioning is visually demonstrated.', 'The chapter covers CSS units, detailing pixel, points, and relative units, with examples of their usage and the concept of relative units being relative to the current font size. Different CSS units such as pixel, points, and relative units are explained, with examples of how relative units are relative to the current font size.', 'It demonstrates the practical application of CSS by styling HTML elements using various selectors, such as targeting divs, IDs, classes, and pseudo-selectors, and explains the process of text transformation. The chapter practically applies CSS by styling HTML elements using various selectors and demonstrates text transformation.']}, {'end': 3951.648, 'start': 3442.374, 'title': 'Css styling and box model', 'summary': 'Explains css styling properties including background color, text color, borders, padding, and margin with examples and explanations. it also covers font styles, weights, sizes, points, percentages, and line height using quantifiable examples and ids.', 'duration': 509.274, 'highlights': ['The chapter covers CSS styling properties such as background color, text color, borders, padding, and margin, providing practical examples of their implementation.', 'It explains font styles (normal, italic, oblique, small caps), font variants, font weights (normal, bold, bolder), and font sizes (extra large, large, medium, small, extra small) with clear examples and demonstrations.', 'The transcript also includes explanations and demonstrations of points, percentages, and line height, showcasing their impact on font size and layout.']}, {'end': 4499.976, 'start': 3952.088, 'title': 'Css positioning basics', 'summary': 'Covers css positioning with a focus on absolute, fixed, and relative positioning, showcasing practical examples and css properties to achieve these layouts.', 'duration': 547.888, 'highlights': ['The chapter demonstrates absolute, fixed, and relative positioning in CSS, providing practical examples and explaining the properties and behavior of each type. The chapter covers three types of positioning in CSS: absolute, fixed, and relative, along with practical examples and explanations of their properties and behavior.', 'Practical examples of CSS properties such as background color, border, border radius, width, margin, and text alignment are illustrated for creating visually appealing layouts. The transcript illustrates the practical application of CSS properties like background color, border, border radius, width, margin, and text alignment to create visually appealing layouts.', 'Detailed explanation and practical demonstrations of absolute positioning, including setting position, width, height, and z-index to achieve specific layout requirements. The chapter provides a detailed explanation and practical demonstrations of absolute positioning, including setting position, width, height, and z-index to achieve specific layout requirements.', 'The transcript showcases fixed positioning with practical examples and explains how the element remains fixed on the screen while scrolling, irrespective of user actions. The transcript showcases fixed positioning with practical examples and explains how the element remains fixed on the screen while scrolling, irrespective of user actions.', 'Relative positioning is demonstrated through practical examples, showcasing the use of relative positioning properties like left, top, background color, and border to position elements relative to each other. The chapter demonstrates relative positioning through practical examples, showcasing the use of relative positioning properties like left, top, background color, and border to position elements relative to each other.']}, {'end': 5069.212, 'start': 4500.296, 'title': 'Css positioning and selectors', 'summary': 'Covers the positioning of images using the float tag, demonstrating the use of overflow property to create scroll bars, and applying pseudo-selectors and pseudo-classes to style html5 tags and elements, with practical examples and specific css properties.', 'duration': 568.916, 'highlights': ['Demonstrates the use of overflow property to create scroll bars for a list, showcasing how to apply different overflow values and their impact on the appearance of the list. The transcript explains the concept of overflow property by showcasing how to apply different overflow values (auto, scroll) and their impact on the appearance of the list, with specific examples of setting width, padding, margin, and max height, demonstrating the practical implementation of creating scroll bars for a list.', 'Illustrates the application of pseudo-selectors and pseudo-classes to style HTML5 tags and elements, showcasing how to use the hover, active, and visited pseudo-selectors to change the appearance of links, and demonstrating the styling of HTML5 tags and elements using specific CSS properties. The transcript provides practical examples of applying pseudo-selectors and pseudo-classes to style HTML5 tags and elements, showcasing the use of hover, active, and visited pseudo-selectors to change the appearance of links, and demonstrating the styling of HTML5 tags and elements using specific CSS properties such as background, color, padding, display, word spacing, and letter spacing.', 'Explains the positioning of images using the float tag, demonstrating how to float images to the left and right, and showcasing the practical application of float property to position images. The transcript explains the positioning of images using the float tag, demonstrating how to float images to the left and right, and showcasing the practical application of float property to position images, providing a clear understanding of using float property for image positioning.']}], 'duration': 2618.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE2450689.jpg', 'highlights': ['The chapter covers the basic syntax of CSS, including selectors, properties and value pairs, and explains the methods of including CSS into HTML through link tags, inline CSS, and internal CSS.', 'The chapter demonstrates absolute, fixed, and relative positioning in CSS, providing practical examples and explaining the properties and behavior of each type.', 'The chapter covers CSS styling properties such as background color, text color, borders, padding, and margin, providing practical examples of their implementation.', 'The chapter introduces CSS as the acronym for Cascading Style Sheets, used to control the display of HTML tags and elements, and explains its purpose and relevance in webpage styling.', 'The chapter provides an overview of pseudo-selectors, demonstrating their usage and listing different types, such as hover, active, and visited, with examples of applying specific styles to elements.']}, {'end': 6498.608, 'segs': [{'end': 5148.673, 'src': 'embed', 'start': 5117.242, 'weight': 4, 'content': [{'end': 5120.643, 'text': "so there's also style types, also list style types.", 'start': 5117.242, 'duration': 3.401}, {'end': 5128.346, 'text': 'so let me just see we have these lists out here first of all, which says random one, two, three, random one, two, three.', 'start': 5120.643, 'duration': 7.703}, {'end': 5134.268, 'text': "now let's say first of all, let's convert this into an unordered list.", 'start': 5128.346, 'duration': 5.922}, {'end': 5139.77, 'text': "so find all, let's gonna replace that with unordered list right.", 'start': 5134.268, 'duration': 5.502}, {'end': 5142.231, 'text': 'I just want to show it with unordered lists first.', 'start': 5140.39, 'duration': 1.841}, {'end': 5148.673, 'text': "So let's say, let's select all the ULs and let's say list style is going to be none.", 'start': 5142.411, 'duration': 6.262}], 'summary': 'Converting a list to an unordered list and setting list style to none.', 'duration': 31.431, 'max_score': 5117.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE5117242.jpg'}, {'end': 5335.824, 'src': 'embed', 'start': 5307.122, 'weight': 1, 'content': [{'end': 5312.064, 'text': 'Okay, so what if we want them to have alternate paragraphs, I mean alternate background colors.', 'start': 5307.122, 'duration': 4.942}, {'end': 5318.287, 'text': "So first of all, let's go ahead and select the allies and give them a background.", 'start': 5312.184, 'duration': 6.103}, {'end': 5322.769, 'text': "Let's say this gray color that I have selected, F7, F7, F7.", 'start': 5318.567, 'duration': 4.202}, {'end': 5327.271, 'text': "Now you see we have, okay, this doesn't seem to be working.", 'start': 5323.029, 'duration': 4.242}, {'end': 5333.14, 'text': "Allies Looks like I've deleted my link tag.", 'start': 5328.011, 'duration': 5.129}, {'end': 5334.922, 'text': "That's why the CSS was not working.", 'start': 5333.16, 'duration': 1.762}, {'end': 5335.824, 'text': "So let's see.", 'start': 5335.223, 'duration': 0.601}], 'summary': 'Discussing alternate background colors for paragraphs. issue with css deletion.', 'duration': 28.702, 'max_score': 5307.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE5307122.jpg'}, {'end': 6001.502, 'src': 'embed', 'start': 5970.673, 'weight': 0, 'content': [{'end': 5973.295, 'text': "So I've already selected a gradient out here.", 'start': 5970.673, 'duration': 2.622}, {'end': 5974.677, 'text': "It's going to create this gradient.", 'start': 5973.315, 'duration': 1.362}, {'end': 5975.797, 'text': "Now let's see.", 'start': 5975.077, 'duration': 0.72}, {'end': 5977.799, 'text': 'Go to page 7.', 'start': 5976.098, 'duration': 1.701}, {'end': 5978.54, 'text': 'right now.', 'start': 5977.799, 'duration': 0.741}, {'end': 5986.104, 'text': "let's select the body tag, let's close this off, let's close this off i want to save this and let's create a new page first of all,", 'start': 5978.54, 'duration': 7.564}, {'end': 5991.707, 'text': 'and this is going to be our css, so we have to save it and say page 7..', 'start': 5986.104, 'duration': 5.603}, {'end': 5997.639, 'text': 'right now we select our body and just paste in So let me just explain how this happens.', 'start': 5991.707, 'duration': 5.932}, {'end': 6001.502, 'text': "So there's a linear gradient and there's also another thing called radial gradient.", 'start': 5997.699, 'duration': 3.803}], 'summary': 'Creating a css page with linear and radial gradients.', 'duration': 30.829, 'max_score': 5970.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE5970673.jpg'}, {'end': 6334.644, 'src': 'embed', 'start': 6304.327, 'weight': 3, 'content': [{'end': 6304.828, 'text': 'Save it.', 'start': 6304.327, 'duration': 0.501}, {'end': 6306.809, 'text': 'And this is how it gets skewed.', 'start': 6305.588, 'duration': 1.221}, {'end': 6307.95, 'text': 'This is how skewing works.', 'start': 6306.829, 'duration': 1.121}, {'end': 6311.132, 'text': 'You can also translate stuff.', 'start': 6309.391, 'duration': 1.741}, {'end': 6313.914, 'text': 'So let me show you how translation works.', 'start': 6311.833, 'duration': 2.081}, {'end': 6314.875, 'text': 'So translate.', 'start': 6313.935, 'duration': 0.94}, {'end': 6316.116, 'text': "And let's see.", 'start': 6315.456, 'duration': 0.66}, {'end': 6319.999, 'text': 'You want to translate at 20 pixels and 20 pixels.', 'start': 6316.156, 'duration': 3.843}, {'end': 6321.18, 'text': "So let's see.", 'start': 6320.279, 'duration': 0.901}, {'end': 6323.535, 'text': 'Hover over it and it translates a little.', 'start': 6321.513, 'duration': 2.022}, {'end': 6327.378, 'text': "It's translated around 120 pixels just to make it more clear.", 'start': 6323.695, 'duration': 3.683}, {'end': 6329.34, 'text': '120 and 120.', 'start': 6327.398, 'duration': 1.942}, {'end': 6329.94, 'text': "Let's save that.", 'start': 6329.34, 'duration': 0.6}, {'end': 6331.201, 'text': "Let's reload this.", 'start': 6330.24, 'duration': 0.961}, {'end': 6334.644, 'text': "And you see that now it's translating so much.", 'start': 6331.642, 'duration': 3.002}], 'summary': 'Demonstration of skewing and translating with quantifiable data of 120 pixels', 'duration': 30.317, 'max_score': 6304.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE6304327.jpg'}], 'start': 5069.412, 'title': 'Css properties and usage', 'summary': 'Covers css clear property for element positioning, various style types and pseudo selectors with practical examples, diverse css properties such as box shadow, text decorations, and handling white spaces, as well as gradients, backgrounds, and animations with detailed application examples for web development.', 'chapters': [{'end': 5116.242, 'start': 5069.412, 'title': 'Css clear property and usage', 'summary': 'Introduces the clear property in css, which ensures nothing appears before a specified element, exemplified by the footer tag with a black background and white text.', 'duration': 46.83, 'highlights': ['The clear property in CSS ensures that nothing appears before the specified element, demonstrated using the footer tag with a black background and white text.', 'The usage of clear property is exemplified by setting a background color of black and text color of white for the footer tag.']}, {'end': 5606.402, 'start': 5117.242, 'title': 'Css style types and pseudo selectors', 'summary': 'Covers various css style types and pseudo selectors including list style types, nth child elements, first line, last line, first letter, font size, cursor, box shadow with examples of their application and effects.', 'duration': 489.16, 'highlights': ['The chapter explains different list style types including unordered lists and ordered lists and their applications, highlighting the change in list style types and positions.', 'The section demonstrates the use of pseudo selectors like after and before to add content before or after an element, showcasing the visual changes in the document.', "The detailed explanation of nth child elements and its application to select alternate child elements with specific styles, such as alternating background colors, adds practicality to the chapter's content.", 'The chapter presents the application of pseudo selectors first line, last line, and first letter, demonstrating the transformation of specific text elements like uppercase, font size, and cursor changes with visual examples.', 'The explanation and demonstration of box shadow with detailed parameters and RGB value provide a comprehensive understanding of its application and effects.']}, {'end': 5921.285, 'start': 5606.402, 'title': 'Css styling and properties', 'summary': 'Covers various css properties including box shadow, text decorations, visibility, handling white spaces, and setting direction, providing practical examples and tips for web development.', 'duration': 314.883, 'highlights': ['The chapter covers various CSS properties including box shadow, text decorations, visibility, handling white spaces, and setting direction The chapter discusses different CSS properties and their practical applications for web development.', 'Box shadow helps create a neat shadow effect without using a border Box shadow provides a practical alternative to using borders for creating shadow effects.', 'Text decorations include line through, overline, and underline The tutorial demonstrates the application of different text decorations such as line through, overline, and underline.', 'The visibility property in CSS allows setting the visibility of elements The visibility property in CSS can be used to control the visibility of elements on a web page.', 'CSS provides options for handling white spaces using properties like white space pre, no wrap, and pre-wrap The tutorial explains how to manage white spaces on web pages using CSS properties like white space pre, no wrap, and pre-wrap.', 'Setting the direction of elements can be achieved using CSS properties like left, right, right, left The tutorial demonstrates how to set the direction of elements using CSS properties like left, right, right, left.']}, {'end': 6498.608, 'start': 5922.505, 'title': 'Css gradients, backgrounds, and animations', 'summary': 'Covers css white spacing, gradients, and animations, including the use of gradient generators, setting backgrounds with images, background repeat properties, radial gradients, and various css animations like scaling, rotating, skewing, translating, and setting up keyframes for animations.', 'duration': 576.103, 'highlights': ['The chapter introduces CSS white spacing, gradients, and animations, including the use of gradient generators and setting backgrounds with images.', 'It explains the process of setting background repeat properties and the use of radial gradients in CSS.', 'The transcript details various CSS animations such as scaling, rotating, skewing, and translating elements, as well as setting up keyframes for animations.']}], 'duration': 1429.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE5069412.jpg', 'highlights': ['The chapter covers various CSS properties including box shadow, text decorations, visibility, handling white spaces, and setting direction.', 'The clear property in CSS ensures that nothing appears before the specified element, demonstrated using the footer tag with a black background and white text.', 'The chapter explains different list style types including unordered lists and ordered lists and their applications, highlighting the change in list style types and positions.', 'The chapter introduces CSS white spacing, gradients, and animations, including the use of gradient generators and setting backgrounds with images.', "The detailed explanation of nth child elements and its application to select alternate child elements with specific styles, such as alternating background colors, adds practicality to the chapter's content."]}, {'end': 7798.952, 'segs': [{'end': 6554.654, 'src': 'embed', 'start': 6523.758, 'weight': 13, 'content': [{'end': 6527.799, 'text': 'So guys, let me tell you that JavaScript has absolutely nothing to do with Java.', 'start': 6523.758, 'duration': 4.041}, {'end': 6532.641, 'text': 'So why was it named JavaScript? Well, it was sort of a marketing strategy.', 'start': 6528.24, 'duration': 4.401}, {'end': 6535.882, 'text': 'When JavaScript was first released, it was called Mocha.', 'start': 6533.181, 'duration': 2.701}, {'end': 6542.265, 'text': 'It was later renamed to LiveScript and then to JavaScript when Netscape and Sun did a license agreement.', 'start': 6536.062, 'duration': 6.203}, {'end': 6544.305, 'text': "Now let's not get into the details of that.", 'start': 6542.625, 'duration': 1.68}, {'end': 6549.549, 'text': 'Now what is JavaScript? In simple terms, JavaScript is the language of the web.', 'start': 6544.665, 'duration': 4.884}, {'end': 6554.654, 'text': 'So basically every browser, PC and mobile phone understands JavaScript.', 'start': 6549.889, 'duration': 4.765}], 'summary': 'Javascript is the language of the web, every browser, pc, and mobile phone understands it.', 'duration': 30.896, 'max_score': 6523.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE6523758.jpg'}, {'end': 6672.957, 'src': 'embed', 'start': 6645.866, 'weight': 7, 'content': [{'end': 6650.227, 'text': 'They use it on the web, mobile servers, applications, and even in IoT.', 'start': 6645.866, 'duration': 4.361}, {'end': 6654.148, 'text': "Now this is probably why it's the most popular language in the world.", 'start': 6650.627, 'duration': 3.521}, {'end': 6662.49, 'text': 'According to Stack Overflow, for the sixth year in a row, JavaScript has remained the most popular and commonly used programming language.', 'start': 6654.648, 'duration': 7.842}, {'end': 6666.032, 'text': "Now, let's look at a few common applications of JavaScript.", 'start': 6662.99, 'duration': 3.042}, {'end': 6672.957, 'text': 'So what can JavaScript do? JavaScript is known mainly for creating beautiful web pages and web applications.', 'start': 6666.372, 'duration': 6.585}], 'summary': 'Javascript is the most popular programming language, used on web, mobile, servers, and iot; according to stack overflow, it has remained the most popular language for six consecutive years.', 'duration': 27.091, 'max_score': 6645.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE6645866.jpg'}, {'end': 6760.231, 'src': 'embed', 'start': 6736.843, 'weight': 16, 'content': [{'end': 6743.921, 'text': "Now we're all aware that the browser has not been a traditional games platform, but recently it has become a robust host for games.", 'start': 6736.843, 'duration': 7.078}, {'end': 6751.145, 'text': "A lot of developers are building small-scale games and applications using JavaScript, and I'm sure all of you can do it too.", 'start': 6744.52, 'duration': 6.625}, {'end': 6752.185, 'text': "It's quite simple.", 'start': 6751.225, 'duration': 0.96}, {'end': 6760.231, 'text': "Now let's talk about some popular JavaScript frameworks, which are the most favored platforms for developers and business in today's time.", 'start': 6752.826, 'duration': 7.405}], 'summary': 'Browser has become a robust games platform; javascript used for small-scale games; popular javascript frameworks for developers and businesses.', 'duration': 23.388, 'max_score': 6736.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE6736843.jpg'}, {'end': 7169.841, 'src': 'embed', 'start': 7140.712, 'weight': 14, 'content': [{'end': 7143.793, 'text': "So I'm going to log hello world onto the console.", 'start': 7140.712, 'duration': 3.081}, {'end': 7144.994, 'text': "That's what this function does.", 'start': 7143.833, 'duration': 1.161}, {'end': 7150.557, 'text': 'Now this hello world is enclosed within brackets and within quotation marks.', 'start': 7146.055, 'duration': 4.502}, {'end': 7155.72, 'text': 'And in JavaScript we always practice to terminate our statements with a semicolon.', 'start': 7151.097, 'duration': 4.623}, {'end': 7157.221, 'text': "Now let's press enter.", 'start': 7156.22, 'duration': 1.001}, {'end': 7164.136, 'text': "So here you can see that it's displaying Hello World, all right? So this means that JavaScript works on a console.", 'start': 7157.691, 'duration': 6.445}, {'end': 7169.841, 'text': 'So this is how browsers are embedded with JavaScript Engine so that they can run JavaScript code.', 'start': 7164.337, 'duration': 5.504}], 'summary': "Demonstration of logging 'hello world' onto console in javascript, emphasizing syntax and browser functionality.", 'duration': 29.129, 'max_score': 7140.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE7140712.jpg'}, {'end': 7392.34, 'src': 'embed', 'start': 7361.942, 'weight': 5, 'content': [{'end': 7363.725, 'text': "Now let's open script tags.", 'start': 7361.942, 'duration': 1.783}, {'end': 7369.51, 'text': "Now in the first method, you're gonna type your entire JavaScript over here.", 'start': 7365.168, 'duration': 4.342}, {'end': 7373.212, 'text': "So within the script tags, you're gonna type your entire JavaScript.", 'start': 7369.85, 'duration': 3.362}, {'end': 7375.352, 'text': "So let's just type a simple line.", 'start': 7373.372, 'duration': 1.98}, {'end': 7377.113, 'text': 'So we executed this earlier.', 'start': 7375.793, 'duration': 1.32}, {'end': 7377.914, 'text': "Let's just do that.", 'start': 7377.153, 'duration': 0.761}, {'end': 7383.036, 'text': "Let's log a message to our console, all right? So let it be hello.", 'start': 7378.354, 'duration': 4.682}, {'end': 7384.597, 'text': "We'll see if this works.", 'start': 7383.556, 'duration': 1.041}, {'end': 7392.34, 'text': "Guys, don't forget to terminate a statement with a semicolon, all right? Now save the file and open up your browser.", 'start': 7385.237, 'duration': 7.103}], 'summary': 'Demonstrating writing and executing javascript within script tags.', 'duration': 30.398, 'max_score': 7361.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE7361942.jpg'}, {'end': 7437.005, 'src': 'embed', 'start': 7408.89, 'weight': 0, 'content': [{'end': 7412.593, 'text': 'So what we can do is we can open up a new file from the explorer window.', 'start': 7408.89, 'duration': 3.703}, {'end': 7415.034, 'text': "Let's go here, open up a new file.", 'start': 7413.273, 'duration': 1.761}, {'end': 7417.115, 'text': "Let's name it hello.js.", 'start': 7415.474, 'duration': 1.641}, {'end': 7420.197, 'text': "All right, it's a JavaScript file.", 'start': 7418.736, 'duration': 1.461}, {'end': 7425.86, 'text': "Now what we'll do is we'll copy this code and let's paste it over here.", 'start': 7420.617, 'duration': 5.243}, {'end': 7430.742, 'text': 'Now you have to reference this hello.js file in your HTML file.', 'start': 7426.74, 'duration': 4.002}, {'end': 7437.005, 'text': "So how do you do that? Okay, so let's add an attribute over here.", 'start': 7431.222, 'duration': 5.783}], 'summary': 'Demonstrating how to create and reference a new javascript file.', 'duration': 28.115, 'max_score': 7408.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE7408890.jpg'}, {'end': 7529.035, 'src': 'embed', 'start': 7488.762, 'weight': 2, 'content': [{'end': 7494.944, 'text': 'So, guys, I hope you have a brief idea about how JavaScript works and how you can use your browser to run JavaScript okay?', 'start': 7488.762, 'duration': 6.182}, {'end': 7497.545, 'text': "So now let's get on with our JavaScript fundamentals.", 'start': 7495.144, 'duration': 2.401}, {'end': 7501.026, 'text': "I'm gonna discuss variables, constants, and a few other concepts over here.", 'start': 7497.645, 'duration': 3.381}, {'end': 7508.983, 'text': 'Okay, so what are variables? Variable is a name given to a memory location which acts as a container for storing data.', 'start': 7501.801, 'duration': 7.182}, {'end': 7516.005, 'text': "Now what does this mean? Let's say that I want to define a variable called name and I want to store a name in it.", 'start': 7509.403, 'duration': 6.602}, {'end': 7523.728, 'text': "Let's say the name is Edureka, okay? So I'm going to declare a variable called name and I'm going to store Edureka in that variable.", 'start': 7516.346, 'duration': 7.382}, {'end': 7529.035, 'text': 'So name is the name of the variable and edureka is the value of this variable.', 'start': 7524.188, 'duration': 4.847}], 'summary': 'Introduction to javascript fundamentals, covering variables and memory storage.', 'duration': 40.273, 'max_score': 7488.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE7488762.jpg'}], 'start': 6498.828, 'title': 'Javascript fundamentals', 'summary': 'Covers the basics, power, and applications of javascript, including its use in leading websites, popular frameworks, and major companies. it also delves into platform independence, browser support, coding concepts, and using live server to host javascript code, and explains variables, constants, and data types with practical demonstrations.', 'chapters': [{'end': 6835.165, 'start': 6498.828, 'title': 'Introduction to javascript', 'summary': 'Explains the basics of javascript, its history, applications, and popularity, highlighting its universal acceptance, usage in web development, smartwatches, websites, games, and popular frameworks like angularjs, reactjs, and meteor.', 'duration': 336.337, 'highlights': ['JavaScript is the most popular and commonly used programming language, according to Stack Overflow, for the sixth year in a row. JavaScript has consistently remained the most popular programming language, as per Stack Overflow, for six consecutive years.', 'JavaScript is used in the majority of websites, smartwatches like Pebble, popular websites like Google, Facebook, Netflix, Amazon, and for building games. JavaScript is widely utilized in websites, smartwatches, and popular websites like Google, Facebook, Netflix, Amazon, and for developing games.', 'Popular JavaScript frameworks include AngularJS, known for rapid development pace, and ReactJS, efficient in maintaining high traffic applications and search engine optimization. AngularJS is favored for rapid development, while ReactJS excels in maintaining high traffic applications and search engine optimization.', 'JavaScript is used as a universal scripting language in browsers mainly on the client side, and it is also used on the back end with frameworks like Meteor, providing the flexibility to use one language everywhere. JavaScript serves as a universal scripting language in browsers and is also utilized on the back end with frameworks like Meteor, offering the flexibility to use one language across both front end and back end development.', 'JavaScript is also used in smartwatches, websites, and for creating games, and it has become a robust host for building small-scale games and applications. JavaScript finds application in smartwatches, websites, and game development, serving as a robust platform for creating small-scale games and applications.']}, {'end': 7030.818, 'start': 6835.725, 'title': 'Javascript: power and popularity', 'summary': 'Explains the importance of javascript, where over 70% of leading websites use jquery for interactive features, and major companies like amazon, paypal, netflix, and google rely on javascript for a seamless web browsing experience. it highlights the simplicity and speed of javascript, as well as its rich set of frameworks and its ability to make web pages more interactive and attractive.', 'duration': 195.093, 'highlights': ["JavaScript is used by over 70% of the world's leading websites for interactive features. Over 70% of the world's leading websites make use of jQuery for interactive and attractive features.", 'Major companies like Amazon, PayPal, Netflix, and Google rely on JavaScript for a seamless web browsing experience. Reputed companies like Amazon, PayPal, Netflix, and Google make use of JavaScript for a seamless web browsing experience.', 'JavaScript is one of the simplest programming languages to learn, with a weak type approach and readable syntax. JavaScript is straightforward to learn, with a weak type approach and readable syntax, making it accessible to a wide range of users.', "JavaScript's speed is attributed to its client-side nature, allowing code functions to run immediately without waiting for server requests. JavaScript's speed is due to its client-side nature, enabling immediate execution of code functions without server requests, making it faster in today's world.", "JavaScript comes with a rich set of frameworks including node.js, angular.js, and react, contributing to its popularity. JavaScript's popularity is supported by a rich set of frameworks like node.js, angular.js, and react, which efficiently build web applications and server applications.", "JavaScript makes web pages more interactive and attractive, attracting leads and customers to e-commerce websites. JavaScript's ability to make web pages interactive and attractive not only enhances the web's aesthetics but also draws leads and customers to e-commerce websites."]}, {'end': 7252.659, 'start': 7031.505, 'title': 'Introduction to javascript', 'summary': 'Introduces javascript as an interpreted language that can be run on any browser, highlighting its platform independence, browser support, and basic coding concepts, and demonstrates running javascript code directly in the browser console, with an overview of setting up a code editor.', 'duration': 221.154, 'highlights': ['JavaScript is platform independent and supported by all major browsers like Internet Explorer, Mozilla Firefox, Google Chrome, and Safari. JavaScript is supported by all browsers and can be run on any platform, providing platform independence.', 'Introduction to basic programming concepts of JavaScript, highlighting similarities with the C language. Basic programming concepts of JavaScript are introduced, emphasizing their similarity to the C language.', 'Demonstration of running JavaScript code directly in the browser console, emphasizing the ease of writing JavaScript without the need for editors or tools. The chapter demonstrates running JavaScript code in the browser console without the need for editors or tools, highlighting the ease of writing JavaScript.', 'Overview of setting up a code editor, with a specific mention of Visual Studio Code as a lightweight option, and a link for downloading provided in the description. An overview of setting up a code editor is provided, with a specific mention of Visual Studio Code and a link for downloading provided in the description.']}, {'end': 7488.082, 'start': 7253.099, 'title': 'Using live server to host javascript code', 'summary': 'Explains how to use live server as a lightweight web server to host a web application, install it in visual studio code, and add javascript code to an html file using script tags or by referencing an external javascript file.', 'duration': 234.983, 'highlights': ["Live Server is a lightweight web server used to serve web applications Live server is basically a lightweight web server that we're going to use to serve our web application.", 'Installing Live Server in Visual Studio Code Install live server in Visual Studio Code and restart the application to use it.', 'Two ways of adding JavaScript code to HTML file: script tags and referencing an external JavaScript file There are two ways of adding your JavaScript code in the HTML file. The first way is to write the entire code within script tags, and the second way is to reference a JavaScript file in your HTML file.']}, {'end': 7798.952, 'start': 7488.762, 'title': 'Javascript fundamentals: variables, constants, and data types', 'summary': 'Discusses the concepts of variables, constants, and data types in javascript, including the use of memory locations, practical demonstrations of constants, and explanations of primitive data types such as numbers, strings, and boolean.', 'duration': 310.19, 'highlights': ['Explanation of constants and practical demonstration The chapter provides an explanation of constants as fixed values that do not change during execution time and includes a practical demonstration of declaring a constant variable using the keyword const and attempting to change its value.', 'Introduction to primitive data types and practical examples The chapter introduces primitive data types in JavaScript, including numbers, strings, and Booleans, and provides practical examples to demonstrate their usage and behavior, such as enclosing values in quotation marks to create strings.', "Explanation of variables and memory location The chapter explains variables as memory locations acting as containers for storing data and provides an example of defining a variable 'name' and storing a value 'Edureka' in it, highlighting the concept of temporary memory location and the value contained in the variable."]}], 'duration': 1300.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE6498828.jpg', 'highlights': ['JavaScript is the most popular programming language for six consecutive years, according to Stack Overflow.', 'JavaScript is widely utilized in websites, smartwatches, and popular websites like Google, Facebook, Netflix, Amazon, and for developing games.', 'AngularJS is favored for rapid development, while ReactJS excels in maintaining high traffic applications and search engine optimization.', 'JavaScript serves as a universal scripting language in browsers and is also utilized on the back end with frameworks like Meteor, offering the flexibility to use one language across both front end and back end development.', "Over 70% of the world's leading websites make use of jQuery for interactive and attractive features.", 'Reputed companies like Amazon, PayPal, Netflix, and Google make use of JavaScript for a seamless web browsing experience.', 'JavaScript is straightforward to learn, with a weak type approach and readable syntax, making it accessible to a wide range of users.', "JavaScript's speed is due to its client-side nature, enabling immediate execution of code functions without server requests, making it faster in today's world.", "JavaScript's popularity is supported by a rich set of frameworks like node.js, angular.js, and react, which efficiently build web applications and server applications.", 'JavaScript is platform independent and supported by all browsers, providing platform independence.', 'Basic programming concepts of JavaScript are introduced, emphasizing their similarity to the C language.', 'The chapter demonstrates running JavaScript code in the browser console without the need for editors or tools, highlighting the ease of writing JavaScript.', "Live server is basically a lightweight web server that we're going to use to serve our web application.", 'There are two ways of adding your JavaScript code in the HTML file. The first way is to write the entire code within script tags, and the second way is to reference a JavaScript file in your HTML file.', 'The chapter provides an explanation of constants as fixed values that do not change during execution time and includes a practical demonstration of declaring a constant variable using the keyword const and attempting to change its value.', 'The chapter introduces primitive data types in JavaScript, including numbers, strings, and Booleans, and provides practical examples to demonstrate their usage and behavior, such as enclosing values in quotation marks to create strings.', "The chapter explains variables as memory locations acting as containers for storing data and provides an example of defining a variable 'name' and storing a value 'Edureka' in it, highlighting the concept of temporary memory location and the value contained in the variable."]}, {'end': 9847.453, 'segs': [{'end': 7968.945, 'src': 'embed', 'start': 7936.232, 'weight': 0, 'content': [{'end': 7938.433, 'text': 'A comma is needed to separate two values.', 'start': 7936.232, 'duration': 2.201}, {'end': 7941.774, 'text': "Let's add color palette.", 'start': 7939.353, 'duration': 2.421}, {'end': 7944.295, 'text': 'Add canvas.', 'start': 7943.275, 'duration': 1.02}, {'end': 7948.196, 'text': 'So we have three items in our shopping list.', 'start': 7946.396, 'duration': 1.8}, {'end': 7951.257, 'text': "Now let's just log this on the console.", 'start': 7948.777, 'duration': 2.48}, {'end': 7953.778, 'text': 'Save your changes.', 'start': 7952.818, 'duration': 0.96}, {'end': 7958.02, 'text': 'Make sure you change the path in the HTML file array.', 'start': 7954.298, 'duration': 3.722}, {'end': 7960.781, 'text': 'save it.', 'start': 7959.6, 'duration': 1.181}, {'end': 7965.663, 'text': "open up your browser now, here you can see that it's displaying the entire array.", 'start': 7960.781, 'duration': 4.882}, {'end': 7968.945, 'text': 'now, guys, let me tell you that arrays are numbered from zero.', 'start': 7965.663, 'duration': 3.282}], 'summary': 'Added comma, color palette, and canvas. array displays three items. arrays are numbered from zero.', 'duration': 32.713, 'max_score': 7936.232, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE7936232.jpg'}, {'end': 8175.9, 'src': 'embed', 'start': 8148.636, 'weight': 3, 'content': [{'end': 8152.679, 'text': 'Now there are seven elements, all right? So you can see six over here.', 'start': 8148.636, 'duration': 4.043}, {'end': 8156.021, 'text': 'Now guys, let me show you another example.', 'start': 8153.86, 'duration': 2.161}, {'end': 8163.006, 'text': 'Now with arrays in JavaScript, you can have variables with different data types in one array itself.', 'start': 8156.041, 'duration': 6.965}, {'end': 8167.21, 'text': 'So a single array can have variables with different data type.', 'start': 8163.467, 'duration': 3.743}, {'end': 8168.991, 'text': 'Let me explain this with an example.', 'start': 8167.41, 'duration': 1.581}, {'end': 8175.9, 'text': "So I'm declaring an array called mix, all right? Now let's list out the elements of mix.", 'start': 8169.011, 'duration': 6.889}], 'summary': "Javascript arrays can contain variables with different data types, demonstrated with an array called 'mix'.", 'duration': 27.264, 'max_score': 8148.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE8148636.jpg'}, {'end': 8520.45, 'src': 'embed', 'start': 8458.847, 'weight': 1, 'content': [{'end': 8461.709, 'text': "Because it's a number, I'm not putting it in quotation marks.", 'start': 8458.847, 'duration': 2.862}, {'end': 8465.821, 'text': "Then let's define, school, which is another property.", 'start': 8462.169, 'duration': 3.652}, {'end': 8468.123, 'text': 'Say she goes to DPS.', 'start': 8466.502, 'duration': 1.621}, {'end': 8474.247, 'text': "Then there is class, let's say 10th standard.", 'start': 8469.604, 'duration': 4.643}, {'end': 8477.829, 'text': 'Now the next property is subjects.', 'start': 8475.788, 'duration': 2.041}, {'end': 8480.214, 'text': 'Now I have more than one subject.', 'start': 8478.533, 'duration': 1.681}, {'end': 8483.076, 'text': 'That means I have more than one value to this variable.', 'start': 8480.274, 'duration': 2.802}, {'end': 8485.837, 'text': 'Now, how do I store more than one value in this variable?', 'start': 8483.396, 'duration': 2.441}, {'end': 8488.179, 'text': 'So, guys, do you remember I spoke about arrays?', 'start': 8486.198, 'duration': 1.981}, {'end': 8491.641, 'text': 'Arrays are used to store multiple values of the same variable.', 'start': 8488.339, 'duration': 3.302}, {'end': 8493.982, 'text': "So let's define this as an array.", 'start': 8492.061, 'duration': 1.921}, {'end': 8496.024, 'text': 'So this is how we define an array.', 'start': 8494.303, 'duration': 1.721}, {'end': 8497.585, 'text': "Let's add physics.", 'start': 8496.384, 'duration': 1.201}, {'end': 8500.586, 'text': 'Now add comma after every value.', 'start': 8498.245, 'duration': 2.341}, {'end': 8503.148, 'text': 'So physics and chemistry.', 'start': 8500.786, 'duration': 2.362}, {'end': 8506.35, 'text': "Let's add biology.", 'start': 8503.928, 'duration': 2.422}, {'end': 8511.664, 'text': 'and maths.', 'start': 8509.743, 'duration': 1.921}, {'end': 8514.746, 'text': "so don't forget to terminate this over here.", 'start': 8511.664, 'duration': 3.082}, {'end': 8520.45, 'text': "now I've typed out the wrong spelling for physics.", 'start': 8514.746, 'duration': 5.704}], 'summary': 'Demonstration of defining and using arrays in a programming context.', 'duration': 61.603, 'max_score': 8458.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE8458847.jpg'}, {'end': 9777.299, 'src': 'embed', 'start': 9741.139, 'weight': 5, 'content': [{'end': 9745.323, 'text': "okay, let me type out the code and then you'll understand what i'm saying.", 'start': 9741.139, 'duration': 4.184}, {'end': 9762.965, 'text': "okay, okay, So that's a long code, but this is very simple.", 'start': 9745.323, 'duration': 17.642}, {'end': 9769.659, 'text': "Now what I've done here is I've defined a variable called games, and the value of that variable is football.", 'start': 9763.205, 'duration': 6.454}, {'end': 9773.777, 'text': "okay?. Now I'm passing this variable into the switch statement.", 'start': 9769.659, 'duration': 4.118}, {'end': 9777.299, 'text': 'So basically the value of games is football over here.', 'start': 9774.057, 'duration': 3.242}], 'summary': "Defined a variable 'games' with value 'football' and used it in a switch statement.", 'duration': 36.16, 'max_score': 9741.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE9741139.jpg'}], 'start': 7799.492, 'title': 'Javascript fundamentals', 'summary': 'Covers javascript data types, arrays, objects, functions and parameters, if and else statements, loops, and switch, with practical examples and demonstrations. it includes explanations and examples of boolean, undefined, and null data types, array handling, object properties, function declaration and calling, if and else statements, and loops such as while, do-while, and for loops, as well as switch statements.', 'chapters': [{'end': 7849.945, 'start': 7799.492, 'title': 'Javascript data types', 'summary': 'Discusses boolean, undefined, and null data types in javascript, explaining their characteristics and providing an example of each.', 'duration': 50.453, 'highlights': ['The chapter discusses the Boolean, undefined, and null data types in JavaScript, providing clear examples of each.', 'The undefined data type is explained with an example of defining a variable without initializing it, resulting in the variable being labeled as undefined.', 'The concept of null data type is introduced, with an example to illustrate its usage.']}, {'end': 8225.855, 'start': 7852.031, 'title': 'Arrays in javascript', 'summary': 'Explains the concept of arrays, including their definition, usage, accessing elements, adding elements, sorting, and handling different data types, demonstrated through code execution. it also covers the basics of arrays, such as defining, adding, and accessing elements, and demonstrates sorting and adding elements to an array, as well as handling different data types within an array.', 'duration': 373.824, 'highlights': ['The chapter explains the basics of arrays, such as defining, adding, and accessing elements, and demonstrates sorting and adding elements to an array, as well as handling different data types within an array.', "Arrays are used to store multiple values in a single variable, and the concept is demonstrated using a shopping list example, where items like paintbrush, canvas, and palette are stored in the 'shopping' array.", "The demonstration of accessing array elements and explaining the numbering of elements from zero, with an example of accessing 'color palette' at position one, provides a clear understanding of array indexing.", "The code execution includes defining an array 'numbers', adding elements, and performing operations like accessing and sorting, providing a practical understanding of array manipulation in JavaScript.", "The concept of arrays allowing variables with different data types within a single array is demonstrated through the 'mix' array, containing elements of string and number data types."]}, {'end': 8574.301, 'start': 8225.855, 'title': 'Understanding javascript objects', 'summary': "Explains the concept of objects in javascript, using examples of defining and accessing object properties, such as a girl's attributes and a pen's properties, also demonstrating object properties with multiple values using an array.", 'duration': 348.446, 'highlights': ["Objects in JavaScript are like real-life objects, containing properties like a girl's name, age, and eye color, demonstrating the concept with the example of a girl named Emily with age 15 and brown eyes. Explains the concept of objects in JavaScript by using the example of a girl named Emily with age 15 and brown eyes, demonstrating the idea of objects containing properties.", "Demonstrates the declaration of an object 'pen' with properties like type, color, and cost, and accessing the cost property using the dot notation for displaying the value 10. Illustrates the declaration of an object 'pen' with properties like type, color, and cost, and demonstrates accessing the cost property using the dot notation for displaying the value 10.", "Shows how to define an object 'Emily' with properties like age, school, class, and subjects, and demonstrates storing multiple values in the 'subjects' property using an array, and accessing a specific element from the array. Demonstrates the definition of an object 'Emily' with properties like age, school, class, and subjects, and shows storing multiple values in the 'subjects' property using an array, and accessing a specific element from the array."]}, {'end': 8779.712, 'start': 8574.802, 'title': 'Javascript functions and parameters', 'summary': 'Discusses the basics of javascript functions, including the declaration, calling, parameters, and arguments, with an example of creating and calling a function to find the product of two numbers, leading to a demonstration of conditional statements.', 'duration': 204.91, 'highlights': ['The chapter discusses the basics of JavaScript functions, including the declaration, calling, parameters, and arguments. It covers the fundamental concepts of functions in JavaScript, providing a comprehensive understanding of how to declare, call, and use parameters and arguments in functions.', 'An example of creating and calling a function to find the product of two numbers is demonstrated. A specific example of creating a function to find the product of two numbers is explained, including the process of declaring the function, passing parameters, and calling the function to obtain the result.', 'Demonstration of conditional statements is provided. The chapter concludes with the demonstration of conditional statements, highlighting their usage to perform different actions based on varying conditions.']}, {'end': 9107.063, 'start': 8780.192, 'title': 'If and else statements in javascript', 'summary': 'Explains the if and else statements in javascript, detailing the syntax and practical usage of if statements, demonstrating the execution of code based on conditions, and illustrating the use of else statements for executing alternative code blocks. it also demonstrates the use of multiple conditions with the and operator.', 'duration': 326.871, 'highlights': ["The chapter explains the if and else statements in JavaScript Provides an overview of the chapter's focus on if and else statements in JavaScript.", 'demonstrating the execution of code based on conditions Illustrates the execution of code based on conditions and the practical usage of if statements.', 'demonstrating the use of else statements for executing alternative code blocks Shows the use of else statements for executing alternative code blocks when the if condition is not met.', 'illustrating the use of multiple conditions with the and operator Demonstrates the use of the and operator to include multiple conditions within the if block for more complex conditional checks.']}, {'end': 9847.453, 'start': 9108.004, 'title': 'Javascript loops and switch', 'summary': "Covers the concepts of if-else statements, including the or operator, and then delves into the three kinds of loops - while loop, do-while loop, and for loop. the practical examples and explanations provide a comprehensive understanding of each loop's functionality, with for loop's application in writing repetitive tasks being especially highlighted. the chapter concludes with a detailed explanation and practical example of switch statements. the transcript discusses the syntax, working principle, and practical application of switch statements through an example.", 'duration': 739.449, 'highlights': ['The chapter covers the concepts of if-else statements, including the or operator, and then delves into the three kinds of loops - while loop, do-while loop, and for loop. The transcript provides an overview of if-else statements and introduces the three kinds of loops - while loop, do-while loop, and for loop.', "The practical examples and explanations provide a comprehensive understanding of each loop's functionality, with for loop's application in writing repetitive tasks being especially highlighted. The transcript includes practical examples and detailed explanations to illustrate the functionality of each loop. It emphasizes the application of for loop in writing repetitive tasks.", 'The chapter concludes with a detailed explanation and practical example of switch statements. The transcript concludes with a detailed explanation and a practical example of switch statements, covering their syntax, working principle, and practical application.']}], 'duration': 2047.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE7799492.jpg', 'highlights': ['The chapter covers the basics of JavaScript functions, including declaration, calling, parameters, and arguments, providing a comprehensive understanding.', 'The chapter explains the if and else statements in JavaScript, demonstrating the execution of code based on conditions and the practical usage of if statements.', 'The chapter discusses the Boolean, undefined, and null data types in JavaScript, providing clear examples of each.', 'The chapter explains the basics of arrays, such as defining, adding, and accessing elements, and demonstrates sorting and adding elements to an array, as well as handling different data types within an array.', 'The chapter covers the concepts of if-else statements, including the or operator, and then delves into the three kinds of loops - while loop, do-while loop, and for loop.', 'The chapter concludes with a detailed explanation and practical example of switch statements, covering their syntax, working principle, and practical application.']}, {'end': 11427.716, 'segs': [{'end': 9881.421, 'src': 'embed', 'start': 9853.365, 'weight': 2, 'content': [{'end': 9860.067, 'text': "Now, before I move on, I wanted to tell you that I'll be making use of Visual Studio code, which is basically a code editor,", 'start': 9853.365, 'duration': 6.702}, {'end': 9862.968, 'text': "to run code snippets that I'll be explaining in this session.", 'start': 9860.067, 'duration': 2.901}, {'end': 9869.149, 'text': "So if you don't have Visual Studio code y'all can go ahead and download it or use any other editor of your choice.", 'start': 9863.428, 'duration': 5.721}, {'end': 9873.01, 'text': 'Now guys before I start off with the session, let me show you how Visual Studio code looks.', 'start': 9869.469, 'duration': 3.541}, {'end': 9876.131, 'text': "So I'm just going to open up this editor.", 'start': 9873.67, 'duration': 2.461}, {'end': 9881.421, 'text': "Now guys, this is a very simple editor and I think it's my most favorite editor.", 'start': 9876.738, 'duration': 4.683}], 'summary': 'Using visual studio code for code snippets demonstration.', 'duration': 28.056, 'max_score': 9853.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE9853365.jpg'}, {'end': 10329.638, 'src': 'embed', 'start': 10300.068, 'weight': 10, 'content': [{'end': 10302.849, 'text': "Like I said earlier, I'll leave a link in the description box.", 'start': 10300.068, 'duration': 2.781}, {'end': 10306.091, 'text': 'You all can go and check out that video and then come back to this video.', 'start': 10302.869, 'duration': 3.222}, {'end': 10306.692, 'text': 'All right.', 'start': 10306.412, 'duration': 0.28}, {'end': 10309.073, 'text': "So guys that's how you download jQuery.", 'start': 10307.192, 'duration': 1.881}, {'end': 10310.474, 'text': "It's not like an installation.", 'start': 10309.193, 'duration': 1.281}, {'end': 10312.555, 'text': "It's basically downloading the jQuery.", 'start': 10310.534, 'duration': 2.021}, {'end': 10316.068, 'text': "Okay So now let's look at the document object model.", 'start': 10313.076, 'duration': 2.992}, {'end': 10321.332, 'text': 'Now the document object model is a tree structure of the various elements of HTML.', 'start': 10316.388, 'duration': 4.944}, {'end': 10324.935, 'text': 'Here you can see that it begins with document, this is basically this.', 'start': 10321.892, 'duration': 3.043}, {'end': 10329.638, 'text': 'This document is basically the ancestor of every other element in this file.', 'start': 10325.395, 'duration': 4.243}], 'summary': 'The transcript discusses downloading jquery and the document object model in html.', 'duration': 29.57, 'max_score': 10300.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE10300068.jpg'}, {'end': 10374.753, 'src': 'embed', 'start': 10345.73, 'weight': 12, 'content': [{'end': 10349.573, 'text': 'Similarly, H1 and the P tags are children of body.', 'start': 10345.73, 'duration': 3.843}, {'end': 10351.314, 'text': 'Okay, so they are just descendants.', 'start': 10349.893, 'duration': 1.421}, {'end': 10355.898, 'text': 'Now guys, this is a simple tree structure and this is what document object model is.', 'start': 10351.815, 'duration': 4.083}, {'end': 10357.699, 'text': "It's not any complex concept.", 'start': 10355.978, 'duration': 1.721}, {'end': 10360.702, 'text': "It's a very simple structure of your HTML file.", 'start': 10358.12, 'duration': 2.582}, {'end': 10363.324, 'text': "Now let's move on to jQuery selectors.", 'start': 10361.182, 'duration': 2.142}, {'end': 10366.866, 'text': "Now the first thing we're gonna learn in jQuery is the selectors.", 'start': 10363.724, 'duration': 3.142}, {'end': 10374.753, 'text': 'Now why do we need selectors? These selectors allow you to select and then manipulate the HTML elements or the DOM elements.', 'start': 10367.187, 'duration': 7.566}], 'summary': 'Document object model is a simple tree structure of html file. jquery selectors allow manipulation of dom elements.', 'duration': 29.023, 'max_score': 10345.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE10345730.jpg'}, {'end': 10646.797, 'src': 'embed', 'start': 10614.106, 'weight': 3, 'content': [{'end': 10615.987, 'text': "Now let's try selecting the body.", 'start': 10614.106, 'duration': 1.881}, {'end': 10624.044, 'text': "Now that I've selected the body, you can see that it highlights the entire body and it shows me the dimensions of the body as well.", 'start': 10617.921, 'duration': 6.123}, {'end': 10626.486, 'text': 'So guys, this is how the selector works.', 'start': 10624.064, 'duration': 2.422}, {'end': 10628.687, 'text': "Now let's make things a little more interesting.", 'start': 10626.846, 'duration': 1.841}, {'end': 10631.168, 'text': "Let's just go back to our Visual Studio code.", 'start': 10629.367, 'duration': 1.801}, {'end': 10636.231, 'text': "Now what I'm gonna do here is within my first list element, I'm going to add an anchor tag.", 'start': 10631.228, 'duration': 5.003}, {'end': 10646.797, 'text': "Let's say we randomly add an anchor tag and we're basically directing this to google.com and let's call it Google.", 'start': 10637.432, 'duration': 9.365}], 'summary': 'Demonstrating body selection and adding an anchor tag to code.', 'duration': 32.691, 'max_score': 10614.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE10614106.jpg'}, {'end': 10729.328, 'src': 'embed', 'start': 10700.831, 'weight': 11, 'content': [{'end': 10704.233, 'text': "Okay, so it's basically like specifying the path to this anchor tag.", 'start': 10700.831, 'duration': 3.402}, {'end': 10709.736, 'text': "Now because there's only one anchor tag in this entire list, it's going to select this anchor tag only.", 'start': 10704.633, 'duration': 5.103}, {'end': 10710.977, 'text': "So let's see how that's done.", 'start': 10709.976, 'duration': 1.001}, {'end': 10715.42, 'text': 'So you simply type out UL, LI, and A.', 'start': 10711.778, 'duration': 3.642}, {'end': 10719.722, 'text': 'So this is your unordered list, this is your list item, and this is your anchor tag.', 'start': 10715.42, 'duration': 4.302}, {'end': 10721.103, 'text': "Now let's click on Enter.", 'start': 10719.982, 'duration': 1.121}, {'end': 10724.905, 'text': 'So when I click on A, you can see that it highlights my anchor tag.', 'start': 10721.623, 'duration': 3.282}, {'end': 10727.247, 'text': 'It also gives me the dimensions along with it.', 'start': 10725.285, 'duration': 1.962}, {'end': 10729.328, 'text': 'So guys, this is how it works.', 'start': 10727.787, 'duration': 1.541}], 'summary': 'Demonstration of selecting an anchor tag in a web page using ul, li, and a, with visual highlighting and dimensions.', 'duration': 28.497, 'max_score': 10700.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE10700831.jpg'}, {'end': 11101.61, 'src': 'embed', 'start': 11028.668, 'weight': 1, 'content': [{'end': 11032.61, 'text': "Similarly let's say I just want to return the first element of my list.", 'start': 11028.668, 'duration': 3.942}, {'end': 11034.932, 'text': 'Then I would do something like this.', 'start': 11033.571, 'duration': 1.361}, {'end': 11040.174, 'text': 'So what I did here was I selected list and in that I mentioned first.', 'start': 11035.632, 'duration': 4.542}, {'end': 11043.336, 'text': 'So I basically mentioned the first element of the list.', 'start': 11040.895, 'duration': 2.441}, {'end': 11048.359, 'text': 'Now this returned only the golden retriever to me which is exactly the first element of my list.', 'start': 11043.776, 'duration': 4.583}, {'end': 11050.605, 'text': 'Yeah, you can see that golden retriever.', 'start': 11048.985, 'duration': 1.62}, {'end': 11053.486, 'text': "Now let's say that I want to replace some content.", 'start': 11050.885, 'duration': 2.601}, {'end': 11058.067, 'text': "Okay, let's say I want to replace this by Edureka with something else.", 'start': 11053.866, 'duration': 4.201}, {'end': 11060.188, 'text': 'Okay, let me just refresh.', 'start': 11058.727, 'duration': 1.461}, {'end': 11065.809, 'text': "All right, so how I'm going to do this is first always start off with the selector.", 'start': 11060.828, 'duration': 4.981}, {'end': 11069.83, 'text': "So I'm selecting my P, which is my paragraph tag.", 'start': 11066.749, 'duration': 3.081}, {'end': 11076.712, 'text': "Now since I have only one paragraph within this entire HTML file, it knows that it's this paragraph.", 'start': 11070.19, 'duration': 6.522}, {'end': 11079.877, 'text': "okay, so let's say there was another paragraph over here.", 'start': 11077.296, 'duration': 2.581}, {'end': 11085.799, 'text': "then what you would do is you would mention paragraph colon first and you'd perform an action on it.", 'start': 11079.877, 'duration': 5.922}, {'end': 11089.46, 'text': "okay, so yeah, let's coming back to this.", 'start': 11085.799, 'duration': 3.661}, {'end': 11093.804, 'text': "i'm going to say text welcome to this fun tutorial.", 'start': 11089.46, 'duration': 4.344}, {'end': 11101.61, 'text': "So what I've done here is I've selected the paragraph tag and then I've applied the dot text function on this tag.", 'start': 11094.305, 'duration': 7.305}], 'summary': 'Demonstrated element selection and replacement in html using jquery.', 'duration': 72.942, 'max_score': 11028.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE11028668.jpg'}, {'end': 11171.867, 'src': 'embed', 'start': 11146.192, 'weight': 0, 'content': [{'end': 11153.336, 'text': "So what I've done here is I've selected the list and from the list I've selected the last element and I'm running HTML tag on it.", 'start': 11146.192, 'duration': 7.144}, {'end': 11155.217, 'text': 'So this returns Boxer.', 'start': 11153.836, 'duration': 1.381}, {'end': 11157.198, 'text': 'You all can see that it returns Boxer.', 'start': 11155.497, 'duration': 1.701}, {'end': 11160.6, 'text': "Now let's see how you can set the content using HTML.", 'start': 11157.639, 'duration': 2.961}, {'end': 11165.923, 'text': "Now what we're gonna do is we're going to change this last element over here which says Boxer.", 'start': 11161.121, 'duration': 4.802}, {'end': 11167.504, 'text': "We'll change it to something else.", 'start': 11166.364, 'duration': 1.14}, {'end': 11171.867, 'text': 'So guys bear with me when I type the code.', 'start': 11169.886, 'duration': 1.981}], 'summary': "Demonstrating selecting and modifying html content, returning 'boxer'.", 'duration': 25.675, 'max_score': 11146.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE11146192.jpg'}], 'start': 9853.365, 'title': 'Jquery basics and usage', 'summary': 'Covers the usage of visual studio code for coding, including installation of the live server extension and organization of code snippets. it also provides an overview of javascript and jquery, emphasizing their roles in creating interactive webpages, and introduces jquery selectors, methods, and manipulation of html elements.', 'chapters': [{'end': 9928.997, 'start': 9853.365, 'title': 'Using visual studio code for coding', 'summary': 'Covers the usage of visual studio code as a code editor, emphasizing the installation of the live server extension to host web pages and the process of creating and organizing code snippets.', 'duration': 75.632, 'highlights': ['The importance of using Visual Studio code as a code editor and the flexibility to use other preferred editors like Sublime Text is emphasized.', 'The necessity of installing the live server extension in Visual Studio code to host web pages is highlighted for effective web development.', 'Guidance on creating a folder to contain code snippets and the practice of organizing code in a structured manner is provided.', 'Instructions on how to download and install Visual Studio code and the live server extension are given to facilitate the setup process for beginners.']}, {'end': 10483.349, 'start': 9929.577, 'title': 'Javascript and jquery basics', 'summary': 'Provides an overview of javascript and jquery, highlighting that javascript is a universal language of the web, used for creating interactive webpages, while jquery simplifies dom manipulation and offers cross-browser support. it also covers the basics of installing jquery and understanding the document object model (dom).', 'duration': 553.772, 'highlights': ['Introduction to JavaScript JavaScript is a universal language of the web, used for making webpages or applications look more alive and interactive, and it is an interpreted language understood by every PC, mobile phone, and browser.', 'Benefits of Using jQuery jQuery simplifies DOM manipulation, offers cross-browser support, and comes with a diverse community of contributors, comprehensive documentation, and thousands of free plugins, enhancing user experience.', 'Installing jQuery jQuery can be installed locally by copying the library to the local machine and including it in the HTML code, or it can be linked to a CDN for direct inclusion in the HTML code.', 'Understanding the Document Object Model (DOM) The DOM is a tree structure of HTML elements, and it is essential for web developers to understand and manipulate the DOM to create interactive web pages.', 'Introduction to jQuery Selectors jQuery selectors allow web developers to select and manipulate HTML elements, enabling them to add effects and make changes to the web page.']}, {'end': 10981.246, 'start': 10484.37, 'title': 'Introduction to jquery selectors and methods', 'summary': 'Introduces jquery selectors and methods, explaining how to use the dollar function to select elements, manipulate the dom, and apply methods such as .css, .before, .after, and .text.', 'duration': 496.876, 'highlights': ['jQuery selector replaces traditional JavaScript functions The dollar function in jQuery replaces traditional JavaScript functions like document.getElementByID and querySelector, simplifying the process of selecting elements.', 'Manipulating DOM elements using jQuery selectors jQuery selectors allow manipulation of DOM elements by selecting and applying methods to them, providing flexibility and control in web development.', 'Applying CSS styling to selected elements using .css method Demonstrates the use of the .css method to apply styles to selected elements, such as changing the color and background color of an H1 tag.', 'Using .before and .after methods to insert content before or after selected elements Illustrates the use of .before and .after methods to insert specified content before or after selected elements, such as adding text before an unordered list.', 'Understanding the .text method for setting or returning text content of selected elements Explains the use of the .text method to set or return the text content of selected elements, offering a simple way to manipulate text within elements.']}, {'end': 11427.716, 'start': 10981.566, 'title': 'Manipulating html elements with jquery', 'summary': 'Demonstrates how to manipulate html elements using jquery, including selecting elements, manipulating text and html content, applying css styles, and working with attributes.', 'duration': 446.15, 'highlights': ['The CSS method styles a particular element using CSS properties like color, background, and border, and can be applied to enhance the visual appearance of a webpage.', 'The HTML method is used to set or return the HTML content of selected elements, and it allows for both setting and returning the HTML content of elements, unlike the text method which only returns the text content.', 'The text method is used to set or return the text content of selected elements, and it is different from the HTML method as it only deals with the text content and does not include HTML tags.', 'The attribute method in jQuery is used to set or return attribute values of selected elements, allowing for manipulation of specific attributes of HTML elements.']}], 'duration': 1574.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE9853365.jpg', 'highlights': ['Installing the live server extension in Visual Studio code is necessary for effective web development.', 'Guidance on creating a folder to contain code snippets and organizing code in a structured manner is provided.', 'Introduction to JavaScript as a universal language of the web, used for making webpages or applications look more alive and interactive.', 'Benefits of Using jQuery include simplifying DOM manipulation, offering cross-browser support, and a diverse community of contributors.', 'jQuery selectors allow web developers to select and manipulate HTML elements, enabling them to add effects and make changes to the web page.', 'jQuery selector replaces traditional JavaScript functions, simplifying the process of selecting elements.', 'Manipulating DOM elements using jQuery selectors provides flexibility and control in web development.', 'Demonstrates the use of the .css method to apply styles to selected elements, such as changing the color and background color of an H1 tag.', 'Illustrates the use of .before and .after methods to insert specified content before or after selected elements.', 'Explains the use of the .text method to set or return the text content of selected elements, offering a simple way to manipulate text within elements.', 'The CSS method styles a particular element using CSS properties like color, background, and border, enhancing the visual appearance of a webpage.', 'The HTML method is used to set or return the HTML content of selected elements, allowing for both setting and returning the HTML content of elements.', 'The attribute method in jQuery is used to set or return attribute values of selected elements, allowing for manipulation of specific attributes of HTML elements.']}, {'end': 14167.541, 'segs': [{'end': 12137.388, 'src': 'embed', 'start': 12090.206, 'weight': 5, 'content': [{'end': 12091.066, 'text': "So let's say hello.", 'start': 12090.206, 'duration': 0.86}, {'end': 12092.746, 'text': "Now let's click on submit.", 'start': 12091.666, 'duration': 1.08}, {'end': 12097.428, 'text': 'Okay, so when I clicked on submit, this is what happens using the click event.', 'start': 12093.207, 'duration': 4.221}, {'end': 12101.372, 'text': 'So basically an alert is shown wherein the value is returned.', 'start': 12097.97, 'duration': 3.402}, {'end': 12106.676, 'text': 'So whatever input is given by the user is returned using the val function over here.', 'start': 12101.632, 'duration': 5.044}, {'end': 12108.397, 'text': 'Okay, so you see it says hello.', 'start': 12107.036, 'duration': 1.361}, {'end': 12115.041, 'text': "Let's say Edureka, how are you doing? Okay, submit.", 'start': 12108.677, 'duration': 6.364}, {'end': 12118.964, 'text': "So this is just returning the value that I'm typing in the input.", 'start': 12115.602, 'duration': 3.362}, {'end': 12122.246, 'text': 'So guys, this is how the value function works.', 'start': 12119.384, 'duration': 2.862}, {'end': 12125.205, 'text': "All right, it's very simple, it just returns the value.", 'start': 12123.044, 'duration': 2.161}, {'end': 12127.425, 'text': 'Similarly, you can set the value as well.', 'start': 12125.605, 'duration': 1.82}, {'end': 12137.388, 'text': "So I want you all to try something with setting the value and please comment down whatever you've tried or any new program that you've run using the val function or any other function.", 'start': 12127.725, 'duration': 9.663}], 'summary': 'Demonstration of using click event to return input value with val function.', 'duration': 47.182, 'max_score': 12090.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE12090206.jpg'}, {'end': 12366.711, 'src': 'embed', 'start': 12321.675, 'weight': 4, 'content': [{'end': 12327.817, 'text': "So what I'm doing here is on the click of this button and on these images you're gonna run the add class method.", 'start': 12321.675, 'duration': 6.142}, {'end': 12337.575, 'text': "Now to this method I've passed a class called style class And within this style class, I have created a border of five pixel solid green.", 'start': 12328.298, 'duration': 9.277}, {'end': 12339.756, 'text': "So don't get too confused.", 'start': 12338.516, 'duration': 1.24}, {'end': 12343.338, 'text': "Let's save and open the file.", 'start': 12339.776, 'duration': 3.562}, {'end': 12352.343, 'text': 'So what happened was on the click of this button, all these images were selected and a border was applied to all of these images.', 'start': 12345.319, 'duration': 7.024}, {'end': 12359.107, 'text': 'Now this border was specified within a class called style class which we had created over here.', 'start': 12353.484, 'duration': 5.623}, {'end': 12362.589, 'text': 'So guys, this is how the add class method works.', 'start': 12360.107, 'duration': 2.482}, {'end': 12366.711, 'text': "Now let's go back over here and let's refresh first.", 'start': 12363.269, 'duration': 3.442}], 'summary': 'Demonstrating the add class method by applying a 5-pixel solid green border to selected images on button click.', 'duration': 45.036, 'max_score': 12321.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE12321675.jpg'}, {'end': 12833.968, 'src': 'embed', 'start': 12803.348, 'weight': 0, 'content': [{'end': 12805.49, 'text': 'Now we have to discuss jQuery effects.', 'start': 12803.348, 'duration': 2.142}, {'end': 12809.234, 'text': "All right guys, so now let's discuss the hide effects.", 'start': 12806.431, 'duration': 2.803}, {'end': 12811.231, 'text': 'Now, there are a lot of effects over here.', 'start': 12809.67, 'duration': 1.561}, {'end': 12817.775, 'text': 'We have hide, we have show, toggle, fade out, fade in, fade toggle, and similarly, we have a few other effects.', 'start': 12811.271, 'duration': 6.504}, {'end': 12820.557, 'text': "Now, like the name says, it's sort of an effect.", 'start': 12818.175, 'duration': 2.382}, {'end': 12822.898, 'text': 'so basically, hide is like an effect.', 'start': 12820.557, 'duration': 2.341}, {'end': 12825.84, 'text': "so it'll select a particular element and it'll hide it.", 'start': 12822.898, 'duration': 2.942}, {'end': 12831.103, 'text': 'okay?, You can have parameters for how long you want to hide an element or for how long you want to fade an element.', 'start': 12825.84, 'duration': 5.263}, {'end': 12833.968, 'text': "Now we've already seen several examples of hide.", 'start': 12831.505, 'duration': 2.463}], 'summary': 'Discussion on jquery effects including hide, show, toggle, fade out, fade in, and fade toggle with parameters for duration.', 'duration': 30.62, 'max_score': 12803.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE12803348.jpg'}, {'end': 13461.108, 'src': 'embed', 'start': 13434.301, 'weight': 1, 'content': [{'end': 13438.465, 'text': "I'm sort of trying to display our flag, the Indian flag.", 'start': 13434.301, 'duration': 4.164}, {'end': 13444.43, 'text': "I won't be able to get the chakra in between, but apart from that, I think it should work.", 'start': 13438.945, 'duration': 5.485}, {'end': 13448.114, 'text': "Okay, and this, I'm gonna change it to green.", 'start': 13446.132, 'duration': 1.982}, {'end': 13454.945, 'text': "So we've created three divs over here and on these three divs we're gonna fade in.", 'start': 13450.342, 'duration': 4.603}, {'end': 13457.326, 'text': "Okay, they're slowly gonna appear on the screen.", 'start': 13455.325, 'duration': 2.001}, {'end': 13461.108, 'text': "So for this also I've set slow, fast, and all of that.", 'start': 13457.806, 'duration': 3.302}], 'summary': 'Display indian flag with three divs, incorporating fade-in effect.', 'duration': 26.807, 'max_score': 13434.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE13434301.jpg'}], 'start': 11428.056, 'title': 'Jquery functions, events, and effects', 'summary': 'Demonstrates using jquery attribute, val, add class, remove class, toggle class, click, on, hide, show, toggle, fade out, fade in, slide down, slide up, slide toggle, draggable, and droppable functions and events, with practical examples, showcasing the application and functionality of each, providing a comprehensive understanding of these features.', 'chapters': [{'end': 11762.867, 'start': 11428.056, 'title': 'Jquery attribute function', 'summary': 'Demonstrates using the attribute function in jquery to add a border to three images of puppies, align them to the left, and set their dimensions, resulting in three cute puppies with a 5 pixel solid black border, aligned to the left, and sized at 300 pixels width and 250 pixels height.', 'duration': 334.811, 'highlights': ['Using attribute function to add a 5 pixel solid black border to images The speaker demonstrates using the attribute function in jQuery to add a 5 pixel solid black border to the images, resulting in a visually enhanced display.', 'Aligning images to the left and setting their dimensions The chapter shows aligning the images to the left and setting their dimensions to 300 pixels width and 250 pixels height, resulting in a more presentable display.', "Creating a folder 'puppy' with three images of different breeds The speaker mentions creating a folder 'puppy' with three images of a golden retriever, a boxer, and a husky, providing context for the subsequent demonstration."]}, {'end': 12137.388, 'start': 11763.187, 'title': 'Understanding jquery val function', 'summary': 'Covers the usage of the val function in jquery, explaining its purpose, importance of document.ready function and its practical application in handling user input through click event, showcasing an example of returning user input using val function.', 'duration': 374.201, 'highlights': ['The val function in jQuery is used to set or return the values of the selected elements, as it returns the value specified by the attribute The val function in jQuery is used to set or return the values of the selected elements, as it returns the value specified by the attribute.', 'The importance of document.ready function is emphasized, as it ensures that the code within it runs only once the page is ready, preventing errors due to delayed library loading The importance of document.ready function is emphasized, as it ensures that the code within it runs only once the page is ready, preventing errors due to delayed library loading.', 'Practical demonstration of handling user input through click event and returning user input using val function is provided, showcasing the functionality of the val function in jQuery Practical demonstration of handling user input through click event and returning user input using val function is provided, showcasing the functionality of the val function in jQuery.']}, {'end': 12437.132, 'start': 12137.808, 'title': 'Jquery: add, remove, and toggle classes', 'summary': 'Discusses the add class method, where a style class is applied to selected elements, demonstrated with a border of 5px solid green, and introduces the remove class and toggle class methods, showcasing their functionality by adding and removing the border.', 'duration': 299.324, 'highlights': ['The add class method applies a style class to selected elements, demonstrated with a border of 5px solid green. On the click of a button, the add class method is used to apply a border of 5px solid green to all selected images.', 'The remove class method removes the specified class from the selected elements. The remove class method is demonstrated by removing the style class from all selected images, effectively removing the border.', 'The toggle class method toggles the specified class on and off for the selected elements. The toggle class method is showcased by toggling the addition and removal of the style class, effectively adding and removing the border on click.']}, {'end': 12755.787, 'start': 12438.041, 'title': 'Jquery events: click and on', 'summary': 'Explains the click and on events in jquery. the click event is used to hide elements on image click, while the on event is used for key press to perform an action on input typing.', 'duration': 317.746, 'highlights': ['Click event is used to hide elements on image click The click event in jQuery is demonstrated to hide selected images when clicked, showcasing the functionality of the event.', 'On event is used for key press to perform an action on input typing The on event in jQuery is utilized to perform a function when a key is pressed in an input field, exemplifying the usage of this event.']}, {'end': 13539.173, 'start': 12757.054, 'title': 'Jquery events and effects', 'summary': 'Covers the usage of on and key press events in jquery, and demonstrates the hide, show, and toggle effects with practical examples, followed by the fade out and fade in effects, with detailed explanation and demonstrations.', 'duration': 782.119, 'highlights': ['The chapter covers the usage of on and key press events in jQuery, and demonstrates the hide, show, and toggle effects with practical examples.', 'The fade out and fade in effects are explained in detail, with practical demonstrations using div elements to simulate the Indian flag.', 'The fade out effect is applied to three images, with different speeds, while the fade in effect is demonstrated with three div elements, each representing a color of the Indian flag.']}, {'end': 14167.541, 'start': 13539.833, 'title': 'Jquery effects & user interface', 'summary': 'Covers jquery slide down, slide up, slide toggle effects and their application, along with draggable and droppable functionality with practical examples.', 'duration': 627.708, 'highlights': ['The chapter covers jQuery slide down, slide up, slide toggle effects and their application. It explains how to use slide down, slide up, and slide toggle effects with practical examples.', 'Draggable method allows elements to be dragged around. Demonstrates the application of the draggable method to enable dragging of an element within the HTML page.', 'Droppable method is used to drop the selected element at a specified target. Illustrates the application of the droppable method to enable dropping an element into a specified target, demonstrated by a practical example.']}], 'duration': 2739.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE11428056.jpg', 'highlights': ['Demonstrates using jquery attribute, val, add class, remove class, toggle class, click, on, hide, show, toggle, fade out, fade in, slide down, slide up, slide toggle, draggable, and droppable functions and events, with practical examples, showcasing the application and functionality of each, providing a comprehensive understanding of these features.', 'The fade out and fade in effects are explained in detail, with practical demonstrations using div elements to simulate the Indian flag.', 'The chapter covers the usage of on and key press events in jQuery, and demonstrates the hide, show, and toggle effects with practical examples.', 'The chapter covers jQuery slide down, slide up, slide toggle effects and their application. It explains how to use slide down, slide up, and slide toggle effects with practical examples.', 'The add class method applies a style class to selected elements, demonstrated with a border of 5px solid green. On the click of a button, the add class method is used to apply a border of 5px solid green to all selected images.', 'The val function in jQuery is used to set or return the values of the selected elements, as it returns the value specified by the attribute.', 'Practical demonstration of handling user input through click event and returning user input using val function is provided, showcasing the functionality of the val function in jQuery.', 'Using attribute function to add a 5 pixel solid black border to images The speaker demonstrates using the attribute function in jQuery to add a 5 pixel solid black border to the images, resulting in a visually enhanced display.']}, {'end': 15901.471, 'segs': [{'end': 14198.509, 'src': 'embed', 'start': 14168.442, 'weight': 0, 'content': [{'end': 14170.323, 'text': "Now lastly, we're gonna look at date picker.", 'start': 14168.442, 'duration': 1.881}, {'end': 14172.84, 'text': 'So guys, this is an inbuilt function.', 'start': 14170.879, 'duration': 1.961}, {'end': 14179.783, 'text': "It's an inbuilt widget in jQuery wherein you can enter a date and then you can easily visualize the date.", 'start': 14172.94, 'duration': 6.843}, {'end': 14181.684, 'text': "We're not gonna go into detail with this.", 'start': 14180.183, 'duration': 1.501}, {'end': 14185.226, 'text': "I'm just gonna show you a simple example of how the date picker works.", 'start': 14181.804, 'duration': 3.422}, {'end': 14189.988, 'text': 'Okay, let me just start off by clearing this entire thing, okay.', 'start': 14186.146, 'duration': 3.842}, {'end': 14191.987, 'text': 'right up to here.', 'start': 14190.606, 'duration': 1.381}, {'end': 14198.509, 'text': "okay, uh, now what i'm gonna do is i'm gonna have an input wherein the user will enter the date.", 'start': 14191.987, 'duration': 6.522}], 'summary': 'The transcript briefly explains the usage of an inbuilt date picker function in jquery for visualizing dates.', 'duration': 30.067, 'max_score': 14168.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE14168442.jpg'}, {'end': 14429.9, 'src': 'embed', 'start': 14408.264, 'weight': 1, 'content': [{'end': 14420.152, 'text': 'So angular.js is a JavaScript based open source front-end framework mainly maintained by Google and by a community of individuals and corporations to dress many of the challenges encountered in developing single-page applications.', 'start': 14408.264, 'duration': 11.888}, {'end': 14423.394, 'text': "We'd also get to what single-page applications mean in a moment.", 'start': 14420.572, 'duration': 2.822}, {'end': 14429.9, 'text': 'It aims to simplify boot development and the testing of such applications by providing a framework for client-side model view controller.', 'start': 14423.775, 'duration': 6.125}], 'summary': 'Angular.js is a javascript front-end framework maintained by google, addressing challenges in single-page app development.', 'duration': 21.636, 'max_score': 14408.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE14408264.jpg'}, {'end': 14775.471, 'src': 'embed', 'start': 14745.615, 'weight': 2, 'content': [{'end': 14747.696, 'text': "So to install angular, let's see what we have to do.", 'start': 14745.615, 'duration': 2.081}, {'end': 14753.218, 'text': 'So the best place that you have for any doubts of the sort is the angular documentation.', 'start': 14747.976, 'duration': 5.242}, {'end': 14755.559, 'text': 'So go ahead and search for the angular Docs.', 'start': 14753.738, 'duration': 1.821}, {'end': 14758.119, 'text': 'So this will open up the angular Docs.', 'start': 14756.118, 'duration': 2.001}, {'end': 14760.301, 'text': "It's at angular.io slash Docs.", 'start': 14758.279, 'duration': 2.022}, {'end': 14762.102, 'text': 'Go ahead and check the setup part.', 'start': 14760.641, 'duration': 1.461}, {'end': 14765.704, 'text': 'So out here you see that you need node.js now that you have done it.', 'start': 14762.382, 'duration': 3.322}, {'end': 14769.887, 'text': 'You can go ahead and install angular through an npm command.', 'start': 14765.804, 'duration': 4.083}, {'end': 14775.471, 'text': 'So npm is a node package manager, and all you have to say to npm is that you need to install.', 'start': 14770.347, 'duration': 5.124}], 'summary': 'To install angular, refer to angular.io/docs for setup instructions including the use of node.js and npm.', 'duration': 29.856, 'max_score': 14745.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE14745615.jpg'}, {'end': 15636.71, 'src': 'embed', 'start': 15611.865, 'weight': 3, 'content': [{'end': 15620.189, 'text': 'So basically in TypeScript, you need to tell TypeScript where everything is particularly so angular slash forms and what we need to import is forms.', 'start': 15611.865, 'duration': 8.324}, {'end': 15631.344, 'text': 'module. now this was telling TypeScript that we are going to be using this, but you also need to tell angular that your forms module needs to be imported,', 'start': 15621.474, 'duration': 9.87}, {'end': 15636.71, 'text': 'so you can do that by just copying this name and putting it in the imports array out here.', 'start': 15631.344, 'duration': 5.366}], 'summary': 'In typescript, to use angular forms, you import the forms module and specify it in the imports array.', 'duration': 24.845, 'max_score': 15611.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE15611865.jpg'}, {'end': 15864.413, 'src': 'embed', 'start': 15835.717, 'weight': 4, 'content': [{'end': 15841.29, 'text': 'So what exactly is TypeScript? Well TypeScript is just a superset of JavaScript.', 'start': 15835.717, 'duration': 5.573}, {'end': 15844.592, 'text': 'It is a strongly typed object-oriented compiled language.', 'start': 15841.55, 'duration': 3.042}, {'end': 15850.557, 'text': 'It was designed by Microsoft and it is basically a superset to JavaScript.', 'start': 15844.993, 'duration': 5.564}, {'end': 15858.022, 'text': 'So anything that is included in JavaScript is definitely included in TypeScript, but the reverse can be actually said.', 'start': 15850.677, 'duration': 7.345}, {'end': 15864.413, 'text': 'so Everything in JavaScript is there in TypeScript because it is a superset, but everything in TypeScript is not there in JavaScript.', 'start': 15858.022, 'duration': 6.391}], 'summary': 'Typescript is a superset of javascript, strongly typed and object-oriented, designed by microsoft.', 'duration': 28.696, 'max_score': 15835.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE15835717.jpg'}], 'start': 14168.442, 'title': 'Using date picker, introduction to angular, and setting up projects', 'summary': "Demonstrates using jquery's date picker, introduces angular framework for single-page applications, and provides steps to set up angular projects, emphasizing typescript's importance.", 'chapters': [{'end': 14273.541, 'start': 14168.442, 'title': 'Using date picker in jquery', 'summary': 'Demonstrates how to use the inbuilt date picker widget in jquery to easily visualize and enter dates, requiring minimal code, and providing a simple example of its functionality.', 'duration': 105.099, 'highlights': ['The inbuilt date picker widget in jQuery allows users to easily visualize and enter dates, requiring minimal coding.', 'The demonstration provides a simple example of implementing the date picker widget, showcasing its functionality.', 'The process involves creating an input and calling the date picker widget on it, resulting in the date picker becoming visible upon typing in the input.']}, {'end': 14644.361, 'start': 14273.621, 'title': 'Introduction to angular framework', 'summary': 'Explains the basics of angular framework, including its role in front-end development, its association with google, and its use for creating single-page applications, emphasizing its javascript-based nature and the benefits of developing single-page applications with angular.', 'duration': 370.74, 'highlights': ['Angular is a front-end development framework that focuses on creating reactive HTML and optimizing the appearance of websites, and it is associated with Google and a supportive community. Explains the role of a front-end developer and the association of Angular with Google and its supportive community.', 'Angular is maintained and developed by Google and aims to simplify web development and testing of single-page applications by providing a framework for client-side model view controller (MVC) architecture. Describes the maintenance and development of Angular by Google and its aim to simplify web development and testing of single-page applications.', 'Angular is JavaScript-based and designed for creating single-page applications, providing improved performance and speed by eliminating the need for page reloading. Emphasizes the JavaScript-based nature of Angular and its focus on creating single-page applications for improved performance and speed.']}, {'end': 15544.161, 'start': 14645.101, 'title': 'Setting up angular project', 'summary': 'Discusses the steps to set up an angular project, including installing node.js, setting up angular using npm, creating a new angular project, and understanding the basic structure of an angular app.', 'duration': 899.06, 'highlights': ['The chapter discusses the steps to set up an Angular project, including installing Node.js, setting up Angular using npm, creating a new Angular project, and understanding the basic structure of an Angular app. Installing Node.js, Setting up Angular using npm, Creating a new Angular project, Understanding the basic structure of an Angular app', 'The tutorial emphasizes the importance of following the Angular documentation for any doubts or setup requirements and highlights the use of npm for a global install of Angular CLI. Emphasizing the importance of following Angular documentation, Use of npm for a global install of Angular CLI', 'The chapter also introduces the role of components in Angular and demonstrates how to manipulate and display data using directives like ngModel. Introduction to the role of components in Angular, Manipulating and displaying data using directives like ngModel']}, {'end': 15901.471, 'start': 15544.241, 'title': 'Setting up angular and understanding typescript', 'summary': 'Explains the process of setting up an angular project, including importing necessary functionalities and modules, and also provides an overview of typescript, highlighting its role as a superset of javascript and its importance in creating scalable applications.', 'duration': 357.23, 'highlights': ["Angular cannot figure out 'ng model' due to missing imports, resolved by importing 'forms module', enabling the magic of 'ng model' to work and preventing errors. Importing 'forms module' in TypeScript resolves 'ng model' recognition issue and enables its functionality.", 'Angular allows real-time updates without page reload, demonstrated through input field manipulation and immediate reflection in the paragraph below. Angular facilitates real-time updates without page reload, as illustrated by immediate reflection of input changes in the paragraph.', "Angular applications consist of components and modules, where modules contain components, exemplified by the 'app component' and its role in the Angular app structure. Angular apps are structured with components within modules, demonstrated by the 'app component' and its role within the app structure.", 'TypeScript is a superset of JavaScript, offering strong typing and object-oriented features, enabling the creation of scalable JavaScript-based applications. TypeScript, as a superset of JavaScript, provides strong typing and object-oriented capabilities, facilitating the development of scalable JavaScript-based applications.']}], 'duration': 1733.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE14168442.jpg', 'highlights': ['The inbuilt date picker widget in jQuery allows users to easily visualize and enter dates, requiring minimal coding.', 'Angular is maintained and developed by Google and aims to simplify web development and testing of single-page applications by providing a framework for client-side model view controller (MVC) architecture.', 'Installing Node.js, Setting up Angular using npm, Creating a new Angular project, Understanding the basic structure of an Angular app', "Importing 'forms module' in TypeScript resolves 'ng model' recognition issue and enables its functionality.", 'TypeScript, as a superset of JavaScript, provides strong typing and object-oriented capabilities, facilitating the development of scalable JavaScript-based applications.']}, {'end': 17860.263, 'segs': [{'end': 17167.904, 'src': 'embed', 'start': 17139.692, 'weight': 2, 'content': [{'end': 17148.638, 'text': "because angular gives you the power to create components and not worry about if they're included in your module and everything just for the CLI.", 'start': 17139.692, 'duration': 8.946}, {'end': 17162.717, 'text': "So if we were to go to our PowerShell part and we were to actually run a command that says ng generate component and we could say Let's say so,", 'start': 17149.038, 'duration': 13.679}, {'end': 17163.859, 'text': 'we have a server.', 'start': 17162.717, 'duration': 1.142}, {'end': 17167.904, 'text': "So we need somebody to let's say sub server.", 'start': 17164.56, 'duration': 3.344}], 'summary': 'Angular provides power to create components easily using cli.', 'duration': 28.212, 'max_score': 17139.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17139692.jpg'}, {'end': 17316.575, 'src': 'embed', 'start': 17294.861, 'weight': 0, 'content': [{'end': 17303.927, 'text': 'So if you have any experience with web development, you will know that a selector is basically a way of selecting stuff or elements on your HTML page.', 'start': 17294.861, 'duration': 9.066}, {'end': 17309.231, 'text': 'Now when we say app server like this out here, this could be anything this could be a property.', 'start': 17304.427, 'duration': 4.804}, {'end': 17312.273, 'text': 'This could be a class or this could be an HTML element to for now.', 'start': 17309.291, 'duration': 2.982}, {'end': 17316.575, 'text': 'This is an HTML element, but let me just show you this can also be used as a class.', 'start': 17312.333, 'duration': 4.242}], 'summary': 'Web development experience: selectors select elements on html page.', 'duration': 21.714, 'max_score': 17294.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17294861.jpg'}, {'end': 17515.569, 'src': 'embed', 'start': 17486.061, 'weight': 1, 'content': [{'end': 17488.884, 'text': 'Okay guys, so that was the first assignment.', 'start': 17486.061, 'duration': 2.823}, {'end': 17490.105, 'text': 'I just gave you all,', 'start': 17488.944, 'duration': 1.161}, {'end': 17498.613, 'text': "so I hope you guys had pause the screen when I told you that I'm giving you guys an assignment and I hope you guys actually try to solve it,", 'start': 17490.105, 'duration': 8.508}, {'end': 17502.196, 'text': 'because in this part we are going to try and solve the assignment.', 'start': 17498.613, 'duration': 3.583}, {'end': 17506.12, 'text': 'I just gave you so this part you can use to see how correct you will.', 'start': 17502.256, 'duration': 3.864}, {'end': 17508.145, 'text': 'Well, it was a pretty easy assignment.', 'start': 17506.644, 'duration': 1.501}, {'end': 17515.569, 'text': 'So I hope most of you guys got it because that means I could successfully teach you how to actually use components.', 'start': 17508.485, 'duration': 7.084}], 'summary': 'First assignment given, emphasis on using components, relatively easy, expectation for successful completion.', 'duration': 29.508, 'max_score': 17486.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17486061.jpg'}, {'end': 17590.465, 'src': 'embed', 'start': 17562.714, 'weight': 3, 'content': [{'end': 17569.557, 'text': 'Okay, so, as you guys can see, it says welcome to assignment one, and this is the basic application that angular ships with.', 'start': 17562.714, 'duration': 6.843}, {'end': 17573.598, 'text': "now what we're going to do is we're going to delete everything and we are going to start from scratch.", 'start': 17569.557, 'duration': 4.041}, {'end': 17576.439, 'text': "Now, let's go back and see what we actually wanted to do.", 'start': 17574.058, 'duration': 2.381}, {'end': 17580.141, 'text': 'So what we have to do is create three components called red green and yellow.', 'start': 17577.14, 'duration': 3.001}, {'end': 17581.561, 'text': "So let's go ahead and do that first.", 'start': 17580.221, 'duration': 1.34}, {'end': 17590.465, 'text': "So to create these elements first of all, let's go ahead and delete all this garbage that we do not need save it again.", 'start': 17582.002, 'duration': 8.463}], 'summary': 'Creating three components: red, green, and yellow from scratch.', 'duration': 27.751, 'max_score': 17562.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17562714.jpg'}, {'end': 17705.864, 'src': 'embed', 'start': 17677.998, 'weight': 4, 'content': [{'end': 17680.158, 'text': 'and this will produce the app yellow.', 'start': 17677.998, 'duration': 2.16}, {'end': 17682.039, 'text': "Let's go ahead and save this.", 'start': 17681.159, 'duration': 0.88}, {'end': 17687.48, 'text': 'Obviously is red works blue works yellow works.', 'start': 17685.14, 'duration': 2.34}, {'end': 17693.461, 'text': 'So we have successfully created three components and we have put them in our app confident part.', 'start': 17687.64, 'duration': 5.821}, {'end': 17695.782, 'text': 'Now, what we need to do is give them their styling.', 'start': 17693.741, 'duration': 2.041}, {'end': 17699.363, 'text': "So let's go ahead and go into these separate components.", 'start': 17696.062, 'duration': 3.301}, {'end': 17701.283, 'text': "Let's open up their styling files.", 'start': 17699.803, 'duration': 1.48}, {'end': 17705.864, 'text': "We want to say because we already know that it's a paragraph that works there.", 'start': 17702.223, 'duration': 3.641}], 'summary': 'Created 3 app components, need to style them.', 'duration': 27.866, 'max_score': 17677.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17677998.jpg'}], 'start': 15901.992, 'title': 'Angular component integration', 'summary': 'Covers integrating bootstrap 3 into an angular application, loading an angular app, creating server components, and using angular cli for component creation. it emphasizes the importance of understanding app workflow and the successful completion of assignment one involving the creation and styling of specific components.', 'chapters': [{'end': 16248.275, 'start': 15901.992, 'title': 'Integrating external css in angular', 'summary': 'Covers integrating bootstrap 3 into an angular application by using npm install and modifying the angular.json file to add the bootstrap css file, resulting in the addition of bootstrap version 3.4.1 styling to the application.', 'duration': 346.283, 'highlights': ['Bootstrap 3 installation using npm install and modification of angular.json file The process involves using npm install command to download Bootstrap 3 files and modifying the angular.json file to add the Bootstrap CSS file.', "Confirmation of Bootstrap 3.4.1 addition after integrating into the project After integrating Bootstrap, the inspection of the page's head section confirms the addition of Bootstrap version 3.4.1 styling to the application.", 'Explanation of using Bootstrap classes and referral to a Bootstrap tutorial The speaker explains the usage of Bootstrap classes and directs viewers to a Bootstrap tutorial available on edureka site for further understanding.']}, {'end': 16576.509, 'start': 16248.975, 'title': 'Angular app loading and components', 'summary': "Covers the process of loading an angular app, including the use of bootstrap version 3.4.1 and how angular components function, emphasizing the importance of understanding the app's workflow for future debugging processes, and the concept of components as the building blocks of an angular application.", 'duration': 327.534, 'highlights': ["The process of loading an Angular app is explained, including the use of Bootstrap version 3.4.1, and the importance of understanding the app's workflow for future debugging processes. ", 'The concept of components as the building blocks of an Angular application is discussed, likening it to a tree structure and emphasizing its importance in Angular development. ']}, {'end': 17270.541, 'start': 16576.93, 'title': 'Creating angular server components', 'summary': 'Explains the manual creation of server components in angular, detailing the naming conventions, file structure, and integration with modules, emphasizing the benefits of using angular cli for seamless component creation and usage.', 'duration': 693.611, 'highlights': ["Naming Convention for Server Components The transcript discusses the importance of naming components appropriately, using the example of 'server.component.html' to convey that it is a server, a component, and a template HTML file.", 'Integration with Modules The transcript emphasizes the need to explicitly declare and import the server component in the app modules TypeScript file to ensure its recognition and usage within the Angular application.', "Usage of Angular CLI for Component Creation The transcript highlights the efficiency of using Angular CLI for component creation, demonstrating the generation of a 'subserver' component and its seamless usage, showcasing the benefits of CLI for component creation and utilization."]}, {'end': 17559.112, 'start': 17271.122, 'title': 'Angular cli component assignment', 'summary': 'Covers the usage and creation of components using angular cli, including a demonstration of using selectors, creating components with classes, templates, and inline styling, followed by a first assignment to create and style three components named red, green, and yellow for the app component.', 'duration': 287.99, 'highlights': ['Demonstration of using selectors to select elements on an HTML page and creating components with classes, templates, and inline styling. The chapter explains the concept of selectors for selecting elements on an HTML page and demonstrates creating components with classes, templates, and inline styling, providing insights into the practical implementation of these concepts.', 'Assignment to create and style three components named red, green, and yellow for the app component. The chapter provides a first assignment where the audience is tasked with creating and styling three components named red, green, and yellow for the app component, offering practical application of the concepts learned.']}, {'end': 17860.263, 'start': 17562.714, 'title': 'Angular assignment one', 'summary': 'Covers creating three components (red, blue, and yellow) in an angular application by using angular cli and styling them with specific colors, resulting in the successful completion of assignment one.', 'duration': 297.549, 'highlights': ['Creating three components (red, blue, and yellow) using Angular CLI The speaker demonstrates using the Angular CLI to generate three components (red, blue, and yellow) in the application, providing a clear step-by-step guide for creating the components.', 'Styling components with specific colors The process of styling the components with specific colors is detailed, including setting borders and background colors for each component, showcasing the application of basic color styles in the Angular components.', 'Successful completion of assignment one The demonstration concludes with the successful completion of assignment one, emphasizing the satisfaction and self-sufficiency of the viewers in completing the assignment on their own.']}], 'duration': 1958.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE15901992.jpg', 'highlights': ['Demonstration of using selectors to select elements on an HTML page and creating components with classes, templates, and inline styling.', 'Successful completion of assignment one', 'Usage of Angular CLI for Component Creation', 'Creating three components (red, blue, and yellow) using Angular CLI', 'Assignment to create and style three components named red, green, and yellow for the app component']}, {'end': 19496.408, 'segs': [{'end': 17888.914, 'src': 'embed', 'start': 17860.283, 'weight': 0, 'content': [{'end': 17865.745, 'text': 'Okay So now that we have learned about how components are the building blocks.', 'start': 17860.283, 'duration': 5.462}, {'end': 17870.087, 'text': 'We even made our own custom components and we even did an assignment on one.', 'start': 17865.965, 'duration': 4.122}, {'end': 17871.288, 'text': "So it's time.", 'start': 17870.507, 'duration': 0.781}, {'end': 17873.909, 'text': 'We move on to the next topic and that is data binding.', 'start': 17871.308, 'duration': 2.601}, {'end': 17876.27, 'text': 'So data binding is like communication.', 'start': 17874.389, 'duration': 1.881}, {'end': 17883.712, 'text': "Well, what are we communicating? It's communication between your TypeScript file and your template.", 'start': 17876.97, 'duration': 6.742}, {'end': 17888.914, 'text': 'So basically your business logic and your and what basically the user sees.', 'start': 17883.972, 'duration': 4.942}], 'summary': 'Next topic: data binding, communication between typescript file and template.', 'duration': 28.631, 'max_score': 17860.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17860283.jpg'}, {'end': 17954.641, 'src': 'embed', 'start': 17904.258, 'weight': 1, 'content': [{'end': 17911.482, 'text': 'Now, there are two types of data binding The first one is string interpolation and second one is property binding.', 'start': 17904.258, 'duration': 7.224}, {'end': 17916.266, 'text': 'So this is the way of you outputting something onto the screen.', 'start': 17912.083, 'duration': 4.183}, {'end': 17919.508, 'text': 'So string interpolation and property binding.', 'start': 17916.666, 'duration': 2.842}, {'end': 17921.649, 'text': "So let's go ahead and see how we can do them.", 'start': 17919.548, 'duration': 2.101}, {'end': 17927.313, 'text': "So let's go back to our assignment that we had just done.", 'start': 17922.51, 'duration': 4.803}, {'end': 17937.466, 'text': 'So first of all, what we want to do out here is go to the modules and we actually want to remove all these components.', 'start': 17927.814, 'duration': 9.652}, {'end': 17940.409, 'text': "Let's go ahead and just remove these components.", 'start': 17938.147, 'duration': 2.262}, {'end': 17942.931, 'text': "Let's go ahead and remove these imports.", 'start': 17941.089, 'duration': 1.842}, {'end': 17947.515, 'text': 'And then we can go ahead and just delete these files out.', 'start': 17944.232, 'duration': 3.283}, {'end': 17949.337, 'text': "Let's delete that.", 'start': 17948.596, 'duration': 0.741}, {'end': 17951.038, 'text': "Let's delete this.", 'start': 17949.357, 'duration': 1.681}, {'end': 17954.641, 'text': "Let's also delete this.", 'start': 17953.56, 'duration': 1.081}], 'summary': 'The transcript discusses two types of data binding: string interpolation and property binding, as well as the process of removing components and files.', 'duration': 50.383, 'max_score': 17904.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17904258.jpg'}], 'start': 17860.283, 'title': 'Angular data binding', 'summary': 'Introduces data binding, covering string interpolation, property binding, event binding, and two-way binding in angular, with practical demonstrations and examples. it also involves an assignment related to two-way data binding and string interpolation.', 'chapters': [{'end': 17927.313, 'start': 17860.283, 'title': 'Introduction to data binding', 'summary': 'Introduces data binding as a way of communication between typescript files and templates, covering string interpolation and property binding as methods for outputting information onto the screen.', 'duration': 67.03, 'highlights': ['Data binding is like communication between TypeScript file and template, involving business logic and user interface. Data binding is described as a communication mechanism between the TypeScript file and the template, involving the interaction of business logic and user interface.', 'There are two types of data binding: string interpolation and property binding. The chapter explains the two types of data binding: string interpolation and property binding, serving as methods for outputting information onto the screen.', 'Introduction to string interpolation and property binding as methods for outputting information onto the screen. The chapter introduces string interpolation and property binding as methods for outputting information onto the screen, providing a foundational understanding of these concepts.']}, {'end': 18304.236, 'start': 17927.814, 'title': 'Angular string interpolation', 'summary': 'Covers the process of removing components and imports, utilizing string interpolation to display server information, and creating a function to toggle server status in an angular application.', 'duration': 376.422, 'highlights': ["The chapter demonstrates the process of removing various components and imports from the modules, streamlining the Angular application's structure.", 'It explains the concept of string interpolation, illustrating how it converts variables and strings into an interpolated format for display on the screen.', "The transcript details the creation of a function to toggle the server status, providing a practical example of implementing logic to manage the server's state."]}, {'end': 19027.726, 'start': 18304.797, 'title': 'Angular data binding', 'summary': 'Covers the implementation of string interpolation, property binding, event binding, and two-way binding in angular, including examples and practical demonstrations. it also introduces an assignment involving two-way data binding and string interpolation.', 'duration': 722.929, 'highlights': ['The chapter covers the implementation of string interpolation, property binding, event binding, and two-way binding in Angular. The transcript extensively discusses the implementation and practical demonstration of string interpolation, property binding, event binding, and two-way binding.', 'Introduction to string interpolation and its practical implementation with variable names and functions. The transcript provides examples and practical demonstrations of string interpolation, including the use of variable names and functions.', 'Demonstration of property binding and its application in enabling/disabling a button after a specified time. The transcript explains property binding and demonstrates its application in enabling/disabling a button after a specified time.', 'Practical illustration of event binding for toggling server status and returning server status. Event binding is practically illustrated for toggling server status and returning server status.', 'Explanation and demonstration of two-way binding for input elements and constant display. The transcript explains and demonstrates two-way binding for input elements and constant display, showcasing its difference from one-way binding.']}, {'end': 19496.408, 'start': 19028.186, 'title': 'Angular property binding example', 'summary': 'Covers the implementation of property binding and two-way data binding in an angular application, including creating input fields, using string interpolation, and binding button properties based on input values.', 'duration': 468.222, 'highlights': ['The chapter covers the implementation of property binding and two-way data binding in an Angular application It provides an overview of the focus of the chapter, emphasizing the core concepts being discussed.', 'creating input fields, using string interpolation, and binding button properties based on input values The transcript discusses the practical implementation of creating input fields, utilizing string interpolation, and binding button properties based on input values.']}], 'duration': 1636.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE17860283.jpg', 'highlights': ['Data binding is like communication between TypeScript file and template, involving business logic and user interface.', 'Introduction to string interpolation and property binding as methods for outputting information onto the screen.', 'The chapter covers the implementation of string interpolation, property binding, event binding, and two-way binding in Angular.', "The chapter demonstrates the process of removing various components and imports from the modules, streamlining the Angular application's structure."]}, {'end': 20749.98, 'segs': [{'end': 19557.206, 'src': 'embed', 'start': 19517.383, 'weight': 2, 'content': [{'end': 19526.291, 'text': 'the button gets enabled and we can click it to basically put it back into disabled state and also making the first name string into a blank string.', 'start': 19517.383, 'duration': 8.908}, {'end': 19529.212, 'text': 'So this is the solution to assignment number two.', 'start': 19526.809, 'duration': 2.403}, {'end': 19535.859, 'text': 'I hope you guys had followed along with me and if you had any doubts when solving it on your own, the doubts have been cleared now.', 'start': 19529.732, 'duration': 6.127}, {'end': 19542.707, 'text': "Now let's move ahead and let's look at the last topic for our Angular basics today and that is directives.", 'start': 19536.34, 'duration': 6.367}, {'end': 19550.184, 'text': "So what exactly are directives? Well, let's head over to Angular's site and let's see what they are saying about directives.", 'start': 19543.568, 'duration': 6.616}, {'end': 19553.385, 'text': 'Well, it says that there are two kind of directives out here.', 'start': 19550.564, 'duration': 2.821}, {'end': 19557.206, 'text': 'So one is attribute directive and one is a structural directive.', 'start': 19553.645, 'duration': 3.561}], 'summary': 'Solution to assignment 2 explained, moving on to directives in angular basics.', 'duration': 39.823, 'max_score': 19517.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE19517383.jpg'}, {'end': 19668.481, 'src': 'embed', 'start': 19636.824, 'weight': 0, 'content': [{'end': 19638.646, 'text': 'So we can generate directives like that.', 'start': 19636.824, 'duration': 1.822}, {'end': 19647.91, 'text': 'But for now what we are gonna do is we are gonna use some built-in directives to understand how attribute directives and how structural directives are actually working.', 'start': 19639.127, 'duration': 8.783}, {'end': 19655.252, 'text': 'So the directives that we are gonna be using are ng-if, ng-else, so basically if and else, and ng-for.', 'start': 19648.35, 'duration': 6.902}, {'end': 19662.777, 'text': 'So these are the three directives that we are going to be using today and after I show you how to use these directives.', 'start': 19655.692, 'duration': 7.085}, {'end': 19668.481, 'text': 'I will also be giving you an assignment and that will be your last assignment for this angular tutorial,', 'start': 19662.937, 'duration': 5.544}], 'summary': 'Using ng-if, ng-else, and ng-for directives for angular tutorial.', 'duration': 31.657, 'max_score': 19636.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE19636824.jpg'}, {'end': 20082.469, 'src': 'embed', 'start': 20046.432, 'weight': 1, 'content': [{'end': 20047.253, 'text': 'So what we did?', 'start': 20046.432, 'duration': 0.821}, {'end': 20056.721, 'text': 'basically, we passed an expression and in this expression we are putting in a color and the get color method is returning a string which either says red or green.', 'start': 20047.253, 'duration': 9.468}, {'end': 20063.207, 'text': 'So this is how you can dynamically add styles to your elements on your HTML page.', 'start': 20056.902, 'duration': 6.305}, {'end': 20067.411, 'text': 'Now another way to do dynamic styling is with the help of ng class.', 'start': 20063.708, 'duration': 3.703}, {'end': 20073.445, 'text': 'So what we can do out here is we can add a class to an element dynamically.', 'start': 20068.183, 'duration': 5.262}, {'end': 20082.469, 'text': "So let's say we have another H2, and let's say this is just an example of ng class.", 'start': 20073.846, 'duration': 8.623}], 'summary': 'Demonstrated dynamic styling using color and ng class in html elements.', 'duration': 36.037, 'max_score': 20046.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE20046432.jpg'}], 'start': 19496.428, 'title': 'Angular directives and debugging form button', 'summary': 'Covers debugging a form button, enabling and disabling based on user input, and introduces angular directives like ng-if, ng-else, ng-for, ng-style, and ng-class, demonstrating dynamic styling, conditional class addition, and function execution. it also includes creating a student roster, adding names, and implementing a button to toggle paragraph display with dynamic styling and conditional behavior.', 'chapters': [{'end': 19535.859, 'start': 19496.428, 'title': 'Debugging form button', 'summary': 'Highlights the process of debugging a form button, showcasing how to enable and disable the button based on user input, ultimately resolving the issue and providing clarification for any doubts.', 'duration': 39.431, 'highlights': ['The solution to assignment number two involves enabling and disabling a form button based on user input. The process involves enabling the button when text is typed into a field and disabling it when the field is empty.', 'Providing clarification for any doubts when solving the assignment independently. The chapter addresses any doubts that may have arisen while solving the assignment, offering clear explanations to resolve them.']}, {'end': 19948.335, 'start': 19536.34, 'title': 'Understanding angular directives', 'summary': 'Introduces the concept of directives in angular, explaining the difference between attribute and structural directives, and demonstrates the usage of built-in directives like ng-if, ng-else, and ng-for. it also hints at future lectures that will delve deeper into custom directives and their implementation.', 'duration': 411.995, 'highlights': ['The chapter explains the difference between attribute and structural directives in Angular, with an emphasis on their functionality in changing the appearance or behavior of a DOM element. The chapter highlights the distinction between attribute and structural directives, emphasizing their role in altering the appearance or behavior of a DOM element.', 'The chapter demonstrates the usage of built-in directives like ng-if, ng-else, and ng-for to show conditional content and iterate through lists in Angular. The chapter showcases the practical application of built-in directives, such as ng-if, ng-else, and ng-for, to display conditional content and iterate through lists in Angular.', 'The chapter hints at future lectures that will provide a more in-depth exploration of custom directives and their implementation in Angular. The chapter mentions upcoming lectures that will delve deeper into the concept of custom directives, offering a more comprehensive understanding of their implementation in Angular.']}, {'end': 20195.513, 'start': 19948.335, 'title': 'Angular inbuilt directives', 'summary': 'Introduces ng-if, ng-style, and ng-class directives, demonstrating dynamic styling and conditional class addition with examples and function execution, highlighting ng-class as a method for adding dynamic styling and ng-for for iterating through an array.', 'duration': 247.178, 'highlights': ['The chapter introduces ng-if, ng-style, and ng-class directives. It covers the introduction of key inbuilt directives in Angular, namely ng-if, ng-style, and ng-class, setting the stage for utilizing these directives for dynamic styling and conditional class addition.', "Demonstrates dynamic styling and conditional class addition with examples and function execution. The transcript provides a detailed demonstration of dynamic styling using ng-style, wherein a function is executed to return a color string based on a condition, and conditional class addition using ng-class is exemplified by adding and removing a class based on a function's return value.", "Highlights ng-class as a method for adding dynamic styling and ng-for for iterating through an array. It emphasizes the utilization of ng-class for adding dynamic styling by dynamically adding a class based on a function's return value, and introduces ng-for as a directive for iterating through an array, providing a quick example to illustrate its usage."]}, {'end': 20749.98, 'start': 20196.033, 'title': 'Angular ng-for and ng-if usage', 'summary': 'Covers the usage of ng-for, ng-if, ng-if-else, and dynamic styling in angular, including creating a student roster, adding names to the roster, and implementing a button to toggle paragraph display with a counter that dynamically styles the log after the fifth click.', 'duration': 553.947, 'highlights': ['The chapter covers the usage of ng-for, ng-if, ng-if-else, and dynamic styling in Angular Demonstrates the focus of the chapter on specific Angular functionalities', 'creating a student roster, adding names to the roster Illustrates the process of creating a student roster and adding names to it', 'implementing a button to toggle paragraph display Explains the implementation of a button to toggle the display of a paragraph', 'a counter that dynamically styles the log after the fifth click Describes the implementation of a counter that dynamically styles the log after the fifth click']}], 'duration': 1253.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE19496428.jpg', 'highlights': ['The chapter introduces ng-if, ng-style, and ng-class directives.', 'Demonstrates dynamic styling and conditional class addition with examples and function execution.', 'The solution to assignment number two involves enabling and disabling a form button based on user input.', 'The chapter explains the difference between attribute and structural directives in Angular.']}, {'end': 22624.477, 'segs': [{'end': 20869.845, 'src': 'embed', 'start': 20839.575, 'weight': 0, 'content': [{'end': 20844.297, 'text': 'But each time any modifications were done, a new DOM is created for the same page.', 'start': 20839.575, 'duration': 4.722}, {'end': 20851.339, 'text': 'This repeated creation of DOM results in unnecessary memory wastage and a decrease in applications performance.', 'start': 20844.897, 'duration': 6.442}, {'end': 20855.14, 'text': 'Moreover, manipulating the DOM was very expensive.', 'start': 20852.119, 'duration': 3.021}, {'end': 20860.142, 'text': 'Therefore, there was a search for new technology which could save us from this trouble.', 'start': 20855.58, 'duration': 4.562}, {'end': 20863.962, 'text': 'So this is where react.js comes into picture.', 'start': 20861.021, 'duration': 2.941}, {'end': 20869.845, 'text': 'With react.js, you can divide your entire application into various independent components.', 'start': 20864.763, 'duration': 5.082}], 'summary': 'Repeated dom creation leads to memory wastage and performance decrease, prompting adoption of react.js for component-based architecture.', 'duration': 30.27, 'max_score': 20839.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE20839575.jpg'}, {'end': 21002.558, 'src': 'embed', 'start': 20978.658, 'weight': 1, 'content': [{'end': 20987.225, 'text': 'Each time any data is added or updated, react.js automatically updates the specific component whose state has actually changed.', 'start': 20978.658, 'duration': 8.567}, {'end': 20993.23, 'text': 'this saves the browser from the task of reloading the whole application to reflect the changes.', 'start': 20987.225, 'duration': 6.005}, {'end': 20998.235, 'text': 'react.js was developed by Jordan walk, a software engineer working at Facebook.', 'start': 20993.23, 'duration': 5.005}, {'end': 21002.558, 'text': 'Facebook implemented react.js in 2011 in the newsfeed section.', 'start': 20998.235, 'duration': 4.323}], 'summary': 'React.js updates specific components on data change, developed by jordan walk at facebook in 2011.', 'duration': 23.9, 'max_score': 20978.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE20978658.jpg'}, {'end': 21179.178, 'src': 'embed', 'start': 21154.846, 'weight': 2, 'content': [{'end': 21164.271, 'text': 'server-side rendering or SSR server-side rendering allows you to pre-render the initial state of your react components at the server side itself.', 'start': 21154.846, 'duration': 9.425}, {'end': 21170.854, 'text': 'with SSR, the servers response to the browser becomes only the HTML of the page which is now ready to be rendered.', 'start': 21164.271, 'duration': 6.583}, {'end': 21179.178, 'text': 'Thus the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed as a result.', 'start': 21171.474, 'duration': 7.704}], 'summary': 'Ssr pre-renders react components at server, reducing browser wait time for javascript execution.', 'duration': 24.332, 'max_score': 21154.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE21154846.jpg'}, {'end': 21229.679, 'src': 'embed', 'start': 21200.328, 'weight': 3, 'content': [{'end': 21207.031, 'text': 'a major advantage of one-way data binding is that throughout the application, the data flows in a single direction,', 'start': 21200.328, 'duration': 6.703}, {'end': 21208.592, 'text': 'which gives you a better control over it.', 'start': 21207.031, 'duration': 1.561}, {'end': 21216.931, 'text': 'Because of this, application state is contained in specific stores and as a result, rest of the components remain loosely coupled.', 'start': 21209.386, 'duration': 7.545}, {'end': 21221.654, 'text': 'This makes our application more flexible leading to increased efficiency.', 'start': 21217.551, 'duration': 4.103}, {'end': 21229.679, 'text': 'Simplicity The use of JSX files makes the application really simple, easy to code and understand as well.', 'start': 21222.474, 'duration': 7.205}], 'summary': 'One-way data binding provides better control, increases efficiency, and promotes flexibility in the application.', 'duration': 29.351, 'max_score': 21200.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE21200328.jpg'}, {'end': 21423.698, 'src': 'embed', 'start': 21398.938, 'weight': 4, 'content': [{'end': 21407.308, 'text': 'It controls derived data and enables the communication between multiple components using a central store which has authority over all the data.', 'start': 21398.938, 'duration': 8.37}, {'end': 21412.011, 'text': 'Any update in data throughout the application must occur here itself.', 'start': 21407.869, 'duration': 4.142}, {'end': 21416.454, 'text': 'Flux provides stability to the application and reduces runtime errors.', 'start': 21412.691, 'duration': 3.763}, {'end': 21420.356, 'text': "So now let's take a look at some of the important concepts in React.", 'start': 21417.134, 'duration': 3.222}, {'end': 21423.698, 'text': 'The first thing that you should be aware of is components.', 'start': 21421.117, 'duration': 2.581}], 'summary': 'Flux ensures stability and reduces errors in application by controlling derived data and enabling communication between components.', 'duration': 24.76, 'max_score': 21398.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE21398938.jpg'}, {'end': 21881.134, 'src': 'embed', 'start': 21855.209, 'weight': 5, 'content': [{'end': 21866.3, 'text': 'or you can install it in your environment by using the script tags, either in a new HTML file or in your existing HTML file in a existing project.', 'start': 21855.209, 'duration': 11.091}, {'end': 21874.909, 'text': 'So if you are interested in playing around with react what I want to give you that you can use online code playgrounds.', 'start': 21867.001, 'duration': 7.908}, {'end': 21881.134, 'text': 'So I will show you that so what you can do is that You can use online playgrounds.', 'start': 21875.55, 'duration': 5.584}], 'summary': 'Install react in your environment using script tags and use online code playgrounds for experimentation.', 'duration': 25.925, 'max_score': 21855.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE21855209.jpg'}, {'end': 22391.589, 'src': 'embed', 'start': 22368.34, 'weight': 7, 'content': [{'end': 22375.585, 'text': 'So if you see in this example, if I click on this button like this state has been telling me that you like this.', 'start': 22368.34, 'duration': 7.245}, {'end': 22381.63, 'text': 'So that is how we can create components or you can say class-based components in react.js.', 'start': 22376.246, 'duration': 5.384}, {'end': 22391.589, 'text': "So let's go ahead and see what Node.js is actually.", 'start': 22387.987, 'duration': 3.602}], 'summary': 'Explaining creation of class-based components in react.js and introduction to node.js', 'duration': 23.249, 'max_score': 22368.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE22368340.jpg'}, {'end': 22495.136, 'src': 'embed', 'start': 22468.166, 'weight': 6, 'content': [{'end': 22474.028, 'text': 'And basically, if it is a data-intensive application, Node.js is something that is specifically made for that.', 'start': 22468.166, 'duration': 5.862}, {'end': 22476.549, 'text': "Let's see how that happens basically.", 'start': 22474.648, 'duration': 1.901}, {'end': 22478.71, 'text': 'If we talk about the features of Node.js.', 'start': 22477.029, 'duration': 1.681}, {'end': 22481.911, 'text': 'it is open source, it is simple and fast.', 'start': 22478.71, 'duration': 3.201}, {'end': 22484.852, 'text': 'it is asynchronous, highly scalable.', 'start': 22481.911, 'duration': 2.941}, {'end': 22488.553, 'text': 'you would face no problems in scaling your Node.js application.', 'start': 22484.852, 'duration': 3.701}, {'end': 22495.136, 'text': 'It basically works on something called a microservice architecture as well, and it facilitates that microservice architecture really well.', 'start': 22488.673, 'duration': 6.463}], 'summary': 'Node.js is open source, simple, fast, and highly scalable for data-intensive applications and microservice architecture.', 'duration': 26.97, 'max_score': 22468.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE22468166.jpg'}], 'start': 20750.652, 'title': 'React.js and node.js', 'summary': 'Provides an overview of react.js, its advantages, features, and prerequisites, along with concepts, learning approaches, installation, and html component addition. it also covers the creation of components in react.js using class-based components and provides an overview of node.js architecture, features, and comparison to traditional server architecture.', 'chapters': [{'end': 21128.371, 'start': 20750.652, 'title': 'React.js overview', 'summary': 'Explains the significance of learning react.js, highlighting its advantages over traditional data flow models, its implementation by facebook resulting in improved ui, and its features including jsx and virtual dom.', 'duration': 377.719, 'highlights': ['Facebook implemented react.js in 2011 in the newsfeed section, resulting in a drastic improvement in UI and a boost in popularity. React.js implementation by Facebook in 2011 led to a significant improvement in UI, resulting in a boost in popularity.', 'React.js automatically updates specific components when data changes, saving the browser from reloading the entire application, particularly effective for real-time applications. React.js automatically updates specific components upon data changes, saving the browser from reloading the entire application, particularly beneficial for real-time applications.', 'React.js uses a virtual DOM to update only the elements that have changed, leading to faster application performance and no memory wastage. React.js utilizes a virtual DOM to update only the changed elements, enhancing application performance and minimizing memory wastage.', 'JSX extends ECMAScript to allow XML and HTML-like syntax to coexist with JavaScript, making HTML code easy to understand and boosting JavaScript performance. JSX extends ECMAScript to enable XML and HTML-like syntax alongside JavaScript, enhancing code readability and improving JavaScript performance.']}, {'end': 21357.908, 'start': 21129.451, 'title': 'React features & prerequisites', 'summary': 'Discusses the testability of react views, server-side rendering, one-way data binding, and the simplicity of using jsx. it also outlines the prerequisites for learning react, including html, css, javascript, and npm.', 'duration': 228.457, 'highlights': ["Server-side rendering (SSR) allows pre-rendering of initial state, leading to faster web page loading. With SSR, the server's response to the browser becomes only the HTML of the page, resulting in faster web page loading.", 'One-way data binding in React provides better control over data flow and promotes loose coupling of components, leading to increased efficiency. One-way data binding ensures that data flows in a single direction, leading to better control and increased efficiency in the application.', "The use of JSX files and React's component-based approach makes the application simple and easy to understand. The use of JSX files and React's component-based approach simplifies coding and enhances the application's understandability.", "NPM, the default packet manager of Node.js, manages all Node.js packages and modules and is the world's largest software registry. NPM is the default packet manager of Node.js, responsible for managing all Node.js packages and modules, and is the world's largest software registry."]}, {'end': 21829.577, 'start': 21358.528, 'title': 'React: concepts and learning approach', 'summary': 'Covers the important concepts of react including code editors, react architecture, components, states and props, keys, debugging, event handling, learning curve, project-oriented learning approach, and developer communities like github, stack overflow, and edureka community.', 'duration': 471.049, 'highlights': ['React has a shallow learning curve and is suitable for beginners, unlike Angular which requires learning additional tools like TypeScript. React has a shallow learning curve, making it suitable for beginners, while Angular requires learning additional tools like TypeScript. React uses ES6 syntax, providing flexibility in tool selection based on specific needs.', 'Components in React are integrated together to build a bigger and dynamic application, and everything in React is a component. Components in React are integrated together to build a bigger and dynamic application, and everything in React is a component. This approach enables the separation of logic and view, allowing multiple components to be rendered simultaneously.', 'Flux provides a unidirectional data flow, controls derived data, and reduces runtime errors in React architecture. Flux provides a unidirectional data flow, controls derived data, and reduces runtime errors in React architecture. It enables communication between multiple components using a central store and ensures that any data update occurs within the central store.', 'States in React are the source of data, mutable, and responsible for determining component rendering and behavior. States in React are the source of data, mutable, and responsible for determining component rendering and behavior. They also have a state lifecycle, including mounting and unmounting, critical for managing performance and resource allocation.', "Props in React are read-only, passed down from parent to child components, and used for maintaining unidirectional data flow. Props in React are read-only, passed down from parent to child components, and used for maintaining unidirectional data flow. They are generally used to render dynamically generated data and ensure the parent component's state changes are passed down to the child component."]}, {'end': 22195.575, 'start': 21829.937, 'title': 'Installing react.js and adding components to html', 'summary': 'Covers the installation of react.js in an application, including using script tags in html files or online code playgrounds, and the steps to add react components to an existing html page. it also emphasizes the dependencies required for react.js installation and recommends installing node.js for beginners learning react.js concepts.', 'duration': 365.638, 'highlights': ['The chapter covers the installation of react.js in an application, including using script tags in HTML files or online code playgrounds. It mentions the importance of keeping updated with the latest react versions and using online code playgrounds like glitch, code pen, and code sandbox for experimenting with react.js.', 'The steps to add react components to an existing HTML page are explained, emphasizing the simplicity and quick setup. It highlights that adding react to an HTML page can be done quickly with a simple HTML page and script tag, taking just a minute to set up.', 'The dependencies required for react.js installation are outlined, including NPM, webpack, react, and Babel for JSX. It specifies the necessity of downloading and installing NPM, along with installing webpack, react, and Babel for JSX to render JavaScript on the browser.', 'The recommendation to install node.js for beginners learning react.js concepts is provided, along with a reference to a comprehensive JavaScript learning resource. It recommends installing node.js from the official website for learning react.js concepts and suggests a JavaScript learning resource for beginners.', 'The process of adding a DOM container and script tags for react.js and react-dom.js is detailed, along with the usage of Babel dot min.js as a preprocessor. It explains adding a DOM container with an ID as root, including script tags for react.js, react-dom.js, and Babel dot min.js as a preprocessor for creating a react component.']}, {'end': 22624.477, 'start': 22196.075, 'title': 'React.js and node.js overview', 'summary': 'Discusses creating components in react.js using class-based components and demonstrates the output, while also providing an overview of node.js architecture, features, and its comparison to traditional server architecture, emphasizing its single-threaded model and event loop processing.', 'duration': 428.402, 'highlights': ['Node.js architecture and features Node.js is described as open source, fast, asynchronous, and highly scalable, working on a single-threaded model and facilitating microservice architecture, with no buffering and event loop processing.', 'Creating class-based components in React.js The process of creating a class component in React.js is explained, including setting initial state, rendering, and setting state, with a demonstration of the output.', 'Comparison of Node.js to traditional server architecture Node.js is compared to traditional server architecture, emphasizing its single-threaded model and event loop processing, enabling parallel request processing with minimal resource usage.']}], 'duration': 1873.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE20750652.jpg', 'highlights': ['React.js uses a virtual DOM to update only the elements that have changed, leading to faster application performance and no memory wastage.', 'React.js automatically updates specific components when data changes, saving the browser from reloading the entire application, particularly effective for real-time applications.', 'Server-side rendering (SSR) allows pre-rendering of initial state, leading to faster web page loading.', 'One-way data binding in React provides better control over data flow and promotes loose coupling of components, leading to increased efficiency.', 'Flux provides a unidirectional data flow, controls derived data, and reduces runtime errors in React architecture.', 'The chapter covers the installation of react.js in an application, including using script tags in HTML files or online code playgrounds.', 'Node.js architecture and features Node.js is described as open source, fast, asynchronous, and highly scalable, working on a single-threaded model and facilitating microservice architecture, with no buffering and event loop processing.', 'Creating class-based components in React.js The process of creating a class component in React.js is explained, including setting initial state, rendering, and setting state, with a demonstration of the output.']}, {'end': 25206.697, 'segs': [{'end': 22666.08, 'src': 'embed', 'start': 22624.477, 'weight': 0, 'content': [{'end': 22634.762, 'text': 'and it is at the same time processing requests from so many clients and it provides a virtual feel that everything is running in parallel but everything is not.', 'start': 22624.477, 'duration': 10.285}, {'end': 22637.924, 'text': 'so that is all because of event loop that is going on.', 'start': 22634.762, 'duration': 3.162}, {'end': 22640.125, 'text': 'so that is basically the architecture.', 'start': 22637.924, 'duration': 2.201}, {'end': 22645.829, 'text': 'and then we talk about something very important as far as node.js is concerned, which is called node package manager.', 'start': 22640.125, 'duration': 5.704}, {'end': 22651.313, 'text': 'now it is called npm in short, and it was primarily known as node package manager.', 'start': 22645.829, 'duration': 5.484}, {'end': 22657.276, 'text': 'but nowadays it is not known as node package manager because it is doing so many things than package management.', 'start': 22651.313, 'duration': 5.963}, {'end': 22659.657, 'text': "it's doing so many other things as well.", 'start': 22657.276, 'duration': 2.381}, {'end': 22661.018, 'text': "we'll see what it is.", 'start': 22659.657, 'duration': 1.361}, {'end': 22666.08, 'text': "so if we talk about the official definition, it's a package manager for node.js packages or modules,", 'start': 22661.018, 'duration': 5.062}], 'summary': 'Node.js uses event loop for parallel processing, npm has expanded beyond package management.', 'duration': 41.603, 'max_score': 22624.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE22624477.jpg'}, {'end': 22869.735, 'src': 'embed', 'start': 22839.64, 'weight': 17, 'content': [{'end': 22844.103, 'text': 'by the way, this is the way you install any third-party library from the npm repository.', 'start': 22839.64, 'duration': 4.463}, {'end': 22851.668, 'text': 'all right, so that is the third-party module, and you would be using npm installer, npm i, to be, in short, to install this particular repository.', 'start': 22844.103, 'duration': 7.565}, {'end': 22854.929, 'text': 'Now let us see the package.json file.', 'start': 22852.668, 'duration': 2.261}, {'end': 22859.131, 'text': 'Package.json file in Node.js is the heart of the entire application.', 'start': 22855.269, 'duration': 3.862}, {'end': 22862.892, 'text': "It's basically the manifest file that contains the metadata of the project.", 'start': 22859.651, 'duration': 3.241}, {'end': 22869.735, 'text': 'Now, at this point of time, let me just create a Node.js project and see what this package.json file looks like,', 'start': 22863.493, 'duration': 6.242}], 'summary': 'Installing third-party libraries from npm repository using npm installer in node.js.', 'duration': 30.095, 'max_score': 22839.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE22839640.jpg'}, {'end': 22908.957, 'src': 'embed', 'start': 22882.04, 'weight': 10, 'content': [{'end': 22889.262, 'text': "so let's say i'll call it node.js demo or maybe i'll call it task manager.", 'start': 22882.04, 'duration': 7.222}, {'end': 22890.663, 'text': 'even better,', 'start': 22889.262, 'duration': 1.401}, {'end': 22897.647, 'text': "we'll try to create some of the task manager functionalities in here and it'll be an api that will be creating or a web service that will be created.", 'start': 22890.663, 'duration': 6.984}, {'end': 22898.968, 'text': "we'll see what it is.", 'start': 22897.647, 'duration': 1.321}, {'end': 22908.957, 'text': "so in this task manager i'm going to initialize a node.js project and in order to initialize a node.js project you need to have node.js installed in your computer,", 'start': 22898.968, 'duration': 9.989}], 'summary': 'Creating a node.js project for a task manager api.', 'duration': 26.917, 'max_score': 22882.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE22882040.jpg'}, {'end': 23099.025, 'src': 'embed', 'start': 23068.59, 'weight': 2, 'content': [{'end': 23070.971, 'text': "Let's just open this up in our editor.", 'start': 23068.59, 'duration': 2.381}, {'end': 23076.574, 'text': 'You see that here is the package.json available with every information that we provided.', 'start': 23072.252, 'duration': 4.322}, {'end': 23079.735, 'text': 'Now, this is a very basic package.json.', 'start': 23077.094, 'duration': 2.641}, {'end': 23082.376, 'text': "There'll be so many things inside a package.json file.", 'start': 23079.755, 'duration': 2.621}, {'end': 23090.639, 'text': 'And a normal or a real world package.json might look something like this, where there are so many things like the name of the project is there.', 'start': 23083.116, 'duration': 7.523}, {'end': 23093.701, 'text': 'Then there is something called version as well.', 'start': 23091.239, 'duration': 2.462}, {'end': 23095.322, 'text': 'Description of the project.', 'start': 23094.201, 'duration': 1.121}, {'end': 23099.025, 'text': 'What is the starting point of the project which is your main script to run first.', 'start': 23095.762, 'duration': 3.263}], 'summary': 'Understanding package.json: it contains project info, version, description, and main script.', 'duration': 30.435, 'max_score': 23068.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE23068590.jpg'}, {'end': 23164.597, 'src': 'embed', 'start': 23138.958, 'weight': 20, 'content': [{'end': 23144.241, 'text': 'So that is your package.json file, which got created by the way, when we initialized the Node.js project.', 'start': 23138.958, 'duration': 5.283}, {'end': 23146.483, 'text': 'and you can also manually create it.', 'start': 23144.841, 'duration': 1.642}, {'end': 23149.945, 'text': "but it's better that we go for npm init as a process.", 'start': 23146.483, 'duration': 3.462}, {'end': 23152.408, 'text': "so now let's go for node.js basics.", 'start': 23149.945, 'duration': 2.463}, {'end': 23159.774, 'text': "so if we talk about basics, it's like any language basics, and the main thing that we need to check out as a basic is the data types.", 'start': 23152.408, 'duration': 7.366}, {'end': 23161.555, 'text': 'so there are certain primitive data types.', 'start': 23160.174, 'duration': 1.381}, {'end': 23164.597, 'text': 'there are certain abstract data types, like non-primitive data type.', 'start': 23161.555, 'duration': 3.042}], 'summary': 'Package.json created via npm init for node.js basics including data types.', 'duration': 25.639, 'max_score': 23138.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE23138958.jpg'}, {'end': 23272.804, 'src': 'embed', 'start': 23208.131, 'weight': 3, 'content': [{'end': 23218.245, 'text': 'I might have to create an HTML file where I might have to include this app as a script file and then I might have to execute the HTML file and open the console to see this particular output.', 'start': 23208.131, 'duration': 10.114}, {'end': 23226.369, 'text': "But if you have installed Node.js on your computer, which we have, you'd actually be able to run this particular app.js really easily.", 'start': 23218.886, 'duration': 7.483}, {'end': 23227.769, 'text': "Let's run this one.", 'start': 23226.889, 'duration': 0.88}, {'end': 23231.53, 'text': 'For that, I would have to go into my project.', 'start': 23228.349, 'duration': 3.181}, {'end': 23235.092, 'text': 'Let me just clear the screen and run this one.', 'start': 23232.071, 'duration': 3.021}, {'end': 23237.813, 'text': 'And really simple to run a Node.js application.', 'start': 23235.112, 'duration': 2.701}, {'end': 23240.834, 'text': "It's simply node and the file name that is app.js.", 'start': 23237.853, 'duration': 2.981}, {'end': 23245.215, 'text': 'And you can see that it displays the first name in my console.', 'start': 23242.074, 'duration': 3.141}, {'end': 23249.236, 'text': 'So whatever I do as console.log gets displayed in my terminal.', 'start': 23245.635, 'duration': 3.601}, {'end': 23251.816, 'text': 'That is something that I would like to keep in mind.', 'start': 23249.756, 'duration': 2.06}, {'end': 23257.637, 'text': "And remember, this is a string that we have created, but there's no concept of a strict data type.", 'start': 23252.136, 'duration': 5.501}, {'end': 23260.778, 'text': 'So basically, the first name can also be something like this.', 'start': 23258.018, 'duration': 2.76}, {'end': 23263.579, 'text': "A first name can be reassigned to, let's say, a number.", 'start': 23260.798, 'duration': 2.781}, {'end': 23266.259, 'text': 'And that will not be a problem for JavaScript.', 'start': 23264.079, 'duration': 2.18}, {'end': 23268.2, 'text': 'That is the core nature of JavaScript.', 'start': 23266.539, 'duration': 1.661}, {'end': 23269.24, 'text': "It's not strictly typed.", 'start': 23268.24, 'duration': 1}, {'end': 23272.804, 'text': 'So, that is something that I would also like you to keep in mind.', 'start': 23269.74, 'duration': 3.064}], 'summary': "Demonstrating running a node.js application and javascript's non-strict data typing.", 'duration': 64.673, 'max_score': 23208.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE23208131.jpg'}, {'end': 23414.2, 'src': 'embed', 'start': 23378.072, 'weight': 5, 'content': [{'end': 23383.856, 'text': "two examples that we have, but for now you can remember that double equal to doesn't compare the data types,", 'start': 23378.072, 'duration': 5.784}, {'end': 23385.837, 'text': 'while triple equal to also checks the data types.', 'start': 23383.856, 'duration': 1.981}, {'end': 23391.201, 'text': "But then again, there is so much going on under the hood, which it's not in the scope of this particular session.", 'start': 23386.317, 'duration': 4.884}, {'end': 23392.922, 'text': 'But just keep this in mind.', 'start': 23391.821, 'duration': 1.101}, {'end': 23396.505, 'text': "There's a unique operator that is available for JavaScript specifically.", 'start': 23392.942, 'duration': 3.563}, {'end': 23399.847, 'text': 'And then there are certain other languages that might have this operator.', 'start': 23397.105, 'duration': 2.742}, {'end': 23402.109, 'text': 'But JavaScript is the one that came up with this.', 'start': 23400.247, 'duration': 1.862}, {'end': 23402.909, 'text': 'All right.', 'start': 23402.609, 'duration': 0.3}, {'end': 23404.35, 'text': 'So this is one thing.', 'start': 23402.989, 'duration': 1.361}, {'end': 23409.855, 'text': 'And by this time, you might have got an idea on how we run an application or how we run a file in Node.js.', 'start': 23404.851, 'duration': 5.004}, {'end': 23414.2, 'text': 'so this is one other thing that i would also like to mention.', 'start': 23410.555, 'duration': 3.645}], 'summary': 'Javascript has a unique triple equal operator, and node.js is used to run applications or files.', 'duration': 36.128, 'max_score': 23378.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE23378072.jpg'}, {'end': 23469.108, 'src': 'embed', 'start': 23441.53, 'weight': 6, 'content': [{'end': 23447.875, 'text': "all right, so if i run this particular file, It'll give me whatever output we expect, which is fine.", 'start': 23441.53, 'duration': 6.345}, {'end': 23455.619, 'text': 'Now, one thing I would also like to tell you is, in JavaScript there is a provision where you can create a function without a name,', 'start': 23448.415, 'duration': 7.204}, {'end': 23460.783, 'text': 'an anonymous function, which is also something that JavaScript came up with a function with no name.', 'start': 23455.619, 'duration': 5.164}, {'end': 23469.108, 'text': 'And if this is the case, then how would you call the function? So for that, you can do something like this var sayHello is equal to a function.', 'start': 23461.443, 'duration': 7.665}], 'summary': 'Javascript allows creating anonymous functions, like var sayhello = function.', 'duration': 27.578, 'max_score': 23441.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE23441530.jpg'}, {'end': 23510.153, 'src': 'embed', 'start': 23482.515, 'weight': 7, 'content': [{'end': 23485.416, 'text': 'So. and then we are calling the variable as a function.', 'start': 23482.515, 'duration': 2.901}, {'end': 23488.878, 'text': 'So again, if I run this particular code, the output would be the same.', 'start': 23485.416, 'duration': 3.462}, {'end': 23494.621, 'text': 'Just keep in mind that function here can be anonymous in JavaScript, All right.', 'start': 23488.878, 'duration': 5.743}, {'end': 23495.342, 'text': 'and then objects.', 'start': 23494.621, 'duration': 0.721}, {'end': 23496.943, 'text': 'now object.', 'start': 23496.022, 'duration': 0.921}, {'end': 23499.104, 'text': 'there are two ways you can create objects.', 'start': 23496.943, 'duration': 2.161}, {'end': 23510.153, 'text': "one is through object literals like var, let's say, student is equal to a constant object which has, let's say, name, ravi and email ravi, gmail.com,", 'start': 23499.104, 'duration': 11.049}], 'summary': 'Javascript allows creating objects using object literals with name and email attributes.', 'duration': 27.638, 'max_score': 23482.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE23482515.jpg'}, {'end': 23558.921, 'src': 'embed', 'start': 23527.722, 'weight': 8, 'content': [{'end': 23532.724, 'text': "and then there is a constructor pattern as well available, but it's okay if we don't go for that.", 'start': 23527.722, 'duration': 5.002}, {'end': 23537.466, 'text': 'but then there is another pattern which uses object constructor to create an object.', 'start': 23532.724, 'duration': 4.742}, {'end': 23543.648, 'text': 'now, going into node.js, core modules, one of the modules is file system, that is the fs module.', 'start': 23537.466, 'duration': 6.182}, {'end': 23547.35, 'text': 'fs module, if you want to include, or any module.', 'start': 23543.648, 'duration': 3.702}, {'end': 23549.772, 'text': 'if you want to include, you go for this syntax.', 'start': 23547.35, 'duration': 2.422}, {'end': 23558.921, 'text': 'a variable is equal to require and the module name, and this would be something like this, for example var fs is equal to require fs.', 'start': 23549.772, 'duration': 9.149}], 'summary': "Node.js has a core module 'file system' (fs) which is included using the syntax 'var fs = require('fs')'.", 'duration': 31.199, 'max_score': 23527.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE23527722.jpg'}], 'start': 22624.477, 'title': 'Node.js server and package management', 'summary': 'Covers node.js architecture, npm package manager, package.json, javascript basics, file operations, server creation, event emitters, express server creation, and error handling.', 'chapters': [{'end': 23175.042, 'start': 22624.477, 'title': 'Node.js npm and package management', 'summary': 'Discusses the architecture of node.js, the functionality of npm as a package manager for node.js packages, and the role of package.json as the metadata file for node.js projects.', 'duration': 550.565, 'highlights': ['Node.js architecture and event loop Node.js architecture provides a virtual feel of running in parallel due to the event loop, processing requests from multiple clients simultaneously.', 'npm as a package manager for Node.js npm is the default package manager for Node.js packages or modules, added as a default installation from Node.js version 6 or 0.6 onwards, providing a repository of libraries and command line utility for managing repositories and versions.', 'package.json as the heart of Node.js project package.json file in Node.js contains metadata of the project, including project name, version, description, dependencies, scripts, and other project-related information.']}, {'end': 23740.795, 'start': 23175.042, 'title': 'Javascript basics and node.js file operations', 'summary': 'Covers the basics of javascript including variable creation, operators, and functions, with a focus on node.js file operations such as reading and writing files using the fs module.', 'duration': 565.753, 'highlights': ['Node.js allows running JavaScript applications easily without the need for an HTML file Node.js enables easy execution of JavaScript applications without the requirement of an HTML file, providing a simpler method for running applications.', "JavaScript is not strictly typed, allowing variables to be reassigned to different data types without issues JavaScript's non-strict data typing allows variables to be easily reassigned to various data types, showcasing the language's flexibility.", 'Introduction of the unique triple equal to sign for strict data type comparison in JavaScript The unique triple equal to sign in JavaScript allows for strict data type comparison, distinguishing it from the double equal to sign.', "Demonstration of creating functions with and without names in JavaScript The chapter demonstrates creating both named and anonymous functions in JavaScript, showcasing the language's function flexibility.", 'Explanation of creating objects in JavaScript using object literals and constructor pattern The chapter explains the creation of objects in JavaScript using object literals and the constructor pattern, providing insight into multiple object creation methods.', 'Introduction to Node.js fs module for file operations including reading and writing files The chapter introduces the Node.js fs module for file operations, demonstrating reading and writing files, emphasizing the use of callback functions for asynchronous operations.']}, {'end': 24045.43, 'start': 23741.656, 'title': 'Node.js server creation and file handling', 'summary': 'Covers creating a server in node.js using the http module and basics of reading and writing files, with a focus on server creation and listening to port 3000, emphasizing the concept of node.js as a runtime enabling server creation.', 'duration': 303.774, 'highlights': ["Node.js being a runtime enabling server creation Node.js is depicted as a runtime enabling server creation, emphasizing that it's not a pre-existing server but a runtime allowing server creation, unlike other languages.", 'Creating a server using Node.js HTTP module Demonstration of creating a server in Node.js using the HTTP module, including listening on port 3000 and handling server messages.', 'Server constantly listening to port number 3000 Emphasis on the server constantly listening to port number 3000, highlighting the application not ending until forcefully terminated.', 'Basics of reading and writing files in Node.js Mention of reading and writing files in Node.js, with a brief demonstration of file overwriting and future mention of JSON file handling.']}, {'end': 24327.486, 'start': 24045.43, 'title': 'Creating a server with node.js and using event emitters', 'summary': 'Explains how to create a server in node.js using almost three statements, introduces event emitters and event listeners, and demonstrates the functionality of emitting and listening to events, resulting in the server logging a message upon requests and executing specific functions.', 'duration': 282.056, 'highlights': ['Creating a server in Node.js with almost three statements The chapter demonstrates how to create a server in Node.js using almost three statements, showing the efficiency and simplicity of the process.', 'Introducing event emitters and event listeners The transcript introduces the concept of event emitters and event listeners, providing an overview of their functions and how they work in a Node.js environment.', 'Demonstrating emitting and listening to events in Node.js The chapter demonstrates emitting and listening to events in Node.js, displaying the process of triggering events and executing corresponding functions upon events, resulting in specific actions such as logging messages upon server requests.']}, {'end': 24660.838, 'start': 24327.486, 'title': 'Creating evented and express servers in node.js', 'summary': 'Discusses creating an evented server in node.js using event emitter to handle real-time applications, and then explores creating a web server using node.js and integrating the expressjs framework for faster application development and handling errors.', 'duration': 333.352, 'highlights': ['Creating an evented server using event emitter in Node.js for real-time applications The event emitter is used to trigger events and execute the on method to listen to events, allowing passing of data into functions and displaying them, making the Node.js server evented for creating real-time applications.', 'Integrating ExpressJS framework for faster application development and error handling ExpressJS facilitates data flow and routing, provides template engines like Jade and EJS, connects with databases such as MySQL, MongoDB, and Redis, and simplifies server creation, while also offering error handling processes for better application maintainability.', 'Installing ExpressJS as a third-party module in Node.js ExpressJS is installed as a third-party library using npm install express, which downloads and installs express from the npm repository, creating a node modules folder with the required dependencies for express to function.']}, {'end': 25206.697, 'start': 24660.838, 'title': 'Creating a server in express', 'summary': 'Details the process of creating a server in express, including handling get requests for the root and custom paths, and reading data from a json file to return as a response, emphasizing the use of express, http, and fs modules while addressing the common way to create a server and an express app together.', 'duration': 545.859, 'highlights': ['The chapter details the process of creating a server in Express, including handling GET requests for the root and custom paths, and reading data from a JSON file to return as a response. This includes creating a server using Express, addressing GET requests for the root and custom paths (e.g., tasks), and reading data from a JSON file to return as a response.', 'Emphasizes the use of express, HTTP, and fs modules while addressing the common way to create a server and an Express app together. The chapter emphasizes the use of express, HTTP, and fs modules while addressing the common way to create a server and an Express app together, including creating an Express app, a server with the create server method, and listening to port 3000.', 'Specifically demonstrates the process of converting a string to JSON using the JSON.parse method and sending JSON data as a response. The chapter specifically demonstrates the process of converting a string to JSON using the JSON.parse method and sending JSON data as a response, emphasizing the use of response.json instead of response.send to send JSON data as a response.']}], 'duration': 2582.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE22624477.jpg', 'highlights': ['Node.js architecture provides a virtual feel of running in parallel due to the event loop, processing requests from multiple clients simultaneously.', 'npm is the default package manager for Node.js packages or modules, added as a default installation from Node.js version 6 or 0.6 onwards, providing a repository of libraries and command line utility for managing repositories and versions.', 'package.json file in Node.js contains metadata of the project, including project name, version, description, dependencies, scripts, and other project-related information.', 'Node.js enables easy execution of JavaScript applications without the requirement of an HTML file, providing a simpler method for running applications.', "JavaScript's non-strict data typing allows variables to be easily reassigned to various data types, showcasing the language's flexibility.", 'The unique triple equal to sign in JavaScript allows for strict data type comparison, distinguishing it from the double equal to sign.', "The chapter demonstrates creating both named and anonymous functions in JavaScript, showcasing the language's function flexibility.", 'The chapter explains the creation of objects in JavaScript using object literals and the constructor pattern, providing insight into multiple object creation methods.', 'The chapter introduces the Node.js fs module for file operations, demonstrating reading and writing files, emphasizing the use of callback functions for asynchronous operations.', "Node.js is depicted as a runtime enabling server creation, emphasizing that it's not a pre-existing server but a runtime allowing server creation, unlike other languages.", 'Demonstration of creating a server in Node.js using the HTTP module, including listening on port 3000 and handling server messages.', 'Emphasis on the server constantly listening to port number 3000, highlighting the application not ending until forcefully terminated.', 'The chapter demonstrates how to create a server in Node.js using almost three statements, showing the efficiency and simplicity of the process.', 'The transcript introduces the concept of event emitters and event listeners, providing an overview of their functions and how they work in a Node.js environment.', 'The chapter demonstrates emitting and listening to events in Node.js, displaying the process of triggering events and executing corresponding functions upon events, resulting in specific actions such as logging messages upon server requests.', 'The event emitter is used to trigger events and execute the on method to listen to events, allowing passing of data into functions and displaying them, making the Node.js server evented for creating real-time applications.', 'ExpressJS facilitates data flow and routing, provides template engines like Jade and EJS, connects with databases such as MySQL, MongoDB, and Redis, and simplifies server creation, while also offering error handling processes for better application maintainability.', 'ExpressJS is installed as a third-party library using npm install express, which downloads and installs express from the npm repository, creating a node modules folder with the required dependencies for express to function.', 'This includes creating a server using Express, addressing GET requests for the root and custom paths (e.g., tasks), and reading data from a JSON file to return as a response.', 'The chapter emphasizes the use of express, HTTP, and fs modules while addressing the common way to create a server and an Express app together, including creating an Express app, a server with the create server method, and listening to port 3000.', 'The chapter specifically demonstrates the process of converting a string to JSON using the JSON.parse method and sending JSON data as a response, emphasizing the use of response.json instead of response.send to send JSON data as a response.']}, {'end': 27067.107, 'segs': [{'end': 26713.371, 'src': 'embed', 'start': 26678.588, 'weight': 0, 'content': [{'end': 26681.588, 'text': 'So what happens is we are just passing the state of an object to the client.', 'start': 26678.588, 'duration': 3}, {'end': 26687.649, 'text': "So since you're just passing the state of an object, that's where the term representational state transfer comes in.", 'start': 26681.968, 'duration': 5.681}, {'end': 26694.871, 'text': 'Now, if I have to define rest for you, then representational state transfer or rest is an architectural style,', 'start': 26688.21, 'duration': 6.661}, {'end': 26700.312, 'text': 'as well as an approach for communication purposes that is often used in various web services development.', 'start': 26694.871, 'duration': 5.441}, {'end': 26713.371, 'text': 'This architectural style of rest helps in leveraging the lesser use of bandwidth to make an application more suitable for internet and is often regarded as the language of internet and is completely based on resources.', 'start': 26700.859, 'duration': 12.512}], 'summary': 'Rest is an architectural style for web services, reducing bandwidth use and based on resources.', 'duration': 34.783, 'max_score': 26678.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE26678588.jpg'}, {'end': 26868.68, 'src': 'embed', 'start': 26834.611, 'weight': 2, 'content': [{'end': 26843.493, 'text': 'Once the processing is done by the server and appropriate response is sent back to the client through header status or response body coming to client server.', 'start': 26834.611, 'duration': 8.882}, {'end': 26849.574, 'text': 'when I say client server, what I mean by that is that you know it has a uniform interface that separates the clients from the servers.', 'start': 26843.493, 'duration': 6.081}, {'end': 26856.495, 'text': 'So separating the concerns basically helps in improving the users interface portability across multiple platforms,', 'start': 26850.114, 'duration': 6.381}, {'end': 26859.336, 'text': 'as well as enhance the scalability of the server components.', 'start': 26856.495, 'duration': 2.841}, {'end': 26861.597, 'text': 'Coming to uniform interface.', 'start': 26859.896, 'duration': 1.701}, {'end': 26868.68, 'text': 'to obtain the uniformity to the application, rest has defined for interface constraints which are resource identification,', 'start': 26861.597, 'duration': 7.083}], 'summary': 'Rest defines interface constraints for uniformity and scalability across platforms.', 'duration': 34.069, 'max_score': 26834.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE26834611.jpg'}], 'start': 25206.697, 'title': 'Node.js, databases, mongodb, and api basics', 'summary': "Covers node.js file handling, database connectivity, mongodb features and applications, as well as the use of json, xml formats in api responses, and understanding rest api basics, providing an introduction to node.js, highlighting mongodb's features, and explaining the use of json, xml formats, and rest api principles.", 'chapters': [{'end': 25267.273, 'start': 25206.697, 'title': 'Introduction to node.js file handling', 'summary': 'Covers creating a server using express and http, reading from a file using the fs module, and emphasizes the potential for database connectivity in node.js, providing a good introduction to node.js with a recommendation to explore more routing and database connectivity.', 'duration': 60.576, 'highlights': ['The chapter emphasizes creating a server using Express and HTTP, and reading from a file using the fs module, as well as the potential for database connectivity in Node.js.', 'The transcript mentions that the plain array is obtained from the file used, showcasing the practical application of learned concepts.', 'It is suggested that while reading from a file may be sufficient for now, there is potential for more advanced topics such as routing and database connectivity in Node.js.']}, {'end': 25918.065, 'start': 25268.013, 'title': 'Understanding databases and mongodb', 'summary': "Provides an overview of databases, highlighting its importance in business operations and data management, as well as a detailed exploration of mongodb's features, scalability, and reasons for its adoption, including its document model, scalability, deployment options, and community support.", 'duration': 650.052, 'highlights': ['MongoDB is a scalable, flexible NoSQL database with high number of good features, including ad-hoc queries and indexing. MongoDB offers ad-hoc queries for optimized and real-time analytics, supporting field queries, range queries, and regular expression searches, and also utilizes indexing for better query executions.', 'The chapter discusses the importance of databases in business operations, emphasizing their role in managing sales transactions, product inventory, customer profiles, and market activities. Databases play a crucial role in managing sales transactions, product inventory, customer profiles, and market activities, and they offer advantages such as data redundancy reduction, updating error reduction, and increased data consistency.', "MongoDB's reasons for adoption include its document model, scalability, deployment options, and community support, making it a natural choice for developers and businesses. Reasons for MongoDB's adoption include its document model, scalability, deployment options, and community support, allowing for fast development, horizontal scaling, and access to a mature platform ecosystem."]}, {'end': 26371.652, 'start': 25918.065, 'title': 'Mongodb: features, applications, and companies', 'summary': 'Outlines key features of mongodb including indexing, replication, load balancing, sharding, and its applications in content management systems, product data management, operational intelligence, and various companies using mongodb, such as ebay, metlife, shutterfly, and aadhaar.', 'duration': 453.587, 'highlights': ['Replication MongoDB employs replica sets for better data availability and scalability, where the primary server accepts all write operations and applies them across secondary servers.', 'Sharding Sharding helps distribute large data sets across multiple distributed collections or shards, essential for scaling growing web applications with millions of daily users.', 'Companies using MongoDB Notable companies using MongoDB include eBay, MetLife, Shutterfly, and Aadhaar, showcasing its scalability and performance for various applications like customer sales, image storage, and unique identification projects.', 'Load Balancing MongoDB supports large-scale load balancing, handling multiple concurrent read and write requests with best-in-class concurrency control locking protocols.', 'Applications of MongoDB MongoDB finds applications in content management systems, product data management, operational intelligence, and more, making it suitable for storing user comments, managing product catalogs, real-time analytics, and operational intelligence.']}, {'end': 26581.732, 'start': 26372.442, 'title': 'Using json and xml formats in api response', 'summary': 'Discusses the use of json and xml formats in api responses, explaining how these formats are used to retrieve data from a server, and highlighting the challenges of using multiple methods for data retrieval.', 'duration': 209.29, 'highlights': ['The data returned by the server in response to the request of the client is either in the form of a JSON format or in the form of an XML format, providing a structured representation of the data.', "The chapter highlights the challenges of using multiple methods such as 'put', 'post', and 'get' for data retrieval, emphasizing the cumbersome nature of continuous data requests.", "The transcript explains the process of retrieving dynamic data from a server using the example of the 'book my show' app, illustrating how movie and event information is continuously updated and retrieved via API requests."]}, {'end': 27067.107, 'start': 26581.792, 'title': 'Understanding rest api basics', 'summary': 'Explains the concept of rest api, its features, principles, and methods, emphasizing its role in creating, reading, updating, and deleting resources using http methods, and its architectural styles focused on resource representation, client-server separation, and stateless communication, with a focus on leveraging bandwidth and simplifying web services development.', 'duration': 485.315, 'highlights': ['REST API is based on representational state transfer, an architectural style focused on leveraging bandwidth and simplifying web services development, and is used for creating, reading, updating, and deleting resources using HTTP methods. REST API is an architectural style focused on leveraging bandwidth and simplifying web services development, used for creating, reading, updating, and deleting resources using HTTP methods.', 'Features of REST API include proper documentation, simpler usage than previous approaches, and proper logging of error messages, ensuring ease of use and troubleshooting in web services development. Features of REST API include proper documentation, simpler usage than previous approaches, and proper logging of error messages, ensuring ease of use and troubleshooting in web services development.', 'Principles of REST API include stateless communication, uniform interface, cacheable layer systems, and code on demand, emphasizing resource representation, client-server separation, and efficient performance through caching and layered architecture. Principles of REST API include stateless communication, uniform interface, cacheable layer systems, and code on demand, emphasizing resource representation, client-server separation, and efficient performance through caching and layered architecture.']}], 'duration': 1860.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE25206697.jpg', 'highlights': ['MongoDB offers ad-hoc queries for optimized and real-time analytics, supporting field queries, range queries, and regular expression searches, and also utilizes indexing for better query executions.', "Reasons for MongoDB's adoption include its document model, scalability, deployment options, and community support, allowing for fast development, horizontal scaling, and access to a mature platform ecosystem.", 'Sharding helps distribute large data sets across multiple distributed collections or shards, essential for scaling growing web applications with millions of daily users.', 'Companies using MongoDB include eBay, MetLife, Shutterfly, and Aadhaar, showcasing its scalability and performance for various applications like customer sales, image storage, and unique identification projects.', 'The data returned by the server in response to the request of the client is either in the form of a JSON format or in the form of an XML format, providing a structured representation of the data.', 'REST API is an architectural style focused on leveraging bandwidth and simplifying web services development, used for creating, reading, updating, and deleting resources using HTTP methods.', 'Features of REST API include proper documentation, simpler usage than previous approaches, and proper logging of error messages, ensuring ease of use and troubleshooting in web services development.', 'Principles of REST API include stateless communication, uniform interface, cacheable layer systems, and code on demand, emphasizing resource representation, client-server separation, and efficient performance through caching and layered architecture.', 'The chapter emphasizes creating a server using Express and HTTP, and reading from a file using the fs module, as well as the potential for database connectivity in Node.js.', "The transcript explains the process of retrieving dynamic data from a server using the example of the 'book my show' app, illustrating how movie and event information is continuously updated and retrieved via API requests."]}, {'end': 28476.079, 'segs': [{'end': 27091.793, 'src': 'embed', 'start': 27067.748, 'weight': 0, 'content': [{'end': 27073.955, 'text': 'So now that you know, what is rest API and what all you need to mind in order to deliver an efficient application.', 'start': 27067.748, 'duration': 6.207}, {'end': 27077.179, 'text': "Let's next look into how you can create a rest API.", 'start': 27074.315, 'duration': 2.864}, {'end': 27084.467, 'text': "So for this practical demonstration what I'm going to do is I'm going to create a simple crude list application using node.js.", 'start': 27077.862, 'duration': 6.605}, {'end': 27091.793, 'text': "So to build the application basically, I'll be using node.js ExpressJS Joey and node.mon apart from that.", 'start': 27084.867, 'duration': 6.926}], 'summary': 'Learn about rest api and building a crud list application using node.js.', 'duration': 24.045, 'max_score': 27067.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE27067748.jpg'}, {'end': 27228.049, 'src': 'embed', 'start': 27201.682, 'weight': 4, 'content': [{'end': 27205.985, 'text': 'So to do that what you will do is you will type in NPM in it.', 'start': 27201.682, 'duration': 4.303}, {'end': 27210.227, 'text': 'So this will basically initialize all the NPM modules into your system.', 'start': 27206.845, 'duration': 3.382}, {'end': 27215.844, 'text': "Once you do this what you see is basically you'll be asked to enter the details for your project.", 'start': 27211.062, 'duration': 4.782}, {'end': 27219.345, 'text': "For example, let's say package name to be demo right?", 'start': 27216.404, 'duration': 2.941}, {'end': 27223.507, 'text': 'Oh, it says you cannot put in capital letters right?', 'start': 27220.046, 'duration': 3.461}, {'end': 27228.049, 'text': "So I'll just type in demo over here and then version let it be 1.0 point only.", 'start': 27223.547, 'duration': 4.502}], 'summary': "Initializing npm modules and configuring project details, e.g., package name 'demo' and version 1.0.", 'duration': 26.367, 'max_score': 27201.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE27201682.jpg'}, {'end': 27822.198, 'src': 'embed', 'start': 27794.855, 'weight': 2, 'content': [{'end': 27798.457, 'text': "Now, let's say, you know, we want to get the information of a specific customer.", 'start': 27794.855, 'duration': 3.602}, {'end': 27804.54, 'text': "Let's say, you know, we want to get the information of ID of Josh, right? So basically his IDs to write.", 'start': 27798.877, 'duration': 5.663}, {'end': 27806.462, 'text': "So what I've done is in the URL.", 'start': 27804.861, 'duration': 1.601}, {'end': 27810.504, 'text': "I've mentioned that you know, it will be slash API slash customers slash ID.", 'start': 27806.542, 'duration': 3.962}, {'end': 27813.726, 'text': 'So whenever you send a request from the client side,', 'start': 27811.124, 'duration': 2.602}, {'end': 27819.689, 'text': 'what you have to mention in the URL is basically localhost colon 8080 slash API slash customers slash to.', 'start': 27813.726, 'duration': 5.963}, {'end': 27822.198, 'text': 'So whenever you send this request,', 'start': 27820.276, 'duration': 1.922}], 'summary': 'Explaining how to retrieve customer information using specific ids via api requests.', 'duration': 27.343, 'max_score': 27794.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE27794855.jpg'}, {'end': 28043.574, 'src': 'embed', 'start': 28021.579, 'weight': 3, 'content': [{'end': 28030.625, 'text': "So that's how basically the get method works and that's how basically your API is helping you to connect the client request to the server and so that the server can send back the response to the client.", 'start': 28021.579, 'duration': 9.046}, {'end': 28033.067, 'text': "Now, let's move forward with the next method.", 'start': 28031.166, 'duration': 1.901}, {'end': 28034.248, 'text': 'That is the post method.', 'start': 28033.107, 'duration': 1.141}, {'end': 28040.092, 'text': "So if you remember from your HTTP method, you'll see that you know the post method was used to create right?", 'start': 28034.788, 'duration': 5.304}, {'end': 28043.574, 'text': 'So whenever you want to create a resource, you use the post method.', 'start': 28040.112, 'duration': 3.462}], 'summary': "The 'get' method connects client request to server; 'post' method creates resources.", 'duration': 21.995, 'max_score': 28021.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE28021579.jpg'}, {'end': 28267.937, 'src': 'embed', 'start': 28244.007, 'weight': 1, 'content': [{'end': 28250.169, 'text': "So, to update a resource, let's say, you know we consider an example of updating a specific customer IDs name, right?", 'start': 28244.007, 'duration': 6.162}, {'end': 28252.691, 'text': "So let's say, you know we had all the six IDs, right?", 'start': 28250.19, 'duration': 2.501}, {'end': 28258.433, 'text': "So, for example, let's say we update some customer trees ID and then we mentioned the name to be Tyler Patterson, right?", 'start': 28252.711, 'duration': 5.722}, {'end': 28266.336, 'text': "So for that what I've coded is basically that whenever app.put that is basically app is again the same object that you had created over here.", 'start': 28258.493, 'duration': 7.843}, {'end': 28267.937, 'text': 'That is the Express application.', 'start': 28266.716, 'duration': 1.221}], 'summary': "Updating a specific customer id's name to tyler patterson using app.put in express application.", 'duration': 23.93, 'max_score': 28244.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE28244007.jpg'}], 'start': 27067.748, 'title': 'Creating rest api with node.js and express.js', 'summary': 'Covers the creation of a rest api using node.js, expressjs, and npm, including installation process, setting up the server, utilizing http methods, and manipulating data, providing comprehensive guidance and practical examples.', 'chapters': [{'end': 27291.811, 'start': 27067.748, 'title': 'Creating rest api with node.js', 'summary': 'Covers the creation of a rest api using node.js, expressjs, and npm, including the installation process of node.js and initialization of npm modules. it demonstrates the creation of a project directory, installation of required libraries, and the initialization of npm modules.', 'duration': 224.063, 'highlights': ['The chapter covers the creation of a REST API using Node.js, ExpressJS, and NPM It details the tools and technologies required for creating a REST API, including Node.js, ExpressJS, and NPM.', 'It demonstrates the creation of a project directory and installation of required libraries The process of creating a project directory and installing necessary libraries and packages is explained.', 'The initialization of NPM modules is also explained The process of initializing NPM modules into the system is demonstrated, including entering project details and metadata.', 'The installation process of Node.js is illustrated The simple installation process of Node.js is described, including downloading the LTS version and installing it based on system requirements.']}, {'end': 27565.278, 'start': 27292.831, 'title': 'Setting up express.js and related libraries', 'summary': 'Covers the installation of express.js, joey, and node 1, which are used to create restful apis and validate information, while also enabling automatic server restart upon file changes, and defining the entry point for the application in the package.json file.', 'duration': 272.447, 'highlights': ['Express.js, Joey, and Node 1 installation Installing Express.js, Joey, and Node 1 using npm commands to create RESTful APIs, validate information, and enable automatic server restart upon file changes.', "Defining the entry point in package.json Defining the entry point for the application and understanding the package.json file's metadata, including the module name, description, and main file.", 'Creating and using Express application Importing and utilizing Express and Joey libraries to create an Express application, use app variable for various actions, and implement app.use for JSON file usage.']}, {'end': 27906.95, 'start': 27565.298, 'title': 'Express.js server and http methods', 'summary': 'Discusses setting up a server using express.js, utilizing an environment variable for the server port, and implementing get method to retrieve data of customers from the server, with details on the url, request, and response parameters.', 'duration': 341.652, 'highlights': ['Setting up server using Express.JS and assigning a port environment variable to 8080 The server is configured to run on the port 8080 by assigning a port environment variable automatically.', 'Implementing GET method to retrieve data of a specific customer The GET method is used to retrieve specific customer data from the server based on the provided ID in the URL, and an error message is displayed if the requested ID is not found.', 'Utilizing request and response parameters in the GET method to handle client-server communication The request and response parameters are utilized in the GET method to facilitate communication between the client and server, enabling the retrieval of specific data based on the URL.']}, {'end': 28476.079, 'start': 27906.95, 'title': 'Using http methods in node.js', 'summary': 'Demonstrates the use of http methods in node.js, such as get, post, put, and delete, to interact with an api, including sending requests, validating customer information, updating resources, and deleting specific data, resulting in the successful manipulation of data in the server, with examples and outcomes provided.', 'duration': 569.129, 'highlights': ['The chapter demonstrates the use of HTTP methods, such as GET, POST, PUT, and DELETE, in Node.js for interacting with an API. The chapter provides insights into the use of various HTTP methods, including GET, POST, PUT, and DELETE, in Node.js to interact with an API, showcasing the versatility of Node.js for handling different types of requests.', "The use of POST method to create a resource, validate customer information, and push data into the server results in the successful addition of a new value to the server's stack. The demonstration of the POST method illustrates the process of creating a new resource, validating customer information, and pushing data into the server, resulting in an increase in the server's stack, showcasing the successful addition of a new value.", "The demonstration of the PUT method showcases the updating of resources, such as modifying a specific customer ID's name, resulting in the successful update of the customer object and a response sent back to the client. The PUT method demonstration illustrates the process of updating resources by modifying a specific customer ID's name, leading to the successful update of the customer object and the sending of a response back to the client.", "The use of the DELETE method to remove specific data from the server's stack and send a response back to the client demonstrates the successful deletion of data from the server. The demonstration of the DELETE method highlights the successful removal of specific data from the server's stack and the sending of a response back to the client, showcasing the effective deletion of data from the server."]}], 'duration': 1408.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE27067748.jpg', 'highlights': ['The chapter covers the creation of a REST API using Node.js, ExpressJS, and NPM, providing comprehensive guidance and practical examples.', 'The chapter provides insights into the use of various HTTP methods, including GET, POST, PUT, and DELETE, in Node.js to interact with an API, showcasing the versatility of Node.js for handling different types of requests.', "The demonstration of the POST method illustrates the process of creating a new resource, validating customer information, and pushing data into the server, resulting in an increase in the server's stack, showcasing the successful addition of a new value.", "The PUT method demonstration illustrates the process of updating resources by modifying a specific customer ID's name, leading to the successful update of the customer object and the sending of a response back to the client.", "The demonstration of the DELETE method highlights the successful removal of specific data from the server's stack and the sending of a response back to the client, showcasing the effective deletion of data from the server."]}, {'end': 30122.309, 'segs': [{'end': 29191.029, 'src': 'embed', 'start': 29166.81, 'weight': 2, 'content': [{'end': 29174.157, 'text': "I'm going to give you a brief overview on how to download the desktop version of GitHub.", 'start': 29166.81, 'duration': 7.347}, {'end': 29181.023, 'text': "So I'm simply going to search for GitHub desktop on my search engine and I'm going to click on the first link that's available on this page.", 'start': 29174.417, 'duration': 6.606}, {'end': 29191.029, 'text': "Now I can simply click on this button that says download for Windows 64-bit that's compatible to my current version of my personal computer.", 'start': 29181.804, 'duration': 9.225}], 'summary': 'Guide to download github desktop for windows 64-bit provided.', 'duration': 24.219, 'max_score': 29166.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE29166810.jpg'}, {'end': 29240.549, 'src': 'embed', 'start': 29212.006, 'weight': 3, 'content': [{'end': 29215.767, 'text': "It is simply a storage space for the correct project that you're working on.", 'start': 29212.006, 'duration': 3.761}, {'end': 29220.869, 'text': 'GitHub is a very popular central repository that allows you to share your files,', 'start': 29216.368, 'duration': 4.501}, {'end': 29225.771, 'text': 'whereas Git allows you to create local repositories that are present on the system you are working on.', 'start': 29220.869, 'duration': 4.902}, {'end': 29232.854, 'text': 'So you can basically push your local repository into GitHub and share it with other collaborators via the central one.', 'start': 29226.531, 'duration': 6.323}, {'end': 29236.481, 'text': 'Now that we know what a repository is and how it works.', 'start': 29233.635, 'duration': 2.846}, {'end': 29240.549, 'text': "Let's go on to the demonstration part and create a first repository.", 'start': 29236.882, 'duration': 3.667}], 'summary': 'Github is a popular repository for sharing files, while git creates local repositories for collaboration.', 'duration': 28.543, 'max_score': 29212.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE29212006.jpg'}, {'end': 29372.786, 'src': 'embed', 'start': 29345.325, 'weight': 0, 'content': [{'end': 29348.73, 'text': 'The next option is add a dot gitignore file.', 'start': 29345.325, 'duration': 3.405}, {'end': 29354.277, 'text': 'So this file will let you ignore a list of files when the user is pushing files to GitHub.', 'start': 29349.131, 'duration': 5.146}, {'end': 29362.201, 'text': "That's what this option really does, but I'm going to let this be unchecked for now for your repository to truly be open source.", 'start': 29354.738, 'duration': 7.463}, {'end': 29363.802, 'text': 'You will need to license it.', 'start': 29362.501, 'duration': 1.301}, {'end': 29367.384, 'text': 'So others are free to use change and distribute the software.', 'start': 29364.242, 'duration': 3.142}, {'end': 29372.786, 'text': 'You can simply click on choose a license option and pick your the required license for your project.', 'start': 29367.844, 'duration': 4.942}], 'summary': "A .gitignore file helps to ignore files when pushing to github. it's recommended to choose a license for an open-source repository.", 'duration': 27.461, 'max_score': 29345.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE29345325.jpg'}, {'end': 29545.572, 'src': 'embed', 'start': 29518.586, 'weight': 6, 'content': [{'end': 29526.69, 'text': "So we'll come back to that part later on this session, but you can move back to your main page of this repository by clicking on the name button here.", 'start': 29518.586, 'duration': 8.104}, {'end': 29528.61, 'text': 'So Edureka is the name of my repository.', 'start': 29526.75, 'duration': 1.86}, {'end': 29529.611, 'text': "So I'm going to click on that.", 'start': 29528.63, 'duration': 0.981}, {'end': 29532.792, 'text': "So now I'm back to the main page of my repository.", 'start': 29530.391, 'duration': 2.401}, {'end': 29538.706, 'text': 'Before we learn how to create our first branch, let us understand what branches are.', 'start': 29533.962, 'duration': 4.744}, {'end': 29545.572, 'text': 'Branches allow you to work on other features that can be included and merge with the master branch if required.', 'start': 29539.447, 'duration': 6.125}], 'summary': 'Learning about branches to work on other features and merge with master branch.', 'duration': 26.986, 'max_score': 29518.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE29518586.jpg'}, {'end': 29654.708, 'src': 'embed', 'start': 29623.875, 'weight': 5, 'content': [{'end': 29629.136, 'text': 'so this is the exact replica of your master branch and you can work on this branch.', 'start': 29623.875, 'duration': 5.261}, {'end': 29635.779, 'text': 'you can work on any other feature or you can add something, you can remove something, you can really experiment on this branch.', 'start': 29629.136, 'duration': 6.643}, {'end': 29644.243, 'text': "And if you're happy with this, you can merge back this feature or the experimentation that you've been working on to your master branch right?", 'start': 29636.059, 'duration': 8.184}, {'end': 29645.704, 'text': "So you can see there's a readme text file.", 'start': 29644.263, 'duration': 1.441}, {'end': 29646.684, 'text': "It's exactly the same.", 'start': 29645.744, 'duration': 0.94}, {'end': 29654.708, 'text': "There's the name of your repository the description of the repository you can click on the readme text file and everything's the absolute same.", 'start': 29646.724, 'duration': 7.984}], 'summary': 'Create and work on replica branch for experimentation before merging to master branch.', 'duration': 30.833, 'max_score': 29623.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE29623875.jpg'}], 'start': 28476.079, 'title': 'Github essentials', 'summary': 'Provides a comprehensive guide to github, covering its features, advantages, repository management, basic operations like commits and pull requests, and emphasizes the significance of readme files and branch management.', 'chapters': [{'end': 29082.214, 'start': 28476.079, 'title': 'Understanding github', 'summary': 'Explains the need for github as an essential platform for software developers, detailing its features, advantages, and differences from competitors, while providing a demonstration on using github.', 'duration': 606.135, 'highlights': ['GitHub is a version control system that enables multiple people to work on a single project and is capable of hosting millions of programmers and hobbyists. GitHub enables multiple people to simultaneously work on a single project and is capable of hosting millions of programmers and hobbyists.', "GitHub's powerful and popular features, open-source platform, and community support, including contributions from large corporations like Microsoft, Google, SAP, Airbnb, IBM, and PayPal, make it unmatched for exposure and insight. GitHub's powerful features, open-source platform, and community support, including contributions from large corporations, make it unmatched for exposure and insight.", 'GitHub tracks all changes made to code, offers a detailed change log, and eliminates the need for complex corporate security solutions by hosting code on the cloud with branch protection, commit signing verification, and access control. GitHub tracks all changes made to code, offers a detailed change log, and eliminates the need for complex corporate security solutions.']}, {'end': 29383.251, 'start': 29082.875, 'title': 'Github profile management and repository creation', 'summary': 'Covers how to manage a github profile, including editing the profile, viewing repositories and signing out, and also explains the process of creating a repository, emphasizing the significance of readme files and the choice between public and private repositories.', 'duration': 300.376, 'highlights': ['The chapter covers how to manage a GitHub profile, including editing the profile, viewing repositories and signing out. ', 'The process of creating a repository is explained, emphasizing the significance of readme files and the choice between public and private repositories. ', 'GitHub allows users to add a bio, company, location, website, and Twitter username to their profile for identity creation. ', 'The repositories section displays current and past projects, packages, and contributions made on GitHub from the last year. ', 'GitHub desktop version download process is outlined, including the options for Windows and Mac users. ']}, {'end': 29730.328, 'start': 29384.247, 'title': 'Github repository basics', 'summary': 'Covers creating a repository, understanding branches, and making commits on github, with a focus on creating and working with branches and understanding their role in managing project features and changes.', 'duration': 346.081, 'highlights': ['Creating a repository involves adding a name, choosing a description, setting it as public or private, and initializing it with specific options. To create a repository, you add a name, choose a description, set it as public or private, and initialize it with specific options, such as adding an optional description and choosing to initialize the repository as public or private.', 'Understanding branches on GitHub, their role in managing project features, and their significance as the main branch for project activities. Branches allow you to work on other features that can be included and merged with the master branch. The master branch is the main branch where the project resides, and additional branches allow for working on other features or experimenting with the project.', 'Creating and working with branches involves creating additional branches, making changes, and merging features back to the master branch as needed. GitHub allows you to create additional branches where you can work on other features or experiment with the project. After working on these branches, you can merge the features or changes back to the master branch as required.', 'Commits on GitHub record changes to project files and are assigned a unique identification (SHA or hash) for version history. Commits on GitHub record changes to project files and are assigned a unique identification (SHA or hash) for version history, allowing you to save changes and track the history of each commit performed on project files.']}, {'end': 30122.309, 'start': 29730.788, 'title': 'Github commit and pull request', 'summary': 'Covers the process of making a first commit, including adding a line to the readme file and committing directly to a branch, as well as creating and merging a pull request from a branch to the master branch.', 'duration': 391.521, 'highlights': ['The process of making a first commit, including adding a line to the readme file and committing directly to a branch Adding a line to the readme file, committing directly to a branch, and implementing changes to the file', 'Creating and merging a pull request from a branch to the master branch Creating a pull request, comparing branches, merging the pull request, and confirming the merge']}], 'duration': 1646.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE28476079.jpg', 'highlights': ["GitHub's powerful features, open-source platform, and community support make it unmatched for exposure and insight.", 'GitHub tracks all changes made to code, offers a detailed change log, and eliminates the need for complex corporate security solutions.', 'The chapter covers how to manage a GitHub profile, including editing the profile, viewing repositories, and signing out.', 'The process of creating a repository is explained, emphasizing the significance of readme files and the choice between public and private repositories.', 'Creating a repository involves adding a name, choosing a description, setting it as public or private, and initializing it with specific options.', 'Understanding branches on GitHub, their role in managing project features, and their significance as the main branch for project activities.', 'Creating and working with branches involves creating additional branches, making changes, and merging features back to the master branch as needed.', 'Commits on GitHub record changes to project files and are assigned a unique identification (SHA or hash) for version history.', 'The process of making a first commit, including adding a line to the readme file and committing directly to a branch.', 'Creating and merging a pull request from a branch to the master branch.']}, {'end': 31526.381, 'segs': [{'end': 31335.332, 'src': 'embed', 'start': 31302.737, 'weight': 0, 'content': [{'end': 31308.078, 'text': 'okay, so this is the thing that you have got from mvn repository.', 'start': 31302.737, 'duration': 5.341}, {'end': 31316.12, 'text': 'also, similarly, for test ng, you have to search for test ng over here org.testng.', 'start': 31308.078, 'duration': 8.042}, {'end': 31323.281, 'text': 'okay, so click on test ng, stable version 6.14.3.', 'start': 31316.12, 'duration': 7.161}, {'end': 31325.022, 'text': 'click on this.', 'start': 31323.281, 'duration': 1.741}, {'end': 31330.943, 'text': 'copy these file lines of maven dependency, this thing, and you need to paste it over here.', 'start': 31325.022, 'duration': 5.921}, {'end': 31333.651, 'text': "I've already done this.", 'start': 31331.809, 'duration': 1.842}, {'end': 31335.332, 'text': 'just the version number is different.', 'start': 31333.651, 'duration': 1.681}], 'summary': 'Retrieve files from mvn repository, copy maven dependency lines, and paste for test ng.', 'duration': 32.595, 'max_score': 31302.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE31302737.jpg'}], 'start': 30122.809, 'title': "Microsoft's github implementation and maven usage", 'summary': "Discusses microsoft's transition to open source, their contributions, and the role of maven. it also covers maven build lifecycle, advantages, setting up a project, and testing with selenium and testng, ensuring build success.", 'chapters': [{'end': 30522.511, 'start': 30122.809, 'title': 'Github implementation by microsoft', 'summary': "Discusses microsoft's transition to embracing open source, their significant contributions to open source projects, and the role of maven in managing project dependencies and automating software builds.", 'duration': 399.702, 'highlights': ["Microsoft's transition to embracing open source Microsoft initially opposed open source but later became one of the biggest contributors to open source with around 25,000 engineers maintaining over a thousand open source projects.", 'Significance of Maven in managing project dependencies and automating software builds Maven simplifies handling project dependencies and software version upgrades by specifying them in a pom.xml file, automating the download and integration of required libraries.', 'Role of Maven in building Java-based projects Maven is a powerful build automation tool primarily used for Java-based projects, addressing build procedures and dependencies using conventions and predefined targets for tasks like code compilation and packaging.', "Microsoft's creation of Open Source Programs Office (OSPO) to manage repositories and contributors on GitHub Microsoft established the OSPO to effectively manage thousands of repositories and contributors on GitHub, emphasizing the value of collaboration and the community within GitHub.", "Microsoft's significant contributions to open source projects Microsoft's engineers maintain TypeScript, .NET, Windows Terminal, DARP Helm, and over a thousand other open source projects, demonstrating their substantial contributions to the open source community."]}, {'end': 31159.7, 'start': 30523.051, 'title': 'Maven build lifecycle and phases', 'summary': 'Provides an overview of maven architecture, discusses the maven build lifecycle, highlighting the key phases and goals, and outlines the advantages of using maven, emphasizing its ability to provide uniform build systems and useful project information. it also demonstrates the process of setting up a maven project in eclipse and explains the essential elements of the pom.xml file.', 'duration': 636.649, 'highlights': ['Maven build lifecycle consists of three built-in life cycles: default, clean, and site, with the default build life cycle comprising 23 phases. The default build life cycle consists of 23 phases, making it the main build life cycle of Maven.', 'The default build lifecycle includes important phases such as validate, compile, test, package, integration test, install, and deploy. The default build life cycle includes key phases like validate, compile, test, package, integration test, install, and deploy.', 'Maven provides a uniform build system, offering a shield from underlying mechanisms and enabling developers to comprehend the complete state of a development effort in a short time. Maven allows a project to build using its project object model (pom) and a set of shared plugins, providing a shield from underlying mechanisms and enabling quick comprehension of the complete state of a development effort.', 'Maven aims to gather useful project information from the palm file and project sources, including change log documents, cross-referenced sources, dependency lists, and unit test reports. Maven aims to gather useful project information from the palm file and project sources, including change log documents, cross-referenced sources, dependency lists, and unit test reports.', 'Maven project layout guidelines and workflow assistance, including release and issue management, are provided to guide projects in best development practices. Maven provides project layout guidelines and workflow assistance, including release and issue management, to guide projects in best development practices.']}, {'end': 31526.381, 'start': 31159.7, 'title': 'Testing with selenium and testng', 'summary': 'Covers the process of integrating selenium with testng, including adding dependencies and plugins in the pom.xml file, running maven phases like clean and test, and executing test code with build success and no failures.', 'duration': 366.681, 'highlights': ['Integrating Selenium with TestNG The chapter covers the process of integrating Selenium with TestNG, including adding dependencies and plugins in the pom.xml file.', "Running Maven phases like clean and test The chapter demonstrates running Maven phases like clean and test, where 'maven clean' cleans previous project builds and 'maven test' executes all previous lifecycle phases of Maven before the test.", 'Executing test code with build success and no failures The chapter explains how to execute test code, both through Eclipse and command prompt, with successful build and no failures.', 'Adding dependencies and plugins in the pom.xml file The process of adding dependencies like Selenium and TestNG, along with plugins for compiling and unit testing, in the pom.xml file is explained, including searching for stable versions and copying the Maven dependency code.']}], 'duration': 1403.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE30122809.jpg', 'highlights': ["Microsoft's engineers maintain TypeScript, .NET, Windows Terminal, DARP Helm, and over a thousand other open source projects, demonstrating their substantial contributions to the open source community.", 'Maven simplifies handling project dependencies and software version upgrades by specifying them in a pom.xml file, automating the download and integration of required libraries.', 'Microsoft established the OSPO to effectively manage thousands of repositories and contributors on GitHub, emphasizing the value of collaboration and the community within GitHub.', 'The default build life cycle consists of 23 phases, making it the main build life cycle of Maven.', 'Maven allows a project to build using its project object model (pom) and a set of shared plugins, providing a shield from underlying mechanisms and enabling quick comprehension of the complete state of a development effort.', 'Maven aims to gather useful project information from the palm file and project sources, including change log documents, cross-referenced sources, dependency lists, and unit test reports.', 'Maven provides project layout guidelines and workflow assistance, including release and issue management, to guide projects in best development practices.', 'The chapter covers the process of integrating Selenium with TestNG, including adding dependencies and plugins in the pom.xml file.', "The chapter demonstrates running Maven phases like clean and test, where 'maven clean' cleans previous project builds and 'maven test' executes all previous lifecycle phases of Maven before the test.", 'The chapter explains how to execute test code, both through Eclipse and command prompt, with successful build and no failures.', 'The process of adding dependencies like Selenium and TestNG, along with plugins for compiling and unit testing, in the pom.xml file is explained, including searching for stable versions and copying the Maven dependency code.']}, {'end': 32724.859, 'segs': [{'end': 31828.361, 'src': 'embed', 'start': 31804.543, 'weight': 10, 'content': [{'end': 31813.89, 'text': 'you can say continuous integration is sort of development practice where developers pull the code from a version control system and make the code deployed in the lower lifecycle environment.', 'start': 31804.543, 'duration': 9.347}, {'end': 31816.812, 'text': 'the beauty of using this ci tool says we can automate the process.', 'start': 31813.89, 'duration': 2.922}, {'end': 31817.333, 'text': 'such a way.', 'start': 31816.812, 'duration': 0.521}, {'end': 31821.596, 'text': 'whenever developer makes a new commit, a new change in the version control system tool,', 'start': 31817.333, 'duration': 4.263}, {'end': 31828.361, 'text': 'we create a sort of pipeline and the pipeline automatically picks the code from the vcs tool and then compile it and then deploy the software.', 'start': 31821.596, 'duration': 6.765}], 'summary': 'Continuous integration automates code deployment from version control, enabling faster development cycles.', 'duration': 23.818, 'max_score': 31804.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE31804543.jpg'}, {'end': 32029.832, 'src': 'embed', 'start': 31984.026, 'weight': 0, 'content': [{'end': 31987.948, 'text': 'It is a server-based system that runs on software Apache Tomcat.', 'start': 31984.026, 'duration': 3.922}, {'end': 31995.432, 'text': 'It supports VCS tools like Git PitBucket and also build automation tools like Apache, Maven Ant,', 'start': 31988.308, 'duration': 7.124}, {'end': 32000.194, 'text': 'and it helps to make and facilitate our continuous integration and continuous delivery process.', 'start': 31995.432, 'duration': 4.762}, {'end': 32006.998, 'text': "Jenkins was first released in the year 2011, and it's a completely open-source software as part of the MIT license.", 'start': 32000.835, 'duration': 6.163}, {'end': 32010.118, 'text': 'jenkins, guys, is a plugin based profit.', 'start': 32007.754, 'duration': 2.364}, {'end': 32015.307, 'text': "in jenkins, you've got plugins which basically used to interact with different, different tools and components.", 'start': 32010.118, 'duration': 5.189}, {'end': 32020.307, 'text': 'In Jenkins, plugins are primary releases in languages other than Java.', 'start': 32016.064, 'duration': 4.243}, {'end': 32025.59, 'text': 'Plugins are available to integrate Jenkins with most version control system tools and most databases.', 'start': 32020.867, 'duration': 4.723}, {'end': 32029.832, 'text': 'Using these plugins, we set up purposes, for example, unit testing.', 'start': 32026.43, 'duration': 3.402}], 'summary': 'Jenkins, released in 2011, is an open-source server system supporting vcs tools like git pitbucket and build automation tools like maven ant, facilitating continuous integration and delivery process through its plugin-based approach.', 'duration': 45.806, 'max_score': 31984.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE31984026.jpg'}, {'end': 32120.436, 'src': 'embed', 'start': 32090.85, 'weight': 5, 'content': [{'end': 32095.573, 'text': "so when you're deploying a code executing a pipeline, you can run those code on those xyz servers.", 'start': 32090.85, 'duration': 4.723}, {'end': 32098.335, 'text': 'there is a beauty of using jenkins master slave.', 'start': 32096.073, 'duration': 2.262}, {'end': 32102.46, 'text': 'another good thing about jenkins is jenkins can be deployed on any operating system.', 'start': 32098.335, 'duration': 4.125}, {'end': 32106.504, 'text': 'you can jenkins on a windows node, on a linux node, on a mac os.', 'start': 32102.46, 'duration': 4.044}, {'end': 32112.249, 'text': 'jenkins can be deployed on any operating system and similarly your jenkins master slave can be of any os.', 'start': 32106.504, 'duration': 5.745}, {'end': 32113.751, 'text': 'it is not at all dependent.', 'start': 32112.249, 'duration': 1.502}, {'end': 32120.436, 'text': 'both master slave need to be of the same operating system, Another important core component of Jenkins called as Javadoc.', 'start': 32113.751, 'duration': 6.685}], 'summary': 'Jenkins allows code deployment on any os, with the master-slave setup being os-independent.', 'duration': 29.586, 'max_score': 32090.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE32090850.jpg'}], 'start': 31526.681, 'title': 'Continuous integration and jenkins', 'summary': "Discusses the importance of continuous integration (ci) in software development, highlighting challenges faced without ci, the impact of ci on deployment frequency, and a case study of adobe's improved response time and deployment efficiency after adopting ci. it also introduces jenkins, an open-source automation server released in 2011, supporting vcs tools like git and build automation tools like apache maven and ant. furthermore, it discusses jenkins pipelines, scripted vs declarative approaches, and the benefits of using jenkins file, along with a demonstration of jenkins installation on a centos machine.", 'chapters': [{'end': 31963.153, 'start': 31526.681, 'title': 'Continuous integration benefits and implementation', 'summary': "Discusses the importance of continuous integration (ci) in software development, highlighting challenges faced without ci, the impact of ci on deployment frequency, and a case study of adobe's improved response time and deployment efficiency after adopting ci.", 'duration': 436.472, 'highlights': ["Amazon deploys code every 11.6 seconds using continuous integration, enabling almost five deployments every month. Amazon's deployment frequency of code every 11.6 seconds showcases the effectiveness of continuous integration, allowing for nearly five deployments every month.", "Adobe experienced a 60% faster response time and increased deployment frequency after adopting continuous integration. Adobe's adoption of continuous integration resulted in a 60% faster response time and enhanced deployment frequency, illustrating the benefits of CI implementation.", 'Challenges without continuous integration include infrequent releases, debugging inefficiencies, and time-consuming testing processes. The challenges without continuous integration encompass infrequent releases, debugging inefficiencies, and time-consuming testing processes, hindering development and deployment efficiency.']}, {'end': 32170.685, 'start': 31963.653, 'title': 'Introduction to jenkins', 'summary': 'Introduces jenkins, an open-source automation server released in 2011, which supports vcs tools like git and build automation tools like apache maven and ant, and it facilitates continuous integration and continuous delivery processes.', 'duration': 207.032, 'highlights': ['Jenkins is an open-source automation server that supports VCS tools like Git and build automation tools like Apache Maven and Ant. Jenkins is a server-based system that facilitates continuous integration and continuous delivery processes, and it supports version control system tools and build automation tools.', 'Jenkins follows a master-slave topology to allow multiple teams to deploy their own pipelines or project codes without interfering with each other. Jenkins follows a master-slave topology to allow multiple teams to deploy their own pipelines or project codes without interference, ensuring that their piece of code runs on servers owned by their own team.', 'Jenkins can be deployed on any operating system and supports plugin-based integration with different tools and components. Jenkins can be deployed on any operating system, and it supports plugin-based integration for interacting with various tools and components.', 'Jenkins utilizes plugins for purposes such as unit testing, compiling, packaging, creating reports, and logging, providing extensive functionality for development processes. Jenkins utilizes plugins for purposes such as unit testing, compiling, packaging, creating reports, and logging, offering extensive functionality for development processes.', 'Jenkins provides security features such as project-based strategy matrix-based authorization to enhance its security. Jenkins provides security features such as project-based strategy matrix-based authorization to enhance its security.']}, {'end': 32469.875, 'start': 32170.685, 'title': 'Jenkins pipeline: scripted vs declarative', 'summary': 'Discusses the significance of jenkins in ci, the concept of pipelines in jenkins, the differences between scripted and declarative pipelines, and the benefits of using jenkins file with a focus on code review, logging, and centralizing code storage.', 'duration': 299.19, 'highlights': ['Jenkins is the go-to tool for CI in the industry, with competitors like GitLab Jenkins is a prominent tool for CI, with competitors like GitLab in the market.', 'Explains the concept of a pipeline in Jenkins, emphasizing the automation and combination of deployment steps The chapter explains the concept of a pipeline in Jenkins, highlighting the automation and combination of deployment steps.', 'Discusses the two common approaches for creating a pipeline in Jenkins: declarative and scripted The chapter discusses the two common approaches for creating a pipeline in Jenkins: declarative and scripted.', 'Differentiates between scripted and declarative pipelines, focusing on syntax and usage of groovy syntax in declarative pipelines It differentiates between scripted and declarative pipelines, focusing on syntax and the usage of groovy syntax in declarative pipelines.', 'Explains the concept of a Jenkins file and its modern deployment mechanism, highlighting its usage and benefits It explains the concept of a Jenkins file and its modern deployment mechanism, highlighting its usage and benefits.', 'Emphasizes the benefits of using Jenkins file, including code review, logging, and centralizing code storage It emphasizes the benefits of using Jenkins file, including code review, logging, and centralizing code storage.', 'Discusses the workflow of Jenkins, including tasks like build, deploy, and code review, and the feedback mechanism It discusses the workflow of Jenkins, including tasks like build, deploy, and code review, and the feedback mechanism.', 'Highlights the standard practice of deploying code on lower life cycle environments before production deployment It highlights the standard practice of deploying code on lower life cycle environments before production deployment.']}, {'end': 32724.859, 'start': 32470.476, 'title': 'Jenkins installation on centos', 'summary': 'Demonstrates the installation of jenkins on a centos machine, highlighting the need for java installation, jenkins running on port 8080, and the process of verifying jenkins code and installing plugins.', 'duration': 254.383, 'highlights': ["Jenkins runs on port 8080, requiring firewall settings to be open for accessibility. Jenkins runs on port 8080, and it's crucial to ensure the firewall settings are open and configured for accessibility.", 'Java installation is a prerequisite for installing Jenkins. Java needs to be installed in the machine before proceeding with the Jenkins installation.', 'The process of verifying Jenkins code and installing plugins is demonstrated, including creating the first admin user. The process of verifying Jenkins code, installing plugins, and creating the initial admin user is illustrated.']}], 'duration': 1198.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE31526681.jpg', 'highlights': ['Amazon deploys code every 11.6 seconds using continuous integration, enabling almost five deployments every month.', 'Adobe experienced a 60% faster response time and increased deployment frequency after adopting continuous integration.', 'Challenges without continuous integration include infrequent releases, debugging inefficiencies, and time-consuming testing processes.', 'Jenkins is an open-source automation server that supports VCS tools like Git and build automation tools like Apache Maven and Ant.', 'Jenkins follows a master-slave topology to allow multiple teams to deploy their own pipelines or project codes without interfering with each other.', 'Jenkins can be deployed on any operating system and supports plugin-based integration with different tools and components.', 'Jenkins utilizes plugins for purposes such as unit testing, compiling, packaging, creating reports, and logging, providing extensive functionality for development processes.', 'Jenkins provides security features such as project-based strategy matrix-based authorization to enhance its security.', 'Jenkins is the go-to tool for CI in the industry, with competitors like GitLab.', 'Explains the concept of a pipeline in Jenkins, emphasizing the automation and combination of deployment steps.', 'Discusses the two common approaches for creating a pipeline in Jenkins: declarative and scripted.', 'Differentiates between scripted and declarative pipelines, focusing on syntax and usage of groovy syntax in declarative pipelines.', 'Explains the concept of a Jenkins file and its modern deployment mechanism, highlighting its usage and benefits.', 'Emphasizes the benefits of using Jenkins file, including code review, logging, and centralizing code storage.', 'Discusses the workflow of Jenkins, including tasks like build, deploy, and code review, and the feedback mechanism.', 'Highlights the standard practice of deploying code on lower life cycle environments before production deployment.', 'Jenkins runs on port 8080, requiring firewall settings to be open for accessibility.', 'Java installation is a prerequisite for installing Jenkins.', 'The process of verifying Jenkins code and installing plugins is demonstrated, including creating the first admin user.']}, {'end': 34234.297, 'segs': [{'end': 34214.433, 'src': 'embed', 'start': 34188.436, 'weight': 0, 'content': [{'end': 34196.803, 'text': 'because you have the same environment throughout the software delivery lifecycle, be it a developer, testing, QA or production.', 'start': 34188.436, 'duration': 8.367}, {'end': 34206.472, 'text': "Now, before moving on to the next section, let's look at a case study about containerizing the NASA land information system framework using Docker.", 'start': 34196.823, 'duration': 9.649}, {'end': 34214.433, 'text': "Now developed by the Hydrological Sciences Laboratory at NASA's Goddard Space Flight Center or GSFC.", 'start': 34206.952, 'duration': 7.481}], 'summary': "Consistent environment across software lifecycle; nasa's gsfc containerizes land information system with docker.", 'duration': 25.997, 'max_score': 34188.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE34188436.jpg'}], 'start': 32724.859, 'title': 'Jenkins, automation, and containerization', 'summary': 'Covers jenkins management, automation of build triggers and pipelines, and the evolution of containerization, emphasizing modern security strategies, successful deployment time, and benefits of docker in a case study.', 'chapters': [{'end': 33235.953, 'start': 32724.859, 'title': 'Jenkins management and architecture', 'summary': 'Discusses jenkins management, including configuring systems, security, master-slave architecture, and plugins, along with creating and executing jobs in jenkins, emphasizing modern security strategies and master-slave authorization methods.', 'duration': 511.094, 'highlights': ['Jenkins management includes configuring systems, security, and master-slave architecture, along with discussing plugins and creating/executing jobs in Jenkins. None', 'The chapter explains the use of project-based metrics authorization strategy and metrics-based security strategy, emphasizing their importance in modern industry security for Jenkins. None', 'The process of creating and executing jobs in Jenkins is detailed, including the use of freestyle projects, executing shell commands, and validating job completion. None', 'The configuration of source code management integration in Jenkins, specifically using Git, is explained, covering the setup of GitHub repository paths and credentials. None']}, {'end': 33541.117, 'start': 33235.953, 'title': 'Automating jenkins build triggers and pipelines', 'summary': 'Details the automation of jenkins build triggers and pipelines, including scheduling jobs using cron tab, automated triggering of jobs on new commits, and creating a scripted pipeline for code deployment, with a successful deployment taking less than a minute and running six test cases.', 'duration': 305.164, 'highlights': ['The chapter details how to automate Jenkins build triggers using cron tab, enabling scheduled job runs every five minutes, every 10 minutes, every hour, or once a day, with the ability to automate job triggering on new commits through the pole SCM option.', 'The chapter explains the creation of interdependent jobs in Jenkins, where the execution of the next job is contingent on the stability or success of the previous job, thus creating a sort of pipeline for job execution.', 'The chapter provides a detailed example of creating a scripted pipeline in Jenkins for code deployment, including preparing the code, building it using Maven, and creating an artifact file, with the entire process of compiling, packaging, building, and unit testing taking less than a minute.', 'The chapter highlights the capability of Jenkins to automate the entire process of compiling, packaging, building, and unit testing, with a successful deployment taking less than a minute and running six test cases, showcasing the efficiency and time-saving benefits of using Jenkins for automation.', 'The chapter emphasizes the capability of Jenkins to make life easier by automating the entire process of compiling, packaging, building, and unit testing, with a successful deployment taking less than a minute and running six test cases, demonstrating the efficiency and time-saving benefits of using Jenkins for automation.']}, {'end': 33809.307, 'start': 33541.553, 'title': 'Evolution of containerization', 'summary': 'Introduces the history of containerization, comparing virtualization and containerization, highlighting the advantages of containerization, the inefficiencies of virtual machines, and how containerization addresses the differences in computing environments.', 'duration': 267.754, 'highlights': ['Containerization brings abstraction to the OS level, making processing and execution extremely fast, as each app has its own set of libraries and binaries in its own container. Containerization brings abstraction to the OS level, resulting in faster processing and execution due to each app having its own set of libraries and binaries in its own container.', "Containerization utilizes a host's operating system, shares relevant public libraries and resources when needed, and applications run on the host kernel, making it more efficient and faster than virtual machines. Containerization utilizes a host's operating system, shares relevant public libraries and resources when needed, and applications run on the host kernel, making it more efficient and faster than virtual machines.", 'Virtualization allowed developers to run multiple operating systems in different virtual machines on the same host operating system, eliminating the need for extra hardware resources. Virtualization allowed developers to run multiple operating systems in different virtual machines on the same host operating system, eliminating the need for extra hardware resources.', 'The maintenance and recovery were easy in case of failure conditions, and the total cost of ownership was less due to the reduced need for infrastructure when using virtual machines. Virtual machines offered advantages such as easy maintenance and recovery in failure conditions, as well as reduced total cost of ownership due to the reduced need for infrastructure.', 'Running multiple virtual machines on the same host OS led to performance degradation, as each VM had its own kernel, set of libraries, and dependencies, consuming a large chunk of system resources. Running multiple virtual machines on the same host OS led to performance degradation, as each VM had its own kernel, set of libraries, and dependencies, consuming a large chunk of system resources.', 'The age-old battle between development and production teams, caused by differences in computing environments, was addressed by the introduction of containerization. The introduction of containerization addressed the age-old battle between development and production teams, caused by differences in computing environments.']}, {'end': 34234.297, 'start': 33810.325, 'title': 'Docker: solving challenges with containerization', 'summary': 'Explains the need for docker to address infrastructure incompatibility, optimization of resources, and the benefits of docker in providing a consistent environment throughout the software delivery lifecycle, with a case study on containerizing the nasa land information system framework using docker.', 'duration': 423.972, 'highlights': ['Docker addresses infrastructure incompatibility and lack of optimization of resources in different environments like QA, staging, and production servers. By using Docker, the challenges of infrastructure incompatibility and lack of optimization of resources in different environments like QA, staging, and production servers can be addressed.', 'Containers are lightweight and function on very little resources, making them fast and efficient. Containers are lightweight and function on minimal resources, making them fast and efficient in comparison to traditional virtual machines.', 'Docker provides a consistent environment throughout the software delivery lifecycle, resolving the issue of applications not working properly in the production environment. Docker ensures a consistent environment throughout the software delivery lifecycle, resolving the issue of applications not working properly in the production environment as experienced with traditional virtual machines.', 'Case study on containerizing the NASA land information system framework using Docker. A case study is presented on containerizing the NASA land information system framework using Docker, demonstrating its application in a high-performance software framework for terrestrial hydrology modeling and data assimilation.']}], 'duration': 1509.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE32724859.jpg', 'highlights': ['Jenkins automation enables successful deployment in less than a minute, showcasing efficiency and time-saving benefits.', 'Containerization brings abstraction to the OS level, resulting in faster processing and execution.', 'Docker resolves infrastructure incompatibility and lack of resource optimization in different environments.', 'Case study on containerizing the NASA land information system framework using Docker.']}, {'end': 36330.895, 'segs': [{'end': 34277.746, 'src': 'embed', 'start': 34254.548, 'weight': 0, 'content': [{'end': 34263.435, 'text': 'In addition, the requirement to support multiple runtime environments across the LIS community had created a significant burden on the NASA team.', 'start': 34254.548, 'duration': 8.887}, {'end': 34274.063, 'text': 'Now. to overcome these challenges, NASA had deployed LIS using Docker containers, which allowed installing an entire software package,', 'start': 34263.915, 'duration': 10.148}, {'end': 34277.746, 'text': 'along with dependencies within a working runtime environment.', 'start': 34274.063, 'duration': 3.683}], 'summary': 'Nasa deployed lis using docker containers to support multiple runtime environments, reducing significant burden.', 'duration': 23.198, 'max_score': 34254.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE34254548.jpg'}, {'end': 34334.26, 'src': 'embed', 'start': 34303.696, 'weight': 1, 'content': [{'end': 34307.76, 'text': 'Now the Docker engine uses a client server architecture,', 'start': 34303.696, 'duration': 4.064}, {'end': 34313.204, 'text': 'where the Docker engine is simply a Docker application that is installed on your local machine.', 'start': 34307.76, 'duration': 5.444}, {'end': 34321.792, 'text': 'The client server architecture communicates using a REST API and the Docker daemon checks the requests to manage the containers.', 'start': 34313.785, 'duration': 8.007}, {'end': 34328.196, 'text': 'So the Docker architecture includes a Docker client which is used to trigger Docker commands,', 'start': 34322.412, 'duration': 5.784}, {'end': 34334.26, 'text': 'a Docker host which runs the Docker daemons and a Docker registry which stores the Docker images.', 'start': 34328.196, 'duration': 6.064}], 'summary': 'Docker engine uses a client-server architecture with a rest api, docker includes client, host, and registry.', 'duration': 30.564, 'max_score': 34303.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE34303696.jpg'}, {'end': 34699.149, 'src': 'embed', 'start': 34666.927, 'weight': 2, 'content': [{'end': 34669.788, 'text': "So first of all, let's start with Docker Compose.", 'start': 34666.927, 'duration': 2.861}, {'end': 34676.418, 'text': 'Now, Docker Compose is a tool for defining and running multi-container Docker applications,', 'start': 34670.635, 'duration': 5.783}, {'end': 34681.941, 'text': 'which basically means you can run different or multiple containers as a single service.', 'start': 34676.418, 'duration': 5.523}, {'end': 34691.966, 'text': 'The containers are still isolated, but they can interact with each other using a YAML file, which is used to configure your application services.', 'start': 34682.601, 'duration': 9.365}, {'end': 34699.149, 'text': 'And then the single command docker-compose up you can create and start all the services from your configuration.', 'start': 34692.466, 'duration': 6.683}], 'summary': 'Docker compose allows running multiple containers as a single service using a yaml file.', 'duration': 32.222, 'max_score': 34666.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE34666927.jpg'}, {'end': 34816.454, 'src': 'embed', 'start': 34789.02, 'weight': 3, 'content': [{'end': 34793.804, 'text': 'Each of the nodes is a daemon which interacts with others using the Docker API.', 'start': 34789.02, 'duration': 4.784}, {'end': 34800.087, 'text': 'Docker Swarm is basically a technique to create and maintain a cluster of different Docker engines.', 'start': 34794.565, 'duration': 5.522}, {'end': 34805.53, 'text': 'Services deployed in any node can be accessed on other nodes in the same cluster.', 'start': 34800.588, 'duration': 4.942}, {'end': 34812.332, 'text': 'It allows for high availability of services, auto load balancing, decentralization of access,', 'start': 34805.97, 'duration': 6.362}, {'end': 34816.454, 'text': 'easy upscaling and downscaling of deployments and rolling updates.', 'start': 34812.332, 'duration': 4.122}], 'summary': 'Docker swarm enables high availability, load balancing, and easy scaling of services across a cluster of docker engines.', 'duration': 27.434, 'max_score': 34789.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE34789020.jpg'}, {'end': 35143.949, 'src': 'embed', 'start': 35111.869, 'weight': 4, 'content': [{'end': 35118.732, 'text': 'For that, remember, you need to have a GitHub account and Docker installed on your machine just the way I showed you right now.', 'start': 35111.869, 'duration': 6.863}, {'end': 35122.633, 'text': "We're gonna build a backend REST API with Python and Django.", 'start': 35119.392, 'duration': 3.241}, {'end': 35130.217, 'text': "We're gonna create a new GitHub project that we are gonna use to store the source code for our Recipe App API.", 'start': 35123.194, 'duration': 7.023}, {'end': 35134.939, 'text': 'Now, this is a wonderful way to show the versatility of Docker.', 'start': 35131.197, 'duration': 3.742}, {'end': 35143.949, 'text': 'Now I found this project while browsing through GitHub and I came to a conclusion that this was a wonderful way to show how eclectic,', 'start': 35135.973, 'duration': 7.976}], 'summary': 'Creating a backend rest api with python and django, using docker and github for storage.', 'duration': 32.08, 'max_score': 35111.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE35111869.jpg'}, {'end': 35519.555, 'src': 'embed', 'start': 35474.512, 'weight': 5, 'content': [{'end': 35482.677, 'text': 'so what this does is that it tells Python to run in the unbuffered mode, which is the recommended mode when running Python within docker containers.', 'start': 35474.512, 'duration': 8.165}, {'end': 35487.039, 'text': "The reason for this is that it doesn't allow python to buffer the outputs.", 'start': 35483.177, 'duration': 3.862}, {'end': 35491.922, 'text': 'It just prints them directly and then avoid some complications and things like that.', 'start': 35487.499, 'duration': 4.423}, {'end': 35497.025, 'text': "So when you're running your python application, we are going to install our dependencies.", 'start': 35492.682, 'duration': 4.343}, {'end': 35505.689, 'text': 'We are going to store our dependencies in a requirements.txt list or file which we are going to create in a moment,', 'start': 35497.085, 'duration': 8.604}, {'end': 35511.893, 'text': 'so that what we need to do here is we need to copy our requirements.txt file.', 'start': 35505.689, 'duration': 6.204}, {'end': 35519.555, 'text': 'And what this does is it says copy from the directory adjacent to the Docker file copy.', 'start': 35512.628, 'duration': 6.927}], 'summary': 'Running python in unbuffered mode is recommended within docker containers to avoid output buffering and complications. dependencies should be stored in a requirements.txt file and copied into the docker file.', 'duration': 45.043, 'max_score': 35474.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE35474512.jpg'}, {'end': 35596.263, 'src': 'embed', 'start': 35549.249, 'weight': 7, 'content': [{'end': 35557.091, 'text': "Next we're going to make a directory within our docker image that we can use to store our application source code.", 'start': 35549.249, 'duration': 7.842}, {'end': 35563.932, 'text': 'So you have your run mkdir forward slash app, all in lowercase,', 'start': 35557.751, 'duration': 6.181}, {'end': 35574.315, 'text': 'and below that we are going to type work the forward slash app and below that we are going to type copy dot slash app, space slash app.', 'start': 35563.932, 'duration': 10.383}, {'end': 35587.037, 'text': 'What this does is it creates an empty folder in our Docker image called forward slash app at this location and then it switches to that as the default directory.', 'start': 35575.129, 'duration': 11.908}, {'end': 35596.263, 'text': "So any application we've run using our Docker container will run starting from this particular location unless we specify otherwise, of course.", 'start': 35587.477, 'duration': 8.786}], 'summary': "Create a directory 'app' in docker image to store source code, setting it as default location for running applications.", 'duration': 47.014, 'max_score': 35549.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE35549249.jpg'}, {'end': 35677.761, 'src': 'embed', 'start': 35652.433, 'weight': 8, 'content': [{'end': 35657.834, 'text': "Finally, this user switches Docker to the user that we've just created.", 'start': 35652.433, 'duration': 5.401}, {'end': 35660.824, 'text': 'The reason we do this is for security purposes.', 'start': 35658.482, 'duration': 2.342}, {'end': 35667.911, 'text': "If you don't do this, then the image will run our application using the root account, which is not recommended,", 'start': 35661.265, 'duration': 6.646}, {'end': 35671.855, 'text': 'because that means if someone compromises our application,', 'start': 35667.911, 'duration': 3.944}, {'end': 35677.761, 'text': 'they can have the root access to the whole image and they can go ahead and do other malicious things,', 'start': 35671.855, 'duration': 5.906}], 'summary': 'Switch docker user for security; avoids root access, enhancing protection.', 'duration': 25.328, 'max_score': 35652.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE35652433.jpg'}, {'end': 35795.357, 'src': 'embed', 'start': 35765.835, 'weight': 9, 'content': [{'end': 35767.536, 'text': 'even if it does not have the latest version.', 'start': 35765.835, 'duration': 1.701}, {'end': 35772.199, 'text': 'Okay in the next line, we are going to install the Django rest framework.', 'start': 35768.397, 'duration': 3.802}, {'end': 35781.191, 'text': 'So we are using 3.9.0 And, in the same way which we did with Django,', 'start': 35773.28, 'duration': 7.911}, {'end': 35791.936, 'text': "we're going to make the install one less than 3.10.0 to get the latest version of 3.9, which is whatever,", 'start': 35781.191, 'duration': 10.745}, {'end': 35795.357, 'text': 'is the latest minor version at the time we build our project.', 'start': 35791.936, 'duration': 3.421}], 'summary': 'Installing django rest framework 3.9.0 one less than 3.10.0', 'duration': 29.522, 'max_score': 35765.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE35765835.jpg'}, {'end': 35919.184, 'src': 'embed', 'start': 35896.752, 'weight': 11, 'content': [{'end': 35905.998, 'text': "That's how we create a docker file for our project and go ahead and create our docker compose configuration for our project.", 'start': 35896.752, 'duration': 9.246}, {'end': 35913.38, 'text': "So we're going to use docker-compose as a tool to allow us run our docker image easily from our project location.", 'start': 35906.755, 'duration': 6.625}, {'end': 35919.184, 'text': 'So it allows us to easily manage the different services that make up for our project.', 'start': 35914.1, 'duration': 5.084}], 'summary': 'Creating a docker file and docker compose configuration for project management.', 'duration': 22.432, 'max_score': 35896.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE35896752.jpg'}, {'end': 36064.678, 'src': 'embed', 'start': 36036.613, 'weight': 12, 'content': [{'end': 36045.415, 'text': 'Now this means whenever you change a file or you change something in the project you will automatically update it in the container.', 'start': 36036.613, 'duration': 8.802}, {'end': 36050.317, 'text': "Now the good part is you don't have to restart docker to get the changes into effect.", 'start': 36046.175, 'duration': 4.142}, {'end': 36055.958, 'text': 'So then you have a dot slash app forward slash app.', 'start': 36051.397, 'duration': 4.561}, {'end': 36064.678, 'text': 'So what this does is it Maps the app directory which we have here in our project and this it Maps to the app directory in our docker image.', 'start': 36056.789, 'duration': 7.889}], 'summary': 'Changes in project automatically update in container without restarting docker.', 'duration': 28.065, 'max_score': 36036.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE36036613.jpg'}], 'start': 34234.858, 'title': 'Docker deployment in nasa', 'summary': "Discusses nasa's deployment of lis using docker containers, reducing installation time from weeks or months to minutes. it also covers the architecture and components of docker, docker swarm, and setting up python docker environment, emphasizing the benefits of using docker for development.", 'chapters': [{'end': 34386.383, 'start': 34234.858, 'title': "Nasa's docker deployment for lis", 'summary': "Discusses nasa's deployment of lis using docker containers, reducing installation time from weeks or months to minutes, and the docker workflow and architecture, including the client-server communication and the process of building and running docker images and containers.", 'duration': 151.525, 'highlights': ['NASA deployed LIS using Docker containers, reducing installation time from weeks or months to minutes, either in the cloud or on-premises. The deployment of LIS using Docker containers reduced the installation time from weeks or months to minutes, either in the cloud or on-premises.', 'The Docker engine uses a client-server architecture, with the Docker daemon responsible for managing containers and the Docker registry storing Docker images. The Docker engine uses a client-server architecture, with the Docker daemon responsible for managing containers and the Docker registry storing Docker images.', 'To build a Docker image, the CLI or client can issue a build command to the Docker daemon, which then saves the image in the registry, either Docker hub or a local repository. To build a Docker image, the CLI or client can issue a build command to the Docker daemon, which then saves the image in the registry, either Docker hub or a local repository.']}, {'end': 34765.041, 'start': 34386.743, 'title': 'Docker architecture & components', 'summary': 'Explains the architecture and components of docker, including the docker engine, docker images, docker containers, and docker registry, as well as the functionality of docker compose in defining and running multi-container applications.', 'duration': 378.298, 'highlights': ['The Docker engine is the heart of the architecture, functioning as a client-server application using a long-running daemon process and a command-line interface for communication with the REST API. The Docker engine serves as the core of the architecture, operating as a client-server application with a daemon process and a command-line interface that communicates with the REST API.', 'Docker images are the building blocks of Docker containers, created using a Dockerfile and stored in Docker Hub or local registries. Docker images serve as the foundation for Docker containers, built using Dockerfiles and stored in Docker Hub or local registries.', 'Docker containers are the running instances of Docker images, containing the essential components needed to run applications, and are widely used for isolating applications. Docker containers are the active representations of Docker images, encompassing the necessary elements for running applications and are extensively utilized for application isolation.', 'Docker Compose allows the definition and execution of multi-container applications through a YAML file, facilitating the interaction of isolated containers as a single service. Docker Compose enables the definition and operation of multi-container applications via a YAML file, enabling the interaction of isolated containers as a unified service.']}, {'end': 35447.839, 'start': 34765.641, 'title': 'Docker swarm and installation', 'summary': 'Covers the orchestration management tool docker swarm, which allows for high availability of services, auto load balancing, and decentralization of access, and includes step-by-step guidance on installing docker on ubuntu system and creating a django project setup using docker.', 'duration': 682.198, 'highlights': ['Docker Swarm allows for high availability of services, auto load balancing, decentralization of access, and easy upscaling and downscaling of deployments. Docker Swarm provides high availability of services and auto load balancing, allowing easy upscaling and downscaling of deployments.', 'Step-by-step guidance on installing Docker on Ubuntu system is provided, including updating, enabling, and checking the version of Docker. The transcript provides step-by-step guidance on installing Docker on Ubuntu system, including updating, enabling, and checking the version of Docker.', 'Detailed guidance on creating a Django project setup using Docker, including initializing a new project on GitHub, creating Docker, requirements, and docker compose files, and running the app on the terminal, is outlined. The transcript offers detailed guidance on creating a Django project setup using Docker, including initializing a new project on GitHub, creating Docker, requirements, and docker compose files, and running the app on the terminal.']}, {'end': 35795.357, 'start': 35448.399, 'title': 'Setting up python docker environment', 'summary': 'Explains setting up a python unbuffered environment variable, installing dependencies, creating a user for running applications, and creating a requirements.txt file for a django project within a docker container.', 'duration': 346.958, 'highlights': ['Setting the Python unbuffered environment variable to run Python in unbuffered mode, recommended for running Python within docker containers. Recommended mode for running Python within docker containers.', 'Copying the requirements.txt file and installing dependencies using pip into the Docker image. Dependencies installed using pip into the Docker image.', 'Creating a directory within the Docker image to store the application source code and switching to that as the default directory. Creation of a directory within the Docker image for storing application source code.', 'Adding a user for running applications only and switching Docker to that user for security purposes. User added for running applications and switching to that user for security purposes.', 'Creating a requirements.txt file for a Django project to specify the versions of Django and Django Rest Framework to be installed. Specification of versions for Django and Django Rest Framework to be installed.']}, {'end': 36330.895, 'start': 35796.037, 'title': 'Creating docker file and docker compose', 'summary': 'Explains the process of creating a docker file and docker compose configuration for a python django application, covering the setup of directories, building docker images, and deploying the application through docker, with emphasis on the benefits of using docker for development.', 'duration': 534.858, 'highlights': ["Explaining the necessity of an empty 'app' directory for the Docker file and the consequences of not having it. Emphasizes the importance of the 'app' directory to avoid issues when running the Docker file.", 'Description of using Docker Compose to easily manage different services of the project, such as the Python application and a database. Illustrates the use of Docker Compose for managing multiple services within the project.', 'Demonstrating the mapping of a local volume to the Docker container for real-time updates without restarting Docker. Explains the functionality and benefit of using a volume to update changes in the Docker container in real time.', 'Deployment of the Django application through Docker Compose and highlighting the benefits of using Docker for development. Shows the deployment of the application using Docker Compose and emphasizes the advantages of Docker for development.']}], 'duration': 2096.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YLpCPo0FDtE/pics/YLpCPo0FDtE34234858.jpg', 'highlights': ['NASA deployed LIS using Docker containers, reducing installation time from weeks or months to minutes, either in the cloud or on-premises.', 'The Docker engine uses a client-server architecture, with the Docker daemon responsible for managing containers and the Docker registry storing Docker images.', 'Docker Compose enables the definition and operation of multi-container applications via a YAML file, enabling the interaction of isolated containers as a unified service.', 'Docker Swarm provides high availability of services and auto load balancing, allowing easy upscaling and downscaling of deployments.', 'Detailed guidance on creating a Django project setup using Docker, including initializing a new project on GitHub, creating Docker, requirements, and docker compose files, and running the app on the terminal.', 'Recommended mode for running Python within docker containers.', 'Dependencies installed using pip into the Docker image.', 'Creation of a directory within the Docker image for storing application source code.', 'User added for running applications and switching to that user for security purposes.', 'Specification of versions for Django and Django Rest Framework to be installed.', "Emphasizes the importance of the 'app' directory to avoid issues when running the Docker file.", 'Illustrates the use of Docker Compose for managing multiple services within the project.', 'Explains the functionality and benefit of using a volume to update changes in the Docker container in real time.', 'Shows the deployment of the application using Docker Compose and emphasizes the advantages of Docker for development.']}], 'highlights': ['Full-stack web development is a high-demand, high-paid job in the market.', 'Full stack developers are highly valued in all parts of the world, with the average salary in the US being over $110,000, and in high demand globally.', 'Introduction to various technologies involved in full-stack web development, including HTML, CSS, JavaScript, jQuery, Angular, ReactJS, NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker.', 'Full stack developers have the flexibility to choose from numerous frameworks and libraries, enabling them to create and design unique code, not limited to a specific set of tools, which enhances the effectiveness of web applications.', 'The chapter explains the role of each technology in full-stack web development, from front-end technologies like HTML, CSS, JavaScript, jQuery to back-end technologies like NodeJS, MongoDB, REST API, Git, GitHub, Maven, Jenkins, and Docker.', 'The chapter covers the basic syntax of CSS, including selectors, properties and value pairs, and explains the methods of including CSS into HTML through link tags, inline CSS, and internal CSS.', 'JavaScript is the most popular programming language for six consecutive years, according to Stack Overflow.', 'JavaScript serves as a universal scripting language in browsers and is also utilized on the back end with frameworks like Meteor, offering the flexibility to use one language across both front end and back end development.', 'The inbuilt date picker widget in jQuery allows users to easily visualize and enter dates, requiring minimal coding.', 'Angular is maintained and developed by Google and aims to simplify web development and testing of single-page applications by providing a framework for client-side model view controller (MVC) architecture.', 'Demonstration of using selectors to select elements on an HTML page and creating components with classes, templates, and inline styling.', 'Data binding is like communication between TypeScript file and template, involving business logic and user interface.', 'React.js uses a virtual DOM to update only the elements that have changed, leading to faster application performance and no memory wastage.', 'MongoDB offers ad-hoc queries for optimized and real-time analytics, supporting field queries, range queries, and regular expression searches, and also utilizes indexing for better query executions.', "GitHub's powerful features, open-source platform, and community support make it unmatched for exposure and insight.", 'Maven simplifies handling project dependencies and software version upgrades by specifying them in a pom.xml file, automating the download and integration of required libraries.', 'Jenkins automation enables successful deployment in less than a minute, showcasing efficiency and time-saving benefits.', 'Containerization brings abstraction to the OS level, resulting in faster processing and execution.', 'NASA deployed LIS using Docker containers, reducing installation time from weeks or months to minutes, either in the cloud or on-premises.', 'Docker Compose enables the definition and operation of multi-container applications via a YAML file, enabling the interaction of isolated containers as a unified service.']}