title
Web Development Full Course - 10 Hours | Web Development Course Roadmap 2024 | Edureka

description
🔥 Web Development Full Course (Use Code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎"): https://www.edureka.co/masters-program/full-stack-developer-training This Edureka Web Development Full Course video will help you understand and learn Web Development in detail. You will learn about the Web Development Complete Roadmap to become a successful web developer. This Web Development Tutorial is ideal for both beginners as well as professionals who want to master Web Development technologies. Below are the web development topics covered in this Web Development Course for Beginners video: 00:00 Introduction to Web Development Full Course 1:46 HTML - Web Development Full Course 2:03 What is HTML? 2:45 Structure of HTML 3:38 HTML Editors 4:21 Writing a HTML program 5:14 Doctype Declaration 6:30 Elements 15:40 HTML Forms 30:55 CSS - Web Development Full Course 30:54 What is CSS? 31:59 CSS Syntax 32:32 CSS Selectors 33:54 CSS Box Model 34:31 CSS Units 1:34:26 JavaScript - Web Development Full Course 1:35:01 What is Javascript? 1:36:46 JavaScript Stats 1:37:34 What can JavaScript do? 1:38:58 JavaScript Framework 1:41:44 Top Websites Built Using JavaScript 1:42:10 Benefits of JavaScript 1:44:21 JavaScript Fundamentals 1:51:23 JavaScript Variables 1:52:59 JavaScript Constants 1:52:58 JavaScript Data Types 2:03:31 JavaScript Objects 2:09:30 JavaScript Functions 2:12:38 JavaScript Conditional Statements 2:18:35 JavaScript Loops 2:27:36 JavaScript Switch Case 2:30:34 jQuery - Web Development Full Course 2:34:21 Why use jQuery? 2:36:51 Getting started with jQuery 2:39:31 DOM 2:40:19 jQuery Selectors 2:47:58 jQuery Methods 3:20:58 jQuery Effects 3:36:46 jQuery UI 3:45:25 Angular - Web Development Full Course 3:51:56 What is Angular? 3:56:44 Single Page Application 3:58:31 Angular 8: What's new? 4:02:03 Angular Project Setup 4:06:16 Writing the Angular First App 4:21:32 What is Typescript? 4:22:59 Integrating Ext CSS 4:32:53 Angular Components 4:55:38 Data Binding 5:06:51 Event Binding 5:25:20 Using Built-in Directives 5:44:37 React.js - Web Development Full Course 5:45:57 Why ReactJs? 5:50:14 Introduction to ReactJS 5:53:39 Advantages of ReactJS 5:54:10 ReactJS Installation 5:59:37 RasctJS Fundamentals 6:00:17 JSX - Web Development Full Course 6:04:30 React Components 6:09:12 React Props 6:11:49 React States 6:16:54 React Lifecycle 6:22:34 React Events 6:31:06 React Refs 6:38:47 React Keys 6:39:48 React Routers 6:52:14 Node.js - Web Development Full Course 6:53:24 What is Node.js? 6:54:43 Features of Node.js 6:55:34 Node.js Architecture 6:57:27 NPM 6:58:58 Node.js Modules 7:01:04 JSON File 7:06:00 Node.js basics 7:08:12 Node.js Operators 7:10:21 Node.js Functions 7:11:42 Node.js Objects 7:12:34 Node.js File System 7:16:21 Node.js Events 7:27:11 Node.js HTTP Module 7:28:14 Express.JS 7:29:29 Node.js Demo 7:41:13 MEAN Stack Application 7:44:51 CRUD Operations 7:44:56 RESTful API 7:45:39 Contact List MEAN App 9:00:49 MERN Stack Applications 9:03:15 MERN CRUD 9:04:02 MERN Application To-Do List App 10:05:10 How to Become a Full Stack Web Developer? Check out our complete Web Development Tutorial playlist: https://bit.ly/2RuLkdO Check out our complete Web Development blogs here: https://bit.ly/34y8ipM 🔴 Subscribe to our channel to get the latest video updates: https://goo.gl/6ohpTV -------- 🔵 Edureka Web Development Course: https://bit.ly/3nXj3xr 🔵 Edureka Angular Training: http://bit.ly/38mi3sw 🔵 Edureka ReactJS Training: http://bit.ly/2DVP6Wz 🔵 Edureka NodeJS Training: http://bit.ly/35ehwXX 🔵 Edureka Full Stack Training: http://bit.ly/2YveVpL 🔵 Edureka Python Django Training: http://bit.ly/2RAk6Do 🔵 Edureka Computer Science Bootcamp Program: https://bit.ly/3bkG1Y3 ------- 📌𝐓𝐞𝐥𝐞𝐠𝐫𝐚𝐦: https://t.me/edurekaupdates 📌𝐓𝐰𝐢𝐭𝐭𝐞𝐫: https://twitter.com/edurekain 📌𝐋𝐢𝐧𝐤𝐞𝐝𝐈𝐧: https://www.linkedin.com/company/edureka 📌𝐈𝐧𝐬𝐭𝐚𝐠𝐫𝐚𝐦: https://www.instagram.com/edureka_learning/ 📌𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: https://www.facebook.com/edurekaIN/ 📌𝐂𝐚𝐬𝐭𝐛𝐨𝐱: https://castbox.fm/networks/505?country=IN 📌𝐌𝐞𝐞𝐭𝐮𝐩: https://www.meetup.com/edureka/ 📌𝐂𝐨𝐦𝐦𝐮𝐧𝐢𝐭𝐲: https://www.edureka.co/community/ ---------- About The Full Stack Web Development Course: Full Stack Web Development Course makes you proficient in skills to work with back-end and front-end web technologies. It includes training on: 1. Web Development 2. jQuery, Angular 3. NodeJS & ExpressJS 5. MongoDB The Full Stack Web Development course curriculum has been determined by extensive research on 5000+ job descriptions across the globe. ------------------------------ 📢📢 𝐓𝐨𝐩 𝟏𝟎 𝐓𝐫𝐞𝐧𝐝𝐢𝐧𝐠 𝐓𝐞𝐜𝐡𝐧𝐨𝐥𝐨𝐠𝐢𝐞𝐬 𝐭𝐨 𝐋𝐞𝐚𝐫𝐧 𝐢𝐧 𝟐𝟎𝟐𝟒 𝐒𝐞𝐫𝐢𝐞𝐬 📢📢 ⏩ NEW Top 10 Technologies To Learn In 2024 - https://www.youtube.com/watch?v=vaLXPv0ewHU Got a question on the web development topic? Please share it in the comment section below and our experts will answer it for you. For more information on web development course, please write back to us at sales@edureka.in or call us at IND: 9606058406 / US: +18338555775 (toll free).

detail
{'title': 'Web Development Full Course - 10 Hours | Web Development Course Roadmap 2024 | Edureka', 'heatmap': [{'end': 1864.706, 'start': 1113.765, 'weight': 0.9}, {'end': 2609.893, 'start': 2228.863, 'weight': 0.742}], 'summary': 'Covers a comprehensive web development crash course including html, css, javascript, jquery, angular 8, react js, node.js, mean and mern stack applications, offering practical examples and emphasizing the importance of css, javascript, and angular 8, with detailed coverage of various properties, techniques, and new features, providing insights into node.js event loop architecture and mean stack application development, and introducing mern stack with graphql and crud operations, as well as ui enhancement and form creation in react, also providing an overview of full-stack web development and front-end basics.', 'chapters': [{'end': 1575.295, 'segs': [{'end': 31.996, 'src': 'embed', 'start': 6.957, 'weight': 3, 'content': [{'end': 12.601, 'text': 'Web development broadly refers to the task related to your web applications or web pages.', 'start': 6.957, 'duration': 5.644}, {'end': 16.865, 'text': 'It basically adds up live to your otherwise ordinary web page.', 'start': 13.022, 'duration': 3.843}, {'end': 21.688, 'text': 'Hi everyone, welcome to this full course session on web development.', 'start': 17.425, 'duration': 4.263}, {'end': 28.093, 'text': 'This will give you a complete crash course and let you know everything that you need to know about web development.', 'start': 22.049, 'duration': 6.044}, {'end': 31.996, 'text': "But before we begin, let's have a look at today's agenda.", 'start': 28.494, 'duration': 3.502}], 'summary': 'Web development is covered in a crash course session to provide complete knowledge about it.', 'duration': 25.039, 'max_score': 6.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY6957.jpg'}, {'end': 153.455, 'src': 'embed', 'start': 132.409, 'weight': 0, 'content': [{'end': 141.672, 'text': 'He imagined dozens or even hundreds of hypertext formats in the future and smart clients that could easily negotiate and translate documents from servers all across the internet.', 'start': 132.409, 'duration': 9.263}, {'end': 148.793, 'text': 'Now HTML stands for hypertext markup language and it is a standard markup language for creating web pages and web applications.', 'start': 142.332, 'duration': 6.461}, {'end': 153.455, 'text': 'It is used to describe the structure of the web pages using a process called markup.', 'start': 149.334, 'duration': 4.121}], 'summary': 'Html is a standard markup language for web pages and applications.', 'duration': 21.046, 'max_score': 132.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY132409.jpg'}, {'end': 1544.438, 'src': 'embed', 'start': 1514.816, 'weight': 2, 'content': [{'end': 1517.599, 'text': "So let's say our dog is called.", 'start': 1514.816, 'duration': 2.783}, {'end': 1521.682, 'text': "So let's make this rather dog owner name.", 'start': 1518.359, 'duration': 3.323}, {'end': 1526.145, 'text': "Right, so I had a dog and my dog's name was Stoner.", 'start': 1522.162, 'duration': 3.983}, {'end': 1527.746, 'text': "Let's call him Stoner.", 'start': 1526.165, 'duration': 1.581}, {'end': 1530.989, 'text': 'And Stoner was a street dog.', 'start': 1528.847, 'duration': 2.142}, {'end': 1533.251, 'text': "So let's just keep the breed as street.", 'start': 1531.249, 'duration': 2.002}, {'end': 1535.953, 'text': 'Okay, so that was one table to roll.', 'start': 1534.131, 'duration': 1.822}, {'end': 1537.054, 'text': 'Save it.', 'start': 1536.753, 'duration': 0.301}, {'end': 1540.215, 'text': "Now we'll be needing multiple table rows.", 'start': 1537.834, 'duration': 2.381}, {'end': 1544.438, 'text': "So let's just copy that, paste it multiple times.", 'start': 1540.516, 'duration': 3.922}], 'summary': "The transcript discusses naming a street dog 'stoner' and creating multiple table rows.", 'duration': 29.622, 'max_score': 1514.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY1514816.jpg'}], 'start': 6.957, 'title': 'Full stack web development crash course', 'summary': 'Provides a comprehensive crash course on web development, covering html, css, javascript, jquery, angular 8, react js, node.js, mean stack, and mern stack applications, aimed at equipping learners with the necessary skills to become full stack web developers.', 'chapters': [{'end': 104.523, 'start': 6.957, 'title': 'Full stack web development crash course', 'summary': 'Provides a comprehensive crash course on web development, covering html, css, javascript, jquery, angular 8, react js, node.js, mean stack, and mern stack applications, aimed at equipping learners with the necessary skills to become full stack web developers.', 'duration': 97.566, 'highlights': ['The chapter covers HTML, CSS, JavaScript, jQuery, Angular 8, React JS, Node.js, MEAN stack, and MERN stack applications, providing a comprehensive overview of the essential programming languages and frameworks for web development.', "The session emphasizes the importance of subscribing to Edureka's YouTube channel for staying connected and updated with their content."]}, {'end': 450.326, 'start': 111.209, 'title': 'Html basics and structure', 'summary': 'Introduces html, its structure, and the process of creating an html page, highlighting the importance of html, css, and javascript in webpage development, as well as demonstrating the creation of html elements and their appearance on a webpage.', 'duration': 339.117, 'highlights': ['HTML is a standard markup language for creating web pages and web applications, constituted of elements represented by tags.', 'An HTML page structure includes HTML, head, and body tags, with the head tag containing meta information and the body tag containing visible content.', 'The process of creating an HTML page involves using a text editor to write HTML code, saving the file as .html, and viewing it on a browser.', 'The three constituents of a web page are HTML, CSS, and JavaScript, with HTML providing the structure, CSS responsible for styling, and JavaScript for dynamic functionality.', 'HTML provides elements like headings (H1-H6) and paragraph tags (p) for structuring and organizing content on a webpage.']}, {'end': 888.012, 'start': 451.539, 'title': 'Adding images, lists and links in html', 'summary': 'Covers adding images with attributes, changing text size, inserting horizontal lines, creating links, and incorporating ordered and unordered lists in html.', 'duration': 436.473, 'highlights': ['Adding images with attributes like height and width', 'Inserting horizontal lines and changing text size', 'Creating links and linking images', 'Incorporating ordered and unordered lists']}, {'end': 1575.295, 'start': 888.252, 'title': 'Html form and table creation', 'summary': 'Covers the creation of html forms, including div tags for page division, form elements like inputs, labels, and select tags, and the creation of tables with table, th, tr, and td tags.', 'duration': 687.043, 'highlights': ['Creation of HTML forms', 'Use of div tags for page division', 'Explanation of form elements and attributes']}], 'duration': 1568.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY6957.jpg', 'highlights': ['The chapter covers HTML, CSS, JavaScript, jQuery, Angular 8, React JS, Node.js, MEAN stack, and MERN stack applications, providing a comprehensive overview of essential programming languages and frameworks for web development.', 'HTML is a standard markup language for creating web pages and web applications, constituted of elements represented by tags.', "The session emphasizes the importance of subscribing to Edureka's YouTube channel for staying connected and updated with their content.", 'The process of creating an HTML page involves using a text editor to write HTML code, saving the file as .html, and viewing it on a browser.']}, {'end': 3625.827, 'segs': [{'end': 1628.884, 'src': 'embed', 'start': 1598.31, 'weight': 1, 'content': [{'end': 1603.754, 'text': "Let's say let's give our table a border of 1px solid black.", 'start': 1598.31, 'duration': 5.444}, {'end': 1614.318, 'text': "Now our table will have a border and we can also give tds a border and they're gonna have 1px solid black too.", 'start': 1604.554, 'duration': 9.764}, {'end': 1618.46, 'text': 'So now everything has a border and our table looks much neater.', 'start': 1614.858, 'duration': 3.602}, {'end': 1621.401, 'text': "Yep, so that's how you create a table in HTML.", 'start': 1618.96, 'duration': 2.441}, {'end': 1628.884, 'text': "Okay guys, so now it's time I actually show you how HTML can be really polished sometimes.", 'start': 1622.181, 'duration': 6.703}], 'summary': 'Creating a table in html with borders enhances neatness and polish.', 'duration': 30.574, 'max_score': 1598.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY1598310.jpg'}, {'end': 1902.05, 'src': 'embed', 'start': 1874.892, 'weight': 3, 'content': [{'end': 1883.778, 'text': 'Now, HTML 3.2 got in some new attributes like font color, background color, which generally was pertaining to styling of an element on a webpage.', 'start': 1874.892, 'duration': 8.886}, {'end': 1890.142, 'text': 'Now, while this did add some very, very needed functionality into HTML 3.2,', 'start': 1884.358, 'duration': 5.784}, {'end': 1893.664, 'text': 'it cluttered up your code as a developer and made your life pretty miserable.', 'start': 1890.142, 'duration': 3.522}, {'end': 1902.05, 'text': 'So to keep the structure of your webpage, which is the HTML and to make the styling a different aspect, CSS was made by W3C.', 'start': 1894.285, 'duration': 7.765}], 'summary': 'Html 3.2 introduced styling attributes, cluttering code; led to creation of css.', 'duration': 27.158, 'max_score': 1874.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY1874892.jpg'}, {'end': 1961.907, 'src': 'embed', 'start': 1936.572, 'weight': 0, 'content': [{'end': 1942.216, 'text': "because that's the problem that we are actually trying to mitigate by putting CSS as a different file.", 'start': 1936.572, 'duration': 5.644}, {'end': 1945.038, 'text': "Also, if you don't want to create another CSS file,", 'start': 1942.716, 'duration': 2.322}, {'end': 1950.342, 'text': 'you can do some internal CSS by putting in some style tags in your head tag and just writing some normal CSS to it.', 'start': 1945.038, 'duration': 5.304}, {'end': 1954.324, 'text': "Okay, so now let's see the different types of CSS selectors.", 'start': 1951.002, 'duration': 3.322}, {'end': 1957.025, 'text': 'So these are all the different types of CSS selectors.', 'start': 1954.784, 'duration': 2.241}, {'end': 1961.907, 'text': 'And basically a selector is a way of targeting an element on a webpage.', 'start': 1957.625, 'duration': 4.282}], 'summary': 'Mitigating webpage load time by using external css files and internal css in head tags; discussing various css selectors.', 'duration': 25.335, 'max_score': 1936.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY1936572.jpg'}, {'end': 2609.893, 'src': 'heatmap', 'start': 2228.863, 'weight': 0.742, 'content': [{'end': 2233.966, 'text': "Now that we've selected our ID, we can say, suppose we want to change the font family.", 'start': 2228.863, 'duration': 5.103}, {'end': 2243.693, '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': 2234.507, 'duration': 9.186}, {'end': 2244.613, 'text': 'like Gil Sands.', 'start': 2243.693, 'duration': 0.92}, {'end': 2248.536, 'text': "Fine So, that's how you set up your font family.", 'start': 2245.374, 'duration': 3.162}, {'end': 2250.917, 'text': "Let's also set the color to be black.", 'start': 2248.976, 'duration': 1.941}, {'end': 2253.019, 'text': "Let's see what changes now.", 'start': 2251.838, 'duration': 1.181}, {'end': 2256.402, 'text': 'So this is the quote that I was talking about.', 'start': 2253.76, 'duration': 2.642}, {'end': 2258.523, 'text': 'So that font should change now.', 'start': 2256.802, 'duration': 1.721}, {'end': 2259.464, 'text': "Let's reload.", 'start': 2258.623, 'duration': 0.841}, {'end': 2262.106, 'text': 'Oh yes, now the font has become Verdana.', 'start': 2260.025, 'duration': 2.081}, {'end': 2264.848, 'text': "And that's what we exactly wanted.", 'start': 2262.987, 'duration': 1.861}, {'end': 2266.99, 'text': 'And the text is also Blackknife.', 'start': 2265.449, 'duration': 1.541}, {'end': 2276.738, 'text': 'Okay So how do we select classes now? So if you go here and see, we should have a class called Movies.', 'start': 2267.671, 'duration': 9.067}, {'end': 2281.637, 'text': 'Right So all these have a class called movie, all these a tags.', 'start': 2277.859, 'duration': 3.778}, {'end': 2282.979, 'text': "So let's select them.", 'start': 2282.138, 'duration': 0.841}, {'end': 2287.724, 'text': 'So first of all, to select a class, you say dot, and then you say the class name.', 'start': 2282.999, 'duration': 4.725}, {'end': 2291.949, 'text': 'Now we could put in some random CSS into this again.', 'start': 2288.305, 'duration': 3.644}, {'end': 2293.511, 'text': "So let's make the color.", 'start': 2292.189, 'duration': 1.322}, {'end': 2298.717, 'text': "Let's keep it white and let's make the background steel blue.", 'start': 2294.272, 'duration': 4.445}, {'end': 2300.471, 'text': "Let's see.", 'start': 2300.071, 'duration': 0.4}, {'end': 2305.013, 'text': "So where are our movies? Let's see where the movies actually exist.", 'start': 2300.971, 'duration': 4.042}, {'end': 2306.033, 'text': 'Oh yeah.', 'start': 2305.733, 'duration': 0.3}, {'end': 2307.814, 'text': 'Dota, Splinter Cell and God of War.', 'start': 2306.113, 'duration': 1.701}, {'end': 2309.134, 'text': 'These are the movies.', 'start': 2308.254, 'duration': 0.88}, {'end': 2310.855, 'text': 'So these should now change.', 'start': 2309.274, 'duration': 1.581}, {'end': 2312.435, 'text': "Let's save it.", 'start': 2311.815, 'duration': 0.62}, {'end': 2317.777, 'text': 'And now they have a background color of steel blue and they have a text color of white.', 'start': 2312.916, 'duration': 4.861}, {'end': 2319.618, 'text': "And that's exactly what we defined out here.", 'start': 2317.937, 'duration': 1.681}, {'end': 2324.345, 'text': "fine. now let's try out some other kinds of selectors.", 'start': 2320.842, 'duration': 3.503}, {'end': 2328.628, 'text': 'so suppose in the span out here we have this id called author.', 'start': 2324.345, 'duration': 4.283}, {'end': 2331.95, 'text': 'so what if we only want to target that, what would we say?', 'start': 2328.628, 'duration': 3.322}, {'end': 2335.833, 'text': 'so we could say span and hashtag author.', 'start': 2331.95, 'duration': 3.883}, {'end': 2337.934, 'text': 'now you could put any type of css.', 'start': 2335.833, 'duration': 2.101}, {'end': 2340.436, 'text': "so let's say text transform.", 'start': 2337.934, 'duration': 2.502}, {'end': 2342.518, 'text': 'so this is how you transform any sort of text.', 'start': 2340.436, 'duration': 2.082}, {'end': 2344.26, 'text': 'And you could say uppercase.', 'start': 2343.218, 'duration': 1.042}, {'end': 2350.248, 'text': 'Now the author will be changed to uppercase out here and this is the author, the Pope Alexander part.', 'start': 2344.54, 'duration': 5.708}, {'end': 2350.908, 'text': 'Now watch that.', 'start': 2350.288, 'duration': 0.62}, {'end': 2356.396, 'text': "Now it's just uppercase and we have selected it with this selector called span and hashtag author.", 'start': 2351.049, 'duration': 5.347}, {'end': 2359.437, 'text': 'We can also do some other kinds of selecting.', 'start': 2357.415, 'duration': 2.022}, {'end': 2360.437, 'text': 'Let me just show it to you.', 'start': 2359.577, 'duration': 0.86}, {'end': 2366.502, 'text': 'So we could select the allies of the unordered list or the ordered list.', 'start': 2361.038, 'duration': 5.464}, {'end': 2369.444, 'text': 'So our skills is the ID.', 'start': 2367.222, 'duration': 2.222}, {'end': 2371.525, 'text': 'This is the ID of skills.', 'start': 2369.464, 'duration': 2.061}, {'end': 2372.987, 'text': "So let's select them now.", 'start': 2371.946, 'duration': 1.041}, {'end': 2379.051, 'text': 'So we have skills and we could go the ordered list and then the ally.', 'start': 2373.847, 'duration': 5.204}, {'end': 2383.014, 'text': 'And what we want to say out here is color will be purple.', 'start': 2379.351, 'duration': 3.663}, {'end': 2387.646, 'text': 'We can do the same thing for the unordered list too.', 'start': 2384.403, 'duration': 3.243}, {'end': 2389.128, 'text': 'Let me just copy that down.', 'start': 2388.027, 'duration': 1.101}, {'end': 2392.091, 'text': 'Put this here, say unordered list.', 'start': 2389.848, 'duration': 2.243}, {'end': 2395.814, 'text': "And let's say we change the text color to white.", 'start': 2392.651, 'duration': 3.163}, {'end': 2397.256, 'text': 'Save that.', 'start': 2396.775, 'duration': 0.481}, {'end': 2398.517, 'text': "Let's reload our page.", 'start': 2397.576, 'duration': 0.941}, {'end': 2402.181, 'text': 'So wait, first of all, let me uncommon this.', 'start': 2399.358, 'duration': 2.823}, {'end': 2408.287, 'text': "Now let's save it again, reload our page and see the differences.", 'start': 2404.543, 'duration': 3.744}, {'end': 2411.307, 'text': 'now, since we had given it a purple color.', 'start': 2408.965, 'duration': 2.342}, {'end': 2417.732, 'text': "it's now all purple, and let me just put a background of white so that you can see it.", 'start': 2411.307, 'duration': 6.425}, {'end': 2421.175, 'text': 'yeah, now, these are purple and these are background white.', 'start': 2417.732, 'duration': 3.443}, {'end': 2424.017, 'text': 'we can do the same for the unordered list too.', 'start': 2421.175, 'duration': 2.842}, {'end': 2426.059, 'text': 'let me just uncomment that.', 'start': 2424.017, 'duration': 2.042}, {'end': 2431.763, 'text': 'let me also give it a background of purple, or actually let it be like that.', 'start': 2426.059, 'duration': 5.704}, {'end': 2432.824, 'text': "let's just make it blue.", 'start': 2431.763, 'duration': 1.061}, {'end': 2437, 'text': 'Now, sass and haml have turned into blue, as you see out here.', 'start': 2434.218, 'duration': 2.782}, {'end': 2438.161, 'text': 'This is the blue thing.', 'start': 2437.281, 'duration': 0.88}, {'end': 2441.764, 'text': 'Fine Now that was selectors.', 'start': 2439.382, 'duration': 2.382}, {'end': 2444.827, 'text': "Okay, now let's go ahead and select some other stuff.", 'start': 2442.225, 'duration': 2.602}, {'end': 2448.93, 'text': 'So what if we want to select all the paragraphs that are after the h3 tag?', 'start': 2445.187, 'duration': 3.743}, {'end': 2457.917, 'text': "So, if you remember, we can do that by saying h3 plus p, and let's say we want a background of black and some text color that is white.", 'start': 2449.31, 'duration': 8.607}, {'end': 2459.799, 'text': 'So color white.', 'start': 2458.458, 'duration': 1.341}, {'end': 2464.767, 'text': 'Not being very creative with my CSS at this moment because this is just about selecting.', 'start': 2460.785, 'duration': 3.982}, {'end': 2466.548, 'text': "So let's see how that reloads.", 'start': 2465.248, 'duration': 1.3}, {'end': 2470.07, 'text': 'Yep, now we have a color of white and a background of black.', 'start': 2466.588, 'duration': 3.482}, {'end': 2476.034, 'text': 'And that only selected the paragraph just after the H3, which is my favorite video games.', 'start': 2470.831, 'duration': 5.203}, {'end': 2483.118, 'text': 'Okay, we can also select every paragraph that has a class by just saying something like P and class.', 'start': 2476.954, 'duration': 6.164}, {'end': 2486.26, 'text': "We don't even need to specify the color, or I mean the class name.", 'start': 2483.158, 'duration': 3.102}, {'end': 2488.301, 'text': 'So you go background.', 'start': 2487.14, 'duration': 1.161}, {'end': 2490.342, 'text': "Let's say we want to give a gray background.", 'start': 2488.381, 'duration': 1.961}, {'end': 2492.343, 'text': "Let's see all the paragraphs of the class.", 'start': 2490.642, 'duration': 1.701}, {'end': 2494.464, 'text': 'So this is the only paragraph of the class.', 'start': 2492.623, 'duration': 1.841}, {'end': 2496.585, 'text': 'Now you can do the same thing for IDs.', 'start': 2494.824, 'duration': 1.761}, {'end': 2500.047, 'text': "Just say ID out here and let's see all the paragraphs with an ID.", 'start': 2496.625, 'duration': 3.422}, {'end': 2502.369, 'text': 'So this is the only paragraph with an ID.', 'start': 2500.568, 'duration': 1.801}, {'end': 2511.414, 'text': "Okay, so now that we're done with selecting stuff, let's go and actually see how text can be transformed with the use of CSS.", 'start': 2503.309, 'duration': 8.105}, {'end': 2517.542, 'text': 'Fine First of all, I already have a page created for that.', 'start': 2512.961, 'duration': 4.581}, {'end': 2523.143, 'text': 'So this is going to be our page that we are going to use to see how text is transformed.', 'start': 2518.342, 'duration': 4.801}, {'end': 2530.225, 'text': 'If you see, I have an audit list with all the types of text transformations or the text stylings that I want to show.', 'start': 2523.764, 'duration': 6.461}, {'end': 2537.627, 'text': 'And we also have a paragraph out here which will show the basics box elements like the borders, margins and padding.', 'start': 2530.605, 'duration': 7.022}, {'end': 2540.868, 'text': "So I'm going to demonstrate that through this PID out here.", 'start': 2537.687, 'duration': 3.181}, {'end': 2542.268, 'text': "Right So let's get started.", 'start': 2541.288, 'duration': 0.98}, {'end': 2545.01, 'text': "First of all, let's create our CSS file.", 'start': 2542.748, 'duration': 2.262}, {'end': 2547.571, 'text': "And in the CSS file, we're going to save it.", 'start': 2545.41, 'duration': 2.161}, {'end': 2550.313, 'text': "And we're going to call it page2.css.", 'start': 2547.752, 'duration': 2.561}, {'end': 2553.976, 'text': "Right Then, yeah, it's connected as page2.", 'start': 2551.074, 'duration': 2.902}, {'end': 2555.737, 'text': "So let's get started.", 'start': 2554.737, 'duration': 1}, {'end': 2560.341, 'text': "First of all, let's target this ID with lorem.", 'start': 2555.937, 'duration': 4.404}, {'end': 2571.629, 'text': 'So lorem ipsum is just some Latin paragraph that is normally used in web development to fill in spaces with text where you can always come back and delete that text and fill it with something more meaningful.', 'start': 2560.901, 'duration': 10.728}, {'end': 2574.95, 'text': 'So for now, we are going to be using this lorem ipsum thing.', 'start': 2572.509, 'duration': 2.441}, {'end': 2577.491, 'text': "So it's in a paragraph tag with an ID of lorem.", 'start': 2575.01, 'duration': 2.481}, {'end': 2578.952, 'text': "So let's go ahead and select it.", 'start': 2577.611, 'duration': 1.341}, {'end': 2582.214, 'text': "So we're going to select it with the help of the ID, call it lorem.", 'start': 2579.352, 'duration': 2.862}, {'end': 2587.496, 'text': 'Now, first of all, let me just show you what the page looks like without any CSS attached to it.', 'start': 2582.834, 'duration': 4.662}, {'end': 2592.758, 'text': 'So this is what the page looks like, right? So this is the part that we are going to target right now.', 'start': 2587.636, 'duration': 5.122}, {'end': 2598.341, 'text': "First of all, let's give it a background of black.", 'start': 2593.479, 'duration': 4.862}, {'end': 2602.251, 'text': "Let's make the color of the text white.", 'start': 2599.91, 'duration': 2.341}, {'end': 2605.392, 'text': 'Let me show you what that looks like.', 'start': 2603.371, 'duration': 2.021}, {'end': 2609.893, 'text': "Okay, right? Now let's give it some borders and padding.", 'start': 2606.872, 'duration': 3.021}], 'summary': 'Demonstrates css selection and text transformation with examples and results.', 'duration': 381.03, 'max_score': 2228.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY2228863.jpg'}, {'end': 2895.654, 'src': 'embed', 'start': 2866.958, 'weight': 4, 'content': [{'end': 2872.12, 'text': 'okay, so font style normal just stays normal, while italic and oblique are almost similar.', 'start': 2866.958, 'duration': 5.162}, {'end': 2874.101, 'text': 'then in font variant small caps.', 'start': 2872.12, 'duration': 1.981}, {'end': 2879.684, 'text': 'this is how it would look like, where the first letter has a bigger font size and the rest have a smaller font size.', 'start': 2874.101, 'duration': 5.583}, {'end': 2880.925, 'text': 'but everything is in capital.', 'start': 2879.684, 'duration': 1.241}, {'end': 2882.786, 'text': 'Next is the font weight.', 'start': 2881.685, 'duration': 1.101}, {'end': 2885.027, 'text': "So let's see the IDs.", 'start': 2883.126, 'duration': 1.901}, {'end': 2887.129, 'text': "It's normal, bold, bolder.", 'start': 2885.127, 'duration': 2.002}, {'end': 2888.99, 'text': "So let's go with that now.", 'start': 2887.729, 'duration': 1.261}, {'end': 2891.171, 'text': 'So firstly we have normal.', 'start': 2889.13, 'duration': 2.041}, {'end': 2895.654, 'text': 'So font size is the size or weight.', 'start': 2892.232, 'duration': 3.422}], 'summary': 'Explanation of font styles, variants, and weights with examples.', 'duration': 28.696, 'max_score': 2866.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY2866958.jpg'}], 'start': 1575.395, 'title': 'Html table, blog, css basics, selectors, borders, padding, positioning', 'summary': 'Covers creating an html table and a blog, introducing css basics, selectors, borders, padding, text styling, and positioning, with practical demonstrations and examples, emphasizing the importance of css, and providing comprehensive coverage of relevant topics.', 'chapters': [{'end': 1826.942, 'start': 1575.395, 'title': 'Creating html table and blog', 'summary': 'Explains how to create an html table and a blog, including adding borders with css and styling text and images, and demonstrates by creating a neat-looking blog post with images and multiple paragraphs.', 'duration': 251.547, 'highlights': ['The chapter explains how to create an HTML table and a blog', 'Demonstrates creating a neat-looking blog post with images and multiple paragraphs', 'Adding borders to the table and tds with CSS']}, {'end': 2319.618, 'start': 1826.942, 'title': 'Introduction to css basics', 'summary': 'Introduces the basics of css, including its purpose, history, syntax, selectors, pseudo selectors, box model, units, and practical examples, emphasizing the importance of css in controlling the styling of webpages and providing practical demonstrations of css application.', 'duration': 492.676, 'highlights': ['CSS stands for Cascading Style Sheets and is used to control the styling of HTML tags and elements on a webpage, addressing the clutter and code management issues introduced in HTML 3.2.', 'The tutorial covers the basic syntax of CSS, including selectors, properties, and value pairs, emphasizing the inclusion of CSS into HTML using link tags, discouraging the use of inline CSS, and explaining internal CSS.', 'Provides an overview of different types of CSS selectors, such as star selector, element selector, combination selectors, and pseudo selectors, and recommends W3Schools for further reference.', 'Explains the box model in CSS, consisting of content, padding, border, and margin, and illustrates the concept with visual representation.', 'Introduces the four types of CSS units: pixel, points, and relative units, explaining their usage and relationship to the current font size.', 'Demonstrates practical application of CSS by styling HTML elements using selectors for divs, IDs, and classes, with specific examples and visual demonstrations.']}, {'end': 2602.251, 'start': 2320.842, 'title': 'Css selectors and text transformations', 'summary': 'Covers css selectors, demonstrating the targeting of specific elements by id, ordered and unordered lists, transforming text using css, and applying text styling to specific elements.', 'duration': 281.409, 'highlights': ['The chapter demonstrates the targeting of specific elements by ID, ordered and unordered lists, and applying text styling to specific elements.', 'The demonstration includes transforming text using CSS, such as changing the text to uppercase and altering the text color and background for specific elements.', 'The excerpt also explains the use of CSS to select paragraphs following specific tags, and how to apply styling to paragraphs with specific classes or IDs.']}, {'end': 3086.882, 'start': 2603.371, 'title': 'Css borders, padding, and text styling', 'summary': 'Covers css borders, padding, and text styling, demonstrating various border types, padding configurations, and text styling properties such as font style, weight, size, points, percentages, and line height.', 'duration': 483.511, 'highlights': ['The chapter covers CSS borders, padding, and text styling', 'Demonstrating various border types and their configurations', 'Explaining padding configurations and its impact on the layout', 'Illustrating the application of margin with different configurations', 'Demonstrating various text styling properties such as font style, weight, size, points, percentages, and line height']}, {'end': 3625.827, 'start': 3087.323, 'title': 'Css positioning basics', 'summary': 'Covers the basics of css positioning, including absolute, fixed, and relative positioning, demonstrating code and examples for each, and explaining the concepts with practical demonstrations and visual aids.', 'duration': 538.504, 'highlights': ['The chapter covers three types of positioning in CSS: absolute, fixed, and relative, with practical demonstrations and code examples for each.', 'Absolute positioning is demonstrated with examples of positioning elements based on the document itself, along with practical demonstrations and visual aids.', 'Fixed positioning is explained with examples, demonstrating how elements remain fixed on the screen while scrolling, supported by practical demonstrations and visual aids.', 'Relative positioning is illustrated with examples of positioning elements based on the relative position of other elements, supported by practical demonstrations and code examples.']}], 'duration': 2050.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY1575395.jpg', 'highlights': ['The chapter covers creating an HTML table and a blog', 'CSS stands for Cascading Style Sheets and controls HTML styling', 'Demonstrates practical application of CSS by styling HTML elements', 'Explains the box model in CSS, consisting of content, padding, border, and margin', 'Covers three types of positioning in CSS: absolute, fixed, and relative']}, {'end': 5636.169, 'segs': [{'end': 3708.526, 'src': 'embed', 'start': 3676.355, 'weight': 2, 'content': [{'end': 3677.335, 'text': 'Let me just close these out.', 'start': 3676.355, 'duration': 0.98}, {'end': 3685.718, 'text': "so let's save this as page2.css, or rather, let's just call it something.", 'start': 3678.536, 'duration': 7.182}, {'end': 3694.599, 'text': "first of all, let's set this to css right, let's save it and let's call it overflow.", 'start': 3685.718, 'duration': 8.881}, {'end': 3697.94, 'text': 'now what i want to show you guys is something really cool.', 'start': 3694.599, 'duration': 3.341}, {'end': 3701.061, 'text': "so let's select the audit list.", 'start': 3697.94, 'duration': 3.121}, {'end': 3702.281, 'text': "so that's what we're going to select.", 'start': 3701.061, 'duration': 1.22}, {'end': 3708.526, 'text': "let's say it has widths of around 100 pixels.", 'start': 3703.502, 'duration': 5.024}], 'summary': 'Creating a css file for overflow with 100 pixel widths.', 'duration': 32.171, 'max_score': 3676.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY3676355.jpg'}, {'end': 3765.801, 'src': 'embed', 'start': 3739.667, 'weight': 5, 'content': [{'end': 3745.611, 'text': 'if you see, to scroll through this list is quite cumbersome because you have to actually scroll like this.', 'start': 3739.667, 'duration': 5.944}, {'end': 3746.511, 'text': "let's get a background.", 'start': 3745.611, 'duration': 0.9}, {'end': 3752.976, 'text': 'also, background is going to be black, as i just love black, and the color of our font is going to be white.', 'start': 3746.511, 'duration': 6.465}, {'end': 3754.636, 'text': 'see how that change.', 'start': 3753.456, 'duration': 1.18}, {'end': 3756.617, 'text': 'yep, so this is what it looks like now.', 'start': 3754.636, 'duration': 1.981}, {'end': 3765.801, 'text': "or if you do and say max height is equals to 500, rather only 200 pixels, yeah, so that doesn't really tell much.", 'start': 3756.617, 'duration': 9.184}], 'summary': 'Demonstration of scrolling through list, changing background to black, and adjusting max height to 500 pixels.', 'duration': 26.134, 'max_score': 3739.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY3739667.jpg'}, {'end': 4030.909, 'src': 'embed', 'start': 3979.09, 'weight': 3, 'content': [{'end': 3981.732, 'text': "let's give it a nice green background.", 'start': 3979.09, 'duration': 2.642}, {'end': 3984.795, 'text': "okay, now that's going to be our background for the body.", 'start': 3981.732, 'duration': 3.063}, {'end': 3988.898, 'text': 'now we also have a div with the id of rappel.', 'start': 3984.795, 'duration': 4.103}, {'end': 3990.8, 'text': "so let's go ahead and select that first.", 'start': 3988.898, 'duration': 1.902}, {'end': 3991.861, 'text': 'so we say rappel.', 'start': 3990.8, 'duration': 1.061}, {'end': 3994.843, 'text': "Now let's give it some CSS.", 'start': 3992.641, 'duration': 2.202}, {'end': 3999.026, 'text': "So we're going to say margin is going to be 0 and auto.", 'start': 3994.903, 'duration': 4.123}, {'end': 4002.869, 'text': 'Now whenever you say 0 you do not need to actually specify the units.', 'start': 3999.166, 'duration': 3.703}, {'end': 4004.23, 'text': 'So we can just do that.', 'start': 4003.329, 'duration': 0.901}, {'end': 4006.972, 'text': "We'll give it a background color of white.", 'start': 4004.75, 'duration': 2.222}, {'end': 4012.216, 'text': "Then we'll give it a width of around 800 pixels.", 'start': 4007.712, 'duration': 4.504}, {'end': 4014.638, 'text': "We'll give it a height of around 1000 pixels.", 'start': 4012.516, 'duration': 2.122}, {'end': 4019.721, 'text': "okay, now let's save that and let's see what it looks like now.", 'start': 4016.619, 'duration': 3.102}, {'end': 4022.143, 'text': 'so this is what it has turned to.', 'start': 4019.721, 'duration': 2.422}, {'end': 4024.565, 'text': 'now we can also do some more stuff.', 'start': 4022.143, 'duration': 2.422}, {'end': 4030.909, 'text': "so let's select some html5 elements, like the header tag, and let me just show you that css still works as we want it to.", 'start': 4024.565, 'duration': 6.344}], 'summary': 'Css applied to div with id rappel, creating 800x1000px white background', 'duration': 51.819, 'max_score': 3979.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY3979090.jpg'}, {'end': 4186.741, 'src': 'embed', 'start': 4160.353, 'weight': 8, 'content': [{'end': 4164.098, 'text': 'so the spacing between these words in this paragraph should change now.', 'start': 4160.353, 'duration': 3.745}, {'end': 4166.321, 'text': "Now that we've saved it, let's go ahead and reload.", 'start': 4164.238, 'duration': 2.083}, {'end': 4171.328, 'text': 'So yeah, now you can see that the word spacing for this, this out here is much more different.', 'start': 4166.602, 'duration': 4.726}, {'end': 4174.032, 'text': 'Now we can also do letter spacing the same way.', 'start': 4172.029, 'duration': 2.003}, {'end': 4176.416, 'text': "So let's select paragraph two for that.", 'start': 4174.252, 'duration': 2.164}, {'end': 4182.359, 'text': 'So for letter spacing, all we have to say is letter spacing, and then we could say something like 10 pixels.', 'start': 4177.716, 'duration': 4.643}, {'end': 4186.741, 'text': 'Now, this will specify the letters and how they are spaced.', 'start': 4182.839, 'duration': 3.902}], 'summary': 'Demonstrating how to change word and letter spacing in a paragraph, with an example of 10 pixels letter spacing.', 'duration': 26.388, 'max_score': 4160.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY4160353.jpg'}, {'end': 4340.155, 'src': 'embed', 'start': 4298.271, 'weight': 9, 'content': [{'end': 4300.732, 'text': "Let's make them OLs, ordered lists.", 'start': 4298.271, 'duration': 2.461}, {'end': 4301.552, 'text': "Let's see.", 'start': 4301.232, 'duration': 0.32}, {'end': 4305.957, 'text': "Now, OL doesn't work with list type none, if you just realized.", 'start': 4302.152, 'duration': 3.805}, {'end': 4308.921, 'text': 'Now we can do something like alpha lower alpha.', 'start': 4306.197, 'duration': 2.724}, {'end': 4310.443, 'text': "So let's see that, how that works.", 'start': 4308.961, 'duration': 1.482}, {'end': 4314.688, 'text': 'Okay, so for lower alpha, we have to say list style type.', 'start': 4311.504, 'duration': 3.184}, {'end': 4315.99, 'text': 'Please remember that.', 'start': 4315.189, 'duration': 0.801}, {'end': 4317.231, 'text': 'That was my mistake right now.', 'start': 4316.07, 'duration': 1.161}, {'end': 4319.955, 'text': 'Okay, if you have to select the OLs again.', 'start': 4317.672, 'duration': 2.283}, {'end': 4324.792, 'text': 'Now you see that we have these list types that are saying with small caps.', 'start': 4321.351, 'duration': 3.441}, {'end': 4327.772, 'text': 'Now there are other stuff like lower Latin.', 'start': 4324.852, 'duration': 2.92}, {'end': 4328.933, 'text': "There's also lower Latin.", 'start': 4327.872, 'duration': 1.061}, {'end': 4330.353, 'text': 'So let me just show you what that looks like.', 'start': 4328.953, 'duration': 1.4}, {'end': 4331.573, 'text': 'Save it.', 'start': 4330.993, 'duration': 0.58}, {'end': 4334.674, 'text': "Okay, that doesn't really change because I don't think I have Latin installed.", 'start': 4331.993, 'duration': 2.681}, {'end': 4335.894, 'text': 'But we can also go Greek.', 'start': 4334.714, 'duration': 1.18}, {'end': 4337.774, 'text': "There's a bunch of stuff that you can do.", 'start': 4336.274, 'duration': 1.5}, {'end': 4338.815, 'text': "It's pretty fun.", 'start': 4338.175, 'duration': 0.64}, {'end': 4340.155, 'text': 'So I have Greek installed.', 'start': 4339.155, 'duration': 1}], 'summary': 'Demonstration of ordered list styles such as alpha, lower alpha, and greek.', 'duration': 41.884, 'max_score': 4298.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY4298271.jpg'}, {'end': 4663.571, 'src': 'embed', 'start': 4640.737, 'weight': 0, 'content': [{'end': 4650.019, 'text': 'first of all, we want the background to become black, we also want the color to become white and we want the cursor to become pointer.', 'start': 4640.737, 'duration': 9.282}, {'end': 4651.899, 'text': "so let's see.", 'start': 4650.019, 'duration': 1.88}, {'end': 4657.041, 'text': "so when you're hovering over it, it becomes this hand like thing and when you go out it comes back to normal.", 'start': 4651.899, 'duration': 5.142}, {'end': 4658.861, 'text': "so that's how you can change the cursor also.", 'start': 4657.041, 'duration': 1.82}, {'end': 4663.571, 'text': 'now let me show you all something called box shadow, first of all.', 'start': 4659.969, 'duration': 3.602}], 'summary': 'Change background to black, color to white, and cursor to pointer. introduce box shadow.', 'duration': 22.834, 'max_score': 4640.737, 'thumbnail': ''}, {'end': 4934.516, 'src': 'embed', 'start': 4903.846, 'weight': 11, 'content': [{'end': 4905.667, 'text': "Now let's close these two pages out here.", 'start': 4903.846, 'duration': 1.821}, {'end': 4907.489, 'text': "Let's create our new CSS file.", 'start': 4905.687, 'duration': 1.802}, {'end': 4910.39, 'text': "And first of all, let's set this to CSS.", 'start': 4908.069, 'duration': 2.321}, {'end': 4912.172, 'text': "Let's save it.", 'start': 4911.471, 'duration': 0.701}, {'end': 4915.234, 'text': "And let's say it's going to be page six dot CSS.", 'start': 4912.312, 'duration': 2.922}, {'end': 4923.47, 'text': "Now out here, if you see, you have a bunch of white spaces, right? Now let's see how you can handle white spaces using CSS.", 'start': 4916.886, 'duration': 6.584}, {'end': 4927.312, 'text': 'So there is a thing called the ID called white space pre.', 'start': 4923.87, 'duration': 3.442}, {'end': 4929.813, 'text': "I think that's exactly what it's called white space pre.", 'start': 4927.512, 'duration': 2.301}, {'end': 4930.874, 'text': "Yup Let's select that.", 'start': 4929.853, 'duration': 1.021}, {'end': 4934.516, 'text': 'And you could say white space is pre.', 'start': 4931.354, 'duration': 3.162}], 'summary': 'Creating new css file, handling white spaces using css.', 'duration': 30.67, 'max_score': 4903.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY4903846.jpg'}, {'end': 5147.715, 'src': 'embed', 'start': 5105.912, 'weight': 1, 'content': [{'end': 5108.514, 'text': "So I've already selected a gradient out here.", 'start': 5105.912, 'duration': 2.602}, {'end': 5109.896, 'text': "It's going to create this gradient.", 'start': 5108.534, 'duration': 1.362}, {'end': 5111.036, 'text': "Now let's see.", 'start': 5110.296, 'duration': 0.74}, {'end': 5113.018, 'text': 'Go to page 7.', 'start': 5111.317, 'duration': 1.701}, {'end': 5113.758, 'text': 'right now.', 'start': 5113.018, 'duration': 0.74}, {'end': 5121.322, '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': 5113.758, 'duration': 7.564}, {'end': 5126.924, 'text': 'and this is going to be our css, so we have to save it and say page 7..', 'start': 5121.322, 'duration': 5.602}, {'end': 5132.867, 'text': 'right now we select our body and just paste in So let me just explain how this happens.', 'start': 5126.924, 'duration': 5.943}, {'end': 5136.729, 'text': "So there's a linear gradient and there's also another thing called radial gradient.", 'start': 5132.927, 'duration': 3.802}, {'end': 5137.589, 'text': "So I'll just show you that.", 'start': 5136.749, 'duration': 0.84}, {'end': 5139.43, 'text': 'Now this takes in a few parameters.', 'start': 5137.809, 'duration': 1.621}, {'end': 5143.052, 'text': "So first is to the right, that's direction and this is how the colors will change.", 'start': 5139.47, 'duration': 3.582}, {'end': 5144.953, 'text': "So let's just see how that works.", 'start': 5143.432, 'duration': 1.521}, {'end': 5147.715, 'text': 'So first of all, let me comment this out.', 'start': 5145.494, 'duration': 2.221}], 'summary': 'Creating and applying gradients using css, including linear and radial gradients.', 'duration': 41.803, 'max_score': 5105.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY5105912.jpg'}, {'end': 5275.405, 'src': 'embed', 'start': 5245.217, 'weight': 7, 'content': [{'end': 5248.118, 'text': 'So if you go into background repeat and see the properties.', 'start': 5245.217, 'duration': 2.901}, {'end': 5250.36, 'text': 'you can just try it yourself.', 'start': 5248.718, 'duration': 1.642}, {'end': 5253.424, 'text': 'So you can repeat it according to the y-axis.', 'start': 5250.42, 'duration': 3.004}, {'end': 5255.286, 'text': 'You can repeat it according to the x-axis.', 'start': 5253.464, 'duration': 1.822}, {'end': 5256.367, 'text': "So let's see how that works.", 'start': 5255.326, 'duration': 1.041}, {'end': 5258.309, 'text': 'So repeat x.', 'start': 5256.387, 'duration': 1.922}, {'end': 5263.114, 'text': 'So if we say that, I think it should repeat it on the x-axis like it was.', 'start': 5258.309, 'duration': 4.805}, {'end': 5265.917, 'text': 'Or you could repeat it on the y-axis.', 'start': 5263.875, 'duration': 2.042}, {'end': 5269.22, 'text': "I don't think that'll show up out here, but let's see.", 'start': 5266.918, 'duration': 2.302}, {'end': 5271.602, 'text': "Yep, it's now repeating on the y-axis.", 'start': 5269.6, 'duration': 2.002}, {'end': 5275.405, 'text': "So that's how background repeat also works, so we've covered that too.", 'start': 5272.122, 'duration': 3.283}], 'summary': 'Demonstrating background repeat feature for x and y-axis.', 'duration': 30.188, 'max_score': 5245.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY5245217.jpg'}], 'start': 3625.967, 'title': 'Css styling and properties', 'summary': 'Covers css positioning, overflow, pseudo-selectors, styling properties, gradients, backgrounds, and animations, demonstrating practical examples and providing quantifiable data on various properties and techniques.', 'chapters': [{'end': 3805.332, 'start': 3625.967, 'title': 'Positioning and overflow in css', 'summary': 'Covers the positioning of images using the float tag and demonstrates how to use the overflow property to create scrollable content and control the display of overflowing content within html elements.', 'duration': 179.365, 'highlights': ['The float tag can be used to position images to the left or right, affecting their alignment on the page.', 'The overflow property is demonstrated to control the display of overflowing content within HTML elements, showcasing the use of overflow:auto and overflow:scroll to create scrollable content.']}, {'end': 4340.155, 'start': 3805.872, 'title': 'Css3 pseudo-selectors and styling', 'summary': 'Discusses the use of pseudo-selectors and pseudo-classes in css3, targeting various html5 tags and elements, demonstrating the application of pseudo-selectors like hover, active, and visited, as well as highlighting the styling of elements using properties like word spacing, letter spacing, clear property, and list style types.', 'duration': 534.283, 'highlights': ['Demonstrating the application of pseudo-selectors like hover, active, and visited', 'Styling of elements using properties like word spacing, letter spacing, clear property, and list style types', 'Targeting various HTML5 tags and elements']}, {'end': 4808.875, 'start': 4340.195, 'title': 'Css styling properties', 'summary': 'Demonstrates various css styling properties such as list style position, pseudo selectors, nth-child elements, text transformation, box shadow, outline, and text decoration, providing practical examples and visual demonstrations.', 'duration': 468.68, 'highlights': ['The chapter demonstrates various CSS styling properties such as list style position, pseudo selectors, nth-child elements, text transformation, box shadow, outline, and text decoration.', 'The demonstration includes practical examples and visual demonstrations.', 'The chapter explains how to use pseudo selectors to add content before and after elements.', 'It illustrates the utilization of nth-child elements to select specific elements within a list and apply styling to them.', 'The chapter demonstrates the transformation of text using pseudo selectors like first line, last line, and first letter, including examples of text transformation such as uppercase and font size.']}, {'end': 5219.449, 'start': 4809.876, 'title': 'Css properties and gradients', 'summary': 'Covers various css properties including visibility, white spaces, and direction settings along with creating beautiful gradients using css, and also demonstrates setting background with an image.', 'duration': 409.573, 'highlights': ['Demonstrating the use of various CSS properties like visibility, white spaces, and direction settings, along with the importance of understanding CSS and having a go-to resource like W3 schools.', 'Explaining the process of creating gradients using a gradient generator, demonstrating linear and radial gradients, and setting background with an image using CSS.']}, {'end': 5636.169, 'start': 5220.51, 'title': 'Css backgrounds, gradients, and animations', 'summary': 'Covers css properties like background repeat, radial gradients, and animations, including key points and quantifiable data such as specifying background repeat options, creating radial gradients, and setting up keyframes for animation.', 'duration': 415.659, 'highlights': ['The chapter covers CSS properties like background repeat, radial gradients, and animations, including key points and quantifiable data such as specifying background repeat options, creating radial gradients, and setting up keyframes for animation.', 'Animations in CSS are demonstrated through scaling, rotating, skewing, and translating a div, with examples of specifying the transformation and observing the effects upon hovering over the div.', 'The use of keyframes is explained for setting up animations, showcasing the process of defining keyframes at different percentages and applying them to an element with specified animation parameters like delay and iteration count.']}], 'duration': 2010.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY3625967.jpg', 'highlights': ['Demonstrating the use of various CSS properties like visibility, white spaces, and direction settings, along with the importance of understanding CSS and having a go-to resource like W3 schools.', 'The chapter covers CSS properties like background repeat, radial gradients, and animations, including key points and quantifiable data such as specifying background repeat options, creating radial gradients, and setting up keyframes for animation.', 'The chapter demonstrates various CSS styling properties such as list style position, pseudo selectors, nth-child elements, text transformation, box shadow, outline, and text decoration.', 'The float tag can be used to position images to the left or right, affecting their alignment on the page.', 'The overflow property is demonstrated to control the display of overflowing content within HTML elements, showcasing the use of overflow:auto and overflow:scroll to create scrollable content.', 'Demonstrating the application of pseudo-selectors like hover, active, and visited.', 'Styling of elements using properties like word spacing, letter spacing, clear property, and list style types.', 'The demonstration includes practical examples and visual demonstrations.', 'The chapter explains how to use pseudo selectors to add content before and after elements.', 'It illustrates the utilization of nth-child elements to select specific elements within a list and apply styling to them.', 'The chapter demonstrates the transformation of text using pseudo selectors like first line, last line, and first letter, including examples of text transformation such as uppercase and font size.', 'Explaining the process of creating gradients using a gradient generator, demonstrating linear and radial gradients, and setting background with an image using CSS.', 'Animations in CSS are demonstrated through scaling, rotating, skewing, and translating a div, with examples of specifying the transformation and observing the effects upon hovering over the div.', 'The use of keyframes is explained for setting up animations, showcasing the process of defining keyframes at different percentages and applying them to an element with specified animation parameters like delay and iteration count.']}, {'end': 9029.415, 'segs': [{'end': 5663.686, 'src': 'embed', 'start': 5636.169, 'weight': 0, 'content': [{'end': 5645.014, 'text': "let's say you want to iterate it a hundred times, let's reload, let's wait for two seconds and voila, our animation will keep going on and on and on.", 'start': 5636.169, 'duration': 8.845}, {'end': 5649.757, 'text': "so that's how you animate stuff with css, guys, and that brings us to the end of this tutorial.", 'start': 5645.014, 'duration': 4.743}, {'end': 5657.922, 'text': 'Hi everyone, this is Zulekha from Edureka.', 'start': 5655.58, 'duration': 2.342}, {'end': 5663.686, 'text': "In today's session, we're going to discuss about the most popular programming language, which is JavaScript.", 'start': 5658.422, 'duration': 5.264}], 'summary': 'Zulekha from edureka discusses javascript in a tutorial, emphasizing css animation.', 'duration': 27.517, 'max_score': 5636.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY5636169.jpg'}, {'end': 5776.073, 'src': 'embed', 'start': 5751.958, 'weight': 2, 'content': [{'end': 5759.483, 'text': "Another feature is that it's an interpreted language, which means that it doesn't have to be compiled like languages such as C and Java.", 'start': 5751.958, 'duration': 7.525}, {'end': 5765.047, 'text': "This makes it a lot easier for us because we can just run our code and we don't have to run it through a compiler.", 'start': 5759.843, 'duration': 5.204}, {'end': 5771.07, 'text': 'Now another important feature of JavaScript is that it is mainly a client-side scripting language.', 'start': 5765.427, 'duration': 5.643}, {'end': 5776.073, 'text': 'Thanks to JavaScript frameworks, you can now run JavaScript even on the server side.', 'start': 5771.511, 'duration': 4.562}], 'summary': 'Javascript is an interpreted language, easing development and can now run on server side.', 'duration': 24.115, 'max_score': 5751.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY5751958.jpg'}, {'end': 6044.496, 'src': 'embed', 'start': 6017.687, 'weight': 3, 'content': [{'end': 6025.43, 'text': 'Whenever someone wants to extend their website or their application and make it more attractive and interactive, they make use of jQuery.', 'start': 6017.687, 'duration': 7.743}, {'end': 6030.311, 'text': 'Now this library transforms the whole web into an entertaining experience.', 'start': 6025.45, 'duration': 4.861}, {'end': 6037.494, 'text': "A fun fact about jQuery is that over 70% of the world's leading websites have something to do with jQuery.", 'start': 6030.711, 'duration': 6.783}, {'end': 6044.496, 'text': 'Companies like WordPress, Google, and IBM rely on jQuery to provide a one-of-a-kind web browsing experience.', 'start': 6037.954, 'duration': 6.542}], 'summary': 'Jquery is used by over 70% of leading websites for attractive and interactive web experiences.', 'duration': 26.809, 'max_score': 6017.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY6017687.jpg'}, {'end': 6090.282, 'src': 'embed', 'start': 6062.131, 'weight': 4, 'content': [{'end': 6065.072, 'text': 'So basically HTML is used for displaying the web.', 'start': 6062.131, 'duration': 2.941}, {'end': 6068.013, 'text': 'Next CSS is like our clothes.', 'start': 6065.952, 'duration': 2.061}, {'end': 6070.653, 'text': 'We put on fashionable clothes to look better.', 'start': 6068.433, 'duration': 2.22}, {'end': 6072.994, 'text': 'Similarly the web is quite stylish.', 'start': 6070.973, 'duration': 2.021}, {'end': 6079.336, 'text': 'It uses CSS which stands for cascading style sheets to look better or for styling purpose.', 'start': 6073.553, 'duration': 5.783}, {'end': 6081.197, 'text': 'Then there is JavaScript.', 'start': 6079.936, 'duration': 1.261}, {'end': 6084.159, 'text': 'Now JavaScript puts life into a webpage.', 'start': 6081.517, 'duration': 2.642}, {'end': 6090.282, 'text': 'Just like how kids move around using the skateboard, the web also motions with the help of JavaScript.', 'start': 6084.599, 'duration': 5.683}], 'summary': 'Html displays the web, css is like clothes for styling, javascript adds life to webpages.', 'duration': 28.151, 'max_score': 6062.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY6062131.jpg'}, {'end': 6543.445, 'src': 'embed', 'start': 6503.096, 'weight': 5, 'content': [{'end': 6505.278, 'text': "Now let's write our first JavaScript code.", 'start': 6503.096, 'duration': 2.182}, {'end': 6506.64, 'text': 'So go back to Visual Studio.', 'start': 6505.359, 'duration': 1.281}, {'end': 6513.982, 'text': 'Okay, now guys, let me tell you that there are two ways of adding your JavaScript code in the HTML file.', 'start': 6508.018, 'duration': 5.964}, {'end': 6521.806, 'text': 'First of all, you need to know that your JavaScript code is always written in the HTML file, or it is at least linked to the HTML file.', 'start': 6514.382, 'duration': 7.424}, {'end': 6526.509, 'text': 'okay?. So, like I said, there are two ways of adding your JavaScript code in the HTML file.', 'start': 6521.806, 'duration': 4.703}, {'end': 6533.413, 'text': 'Now the first is to use script tags in the body section and type your JavaScript code within the script tag.', 'start': 6526.909, 'duration': 6.504}, {'end': 6534.894, 'text': "So let me show you how that's done.", 'start': 6533.713, 'duration': 1.181}, {'end': 6536.696, 'text': 'Now this is the body section.', 'start': 6535.434, 'duration': 1.262}, {'end': 6543.445, 'text': 'The body section starts here and it ends here, okay? So you have to make sure that your script tags are within the body section.', 'start': 6536.736, 'duration': 6.709}], 'summary': 'Two ways to add javascript code in html: using script tags in body section.', 'duration': 40.349, 'max_score': 6503.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY6503096.jpg'}, {'end': 6676.908, 'src': 'embed', 'start': 6646.028, 'weight': 14, 'content': [{'end': 6648.429, 'text': "Okay, now let's save the changes here.", 'start': 6646.028, 'duration': 2.401}, {'end': 6651.311, 'text': "And now let's check our browser.", 'start': 6649.39, 'duration': 1.921}, {'end': 6655.005, 'text': "Yeah, you can see that it's printing hello.", 'start': 6652.742, 'duration': 2.263}, {'end': 6656.808, 'text': 'So both the methods work.', 'start': 6655.606, 'duration': 1.202}, {'end': 6661.854, 'text': 'So I hope you understood that there are two ways of adding your JavaScript code to your HTML file.', 'start': 6656.848, 'duration': 5.006}, {'end': 6670.025, 'text': '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.', 'start': 6662.275, 'duration': 7.75}, {'end': 6676.908, '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': 6670.72, 'duration': 6.188}], 'summary': 'Two ways to add javascript code to html: within script tags and by referencing a separate javascript file.', 'duration': 30.88, 'max_score': 6646.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY6646028.jpg'}, {'end': 6860.967, 'src': 'embed', 'start': 6830.923, 'weight': 7, 'content': [{'end': 6833.104, 'text': "so that's when you use constants.", 'start': 6830.923, 'duration': 2.181}, {'end': 6834.744, 'text': 'okay, i hope you all are clear.', 'start': 6833.104, 'duration': 1.64}, {'end': 6836.145, 'text': "let's get on with our next topic.", 'start': 6834.744, 'duration': 1.401}, {'end': 6838.24, 'text': 'Okay, primitive data type.', 'start': 6836.98, 'duration': 1.26}, {'end': 6846.383, 'text': 'Now guys, there are different types of values that you can assign to a variable, all right? Now in JavaScript, we have two categories of data types.', 'start': 6838.721, 'duration': 7.662}, {'end': 6850.444, 'text': 'One is primitive data type, and the other is reference data types.', 'start': 6846.903, 'duration': 3.541}, {'end': 6855.565, 'text': 'Now primitive data types include numbers, strings, Boolean, null, and undefined.', 'start': 6851.044, 'duration': 4.521}, {'end': 6860.967, 'text': 'Reference data type, on the other hand, includes objects, arrays and functions.', 'start': 6856.145, 'duration': 4.822}], 'summary': 'Introduction to javascript data types: primitive and reference. numbers, strings, boolean, null, undefined are primitive types; objects, arrays, functions are reference types.', 'duration': 30.044, 'max_score': 6830.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY6830923.jpg'}, {'end': 7117.835, 'src': 'embed', 'start': 7092.222, 'weight': 13, 'content': [{'end': 7098.766, 'text': 'This is how you define an array, okay? Now square brackets are because you have to store multiple values in an array.', 'start': 7092.222, 'duration': 6.544}, {'end': 7103.149, 'text': 'So an array is basically used to store multiple values of a single variable.', 'start': 7099.166, 'duration': 3.983}, {'end': 7105.11, 'text': 'Okay, so shopping is a variable.', 'start': 7103.629, 'duration': 1.481}, {'end': 7106.631, 'text': 'It has multiple values.', 'start': 7105.49, 'duration': 1.141}, {'end': 7110.213, 'text': "Now let's define the values in the shopping variable.", 'start': 7107.131, 'duration': 3.082}, {'end': 7114.354, 'text': "The first value, let's say it's paintbrush.", 'start': 7111.613, 'duration': 2.741}, {'end': 7117.835, 'text': "I'm gonna add a comma and add another value.", 'start': 7115.374, 'duration': 2.461}], 'summary': "Defining an array to store multiple values for the variable 'shopping'.", 'duration': 25.613, 'max_score': 7092.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY7092222.jpg'}, {'end': 7206.248, 'src': 'embed', 'start': 7173.352, 'weight': 8, 'content': [{'end': 7174.454, 'text': 'How are you going to do that?', 'start': 7173.352, 'duration': 1.102}, {'end': 7182.865, 'text': 'Now, in order to do that, you are going to write the name of the array and within square brackets,', 'start': 7174.975, 'duration': 7.89}, {'end': 7185.349, 'text': "you're going to put the number of the array element.", 'start': 7182.865, 'duration': 2.484}, {'end': 7189.398, 'text': 'So if you want to display color palette, the number of color palette is one.', 'start': 7185.856, 'duration': 3.542}, {'end': 7191.419, 'text': "So you're going to type one over here.", 'start': 7189.738, 'duration': 1.681}, {'end': 7194.741, 'text': 'Those are parenthesis, semicolon, enter.', 'start': 7192.38, 'duration': 2.361}, {'end': 7196.722, 'text': 'See, it displays color palette.', 'start': 7195.161, 'duration': 1.561}, {'end': 7199.264, 'text': 'So this is how you access array elements.', 'start': 7197.162, 'duration': 2.102}, {'end': 7206.248, 'text': 'So if you want to access only one element, then just mention the number of that element and that element will get displayed.', 'start': 7199.724, 'duration': 6.524}], 'summary': 'Access array elements by writing array name and element number.', 'duration': 32.896, 'max_score': 7173.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY7173352.jpg'}, {'end': 7550.658, 'src': 'embed', 'start': 7522.069, 'weight': 9, 'content': [{'end': 7527.991, 'text': 'This pen has three properties, okay? The three properties are type, color, and cost.', 'start': 7522.069, 'duration': 5.922}, {'end': 7531.213, 'text': 'Now the property type has the value ballpoint.', 'start': 7528.452, 'duration': 2.761}, {'end': 7540.013, 'text': 'Similarly, the property color has the value black, and the cost is 10, okay? So this is how you define an object.', 'start': 7531.733, 'duration': 8.28}, {'end': 7543.655, 'text': 'So the object is a pen, it has three properties and values.', 'start': 7540.393, 'duration': 3.262}, {'end': 7550.658, 'text': 'What if I wanted to display the cost of this pen? I just want the cost of this pen, not the entire object.', 'start': 7544.275, 'duration': 6.383}], 'summary': 'The pen object has three properties: type, color, and cost. the cost is 10.', 'duration': 28.589, 'max_score': 7522.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY7522069.jpg'}, {'end': 7991.496, 'src': 'embed', 'start': 7962.156, 'weight': 12, 'content': [{'end': 7967.339, 'text': 'So if is used to execute a block of code only if the condition is true.', 'start': 7962.156, 'duration': 5.183}, {'end': 7972.522, 'text': 'So basically if a condition is met then the statements within this block will get executed.', 'start': 7967.739, 'duration': 4.783}, {'end': 7974.724, 'text': 'This is the syntax of the if statement.', 'start': 7973.002, 'duration': 1.722}, {'end': 7979.387, 'text': "So basically if is a keyword and within brackets you're going to define the condition.", 'start': 7974.924, 'duration': 4.463}, {'end': 7985.552, 'text': 'Now if this condition is met then this statement is executed or a set of statement is executed.', 'start': 7979.727, 'duration': 5.825}, {'end': 7991.496, 'text': 'So this is how it works in the program and you start the program and when the execution comes to a condition.', 'start': 7986.492, 'duration': 5.004}], 'summary': 'If statement executes code if condition is true', 'duration': 29.34, 'max_score': 7962.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY7962156.jpg'}, {'end': 8119.814, 'src': 'embed', 'start': 8087.154, 'weight': 10, 'content': [{'end': 8089.414, 'text': "you can see that it's displaying correct?", 'start': 8087.154, 'duration': 2.26}, {'end': 8091.915, 'text': 'now, this was the if conditional statement.', 'start': 8089.414, 'duration': 2.501}, {'end': 8094.736, 'text': 'now, where do i use the else statement?', 'start': 8091.915, 'duration': 2.821}, {'end': 8099.877, 'text': 'now? else is used to execute a block of code if the same condition is false.', 'start': 8094.736, 'duration': 5.141}, {'end': 8102.058, 'text': 'okay, so this is the syntax of if else.', 'start': 8099.877, 'duration': 2.181}, {'end': 8107.202, 'text': "So if there's some condition there, if that condition is met, then this statement is executed.", 'start': 8102.637, 'duration': 4.565}, {'end': 8112.507, 'text': 'Now if this condition is not met, then if you want to do something else, you use the else statement.', 'start': 8107.602, 'duration': 4.905}, {'end': 8119.814, 'text': "So when this is false, this will happen, okay? So instead of exiting, you're going to perform another operation.", 'start': 8113.007, 'duration': 6.807}], 'summary': 'Learning about if-else statements and their usage in programming.', 'duration': 32.66, 'max_score': 8087.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY8087154.jpg'}, {'end': 8188.639, 'src': 'embed', 'start': 8157.299, 'weight': 11, 'content': [{'end': 8162.664, 'text': "Otherwise, now if this condition is false, then it's going to print this.", 'start': 8157.299, 'duration': 5.365}, {'end': 8168.468, 'text': 'Console.log wrong try again.', 'start': 8163.344, 'duration': 5.124}, {'end': 8171.05, 'text': "All right, that's simple.", 'start': 8168.488, 'duration': 2.562}, {'end': 8174.033, 'text': "Let's see if this works.", 'start': 8171.851, 'duration': 2.182}, {'end': 8176.595, 'text': 'Save your file, open up your browser.', 'start': 8174.393, 'duration': 2.202}, {'end': 8178.971, 'text': 'Okay, there is some problem over here.', 'start': 8177.29, 'duration': 1.681}, {'end': 8180.172, 'text': "Let's go back to the code.", 'start': 8179.171, 'duration': 1.001}, {'end': 8182.194, 'text': 'Okay, my mistake.', 'start': 8180.753, 'duration': 1.441}, {'end': 8185.877, 'text': 'Save the file, open the browser, now it should work.', 'start': 8183.655, 'duration': 2.222}, {'end': 8188.639, 'text': "Let's just comment this out, otherwise you'll get confused.", 'start': 8186.437, 'duration': 2.202}], 'summary': 'Debugging code to fix condition and print message, ensuring functionality.', 'duration': 31.34, 'max_score': 8157.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY8157299.jpg'}, {'end': 9029.415, 'src': 'embed', 'start': 9003.749, 'weight': 1, 'content': [{'end': 9008.131, 'text': 'okay?. Now, if I change the value to foosball, okay?', 'start': 9003.749, 'duration': 4.382}, {'end': 9009.092, 'text': "Let's see what happens.", 'start': 9008.372, 'duration': 0.72}, {'end': 9010.925, 'text': "We'll save it.", 'start': 9010.145, 'duration': 0.78}, {'end': 9013.547, 'text': 'It says I like other games.', 'start': 9012.086, 'duration': 1.461}, {'end': 9015.668, 'text': 'Now this was the default statement.', 'start': 9013.707, 'duration': 1.961}, {'end': 9022.171, 'text': 'Now this default statement is executed whenever this expression does not match with any case, okay?', 'start': 9016.208, 'duration': 5.963}, {'end': 9025.513, 'text': "Because I'm not given foosball anywhere over here.", 'start': 9022.392, 'duration': 3.121}, {'end': 9027.154, 'text': 'it executes the default statement.', 'start': 9025.513, 'duration': 1.641}, {'end': 9029.415, 'text': 'So this is how the switch statement works.', 'start': 9027.514, 'duration': 1.901}], 'summary': 'Demonstration of switch statement with default case for unmatched expressions.', 'duration': 25.666, 'max_score': 9003.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9003749.jpg'}], 'start': 5636.169, 'title': 'Javascript fundamentals and applications', 'summary': "Covers fundamental javascript concepts including variables, constants, data types, arrays, objects, functions, conditional statements, loops, and practical examples. it also highlights javascript's popularity, role in web development, and benefits.", 'chapters': [{'end': 6670.025, 'start': 5636.169, 'title': 'Javascript basics & applications', 'summary': "Covers the basics of javascript, its common applications, popular javascript frameworks, and how to incorporate javascript code in html files. it also highlights javascript's popularity, its role in web development, and its benefits such as easy learning, speed, rich set of frameworks, interactivity, platform independence, and its use in various popular websites and applications.", 'duration': 1033.856, 'highlights': ['JavaScript is the most popular and commonly used programming language, according to Stack Overflow, for the sixth year in a row.', 'JavaScript is mainly used for creating interactive web pages and web applications, and it is utilized by popular websites like Google, Facebook, Netflix, and Amazon.', 'JavaScript comes with a rich set of frameworks like node.js, angular.js, and react, which contribute to its popularity.', 'JavaScript makes web pages more interactive, attracting leads and customers to e-commerce websites.', 'JavaScript is platform independent and is supported by all browsers, allowing it to be run on any platform.']}, {'end': 7023.884, 'start': 6670.72, 'title': 'Javascript fundamentals: variables, constants, and data types', 'summary': 'Covers fundamental javascript concepts including variables, constants, and data types, highlighting the use of variables as memory locations for data storage, the significance of constants for fixed values, and the differentiation between primitive and reference data types.', 'duration': 353.164, 'highlights': ['Variables act as memory locations for storing data, allowing for dynamic values to be stored and accessed.', 'Constants are fixed values that do not change during execution time, providing stability to the workflow and preventing value changes.', 'Differentiates between primitive data types (numbers, strings, Boolean, null, and undefined) and reference data types (objects, arrays, and functions).']}, {'end': 7761.187, 'start': 7024.204, 'title': 'Data types, arrays, and objects in javascript', 'summary': 'Covers the basics of javascript data types, including primitive data types, arrays for storing multiple values, and objects for containing multiple properties and values. it also demonstrates examples of array manipulation and accessing object properties.', 'duration': 736.983, 'highlights': ['Arrays are used to store multiple values in a single variable, with elements numbered from zero, and accessed using the array name and the element number within square brackets.', 'Arrays can contain variables with different data types, and the elements can be accessed by specifying the element number.', 'Objects in JavaScript contain multiple properties and values, accessed using the dot notation or square brackets, and each property has a corresponding value.']}, {'end': 8278.757, 'start': 7761.768, 'title': 'Javascript functions and conditional statements', 'summary': 'Covers the basics of javascript functions, including function declaration and calling, as well as how to use conditional statements like if and else for executing different blocks of code based on conditions, illustrated with practical examples.', 'duration': 516.989, 'highlights': ['Functions are basic building blocks in JavaScript, allowing the creation of a set of statements that perform specific tasks.', 'Demonstrating the process of defining and calling a function, including the use of parameters and arguments with practical examples such as logging messages and performing mathematical operations.', "Explanation of conditional statements, particularly the use of 'if' and 'else' for executing specific blocks of code based on true or false conditions, supported by practical examples."]}, {'end': 9029.415, 'start': 8279.236, 'title': 'Javascript conditionals and loops', 'summary': "Covers the usage of and and or operators, while, do while, and for loops, and switch cases in javascript, including practical examples and comparisons of their functionalities, with an emphasis on the do while loop's execution at least once.", 'duration': 750.179, 'highlights': ['The chapter covers the usage of AND and OR operators, while, do while, and for loops, and switch cases in JavaScript', 'Practical examples and comparisons of their functionalities', "Emphasis on the do while loop's execution at least once"]}], 'duration': 3393.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY5636169.jpg', 'highlights': ['JavaScript is the most popular programming language for the sixth year in a row', 'JavaScript is used for creating interactive web pages and web applications', "JavaScript's popularity is supported by frameworks like node.js, angular.js, and react", 'JavaScript makes web pages more interactive, attracting leads and customers', 'JavaScript is platform independent and supported by all browsers', 'Variables act as memory locations for storing data', 'Constants provide stability to the workflow and prevent value changes', 'Arrays are used to store multiple values in a single variable', 'Objects in JavaScript contain multiple properties and values', 'Functions are basic building blocks in JavaScript', 'The chapter covers the usage of AND and OR operators, while, do while, and for loops', "Emphasis on the do while loop's execution at least once", 'Conditional statements are explained with practical examples', 'Arrays can contain variables with different data types', 'Differentiates between primitive data types and reference data types']}, {'end': 9739.901, 'segs': [{'end': 9067.004, 'src': 'embed', 'start': 9034.958, 'weight': 1, 'content': [{'end': 9037.221, 'text': 'Hi everyone, this is Zulekha from Edureka.', 'start': 9034.958, 'duration': 2.263}, {'end': 9043.708, 'text': "In today's session, we're gonna discuss about jQuery, which is the most popular and the most used JavaScript library.", 'start': 9037.661, 'duration': 6.047}, {'end': 9046.251, 'text': "So without any further ado, let's get started.", 'start': 9044.149, 'duration': 2.102}, {'end': 9049.035, 'text': "So first of all, let me run you through today's agenda.", 'start': 9046.752, 'duration': 2.283}, {'end': 9053.938, 'text': "Now before we start off with what is jQuery, we're going to discuss what is JavaScript.", 'start': 9049.736, 'duration': 4.202}, {'end': 9057.92, 'text': "After that we'll see why you should use jQuery and what is jQuery.", 'start': 9054.378, 'duration': 3.542}, {'end': 9061.781, 'text': "Next we'll see how to install jQuery which barely takes a minute.", 'start': 9058.34, 'duration': 3.441}, {'end': 9067.004, 'text': "After which we'll discuss DOM which stands for Document Object Model and jQuery Selector.", 'start': 9062.262, 'duration': 4.742}], 'summary': 'Zulekha introduces jquery, a popular javascript library, and outlines the agenda for the session.', 'duration': 32.046, 'max_score': 9034.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9034958.jpg'}, {'end': 9105.15, 'src': 'embed', 'start': 9077.248, 'weight': 2, 'content': [{'end': 9079.67, 'text': "All right, then we'll move on to jQuery events.", 'start': 9077.248, 'duration': 2.422}, {'end': 9084.214, 'text': "Now here we'll see how to use the click event on event and the key press event.", 'start': 9080.03, 'duration': 4.184}, {'end': 9086.615, 'text': 'Moving on to jQuery effects.', 'start': 9084.834, 'duration': 1.781}, {'end': 9094.061, 'text': "There are hundreds of jQuery effects and we'll discuss the most commonly used effects like hide, show, toggle, fade out, slide up,", 'start': 9087.016, 'duration': 7.045}, {'end': 9095.202, 'text': 'slide down and so on.', 'start': 9094.061, 'duration': 1.141}, {'end': 9102.488, 'text': "Finally, we'll look at jQuery UI or user interface, where we'll discuss droppable, draggable and the date picker UI.", 'start': 9095.562, 'duration': 6.926}, {'end': 9102.768, 'text': 'all right?', 'start': 9102.488, 'duration': 0.28}, {'end': 9105.15, 'text': 'So guys, I hope all of you are clear with the agenda.', 'start': 9103.028, 'duration': 2.122}], 'summary': 'Covered jquery events, effects, and ui including click, key press, hide, show, toggle, fade out, slide up, slide down, droppable, draggable, and date picker ui.', 'duration': 27.902, 'max_score': 9077.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9077248.jpg'}, {'end': 9141.775, 'src': 'embed', 'start': 9116.454, 'weight': 6, 'content': [{'end': 9122.137, 'text': "So if you don't have Visual Studio Code, you all can go ahead and download it or use any other editor of your choice.", 'start': 9116.454, 'duration': 5.683}, {'end': 9125.658, 'text': "I'll leave a link in the description so that you all can download Visual Studio Code.", 'start': 9122.297, 'duration': 3.361}, {'end': 9129.58, 'text': 'Now guys, before I start off with the session, let me show you how Visual Studio Code looks.', 'start': 9126.038, 'duration': 3.542}, {'end': 9132.701, 'text': "So I'm just gonna open up this editor.", 'start': 9130.24, 'duration': 2.461}, {'end': 9137.993, 'text': "Now guys, this is a very simple editor and I think it's my most favorite editor.", 'start': 9133.291, 'duration': 4.702}, {'end': 9141.775, 'text': 'You can use Sublime Text or any other editor that you are comfortable with.', 'start': 9138.013, 'duration': 3.762}], 'summary': 'Promoting visual studio code as preferred editor, offering download link.', 'duration': 25.321, 'max_score': 9116.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9116454.jpg'}, {'end': 9199.593, 'src': 'embed', 'start': 9171.594, 'weight': 0, 'content': [{'end': 9176.677, 'text': "So whatever we type out or whatever code we have over here, it'll get hosted using this live server.", 'start': 9171.594, 'duration': 5.083}, {'end': 9182.221, 'text': 'So make sure you install the live server in order to host your web page or whatever you create.', 'start': 9176.957, 'duration': 5.264}, {'end': 9185.569, 'text': "Okay So that's about Visual Studio Code.", 'start': 9182.501, 'duration': 3.068}, {'end': 9189.47, 'text': "Now without any further ado, let's get started with our first topic.", 'start': 9186.129, 'duration': 3.341}, {'end': 9199.593, 'text': 'So what is JavaScript? Now in simple words, JavaScript is a universal language of the web which every PC, every mobile phone and browser understands.', 'start': 9190.29, 'duration': 9.303}], 'summary': 'Using live server, visual studio code hosts web pages. javascript is universal language understood by all devices.', 'duration': 27.999, 'max_score': 9171.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9171594.jpg'}, {'end': 9322.888, 'src': 'embed', 'start': 9294.688, 'weight': 5, 'content': [{'end': 9301.194, 'text': 'Now apart from that the community of its contributors is more diverse and bigger than any other JavaScript library.', 'start': 9294.688, 'duration': 6.506}, {'end': 9305.938, 'text': 'It has detailed and comprehensive documentation which gets better every day.', 'start': 9301.894, 'duration': 4.044}, {'end': 9313.098, 'text': 'Now another bonus point is that jQuery has thousands of plugins available for free and they can easily be added to our projects.', 'start': 9306.511, 'duration': 6.587}, {'end': 9316.521, 'text': 'So these plugins add value by enhancing user experience.', 'start': 9313.478, 'duration': 3.043}, {'end': 9322.888, 'text': 'Now, one such example is the Ajax technology, which develops a responsive and feature-rich site.', 'start': 9316.842, 'duration': 6.046}], 'summary': 'Jquery has a diverse community, comprehensive documentation, and thousands of free plugins, such as ajax, enhancing user experience.', 'duration': 28.2, 'max_score': 9294.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9294688.jpg'}, {'end': 9569.125, 'src': 'embed', 'start': 9540.553, 'weight': 3, 'content': [{'end': 9543.369, 'text': 'Okay So this is basically my HTML file.', 'start': 9540.553, 'duration': 2.816}, {'end': 9549.693, 'text': "So guys I'm now going to obviously discuss the basics of HTML and CSS because that's not under the scope of this session.", 'start': 9543.709, 'duration': 5.984}, {'end': 9556.197, 'text': "So I hope all of you have a basic understanding if you all don't have a basic understanding of HTML CSS and JavaScript.", 'start': 9550.133, 'duration': 6.064}, {'end': 9559.399, 'text': "Like I said earlier, I'll leave a link in the description box.", 'start': 9556.638, 'duration': 2.761}, {'end': 9562.641, 'text': 'You all can go and check out that video and then come back to this video.', 'start': 9559.439, 'duration': 3.202}, {'end': 9563.262, 'text': 'All right.', 'start': 9562.982, 'duration': 0.28}, {'end': 9565.643, 'text': "So guys that's how you download jQuery.", 'start': 9563.762, 'duration': 1.881}, {'end': 9567.044, 'text': "It's not like an installation.", 'start': 9565.743, 'duration': 1.301}, {'end': 9569.125, 'text': "It's basically downloading the jQuery.", 'start': 9567.104, 'duration': 2.021}], 'summary': 'The session covers html and css basics. jquery is downloaded, not installed.', 'duration': 28.572, 'max_score': 9540.553, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9540553.jpg'}], 'start': 9034.958, 'title': 'Jquery introduction and usage', 'summary': 'Covers the introduction to jquery, its popularity, agenda, and usage in visual studio code, discussing javascript, installation, dom, methods, events, effects, and ui, while emphasizing the recommendation of using visual studio code and live server for coding. it also introduces javascript as a universal language of the web and jquery as a concise javascript library with features like dom manipulation, event handling, and animation effects, along with detailed documentation and cross-browser support.', 'chapters': [{'end': 9189.47, 'start': 9034.958, 'title': 'Introduction to jquery', 'summary': 'Covers an introduction to jquery, including its popularity, agenda, and usage of visual studio code, with a focus on discussing javascript, installation, dom, methods, events, effects, and ui, along with the recommendation of using visual studio code and live server for coding.', 'duration': 154.512, 'highlights': ['jQuery is the most popular and the most used JavaScript library', 'Agenda includes discussion on JavaScript, installation, DOM, methods, events, effects, and UI', 'Recommendation to use Visual Studio Code as the code editor, along with the installation of live server for hosting web pages', 'Mention of using Sublime Text or any other preferred code editor']}, {'end': 9739.901, 'start': 9190.29, 'title': 'Javascript & jquery introductions', 'summary': 'Introduces javascript as a universal language of the web, used for making webpages interactive and alive, and jquery as a concise javascript library with features like dom manipulation, event handling, and animation effects, along with detailed documentation and cross-browser support.', 'duration': 549.611, 'highlights': ['JavaScript is a universal language of the web, used for making webpages interactive and alive', 'jQuery simplifies DOM manipulation, event handling, and offers built-in animation effects', 'jQuery has a diverse and bigger community of contributors, comprehensive documentation, and cross-browser support']}], 'duration': 704.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9034958.jpg', 'highlights': ['jQuery is the most popular and the most used JavaScript library', 'JavaScript is a universal language of the web, used for making webpages interactive and alive', 'Agenda includes discussion on JavaScript, installation, DOM, methods, events, effects, and UI', 'Recommendation to use Visual Studio Code as the code editor, along with the installation of live server for hosting web pages', 'jQuery simplifies DOM manipulation, event handling, and offers built-in animation effects', 'Mention of using Sublime Text or any other preferred code editor', 'jQuery has a diverse and bigger community of contributors, comprehensive documentation, and cross-browser support']}, {'end': 10692.746, 'segs': [{'end': 9915.527, 'src': 'embed', 'start': 9847.444, 'weight': 0, 'content': [{'end': 9853.848, 'text': "So what I'm doing over here is I've used this selector function and within the quotation marks, I mentioned H1.", 'start': 9847.444, 'duration': 6.404}, {'end': 9857.97, 'text': "So what this does is it'll basically select the H1 tag for me.", 'start': 9854.128, 'duration': 3.842}, {'end': 9860.131, 'text': "So let's click on Enter.", 'start': 9858.891, 'duration': 1.24}, {'end': 9864.974, 'text': 'Now when I click on H1, you can see that it highlights my header one tag.', 'start': 9860.812, 'duration': 4.162}, {'end': 9870.218, 'text': 'It also shows me the dimensions of the tag and this is how the selector basically works.', 'start': 9865.855, 'duration': 4.363}, {'end': 9872.539, 'text': "Now let's try selecting the body.", 'start': 9870.678, 'duration': 1.861}, {'end': 9880.597, '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': 9874.474, 'duration': 6.123}, {'end': 9883.058, 'text': 'So guys, this is how the selector works.', 'start': 9880.617, 'duration': 2.441}, {'end': 9885.239, 'text': "Now let's make things a little more interesting.", 'start': 9883.398, 'duration': 1.841}, {'end': 9887.72, 'text': "Let's just go back to our Visual Studio code.", 'start': 9885.939, 'duration': 1.781}, {'end': 9892.782, 'text': "Now what I'm gonna do here is within my first list element, I'm going to add an anchor tag.", 'start': 9887.78, 'duration': 5.002}, {'end': 9903.367, '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': 9894.003, 'duration': 9.364}, {'end': 9909.204, 'text': "So guys, I hope you all understand basic HTML because I'm not gonna explain the HTML.", 'start': 9904.181, 'duration': 5.023}, {'end': 9912.445, 'text': "It's gonna be a very lengthy video if I sit and explain HTML to you all.", 'start': 9909.284, 'duration': 3.161}, {'end': 9915.527, 'text': "So for that, I told you all that I'm gonna leave a link in the description.", 'start': 9912.805, 'duration': 2.722}], 'summary': 'Using a selector function to highlight html elements and add an anchor tag to a list element.', 'duration': 68.083, 'max_score': 9847.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9847444.jpg'}, {'end': 10032.326, 'src': 'embed', 'start': 10001.696, 'weight': 8, 'content': [{'end': 10004.96, 'text': "I'll just type it out first and then you all can understand what I'm saying.", 'start': 10001.696, 'duration': 3.264}, {'end': 10010.895, 'text': "So what I'm doing here is I'm selecting the H1 tag using this dollars function.", 'start': 10006.533, 'duration': 4.362}, {'end': 10015.177, 'text': "After that, to this H1 tag, I'm going to apply this method, .", 'start': 10011.295, 'duration': 3.882}, {'end': 10016.078, 'text': 'css method.', 'start': 10015.177, 'duration': 0.901}, {'end': 10021.18, 'text': "Now within this method, I've passed a parameter and a value to that parameter.", 'start': 10016.698, 'duration': 4.482}, {'end': 10026.803, 'text': 'So the parameter is color or the property is color and the value of the property is red.', 'start': 10021.521, 'duration': 5.282}, {'end': 10032.326, 'text': "So what this line is going to do is it's going to change the color of the H1 tag to red.", 'start': 10027.204, 'duration': 5.122}], 'summary': 'Selecting h1 tag and changing color to red using css method.', 'duration': 30.63, 'max_score': 10001.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10001696.jpg'}, {'end': 10191.445, 'src': 'embed', 'start': 10159.779, 'weight': 9, 'content': [{'end': 10161.4, 'text': "Okay, let's just see how it works.", 'start': 10159.779, 'duration': 1.621}, {'end': 10166.203, 'text': 'So here you can see that right before my unordered list, I have my favorite dogs.', 'start': 10162.181, 'duration': 4.022}, {'end': 10169.345, 'text': 'Now similar to this is the after method.', 'start': 10166.844, 'duration': 2.501}, {'end': 10171.507, 'text': "Okay, let's go back to the slides.", 'start': 10169.786, 'duration': 1.721}, {'end': 10178.454, 'text': 'Now the jQuery after method inserts a specified content after the selected elements.', 'start': 10172.349, 'duration': 6.105}, {'end': 10180.756, 'text': 'Okay, so this is the selected elements.', 'start': 10178.935, 'duration': 1.821}, {'end': 10184.399, 'text': "And after the selected elements, it's going to enter this content.", 'start': 10181.317, 'duration': 3.082}, {'end': 10186.601, 'text': "Okay, let's look at how this works.", 'start': 10184.96, 'duration': 1.641}, {'end': 10188.102, 'text': "We'll look at the same example.", 'start': 10186.781, 'duration': 1.321}, {'end': 10191.445, 'text': "So what I'm gonna do is I'm gonna change this to after.", 'start': 10188.783, 'duration': 2.662}], 'summary': 'Demonstration of using jquery after method to insert content after selected elements.', 'duration': 31.666, 'max_score': 10159.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10159779.jpg'}, {'end': 10367.369, 'src': 'embed', 'start': 10333.849, 'weight': 5, 'content': [{'end': 10336.43, 'text': "okay, so let's say there was another paragraph over here.", 'start': 10333.849, 'duration': 2.581}, {'end': 10342.352, 'text': "then what you would do is you would mention paragraph colon first and you'd perform an action on it.", 'start': 10336.43, 'duration': 5.922}, {'end': 10346.013, 'text': "okay, so yeah, let's coming back to this.", 'start': 10342.352, 'duration': 3.661}, {'end': 10350.357, 'text': "i'm going to say text welcome to this fun tutorial.", 'start': 10346.013, 'duration': 4.344}, {'end': 10358.163, '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': 10350.858, 'duration': 7.305}, {'end': 10361.004, 'text': "Now let's see what this does, okay? Let's click on enter.", 'start': 10358.663, 'duration': 2.341}, {'end': 10367.369, 'text': 'What happened here was by Edureka was replaced by welcome to this fun jQuery tutorial.', 'start': 10361.425, 'duration': 5.944}], 'summary': 'Selected paragraph tag, applied dot text function, replaced text by edureka with welcome to this fun jquery tutorial.', 'duration': 33.52, 'max_score': 10333.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10333849.jpg'}, {'end': 10488.718, 'src': 'embed', 'start': 10426.438, 'weight': 2, 'content': [{'end': 10428.439, 'text': 'So guys bear with me when I type the code.', 'start': 10426.438, 'duration': 2.001}, {'end': 10431.982, 'text': "So I'm gonna replace Boxer with German Shepherd.", 'start': 10429, 'duration': 2.982}, {'end': 10434.069, 'text': "Now let's click enter.", 'start': 10433.168, 'duration': 0.901}, {'end': 10436.791, 'text': 'Here you saw that it got changed to German Shepherd.', 'start': 10434.529, 'duration': 2.262}, {'end': 10440.473, 'text': 'Okay, so this is how you set the content using HTML.', 'start': 10437.111, 'duration': 3.362}, {'end': 10445.337, 'text': 'Now what is the difference between HTML and text? Okay, let me show you what the difference is.', 'start': 10440.813, 'duration': 4.524}, {'end': 10454.423, 'text': "Let's say I'm going to select the entire unordered list and I want to return the value using text.", 'start': 10445.957, 'duration': 8.466}, {'end': 10457.445, 'text': 'Now when I return the value using text, you see I get this.', 'start': 10454.884, 'duration': 2.561}, {'end': 10462.269, 'text': "But when I do the exact same thing using HTML, let's see what happens.", 'start': 10458.006, 'duration': 4.263}, {'end': 10467.322, 'text': "So I'm selecting the unordered list and I'm running the HTML function on this.", 'start': 10462.861, 'duration': 4.461}, {'end': 10473.914, 'text': "Now here you saw that it's returning the HTML tags to me along with the text content over here.", 'start': 10467.912, 'duration': 6.002}, {'end': 10475.434, 'text': 'It just returns the text content.', 'start': 10473.974, 'duration': 1.46}, {'end': 10478.975, 'text': 'But over here it will return the HTML content as well.', 'start': 10475.514, 'duration': 3.461}, {'end': 10483.676, 'text': 'Okay, so you can see that Li and end Li is not there over here.', 'start': 10479.355, 'duration': 4.321}, {'end': 10486.277, 'text': "That's because it returns only the text content.", 'start': 10484.096, 'duration': 2.181}, {'end': 10488.718, 'text': 'This will return the HTML content as well.', 'start': 10486.697, 'duration': 2.021}], 'summary': 'Demonstrating replacing text with html content using code.', 'duration': 62.28, 'max_score': 10426.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10426438.jpg'}, {'end': 10662.209, 'src': 'embed', 'start': 10631.336, 'weight': 7, 'content': [{'end': 10635.037, 'text': "So we're just going to apply these values and properties to this H1 tag.", 'start': 10631.336, 'duration': 3.701}, {'end': 10637.178, 'text': "Let's click on enter and see what happens.", 'start': 10635.417, 'duration': 1.761}, {'end': 10642.832, 'text': 'So you saw that the background color, the font color, and a border was added to this.', 'start': 10637.907, 'duration': 4.925}, {'end': 10648.196, 'text': 'Now this happened because we had created an object with color, background color, and border.', 'start': 10643.212, 'duration': 4.984}, {'end': 10653.761, 'text': "So we just applied all of these properties to our h1 tag, okay? It's as simple as that.", 'start': 10648.537, 'duration': 5.224}, {'end': 10656.644, 'text': 'So guys, this is how the CSS function works.', 'start': 10654.182, 'duration': 2.462}, {'end': 10662.209, 'text': "It's basically for styling your webpage, okay? So your webpage looks more prettier with the help of CSS.", 'start': 10656.904, 'duration': 5.305}], 'summary': 'Applied color, background, and border properties to h1 tag for webpage styling with css.', 'duration': 30.873, 'max_score': 10631.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10631336.jpg'}], 'start': 9740.942, 'title': 'Javascript engine and jquery', 'summary': 'Delves into accessing and utilizing javascript engine in browsers like google chrome, safari, and internet explorer, and introduces jquery selector, methods, functions for text, html, css, and attributes, with practical examples and usage explanations.', 'chapters': [{'end': 9785.162, 'start': 9740.942, 'title': 'Javascript engine in browsers', 'summary': 'Discusses how to access and utilize the javascript engine in web browsers such as google chrome, safari, and internet explorer, emphasizing the process of opening the javascript engine through inspection.', 'duration': 44.22, 'highlights': ['The process of accessing the JavaScript engine in web browsers like Google Chrome, Safari, and Internet Explorer is demonstrated, emphasizing the steps to open the engine through inspection.', 'Web browsers like Google Chrome, Safari, and Internet Explorer embed a JavaScript engine, showcasing the prevalence of JavaScript in these browsers.', 'The speaker encounters a small error when opening a CSS file linked to the JavaScript engine, highlighting a practical issue that may arise during the process.']}, {'end': 10212.936, 'start': 9785.202, 'title': 'Jquery selector and methods', 'summary': 'Introduces the jquery selector, explaining the usage of the dollar function to select and manipulate dom elements, with examples of selecting specific elements and applying methods like .css, .before, and .after.', 'duration': 427.734, 'highlights': ['The dollar function in jQuery replaces various vanilla JavaScript functions for selecting and manipulating DOM elements, simplifying the process. (relevance: 5)', 'The example demonstrates selecting specific HTML elements such as H1, body, and anchor tag using the jQuery selector function and displaying their dimensions. (relevance: 4)', 'The application of the .css method to change the color and background of the selected H1 tag is showcased, providing a practical demonstration of manipulating DOM elements. (relevance: 3)', 'Explanation and practical demonstration of the .before and .after methods in jQuery, illustrating how to insert content before or after selected elements. (relevance: 2)', 'Introduction of other jQuery methods such as .css, .before, and .after, with practical examples of their usage and effects on the selected elements. (relevance: 1)']}, {'end': 10692.746, 'start': 10213.816, 'title': 'Jquery functions: text, html, css, attributes', 'summary': 'Explains the usage of text, html, css, and attributes functions in jquery, demonstrating their application with examples and highlighting the differences between them, such as returning text or html content, styling selected elements, and setting or returning attribute values.', 'duration': 478.93, 'highlights': ['The text function in jQuery is used to set or return the text contents of the selected element, allowing for the retrieval or replacement of text content.', 'The HTML method, similar to the text function, sets or returns the HTML content of selected elements, demonstrating how to retrieve or set content, and highlighting the difference between returning text or HTML content.', 'The CSS function styles selected elements by setting or returning one or more style properties, demonstrating the application of CSS styling to an element using an object with defined properties such as color, background, and border.', 'The attribute method in jQuery is used to set or return attribute values of selected elements, allowing for the manipulation of specific attributes of HTML elements.']}], 'duration': 951.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY9740942.jpg', 'highlights': ['The dollar function in jQuery simplifies selecting and manipulating DOM elements. (relevance: 5)', 'Demonstration of selecting specific HTML elements and displaying their dimensions using jQuery selector. (relevance: 4)', 'Practical demonstration of changing the color and background of the selected H1 tag using the .css method. (relevance: 3)', 'Illustration of inserting content before or after selected elements using .before and .after methods in jQuery. (relevance: 2)', 'Introduction of jQuery methods such as .css, .before, and .after with practical examples. (relevance: 1)', 'Accessing the JavaScript engine in web browsers like Google Chrome, Safari, and Internet Explorer is demonstrated. (relevance: 0)', "Web browsers embed a JavaScript engine, showcasing JavaScript's prevalence. (relevance: 0)", 'Encounter of a small error when opening a CSS file linked to the JavaScript engine is highlighted. (relevance: 0)', 'Usage of the text function in jQuery to set or return the text contents of the selected element. (relevance: 0)', 'Demonstration of the HTML method for setting or returning the HTML content of selected elements. (relevance: 0)', 'Application of the CSS function to style selected elements by setting or returning style properties. (relevance: 0)', 'Utilization of the attribute method in jQuery to set or return attribute values of selected elements. (relevance: 0)']}, {'end': 13408.749, 'segs': [{'end': 10796.178, 'src': 'embed', 'start': 10768.658, 'weight': 1, 'content': [{'end': 10771.259, 'text': "And similarly I'm gonna add the other two images also.", 'start': 10768.658, 'duration': 2.601}, {'end': 10774.598, 'text': 'So the other image is husky.', 'start': 10771.857, 'duration': 2.741}, {'end': 10779.98, 'text': 'And then there is a boxer as well.', 'start': 10776.259, 'duration': 3.721}, {'end': 10782.982, 'text': "Now let's go ahead and save this first.", 'start': 10780.961, 'duration': 2.021}, {'end': 10789.124, 'text': "Okay, so what I've done is I've moved this to the root folder.", 'start': 10783.822, 'duration': 5.302}, {'end': 10793.306, 'text': "So let's just save this and let's refresh.", 'start': 10789.724, 'duration': 3.582}, {'end': 10796.178, 'text': 'All right so guys I was facing a problem.', 'start': 10794.418, 'duration': 1.76}], 'summary': 'Adding three images, saving to root folder, facing a problem', 'duration': 27.52, 'max_score': 10768.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10768658.jpg'}, {'end': 10948.121, 'src': 'embed', 'start': 10916.977, 'weight': 8, 'content': [{'end': 10921.258, 'text': "So for those of you who don't know, CSS stands for cascading style sheet.", 'start': 10916.977, 'duration': 4.281}, {'end': 10922.999, 'text': "I'm also gonna write the type.", 'start': 10921.278, 'duration': 1.721}, {'end': 10924.78, 'text': "It's a good practice to mention the type.", 'start': 10923.119, 'duration': 1.661}, {'end': 10926.12, 'text': 'So it is text.', 'start': 10925.22, 'duration': 0.9}, {'end': 10931.848, 'text': "slash CSS and also let's mention the path.", 'start': 10926.88, 'duration': 4.968}, {'end': 10937.096, 'text': "So the name of my file is index.css, correct? So that's about it.", 'start': 10932.549, 'duration': 4.547}, {'end': 10940.722, 'text': "Now let's save this file and let's open it up.", 'start': 10937.737, 'duration': 2.985}, {'end': 10948.121, 'text': "All right, so guys, now you can see that they're beautifully aligned to the left and they all look so adorable.", 'start': 10942.697, 'duration': 5.424}], 'summary': 'Css file named index.css created, resulting in left-aligned and appealing layout.', 'duration': 31.144, 'max_score': 10916.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10916977.jpg'}, {'end': 11160.495, 'src': 'embed', 'start': 11136.095, 'weight': 2, 'content': [{'end': 11142.083, 'text': "Okay, so basically the code that you include within this function, so let's say I type something over here.", 'start': 11136.095, 'duration': 5.988}, {'end': 11150.187, 'text': "Okay, whatever code I'm typing over here, all of this code will be executed only after all of this is executed.", 'start': 11142.103, 'duration': 8.084}, {'end': 11155.431, 'text': 'So only after loading all of these jQuery libraries and frameworks,', 'start': 11150.707, 'duration': 4.724}, {'end': 11160.495, 'text': "only after that whatever's mentioned within this document.ready function will get executed.", 'start': 11155.431, 'duration': 5.064}], 'summary': 'Code within document.ready function is executed after loading jquery libraries and frameworks.', 'duration': 24.4, 'max_score': 11136.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY11136095.jpg'}, {'end': 11245.753, 'src': 'embed', 'start': 11216.538, 'weight': 0, 'content': [{'end': 11220.079, 'text': 'Okay, now input type will basically create space for user input.', 'start': 11216.538, 'duration': 3.541}, {'end': 11223.687, 'text': 'So my input type is going to be text.', 'start': 11220.706, 'duration': 2.981}, {'end': 11229.449, 'text': "So the people who are familiar with HTML CSS know what I'm doing exactly.", 'start': 11224.347, 'duration': 5.102}, {'end': 11235.17, 'text': "So I'm giving some ID to this input and also let's give it some value.", 'start': 11229.469, 'duration': 5.701}, {'end': 11240.252, 'text': "It's blank value so whatever you enter here is gonna be saved.", 'start': 11236.651, 'duration': 3.601}, {'end': 11243.412, 'text': 'So I created an input type over here.', 'start': 11241.392, 'duration': 2.02}, {'end': 11245.753, 'text': "Now also I'm gonna create a button.", 'start': 11244.093, 'duration': 1.66}], 'summary': 'Creating a user input space with text type and assigning an id and value. adding a button.', 'duration': 29.215, 'max_score': 11216.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY11216538.jpg'}, {'end': 11402.754, 'src': 'embed', 'start': 11372.154, 'weight': 3, 'content': [{'end': 11375.537, 'text': "So this is just returning the value that I'm typing in the input.", 'start': 11372.154, 'duration': 3.383}, {'end': 11378.799, 'text': 'So guys, this is how the value function works.', 'start': 11375.937, 'duration': 2.862}, {'end': 11380.657, 'text': "All right, it's very simple.", 'start': 11379.597, 'duration': 1.06}, {'end': 11381.778, 'text': 'It just returns the value.', 'start': 11380.697, 'duration': 1.081}, {'end': 11383.998, 'text': 'Similarly, you can set the value as well.', 'start': 11382.158, 'duration': 1.84}, {'end': 11393.961, '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': 11384.298, 'duration': 9.663}, {'end': 11398.622, 'text': "We'll be very interested to know how you have used these functions to build your own program.", 'start': 11394.381, 'duration': 4.241}, {'end': 11402.754, 'text': "Now the next function I'm going to talk about is the add class method.", 'start': 11399.292, 'duration': 3.462}], 'summary': 'Explaining the value function and encouraging experimentation. introducing the add class method next.', 'duration': 30.6, 'max_score': 11372.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY11372154.jpg'}, {'end': 11468.2, 'src': 'embed', 'start': 11440.393, 'weight': 4, 'content': [{'end': 11444.274, 'text': "Okay, similarly, I'm going to have the other two images over here.", 'start': 11440.393, 'duration': 3.881}, {'end': 11449.095, 'text': 'Okay, and the last image, which is a boxer.', 'start': 11446.014, 'duration': 3.081}, {'end': 11453.276, 'text': "I'm selecting the puppy folder and then the boxer image.", 'start': 11450.075, 'duration': 3.201}, {'end': 11458.311, 'text': 'All right, so I created a div similar to what we did in the previous examples.', 'start': 11454.147, 'duration': 4.164}, {'end': 11460.553, 'text': "Now I'm going to open a script tag.", 'start': 11458.771, 'duration': 1.782}, {'end': 11465.117, 'text': "Before I type out the entire script, I'm going to have a button.", 'start': 11461.534, 'duration': 3.583}, {'end': 11468.2, 'text': "So let's add a button over here.", 'start': 11466.018, 'duration': 2.182}], 'summary': 'Creating divs for three images and adding a button.', 'duration': 27.807, 'max_score': 11440.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY11440393.jpg'}, {'end': 11577.627, 'src': 'embed', 'start': 11521.517, 'weight': 6, 'content': [{'end': 11529.121, 'text': "Now you can obviously open another file called CSS and enter the entire thing, but it's a small code so I'm just gonna type it over here itself.", 'start': 11521.517, 'duration': 7.604}, {'end': 11532.483, 'text': "So I'm creating a class called style class.", 'start': 11529.662, 'duration': 2.821}, {'end': 11532.724, 'text': 'all right?', 'start': 11532.483, 'duration': 0.241}, {'end': 11541.623, 'text': "What I'm gonna do is I'm going to define some property called border and I'm gonna assign a value to this property.", 'start': 11534.298, 'duration': 7.325}, {'end': 11545.245, 'text': "Let's say 5px solid green.", 'start': 11541.643, 'duration': 3.602}, {'end': 11550.889, 'text': 'So this is what is there in the style tag.', 'start': 11546.966, 'duration': 3.923}, {'end': 11554.571, 'text': 'Now coming back to this function.', 'start': 11552.83, 'duration': 1.741}, {'end': 11560.335, 'text': "So on the click of this button an event has to occur and I'm going to type out that event over here.", 'start': 11555.312, 'duration': 5.023}, {'end': 11571.584, 'text': "So what I'm doing is I'm selecting all the images first and then I'm using the add class method and I'm passing this style class function that we just created.", 'start': 11560.959, 'duration': 10.625}, {'end': 11573.265, 'text': 'Okay, all right.', 'start': 11571.604, 'duration': 1.661}, {'end': 11577.627, 'text': "Now let's close our parenthesis over here.", 'start': 11574.205, 'duration': 3.422}], 'summary': 'Creating a css class with a border property and applying it to images on a button click event.', 'duration': 56.11, 'max_score': 11521.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY11521517.jpg'}], 'start': 10693.286, 'title': 'Jquery functionalities and effects', 'summary': 'Demonstrates working with puppy images in jquery, jquery attribute and value functions, jquery methods like addclass, removeclass, toggleclass, click, on, keypress, events and effects including hide, show, toggle, fade out, fade in, slide down, slide up, slide toggle, draggable, and droppable functionalities.', 'chapters': [{'end': 10940.722, 'start': 10693.286, 'title': 'Working with puppy images in jquery', 'summary': 'Demonstrates the process of displaying and styling three puppy images using html, css, and jquery, including adding the images to a div, aligning them horizontally, and setting their dimensions, with a focus on using jquery to enhance the user experience.', 'duration': 247.436, 'highlights': ['The chapter demonstrates the process of displaying and styling three puppy images using HTML, CSS, and jQuery.', 'The speaker aligns the images horizontally and sets their dimensions to 300 pixels width and 250 pixels height using CSS.', 'The speaker explains the process of linking the CSS file to the HTML file and emphasizes the importance of this step.', 'The speaker encounters a loading issue, resolves it by copying the puppy folder into the jQuery folder, and successfully displays the three puppy images.', 'The speaker explains the use of the img tag to display the puppy images and emphasizes the importance of setting the source correctly.']}, {'end': 11393.961, 'start': 10942.697, 'title': 'Jquery attribute and value functions', 'summary': 'Explains the attribute and value functions in jquery, demonstrating how to apply a border attribute to images and use the value function to capture user input and display it through an alert, emphasizing the importance of the document.ready function for safe manipulation of the page.', 'duration': 451.264, 'highlights': ['The attribute function is demonstrated by applying a 5-pixel solid black border to a set of images, enhancing their appearance.', 'The value function is illustrated by capturing user input and displaying it through an alert, showcasing its simplicity and practicality.', 'The importance of the document.ready function for safe manipulation of the page is emphasized, ensuring that code runs only after the entire document is ready.']}, {'end': 12012.34, 'start': 11394.381, 'title': 'Jquery methods: addclass, removeclass, toggleclass, click, on, keypress', 'summary': 'Covers the use of addclass, removeclass, and toggleclass methods to add, remove, and toggle classes respectively, along with the explanation of click and on events, and the keypress method.', 'duration': 617.959, 'highlights': ['The addClass method adds one or more classes to the selected elements, demonstrated by adding a style class with a 5px solid green border to all images on the click of a button.', 'The removeClass method removes the specified class from the selected elements, as seen when the previously added style class with a green border is removed from the images.', 'The toggleClass method toggles between adding and removing the specified class from the selected elements, exemplified by the repeated addition and removal of the style class with a green border from the images.', 'The click event is used to specify an event that occurs when a selector is clicked, demonstrated by applying a hide effect on images when they are clicked.', 'The on method attaches one or more event handlers to the selected elements, and can be used in conjunction with other events like click and keypress.', 'The keypress method executes an event when a character is entered, indicated by performing a function to hide a paragraph when characters are typed in an input field.']}, {'end': 12795.747, 'start': 12013.627, 'title': 'Jquery events and effects', 'summary': 'Covers the usage of on and key press events, along with the hide, show, and toggle effects, and provides examples of fade out and fade in effects with detailed explanations and demonstrations.', 'duration': 782.12, 'highlights': ['The chapter covers the usage of on and key press events', 'Provides examples of fade out and fade in effects with detailed explanations and demonstrations', 'The hide, show, and toggle effects are explained with practical examples']}, {'end': 13408.749, 'start': 12796.388, 'title': 'Jquery effects & user interface', 'summary': 'Covers jquery slide down, slide up, and slide toggle effects with an example of a sliding rectangle and then discusses draggable and droppable functionalities with examples of a draggable rectangle and a droppable house for an image of a puppy.', 'duration': 612.361, 'highlights': ['The chapter covers jQuery slide down, slide up, and slide toggle effects with an example of a sliding rectangle', 'The chapter then discusses draggable and droppable functionalities with examples of a draggable rectangle and a droppable house for an image of a puppy']}], 'duration': 2715.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY10693286.jpg', 'highlights': ['The chapter demonstrates the process of displaying and styling three puppy images using HTML, CSS, and jQuery.', 'The attribute function is demonstrated by applying a 5-pixel solid black border to a set of images, enhancing their appearance.', 'The value function is illustrated by capturing user input and displaying it through an alert, showcasing its simplicity and practicality.', 'The addClass method adds one or more classes to the selected elements, demonstrated by adding a style class with a 5px solid green border to all images on the click of a button.', 'The removeClass method removes the specified class from the selected elements, as seen when the previously added style class with a green border is removed from the images.', 'The toggleClass method toggles between adding and removing the specified class from the selected elements, exemplified by the repeated addition and removal of the style class with a green border from the images.', 'The chapter covers jQuery slide down, slide up, and slide toggle effects with an example of a sliding rectangle', 'The chapter then discusses draggable and droppable functionalities with examples of a draggable rectangle and a droppable house for an image of a puppy', 'The importance of the document.ready function for safe manipulation of the page is emphasized, ensuring that code runs only after the entire document is ready.', 'The click event is used to specify an event that occurs when a selector is clicked, demonstrated by applying a hide effect on images when they are clicked.']}, {'end': 14246.262, 'segs': [{'end': 13488.361, 'src': 'embed', 'start': 13455.079, 'weight': 4, 'content': [{'end': 13456.36, 'text': "Let's give it an ID.", 'start': 13455.079, 'duration': 1.281}, {'end': 13462.123, 'text': "Let's say date is the ID and the type is text.", 'start': 13456.86, 'duration': 5.263}, {'end': 13465.285, 'text': "We'll also assign it some size.", 'start': 13463.003, 'duration': 2.282}, {'end': 13468.146, 'text': 'Okay, say 10.', 'start': 13465.305, 'duration': 2.841}, {'end': 13472.008, 'text': "All right, now what we're gonna do is we're gonna open up a script tag.", 'start': 13468.146, 'duration': 3.862}, {'end': 13476.498, 'text': "Now within the script tag, it's very simple, guys.", 'start': 13473.777, 'duration': 2.721}, {'end': 13479.299, 'text': "What I'm gonna do is I'm going to select the input.", 'start': 13476.558, 'duration': 2.741}, {'end': 13488.361, 'text': "So I'm typing the input ID over here and on that, we're going to call the date picker widget, okay? So let's save this.", 'start': 13480.019, 'duration': 8.342}], 'summary': 'Creating a text input with id as date, size 10, and attaching a date picker widget.', 'duration': 33.282, 'max_score': 13455.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY13455079.jpg'}, {'end': 13732.741, 'src': 'embed', 'start': 13703.93, 'weight': 2, 'content': [{'end': 13710.533, 'text': 'So we will be taking a very brief look into TypeScript I will not get into much about teaching you guys TypeScript.', 'start': 13703.93, 'duration': 6.603}, {'end': 13712.754, 'text': 'You can basically look up another video for that.', 'start': 13710.593, 'duration': 2.161}, {'end': 13720.197, 'text': 'This is meant for angular and that is exactly what we will be doing after I have given you guys a very brief introduction to TypeScript.', 'start': 13713.094, 'duration': 7.103}, {'end': 13725.478, 'text': 'We will be also looking at how you can integrate external CSS into your angular application.', 'start': 13720.377, 'duration': 5.101}, {'end': 13732.741, 'text': 'So we will mostly be using bootstrap 3 and we will be learning how to actually integrate that into your angular applications.', 'start': 13725.558, 'duration': 7.183}], 'summary': 'Brief overview of typescript & integrating external css in angular using bootstrap 3.', 'duration': 28.811, 'max_score': 13703.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY13703930.jpg'}, {'end': 14033.24, 'src': 'embed', 'start': 14001.642, 'weight': 3, 'content': [{'end': 14005.346, 'text': 'He makes sure that everything on a website looks tip-top and smack perfect.', 'start': 14001.642, 'duration': 3.704}, {'end': 14008.582, 'text': 'and he does this with a lot of optimization.', 'start': 14005.919, 'duration': 2.663}, {'end': 14017.654, 'text': 'So mostly back in the day front-end mostly used to be done by HTML and CSS and CSS used to get very complicated in this fashion.', 'start': 14009.003, 'duration': 8.651}, {'end': 14021.999, 'text': 'It still is a little complicated if you want to present a very polished website,', 'start': 14018.114, 'duration': 3.885}, {'end': 14027.176, 'text': 'but creating the HTML and making it much more reactive is what the framework does for you.', 'start': 14022.392, 'duration': 4.784}, {'end': 14033.24, 'text': 'So most online sites will say that front-end development framework is also referred to as a CSS framework.', 'start': 14027.776, 'duration': 5.464}], 'summary': 'Front-end development involves optimizing websites with html, css, and frameworks for a polished and reactive user experience.', 'duration': 31.598, 'max_score': 14001.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY14001642.jpg'}, {'end': 14246.262, 'src': 'embed', 'start': 14202.136, 'weight': 0, 'content': [{'end': 14206.059, 'text': 'After that, we just discussed that angular is main for single-page applications.', 'start': 14202.136, 'duration': 3.923}, {'end': 14213.944, 'text': 'So we are not trying to create multi-page applications with angular angular is made for making single-page applications.', 'start': 14206.319, 'duration': 7.625}, {'end': 14219.588, 'text': 'So what exactly is a single-page application? Well, it does not read require a page reloading.', 'start': 14214.364, 'duration': 5.224}, {'end': 14223.59, 'text': 'So for example, Gmail is a wonderful single-page application.', 'start': 14219.788, 'duration': 3.802}, {'end': 14225.091, 'text': 'So let me just go ahead and show it to you.', 'start': 14223.67, 'duration': 1.421}, {'end': 14233.19, 'text': "If you go ahead and open up your Gmail account and let's say you are straight up going to open on the inbox page.", 'start': 14226.724, 'duration': 6.466}, {'end': 14237.634, 'text': 'Now if you were to go into drafts, let the site stop loading.', 'start': 14233.61, 'duration': 4.024}, {'end': 14242.658, 'text': 'Okay, so if you were to go into drafts, you see that there is basically no load out here.', 'start': 14237.934, 'duration': 4.724}, {'end': 14246.262, 'text': "Your screen isn't going into that whole whoopty whoop of loading.", 'start': 14242.779, 'duration': 3.483}], 'summary': 'Angular is designed for single-page applications, eliminating the need for page reloading. gmail is a notable example.', 'duration': 44.126, 'max_score': 14202.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY14202136.jpg'}], 'start': 13409.129, 'title': 'Jquery draggable, droppable, and angular basics', 'summary': 'Covers jquery concepts of draggable, droppable, and date picker, and provides an angular basics tutorial for learning angular 8 through practical applications and assignments.', 'chapters': [{'end': 13533.597, 'start': 13409.129, 'title': 'Jquery draggable, droppable, and date picker', 'summary': 'Explains the concepts of draggable, droppable, and date picker in jquery, showing how draggable and droppable works and demonstrating the usage of date picker with an inbuilt widget, allowing users to enter and visualize dates easily.', 'duration': 124.468, 'highlights': ['The chapter explains the concepts of draggable, droppable, and date picker in jQuery, demonstrating how draggable and droppable works and showing the usage of date picker with an inbuilt widget.', 'The date picker is an inbuilt widget in jQuery that allows users to enter and easily visualize dates, without requiring much coding.', 'The chapter demonstrates the usage of date picker with an inbuilt widget, enabling users to enter and visualize dates easily by selecting the input ID and calling the date picker widget.']}, {'end': 14246.262, 'start': 13533.597, 'title': 'Angular basics tutorial', 'summary': 'Delves into the basics of angular, including its introduction, practical applications, and assignments, aiming to teach angular 8 through classroom-like approach, covering topics from setting up local projects to understanding the building blocks of angular, emphasizing on the framework being javascript-based and ideal for single-page applications.', 'duration': 712.665, 'highlights': ['The tutorial covers practical aspects of Angular, including setting up local projects and creating simple applications.', 'The tutorial takes a classroom-like approach and includes assignments for better understanding.', 'Angular is a JavaScript-based framework suitable for single-page applications, simplifying front-end development.', 'The chapter delves into the basics of Angular, including its introduction and practical applications.']}], 'duration': 837.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY13409129.jpg', 'highlights': ['The chapter covers practical aspects of Angular, including setting up local projects and creating simple applications.', 'The chapter explains the concepts of draggable, droppable, and date picker in jQuery, demonstrating how draggable and droppable works and showing the usage of date picker with an inbuilt widget.', 'The tutorial takes a classroom-like approach and includes assignments for better understanding.', 'Angular is a JavaScript-based framework suitable for single-page applications, simplifying front-end development.', 'The date picker is an inbuilt widget in jQuery that allows users to enter and easily visualize dates, without requiring much coding.']}, {'end': 15775.202, 'segs': [{'end': 14634.021, 'src': 'embed', 'start': 14606.425, 'weight': 1, 'content': [{'end': 14609.467, 'text': 'You can just type dot exit and that will exit you from that console.', 'start': 14606.425, 'duration': 3.042}, {'end': 14618.972, 'text': "So now let's go ahead and clear up our command prompt and the next thing that we are going to do is install angular on our computer.", 'start': 14609.987, 'duration': 8.985}, {'end': 14621.433, 'text': "So to install angular, let's see what we have to do.", 'start': 14619.352, 'duration': 2.081}, {'end': 14626.896, 'text': 'So the best place that you have for any doubts of the sort is the angular documentation.', 'start': 14621.713, 'duration': 5.183}, {'end': 14629.316, 'text': 'So go ahead and search for the Angular docs.', 'start': 14627.469, 'duration': 1.847}, {'end': 14631.839, 'text': 'So this will open up the angular-docs.', 'start': 14629.838, 'duration': 2.001}, {'end': 14634.021, 'text': "It's at angular.io slash docs.", 'start': 14632.019, 'duration': 2.002}], 'summary': 'Instructions to install angular include accessing the angular documentation at angular.io/docs.', 'duration': 27.596, 'max_score': 14606.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY14606425.jpg'}, {'end': 14731.337, 'src': 'embed', 'start': 14698.314, 'weight': 4, 'content': [{'end': 14699.475, 'text': "So that doesn't really matter.", 'start': 14698.314, 'duration': 1.161}, {'end': 14707.398, 'text': 'So this means that angular has been installed on our computer and you can go ahead and check that by just creating an angular project.', 'start': 14699.895, 'duration': 7.503}, {'end': 14709.519, 'text': "now I'm in my default user directory.", 'start': 14707.398, 'duration': 2.121}, {'end': 14714.521, 'text': 'So let me just go ahead and change it to the desktop directory and out in the desktop directory.', 'start': 14709.579, 'duration': 4.942}, {'end': 14717.683, 'text': 'I want to make folder called angular tutorial.', 'start': 14714.721, 'duration': 2.962}, {'end': 14720.509, 'text': 'So angular underscore tutorial.', 'start': 14717.823, 'duration': 2.686}, {'end': 14731.337, 'text': "So this is where I'm going to be saving all the projects and all the setups that we will be needing for the various assignments and simple applications that we will be looking at and the concepts.", 'start': 14720.909, 'duration': 10.428}], 'summary': 'Angular installed on computer, creating project folder for tutorials.', 'duration': 33.023, 'max_score': 14698.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY14698314.jpg'}, {'end': 15422.643, 'src': 'embed', 'start': 15393.604, 'weight': 5, 'content': [{'end': 15397.746, 'text': 'And we are also going to be displaying the same name down here in this paragraph.', 'start': 15393.604, 'duration': 4.142}, {'end': 15399.487, 'text': "So let's go ahead and save this.", 'start': 15398.306, 'duration': 1.181}, {'end': 15408.916, 'text': "and let's go ahead and reload our file and you surprisingly see that the input part that we had has suddenly disappeared.", 'start': 15400.331, 'duration': 8.585}, {'end': 15417.9, 'text': 'Now what we want to do to realize our mistake is go ahead and say inspect if you go into the console, it says uncut arrow template parse error.', 'start': 15409.416, 'duration': 8.484}, {'end': 15422.643, 'text': "So it can't bind to ng model since it isn't known property of input.", 'start': 15417.98, 'duration': 4.663}], 'summary': 'Error: ng model not known property of input', 'duration': 29.039, 'max_score': 15393.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY15393604.jpg'}, {'end': 15537.837, 'src': 'embed', 'start': 15510.595, 'weight': 0, 'content': [{'end': 15517.377, 'text': 'So put a comma press enter and type in forms module go ahead and save your HTML page also just in case.', 'start': 15510.595, 'duration': 6.782}, {'end': 15525.543, 'text': 'And now what we see out here is we do not get any error first of all, and we have this nice little input box.', 'start': 15518.095, 'duration': 7.448}, {'end': 15526.745, 'text': "So let's close this.", 'start': 15525.804, 'duration': 0.941}, {'end': 15528.953, 'text': 'We also have this nice little input box.', 'start': 15527.332, 'duration': 1.621}, {'end': 15531.014, 'text': 'It says Aria in the paragraph.', 'start': 15529.013, 'duration': 2.001}, {'end': 15532.935, 'text': 'It also says Aria in the input box.', 'start': 15531.094, 'duration': 1.841}, {'end': 15537.837, 'text': 'Now if I were to delete that everything in the paragraph also automatically gets deleted.', 'start': 15533.375, 'duration': 4.462}], 'summary': 'Demonstrates creating input box using forms module, with aria attributes.', 'duration': 27.242, 'max_score': 15510.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY15510595.jpg'}], 'start': 14246.802, 'title': 'Angular 8 and single-page applications', 'summary': 'Discusses the advantages of single-page applications, the evolution of angular from version 2 to version 8, and the new features in angular 8 including the iv engine, basel engine, and the concept of differential loading. it also covers the changes in angular 8, including the breaking change in the http library, the setup of an angular project using visual studio code, and the overview of typescript for creating scalable applications.', 'chapters': [{'end': 14489.372, 'start': 14246.802, 'title': 'Angular 8 updates & single-page applications', 'summary': 'Discusses the advantages of single-page applications, the evolution of angular from version 2 to version 8, and the new features in angular 8 including the iv engine, basel engine, and the concept of differential loading.', 'duration': 242.57, 'highlights': ['The advantages of single-page applications', 'Evolution of Angular from version 2 to version 8', 'New features in Angular 8']}, {'end': 14786.517, 'start': 14489.732, 'title': 'Angular 8 changes and installation', 'summary': 'Discusses the changes in angular 8, including the breaking change in the http library, and then provides a detailed guide on installing angular by downloading and installing node.js, checking its installation, and using npm to install angular cli globally.', 'duration': 296.785, 'highlights': ["The breaking change in Angular 8 is related to the HTTP library, requiring the import of '@angular/common/http' instead of 'angular/http', impacting the way HTTP libraries are to be used.", 'To start with Angular, it is necessary to first download and install Node.js, followed by checking its installation using the command prompt, and then installing Angular using npm, which allows for a global installation of Angular CLI.', "The process of installing Angular involves accessing the Angular documentation, following the setup part, and using npm to globally install Angular CLI by running the command 'npm install -g @angular/cli'."]}, {'end': 15417.9, 'start': 14786.517, 'title': 'Angular project setup and first app', 'summary': 'Covers the setup of an angular project using visual studio code, the structure of an angular app, and the creation of a basic app component, emphasizing the interconnection between app files and the usage of directives like ngmodel to manipulate data.', 'duration': 631.383, 'highlights': ['The chapter covers the setup of an Angular project using Visual Studio Code, the structure of an Angular app, and the creation of a basic app component.', 'It emphasizes the interconnection between app files and the usage of directives like ngModel to manipulate data.', 'It mentions setting up an Angular project without routing, using CSS, and emphasizes the usage of Visual Studio Code for development, highlighting its free availability and functionalities.']}, {'end': 15775.202, 'start': 15417.98, 'title': 'Angular forms and typescript overview', 'summary': 'Discusses the import of ngmodel in angular, the setup of an angular project, and the overview of typescript, emphasizing its role as a superset of javascript and its use for creating scalable applications.', 'duration': 357.222, 'highlights': ['The chapter explains the process of importing ngModel in Angular and the necessity of including the forms module to enable its functionality.', 'The chapter provides an overview of TypeScript, emphasizing its role as a superset of JavaScript, its strong typing, and its ability to compile down to JavaScript, enabling the creation of scalable applications.', 'The chapter introduces the concept of modules and components in Angular, explaining their role and relationship within the framework.']}], 'duration': 1528.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY14246802.jpg', 'highlights': ['Evolution of Angular from version 2 to version 8', 'Advantages of single-page applications', 'New features in Angular 8 including the iv engine, basel engine, and the concept of differential loading', "The breaking change in Angular 8 related to the HTTP library, requiring the import of '@angular/common/http' instead of 'angular/http'", 'The process of installing Angular involves accessing the Angular documentation, following the setup part, and using npm to globally install Angular CLI', 'The chapter covers the setup of an Angular project using Visual Studio Code, the structure of an Angular app, and the creation of a basic app component', 'The chapter explains the process of importing ngModel in Angular and the necessity of including the forms module to enable its functionality', 'The chapter provides an overview of TypeScript, emphasizing its role as a superset of JavaScript, its strong typing, and its ability to compile down to JavaScript, enabling the creation of scalable applications']}, {'end': 17988.759, 'segs': [{'end': 16004.714, 'src': 'embed', 'start': 15972.568, 'weight': 9, 'content': [{'end': 15979.153, 'text': 'Now beware that when you copy the relative path, you have to actually go ahead and change this all to a backslash.', 'start': 15972.568, 'duration': 6.585}, {'end': 15985.647, 'text': 'So just change all of these two backslashes and you should be ready to go.', 'start': 15980.374, 'duration': 5.273}, {'end': 15992.07, 'text': 'So let me just show you guys, this is without actually having Bootstrap installed.', 'start': 15986.248, 'duration': 5.822}, {'end': 15994.87, 'text': 'So this is the app that we have created.', 'start': 15992.61, 'duration': 2.26}, {'end': 16004.714, 'text': 'Now, if you were to just go ahead and inspect, we can go ahead and see that in the head part, there is only one styles that it says text slash CSS.', 'start': 15995.451, 'duration': 9.263}], 'summary': 'Demonstrating how to change relative paths to backslashes for bootstrap installation.', 'duration': 32.146, 'max_score': 15972.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY15972568.jpg'}, {'end': 16962.298, 'src': 'embed', 'start': 16931.593, 'weight': 0, 'content': [{'end': 16936.434, 'text': 'so that angular and typescript both understand how your components are being made.', 'start': 16931.593, 'duration': 4.841}, {'end': 16943.595, 'text': 'now you can also add a styling to your components by just adding a styling folder.', 'start': 16936.434, 'duration': 7.161}, {'end': 16945.256, 'text': 'I mean a styling file.', 'start': 16944.135, 'duration': 1.121}, {'end': 16950.837, 'text': 'So you will be calling this server dot component dot CSS.', 'start': 16945.336, 'duration': 5.501}, {'end': 16962.298, 'text': "So this is gonna be a CSS file and out here we can just say since we have an H3, we can say color will be let's say blue.", 'start': 16951.909, 'duration': 10.389}], 'summary': 'Learn to add styling to components in angular using typescript, e.g., calling server.component.css and setting color to blue for h3.', 'duration': 30.705, 'max_score': 16931.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY16931593.jpg'}, {'end': 17024.49, 'src': 'embed', 'start': 16990.614, 'weight': 7, 'content': [{'end': 16994.777, 'text': 'So go ahead and paste that in and just change this to CSS.', 'start': 16990.614, 'duration': 4.163}, {'end': 17004.243, 'text': "Let's go ahead and save that and now if we go ahead and load it, we will see that our styling has also been applied to our component.", 'start': 16995.737, 'duration': 8.506}, {'end': 17006.024, 'text': 'So this is the server component.', 'start': 17004.363, 'duration': 1.661}, {'end': 17007.065, 'text': 'This is the app component.', 'start': 17006.044, 'duration': 1.021}, {'end': 17009.102, 'text': 'which makes it very clear now.', 'start': 17007.401, 'duration': 1.701}, {'end': 17015.565, 'text': 'if you are actually a guy who likes things to be much more automatic and seamless, like me, worry not,', 'start': 17009.102, 'duration': 6.463}, {'end': 17024.49, 'text': "because angular gives you the power to create components and not worry about if they're included in your module and everything just through the CLI.", 'start': 17015.565, 'duration': 8.925}], 'summary': 'Angular cli allows easy creation and inclusion of components in modules, providing automatic and seamless functionality.', 'duration': 33.876, 'max_score': 16990.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY16990614.jpg'}, {'end': 17099.314, 'src': 'embed', 'start': 17047.778, 'weight': 2, 'content': [{'end': 17056.605, 'text': 'Now what the CLI will do is it will go ahead and create everything that you need for your component.', 'start': 17047.778, 'duration': 8.827}, {'end': 17060.088, 'text': 'So we see we have a sub server folder out here.', 'start': 17056.846, 'duration': 3.242}, {'end': 17063.071, 'text': 'The sub server has a sub server.css file.', 'start': 17060.148, 'duration': 2.923}, {'end': 17067.088, 'text': 'and this also has a subserver, that component file only.', 'start': 17063.846, 'duration': 3.242}, {'end': 17069.189, 'text': 'we can go and put the.', 'start': 17067.088, 'duration': 2.101}, {'end': 17074.352, 'text': 'so it has a component file, has a paragraph that said sub server works.', 'start': 17069.189, 'duration': 5.163}, {'end': 17076.453, 'text': "there's also the testing file, which we didn't create.", 'start': 17074.352, 'duration': 2.101}, {'end': 17079.535, 'text': "there's also the components file out.", 'start': 17076.453, 'duration': 3.082}, {'end': 17084.958, 'text': 'here i mean the typescript file and as you guys can see, it says app sub server.', 'start': 17079.535, 'duration': 5.423}, {'end': 17086.939, 'text': 'so that is a selector that you use it with.', 'start': 17084.958, 'duration': 1.981}, {'end': 17089.018, 'text': "So let's go ahead and use this.", 'start': 17087.535, 'duration': 1.483}, {'end': 17097.371, 'text': 'So we go ahead and put this into our servers HTML file and we can just say app sub server.', 'start': 17089.238, 'duration': 8.133}, {'end': 17099.314, 'text': "Let's go ahead and save that.", 'start': 17097.391, 'duration': 1.923}], 'summary': 'Cli creates sub server folder with sub server.css, component file, and testing file', 'duration': 51.536, 'max_score': 17047.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY17047778.jpg'}, {'end': 17188.126, 'src': 'embed', 'start': 17146.959, 'weight': 1, 'content': [{'end': 17148.819, 'text': 'So that was about components for now.', 'start': 17146.959, 'duration': 1.86}, {'end': 17152.22, 'text': "So it's time for our first assignment.", 'start': 17149.259, 'duration': 2.961}, {'end': 17163.157, 'text': 'Okay guys, so that is how you use and create components using the angular CLI now coming back to the server component that we created.', 'start': 17153.11, 'duration': 10.047}, {'end': 17166.58, 'text': 'I would like to bring to your notice a few different things that you can do.', 'start': 17163.177, 'duration': 3.403}, {'end': 17170.022, 'text': "So first of all, let's go ahead and analyze the selector part.", 'start': 17167.08, 'duration': 2.942}, {'end': 17179.781, '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': 17170.735, 'duration': 9.046}, {'end': 17184.143, 'text': 'Now when we say app server like this out here, this could be anything.', 'start': 17180.301, 'duration': 3.842}, {'end': 17185.104, 'text': 'This could be a property.', 'start': 17184.163, 'duration': 0.941}, {'end': 17188.126, 'text': 'This could be a class or this could be an HTML element to for now.', 'start': 17185.144, 'duration': 2.982}], 'summary': 'Introduction to creating and using components with angular cli, focusing on the selector part.', 'duration': 41.167, 'max_score': 17146.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY17146959.jpg'}, {'end': 17792.12, 'src': 'embed', 'start': 17765.22, 'weight': 3, 'content': [{'end': 17770.644, 'text': 'So suppose you click a button on a screen and you want to take some action according to that,', 'start': 17765.22, 'duration': 5.424}, {'end': 17776.748, 'text': 'or you are retrieving some information from a calculation or from a server and you want to output that on a screen.', 'start': 17770.644, 'duration': 6.104}, {'end': 17779.63, 'text': 'Well, you do that with the help of data binding.', 'start': 17777.228, 'duration': 2.402}, {'end': 17787.336, 'text': 'Now, there are two types of data binding The first one is string interpolation and second one is property binding.', 'start': 17780.11, 'duration': 7.226}, {'end': 17792.12, 'text': 'So this is the way of you outputting something onto the screen.', 'start': 17787.956, 'duration': 4.164}], 'summary': 'Data binding enables outputting information on a screen, using string interpolation and property binding.', 'duration': 26.9, 'max_score': 17765.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY17765220.jpg'}], 'start': 15775.723, 'title': 'Angular application development', 'summary': 'Covers integrating bootstrap 3 into an angular application, the app loading process, manual creation of angular components, styling components, and data binding. it emphasizes the use of angular cli and demonstrates the process with specific examples.', 'chapters': [{'end': 16124.147, 'start': 15775.723, 'title': 'Integrating external css in angular', 'summary': 'Covers integrating bootstrap 3 into an angular application using npm install command, updating the angular.json file to include the bootstrap css file, and verifying the successful integration by inspecting the page.', 'duration': 348.424, 'highlights': ['Integrating Bootstrap 3 into the Angular application', 'Updating the angular.json file to include the Bootstrap CSS file', 'Verifying the successful integration by inspecting the page']}, {'end': 16452.383, 'start': 16124.847, 'title': 'Angular app loading process', 'summary': 'Discusses the process of loading an angular app, including the use of bootstrap version 3.4.1, the role of the app root element and how components are loaded and recognized, also emphasizing the importance of understanding this workflow for future debugging processes.', 'duration': 327.536, 'highlights': ['The app root element is recognized by Angular based on the selector specified in the app.component.ts file, which then serves the associated HTML, CSS, and TypeScript files, showcasing how an Angular app is loaded onto the screen.', 'The main.ts file serves as the entry point for the application, invoking the app module and subsequently the app component, which are tied into the index.html using the app root selector.', 'Components are described as the building blocks of Angular, forming a tree structure of components that make up the app, akin to the widget tree concept in Flutter.']}, {'end': 16931.593, 'start': 16452.803, 'title': 'Creating angular components manually', 'summary': 'Discusses the manual creation of angular components, including the naming convention, typescript file creation, decorators, and adding components to the app modules typescript file, resulting in successful loading of the components.', 'duration': 478.79, 'highlights': ["The chapter emphasizes the importance of appropriately naming files in building industry-level applications, citing the example of naming the server component file as server.component.HTML, which provides clear information about the file's purpose.", 'The process of creating a TypeScript file for the server component and using the export class and @Component decorator is explained, enabling Angular to recognize the file as a component and ensuring its accessibility throughout the project.', 'The significance of adding the server component to the app modules TypeScript file is highlighted, as it informs Angular about the existence of the component and ensures its successful loading and rendering within the application.']}, {'end': 17146.378, 'start': 16931.593, 'title': 'Angular components and styling', 'summary': 'Explains how to create angular components and style them, emphasizing the ease of using the cli, and the creation of a sub-server component through the cli, simplifying the process of component creation and utilization.', 'duration': 214.785, 'highlights': ['Creation of sub-server component through the CLI', 'Ease of using CLI for component creation', 'Styling components using CSS']}, {'end': 17988.759, 'start': 17146.959, 'title': 'Angular cli components & data binding', 'summary': 'Covers creating and using components with angular cli, including a demonstration of selector usage and the assignment to create three components (red, green, and yellow) with appropriate styling. it also introduces data binding, covering string interpolation and property binding, demonstrated with an example of outputting server status based on variables.', 'duration': 841.8, 'highlights': ['Demonstrated creating and using components with Angular CLI', 'Assignment to create three components with appropriate styling', 'Introduction to data binding, covering string interpolation and property binding']}], 'duration': 2213.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY15775723.jpg', 'highlights': ['Integrating Bootstrap 3 into the Angular application', 'The app root element is recognized by Angular based on the selector specified in the app.component.ts file', 'Demonstrated creating and using components with Angular CLI', 'Introduction to data binding, covering string interpolation and property binding', 'Updating the angular.json file to include the Bootstrap CSS file', 'Components are described as the building blocks of Angular, forming a tree structure of components', 'Creation of sub-server component through the CLI', 'Ease of using CLI for component creation', 'Styling components using CSS', 'The chapter emphasizes the importance of appropriately naming files in building industry-level applications']}, {'end': 19386.805, 'segs': [{'end': 18216.477, 'src': 'embed', 'start': 18186.693, 'weight': 1, 'content': [{'end': 18189.575, 'text': 'We are changing the server status to online or offline.', 'start': 18186.693, 'duration': 2.882}, {'end': 18196.08, 'text': 'Okay So now that we have put in this function we can use that function by calling it in our string interpolation method.', 'start': 18190.215, 'duration': 5.865}, {'end': 18201.985, 'text': 'So just instead of putting a variable we can put in the function and this will change the server status to online.', 'start': 18196.24, 'duration': 5.745}, {'end': 18209.151, 'text': "Now basically what we are doing here is really simple is it's returning a string and it's being converted into a string.", 'start': 18202.765, 'duration': 6.386}, {'end': 18216.477, 'text': 'Okay So now that we have toggled the server status to online and we did that through passing a function in the string interpolation.', 'start': 18209.591, 'duration': 6.886}], 'summary': 'Developed a function to toggle server status, enabling online/offline changes through string interpolation.', 'duration': 29.784, 'max_score': 18186.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY18186693.jpg'}, {'end': 18245.712, 'src': 'embed', 'start': 18219.72, 'weight': 2, 'content': [{'end': 18225.144, 'text': 'So every HTML element has some property or the other these properties Liz can be easily found on MDN.', 'start': 18219.72, 'duration': 5.424}, {'end': 18226.866, 'text': 'That is the Mozilla developer Network.', 'start': 18225.425, 'duration': 1.441}, {'end': 18229.328, 'text': 'So let me just give you an example of a property.', 'start': 18227.246, 'duration': 2.082}, {'end': 18234.646, 'text': "So let's say we had a button to toggle the server status further from offline to online again and again,", 'start': 18230.003, 'duration': 4.643}, {'end': 18238.708, 'text': 'instead of just being toggled from offline to online hard coded into the code.', 'start': 18234.646, 'duration': 4.062}, {'end': 18245.712, 'text': "So let's say we had a button and let's say this said toggle server status, right?", 'start': 18238.968, 'duration': 6.744}], 'summary': 'Html elements have properties, e.g. button to toggle server status.', 'duration': 25.992, 'max_score': 18219.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY18219720.jpg'}, {'end': 18825.801, 'src': 'embed', 'start': 18796.358, 'weight': 3, 'content': [{'end': 18799.361, 'text': "What we can do is let's just copy this out.", 'start': 18796.358, 'duration': 3.003}, {'end': 18803.284, 'text': 'So server PID.', 'start': 18800.942, 'duration': 2.342}, {'end': 18806.267, 'text': 'Is it the server PID? I constantly forget.', 'start': 18803.304, 'duration': 2.963}, {'end': 18807.769, 'text': "It's server PID.", 'start': 18806.487, 'duration': 1.282}, {'end': 18812.033, 'text': "So that's why server PID will be presented and server status.", 'start': 18808.169, 'duration': 3.864}, {'end': 18822.398, 'text': 'So now we basically have a small little server page going on and we have a button that can toggle the server status.', 'start': 18814.793, 'duration': 7.605}, {'end': 18825.801, 'text': 'We have a place where we can input the server name.', 'start': 18822.939, 'duration': 2.862}], 'summary': 'Developing a server page with server pid and status, including a toggle button and server name input.', 'duration': 29.443, 'max_score': 18796.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY18796358.jpg'}, {'end': 19085.492, 'src': 'embed', 'start': 19056.47, 'weight': 0, 'content': [{'end': 19059.592, 'text': "We are going to use single quotes and let's keep it blank for now.", 'start': 19056.47, 'duration': 3.122}, {'end': 19063.114, 'text': 'So now we can say our name which should be displayed out here.', 'start': 19060.112, 'duration': 3.002}, {'end': 19066.642, 'text': 'So basically what we need to do is two-way binding.', 'start': 19063.86, 'duration': 2.782}, {'end': 19067.842, 'text': 'So that is pretty simple.', 'start': 19066.722, 'duration': 1.12}, {'end': 19076.027, 'text': 'We learned that really easily, that we can do this through the ng model and we can bind it to the property of name,', 'start': 19068.343, 'duration': 7.684}, {'end': 19078.408, 'text': 'or rather the variable name that we just created.', 'start': 19076.027, 'duration': 2.381}, {'end': 19085.492, 'text': 'So out here we will have a name and we can just go ahead and start typing now and our name gets typed out here.', 'start': 19078.948, 'duration': 6.544}], 'summary': 'Demonstrating two-way binding using ng model for name input.', 'duration': 29.022, 'max_score': 19056.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY19056470.jpg'}], 'start': 17989.48, 'title': 'String interpolation, function and event binding', 'summary': 'Discusses string interpolation for server information, function creation for toggling server status, property and event binding in typescript, event binding for toggling server status, and two-way binding for displaying and updating server information, including a 2.5 seconds delay and creating a page for input and output. it also covers the assignment solution for two-way data binding to input a first name and adding a reset button with a validation check.', 'chapters': [{'end': 18186.653, 'start': 17989.48, 'title': 'String interpolation and function creation', 'summary': 'Discusses the use of string interpolation to display server information and the creation of a function to toggle server status, with an example of displaying server name, pid, and status, and creating a function to toggle server status.', 'duration': 197.173, 'highlights': ['The chapter discusses the use of string interpolation to display server information, such as server name Apollo with PID 11 offline, and the creation of a function to toggle server status.', 'String interpolation allows variables and functions to return strings that can be displayed between curly braces, with examples of displaying server name, PID, and server status.', 'The function created toggles the server status by setting a status flag and updating the server status based on the flag, demonstrating the logic to toggle server status from offline to online.']}, {'end': 18420.48, 'start': 18186.693, 'title': 'String interpolation, property and event binding', 'summary': 'Demonstrates the implementation of string interpolation, property binding, and event binding in typescript, including enabling a button after 2.5 seconds through property binding and preparing for event binding.', 'duration': 233.787, 'highlights': ['The chapter demonstrates the implementation of string interpolation, property binding, and event binding in TypeScript, including enabling a button after 2.5 seconds through property binding and preparing for event binding.', 'String interpolation is showcased by using a function to change the server status to online, enabling dynamic string generation and manipulation.', 'Property binding is illustrated by creating a button and binding the disabled property to a variable, showcasing the functionality of enabling the button after 2.5 seconds.', 'The process of enabling the button through property binding is detailed, with the use of a constructor function and setTimeout, demonstrating the logic behind property binding.', 'The concept of event binding is introduced as the next topic, indicating the upcoming coverage of binding DOM events to TypeScript logic.']}, {'end': 18903.576, 'start': 18420.981, 'title': 'Event binding and two-way binding', 'summary': 'Covers event binding to toggle server status and two-way binding to display and update server information, with a 2.5 seconds delay for the toggle and the assignment to create a page for input and output using two-way data binding and string interpolation.', 'duration': 482.595, 'highlights': ['The chapter covers event binding to toggle server status', 'Two-way binding to display and update server information', 'Assignment to create a page for input and output using two-way data binding and string interpolation']}, {'end': 19386.805, 'start': 18904.036, 'title': 'Assignment solution: two-way data binding', 'summary': 'Covers the process of creating a page that utilizes two-way data binding to input a first name, including adding a button to reset the name to a blank string and disabling the button if the name field is empty.', 'duration': 482.769, 'highlights': ['The chapter covers the process of creating a page that utilizes two-way data binding to input a first name.', 'Adding a button to reset the name to a blank string and disabling the button if the name field is empty.']}], 'duration': 1397.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY17989480.jpg', 'highlights': ['The chapter covers event binding to toggle server status', 'Two-way binding to display and update server information', 'The process of enabling the button through property binding is detailed, with the use of a constructor function and setTimeout, demonstrating the logic behind property binding', 'String interpolation allows variables and functions to return strings that can be displayed between curly braces, with examples of displaying server name, PID, and server status', 'The function created toggles the server status by setting a status flag and updating the server status based on the flag, demonstrating the logic to toggle server status from offline to online']}, {'end': 20605.935, 'segs': [{'end': 19489.105, 'src': 'embed', 'start': 19426.421, 'weight': 9, 'content': [{'end': 19429.264, 'text': 'Well, it says that there are two kind of directives out here.', 'start': 19426.421, 'duration': 2.843}, {'end': 19433.087, 'text': 'So one is attribute directive and one is a structural directive.', 'start': 19429.524, 'duration': 3.563}, {'end': 19437.431, 'text': 'So an attribute directive changes the appearance or behavior of a DOM element.', 'start': 19433.427, 'duration': 4.004}, {'end': 19441.254, 'text': 'So in short, a directive is basically an instruction to the DOM.', 'start': 19437.931, 'duration': 3.323}, {'end': 19447.579, 'text': 'Now this instruction may be to change the DOM due to some attribute or it could structurally change the DOM too.', 'start': 19441.474, 'duration': 6.105}, {'end': 19449.761, 'text': 'So that is a structural directive.', 'start': 19448.12, 'duration': 1.641}, {'end': 19458.391, 'text': "So structural directives are basically used in places where you want to input a certain, let's say, a division like out here.", 'start': 19450.202, 'duration': 8.189}, {'end': 19464.457, 'text': 'A division is being used with the directive ng-if, and we are outputting hero.name out here.', 'start': 19458.651, 'duration': 5.806}, {'end': 19471.371, 'text': 'So what this is is basically there is an if statement and we will get to what ng if means just in a moment.', 'start': 19465.006, 'duration': 6.365}, {'end': 19479.798, 'text': 'but this is a directive and this has instructions written in a module which we will also get into future lectures about directives,', 'start': 19471.371, 'duration': 8.427}, {'end': 19485.582, 'text': 'where we take a much, much deeper look into what directives are and how custom directives can be built by you.', 'start': 19479.798, 'duration': 5.784}, {'end': 19489.105, 'text': 'But for now, we are just going to understand what a directive does.', 'start': 19485.982, 'duration': 3.123}], 'summary': 'There are attribute and structural directives, altering dom appearance and behavior. structural directives manipulate dom structure, as seen with the example of using ng-if to conditionally display content.', 'duration': 62.684, 'max_score': 19426.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY19426421.jpg'}, {'end': 19579.489, 'src': 'embed', 'start': 19552.797, 'weight': 6, 'content': [{'end': 19557.339, 'text': 'data binding, two-way data binding, directives, everything will be done in much more detail.', 'start': 19552.797, 'duration': 4.542}, {'end': 19561.601, 'text': 'And when we are doing this in detail, we will have an overarching project.', 'start': 19557.799, 'duration': 3.802}, {'end': 19565.203, 'text': 'So we will be building a project through the course of this playlist.', 'start': 19561.781, 'duration': 3.422}, {'end': 19573.126, 'text': 'And by the end you will feel pretty confident that you can go out there and pretty much crack Angular interview job out there,', 'start': 19565.723, 'duration': 7.403}, {'end': 19575.267, 'text': 'because we will be teaching you how to build an app.', 'start': 19573.126, 'duration': 2.141}, {'end': 19579.489, 'text': 'And in the end we will also train you for Angular interview questions.', 'start': 19575.487, 'duration': 4.002}], 'summary': 'In-depth angular training with project building, app development, and interview preparation.', 'duration': 26.692, 'max_score': 19552.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY19552797.jpg'}, {'end': 19804.294, 'src': 'embed', 'start': 19777.415, 'weight': 3, 'content': [{'end': 19781.697, 'text': "So let's toggle this and a new paragraph gets created, which says flag is false.", 'start': 19777.415, 'duration': 4.282}, {'end': 19782.738, 'text': 'Now flag is true.', 'start': 19781.917, 'duration': 0.821}, {'end': 19783.998, 'text': 'Flag is false.', 'start': 19783.278, 'duration': 0.72}, {'end': 19784.778, 'text': 'Flag is true.', 'start': 19784.178, 'duration': 0.6}, {'end': 19785.639, 'text': 'Flag is false.', 'start': 19784.899, 'duration': 0.74}, {'end': 19790.543, 'text': 'So this is a brilliant way to actually show something very conditionally.', 'start': 19786.3, 'duration': 4.243}, {'end': 19799.19, 'text': 'Now I can show you this is a other block that we are actually showing instead of one block being constantly just modified.', 'start': 19790.944, 'duration': 8.246}, {'end': 19800.592, 'text': 'It is a separate block in itself.', 'start': 19799.331, 'duration': 1.261}, {'end': 19802.433, 'text': 'So that is a very important thing to know.', 'start': 19800.652, 'duration': 1.781}, {'end': 19804.294, 'text': "So let's go ahead and do that again.", 'start': 19802.893, 'duration': 1.401}], 'summary': 'Demonstrating conditional toggling with true and false flags for separate blocks.', 'duration': 26.879, 'max_score': 19777.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY19777415.jpg'}, {'end': 19958.322, 'src': 'embed', 'start': 19922.306, 'weight': 0, 'content': [{'end': 19923.106, 'text': 'So what we did?', 'start': 19922.306, 'duration': 0.8}, {'end': 19932.593, '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': 19923.106, 'duration': 9.487}, {'end': 19939.078, 'text': 'So this is how you can dynamically add styles to your elements on your HTML page.', 'start': 19932.753, 'duration': 6.325}, {'end': 19943.261, 'text': 'Now another way to do dynamic styling is with the help of ng class.', 'start': 19939.578, 'duration': 3.683}, {'end': 19949.296, 'text': 'So what we can do out here is we can add a class to an element dynamically.', 'start': 19944.053, 'duration': 5.243}, {'end': 19958.322, 'text': "So let's say we have another H2, and let's say this is just an example of ng class.", 'start': 19949.716, 'duration': 8.606}], 'summary': 'Demonstrated dynamic styling using color and ng class in html.', 'duration': 36.016, 'max_score': 19922.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY19922306.jpg'}, {'end': 20026.734, 'src': 'embed', 'start': 19975.221, 'weight': 1, 'content': [{'end': 19981.564, 'text': 'and now what we have to do is go into the app component css file and create a class called white,', 'start': 19975.221, 'duration': 6.343}, {'end': 19991.608, 'text': 'and this class will basically put a black border border, one px solid black.', 'start': 19981.564, 'duration': 10.044}, {'end': 20001.977, 'text': "it will rather, let's make it a red, and then we want a background color of, let's say, black and we want the font color to go white.", 'start': 19991.608, 'duration': 10.369}, {'end': 20007.241, 'text': 'So this is a bunch of styling that we are adding, which is basically the real reason.', 'start': 20003.078, 'duration': 4.163}, {'end': 20010.923, 'text': 'you use classes in CSS so that you can use a bunch of styling together.', 'start': 20007.241, 'duration': 3.682}, {'end': 20015.666, 'text': "Now that we have created the class, let's go ahead and save all our files.", 'start': 20011.564, 'duration': 4.102}, {'end': 20018.528, 'text': "And let's go ahead and see what it looks like.", 'start': 20017.047, 'duration': 1.481}, {'end': 20020.229, 'text': 'So this is what it looks like.', 'start': 20018.969, 'duration': 1.26}, {'end': 20022.191, 'text': 'This is just an example of ng class.', 'start': 20020.269, 'duration': 1.922}, {'end': 20025.653, 'text': 'Now when this is set to false, the class is removed.', 'start': 20022.551, 'duration': 3.102}, {'end': 20026.734, 'text': 'Let me just show that to you.', 'start': 20025.693, 'duration': 1.041}], 'summary': "Creating a css class 'white' with red border, black background, and white font color for ng class example.", 'duration': 51.513, 'max_score': 19975.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY19975221.jpg'}, {'end': 20268.387, 'src': 'embed', 'start': 20238.966, 'weight': 13, 'content': [{'end': 20241.912, 'text': "So this is gonna be names, Let's go ahead and save that.", 'start': 20238.966, 'duration': 2.946}, {'end': 20244.334, 'text': "Let's see that if it displays names.", 'start': 20242.453, 'duration': 1.881}, {'end': 20246.955, 'text': 'So we have names, Arya, Rohit, and Upasana.', 'start': 20244.654, 'duration': 2.301}, {'end': 20250.717, 'text': "So let's say someone like Rahul also joins the class.", 'start': 20247.035, 'duration': 3.682}, {'end': 20254.98, 'text': 'And we can say submit student and Rahul is now added to the student roster.', 'start': 20251.398, 'duration': 3.582}, {'end': 20259.202, 'text': 'Okay, so this is how you can basically use ng-for.', 'start': 20255.78, 'duration': 3.422}, {'end': 20268.387, 'text': 'We have one list item and basically it is going around and circulating through everything that is there in this array just out here.', 'start': 20259.582, 'duration': 8.805}], 'summary': 'Using ng-for to display names arya, rohit, upasana and adding rahul to the student roster.', 'duration': 29.421, 'max_score': 20238.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY20238966.jpg'}, {'end': 20312.852, 'src': 'embed', 'start': 20284.355, 'weight': 7, 'content': [{'end': 20287.357, 'text': 'So let me just go ahead and type out the instructions for your assignment.', 'start': 20284.355, 'duration': 3.002}, {'end': 20290.418, 'text': 'Okay guys, so this is your last assignment.', 'start': 20288.237, 'duration': 2.181}, {'end': 20297.369, 'text': 'I will again remind you that for assignments, you have to pause the screen and try and do the assignment on your own.', 'start': 20291.307, 'duration': 6.062}, {'end': 20302.53, 'text': 'And then you can compare your solution with the code along part that comes after the assignment.', 'start': 20298.369, 'duration': 4.161}, {'end': 20306.971, 'text': 'So for assignment number three, we have create a button to toggle a paragraph display.', 'start': 20303.07, 'duration': 3.901}, {'end': 20308.791, 'text': 'The paragraph could be saying anything.', 'start': 20307.251, 'duration': 1.54}, {'end': 20312.852, 'text': 'So after that, we have to log the number of times the button was clicked.', 'start': 20309.451, 'duration': 3.401}], 'summary': 'Last assignment: create button to toggle paragraph display & log button clicks.', 'duration': 28.497, 'max_score': 20284.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY20284355.jpg'}, {'end': 20351.701, 'src': 'embed', 'start': 20324.418, 'weight': 4, 'content': [{'end': 20328.061, 'text': 'What we have to do out here is basically get rid of everything that is here.', 'start': 20324.418, 'duration': 3.643}, {'end': 20332.924, 'text': "And let's first create a button that says toggle display.", 'start': 20328.841, 'duration': 4.083}, {'end': 20338.569, 'text': 'And then we can add a paragraph that says lorem ipsum.', 'start': 20333.925, 'duration': 4.644}, {'end': 20341.751, 'text': 'So lorem ipsum is just a random paragraph.', 'start': 20338.709, 'duration': 3.042}, {'end': 20343.853, 'text': "So let's go ahead and see this.", 'start': 20342.612, 'duration': 1.241}, {'end': 20348.356, 'text': 'So this says toggle display, but toggle display at this moment does nothing.', 'start': 20344.633, 'duration': 3.723}, {'end': 20351.701, 'text': 'So we have to put a functionality into the click.', 'start': 20348.959, 'duration': 2.742}], 'summary': 'Create button to toggle display and add lorem ipsum paragraph.', 'duration': 27.283, 'max_score': 20324.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY20324418.jpg'}], 'start': 19387.685, 'title': 'Angular directives and usage', 'summary': 'Provides an overview of angular directives, including attribute and structural directives, their purpose, and the built-in directives such as ng-if, ng-else, and ng-for. it explains the usage of ngif directive for conditional rendering, explores ngif, ngstyle, and ngclass for dynamic styling and conditional rendering, and demonstrates creating a student roster and button toggle with ngif and ngfor. it also hints at an upcoming project to solidify learning and prepare for angular job interviews.', 'chapters': [{'end': 19594.817, 'start': 19387.685, 'title': 'Angular directives overview', 'summary': 'Provides an overview of angular directives, including attribute and structural directives, their purpose, and the built-in directives such as ng-if, ng-else, and ng-for, as well as a glimpse into future lectures on creating custom directives. it also hints at an upcoming project to solidify learning and prepare for angular job interviews.', 'duration': 207.132, 'highlights': ['The chapter provides an overview of Angular directives, including attribute and structural directives, their purpose, and the built-in directives such as ng-if, ng-else, and ng-for, as well as a glimpse into future lectures on creating custom directives. It also hints at an upcoming project to solidify learning and prepare for Angular job interviews.', 'The solution to assignment number two involves enabling a button upon typing, allowing to click and reset the input field, indicating practical application of concepts.', 'The chapter also foreshadows a comprehensive exploration of components, data binding, two-way data binding, and directives, culminating in building a project and preparing for Angular job interviews.']}, {'end': 19824.186, 'start': 19595.457, 'title': 'Angular ngif directive', 'summary': 'Explains the usage of ngif directive in angular for conditional rendering of elements based on a variable, showcasing the toggling of flag variable and its effect on the displayed content.', 'duration': 228.729, 'highlights': ['The ngIf directive in Angular is used to conditionally render elements based on a variable, allowing for structural changes in the UI.', 'The chapter demonstrates the use of a toggle button to modify the flag variable, dynamically altering the displayed content.', "A local reference, 'else block', is utilized within the ngTemplate to handle the condition when the flag is false, showcasing the versatility of conditional rendering."]}, {'end': 20071.365, 'start': 19824.186, 'title': 'Angular inbuilt directives', 'summary': 'Explores the usage of ngif, ngstyle, and ngclass in angular, demonstrating dynamic styling and conditional rendering, and concludes with a brief introduction to ngfor for iterating through arrays.', 'duration': 247.179, 'highlights': ["The ngStyle directive in Angular allows for dynamic styling by using expressions to set properties like color based on conditions, demonstrated by changing the color of an element to red or green based on a flag's true or false value.", 'The usage of ngClass in Angular is exemplified by dynamically adding and removing a class based on a condition, showcasing how classes with multiple styles can be applied based on the outcome of a function.', 'The tutorial briefly introduces ngFor, demonstrating its use for iterating through an array, providing a practical example of how to use this directive in Angular development.']}, {'end': 20302.53, 'start': 20071.905, 'title': 'Angular student roster', 'summary': 'Explains how to create a student roster using angular, including adding names to the roster and displaying them using ng-for, with examples of adding new students and using ng-if, ng-if-else, and dynamic styling.', 'duration': 230.625, 'highlights': ['Creating a student roster using Angular', 'Adding names to the student roster', 'Using ng-if, ng-if-else, and dynamic styling']}, {'end': 20605.935, 'start': 20303.07, 'title': 'Button toggle and click counter', 'summary': 'Covers creating a button to toggle paragraph display, logging the number of button clicks, and applying a specific style to the log after the fifth click using ngif, ngfor, and ngstyles.', 'duration': 302.865, 'highlights': ['Creating a button to toggle paragraph display and logging button clicks', 'Implementing functionality to log the number of times the button was clicked', 'Applying a specific style to the log after the fifth click using ngStyles']}], 'duration': 1218.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY19387685.jpg', 'highlights': ['The chapter provides an overview of Angular directives and their purpose', 'The ngIf directive in Angular is used to conditionally render elements', 'The ngStyle directive allows for dynamic styling based on conditions', 'Demonstrates creating a student roster and button toggle with ngIf and ngFor', 'Foreshadows a comprehensive exploration of components and data binding', 'Enabling a button upon typing, allowing to click and reset the input field', 'Demonstrates the use of a toggle button to modify the flag variable', "A local reference, 'else block', is utilized within the ngTemplate", 'The usage of ngClass in Angular is exemplified by dynamically adding and removing a class', 'Briefly introduces ngFor, demonstrating its use for iterating through an array', 'Creating a student roster using Angular', 'Adding names to the student roster', 'Implementing functionality to log the number of times the button was clicked', 'Applying a specific style to the log after the fifth click using ngStyles']}, {'end': 22576.206, 'segs': [{'end': 20770.485, 'src': 'embed', 'start': 20742.655, 'weight': 6, 'content': [{'end': 20749.261, 'text': 'So how exactly is this happening? Well, this is the magic of ReactJS and that is what we are going to learn today.', 'start': 20742.655, 'duration': 6.606}, {'end': 20755.668, 'text': 'But here some of you might ask that why React.js when there are so many other frameworks available out there?', 'start': 20749.921, 'duration': 5.747}, {'end': 20759.272, 'text': "To understand this, let's take up Facebook as example.", 'start': 20756.188, 'duration': 3.084}, {'end': 20764.758, 'text': "So let's go back to the year of 2009-2010 when Facebook used to look somewhat like this.", 'start': 20759.833, 'duration': 4.925}, {'end': 20770.485, 'text': 'If you guys remember, during this time, you had to repeatedly reload the page for new updates.', 'start': 20765.379, 'duration': 5.106}], 'summary': 'Learn the magic of reactjs, as exemplified by facebook in 2009-2010.', 'duration': 27.83, 'max_score': 20742.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY20742655.jpg'}, {'end': 20849.95, 'src': 'embed', 'start': 20823.999, 'weight': 8, 'content': [{'end': 20829.403, 'text': 'What this DOM did was it can dynamically add or remove elements from a web page at the backend.', 'start': 20823.999, 'duration': 5.404}, {'end': 20834.665, 'text': 'But each time it did that, the browser had to create a new DOM object for the same web page.', 'start': 20830.183, 'duration': 4.482}, {'end': 20839.006, 'text': 'This led to more memory consumption, which ultimately made our application slow.', 'start': 20835.085, 'duration': 3.921}, {'end': 20841.907, 'text': "Let's take another example to understand this.", 'start': 20839.746, 'duration': 2.161}, {'end': 20845.488, 'text': 'Suppose this is our application in which we have four blocks.', 'start': 20842.487, 'duration': 3.001}, {'end': 20846.989, 'text': 'One, two, three, four.', 'start': 20845.868, 'duration': 1.121}, {'end': 20849.95, 'text': 'Suppose there is a change in block one from the backend.', 'start': 20847.429, 'duration': 2.521}], 'summary': 'Dynamic dom manipulation led to increased memory consumption and application slowness.', 'duration': 25.951, 'max_score': 20823.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY20823999.jpg'}, {'end': 21460.515, 'src': 'embed', 'start': 21432.385, 'weight': 4, 'content': [{'end': 21438.009, 'text': 'Now inside this class I will be adding all the functions and the attributes that my class is going to do.', 'start': 21432.385, 'duration': 5.624}, {'end': 21444.574, 'text': 'So now each component has one render function which returns an HTML representation.', 'start': 21438.85, 'duration': 5.724}, {'end': 21449.397, 'text': "So here we'll add the render function which will contain what we want to display.", 'start': 21445.234, 'duration': 4.163}, {'end': 21456.671, 'text': 'So since we are going to return the hello world just, So here, first let me just create the render function.', 'start': 21449.997, 'duration': 6.674}, {'end': 21460.515, 'text': 'So render, this is our function.', 'start': 21457.372, 'duration': 3.143}], 'summary': 'Class includes render function for html representation.', 'duration': 28.13, 'max_score': 21432.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY21432385.jpg'}, {'end': 21661.153, 'src': 'embed', 'start': 21617.702, 'weight': 0, 'content': [{'end': 21620.884, 'text': "It's an XMLHTML-like syntax that is used by React.", 'start': 21617.702, 'duration': 3.182}, {'end': 21627.689, 'text': 'This syntax extends the ECMAScript so that the XMLHTML-like text can coexist with JavaScript React code.', 'start': 21621.404, 'duration': 6.285}, {'end': 21636.696, 'text': 'This syntax is used by the preprocessors to transform the HTML-like syntax that is found in JavaScript files into standard JavaScript objects.', 'start': 21628.311, 'duration': 8.385}, {'end': 21643.961, 'text': 'With this file, instead of just embedding the JavaScript into HTML, we can embed the HTML into the JavaScript as well.', 'start': 21637.357, 'duration': 6.604}, {'end': 21649.324, 'text': "This makes the HTML code easy and also boosts the JavaScript's performance.", 'start': 21644.481, 'duration': 4.843}, {'end': 21652.326, 'text': 'Moreover, it makes our application robust.', 'start': 21649.784, 'duration': 2.542}, {'end': 21655.588, 'text': "Let's now see how this JSX can be used.", 'start': 21653.006, 'duration': 2.582}, {'end': 21661.153, 'text': 'Well the first is the regular use of JSX which we already saw in our Hello World program.', 'start': 21656.36, 'duration': 4.793}], 'summary': 'Jsx is a syntax used by react to embed html into javascript, making code easy, boosting performance, and increasing application robustness.', 'duration': 43.451, 'max_score': 21617.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY21617702.jpg'}, {'end': 22368.562, 'src': 'embed', 'start': 22341.089, 'weight': 1, 'content': [{'end': 22347.473, 'text': 'Using the state, it leads to a dynamic and an interactive components which adjust themselves according to the changes.', 'start': 22341.089, 'duration': 6.384}, {'end': 22352.636, 'text': "So let's now see how the states can be assigned with the help of the demo.", 'start': 22348.433, 'duration': 4.203}, {'end': 22359.88, 'text': "So since we have already used the props, I'll use this footer to show the state.", 'start': 22354.317, 'duration': 5.563}, {'end': 22368.562, 'text': 'Now to access a state, First we need to assign one initial state to the component because by default its state will be set to null.', 'start': 22360.78, 'duration': 7.782}], 'summary': 'Demonstrating dynamic components adjusting to state changes in demo.', 'duration': 27.473, 'max_score': 22341.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY22341089.jpg'}], 'start': 20607.762, 'title': 'Reactjs and angular basics', 'summary': 'Covers the basics and functionalities of angular, including data binding, property binding, event binding, and inbuilt directives, as well as introduces reactjs as a front-end library. it explains how reactjs revolutionized ui development, reducing page reloading, using virtual dom, and one-way data binding, and covers adding react dependencies, jsx, components, props, states, and react router.', 'chapters': [{'end': 20704.158, 'start': 20607.762, 'title': 'Angular basics & introduction to reactjs', 'summary': 'Covers the basics of angular, including its features and functionalities such as data binding, property binding, event binding, and inbuilt directives, as well as the introduction to reactjs as a front-end library developed by facebook.', 'duration': 96.396, 'highlights': ['The chapter covers the basics of Angular, including its features and functionalities such as data binding, property binding, event binding, and inbuilt directives.', 'We learned about the differences brought about in the industry by Angular 8 and the process of installation and project setup.', 'The tutorial also introduces ReactJS as a front-end library developed by Facebook, providing an overview of its usage and application.']}, {'end': 21259.015, 'start': 20704.679, 'title': 'Reactjs: revolutionizing ui development', 'summary': 'Explains how reactjs revolutionized ui development, reducing page reloading, using virtual dom for faster updates, and one-way data binding for better control. it also outlines the major advantages of reactjs, such as improved performance, server-side rendering, and easy integration with other frameworks.', 'duration': 554.336, 'highlights': ['ReactJS uses virtual DOM for faster updates, reducing the need for entire page reloading.', 'One-way data binding in ReactJS provides better control over data flow and loosely coupled components.', 'Server-side rendering in ReactJS allows pre-rendering of components, leading to faster page loads.', 'ReactJS offers major advantages including improved performance, readability with JSX, and easy integration with other frameworks like Meteor or AngularJS.']}, {'end': 21856.904, 'start': 21259.576, 'title': 'Adding react dependencies and using jsx', 'summary': 'Covers adding react dependencies from online repositories and local downloads, creating an html file with dependencies, creating a react jsx file, and understanding jsx, components, props, states, component lifecycle, events, references, keys, and react router.', 'duration': 597.328, 'highlights': ['The chapter covers adding React dependencies from online repositories and local downloads, creating an HTML file with dependencies, creating a React JSX file, and understanding JSX, components, props, states, component lifecycle, events, references, keys, and React Router.', 'The JSX is a type of syntax used by React that extends ECMAScript to allow HTML-like text to coexist with JavaScript React code.', 'The chapter demonstrates how to use JSX in different forms, including regular use, nested elements, specifying attributes, and embedding JavaScript into JSX.']}, {'end': 22198.154, 'start': 21857.565, 'title': 'React components and props', 'summary': 'Discusses react components and props, emphasizing the concept that everything in react is a component and the ability to pass data from parent to child components using props. it also explains stateful and stateless components and their roles in managing component states.', 'duration': 340.589, 'highlights': ['Everything in React is a component, and each component returns a DOM object, resulting in splitting the entire UI into various independent and reusable pieces.', 'Components in React.js can be in two forms: stateful and stateless components.', 'Stateful components store information about the component state and can change the states, receiving information from stateless components, while stateless components calculate the internal state of a component and provide referential transparency.', 'Props function similar to HTML attributes and are read-only components that provide configurational values, allowing data to be passed from parent component to child component.']}, {'end': 22576.206, 'start': 22199.065, 'title': 'React components & props', 'summary': 'Covers the concept of react components, props, and states. it demonstrates how props are passed from parent to child components, and how states are used to store information that can change over time, resulting in dynamic and interactive components.', 'duration': 377.141, 'highlights': ["The chapter demonstrates passing props from a parent component to a child component, showcasing the change in name prop from 'Alex' to 'Max', and explains how the child component displays the passed prop values, illustrating the working of props in React components.", 'It explains the concept of states in React components, emphasizing that states are used to store information or data about the components which can change over time due to user or system events, leading to dynamic and interactive components.', 'It provides a detailed example of setting and accessing the initial state in a component, showcasing the use of getInitialState and this.state to display and refer to the state values, and further demonstrates changing the state using setTimeout and this.setState, resulting in the dynamic update of state values after a specified time.']}], 'duration': 1968.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY20607762.jpg', 'highlights': ['ReactJS revolutionized UI development, reducing page reloading and using virtual DOM', 'Angular basics cover data binding, property binding, event binding, and inbuilt directives', 'ReactJS offers improved performance, readability with JSX, and easy integration with other frameworks', 'React components split the entire UI into independent and reusable pieces', 'One-way data binding in React provides better control over data flow and loosely coupled components', 'Server-side rendering in React allows pre-rendering of components, leading to faster page loads', 'React components can be stateful or stateless, with props functioning similar to HTML attributes', 'JSX extends ECMAScript to allow HTML-like text to coexist with JavaScript React code', 'States in React components store information or data that can change over time due to user or system events', 'Demonstrates setting and accessing the initial state in a component, and changing the state dynamically']}, {'end': 25031.976, 'segs': [{'end': 22795.431, 'src': 'embed', 'start': 22733.713, 'weight': 1, 'content': [{'end': 22737.456, 'text': "So if you don't wish to render anything, simply return null or false.", 'start': 22733.713, 'duration': 3.743}, {'end': 22742.019, 'text': 'Then we have our final method in this phase, that is the componentDidMount method.', 'start': 22738.136, 'duration': 3.883}, {'end': 22747.74, 'text': 'This method will get called immediately after a component renders and gets placed on the DOM.', 'start': 22742.759, 'duration': 4.981}, {'end': 22754.981, 'text': 'At this point, you can safely perform any DOM querying operations without worrying about whether your component has made it or not.', 'start': 22748.2, 'duration': 6.781}, {'end': 22762.943, 'text': 'Now one thing you need to remember here is that except for this render method, all of these lifecycle methods can fire only once.', 'start': 22755.561, 'duration': 7.382}, {'end': 22765.503, 'text': 'So this concludes our initial phase.', 'start': 22763.343, 'duration': 2.16}, {'end': 22769.064, 'text': 'Then we can move on to our next phase, that is the updating phase.', 'start': 22766.123, 'duration': 2.941}, {'end': 22777.144, 'text': 'So after the components get added to the DOM, they can potentially update and re-render only when a prop or a state change occurs.', 'start': 22769.781, 'duration': 7.363}, {'end': 22781.566, 'text': 'During this time, a different collection of lifecycle methods gets called.', 'start': 22777.964, 'duration': 3.602}, {'end': 22784.167, 'text': "Let's see what happens when a state changes.", 'start': 22782.106, 'duration': 2.061}, {'end': 22788.868, 'text': 'Whenever a state change occurs, the component will call its render method again.', 'start': 22784.647, 'duration': 4.221}, {'end': 22795.431, 'text': 'Now any component that is relying on the output of this component will also call their render function again.', 'start': 22789.449, 'duration': 5.982}], 'summary': 'Componentdidmount method gets called after rendering, allowing safe dom querying operations. lifecycle methods can fire only once. components can update and re-render upon prop or state change.', 'duration': 61.718, 'max_score': 22733.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY22733713.jpg'}, {'end': 22955.433, 'src': 'embed', 'start': 22928.758, 'weight': 2, 'content': [{'end': 22932.501, 'text': 'Now this is the phase when the component is destroyed and removed from the DOM.', 'start': 22928.758, 'duration': 3.743}, {'end': 22938.145, 'text': 'There is only one lifecycle method over here that is the component will unmount method.', 'start': 22933.121, 'duration': 5.024}, {'end': 22945.408, 'text': 'you can perform any cleanup related tasks here, such as removing the event listener, stopping the timers, et cetera.', 'start': 22938.905, 'duration': 6.503}, {'end': 22950.51, 'text': 'After this method gets called, your component is completely removed from the DAW.', 'start': 22946.348, 'duration': 4.162}, {'end': 22955.433, 'text': "So here we are done with all the phases of the component's lifecycle along with their methods.", 'start': 22951.051, 'duration': 4.382}], 'summary': 'Component lifecycle: component unmount method removes component from dom.', 'duration': 26.675, 'max_score': 22928.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY22928758.jpg'}, {'end': 23004.934, 'src': 'embed', 'start': 22974.407, 'weight': 0, 'content': [{'end': 22981.391, 'text': 'Handling these events are very similar to handling the events in DOM, but here are some syntactical differences.', 'start': 22974.407, 'duration': 6.984}, {'end': 22986.614, 'text': 'In React, the events are named using the camel case instead of using the lower case.', 'start': 22982.251, 'duration': 4.363}, {'end': 22991.156, 'text': 'Moreover, in React, the events are passed as functions rather than the strings.', 'start': 22986.974, 'duration': 4.182}, {'end': 22996.186, 'text': 'Here the event argument contains a set of properties which are specific to an event.', 'start': 22992.062, 'duration': 4.124}, {'end': 23004.934, 'text': "What I'm trying to say is that each event type contains its own properties and behavior which can be accessed only via its event handler.", 'start': 22996.906, 'duration': 8.028}], 'summary': 'React events use camel case, functions, and specific properties for event handling.', 'duration': 30.527, 'max_score': 22974.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY22974407.jpg'}, {'end': 23822.229, 'src': 'embed', 'start': 23793.541, 'weight': 6, 'content': [{'end': 23798.525, 'text': 'So for that, what we need to do is, as you know, to display it on the web page.', 'start': 23793.541, 'duration': 4.984}, {'end': 23803.329, 'text': 'we have to use the innerHTML and for that we have to get the span by its ID.', 'start': 23798.525, 'duration': 4.804}, {'end': 23808.413, 'text': 'So get element by ID, and the ID name is dispName.', 'start': 23803.689, 'duration': 4.724}, {'end': 23818.788, 'text': "DispName, and then we'll say dot, inner HTML and here we want to display the name.", 'start': 23809.514, 'duration': 9.274}, {'end': 23822.229, 'text': 'Okay so this thing is done here.', 'start': 23818.808, 'duration': 3.421}], 'summary': 'Using innerhtml to display name on web page using dispname id.', 'duration': 28.688, 'max_score': 23793.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY23793541.jpg'}, {'end': 23964.933, 'src': 'embed', 'start': 23933.204, 'weight': 9, 'content': [{'end': 23937.205, 'text': 'They are especially helpful when we are working with dynamically created components.', 'start': 23933.204, 'duration': 4.001}, {'end': 23942.866, 'text': 'Assigning the key value will help you identify the components uniquely even after they have changed.', 'start': 23937.865, 'duration': 5.001}, {'end': 23948.627, 'text': 'As you can see from this diagram, here we have two components with different key values.', 'start': 23944.346, 'duration': 4.281}, {'end': 23952.268, 'text': 'One with key 101 and one with key 102.', 'start': 23949.167, 'duration': 3.101}, {'end': 23953.928, 'text': 'Now these are rendered for the first time.', 'start': 23952.268, 'duration': 1.66}, {'end': 23956.629, 'text': 'So the React will render them without any problem.', 'start': 23954.448, 'duration': 2.181}, {'end': 23964.933, 'text': "But next time when we try to render them, here the component one's key value is same, whereas component two's key value has changed.", 'start': 23957.267, 'duration': 7.666}], 'summary': 'Assigning key values to components ensures unique identification, as demonstrated with components having key values 101 and 102.', 'duration': 31.729, 'max_score': 23933.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY23933204.jpg'}, {'end': 24750.22, 'src': 'embed', 'start': 24718.851, 'weight': 4, 'content': [{'end': 24721.493, 'text': 'So as you can see, our application is perfectly working.', 'start': 24718.851, 'duration': 2.642}, {'end': 24726.917, 'text': "So I hope I was able to make it clear how it's working, how the codes are working.", 'start': 24722.053, 'duration': 4.864}, {'end': 24729.959, 'text': "So now I'll conclude this tutorial here.", 'start': 24727.617, 'duration': 2.342}, {'end': 24738.998, 'text': 'Hello everyone and welcome to the Node.js tutorial from Edureka.', 'start': 24735.597, 'duration': 3.401}, {'end': 24741.518, 'text': "I'm Ravi Vailyat and I'm your trainer for today.", 'start': 24739.538, 'duration': 1.98}, {'end': 24744.299, 'text': "Let's check out the agenda for today.", 'start': 24742.258, 'duration': 2.041}, {'end': 24750.22, 'text': 'So, if we see the agenda, we would see that what Node.js is.', 'start': 24745.119, 'duration': 5.101}], 'summary': 'Introduction to node.js tutorial by ravi vailyat from edureka.', 'duration': 31.369, 'max_score': 24718.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY24718851.jpg'}], 'start': 22576.566, 'title': 'React and node.js', 'summary': 'Covers react lifecycle and events, react bulb button creation, handling react events and refs, react.js concepts and application, and provides an overview of node.js, including its features, architecture, and comparison with traditional server architecture.', 'chapters': [{'end': 23047.934, 'start': 22576.566, 'title': 'React lifecycle and events', 'summary': 'Covers the react lifecycle, including the initial phase, updating phase, props change phase, and unmounting phase, along with their respective methods, as well as the handling of events in react, emphasizing the syntactical differences and memory consumption benefits. it also provides an overview of the automatic update of the dom in react, the speed improvement of applications, and the division of the lifecycle into four phases.', 'duration': 471.368, 'highlights': ['React lifecycle: initial phase, updating phase, props change phase, and unmounting phase', 'Automatic update of DOM in React for speed improvement of applications', 'Handling of events in React, emphasizing syntactical differences and memory consumption benefits']}, {'end': 23377.453, 'start': 23048.335, 'title': 'React bulb button', 'summary': 'Describes the process of creating a react component that controls the state of a bulb with a button click and displays corresponding images, using functions to change the status from false to true and true to false on each click.', 'duration': 329.118, 'highlights': ["The function 'switch' changes the status of the bulb from false to true and true to false on each click, using the 'setState' method to update the state of the bulb. This ensures that the status changes on every click, with the current status being reversed.", "The code utilizes the 'render' function to display the images of the bulb based on its status, using a conditional operator to determine which image to display. When the status is false, it displays the first image, and when true, it displays the second image.", "The chapter also demonstrates the process of importing and displaying images in a React component, by creating a directory named 'image' and pasting the images into it, then referring to the images using their respective file paths."]}, {'end': 23910.338, 'start': 23378.173, 'title': 'React events and refs', 'summary': 'Covers creating events in react, such as changing an image based on conditions and creating a reference to modify child components without re-rendering, along with practical examples of using events and references.', 'duration': 532.165, 'highlights': ['Creating events in React', 'Using references in React']}, {'end': 24718.131, 'start': 23910.918, 'title': 'React.js concepts and application', 'summary': 'Covers the concepts of refs, keys, and router in react.js, highlighting their importance in identifying components, handling dynamic creation, and managing application routing and state, as well as providing a detailed walkthrough of creating a react.js application for a facebook comment system.', 'duration': 807.213, 'highlights': ['Router in React is a powerful routing library that keeps the entire URL in sync with the data being displayed, handles nested views and resolution efficiently, and maintains a standardized structure and behavior of the application.', 'Keys in React help identify components uniquely, especially when working with dynamically created components, ensuring that components can be rendered even after they have changed.', 'The concept of refs in React is useful for triggering imperative animations and integrating with third-party DOM libraries, providing a clear understanding of how to utilize refs in React.']}, {'end': 25031.976, 'start': 24718.851, 'title': 'Node.js tutorial overview', 'summary': 'Discusses an overview of node.js, including its features, architecture, and comparison with traditional server architecture, highlighting its key feature of running on a single thread and processing requests in parallel, and its open source, asynchronous, and highly scalable nature.', 'duration': 313.125, 'highlights': ['Node.js runs on a single thread and still processes requests in parallel by going through an event loop, which is not resource intensive.', 'Node.js is open source, simple, fast, asynchronous, highly scalable, and works on a microservice architecture, facilitating data-intensive applications.', 'Traditional server architecture involves managing client requests with separate threads, while Node.js architecture runs on a single thread and processes requests in parallel, making it less resource intensive.']}], 'duration': 2455.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY22576566.jpg', 'highlights': ['Router in React efficiently handles nested views and maintains application behavior', 'Node.js runs on a single thread and processes requests in parallel through an event loop', 'Automatic update of DOM in React improves application speed', 'Node.js is open source, fast, asynchronous, and highly scalable', 'React lifecycle includes initial, updating, props change, and unmounting phases', 'Node.js works on a microservice architecture for data-intensive applications', 'Keys in React uniquely identify components, ensuring rendering after changes', 'Handling events in React emphasizes syntactical differences and memory consumption benefits', 'Using refs in React for imperative animations and integration with third-party DOM libraries', 'Creating events in React and importing/displaying images in a React component']}, {'end': 25793.326, 'segs': [{'end': 25355.75, 'src': 'embed', 'start': 25327.229, 'weight': 2, 'content': [{'end': 25331.915, 'text': "It'll have all the latest features, but it is prone to be erroneous at some time.", 'start': 25327.229, 'duration': 4.686}, {'end': 25335.959, 'text': "So, you know, generally for development, you don't use this one, but you use this one.", 'start': 25332.015, 'duration': 3.944}, {'end': 25341.426, 'text': "But say if you want to check out the new features, you can also install the current release, but we'll always go with the LTS.", 'start': 25336.38, 'duration': 5.046}, {'end': 25343.206, 'text': 'And I already have this installed.', 'start': 25341.866, 'duration': 1.34}, {'end': 25348.208, 'text': 'You know, clicking on this will allow you to download the MSI file, that is, the setup file,', 'start': 25343.226, 'duration': 4.982}, {'end': 25351.989, 'text': 'and then you can just double click on that setup and just install it on Windows.', 'start': 25348.208, 'duration': 3.781}, {'end': 25355.75, 'text': 'And in Mac as well, the setup is really simple.', 'start': 25352.469, 'duration': 3.281}], 'summary': 'Prefer the lts release for stability. easy installation on windows and mac.', 'duration': 28.521, 'max_score': 25327.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY25327229.jpg'}, {'end': 25432.848, 'src': 'embed', 'start': 25406.832, 'weight': 3, 'content': [{'end': 25411.915, 'text': 'So if we just hit enter, I think dot is something that is not to be done.', 'start': 25406.832, 'duration': 5.083}, {'end': 25419.319, 'text': "Right So this would ask you certain questions like what is the package name? Let's say I want the same package name as task manager.", 'start': 25412.415, 'duration': 6.904}, {'end': 25422.161, 'text': 'I want the version to be one.', 'start': 25420.099, 'duration': 2.062}, {'end': 25424.202, 'text': 'Okay, the description.', 'start': 25422.441, 'duration': 1.761}, {'end': 25429.005, 'text': "let's say this is a task manager project.", 'start': 25424.202, 'duration': 4.803}, {'end': 25432.848, 'text': 'all right, entry point would not be significant at this point of time.', 'start': 25429.005, 'duration': 3.843}], 'summary': "Setting up a package with name 'task manager', version 1, and description for a project.", 'duration': 26.016, 'max_score': 25406.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY25406832.jpg'}, {'end': 25731.152, 'src': 'embed', 'start': 25686.474, 'weight': 0, 'content': [{'end': 25690.917, 'text': 'This is how you create a variable that we already saw and then there are operators.', 'start': 25686.474, 'duration': 4.443}, {'end': 25696.321, 'text': 'Now, as I said like there is something that is already similar to all the other programming languages.', 'start': 25691.177, 'duration': 5.144}, {'end': 25699.302, 'text': 'variables are one of them, operators as well.', 'start': 25696.861, 'duration': 2.441}, {'end': 25704.104, 'text': 'however, there is one operator that is pretty unique, and that is the triple equal to sign.', 'start': 25699.302, 'duration': 4.802}, {'end': 25715.148, 'text': "so say, for example, if i go for something like this var, let's say h1 is equal to 30 and var h2 is equal to 30.", 'start': 25704.104, 'duration': 11.044}, {'end': 25718.55, 'text': "and then let's say var, result is equal to h1.", 'start': 25715.148, 'duration': 3.402}, {'end': 25720.73, 'text': 'double equal to h2..', 'start': 25719.71, 'duration': 1.02}, {'end': 25728.892, 'text': "Now I'm using this double equal to similar to any other binary operator like I might go for plus and similarly I'm going for double equal to now.", 'start': 25720.77, 'duration': 8.122}, {'end': 25731.152, 'text': 'This is because this is a comparison operator.', 'start': 25729.312, 'duration': 1.84}], 'summary': 'Introduction to variable creation and comparison using the triple equal to sign.', 'duration': 44.678, 'max_score': 25686.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY25686474.jpg'}, {'end': 25798.69, 'src': 'embed', 'start': 25772.176, 'weight': 6, 'content': [{'end': 25779.519, 'text': 'So if, say, for example, you want to also compare the data types along with the value, instead of double equal to use triple equal to,', 'start': 25772.176, 'duration': 7.343}, {'end': 25781.64, 'text': 'and that way this would give us false.', 'start': 25779.519, 'duration': 2.121}, {'end': 25785.562, 'text': 'There is so much going on inside or in this particular.', 'start': 25782.221, 'duration': 3.341}, {'end': 25791.345, 'text': "two examples that we have, but for now you can remember that double equal to doesn't compare the data types,", 'start': 25785.562, 'duration': 5.783}, {'end': 25793.326, 'text': 'while triple equal to also checks the data types.', 'start': 25791.345, 'duration': 1.981}, {'end': 25798.69, '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': 25793.806, 'duration': 4.884}], 'summary': 'Use triple equal to compare data types and values, double equal to only checks values.', 'duration': 26.514, 'max_score': 25772.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY25772176.jpg'}], 'start': 25031.976, 'title': 'Node.js and npm fundamentals', 'summary': 'Provides insights into node.js event loop architecture, highlighting its ability to process requests in parallel. it also covers the evolution of npm into a multifunctional tool, default in node.js version 6 onwards, and introduces node.js basics, including data types, variables, and operators, along with the process of initializing a node.js project and creating a package.json file.', 'chapters': [{'end': 25091.558, 'start': 25031.976, 'title': 'Node.js architecture & npm', 'summary': 'Discusses the event loop architecture in node.js, highlighting its capability to process requests in parallel. it also emphasizes the evolution of npm from a package manager to a multifunctional tool, installed by default from node.js version 6 onwards.', 'duration': 59.582, 'highlights': ['The event loop architecture in Node.js enables parallel processing of requests, providing a virtual feel of simultaneous execution.', 'npm, initially known as Node Package Manager, has evolved into a multifunctional tool and is included as a default installation from Node.js version 6 onwards.']}, {'end': 25793.326, 'start': 25091.939, 'title': 'Node.js basics and npm overview', 'summary': 'Introduces node.js and npm, explaining their features and usage, along with the process of initializing a node.js project and the creation of a package.json file, followed by an overview of node.js basics including data types, variables, and operators.', 'duration': 701.387, 'highlights': ['Node.js and npm overview', 'npm repository and third-party modules', 'Package.json file creation', 'Node.js basics and data types', 'Comparison operators in JavaScript']}], 'duration': 761.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY25031976.jpg', 'highlights': ['The event loop architecture in Node.js enables parallel processing of requests, providing a virtual feel of simultaneous execution.', 'npm, initially known as Node Package Manager, has evolved into a multifunctional tool and is included as a default installation from Node.js version 6 onwards.', 'Node.js and npm overview', 'Package.json file creation', 'Node.js basics and data types', 'npm repository and third-party modules', 'Comparison operators in JavaScript']}, {'end': 27622.241, 'segs': [{'end': 26222.48, 'src': 'embed', 'start': 26198.445, 'weight': 1, 'content': [{'end': 26205.869, 'text': 'But before events, I would like to go into creating the server through the HTTP module, because server is also a network application,', 'start': 26198.445, 'duration': 7.424}, {'end': 26208.511, 'text': 'which is something that Node.js would enable us to create.', 'start': 26205.869, 'duration': 2.642}, {'end': 26212.533, 'text': "So we'll create a server through the HTTP modules and then I'll come back to the events.", 'start': 26208.571, 'duration': 3.962}, {'end': 26213.634, 'text': "Let's see how that goes.", 'start': 26212.573, 'duration': 1.061}, {'end': 26214.435, 'text': 'All right.', 'start': 26214.154, 'duration': 0.281}, {'end': 26220.538, 'text': "So let's just get rid of this FS related code and I'll again go for the FS code in some time.", 'start': 26214.835, 'duration': 5.703}, {'end': 26222.48, 'text': 'I would also get rid of the hello.txt.', 'start': 26220.919, 'duration': 1.561}], 'summary': 'Creating a server through the http module in node.js.', 'duration': 24.035, 'max_score': 26198.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY26198445.jpg'}, {'end': 26307.087, 'src': 'embed', 'start': 26278.357, 'weight': 3, 'content': [{'end': 26279.658, 'text': 'This is how you create a server.', 'start': 26278.357, 'duration': 1.301}, {'end': 26282.66, 'text': "http.createServer That's it.", 'start': 26280.279, 'duration': 2.381}, {'end': 26286.403, 'text': "And I'd save it in a variable called server.", 'start': 26283.16, 'duration': 3.243}, {'end': 26292.991, 'text': 'and my server would listen to the port number 3000, the server dot.', 'start': 26287.143, 'duration': 5.848}, {'end': 26295.394, 'text': 'listen 3000, all right.', 'start': 26292.991, 'duration': 2.403}, {'end': 26299.038, 'text': 'so this is what your server would listen to.', 'start': 26295.394, 'duration': 3.644}, {'end': 26303.363, 'text': 'and if you want, you can also provide the host name here, which is by default localhost.', 'start': 26299.038, 'duration': 4.325}, {'end': 26307.087, 'text': 'but if you want, explicitly, you can provide local host as the host name.', 'start': 26303.363, 'duration': 3.724}], 'summary': 'Creating a server using http.createserver to listen on port 3000, with the option to specify the host name.', 'duration': 28.73, 'max_score': 26278.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY26278357.jpg'}, {'end': 26351.751, 'src': 'embed', 'start': 26329.237, 'weight': 4, 'content': [{'end': 26337.702, 'text': 'So what have we done? We have simply created a server by HTTP create server and we are listening on port number 3000.', 'start': 26329.237, 'duration': 8.465}, {'end': 26338.583, 'text': 'So that is what it is.', 'start': 26337.702, 'duration': 0.881}, {'end': 26340.864, 'text': 'And then at the end, we are displaying some message on the console.', 'start': 26338.603, 'duration': 2.261}, {'end': 26341.284, 'text': "So let's see.", 'start': 26340.884, 'duration': 0.4}, {'end': 26346.848, 'text': 'One thing that you would notice is in the other programs, the application actually ended.', 'start': 26341.905, 'duration': 4.943}, {'end': 26351.751, 'text': 'Like once you are done with the whole program, you see that you get the command prompt back.', 'start': 26347.108, 'duration': 4.643}], 'summary': 'Created http server on port 3000 and displayed message on console.', 'duration': 22.514, 'max_score': 26329.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY26329237.jpg'}, {'end': 26773.088, 'src': 'embed', 'start': 26751.356, 'weight': 0, 'content': [{'end': 26760.644, 'text': "and if say, for example, i want to pass in some data, let's say test right, and this data can be taken into the function, the anonymous function,", 'start': 26751.356, 'duration': 9.288}, {'end': 26763.705, 'text': 'as an argument And I can just display that, for example, data.', 'start': 26760.644, 'duration': 3.061}, {'end': 26765.786, 'text': 'That should display test to me.', 'start': 26764.345, 'duration': 1.441}, {'end': 26773.088, 'text': 'So whatever you pass in, could be a string, could be a boolean, an object, anything, could be taken into the function as an argument.', 'start': 26766.466, 'duration': 6.622}], 'summary': 'Functions can take data as arguments and display it, allowing for flexibility in the type of data passed in.', 'duration': 21.732, 'max_score': 26751.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY26751356.jpg'}], 'start': 25793.806, 'title': 'Node.js server creation and event handling', 'summary': 'Covers javascript operators, function creation, and usage, as well as the core module file system in node.js, demonstrates reading and writing files, creating a server, implementing event listeners and emitters, and introduces event emitter in node.js for real-time application creation.', 'chapters': [{'end': 26033.031, 'start': 25793.806, 'title': 'Javascript operators, functions, and node.js modules', 'summary': 'Covers unique javascript operators, function creation, and usage, as well as the core module file system (fs) in node.js, emphasizing callback functions and object creation.', 'duration': 239.225, 'highlights': ['JavaScript introduces a unique operator, JavaScript functions can be created with or without names, and objects can be created using literals or constructors.', 'Node.js core module file system (fs) does not require separate installation and utilizes callback functions for file operations.', 'JavaScript functions can be created without names and called using a variable assignment, and objects can be created using object literals or a constructor pattern.']}, {'end': 26452.932, 'start': 26033.031, 'title': 'Node.js file system and server creation', 'summary': "Demonstrates reading and writing files in node.js using the 'fs' module, including converting data to strings and overwriting file contents, and then proceeds to creating a server through the 'http' module, emphasizing the simplicity of server creation and the need to program the server to respond to requests.", 'duration': 419.901, 'highlights': ["The chapter demonstrates reading and writing files in Node.js using the 'fs' module, including converting data to strings and overwriting file contents", "The chapter emphasizes the simplicity of server creation through the 'http' module in Node.js", 'The chapter highlights the need to program the server to respond to requests']}, {'end': 26734.982, 'start': 26452.932, 'title': 'Creating and handling events in node.js', 'summary': "Discusses creating a server in almost three statements, using express framework to create a server, and implementing event listeners and emitters in node.js, with emphasis on the 'emit' and 'on' methods to handle events, exemplified by logging requests on the console.", 'duration': 282.05, 'highlights': ['Creating a server in almost three statements', 'Using Express framework to create a server', "Implementing event listeners and emitters with 'emit' and 'on' methods", 'Logging requests on the console using event listeners and emitters']}, {'end': 26943.863, 'start': 26734.982, 'title': 'Event emitter and node.js server', 'summary': 'Introduces event emitter in node.js and its usage for creating a real-time application, highlighting its role in creating a chat server using socket io and then discusses the creation of a web server using node.js, along with the introduction of expressjs as a lightweight framework for managing data flow and routing in node applications.', 'duration': 208.881, 'highlights': ['Event emitter facilitates the creation of a real-time application like a chat server using socket io, enabling event handling for real-time functionalities.', 'Node.js server creation process is discussed, emphasizing the client-server interaction and the handling of request and response cycle in the context of the web server.', 'Introduction of ExpressJS, a lightweight Node.js framework for managing data flow and routing, along with its role in facilitating faster application development and providing template engines for building single-page and multi-page applications.']}, {'end': 27622.241, 'start': 26943.903, 'title': 'Creating a server in express', 'summary': 'Explains how to create a server in express, including installing express, handling get requests, creating routes, and reading data from a json file using express and http, resulting in the successful creation of a server listening on port 3000.', 'duration': 678.338, 'highlights': ['Creating a server in Express by installing Express using npm install express, resulting in 48 packages being installed and the successful execution of the server without errors.', "Addressing GET requests for the root path and '/tasks' path using app.get, resulting in successful handling of GET requests for both routes.", "Reading data from a 'db.json' file and returning the array of tasks as a response, achieved by using fs.readFile and sending the JSON data as a response, resulting in the successful retrieval and display of the tasks."]}], 'duration': 1828.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY25793806.jpg', 'highlights': ['Event emitter facilitates real-time application creation using socket io', 'Node.js server creation process emphasizes client-server interaction', 'ExpressJS introduction and its role in facilitating faster application development', "Demonstrating reading and writing files in Node.js using the 'fs' module", 'Creating a server in Express by installing Express using npm install express']}, {'end': 30240.041, 'segs': [{'end': 28065.753, 'src': 'embed', 'start': 28016.32, 'weight': 0, 'content': [{'end': 28023.186, 'text': "So basically we'll be using this command prompt, node.js command prompt, to build our entire project.", 'start': 28016.32, 'duration': 6.866}, {'end': 28025.628, 'text': "So let's check out the node version.", 'start': 28023.907, 'duration': 1.721}, {'end': 28031.013, 'text': 'Then you can go ahead and check out the npm version.', 'start': 28028.071, 'duration': 2.942}, {'end': 28039.538, 'text': 'Npm stands for node package manager, which is there for managing your dependencies and their versions.', 'start': 28032.354, 'duration': 7.184}, {'end': 28047.523, 'text': "So whatever dependencies you need to run your application or for your project, you're gonna use ntm to manage that.", 'start': 28040.499, 'duration': 7.024}, {'end': 28051.405, 'text': 'Now let us install MongoDB into our system.', 'start': 28049.244, 'duration': 2.161}, {'end': 28054.387, 'text': 'So you go to mongodb.com.', 'start': 28052.626, 'duration': 1.761}, {'end': 28057.248, 'text': 'You click on download.', 'start': 28056.168, 'duration': 1.08}, {'end': 28061.711, 'text': 'Then again, as per your operating system, choose the correct installer.', 'start': 28058.389, 'duration': 3.322}, {'end': 28065.753, 'text': "I'm gonna go ahead with this very version and I'm gonna download the MSI.", 'start': 28061.851, 'duration': 3.902}], 'summary': 'Using node.js command prompt to manage dependencies and install mongodb.', 'duration': 49.433, 'max_score': 28016.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY28016320.jpg'}, {'end': 28629.334, 'src': 'embed', 'start': 28547.088, 'weight': 2, 'content': [{'end': 28548.328, 'text': 'So first we need express.', 'start': 28547.088, 'duration': 1.24}, {'end': 28556.911, 'text': 'We need mongoose.', 'start': 28556.11, 'duration': 0.801}, {'end': 28565.053, 'text': 'We need body parser.', 'start': 28564.113, 'duration': 0.94}, {'end': 28576.828, 'text': 'We need cores.', 'start': 28576.087, 'duration': 0.741}, {'end': 28588.398, 'text': 'And we need path.', 'start': 28587.477, 'duration': 0.921}, {'end': 28594.643, 'text': "We haven't installed path because it's one of the core module.", 'start': 28591.781, 'duration': 2.862}, {'end': 28598.046, 'text': "So you don't need to install it separately.", 'start': 28596.345, 'duration': 1.701}, {'end': 28618.345, 'text': 'Now for making a express application or using express, we need to use express method and assign it to some variable.', 'start': 28607.096, 'duration': 11.249}, {'end': 28620.066, 'text': "So we'll assign it to app.", 'start': 28618.645, 'duration': 1.421}, {'end': 28629.334, 'text': 'Okay, now we need to define a port number.', 'start': 28627.332, 'duration': 2.002}], 'summary': 'Dependencies like express, mongoose, body parser, cores, and path are needed for the application. port number needs to be defined.', 'duration': 82.246, 'max_score': 28547.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY28547088.jpg'}, {'end': 28803.796, 'src': 'embed', 'start': 28768.63, 'weight': 7, 'content': [{'end': 28773.274, 'text': 'So remember I told you that I want all my routes to be in a particular folder.', 'start': 28768.63, 'duration': 4.644}, {'end': 28777.278, 'text': "So I'm gonna create a folder called routes.", 'start': 28774.055, 'duration': 3.223}, {'end': 28786.301, 'text': "Or We can simply put it in our file because it's a simple application, so we'll do that.", 'start': 28780.661, 'duration': 5.64}, {'end': 28791.165, 'text': 'Or we can create our folder as well.', 'start': 28787.022, 'duration': 4.143}, {'end': 28803.796, 'text': "Route.jl Now we want to use this very particular folder, so what I'm gonna do is I'm gonna define this particular file with a variable.", 'start': 28791.185, 'duration': 12.611}], 'summary': 'Desire to organize routes in a specific folder for a simple application.', 'duration': 35.166, 'max_score': 28768.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY28768630.jpg'}, {'end': 29000.991, 'src': 'embed', 'start': 28950.777, 'weight': 3, 'content': [{'end': 28963.026, 'text': "So for that I'm gonna create a folder called public and inside that I'm gonna create my file index.stml,", 'start': 28950.777, 'duration': 12.249}, {'end': 28965.687, 'text': 'which will be rendered by our frontend application.', 'start': 28963.026, 'duration': 2.661}, {'end': 28972.212, 'text': 'So static files.', 'start': 28970.551, 'duration': 1.661}, {'end': 28991.123, 'text': "Path.join Basically, I'm defining the path here.", 'start': 28984.318, 'duration': 6.805}, {'end': 29000.991, 'text': 'You can directly go and specify the path of this folder public folder or you can use underscore, underscore DIR name,', 'start': 28991.303, 'duration': 9.688}], 'summary': 'Creating a public folder to render index.stml for static files.', 'duration': 50.214, 'max_score': 28950.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY28950777.jpg'}, {'end': 29941.678, 'src': 'embed', 'start': 29859.692, 'weight': 4, 'content': [{'end': 29865.073, 'text': 'now we want to insert this very new contact into our database.', 'start': 29859.692, 'duration': 5.381}, {'end': 29878.754, 'text': "so for that We're gonna use a new contact.save, and we need a callback.", 'start': 29865.073, 'duration': 13.681}, {'end': 29886.418, 'text': "Let's go ahead with the arrow function.", 'start': 29884.597, 'duration': 1.821}, {'end': 29895.383, 'text': 'Error If error.', 'start': 29887.799, 'duration': 7.584}, {'end': 29935.695, 'text': "we need to send or we want to send message fail to add contact else contact That's it guys.", 'start': 29899.192, 'duration': 36.503}, {'end': 29941.678, 'text': 'Now for delete.', 'start': 29939.577, 'duration': 2.101}], 'summary': "Inserting a new contact into the database using new contact.save method with an arrow function, sending a fail message if there's an error.", 'duration': 81.986, 'max_score': 29859.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY29859692.jpg'}], 'start': 27622.341, 'title': 'Building mean stack application', 'summary': 'Discusses building a mean stack application, covering mongodb, express, angular 2, and node.js, emphasizing javascript-based technologies and introducing the architecture and components of a mean application. it also provides an overview of mongodb, express, angular 2, and node.js, highlighting their functionalities and installation procedures, along with the introduction of crud operations and restful apis for database management, setting up a node.js project with express, mongodb, creating apis for contact database and testing them using postman.', 'chapters': [{'end': 27768.31, 'start': 27622.341, 'title': 'Building mean stack application', 'summary': 'Discusses building a mean stack application, covering mongodb, express, angular 2, and node.js, emphasizing javascript-based technologies and introducing the architecture and components of a mean application.', 'duration': 145.969, 'highlights': ['MEAN stack refers to a collection of JavaScript-based technologies used to develop web applications.', 'MongoDB is an open source schema-less NoSQL database system.', 'Express is used for server-side development and is based on Node.js.', 'Introduction to MongoDB, Express, Angular 2, and Node.js (MEAN) technologies.', 'Angular 2 is used for client-side development in MEAN application.']}, {'end': 28277.512, 'start': 27768.985, 'title': 'Mean stack overview and installation', 'summary': 'Provides an overview of mongodb, express, angular 2, and node.js, highlighting their functionalities and installation procedures, along with the introduction of crud operations and restful apis for database management.', 'duration': 508.527, 'highlights': ['Express provides a set of robust features for building web applications, and it encapsulates the functionalities of node.js to make app building easier and faster.', 'Angular 2 is a popular JavaScript framework for mobile and desktop applications, introducing true object-oriented web development with TypeScript.', 'Node.js follows an event-driven architecture and is highly optimized and scalable due to asynchronous processing of events, allowing it to serve multiple requests simultaneously.', 'CRUD operations (Create, Read, Update, Delete) will be implemented using RESTful APIs, enabling data manipulation within the database.', 'Installation procedures for Node.js and MongoDB are described, including the download and setup process for both, along with starting MongoDB service and creating project']}, {'end': 29707.321, 'start': 28277.592, 'title': 'Setting up node.js project with express and mongodb', 'summary': 'Outlines the process of setting up a node.js project with express, creating routes, adding middleware, connecting to mongodb, and creating schemas for a contact list application, emphasizing the use of npm, express, and mongoose, and the establishment of the database connection.', 'duration': 1429.729, 'highlights': ['The chapter outlines the process of setting up a Node.js project with Express, creating routes, adding middleware, connecting to MongoDB, and creating schemas for a contact list application.', 'Emphasizes the use of npm to initialize the project, create package.json, and install dependencies such as Express, mongoose, body parser, and cors.', 'Details the process of connecting to MongoDB using mongoose and creating schema for the contact list application.']}, {'end': 30240.041, 'start': 29707.321, 'title': 'Creating apis for contact database', 'summary': 'Discusses creating apis for retrieving, adding, and deleting contacts from a database using methods like find, save, and remove, and testing them using postman.', 'duration': 532.72, 'highlights': ['The chapter discusses creating APIs for retrieving, adding, and deleting contacts from a database using methods like find, save, and remove, and testing them using Postman.', 'The schema for contact retrieval is defined using the find method and a callback function.', 'The process of adding a new contact to the database is explained, involving creating a new contact object and using new contact.save method.', 'The procedure for deleting a contact from the database is detailed, which involves referring to the contact using its unique ID and issuing a delete command.', 'The use of Postman for testing the APIs by inserting and retrieving data from the database is explained.']}], 'duration': 2617.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY27622341.jpg', 'highlights': ['MEAN stack refers to a collection of JavaScript-based technologies used to develop web applications.', 'Introduction to MongoDB, Express, Angular 2, and Node.js (MEAN) technologies.', 'Express provides a set of robust features for building web applications, and it encapsulates the functionalities of node.js.', 'Node.js follows an event-driven architecture and is highly optimized and scalable due to asynchronous processing of events.', 'CRUD operations (Create, Read, Update, Delete) will be implemented using RESTful APIs, enabling data manipulation within the database.', 'The chapter outlines the process of setting up a Node.js project with Express, creating routes, adding middleware, connecting to MongoDB, and creating schemas for a contact list application.', 'The chapter discusses creating APIs for retrieving, adding, and deleting contacts from a database using methods like find, save, and remove, and testing them using Postman.', 'Angular 2 is used for client-side development in MEAN application.', 'Emphasizes the use of npm to initialize the project, create package.json, and install dependencies such as Express, mongoose, body parser, and cors.', 'MongoDB is an open source schema-less NoSQL database system.']}, {'end': 32349.046, 'segs': [{'end': 30404.781, 'src': 'embed', 'start': 30375.315, 'weight': 3, 'content': [{'end': 30379.457, 'text': 'So these are the files that will be created using your ng new command.', 'start': 30375.315, 'duration': 4.142}, {'end': 30388.262, 'text': 'So you will have a basic component called as app.component and you will have a basic model app.module.', 'start': 30380.978, 'duration': 7.284}, {'end': 30397.138, 'text': "where you will be specifying all the modules which you're gonna use across the application as well as your components and services.", 'start': 30388.755, 'duration': 8.383}, {'end': 30404.781, 'text': "Then we'll have index.html, which is the file that will be rendered in the first place to your web browser,", 'start': 30398.139, 'duration': 6.642}], 'summary': 'Ng new command creates app.component, app.module, and index.html for rendering.', 'duration': 29.466, 'max_score': 30375.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY30375315.jpg'}, {'end': 30578.658, 'src': 'embed', 'start': 30549.398, 'weight': 12, 'content': [{'end': 30559.025, 'text': 'Now, if you go ahead and put 200, you are having that very particular thing as app works.', 'start': 30549.398, 'duration': 9.627}, {'end': 30563.529, 'text': 'So basically, first our index.html file is rendered.', 'start': 30560.266, 'duration': 3.263}, {'end': 30566.894, 'text': 'which is calling our app root or app component.', 'start': 30564.093, 'duration': 2.801}, {'end': 30575.917, 'text': 'So if you check out the app.component template, so in this template we have what we call as interpolation or one-way data binding.', 'start': 30567.854, 'duration': 8.063}, {'end': 30578.658, 'text': 'So we are winding this value as app works.', 'start': 30576.337, 'duration': 2.321}], 'summary': 'Rendering 200 triggers app component with one-way data binding.', 'duration': 29.26, 'max_score': 30549.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY30549398.jpg'}, {'end': 30636.781, 'src': 'embed', 'start': 30611.917, 'weight': 0, 'content': [{'end': 30619.041, 'text': 'It continuously watches for any changes that we make in our source code, and it re-renders or restart the whole application each time.', 'start': 30611.917, 'duration': 7.124}, {'end': 30620.902, 'text': 'So you can go ahead and check that.', 'start': 30619.542, 'duration': 1.36}, {'end': 30628.838, 'text': 'C over here, then we had a change over here, so it recompiled it and start the whole application.', 'start': 30622.176, 'duration': 6.662}, {'end': 30636.781, 'text': 'All this TS file are converted to JavaScript files or trans file to JavaScript file and then are rendered.', 'start': 30629.398, 'duration': 7.383}], 'summary': 'Tool continuously watches for code changes and re-renders application, converting ts files to js files.', 'duration': 24.864, 'max_score': 30611.917, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY30611917.jpg'}, {'end': 31877.58, 'src': 'embed', 'start': 31734.183, 'weight': 4, 'content': [{'end': 31748.691, 'text': "so this dot yes, contact service dot, delete contact and then we'll pass in the ID and since it returns an observable,", 'start': 31734.183, 'duration': 14.508}, {'end': 31751.872, 'text': 'we need to subscribe that very particular observable.', 'start': 31748.691, 'duration': 3.181}, {'end': 31753.373, 'text': "so we'll go ahead and do that.", 'start': 31751.872, 'duration': 1.501}, {'end': 31767.669, 'text': 'Now what we need to do is, even if we have deleted the data or the contact from our backend side or from my database,', 'start': 31759.847, 'duration': 7.822}, {'end': 31770.57, 'text': 'I need to remove it from my contact area as well.', 'start': 31767.669, 'duration': 2.901}, {'end': 31775.571, 'text': 'This very particular contact where all the contact has been saved.', 'start': 31770.81, 'duration': 4.761}, {'end': 31778.012, 'text': "So we'll go ahead and do that.", 'start': 31776.211, 'duration': 1.801}, {'end': 31792.93, 'text': "If the delete operation was successful, then We're gonna iterate over here.", 'start': 31784.293, 'duration': 8.637}, {'end': 31796.631, 'text': 'Contacts dot length.', 'start': 31794.651, 'duration': 1.98}, {'end': 31804.114, 'text': "Then, okay, so I'm having an error because I haven't defined the variable contacts, so.", 'start': 31797.932, 'duration': 6.182}, {'end': 31810.697, 'text': 'Contacts is equal to this dot contacts.', 'start': 31807.395, 'duration': 3.302}, {'end': 31813.798, 'text': "So it's done.", 'start': 31813.317, 'duration': 0.481}, {'end': 31819.98, 'text': 'Now we need to increment our iterator.', 'start': 31816.999, 'duration': 2.981}, {'end': 31839.15, 'text': 'So if contacts I dot underscore ID is equal to the ID that has been provided to my method, then I wanna remove it.', 'start': 31823.277, 'duration': 15.873}, {'end': 31847.297, 'text': 'Splice icon.', 'start': 31845.115, 'duration': 2.182}, {'end': 31852.121, 'text': 'So our delete contact is done.', 'start': 31850.339, 'duration': 1.782}, {'end': 31858.626, 'text': 'Now we need to add our new method for our adding contact.', 'start': 31853.942, 'duration': 4.684}, {'end': 31869.714, 'text': 'So our delete functionality is done.', 'start': 31867.893, 'duration': 1.821}, {'end': 31877.58, 'text': "So let's add our add contact method so that we can add more contact and delete them and see if everything is working fine or not.", 'start': 31869.774, 'duration': 7.806}], 'summary': 'Delete and add contact methods implemented for backend and frontend operations', 'duration': 143.397, 'max_score': 31734.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY31734183.jpg'}, {'end': 32086.358, 'src': 'embed', 'start': 31970.911, 'weight': 10, 'content': [{'end': 31973.393, 'text': "Okay, let's check it out, so yeah.", 'start': 31970.911, 'duration': 2.482}, {'end': 31976.789, 'text': "So it's done.", 'start': 31976.249, 'duration': 0.54}, {'end': 31982.851, 'text': 'So this is our add contact method.', 'start': 31980.77, 'duration': 2.081}, {'end': 31985.011, 'text': 'Now we need to call it from our template.', 'start': 31982.911, 'duration': 2.1}, {'end': 31994.393, 'text': "So we're gonna modify our template so that we can add a form on top of our class which will have three fields one for name,", 'start': 31985.491, 'duration': 8.902}, {'end': 32001.595, 'text': 'one for last name and then one for phone, and then a submit button for adding the contact finally.', 'start': 31994.393, 'duration': 7.202}, {'end': 32009.607, 'text': 'So for form, we need to use form tag or submit event.', 'start': 32003.195, 'duration': 6.412}, {'end': 32016.088, 'text': "And then we'll add add contact.", 'start': 32011.887, 'duration': 4.201}, {'end': 32022.109, 'text': "So this is the method that we're gonna call when the form has been submitted.", 'start': 32018.468, 'duration': 3.641}, {'end': 32024.99, 'text': 'Close the tag, form tag.', 'start': 32023.349, 'duration': 1.641}, {'end': 32027.51, 'text': 'Now we need three field guides.', 'start': 32025.83, 'duration': 1.68}, {'end': 32031.571, 'text': 'So the first one will be of our first name.', 'start': 32028.27, 'duration': 3.301}, {'end': 32033.111, 'text': "So let's go ahead and do that.", 'start': 32031.791, 'duration': 1.32}, {'end': 32043.047, 'text': "So for that we'll be using dev class div class equal to form group.", 'start': 32033.311, 'duration': 9.736}, {'end': 32051.671, 'text': 'Now we need to close this particular tag.', 'start': 32049.57, 'duration': 2.101}, {'end': 32057.994, 'text': 'And I want my label as first name.', 'start': 32053.212, 'duration': 4.782}, {'end': 32064.438, 'text': 'Yeah Now I need input.', 'start': 32061.316, 'duration': 3.122}, {'end': 32064.738, 'text': 'Type equal.', 'start': 32064.478, 'duration': 0.26}, {'end': 32074.835, 'text': "Then we're gonna use something called as ng-model for two-way data binding.", 'start': 32070.674, 'duration': 4.161}, {'end': 32083.597, 'text': "So whatever changes that we're gonna make there should be reflected in our list as well where we'll be showing the contact list.", 'start': 32075.355, 'duration': 8.242}, {'end': 32086.358, 'text': "So we're gonna use that.", 'start': 32084.217, 'duration': 2.141}], 'summary': 'Creating an add contact method and modifying the template to include a form with three fields and a submit button for adding contacts.', 'duration': 115.447, 'max_score': 31970.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY31970911.jpg'}, {'end': 32349.046, 'src': 'embed', 'start': 32305.464, 'weight': 5, 'content': [{'end': 32319.323, 'text': "So what we can do to fix it is we can copy this very particular thing over here and we're gonna put it inside our add contact to be called just after we have pushed the contact.", 'start': 32305.464, 'duration': 13.859}, {'end': 32330.905, 'text': 'And now if we go ahead and do that, then yeah, you can see where.', 'start': 32320.383, 'duration': 10.522}, {'end': 32337.64, 'text': 'Okay, we should add some BR tag so that It looks good, our present table over here.', 'start': 32331.145, 'duration': 6.495}, {'end': 32340.101, 'text': "So we're gonna do that here.", 'start': 32337.84, 'duration': 2.261}, {'end': 32349.046, 'text': 'So this is so far now.', 'start': 32347.205, 'duration': 1.841}], 'summary': 'Fix the issue by copying a specific code and adding a br tag for table formatting.', 'duration': 43.582, 'max_score': 32305.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY32305464.jpg'}], 'start': 30240.041, 'title': 'Angular 2 application setup and development', 'summary': 'Provides a comprehensive guide to setting up the client-side application using angular 2, including installing angular cli, creating a new angular project, explaining the basics of angular 2 components and typescript, setting up a contact component with http methods and api calls, creating contact service and component, iterating and manipulating components, and building an add contact form.', 'chapters': [{'end': 30463.158, 'start': 30240.041, 'title': 'Setting up angular 2 client-side application', 'summary': 'Provides a guide on setting up the client-side application using angular 2, including installing angular cli, creating a new angular project, and an overview of the files and components generated.', 'duration': 223.117, 'highlights': ['A guide on setting up the client-side application using Angular 2', 'Installing Angular CLI to provide necessary boilerplate and core modules for the Angular app', 'Creation of basic files and components using ng new command for Angular project']}, {'end': 30636.781, 'start': 30463.738, 'title': 'Angular 2 component and typescript basics', 'summary': 'Explains the basics of angular 2 components and typescript, including the structure of an app component, the use of typescript, and the continuous update feature in angular 2 applications.', 'duration': 173.043, 'highlights': ['Angular 2 applications use TypeScript as the language, which is based on object-oriented features.', 'The app.component class is specified using a decorator, @Component, which includes template URL and CSS for styling.', 'In Angular-side applications, there is no need to restart the application when making changes, as it continuously watches for any source code changes and re-renders the application each time.']}, {'end': 31089.534, 'start': 30637.661, 'title': 'Angular contact component setup', 'summary': 'Outlines the setup process for creating a contact component in angular, including the creation of a contact component, service, and schema, as well as the implementation of methods for retrieving, adding, and deleting contacts using http methods and api calls.', 'duration': 451.873, 'highlights': ['Creation of Contact Component and Service', 'Setup of Contact Schema and HTTP Module Import', 'Implementation of Contact Retrieval and Addition Methods']}, {'end': 31487.008, 'start': 31096.441, 'title': 'Creating contact service and component', 'summary': 'Covers creating a contact service and component, including explaining the delete method, using id as a parameter, and implementing dependency injection. it also involves retrieving data using the ngoninit method and displaying the data in the template.', 'duration': 390.567, 'highlights': ['The chapter emphasizes the process of creating a contact service and component, including the use of ID as a parameter for the delete method.', 'Dependency injection is explained, with a focus on injecting services into the component and providing the service for use.', 'The process of retrieving data using the ngOnInit method and the getContacts method is detailed, including the handling of observable data and setting contacts.', 'The importance of specifying the component to be loaded in the app.component and incorporating bootstrap styles into the template is highlighted.']}, {'end': 31970.751, 'start': 31489.104, 'title': 'Angular component iteration and manipulation', 'summary': 'Covers the iteration over a list of contacts using ngfor structural directive, implementing delete and add contact methods, and displaying contact details with one-way data binding.', 'duration': 481.647, 'highlights': ['Iterating over list of contacts using ngFor structural directive', 'Implementing delete contact method', 'Creating and adding new contact method']}, {'end': 32349.046, 'start': 31970.911, 'title': 'Building add contact form', 'summary': 'Details the process of creating an add contact form, including adding fields for name, last name, and phone number, implementing two-way data binding, and addressing the need for browser reload when adding a contact.', 'duration': 378.135, 'highlights': ['Creating form with fields for name, last name, and phone number, along with a submit button for adding contacts.', 'Implementing two-way data binding using ng-model to reflect changes in the contact list.', 'Addressing the need for browser reload when adding a contact by modifying the method for retrieving contacts.']}], 'duration': 2109.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY30240041.jpg', 'highlights': ['A guide on setting up the client-side application using Angular 2', 'Installing Angular CLI to provide necessary boilerplate and core modules for the Angular app', 'Creation of basic files and components using ng new command for Angular project', 'Creation of Contact Component and Service', 'Setup of Contact Schema and HTTP Module Import', 'Implementation of Contact Retrieval and Addition Methods', 'The chapter emphasizes the process of creating a contact service and component, including the use of ID as a parameter for the delete method', 'Dependency injection is explained, with a focus on injecting services into the component and providing the service for use', 'Creating form with fields for name, last name, and phone number, along with a submit button for adding contacts', 'Iterating over list of contacts using ngFor structural directive', 'Implementing delete contact method', 'Creating and adding new contact method', 'The app.component class is specified using a decorator, @Component, which includes template URL and CSS for styling', 'In Angular-side applications, there is no need to restart the application when making changes, as it continuously watches for any source code changes and re-renders the application each time', 'The process of retrieving data using the ngOnInit method and the getContacts method is detailed, including the handling of observable data and setting contacts', 'Addressing the need for browser reload when adding a contact by modifying the method for retrieving contacts', 'Implementing two-way data binding using ng-model to reflect changes in the contact list', 'The importance of specifying the component to be loaded in the app.component and incorporating bootstrap styles into the template']}, {'end': 33823.217, 'segs': [{'end': 33015.641, 'src': 'embed', 'start': 32961.355, 'weight': 0, 'content': [{'end': 32969.98, 'text': 'this is a GraphQL playground and what this is is you can run your queries, and queries are read.', 'start': 32961.355, 'duration': 8.625}, {'end': 32973.142, 'text': 'So we talked about card operations before.', 'start': 32970.5, 'duration': 2.642}, {'end': 32978.746, 'text': 'Queries are for reading things or finding or viewing the data you have stored.', 'start': 32973.703, 'duration': 5.043}, {'end': 32982.288, 'text': 'So us, we want to query this hello thing.', 'start': 32979.485, 'duration': 2.803}, {'end': 32986.311, 'text': 'So how would we do that? Well, we would do curly braces like that.', 'start': 32982.408, 'duration': 3.903}, {'end': 32987.752, 'text': 'And then we say hello.', 'start': 32986.711, 'duration': 1.041}, {'end': 32992.43, 'text': "And I can either pass an argument or I don't have to pass an argument.", 'start': 32988.769, 'duration': 3.661}, {'end': 32993.79, 'text': 'So we can prettify this.', 'start': 32992.551, 'duration': 1.239}, {'end': 33000.553, 'text': "So if I don't pass an argument and I hit run, I get data, hello, and then hello, world.", 'start': 32994.432, 'duration': 6.121}, {'end': 33005.917, 'text': 'So by default, the argument would be null or undefined, getting passed in.', 'start': 33001.154, 'duration': 4.763}, {'end': 33009.057, 'text': 'And then we saw that that would go to world.', 'start': 33006.357, 'duration': 2.7}, {'end': 33012.239, 'text': 'But here I can specify an argument if I want to.', 'start': 33009.557, 'duration': 2.682}, {'end': 33014.5, 'text': 'And I could say Ben.', 'start': 33012.259, 'duration': 2.241}, {'end': 33015.641, 'text': 'So hello, Ben.', 'start': 33014.62, 'duration': 1.021}], 'summary': "Using graphql queries to retrieve and view data, with example of querying 'hello' to return 'hello, world' and 'hello, ben'.", 'duration': 54.286, 'max_score': 32961.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY32961355.jpg'}], 'start': 32349.146, 'title': 'Mern stack, graphql, and crud operations', 'summary': 'Introduces mern stack with graphql, covers crud operations, and discusses basics of graphql, mongodb connection and creating models. it includes key components like react.js, node.js, and mongodb, and provides examples of crud operations and their implementations.', 'chapters': [{'end': 32561.102, 'start': 32349.146, 'title': 'Introduction to mern stack with graphql', 'summary': 'Introduces the mern stack with graphql, replacing angular with react, and discusses the key components and benefits, including the usage of react.js, node.js with express, and mongodb, as well as the advantages of using reactjs and graphql.', 'duration': 211.956, 'highlights': ['The chapter introduces the MERN stack with GraphQL, replacing Angular with React.', 'The tutorial discusses the usage of React.js, Node.js with Express, and MongoDB in the MERN stack.', 'The advantages of using ReactJS and GraphQL are highlighted, including its productivity and optimization benefits.']}, {'end': 32839.737, 'start': 32561.542, 'title': 'Building a mern stack application', 'summary': 'Introduces the mern stack, consisting of mongodb, express, react, and node.js, focusing on crud operations and prerequisites for setting up the development environment.', 'duration': 278.195, 'highlights': ['The MERN stack consists of MongoDB, Express, React, and Node.js, and emphasizes CRUD operations.', 'MongoDB is highlighted as being a solid NoSQL database, allowing easy storage and schema changes.', 'Express is noted for its speed in creating servers.', 'Detailed prerequisites for setting up the development environment are provided, including the installation of Visual Studio Code, terminal, MongoDB, and Node.js.']}, {'end': 33189.987, 'start': 32840.278, 'title': 'Graphql basics and mongodb connection', 'summary': 'Covers the basics of setting up a graphql schema with a query type, implementing resolvers, and running a graphql server, followed by the introduction to queries and mutations. it then discusses the process of connecting to mongodb using mongoose, including installing the package, establishing a connection, and creating a schema for database models.', 'duration': 349.709, 'highlights': ['The chapter covers the basics of setting up a GraphQL schema with a query type, implementing resolvers, and running a GraphQL server.', 'It discusses the process of connecting to MongoDB using Mongoose, including installing the package, establishing a connection, and creating a schema for database models.', 'Introduction to queries and mutations in GraphQL.']}, {'end': 33507.531, 'start': 33190.067, 'title': 'Creating a to-do model with graphql', 'summary': 'Covers the process of creating a to-do model using graphql, including defining the to-do model with text and complete fields, creating a mutation to add a to-do, and utilizing graphql to interact with the to-do model and retrieve specific fields.', 'duration': 317.464, 'highlights': ['The chapter covers the process of creating a to-do model using GraphQL, including defining the to-do model with text and complete fields, creating a mutation to add a to-do, and utilizing GraphQL to interact with the to-do model and retrieve specific fields.', 'The to-do model is defined with two fields: text, which is a required string, and complete, which is a required boolean.', 'A mutation is created to add a to-do, with the default value of complete as false when a to-do is initially created.', 'The process of utilizing GraphQL to interact with the to-do model is demonstrated, allowing for the retrieval of specific fields such as text, ID, and complete, showcasing the flexibility and efficiency of GraphQL in retrieving only the required data.']}, {'end': 33823.217, 'start': 33507.551, 'title': 'Implementing crud operations in database', 'summary': 'Covers the implementation of crud operations in the database, including creating to-do items, reading all to-do items, updating an item by id, and deleting an item, with examples and explanations for each operation.', 'duration': 315.666, 'highlights': ['The chapter covers the implementation of CRUD operations in the database, including creating to-do items, reading all to-do items, updating an item by ID, and deleting an item, with examples and explanations for each operation.', 'The implementation involves adding a query to fetch all to-do items, updating the schema, and adding the implementation of fetching the data, returning an array of to-do items, and querying to-dos without any specific arguments to retrieve all the to-do items.', "The process also includes updating an item by creating a new mutation called 'update to do' with two arguments, ID and complete, and returning a boolean value indicating the success of the update.", "Furthermore, the chapter explains the process of deleting an item by creating a new mutation called 'remove to do' with only one argument, ID, and returning a boolean value indicating the success of the deletion operation."]}], 'duration': 1474.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY32349146.jpg', 'highlights': ['The chapter introduces the MERN stack with GraphQL, replacing Angular with React.', 'The tutorial discusses the usage of React.js, Node.js with Express, and MongoDB in the MERN stack.', 'The advantages of using ReactJS and GraphQL are highlighted, including its productivity and optimization benefits.', 'The chapter covers the implementation of CRUD operations in the database, including creating to-do items, reading all to-do items, updating an item by ID, and deleting an item, with examples and explanations for each operation.', 'The chapter covers the process of creating a to-do model using GraphQL, including defining the to-do model with text and complete fields, creating a mutation to add a to-do, and utilizing GraphQL to interact with the to-do model and retrieve specific fields.']}, {'end': 35079.705, 'segs': [{'end': 34077.067, 'src': 'embed', 'start': 34051.639, 'weight': 5, 'content': [{'end': 34059.142, 'text': 'when I say react Dom render app, our application is being rendered in the element which is root, which we just saw.', 'start': 34051.639, 'duration': 7.503}, {'end': 34064.144, 'text': "And if we look at what app.js is, we can see this is what's getting rendered.", 'start': 34059.742, 'duration': 4.402}, {'end': 34068.345, 'text': "So when I changed welcome to GraphQL, that's why we saw a change over there.", 'start': 34064.284, 'duration': 4.061}, {'end': 34071.586, 'text': 'And you can see this is just kind of similar to HTML.', 'start': 34068.725, 'duration': 2.861}, {'end': 34072.806, 'text': 'This is called JSX.', 'start': 34071.606, 'duration': 1.2}, {'end': 34077.067, 'text': 'This allows you to mix pretty much JavaScript with HTML.', 'start': 34073.226, 'duration': 3.841}], 'summary': 'React dom renders app in root element, using jsx to mix javascript with html.', 'duration': 25.428, 'max_score': 34051.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY34051639.jpg'}, {'end': 34128.596, 'src': 'embed', 'start': 34097.487, 'weight': 3, 'content': [{'end': 34101.171, 'text': 'We can clear out all this code right here and simplify it a little bit.', 'start': 34097.487, 'duration': 3.684}, {'end': 34106.556, 'text': 'We can just say div hello and get rid of these things at the top.', 'start': 34101.792, 'duration': 4.764}, {'end': 34111.06, 'text': 'Things at the top are just import statements using a fancier JavaScript syntax.', 'start': 34106.837, 'duration': 4.223}, {'end': 34114.583, 'text': 'And we just need to import React and index.js.', 'start': 34111.501, 'duration': 3.082}, {'end': 34116.785, 'text': 'We can just remove the index.css.', 'start': 34114.643, 'duration': 2.142}, {'end': 34120.969, 'text': 'So if we come back over here, it should now be blank, just hello.', 'start': 34117.406, 'duration': 3.563}, {'end': 34122.811, 'text': 'And we can start adding our code.', 'start': 34121.369, 'duration': 1.442}, {'end': 34128.596, 'text': 'So what we want to do is to run the same queries and whatnot that we ran in GraphQL Playground.', 'start': 34123.211, 'duration': 5.385}], 'summary': "Simplify code by removing unnecessary imports and files, resulting in a blank page with 'hello' content.", 'duration': 31.109, 'max_score': 34097.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY34097487.jpg'}, {'end': 34289.83, 'src': 'embed', 'start': 34261.272, 'weight': 4, 'content': [{'end': 34264.194, 'text': "So let's make sure adding that didn't break anything.", 'start': 34261.272, 'duration': 2.922}, {'end': 34272.499, 'text': "So I'm going to do npm start and we should still see just the word hello and nothing different because this doesn't actually do anything yet.", 'start': 34264.254, 'duration': 8.245}, {'end': 34274.14, 'text': "We didn't tell it what to query.", 'start': 34272.619, 'duration': 1.521}, {'end': 34277.662, 'text': 'All we said was this is where we want you to make queries.', 'start': 34274.48, 'duration': 3.182}, {'end': 34282.765, 'text': 'I added this client equal new Apollo client before these import statements.', 'start': 34278.362, 'duration': 4.403}, {'end': 34284.966, 'text': 'You need to make sure that comes afterwards.', 'start': 34283.325, 'duration': 1.641}, {'end': 34286.007, 'text': 'So just like that.', 'start': 34285.366, 'duration': 0.641}, {'end': 34287.608, 'text': 'And cool.', 'start': 34286.807, 'duration': 0.801}, {'end': 34289.83, 'text': 'So refreshes and hello is there.', 'start': 34287.628, 'duration': 2.202}], 'summary': 'Tested npm start, hello still displays, added apollo client successfully.', 'duration': 28.558, 'max_score': 34261.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY34261272.jpg'}, {'end': 34610.07, 'src': 'embed', 'start': 34581.297, 'weight': 1, 'content': [{'end': 34587.759, 'text': "And the reason this material UI needs this font, so we're just importing the font so it has access to it.", 'start': 34581.297, 'duration': 6.462}, {'end': 34594.922, 'text': "And then the other thing is we also want to add some SVG icons, so I'm going to go ahead and install that package as well.", 'start': 34588.42, 'duration': 6.502}, {'end': 34596.842, 'text': 'All right.', 'start': 34596.522, 'duration': 0.32}, {'end': 34601.545, 'text': 'And the first thing I want to do is render some paper.', 'start': 34597.783, 'duration': 3.762}, {'end': 34610.07, 'text': 'And the reason why I want to render some paper, this is a component from Material UI, is so I can put a list on that paper.', 'start': 34602.345, 'duration': 7.725}], 'summary': 'Importing font for material ui and installing svg icons package to render paper and list component.', 'duration': 28.773, 'max_score': 34581.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY34581297.jpg'}, {'end': 34681.549, 'src': 'embed', 'start': 34656.45, 'weight': 0, 'content': [{'end': 34662.835, 'text': "here i'm going to say margin auto and i'm also going to give it a width of 400..", 'start': 34656.45, 'duration': 6.385}, {'end': 34672.125, 'text': "so now i've created this basically inner div and i'm going to render my paper here And then I'm going to give it an elevation,", 'start': 34662.835, 'duration': 9.29}, {'end': 34673.986, 'text': "and let's give it an elevation of one.", 'start': 34672.125, 'duration': 1.861}, {'end': 34678.168, 'text': "So let's see that paper and action that we just added.", 'start': 34675.146, 'duration': 3.022}, {'end': 34681.549, 'text': 'And once we get this paper the way we like it,', 'start': 34679.628, 'duration': 1.921}], 'summary': 'Creating a div with margin auto and width of 400, adding a paper with an elevation of one.', 'duration': 25.099, 'max_score': 34656.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY34656450.jpg'}, {'end': 34760.563, 'src': 'embed', 'start': 34728.867, 'weight': 2, 'content': [{'end': 34731.889, 'text': "so the first three imports we don't need.", 'start': 34728.867, 'duration': 3.022}, {'end': 34738.552, 'text': 'but i do need list, all this list associated things, and i do want the icons.', 'start': 34731.889, 'duration': 6.663}, {'end': 34746.236, 'text': "so i'm going to copy those and just move them to the top, where my other imports are, and then i basically just want to merge these two.", 'start': 34738.552, 'duration': 7.684}, {'end': 34748.797, 'text': "i i don't care about the style.", 'start': 34746.236, 'duration': 2.561}, {'end': 34750.018, 'text': "we're going to add our own style.", 'start': 34748.797, 'duration': 1.221}, {'end': 34760.563, 'text': "So when it where he was adding styles here, I just want to move their outer div and I'm gonna replace it with my stuff.", 'start': 34751.435, 'duration': 9.128}], 'summary': 'Merge selected imports, add custom styles to outer div.', 'duration': 31.696, 'max_score': 34728.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY34728867.jpg'}, {'end': 35015.92, 'src': 'embed', 'start': 34973.7, 'weight': 8, 'content': [{'end': 34975.742, 'text': 'Checkbox, disable ripple.', 'start': 34973.7, 'duration': 2.042}, {'end': 34977.443, 'text': "I guess that's when you check.", 'start': 34975.802, 'duration': 1.641}, {'end': 34981.787, 'text': 'So these are some CSS things that you can take on and off depending on what you want to look.', 'start': 34977.583, 'duration': 4.204}, {'end': 34988.051, 'text': 'checked. this is a value of whether or not the check boxes are checked.', 'start': 34982.628, 'duration': 5.423}, {'end': 35001.358, 'text': 'so, for example, if I say true, all the check boxes are going to be checked here, they were all false because all of them todo.complete are false.', 'start': 34988.051, 'duration': 13.307}, {'end': 35015.92, 'text': "But if I were to say update one of them, so let's say the first one, and just remove this, update todo id complete is true.", 'start': 35002.058, 'duration': 13.862}], 'summary': "Css can control checkbox appearance, and setting 'complete' values can change checkbox states.", 'duration': 42.22, 'max_score': 34973.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY34973700.jpg'}], 'start': 33823.397, 'title': 'Server operations and ui enhancement', 'summary': 'Covers the implementation of delete operation and tab creation for item removal, creating a react app for to-do lists, integrating apollo graphql, and adding material ui for aesthetic enhancement.', 'chapters': [{'end': 33870.517, 'start': 33823.397, 'title': 'Delete operation and tab creation', 'summary': 'Covers the successful implementation of the delete operation in the server, leading to the removal of an item by passing its id, along with creating tabs to perform operations separately.', 'duration': 47.12, 'highlights': ['The delete operation is successfully implemented, resulting in the removal of the item by passing its ID, ensuring efficient data management.', "Tabs are created to perform operations separately, enhancing the user's experience and reducing the need to redo tasks."]}, {'end': 34120.969, 'start': 33871.378, 'title': 'Creating react app for to-do list', 'summary': 'Details the process of creating a react app for managing to-dos, including setting up a server, using create-react-app, and exploring the structure of a react application.', 'duration': 249.591, 'highlights': ['The chapter details the process of creating a React app for managing to-dos.', 'Setting up create-react-app using CLI tool create-react-app.', 'Exploring the structure of a React application.']}, {'end': 34529.141, 'start': 34121.369, 'title': 'Integrating apollo graphql in react', 'summary': 'Explains the process of integrating apollo graphql in a react application, including setting up the apollo client, running queries, and rendering data, resulting in a seamless connection to the server and the ability to manipulate data.', 'duration': 407.772, 'highlights': ['The chapter explains the process of integrating Apollo GraphQL in a React application, including setting up the Apollo client, running queries, and rendering data, resulting in a seamless connection to the server and the ability to manipulate data.', 'The tutorial emphasizes the usage of Apollo Boost, React Apollo, GraphQL Tag, and GraphQL for parsing and making queries, reinforcing that these libraries facilitate the integration process and provide necessary components for React applications.', 'The importance of creating an Apollo client and using Apollo Provider from React Apollo to wrap the entire application is highlighted, demonstrating the significance of these components in accessing and making requests to the server throughout the React app.', 'The process of running a query in app.js and utilizing GraphQL tag for parsing the query is explained, showcasing the implementation of higher order component GraphQL from React Apollo to bind the query with the component and access data and loading status in the props.']}, {'end': 35079.705, 'start': 34530.121, 'title': 'Using material ui for apollo queries', 'summary': 'Discusses the process of adding material ui to enhance the appearance, including installing the package, importing the roboto font, rendering paper components, and modifying the list to resemble to-do items.', 'duration': 549.584, 'highlights': ['The process of adding Material UI components, including installing the package, importing the Roboto font, rendering paper components, and modifying the list to resemble to-do items.', 'Explanation of using state to store application information and handling toggle functionality for list items.', 'Detailed breakdown of the code structure, including the list item, checkbox, and primary text.', 'Demonstration of updating the database and the impact on the checkboxes.']}], 'duration': 1256.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY33823397.jpg', 'highlights': ['The process of integrating Apollo GraphQL in a React application, including setting up the Apollo client, running queries, and rendering data, resulting in a seamless connection to the server and the ability to manipulate data.', 'The importance of creating an Apollo client and using Apollo Provider from React Apollo to wrap the entire application is highlighted, demonstrating the significance of these components in accessing and making requests to the server throughout the React app.', 'The process of adding Material UI components, including installing the package, importing the Roboto font, rendering paper components, and modifying the list to resemble to-do items.', 'The delete operation is successfully implemented, resulting in the removal of the item by passing its ID, ensuring efficient data management.', "Tabs are created to perform operations separately, enhancing the user's experience and reducing the need to redo tasks.", 'The tutorial emphasizes the usage of Apollo Boost, React Apollo, GraphQL Tag, and GraphQL for parsing and making queries, reinforcing that these libraries facilitate the integration process and provide necessary components for React applications.', 'The process of creating a React app for managing to-dos.', 'Setting up create-react-app using CLI tool create-react-app.', 'Exploring the structure of a React application.', 'Explanation of using state to store application information and handling toggle functionality for list items.']}, {'end': 36266.252, 'segs': [{'end': 35356.327, 'src': 'embed', 'start': 35325.657, 'weight': 10, 'content': [{'end': 35333.422, 'text': "All right, so now what we can do is we've added a new thing to our props, and we can give it a name.", 'start': 35325.657, 'duration': 7.765}, {'end': 35336.685, 'text': "I'm going to call it updateToDo.", 'start': 35333.442, 'duration': 3.243}, {'end': 35344.817, 'text': 'So now in my update to do function, I can say this dot props dot update to do.', 'start': 35338.672, 'duration': 6.145}, {'end': 35351.383, 'text': 'And this function is available in my props because I specified it here and the name I specified matches.', 'start': 35345.618, 'duration': 5.765}, {'end': 35352.844, 'text': 'All right.', 'start': 35351.403, 'duration': 1.441}, {'end': 35356.327, 'text': 'So what I need to do to pass this is those variables.', 'start': 35353.124, 'duration': 3.203}], 'summary': "Added new 'updatetodo' function to props for to-do update.", 'duration': 30.67, 'max_score': 35325.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY35325657.jpg'}, {'end': 35505.387, 'src': 'embed', 'start': 35460.628, 'weight': 3, 'content': [{'end': 35466.693, 'text': 'and then, right here, this is us getting the data, and then this is the name of our mutation.', 'start': 35460.628, 'duration': 6.065}, {'end': 35476.099, 'text': 'so the name of this mutation is update to do, and this name should match what we have right here, which it does.', 'start': 35466.693, 'duration': 9.406}, {'end': 35482.356, 'text': 'So this data is what I get back from the to-do update, to-do.', 'start': 35477.173, 'duration': 5.183}, {'end': 35486.297, 'text': 'So this should be true or false, a Boolean of whether or not it worked.', 'start': 35482.756, 'duration': 3.541}, {'end': 35492.54, 'text': "So we actually don't even need this if we don't want to, because we don't need the response to update the cache.", 'start': 35486.998, 'duration': 5.542}, {'end': 35493.361, 'text': 'We could just do that.', 'start': 35492.641, 'duration': 0.72}, {'end': 35496.502, 'text': 'So first thing we do is read the data from the cache.', 'start': 35494.161, 'duration': 2.341}, {'end': 35499.884, 'text': 'And the thing that we need to update is this to-dos query.', 'start': 35497.163, 'duration': 2.721}, {'end': 35502.065, 'text': "So I'm going to say to-dos query.", 'start': 35500.364, 'duration': 1.701}, {'end': 35505.387, 'text': 'So we now have read this into the cache.', 'start': 35503.046, 'duration': 2.341}], 'summary': "Updating mutation 'update to do' successfully reads and caches data.", 'duration': 44.759, 'max_score': 35460.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY35460628.jpg'}, {'end': 35640.161, 'src': 'embed', 'start': 35613.129, 'weight': 0, 'content': [{'end': 35617.272, 'text': "And these are actually persisting too, right? If I refresh, they're still there.", 'start': 35613.129, 'duration': 4.143}, {'end': 35620.554, 'text': 'So it actually is in fact updating the database too.', 'start': 35617.992, 'duration': 2.562}, {'end': 35621.634, 'text': 'So nice.', 'start': 35621.254, 'duration': 0.38}, {'end': 35624.156, 'text': 'So I want to do the same thing with deleting items.', 'start': 35621.894, 'duration': 2.262}, {'end': 35629.739, 'text': "So we're going to come back up here and do delete mutation.", 'start': 35625.036, 'duration': 4.703}, {'end': 35634.022, 'text': 'And we have basically the code for that too.', 'start': 35631.22, 'duration': 2.802}, {'end': 35640.161, 'text': 'so remove to do and we just pass it an id.', 'start': 35635.859, 'duration': 4.302}], 'summary': 'Persisting and updating database with delete mutation.', 'duration': 27.032, 'max_score': 35613.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY35613129.jpg'}, {'end': 35844.943, 'src': 'embed', 'start': 35810.738, 'weight': 2, 'content': [{'end': 35825.128, 'text': "react component and we're going to render and what we want to render is an input field and the input field that we want to render is the nice material UI one.", 'start': 35810.738, 'duration': 14.39}, {'end': 35827.31, 'text': 'so this one looks really nice.', 'start': 35825.128, 'duration': 2.182}, {'end': 35838.042, 'text': "we're just going to do the basic one and we can just grab the import statement and we can grab this, just this first one.", 'start': 35827.31, 'duration': 10.732}, {'end': 35844.943, 'text': "Okay, so we're going to talk about on change and value in a second.", 'start': 35840.72, 'duration': 4.223}], 'summary': 'Rendering a material ui input field in a react component.', 'duration': 34.205, 'max_score': 35810.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY35810738.jpg'}, {'end': 36059.31, 'src': 'embed', 'start': 36028.328, 'weight': 1, 'content': [{'end': 36034.433, 'text': "So to do that, what I'm going to do is create a function called handle key down.", 'start': 36028.328, 'duration': 6.105}, {'end': 36042.519, 'text': "And here I'm going to say on key down, handle key down.", 'start': 36037.335, 'duration': 5.184}, {'end': 36049.785, 'text': 'So now every time I press a letter, both key down and handle change are going to get called.', 'start': 36044.02, 'duration': 5.765}, {'end': 36055.028, 'text': 'Now what I want to do is listen for when the person hits the enter key.', 'start': 36050.706, 'duration': 4.322}, {'end': 36059.31, 'text': 'So whenever they hit the enter key, we want to submit the form.', 'start': 36055.308, 'duration': 4.002}], 'summary': 'Create handlekeydown function to listen for key events and submit form on enter key press.', 'duration': 30.982, 'max_score': 36028.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY36028328.jpg'}, {'end': 36271.333, 'src': 'embed', 'start': 36241.205, 'weight': 4, 'content': [{'end': 36243.186, 'text': 'First off, this did not clear at the top.', 'start': 36241.205, 'duration': 1.981}, {'end': 36244.147, 'text': 'We want to do that.', 'start': 36243.506, 'duration': 0.641}, {'end': 36246.688, 'text': 'And secondly, it added it at the very bottom.', 'start': 36244.647, 'duration': 2.041}, {'end': 36247.789, 'text': 'I want to add it at the top.', 'start': 36246.788, 'duration': 1.001}, {'end': 36260.064, 'text': "So we know this was getting called, and after we submit, we're just going to say this.setState and set it to an empty string, and that will clear it.", 'start': 36249.093, 'duration': 10.971}, {'end': 36263.791, 'text': "And then our app.js, we're pushing to the end.", 'start': 36261.01, 'duration': 2.781}, {'end': 36266.252, 'text': "There's a function called unshift.", 'start': 36264.351, 'duration': 1.901}, {'end': 36267.832, 'text': 'This adds it to the beginning.', 'start': 36266.732, 'duration': 1.1}, {'end': 36271.333, 'text': 'So if I say first, we now have an item at the beginning.', 'start': 36268.392, 'duration': 2.941}], 'summary': 'Code modification: added clearing at top and pushing to beginning.', 'duration': 30.128, 'max_score': 36241.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY36241205.jpg'}], 'start': 35080.805, 'title': 'React function updates, apollo cache, and form creation', 'summary': 'Covers updating and removing functions in react, utilizing apollo cache for real-time updates and data persistence, and creating forms in react with state management and graphql mutations.', 'chapters': [{'end': 35383.295, 'start': 35080.805, 'title': 'Updating and removing functions in react', 'summary': 'Covers updating and removing functions in react, including the process of updating a mutation and utilizing the compose function to enhance code readability.', 'duration': 302.49, 'highlights': ['The process of updating a mutation in React involves passing variables such as ID and complete, which are mandatory and should match the types in the schema.', 'Utilizing the compose function in React, provided by React Apollo, enhances code readability and allows for squishing higher-order functions together.', 'The use of asynchronous functions and the await keyword in React allows for the handling of asynchronous operations, such as updating mutations, in a structured manner.']}, {'end': 35778.826, 'start': 35383.835, 'title': 'Real-time updating with apollo cache', 'summary': 'Demonstrates how to utilize apollo cache to achieve real-time updating and persisting data, including updating and deleting items and creating to-dos.', 'duration': 394.991, 'highlights': ['The chapter explains how to use Apollo cache to achieve real-time updating and persisting data, including updating and deleting items and creating to-dos.', 'It describes the process of updating the cache to enable real-time changes without having to refresh the page, ensuring optimized performance and reduced requests.', 'The demonstration includes examples of updating and deleting items, with the explanation of the code and functions used for these operations.', 'It also covers the process of creating to-dos, providing insights into implementing input fields for user interaction and submission.']}, {'end': 36266.252, 'start': 35778.846, 'title': 'Creating a form in react', 'summary': 'Discusses creating a form in react to keep track of user input, using state to manage text changes, and handling form submission with key events, along with graphql mutations for creating and updating todos.', 'duration': 487.406, 'highlights': ['The form component in React is created to store and manage user input, utilizing state to track the text changes and handling form submissions with key events.', 'State is used to manage the text input changes, with the initial state being an empty string and the onChange event updating the state with the new text value.', "The handleKeyDown function is implemented to listen for the 'enter' key press, triggering the submission of the form and passing the current text value to the app.js component.", 'GraphQL mutations are utilized to create and update todos, with the createToDo mutation handling the addition of new todos and updating the todo query, along with clearing the input field after submission.']}], 'duration': 1185.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY35080805.jpg', 'highlights': ['Utilizing the compose function in React enhances code readability and allows for squishing higher-order functions together.', 'The process of updating a mutation in React involves passing variables such as ID and complete, which are mandatory and should match the types in the schema.', 'The demonstration includes examples of updating and deleting items, with the explanation of the code and functions used for these operations.', 'The form component in React is created to store and manage user input, utilizing state to track the text changes and handling form submissions with key events.', 'The use of asynchronous functions and the await keyword in React allows for the handling of asynchronous operations, such as updating mutations, in a structured manner.', 'The chapter explains how to use Apollo cache to achieve real-time updating and persisting data, including updating and deleting items and creating to-dos.', 'State is used to manage the text input changes, with the initial state being an empty string and the onChange event updating the state with the new text value.', "The handleKeyDown function is implemented to listen for the 'enter' key press, triggering the submission of the form and passing the current text value to the app.js component.", 'GraphQL mutations are utilized to create and update todos, with the createToDo mutation handling the addition of new todos and updating the todo query, along with clearing the input field after submission.', 'It describes the process of updating the cache to enable real-time changes without having to refresh the page, ensuring optimized performance and reduced requests.', 'It also covers the process of creating to-dos, providing insights into implementing input fields for user interaction and submission.']}, {'end': 37209.789, 'segs': [{'end': 36317.207, 'src': 'embed', 'start': 36289.999, 'weight': 7, 'content': [{'end': 36296.601, 'text': 'I hope that was helpful and you got a good grasp of how to do this and a little taste of how GraphQL and React works.', 'start': 36289.999, 'duration': 6.602}, {'end': 36304.644, 'text': 'Hi guys, this is Zulekha from Edureka.', 'start': 36302.423, 'duration': 2.221}, {'end': 36307.545, 'text': "Today we're going to learn how to become a superhero.", 'start': 36305.104, 'duration': 2.441}, {'end': 36308.705, 'text': 'Just kidding.', 'start': 36308.085, 'duration': 0.62}, {'end': 36313.266, 'text': 'Now becoming a full stack web developer is no less than becoming a superhero.', 'start': 36309.085, 'duration': 4.181}, {'end': 36317.207, 'text': 'It involves continuous dedicated practice and a strong will to learn.', 'start': 36313.666, 'duration': 3.541}], 'summary': 'Becoming a full stack web developer is like being a superhero, requiring continuous practice and a strong will to learn.', 'duration': 27.208, 'max_score': 36289.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY36289999.jpg'}, {'end': 36467.339, 'src': 'embed', 'start': 36443.1, 'weight': 0, 'content': [{'end': 36449.425, 'text': 'So basically, the design, look, and feel of the web is accomplished with the help of HTML, CSS, and JavaScript.', 'start': 36443.1, 'duration': 6.325}, {'end': 36452.307, 'text': 'Then comes the logic layer or the backend layer.', 'start': 36449.725, 'duration': 2.582}, {'end': 36456.851, 'text': 'Now this layer forms a dynamic connection between the front end and the database.', 'start': 36452.708, 'duration': 4.143}, {'end': 36464.917, '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': 36457.271, 'duration': 7.646}, {'end': 36467.339, 'text': 'All of this is powered by a web server.', 'start': 36465.438, 'duration': 1.901}], 'summary': 'Web design achieved with html, css, and javascript; logic layer connects front end to database, powered by a web server.', 'duration': 24.239, 'max_score': 36443.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY36443100.jpg'}, {'end': 36947.915, 'src': 'embed', 'start': 36919.711, 'weight': 6, 'content': [{'end': 36926.036, 'text': 'So how does it do that? Now basically backend developers program the web servers to respond with the right resources.', 'start': 36919.711, 'duration': 6.325}, {'end': 36930.56, 'text': 'So the main aim of the web server here is to respond with the correct resources.', 'start': 36926.477, 'duration': 4.083}, {'end': 36938.547, 'text': 'But where do they get these resources? The web server is connected to a database which is continuously pulled on receiving some requests.', 'start': 36930.981, 'duration': 7.566}, {'end': 36947.915, 'text': 'So the role of a full stack developer here would be to create an application that fills a web page with the required resources by pulling data from the database.', 'start': 36938.947, 'duration': 8.968}], 'summary': 'Backend devs program web servers to respond with resources pulled from the database.', 'duration': 28.204, 'max_score': 36919.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY36919711.jpg'}, {'end': 37052.848, 'src': 'embed', 'start': 37023.539, 'weight': 3, 'content': [{'end': 37029.301, 'text': 'Now like the name suggests it creates versions of your code or your file every time you change something.', 'start': 37023.539, 'duration': 5.762}, {'end': 37034.022, 'text': "So let's say that you created a web application and added an additional feature to it.", 'start': 37029.761, 'duration': 4.261}, {'end': 37040.124, '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': 37034.422, 'duration': 5.702}, {'end': 37044.025, 'text': 'So usually it is very hard to revert back to an older version,', 'start': 37040.504, 'duration': 3.521}, {'end': 37052.848, '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': 37044.025, 'duration': 8.823}], 'summary': 'Version control system tracks code changes for easy reversion.', 'duration': 29.309, 'max_score': 37023.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY37023539.jpg'}, {'end': 37185.02, 'src': 'embed', 'start': 37160.137, 'weight': 8, 'content': [{'end': 37166.324, 'text': "It is the most valued designation and once you practice full-stack web development, you'll become a master of the web.", 'start': 37160.137, 'duration': 6.187}, {'end': 37174.671, 'text': 'and at Edureka we provide a full-stack web development course that has all the required tools and technologies that you need to learn,', 'start': 37166.824, 'duration': 7.847}, {'end': 37177.934, 'text': "and we also make sure that you don't just learn it, you master it.", 'start': 37174.671, 'duration': 3.263}, {'end': 37185.02, 'text': "So, guys, if you're interested in learning the full-stack web development master course or any other training technologies,", 'start': 37178.374, 'duration': 6.646}], 'summary': 'Edureka offers a full-stack web development course with all required tools and technologies to master the skill.', 'duration': 24.883, 'max_score': 37160.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY37160137.jpg'}], 'start': 36266.732, 'title': 'Full stack web development and front-end basics', 'summary': "Provides an overview of full-stack web development including layers, types of developers, reasons to practice it, and the average salary. it also covers the basics of front-end web development, emphasizing html, css, and javascript's importance.", 'chapters': [{'end': 36726.269, 'start': 36266.732, 'title': 'Full stack web development overview', 'summary': 'Provides an overview of full-stack web development, including the different layers involved, the types of web developers, reasons to practice full-stack development, and the average salary of a full stack developer being over $110,000 in the us.', 'duration': 459.537, 'highlights': ['Full-stack web development involves front-end and back-end web development, requiring in-depth knowledge of scripting and programming languages such as HTML, JavaScript, CSS, Java, and Python.', 'The different layers of full-stack web development include the presentation layer (front end), the logic layer (back end), and the database layer.', "Front-end developers are responsible for a website's look and feel, while back-end developers create and maintain the web server, application, and database."]}, {'end': 36898.156, 'start': 36726.709, 'title': 'Front-end web development basics', 'summary': 'Covers the basics of front-end web development, emphasizing the importance of html, css, and javascript in structuring and styling web pages, with javascript enabling interactivity and event handling, making it an essential part of web development.', 'duration': 171.447, 'highlights': ['HTML is the skeleton of every web page, defining its structure and allowing styling of content within HTML tags.', 'CSS styles HTML elements, allowing for color changes, button styling, width adjustments, and the creation of attractive web page designs.', 'JavaScript is essential for interactivity and event handling, manipulating HTML elements and adding motion and graphics to web pages.']}, {'end': 37209.789, 'start': 36898.156, 'title': 'Full stack web development overview', 'summary': 'Explains the role of a full stack developer in serving required resources to a user, discusses important technologies and tools a full stack developer must know and emphasizes the value of becoming a master of full-stack web development.', 'duration': 311.633, 'highlights': ['Full stack developer creates both front end and back end of a web page', 'Importance of version control system for tracking code changes', 'Significance of JavaScript frameworks and libraries in web development', 'Understanding of HTTP protocols and its importance in web development', 'The value and mastery of full-stack web development']}], 'duration': 943.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Q33KBiDriJY/pics/Q33KBiDriJY36266732.jpg', 'highlights': ['Full-stack web development involves front-end and back-end web development, requiring in-depth knowledge of scripting and programming languages such as HTML, JavaScript, CSS, Java, and Python.', 'The different layers of full-stack web development include the presentation layer (front end), the logic layer (back end), and the database layer.', "Front-end developers are responsible for a website's look and feel, while back-end developers create and maintain the web server, application, and database.", 'HTML is the skeleton of every web page, defining its structure and allowing styling of content within HTML tags.', 'JavaScript is essential for interactivity and event handling, manipulating HTML elements and adding motion and graphics to web pages.', 'CSS styles HTML elements, allowing for color changes, button styling, width adjustments, and the creation of attractive web page designs.', 'Full stack developer creates both front end and back end of a web page', 'Importance of version control system for tracking code changes', 'Significance of JavaScript frameworks and libraries in web development', 'Understanding of HTTP protocols and its importance in web development', 'The value and mastery of full-stack web development']}], 'highlights': ['Covers a comprehensive web development crash course including html, css, javascript, jquery, angular 8, react js, node.js, mean and mern stack applications, offering practical examples and emphasizing the importance of css, javascript, and angular 8, with detailed coverage of various properties, techniques, and new features, providing insights into node.js event loop architecture and mean stack application development, and introducing mern stack with graphql and crud operations, as well as ui enhancement and form creation in react, also providing an overview of full-stack web development and front-end basics.', 'The chapter covers HTML, CSS, JavaScript, jQuery, Angular 8, React JS, Node.js, MEAN stack, and MERN stack applications, providing a comprehensive overview of essential programming languages and frameworks for web development.', 'HTML is a standard markup language for creating web pages and web applications, constituted of elements represented by tags.', 'CSS stands for Cascading Style Sheets and controls HTML styling.', 'JavaScript is the most popular programming language for the sixth year in a row.', 'jQuery is the most popular and the most used JavaScript library.', 'The dollar function in jQuery simplifies selecting and manipulating DOM elements.', 'Demonstrating the use of various CSS properties like visibility, white spaces, and direction settings, along with the importance of understanding CSS and having a go-to resource like W3 schools.', 'JavaScript is used for creating interactive web pages and web applications.', 'The chapter covers practical aspects of Angular, including setting up local projects and creating simple applications.', 'Evolution of Angular from version 2 to version 8.', 'ReactJS revolutionized UI development, reducing page reloading and using virtual DOM.', 'MEAN stack refers to a collection of JavaScript-based technologies used to develop web applications.', 'Event emitter facilitates real-time application creation using socket io.', 'Node.js runs on a single thread and processes requests in parallel through an event loop.', 'Full-stack web development involves front-end and back-end web development, requiring in-depth knowledge of scripting and programming languages such as HTML, JavaScript, CSS, Java, and Python.']}