title
Frontend Interview Questions 2023 | Front End Developer Interview Questions And Answers |Simplilearn

description
🔥 IITM Pravartak Professional Certificate Program In Full Stack Development - MERN (India Only): https://www.simplilearn.com/full-stack-developer-course-and-certification-iitm-pravartak?utm_campaign=SCE-FullstackIITM&utm_medium=DescriptionFF&utm_source=youtube 🔥Post Graduate Program In Full Stack Web Development: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=FEInterviewQs&utm_medium=Descriptionff&utm_source=youtube 🔥Caltech Coding Bootcamp (US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=FEInterviewQs&utm_medium=Descriptionff&utm_source=youtube 🔥Full Stack Java Developer (India Only) - https://www.simplilearn.com/java-full-stack-developer-certification-training-course?utm_campaign=FEInterviewQs&utm_medium=Descriptionff&utm_source=youtube This video on Frontend Developer Interview Questions covers 55 commonly asked questions in the interview. Frontend Development is a crucial aspect of Web development. It includes the usage of various technologies and frameworks. This Frontend Developer Interview Questions video covers questions based on - 00:01:53 Git 00:32:15 HTMl 00:52:43 CSS 01:14:36 JavaScript 01:36:56 react JS 02:01:21 Angular ✅Subscribe to our Channel to learn more about the top Technologies: https://bit.ly/2VT4WtH To access the slides, click here: https://www.slideshare.net/Simplilearn/frontend-interview-questions-2021-front-end-developer-interview-questions-and-answers-simplilearn/Simplilearn/frontend-interview-questions-2021-front-end-developer-interview-questions-and-answers-simplilearn ⏩ Check out the Full Stack training videos: https://www.youtube.com/watch?v=8KaJRw-rfn8&list=PLEiEAq2VkUULCC3eEATL4zzuapTjmo1Z_ #InterviewQuestionsAndAnswers #InterviewQuestions #Interview #Interviewprep #InterviewPrepration #GIT #HTML #HTMLInterview #CSS #Javascript #JavascriptInterviewQuestions #JavascriptInterview #JavascriptInterviewQuestionsAndAnswers #ReactJS #ReactInterviewQuestions #ReactInterviewQuestionsandAnswers #ReactJSInterviewQuestions #Angular #AngularInterviewQuestionsForExperienced #AngularInterviewQuestions #AngularInterview #FrontEndInterviewQuestions #FrontEndInterviewQuestionsAndAnswers #FrontEndDeveloper #FrontEndDeveloperInterviewQuestionsAndAnswers #FrontEndDeveloperInterview #FullStackTraining #Simplilearn What does this Frontend Developer Interview Questions video comprise of? Since Frontend development includes several technologies and frameworks, we have handpicked 55 such commonly asked Frontend Developer Interview Questions covering topics like Git, HTML, CSS, JavaScript, React, Angular and Generic Interview Questions. There are demos illustrating the code at the end of each subtopic. These questions will give a general idea of what to expect in your next Frontend Interview. ➡️ About Post Graduate Program In Full Stack Web Development This program will give you the foundation for building full-stack web apps using the Java programming language. You'll begin with the basics of JavaScript, and then venture into some of the more advanced concepts like Angular, Spring Boot, Hibernate, JSPs, and MVC. Now is the perfect time to get started on your career as a full-stack web developer! ✅ Key Features - Caltech CTME Post Graduate Certificate - Enrolment in Simplilearn’s JobAssist - Receive up to 25 CEUs from Caltech CTME - Simplilearn's JobAssist helps you get noticed by top hiring companies - Attend Masterclasses from Caltech CTME instructors - Live virtual classes led by industry experts, hands-on projects and integrated labs - Online Convocation by Caltech CTME Program Director - 20 lesson-end and 5 phase-end projects - Capstone Project in 4 domains - Caltech CTME Circle Membership - Build your own portfolio on GitHub ✅ Skills Covered - Agile - JAVA - Hibernate and JPA - Spring Core 50 - DevOps - HTML5 and CSS3 - AWS - JavaScript ES6 - Servlets - SOAP and REST - JSP 👉Learn more at: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=FEInterviewQs&utm_medium=Description&utm_source=youtube 🔥🔥 Interested in Attending Live Classes? Call Us: IN - 18002127688 / US - +18445327688

detail
{'title': 'Frontend Interview Questions 2023 | Front End Developer Interview Questions And Answers |Simplilearn', 'heatmap': [{'end': 2070.556, 'start': 1895.958, 'weight': 1}, {'end': 3310.959, 'start': 3215.363, 'weight': 0.935}, {'end': 4620.588, 'start': 4454.175, 'weight': 0.884}], 'summary': 'A comprehensive video covering frontend interview questions, version control systems, git operations, html insights, css techniques, javascript concepts, functions, and web development concepts, providing practical insights and demonstrations for each topic.', 'chapters': [{'end': 253.515, 'segs': [{'end': 57.433, 'src': 'embed', 'start': 8.447, 'weight': 0, 'content': [{'end': 10.529, 'text': 'Hello everyone and welcome you all.', 'start': 8.447, 'duration': 2.082}, {'end': 17.014, 'text': "So today we have a very interesting topic coming up and that's called a frontend interview questions.", 'start': 11.63, 'duration': 5.384}, {'end': 23.519, 'text': "As we know it very well in today's scenario, especially for the frontend,", 'start': 18.295, 'duration': 5.224}, {'end': 33.607, 'text': 'we have multiple topics aligned and interviewers ask and expect a lot many common questions to be answered by the participants.', 'start': 23.519, 'duration': 10.088}, {'end': 43.421, 'text': 'So we have brought some very common questions which are usually asked in interviews in web development front.', 'start': 34.968, 'duration': 8.453}, {'end': 56.072, 'text': 'As we know it very well, in our web development we have multiple technologies are involved, especially when it comes to HTML, CSS, JavaScript,', 'start': 44.122, 'duration': 11.95}, {'end': 57.433, 'text': 'Angular and many more.', 'start': 56.072, 'duration': 1.361}], 'summary': 'Discussion on frontend interview questions involving html, css, javascript, and angular.', 'duration': 48.986, 'max_score': 8.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E8447.jpg'}, {'end': 120.701, 'src': 'embed', 'start': 88.633, 'weight': 2, 'content': [{'end': 94.962, 'text': 'Then we have a ReactJS followed by Angular and generic interview questions.', 'start': 88.633, 'duration': 6.329}, {'end': 105.189, 'text': 'these six very important topics are used in web development,', 'start': 97.08, 'duration': 8.109}, {'end': 111.576, 'text': 'so people expect that you are aware about some very common questions which they usually ask.', 'start': 105.189, 'duration': 6.387}, {'end': 112.437, 'text': "so let's get started.", 'start': 111.576, 'duration': 0.861}, {'end': 117.779, 'text': 'So we are going to talk about version control system first.', 'start': 114.597, 'duration': 3.182}, {'end': 120.701, 'text': 'What do you understand with version control system?', 'start': 118.36, 'duration': 2.341}], 'summary': 'Discussion on reactjs, angular, and generic interview questions in web development, emphasizing the importance of being familiar with version control system.', 'duration': 32.068, 'max_score': 88.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E88633.jpg'}, {'end': 200.619, 'src': 'embed', 'start': 148.272, 'weight': 3, 'content': [{'end': 156.394, 'text': 'so you would like to push all the necessary repositories to the centralized system that is called version control system.', 'start': 148.272, 'duration': 8.122}, {'end': 163.972, 'text': 'so it is telling you It is a system that keeps track all the necessary changes made to a file or a set of data.', 'start': 156.394, 'duration': 7.578}, {'end': 175.803, 'text': 'So it ensures that everyone work on a most recent system while taking care about your necessary updates.', 'start': 165.674, 'duration': 10.129}, {'end': 182.469, 'text': 'Next, what is the difference between a centralized and distributed version control system?', 'start': 177.324, 'duration': 5.145}, {'end': 191.693, 'text': 'So, as we know it very well, when we talk about call a centralized system, okay, since central system, what happens like here?', 'start': 183.47, 'duration': 8.223}, {'end': 196.236, 'text': 'it uses the centralized server to store all different version of files.', 'start': 191.693, 'duration': 4.543}, {'end': 200.619, 'text': 'usually we always commit those changes to our local system,', 'start': 196.236, 'duration': 4.383}], 'summary': 'The centralized version control system stores files on a centralized server, while a distributed system allows local commits.', 'duration': 52.347, 'max_score': 148.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E148272.jpg'}], 'start': 8.447, 'title': 'Frontend interview questions and version control systems overview', 'summary': 'Covers common frontend interview questions including git, html5, css3, javascript, reactjs, angular, and generic interview questions. it also explains the significance of version control systems in enabling teams to store and track changes in a centralized repository, highlighting differences between centralized and distributed systems.', 'chapters': [{'end': 120.701, 'start': 8.447, 'title': 'Frontend interview questions', 'summary': 'Discusses common frontend interview questions in web development, covering topics such as git, html5, css3, javascript, reactjs, angular, and generic interview questions.', 'duration': 112.254, 'highlights': ['The chapter covers common frontend interview questions in web development, including Git, HTML5, CSS3, JavaScript, ReactJS, Angular, and generic interview questions.', 'Interviewers expect participants to answer common questions related to HTML, CSS, JavaScript, Angular, and other web development technologies.', 'The chapter provides answers to common interview questions to help participants prepare for frontend interviews.', 'The chapter starts by discussing the importance of being aware of common interview questions related to version control systems, HTML5, CSS3, JavaScript, ReactJS, Angular, and generic interview questions in web development.']}, {'end': 253.515, 'start': 121.162, 'title': 'Version control systems overview', 'summary': 'Explains the importance of version control systems in enabling teams to store and track changes to their work in a centralized repository, highlighting the differences between centralized and distributed systems and their benefits.', 'duration': 132.353, 'highlights': ['The chapter emphasizes the importance of version control systems in enabling teams to store their work in a centralized repository and keep track of changes, ensuring that everyone works on the most recent system while taking care of necessary updates.', 'In comparing centralized and distributed version control systems, it is highlighted that while the former uses a centralized server to store all versions of files, the latter allows every developer to have a copy of all versions, improving the ability to work offline and not relying on single locations for backup.', 'The centralized version control system is described as helping to protect against failure in the local environment and avoiding single point failover by keeping everything under a single location, while the distributed version control system eliminates the threat of server crashes.']}], 'duration': 245.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E8447.jpg', 'highlights': ['The chapter covers common frontend interview questions in web development, including Git, HTML5, CSS3, JavaScript, ReactJS, Angular, and generic interview questions.', 'The chapter provides answers to common interview questions to help participants prepare for frontend interviews.', 'The chapter starts by discussing the importance of being aware of common interview questions related to version control systems, HTML5, CSS3, JavaScript, ReactJS, Angular, and generic interview questions in web development.', 'The chapter emphasizes the importance of version control systems in enabling teams to store their work in a centralized repository and keep track of changes, ensuring that everyone works on the most recent system while taking care of necessary updates.', 'In comparing centralized and distributed version control systems, it is highlighted that while the former uses a centralized server to store all versions of files, the latter allows every developer to have a copy of all versions, improving the ability to work offline and not relying on single locations for backup.']}, {'end': 1932.607, 'segs': [{'end': 304.992, 'src': 'embed', 'start': 278.372, 'weight': 0, 'content': [{'end': 285.496, 'text': 'OK, so whichever cloud environment you will be using it, it could be either GitHub or else you talk about Bitbucket or else you talk about GitLab.', 'start': 278.372, 'duration': 7.124}, {'end': 293.202, 'text': 'So you would like to push all those necessary changes to that location and pull, on the other hand,', 'start': 286.797, 'duration': 6.405}, {'end': 299.706, 'text': 'is responsible to pull to retrieve all those version controlling to your local environment.', 'start': 293.202, 'duration': 6.504}, {'end': 304.992, 'text': "Clear, that's the benefit and that's the difference which comes.", 'start': 301.67, 'duration': 3.322}], 'summary': 'Push changes to cloud (github/bitbucket/gitlab) and pull for version control retrieval.', 'duration': 26.62, 'max_score': 278.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E278372.jpg'}, {'end': 360.159, 'src': 'embed', 'start': 332.481, 'weight': 1, 'content': [{'end': 338.505, 'text': 'OK, so now next question give us a few git commands and their functions.', 'start': 332.481, 'duration': 6.024}, {'end': 341.907, 'text': 'OK, so there are few commands which are there.', 'start': 339.505, 'duration': 2.402}, {'end': 344.188, 'text': 'The first command is like in git config.', 'start': 342.307, 'duration': 1.881}, {'end': 348.431, 'text': 'So in git config you basically configure your username and email address.', 'start': 344.829, 'duration': 3.602}, {'end': 351.153, 'text': 'That is really helpful whenever you would like to push.', 'start': 348.451, 'duration': 2.702}, {'end': 355.575, 'text': 'The repositories in your cloud environment.', 'start': 352.834, 'duration': 2.741}, {'end': 360.159, 'text': 'git init is to initialize a git repository.', 'start': 356.896, 'duration': 3.263}], 'summary': 'Git commands like git config configures username and email. git init initializes a repository.', 'duration': 27.678, 'max_score': 332.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E332481.jpg'}, {'end': 459.632, 'src': 'embed', 'start': 429.472, 'weight': 2, 'content': [{'end': 434.895, 'text': 'okay, so it does not integrate any of its new data into your working files.', 'start': 429.472, 'duration': 5.423}, {'end': 441.92, 'text': 'okay, so git command or git fetch can be done at any point of time to update the remote tracking branches.', 'start': 434.895, 'duration': 7.025}, {'end': 444.441, 'text': 'Here that is a git fetch.', 'start': 442.84, 'duration': 1.601}, {'end': 453.708, 'text': 'on the other side, when we talk about called git pull, So git pull updates the current head branch with the latest changes from the remote servers.', 'start': 444.441, 'duration': 9.267}, {'end': 459.632, 'text': 'Okay, so the git pull downloads the new data and integrates with the current working directory files.', 'start': 453.708, 'duration': 5.924}], 'summary': 'Git fetch updates remote tracking branches, git pull integrates new data into working files.', 'duration': 30.16, 'max_score': 429.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E429472.jpg'}, {'end': 569.807, 'src': 'embed', 'start': 539.892, 'weight': 8, 'content': [{'end': 545.495, 'text': 'to avoid the confliction, or, in case a confliction comes, how to basically fix that up.', 'start': 539.892, 'duration': 5.603}, {'end': 555.294, 'text': 'Okay, so you can see now this kind of messages, like in greater than less than and hyphen equal to sign.', 'start': 547.016, 'duration': 8.278}, {'end': 559.137, 'text': 'this would be shown at a time of resolve.', 'start': 555.294, 'duration': 3.843}, {'end': 562.06, 'text': 'okay. so you basically decide which one you want to take it.', 'start': 559.137, 'duration': 2.923}, {'end': 569.807, 'text': 'so if you have more than one merge conflict in your file, you just scroll down to the next set of conflict markers and repeat the steps.', 'start': 562.06, 'duration': 7.747}], 'summary': 'Resolving merge conflicts involves choosing between conflicting code versions.', 'duration': 29.915, 'max_score': 539.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E539892.jpg'}, {'end': 637.303, 'src': 'embed', 'start': 610.999, 'weight': 3, 'content': [{'end': 618.125, 'text': 'okay, so git merge conflict it arises when you have a multiple branches, when they are trying to merge with each other.', 'start': 610.999, 'duration': 7.126}, {'end': 622.548, 'text': 'so there are some common set of data or files which will be available in both the side.', 'start': 618.125, 'duration': 4.423}, {'end': 627.533, 'text': 'so in that point of time it needs to be avoid confliction.', 'start': 622.548, 'duration': 4.985}, {'end': 633.981, 'text': "so that's how it really works, so how you can resolve it.", 'start': 627.533, 'duration': 6.448}, {'end': 637.303, 'text': 'so you can also resolve the merge conflict using command line.', 'start': 633.981, 'duration': 3.322}], 'summary': 'Git merge conflicts occur when multiple branches merge, requiring resolution to avoid conflicts. they can be resolved using the command line.', 'duration': 26.304, 'max_score': 610.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E610999.jpg'}, {'end': 720.36, 'src': 'embed', 'start': 691.303, 'weight': 5, 'content': [{'end': 693.644, 'text': "OK, so what you're doing it right now?", 'start': 691.303, 'duration': 2.341}, {'end': 698.027, 'text': 'you are adding your files to the stages by saying git add dot.', 'start': 693.644, 'duration': 4.383}, {'end': 701.429, 'text': "And after that you're committing it by using this commit.", 'start': 699.188, 'duration': 2.241}, {'end': 705.071, 'text': 'So now you can merge all the branches with using push.', 'start': 702.45, 'duration': 2.621}, {'end': 706.292, 'text': 'So those changes.', 'start': 705.511, 'duration': 0.781}, {'end': 711.975, 'text': 'OK, to your remote repository on your GitHub and merge your command in a pull request.', 'start': 707.232, 'duration': 4.743}, {'end': 720.36, 'text': 'OK, so that was a quick idea about how you can try to resolve the issue of git conflict.', 'start': 713.216, 'duration': 7.144}], 'summary': 'Add, commit, push, merge changes to resolve git conflict.', 'duration': 29.057, 'max_score': 691.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E691303.jpg'}, {'end': 874.034, 'src': 'embed', 'start': 837.188, 'weight': 4, 'content': [{'end': 842.394, 'text': 'or whatever the changes you want to incorporate, all the new commits in a master branch number one,', 'start': 837.188, 'duration': 5.206}, {'end': 848.682, 'text': 'and it rewrites the project history by creating the brand new commits for each commit in the original branch.', 'start': 842.394, 'duration': 6.288}, {'end': 855.78, 'text': "That's the difference between a Git merge and a Git rebase.", 'start': 849.455, 'duration': 6.325}, {'end': 861.644, 'text': 'So Git is, as you know it very well, it is designed for the centralized repository system.', 'start': 856.54, 'duration': 5.104}, {'end': 874.034, 'text': 'And from the remote repository or from the local repository, you can basically try to update or retrieve whatever number of records you want.', 'start': 862.465, 'duration': 11.569}], 'summary': 'Git rebase creates new commits for original branch commits, designed for centralized repository system.', 'duration': 36.846, 'max_score': 837.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E837188.jpg'}, {'end': 1200.388, 'src': 'embed', 'start': 1168.981, 'weight': 6, 'content': [{'end': 1172.605, 'text': 'So this is how the difference between push and the pull.', 'start': 1168.981, 'duration': 3.624}, {'end': 1182.973, 'text': "everyone. so now we're going to talk about some of the very, very common and useful commands provided by the git and their practical usage.", 'start': 1174.648, 'duration': 8.325}, {'end': 1187.384, 'text': 'okay, now the first command which we always use it with the git.', 'start': 1182.973, 'duration': 4.411}, {'end': 1189.625, 'text': 'okay, that is called git config.', 'start': 1187.384, 'duration': 2.241}, {'end': 1192.506, 'text': 'we talk about, like git config.', 'start': 1189.625, 'duration': 2.881}, {'end': 1200.388, 'text': 'so this config is basically provide the configuration, because if you want to push or pull the repository,', 'start': 1192.506, 'duration': 7.882}], 'summary': "The transcript covers git commands, such as 'git config', and explains the difference between push and pull.", 'duration': 31.407, 'max_score': 1168.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E1168981.jpg'}, {'end': 1381.133, 'src': 'embed', 'start': 1354.774, 'weight': 7, 'content': [{'end': 1358.456, 'text': "so now we're going to talk about our next very interesting area of the git.", 'start': 1354.774, 'duration': 3.682}, {'end': 1359.917, 'text': 'that is known as call.', 'start': 1358.456, 'duration': 1.461}, {'end': 1363.52, 'text': 'what is the merge conflict and how to basically resolve that?', 'start': 1359.917, 'duration': 3.603}, {'end': 1373.887, 'text': 'okay, see, in every situation where the work can be paralyzed, in every situation where the work can be paralyzed, will work will eventually overlap.', 'start': 1363.52, 'duration': 10.367}, {'end': 1378.13, 'text': 'sometimes two developers will change the same line of code in two different ways.', 'start': 1373.887, 'duration': 4.243}, {'end': 1381.133, 'text': "in such cases, git can't tell which version is correct.", 'start': 1378.13, 'duration': 3.003}], 'summary': "Git's merge conflict resolution is crucial to avoid work paralysis caused by overlapping changes.", 'duration': 26.359, 'max_score': 1354.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E1354774.jpg'}], 'start': 253.515, 'title': 'Git operations and workflow', 'summary': 'Covers git push, pull, and merge conflict, resolving merge conflicts, git workflow, and common commands, emphasizing practical usage and importance of understanding and managing conflicting changes.', 'chapters': [{'end': 562.06, 'start': 253.515, 'title': 'Understanding git: push, pull, and merge conflict', 'summary': 'Explains the differences between git push and git pull, key git commands and their functions, and the resolution of merge conflicts, providing insights into their functionalities and use cases.', 'duration': 308.545, 'highlights': ['Git push and pull explained Git push is used to commit changes to the centralized repository, while git pull retrieves version controlling to the local environment.', 'Key git commands and their functions Key git commands such as git config for configuring username and email, git init for initializing a git repository, git add for adding files to staging areas, and git diff for viewing changes are explained.', 'Difference between git fetch and git pull Git fetch downloads new data from the remote repository without integrating it into working files, while git pull updates the current head branch with the latest changes from the remote servers and integrates the new data with the current working directory files.', 'Resolving merge conflicts in Git The explanation of merge conflicts in Git when common data is available between branches and the process of resolving conflicts using manual editing and pull requests is provided.']}, {'end': 906.271, 'start': 562.06, 'title': 'Git merge conflict and resolving strategies', 'summary': 'Explains resolving merge conflicts in git by outlining the steps to resolve conflicts, merge pull requests, and discusses the difference between merge and rebase with practical examples.', 'duration': 344.211, 'highlights': ['The chapter explains the steps to resolve merge conflicts in Git, including scrolling through conflict markers, resolving conflicts, and updating the existing branch, with a green signal indicating no conflicts. The steps to resolve merge conflicts in Git are explained, including scrolling through conflict markers, resolving conflicts, and updating the existing branch, with a green signal indicating no conflicts.', 'The process of resolving merge conflicts using command line is described, including navigating to the repository, listing affected files, opening the files in an editor, manipulating and deciding on changes, and discarding unwanted changes. The process of resolving merge conflicts using command line is described, including navigating to the repository, listing affected files, opening the files in an editor, manipulating and deciding on changes, and discarding unwanted changes.', 'The difference between git merge and git rebase is explained, highlighting the creation of extra merge commits in git merge and rewriting project history in git rebase. The difference between git merge and git rebase is explained, highlighting the creation of extra merge commits in git merge and rewriting project history in git rebase.']}, {'end': 1354.774, 'start': 906.758, 'title': 'Git workflow and common commands', 'summary': 'Discusses the process of initializing a git repository, adding, committing, and pushing files, as well as the practical usage of common git commands such as git config, git init, git clone, git add, git commit, git status, and git reset.', 'duration': 448.016, 'highlights': ['The chapter discusses the process of initializing a git repository, adding, committing, and pushing files, as well as the practical usage of common git commands such as git config, git init, git clone, git add, git commit, git status, and git reset.', "The speaker demonstrates the process of initializing a new empty repository using the 'git init' command, creating and adding a new file, checking the status of the files using 'git status', and staging the changes using 'git add' command.", "The process of committing changes to the repository is explained, including the use of 'git commit -m' command to add a commit message and the subsequent push to the remote repository using 'git push' command.", "The practical usage of common git commands such as 'git config' for setting the author's name and email, 'git clone' for obtaining a repository from an existing URL, and 'git reset' for unstaging files while preserving their contents is highlighted."]}, {'end': 1932.607, 'start': 1354.774, 'title': 'Understanding git merge conflicts', 'summary': 'Discusses the concept of merge conflicts in git, explaining the occurrence of conflicts and how to resolve them, emphasizing the need for decision-making and providing a step-by-step example of avoiding and resolving conflicts in a branch, ultimately highlighting the importance of understanding and managing conflicting changes.', 'duration': 577.833, 'highlights': ['The chapter discusses the concept of merge conflicts in Git Provides an overview of the main topic of the chapter', 'Explaining the occurrence of conflicts and how to resolve them Emphasizes the key points of the chapter, focusing on the need for resolving conflicts', 'Providing a step-by-step example of avoiding and resolving conflicts in a branch Demonstrates the practical application of conflict resolution in Git', 'Emphasizing the importance of understanding and managing conflicting changes Underlines the significance of effectively handling conflicting changes in a Git environment', 'Highlighting the need for decision-making in resolving conflicts Stresses the role of decision-making in resolving merge conflicts']}], 'duration': 1679.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E253515.jpg', 'highlights': ['Git pull retrieves version controlling to the local environment.', 'Key git commands such as git config, git init, git add, and git diff are explained.', 'Git pull updates the current head branch with the latest changes from the remote servers.', 'The process of resolving merge conflicts using command line is described.', 'The difference between git merge and git rebase is explained.', 'The chapter discusses the process of initializing a git repository, adding, committing, and pushing files.', "The practical usage of common git commands such as 'git config', 'git clone', and 'git reset' is highlighted.", 'The chapter discusses the concept of merge conflicts in Git.', 'Emphasizing the importance of understanding and managing conflicting changes.', 'Highlighting the need for decision-making in resolving conflicts.']}, {'end': 2643.554, 'segs': [{'end': 1958.254, 'src': 'embed', 'start': 1932.607, 'weight': 2, 'content': [{'end': 1937.349, 'text': "i hope you're all clear, okay, so the get interview questions are over.", 'start': 1932.607, 'duration': 4.742}, {'end': 1940.99, 'text': 'now we are heading towards an html interview questions.', 'start': 1937.349, 'duration': 3.641}, {'end': 1944.371, 'text': 'now here are a few questions like what is an attribute in html?', 'start': 1940.99, 'duration': 3.381}, {'end': 1946.99, 'text': 'So you can consider the attribute?', 'start': 1945.069, 'duration': 1.921}, {'end': 1955.053, 'text': 'are the properties that can be added into the HTML tag and that changes the way the tag behaves or it is displayed?', 'start': 1946.99, 'duration': 8.063}, {'end': 1958.254, 'text': 'OK, so you can see here you have a call button.', 'start': 1956.093, 'duration': 2.161}], 'summary': 'Transitioning from git to html interview questions, covering attributes and their impact on html tags.', 'duration': 25.647, 'max_score': 1932.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E1932607.jpg'}, {'end': 2038.51, 'src': 'embed', 'start': 2010.168, 'weight': 1, 'content': [{'end': 2014.571, 'text': 'See, semantics or HTMLs are nothing but a call, another coding style.', 'start': 2010.168, 'duration': 4.403}, {'end': 2022.637, 'text': 'Okay So when you talk about a semantics, so they are basically reinforcing the meaning of the contents.', 'start': 2015.292, 'duration': 7.345}, {'end': 2026.159, 'text': 'Like typically you have seen, we are using div and span tag,', 'start': 2022.717, 'duration': 3.442}, {'end': 2033.705, 'text': "but a div and span tag really don't make sense to us as an HTML reviewer unless I go inside those and get to know about what they're really doing it.", 'start': 2026.159, 'duration': 7.546}, {'end': 2038.51, 'text': 'So semantics are nothing but these are the standard tags.', 'start': 2034.265, 'duration': 4.245}], 'summary': 'Semantics in html reinforce content meaning using standard tags.', 'duration': 28.342, 'max_score': 2010.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E2010168.jpg'}, {'end': 2121.485, 'src': 'embed', 'start': 2090.712, 'weight': 0, 'content': [{'end': 2097.854, 'text': 'okay, so SVG is basically known as a kind of a graphic which is written in a typical XML language.', 'start': 2090.712, 'duration': 7.142}, {'end': 2107.656, 'text': "the SVGs are the high quality graphics which doesn't tear off when you basically grow and increase or zoom.", 'start': 2097.854, 'duration': 9.802}, {'end': 2108.976, 'text': 'so normally what happens?', 'start': 2107.656, 'duration': 1.32}, {'end': 2121.485, 'text': 'GIF image we talk about JPEG images after, beyond certain point, their pixel get data-oriented, but here in SVG it never happens.', 'start': 2108.976, 'duration': 12.509}], 'summary': 'Svg is a high-quality graphic format written in xml, which unlike gif and jpeg images, maintains its quality when zoomed or resized.', 'duration': 30.773, 'max_score': 2090.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E2090712.jpg'}, {'end': 2259.443, 'src': 'embed', 'start': 2176.531, 'weight': 3, 'content': [{'end': 2181.873, 'text': 'so obviously we have a different type of options that are available, like an iframe.', 'start': 2176.531, 'duration': 5.342}, {'end': 2184.734, 'text': 'okay, you mean to say page within a web page.', 'start': 2181.873, 'duration': 2.861}, {'end': 2189.356, 'text': 'okay, so we can create a page within a web page with using iframe.', 'start': 2184.734, 'duration': 4.622}, {'end': 2195.999, 'text': 'this is a very, very common questions we used to receive at the time of interview.', 'start': 2189.356, 'duration': 6.643}, {'end': 2198.46, 'text': 'okay, the difference between ordered list and unordered list.', 'start': 2195.999, 'duration': 2.461}, {'end': 2209.066, 'text': 'also, ordered list will give you the different ways to display the data in roman format, in numeric digits,', 'start': 2199.298, 'duration': 9.768}, {'end': 2214.731, 'text': 'or else you can talk about like an alphabetical order, but the unordered list it completely unordered.', 'start': 2209.066, 'duration': 5.665}, {'end': 2219.194, 'text': "you don't get any options like an order list.", 'start': 2214.731, 'duration': 4.463}, {'end': 2229.207, 'text': 'okay, so the ordered list start with ol and unordered list starts with ul In our HTML demos.', 'start': 2219.194, 'duration': 10.013}, {'end': 2231.488, 'text': "I'm going to start with very first file.", 'start': 2229.207, 'duration': 2.281}, {'end': 2232.829, 'text': 'that is known as called table demo.', 'start': 2231.488, 'duration': 1.341}, {'end': 2240.693, 'text': 'Like how we can offer you the table related tags inside the HTML.', 'start': 2234.79, 'duration': 5.903}, {'end': 2246.815, 'text': 'So table as we know it very well, it is designed to organize your contents or give you the proper layout.', 'start': 2241.113, 'duration': 5.702}, {'end': 2253.679, 'text': 'So it is a very old technique we are using to align or to define a proper layout.', 'start': 2247.456, 'duration': 6.223}, {'end': 2259.443, 'text': 'So this HTML page will start working with the very first tag that is called table.', 'start': 2254.781, 'duration': 4.662}], 'summary': 'The transcript discusses creating a page within a web page using iframes, the difference between ordered and unordered lists, and the use of table-related tags in html.', 'duration': 82.912, 'max_score': 2176.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E2176531.jpg'}, {'end': 2492.943, 'src': 'embed', 'start': 2452.851, 'weight': 6, 'content': [{'end': 2453.471, 'text': 'going ahead.', 'start': 2452.851, 'duration': 0.62}, {'end': 2458.854, 'text': "we'll be talking about, like in, how we can offer you the svg scalar vector graphics.", 'start': 2453.471, 'duration': 5.383}, {'end': 2463.276, 'text': 'that is there a feature under added under the html 5.0.', 'start': 2458.854, 'duration': 4.422}, {'end': 2464.676, 'text': "so how you'll be adding it.", 'start': 2463.276, 'duration': 1.4}, {'end': 2467.038, 'text': "let's take a look.", 'start': 2464.676, 'duration': 2.362}, {'end': 2473.501, 'text': 'let me add a new file call svg demo dot html.', 'start': 2467.038, 'duration': 6.463}, {'end': 2479.303, 'text': "here let me add a template and here onwards we'll be adding this svg.", 'start': 2473.501, 'duration': 5.802}, {'end': 2480.944, 'text': 'so svg itself is a tag.', 'start': 2479.303, 'duration': 1.641}, {'end': 2492.943, 'text': 'so we are using this SVG here and this SVG we have to provide some standard width and height.', 'start': 2484.421, 'duration': 8.522}], 'summary': 'Discussion on implementing svg (scalable vector graphics) in html 5.0, including adding the svg tag and specifying width and height.', 'duration': 40.092, 'max_score': 2452.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E2452851.jpg'}], 'start': 1932.607, 'title': 'Html interview insights and table/svg demo', 'summary': 'Covers html interview insights including attributes, semantics, svg, table creation, text separation, nested web page creation, and differences between ordered and unordered lists, along with the demonstration of creating an html table using table, tr, th, and td tags, organizing data, customization with inline styles, and introducing svg in html 5.0 with the creation of a circle and its properties.', 'chapters': [{'end': 2231.488, 'start': 1932.607, 'title': 'Html interview insights', 'summary': 'Covers html interview questions, including attributes, semantics, svg, table creation, text separation, nested web page creation, and differences between ordered and unordered lists.', 'duration': 298.881, 'highlights': ["The SVGs are high quality graphics which don't pixelate when zoomed, providing accurate content at any level. SVGs are high quality graphics written in XML language that do not pixelate when zoomed, ensuring accurate content at any level.", 'Semantics in HTML reinforce the meaning of contents through standard tags like strong and em, making more sense to users. Semantics in HTML reinforce content meaning through standard tags like strong and em, making more sense to users than div and span tags.', "Attributes are properties added into HTML tags that change the way the tag behaves or is displayed. Attributes are properties added into HTML tags that alter the tag's behavior or display.", 'Creating a nested web page in HTML can be done using iframe to embed a page within a web page. Nested web pages in HTML can be created using iframes to embed a page within another web page.', 'Ordered lists can display data in different formats like roman, numeric, or alphabetical, while unordered lists are completely unordered. Ordered lists can display data in various formats like roman, numeric, or alphabetical, while unordered lists have no specific order.']}, {'end': 2643.554, 'start': 2231.488, 'title': 'Html table and svg demo', 'summary': 'Explores the creation of an html table using table, tr, th, and td tags, including the organization of data and customization with inline styles, followed by the introduction of svg in html 5.0 with the creation of a circle and its properties.', 'duration': 412.066, 'highlights': ['The chapter explores the creation of an HTML table using table, tr, th, and td tags, including the organization of data and customization with inline styles. The HTML page demonstrates the creation of an HTML table using tags like table, tr, th, and td, along with the organization of data and the application of inline styles to customize the table layout.', 'The introduction of SVG in HTML 5.0 is showcased with the creation of a circle and its properties, including stroke, fill color, and the ability to maintain quality at different zoom levels. The chapter introduces SVG in HTML 5.0 and demonstrates the creation of a circle with properties like stroke, fill color, and the ability to maintain quality at different zoom levels.']}], 'duration': 710.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E1932607.jpg', 'highlights': ['SVGs are high quality graphics written in XML language that do not pixelate when zoomed, ensuring accurate content at any level.', 'Semantics in HTML reinforce content meaning through standard tags like strong and em, making more sense to users than div and span tags.', "Attributes are properties added into HTML tags that alter the tag's behavior or display.", 'Creating a nested web page in HTML can be done using iframes to embed a page within another web page.', 'Ordered lists can display data in various formats like roman, numeric, or alphabetical, while unordered lists have no specific order.', 'The HTML page demonstrates the creation of an HTML table using tags like table, tr, th, and td, along with the organization of data and the application of inline styles to customize the table layout.', 'The chapter introduces SVG in HTML 5.0 and demonstrates the creation of a circle with properties like stroke, fill color, and the ability to maintain quality at different zoom levels.']}, {'end': 3565.404, 'segs': [{'end': 2700.51, 'src': 'embed', 'start': 2660.171, 'weight': 0, 'content': [{'end': 2669.5, 'text': "see HTML page comes with loads and loads of data now, how you'll be separating it out now, how you'll be arranging it properly to tell like, okay,", 'start': 2660.171, 'duration': 9.329}, {'end': 2672.103, 'text': 'this particular section contains this related data.', 'start': 2669.5, 'duration': 2.603}, {'end': 2676.469, 'text': 'So in HTML5 we have a one beautiful feature comes that is known as called semantics.', 'start': 2672.643, 'duration': 3.826}, {'end': 2685.303, 'text': 'It is a feature of HTML5 that not only helps the Google that is which we talk about called search engine optimization,', 'start': 2676.549, 'duration': 8.754}, {'end': 2693.208, 'text': "that's called SEO but also to make the developer's life even more easier to understand the contents.", 'start': 2685.303, 'duration': 7.905}, {'end': 2694.369, 'text': 'what is there beneath?', 'start': 2693.208, 'duration': 1.161}, {'end': 2697.749, 'text': "so let's go ahead and talk about our next feature call.", 'start': 2694.369, 'duration': 3.38}, {'end': 2699.23, 'text': "how you're going to be separating it out.", 'start': 2697.749, 'duration': 1.481}, {'end': 2700.51, 'text': "so this one's called semantics.", 'start': 2699.23, 'duration': 1.28}], 'summary': 'Html5 introduces semantics for easier content organization and seo optimization.', 'duration': 40.339, 'max_score': 2660.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E2660171.jpg'}, {'end': 2860.169, 'src': 'embed', 'start': 2831.604, 'weight': 3, 'content': [{'end': 2841.318, 'text': "Well, coming to the next area of our HTML, we're going to talk about something called how you're going to be defining a nested HTML page.", 'start': 2831.604, 'duration': 9.714}, {'end': 2845.184, 'text': 'So nested HTML page, we have a feature that means page interface.', 'start': 2841.899, 'duration': 3.285}, {'end': 2850.008, 'text': "So that's called iframe.", 'start': 2846.027, 'duration': 3.981}, {'end': 2857.789, 'text': 'Iframe is a feature that helps the user to define the page under the page.', 'start': 2850.748, 'duration': 7.041}, {'end': 2860.169, 'text': "And how do we use that? Let's take a look.", 'start': 2858.269, 'duration': 1.9}], 'summary': 'Html iframe feature enables nesting pages for page interface.', 'duration': 28.565, 'max_score': 2831.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E2831604.jpg'}, {'end': 3086.213, 'src': 'embed', 'start': 3053.043, 'weight': 4, 'content': [{'end': 3056.445, 'text': 'one is called ordered list and second for unordered list.', 'start': 3053.043, 'duration': 3.402}, {'end': 3062.328, 'text': 'ordered list always starts with ol.', 'start': 3056.445, 'duration': 5.883}, {'end': 3065.69, 'text': 'yeah, it always starts with ol called ordered list.', 'start': 3062.328, 'duration': 3.362}, {'end': 3067.011, 'text': "under this we'll be using li.", 'start': 3065.69, 'duration': 1.321}, {'end': 3068.792, 'text': 'that stands for list items.', 'start': 3067.011, 'duration': 1.781}, {'end': 3079.149, 'text': "you can give the items like i'm talking about, like in soap, okay, and another one i can just take is called mobiles.", 'start': 3068.792, 'duration': 10.357}, {'end': 3083.752, 'text': 'next we are talking about machines.', 'start': 3079.149, 'duration': 4.603}, {'end': 3086.213, 'text': 'so that is called ordered list.', 'start': 3083.752, 'duration': 2.461}], 'summary': 'Explains ordered and unordered lists using ol and li. provides examples of items such as soap and mobiles.', 'duration': 33.17, 'max_score': 3053.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3053043.jpg'}, {'end': 3175.226, 'src': 'embed', 'start': 3113.91, 'weight': 5, 'content': [{'end': 3115.391, 'text': 'the other hand, we have this option.', 'start': 3113.91, 'duration': 1.481}, {'end': 3121.973, 'text': "like it, you will call unordered list and then, on this unordered list, you won't get any kind of sequences.", 'start': 3115.391, 'duration': 6.582}, {'end': 3127.416, 'text': 'but yes, the data would be available to us, but there will be no sequence kept in.', 'start': 3121.973, 'duration': 5.443}, {'end': 3129.777, 'text': 'so here this is called ul.', 'start': 3127.416, 'duration': 2.361}, {'end': 3140.87, 'text': 'yeah, unordered list.', 'start': 3139.109, 'duration': 1.761}, {'end': 3142.031, 'text': "let's check.", 'start': 3140.87, 'duration': 1.161}, {'end': 3149.135, 'text': 'now we can see the only disks are coming up, but there is no exactly the type.', 'start': 3142.031, 'duration': 7.104}, {'end': 3154.578, 'text': 'okay, so that is a quick difference between the ordered list and unordered list provided by html tools.', 'start': 3149.135, 'duration': 5.443}, {'end': 3160.51, 'text': 'Okay, so we have already seen the difference between ordered list and unordered list.', 'start': 3156.966, 'duration': 3.544}, {'end': 3165.736, 'text': "Now it's time to talk about our another type of interview questions, which is regards to your CSS.", 'start': 3160.67, 'duration': 5.066}, {'end': 3169.76, 'text': 'Now in CSS interview.', 'start': 3167.277, 'duration': 2.483}, {'end': 3175.226, 'text': 'the first question they always ask you like how do you add CSS styling in HTML?', 'start': 3169.76, 'duration': 5.466}], 'summary': 'Comparison between ordered and unordered lists in html and a mention of css interview questions.', 'duration': 61.316, 'max_score': 3113.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3113910.jpg'}, {'end': 3310.959, 'src': 'heatmap', 'start': 3203.28, 'weight': 7, 'content': [{'end': 3208.081, 'text': 'okay, that is the additional file which you write it in the css and you include it in html.', 'start': 3203.28, 'duration': 4.801}, {'end': 3212.302, 'text': 'and, third is called, which is the internal style sheet which you write it within your html.', 'start': 3208.081, 'duration': 4.221}, {'end': 3215.363, 'text': 'but the only difference happens when you talk about external.', 'start': 3212.302, 'duration': 3.061}, {'end': 3218.904, 'text': 'it is reusable across multiple web pages.', 'start': 3215.363, 'duration': 3.541}, {'end': 3223.728, 'text': 'Now the different type of CSS selectors which are available.', 'start': 3220.822, 'duration': 2.906}, {'end': 3227.195, 'text': 'So we have a different selectors like an universal selector which is available.', 'start': 3223.808, 'duration': 3.387}, {'end': 3233.586, 'text': 'where you use the asterisk sign and select all the elements and offer the common style.', 'start': 3227.805, 'duration': 5.781}, {'end': 3241.488, 'text': 'second, we talk about element type selector, where you have the specific element name into your mind and you offer that particular type of selector.', 'start': 3233.586, 'duration': 7.902}, {'end': 3249.611, 'text': 'id selector is responsible to select the particular element without having the proper id class selector,', 'start': 3241.488, 'duration': 8.123}, {'end': 3254.538, 'text': 'which starts with a dot class OK and having the class name.', 'start': 3249.611, 'duration': 4.927}, {'end': 3256.119, 'text': 'we talk about decedent selector.', 'start': 3254.538, 'duration': 1.581}, {'end': 3260.322, 'text': 'So in decedent selector you basically try to select all the elements which are the part of that.', 'start': 3256.159, 'duration': 4.163}, {'end': 3266.562, 'text': 'okay, so you are selecting this container and under that all the child elements of the box.', 'start': 3261.36, 'duration': 5.202}, {'end': 3273.165, 'text': 'okay, so we are talking about like in what of your decision selector we talk about called child combinator.', 'start': 3266.562, 'duration': 6.603}, {'end': 3278.288, 'text': 'so in this case you are basically trying to select all those which is the child of this container.', 'start': 3273.165, 'duration': 5.123}, {'end': 3283.39, 'text': 'so you are using this greater than symbol of container.box.', 'start': 3278.288, 'duration': 5.102}, {'end': 3287.152, 'text': 'okay, so selecting all those which is having the child name called box available.', 'start': 3283.39, 'duration': 3.762}, {'end': 3293.514, 'text': "then you're talking about a general sibling selectors with this tinder sign.", 'start': 3287.932, 'duration': 5.582}, {'end': 3301.736, 'text': 'and finally we talk about like an attribute selector where you have a proper attribute available to you.', 'start': 3293.514, 'duration': 8.222}, {'end': 3310.959, 'text': 'okay, so these are known as call a general CSS selectors, followed by we have a next question, like in what is SAS lesson stylus?', 'start': 3301.736, 'duration': 9.223}], 'summary': 'Explains different types of css selectors and their usage, including universal, element type, id, class, descendant, child combinator, general sibling, and attribute selectors.', 'duration': 38.208, 'max_score': 3203.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3203280.jpg'}, {'end': 3316.663, 'src': 'embed', 'start': 3287.932, 'weight': 13, 'content': [{'end': 3293.514, 'text': "then you're talking about a general sibling selectors with this tinder sign.", 'start': 3287.932, 'duration': 5.582}, {'end': 3301.736, 'text': 'and finally we talk about like an attribute selector where you have a proper attribute available to you.', 'start': 3293.514, 'duration': 8.222}, {'end': 3310.959, 'text': 'okay, so these are known as call a general CSS selectors, followed by we have a next question, like in what is SAS lesson stylus?', 'start': 3301.736, 'duration': 9.223}, {'end': 3316.663, 'text': 'friends, these are the advanced level of thesis and used in the industry.', 'start': 3310.959, 'duration': 5.704}], 'summary': 'The transcript covers general sibling selectors, attribute selectors, and advanced css preprocessors like sas and stylus, used in the industry.', 'duration': 28.731, 'max_score': 3287.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3287932.jpg'}, {'end': 3368.912, 'src': 'embed', 'start': 3342.281, 'weight': 10, 'content': [{'end': 3351.323, 'text': 'But once again, it is very awesome CSS, which can offer you the mathematical functions as well as the usability.', 'start': 3342.281, 'duration': 9.042}, {'end': 3353.043, 'text': 'You talk about less.', 'start': 3352.063, 'duration': 0.98}, {'end': 3359.385, 'text': 'OK, so we talk about linear style sheet where you can see all statements which starts with at the rate sign.', 'start': 3353.704, 'duration': 5.681}, {'end': 3363.406, 'text': 'There in SAS, every single variable start with the dollar sign.', 'start': 3360.185, 'duration': 3.221}, {'end': 3366.791, 'text': 'Then you talk about stylus.', 'start': 3365.711, 'duration': 1.08}, {'end': 3368.912, 'text': 'It is also flexible CSS.', 'start': 3367.211, 'duration': 1.701}], 'summary': 'Css offers mathematical functions, usability, and flexibility in various formats like less, sass, and stylus.', 'duration': 26.631, 'max_score': 3342.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3342281.jpg'}, {'end': 3420.2, 'src': 'embed', 'start': 3392.213, 'weight': 9, 'content': [{'end': 3401.003, 'text': 'So here, so box sizing property actually defines how to basically define height and the width of the box which are calculated.', 'start': 3392.213, 'duration': 8.79}, {'end': 3406.969, 'text': 'So you talk about a term name called content box, you talk about padding box and you talk about border box.', 'start': 3401.804, 'duration': 5.165}, {'end': 3410.793, 'text': 'Typically we use three different type of box, content, padding and border box.', 'start': 3407.39, 'duration': 3.403}, {'end': 3412.975, 'text': 'in a content box.', 'start': 3411.974, 'duration': 1.001}, {'end': 3420.2, 'text': 'these are the default width and the height which can apply to the elements content which are there under the content box.', 'start': 3412.975, 'duration': 7.225}], 'summary': 'The box-sizing property defines height and width for content, padding, and border boxes.', 'duration': 27.987, 'max_score': 3392.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3392213.jpg'}, {'end': 3466.899, 'src': 'embed', 'start': 3437.386, 'weight': 11, 'content': [{'end': 3440.289, 'text': 'way to hide the element in a css.', 'start': 3437.386, 'duration': 2.903}, {'end': 3441.53, 'text': 'so we have a different way.', 'start': 3440.289, 'duration': 1.241}, {'end': 3443.953, 'text': 'either we can use display none.', 'start': 3441.53, 'duration': 2.423}, {'end': 3446.075, 'text': 'that means whatever is there inside the dom.', 'start': 3443.953, 'duration': 2.122}, {'end': 3447.136, 'text': "it won't be visible to you.", 'start': 3446.075, 'duration': 1.061}, {'end': 3452.021, 'text': 'second option is visibility hidden.', 'start': 3447.136, 'duration': 4.885}, {'end': 3458.015, 'text': 'that is another property through which you can Eliminate the visibility.', 'start': 3452.021, 'duration': 5.994}, {'end': 3461.317, 'text': 'but the thing is like it is not visible to the user.', 'start': 3458.015, 'duration': 3.302}, {'end': 3466.899, 'text': 'But this element is added to the DOM and takes up the space, But in display none.', 'start': 3461.317, 'duration': 5.582}], 'summary': 'Two ways to hide elements in css: display none and visibility hidden.', 'duration': 29.513, 'max_score': 3437.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3437386.jpg'}, {'end': 3537.521, 'src': 'embed', 'start': 3509.601, 'weight': 12, 'content': [{'end': 3516.703, 'text': 'So when you talk about PID equal to what thing, so it automatically tried to override the highest precedence.', 'start': 3509.601, 'duration': 7.102}, {'end': 3522.057, 'text': 'okay, now, what are the css sprites?', 'start': 3518.556, 'duration': 3.501}, {'end': 3529.179, 'text': 'css sprites is a technique where you can basically take a larger image.', 'start': 3522.057, 'duration': 7.122}, {'end': 3537.521, 'text': 'okay, download in a single shot and try to cut down into the pieces and utilize the way you always want.', 'start': 3529.179, 'duration': 8.342}], 'summary': 'Discussion on pid, css sprites technique for image optimization', 'duration': 27.92, 'max_score': 3509.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3509601.jpg'}], 'start': 2643.554, 'title': 'Html5 semantics, nested html, lists, css interview questions, and advanced css techniques', 'summary': 'Introduces html5 semantics for structuring, nested html and list display, covers html and css interview questions, and discusses advanced css techniques including selectors, sas, box sizing, hiding elements, and css sprites.', 'chapters': [{'end': 2830.249, 'start': 2643.554, 'title': 'Html5 semantics for better structuring', 'summary': 'Introduces the feature of html5 called semantics, which helps in organizing and structuring html pages for better readability and search engine optimization by using tags like header, footer, nav, and article.', 'duration': 186.695, 'highlights': ['HTML5 semantics feature is designed to help with search engine optimization and make it easier for developers to understand the contents. The feature of HTML5 called semantics helps the Google search engine optimization and makes it easier for developers to understand the contents.', 'Tags like header, footer, nav, and article are used to arrange and separate the sections of an HTML page for better organization and readability. Tags like header, footer, nav, and article are used to arrange and separate the sections of an HTML page for better organization and readability.', 'Using HTML5 semantics, developers can create n number of sections and define elements like summary for better structuring of the content. Developers can create n number of sections and define elements like summary for better structuring of the content using HTML5 semantics.']}, {'end': 3149.135, 'start': 2831.604, 'title': 'Nested html and list display', 'summary': 'Covers how to define a nested html page using iframe to embed external content and how to display data in the form of ordered and unordered lists, with a focus on properties, attributes, and usage examples.', 'duration': 317.531, 'highlights': ['Explaining the usage of iframe to embed external content in a nested HTML page, with a demonstration of setting height and width properties. Iframe usage, setting height and width properties, demonstration of embedding external content.', 'Demonstrating the usage of ordered list (ol) and list items (li) to display data in a sequential and ordered format, with options to change the type of numbering. Usage of ordered list and list items for sequential data display, options to change numbering type.', 'Describing the usage of unordered list (ul) to display data without any specific sequence, with a focus on the absence of numbering. Usage of unordered list for non-sequential data display, absence of numbering.']}, {'end': 3287.152, 'start': 3149.135, 'title': 'Html and css interview questions', 'summary': 'Discusses the differences between ordered and unordered lists in html, and the various ways to add css styling in html, including inline css, external style sheet, and internal style sheet. it also covers different css selectors like universal selector, element type selector, id selector, class selector, descendant selector, and child combinator.', 'duration': 138.017, 'highlights': ['The chapter covers the differences between ordered and unordered lists in HTML.', 'It discusses the various ways to add CSS styling in HTML, including inline CSS, external style sheet, and internal style sheet.', 'Different CSS selectors such as universal selector, element type selector, id selector, class selector, descendant selector, and child combinator are explained.']}, {'end': 3565.404, 'start': 3287.932, 'title': 'Css selectors, sas, box sizing, hiding elements, css sprites', 'summary': "Discusses css selectors including general sibling and attribute selectors, introduces sas and its benefits, explains box sizing property and its types, discusses ways to hide elements in css, explains the importance of 'important' keyword in css, and describes css sprites technique for optimizing image loading.", 'duration': 277.472, 'highlights': ['The chapter discusses the box sizing property and its types: content box, padding box, and border box, which determine the calculation of height and width of the box elements. It explains how the box sizing property defines the height and width of different box types (content, padding, border) and their impact on box elements.', 'It introduces SAS as a systematically awesome style sheet, taking CSS to the next level with mathematical functions and usability, and explains the differences between SAS, LESS, and Stylus. The transcript introduces SAS as a next-generation CSS that enhances CSS with mathematical functions, usability, and flexibility, while highlighting the differences between SAS, LESS, and Stylus.', "The chapter explains the techniques to hide elements in CSS, including using 'display none' to eliminate visibility and not load in the DOM, and 'visibility hidden' to hide the element while it still takes up space in the DOM. It elaborates on different techniques to hide elements in CSS such as 'display none' and 'visibility hidden', highlighting the impact on DOM loading and space usage.", 'It describes the CSS sprites technique as a method to optimize image loading by combining multiple smaller images into a single larger image to reduce HTTP calls and improve performance. The transcript explains CSS sprites as a technique to optimize image loading by combining multiple smaller images into a single larger image, reducing HTTP calls and improving performance.', "The chapter introduces general sibling selectors, attribute selectors, and discusses CSS techniques like position absolute and the 'important' keyword in CSS. It introduces general sibling selectors, attribute selectors, and CSS techniques such as position absolute and the 'important' keyword, highlighting their significance in CSS development."]}], 'duration': 921.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E2643554.jpg', 'highlights': ['HTML5 semantics feature is designed to help with search engine optimization and make it easier for developers to understand the contents.', 'Tags like header, footer, nav, and article are used to arrange and separate the sections of an HTML page for better organization and readability.', 'Using HTML5 semantics, developers can create n number of sections and define elements like summary for better structuring of the content.', 'Explaining the usage of iframe to embed external content in a nested HTML page, with a demonstration of setting height and width properties.', 'Demonstrating the usage of ordered list (ol) and list items (li) to display data in a sequential and ordered format, with options to change the type of numbering.', 'Describing the usage of unordered list (ul) to display data without any specific sequence, with a focus on the absence of numbering.', 'The chapter covers the differences between ordered and unordered lists in HTML.', 'It discusses the various ways to add CSS styling in HTML, including inline CSS, external style sheet, and internal style sheet.', 'Different CSS selectors such as universal selector, element type selector, id selector, class selector, descendant selector, and child combinator are explained.', 'The chapter discusses the box sizing property and its types: content box, padding box, and border box, which determine the calculation of height and width of the box elements.', 'It introduces SAS as a systematically awesome style sheet, taking CSS to the next level with mathematical functions and usability, and explains the differences between SAS, LESS, and Stylus.', "The chapter explains the techniques to hide elements in CSS, including using 'display none' to eliminate visibility and not load in the DOM, and 'visibility hidden' to hide the element while it still takes up space in the DOM.", 'It describes the CSS sprites technique as a method to optimize image loading by combining multiple smaller images into a single larger image to reduce HTTP calls and improve performance.', "The chapter introduces general sibling selectors, attribute selectors, and discusses CSS techniques like position absolute and the 'important' keyword in CSS."]}, {'end': 4454.175, 'segs': [{'end': 3590.813, 'src': 'embed', 'start': 3565.404, 'weight': 0, 'content': [{'end': 3571.128, 'text': 'so it is used to minimize the loading time of your web page by combining multiple smaller picture into the single image.', 'start': 3565.404, 'duration': 5.724}, {'end': 3576.089, 'text': "okay, that's what the CSS sprites are.", 'start': 3573.348, 'duration': 2.741}, {'end': 3581.47, 'text': 'so which properties used to underlines and strike through and the over line text?', 'start': 3576.089, 'duration': 5.381}, {'end': 3588.892, 'text': 'so we have this option textile, textile, text decoration, text transform.', 'start': 3581.47, 'duration': 7.422}, {'end': 3590.813, 'text': 'okay, so the text decoration.', 'start': 3588.892, 'duration': 1.921}], 'summary': 'Css sprites reduce web page loading time by combining multiple images. text decoration properties include underline, strike through, and over line text.', 'duration': 25.409, 'max_score': 3565.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3565404.jpg'}, {'end': 3650.787, 'src': 'embed', 'start': 3623.557, 'weight': 1, 'content': [{'end': 3630.522, 'text': 'okay, the number one, which is known as call external css, internal css and inline css.', 'start': 3623.557, 'duration': 6.965}, {'end': 3638.048, 'text': 'external css means you have some css features externally used and that you want to make it available locally.', 'start': 3630.522, 'duration': 7.526}, {'end': 3640.21, 'text': "okay, let's take a look here.", 'start': 3638.048, 'duration': 2.162}, {'end': 3650.787, 'text': "i'm going to create the new file under the css demo that is known as call styles.css, and here we can write some normal styles,", 'start': 3640.21, 'duration': 10.577}], 'summary': 'Introduction to using external, internal, and inline css in web development.', 'duration': 27.23, 'max_score': 3623.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3623557.jpg'}, {'end': 3820.375, 'src': 'embed', 'start': 3792.792, 'weight': 2, 'content': [{'end': 3799.077, 'text': 'that is called internal style sheet, that is called inline style sheet, and this is known as external style sheet.', 'start': 3792.792, 'duration': 6.285}, {'end': 3803.04, 'text': "so i'm sure we got the idea about how the three style sheets are utilized together.", 'start': 3799.077, 'duration': 3.963}, {'end': 3813.009, 'text': 'well, going ahead and taking me towards another very interesting area of our CSS, called different type of CSS selectors.', 'start': 3804.741, 'duration': 8.268}, {'end': 3820.375, 'text': 'see, ultimate goal of CSS is what to apply the style on your target elements.', 'start': 3813.009, 'duration': 7.366}], 'summary': 'Three types of style sheets and the goal of css explained.', 'duration': 27.583, 'max_score': 3792.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3792792.jpg'}, {'end': 4053.751, 'src': 'embed', 'start': 4030.391, 'weight': 3, 'content': [{'end': 4037.637, 'text': 'so we i told you about element selector, where you target the specific element id selector with the id attribute.', 'start': 4030.391, 'duration': 7.246}, {'end': 4041.661, 'text': 'class means you always use with the id class id.', 'start': 4037.637, 'duration': 4.024}, {'end': 4042.722, 'text': "we'll talk about universal.", 'start': 4041.661, 'duration': 1.061}, {'end': 4043.722, 'text': 'to talk about s.', 'start': 4042.722, 'duration': 1}, {'end': 4050.308, 'text': "take, you talk about group selector if you're trying to turn the group of elements which you want to utilize it together.", 'start': 4043.722, 'duration': 6.586}, {'end': 4053.751, 'text': 'so these are the quick benefits and the ways how we define it.', 'start': 4050.308, 'duration': 3.443}], 'summary': 'Explained element, id, class, universal, and group selectors for targeting specific elements in web development.', 'duration': 23.36, 'max_score': 4030.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4030391.jpg'}, {'end': 4142.386, 'src': 'embed', 'start': 4105.999, 'weight': 4, 'content': [{'end': 4106.479, 'text': 'Are we clear??', 'start': 4105.999, 'duration': 0.48}, {'end': 4110.943, 'text': 'And visibility hidden leaves the element in the normal flow.', 'start': 4107.08, 'duration': 3.863}, {'end': 4113.705, 'text': 'Are we clear? But occupies a space in a DOM.', 'start': 4111.502, 'duration': 2.203}, {'end': 4119.549, 'text': 'That means it would not be showing the elements in your browser, but behind the scene, it will take the space.', 'start': 4114.305, 'duration': 5.244}, {'end': 4122.031, 'text': 'So it will be quite heavy.', 'start': 4120.83, 'duration': 1.201}, {'end': 4125.374, 'text': 'So display none is a better option compared to the visibility hidden.', 'start': 4122.131, 'duration': 3.243}, {'end': 4128.416, 'text': 'Both options are designed to hide the elements.', 'start': 4126.094, 'duration': 2.322}, {'end': 4130.938, 'text': 'Let me show you a very simple example here.', 'start': 4128.916, 'duration': 2.022}, {'end': 4142.386, 'text': "So, first statement what I'm trying to do is here I'm defining this ex1 and this ex1.", 'start': 4131.598, 'duration': 10.788}], 'summary': "Using display none instead of visibility hidden is better for hiding elements as it doesn't occupy space in the dom.", 'duration': 36.387, 'max_score': 4105.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4105999.jpg'}, {'end': 4263.7, 'src': 'embed', 'start': 4238.308, 'weight': 5, 'content': [{'end': 4244.67, 'text': 'so we understood about the way how to basically hide the elements from the browser.', 'start': 4238.308, 'duration': 6.362}, {'end': 4253.236, 'text': 'There is another feature, friends, coming up in the CSS front, and that is called a feature called property called important.', 'start': 4246.414, 'duration': 6.822}, {'end': 4256.737, 'text': 'So important is again a type of property.', 'start': 4254.137, 'duration': 2.6}, {'end': 4263.7, 'text': 'It is a rule in CSS to add more importance to a particular property than like a normal value.', 'start': 4257.358, 'duration': 6.342}], 'summary': "Css introduces a new feature called 'important' to add more importance to a property.", 'duration': 25.392, 'max_score': 4238.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4238308.jpg'}], 'start': 3565.404, 'title': 'Css techniques and properties', 'summary': "Covers css sprites for optimizing web page loading time, three ways to add css, utilization of three style sheets, various css selectors, and two ways to hide elements in css, with 'display none' being recommended. it also introduces a property to add more importance to a particular property.", 'chapters': [{'end': 3792.792, 'start': 3565.404, 'title': 'Css sprites and ways to add css', 'summary': 'Covers css sprites which help minimize web page loading time by combining images, and it also explores the three ways to add css to a webpage: external, internal, and inline.', 'duration': 227.388, 'highlights': ['CSS sprites are used to minimize web page loading time by combining multiple smaller pictures into a single image. This technique helps in reducing the number of server requests and thus improving the loading speed of the web page.', "There are three ways to add CSS to a webpage: external, internal, and inline. External CSS allows for reusability, internal CSS is for local styles, and inline CSS applies styles directly to elements, although it's not recommended due to losing the meaning of elements."]}, {'end': 4454.175, 'start': 3792.792, 'title': 'Css selectors and hiding elements in css', 'summary': "Covers the utilization of three style sheets in css, the different types of css selectors including element, id, class, universal, and group selectors, and two ways of hiding elements in css using 'display none' and 'visibility hidden', with 'display none' being a better option. additionally, it introduces the important property in css to add more importance to a particular property than a normal value.", 'duration': 661.383, 'highlights': ['The chapter covers the utilization of three style sheets in CSS This highlights the basic understanding of the three style sheets utilized in CSS.', 'the different types of CSS selectors including element, ID, class, universal, and group selectors This provides an overview of the various types of CSS selectors, including element, ID, class, universal, and group selectors.', "two ways of hiding elements in CSS using 'display none' and 'visibility hidden', with 'display none' being a better option This emphasizes the two ways of hiding elements in CSS and underlines that 'display none' is a better option compared to 'visibility hidden'.", 'introduces the important property in CSS to add more importance to a particular property than a normal value. This introduces the important property in CSS, explaining its purpose to add more importance to a particular property than a normal value.']}], 'duration': 888.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E3565404.jpg', 'highlights': ['CSS sprites minimize web page loading time by combining multiple pictures into a single image, reducing server requests.', 'Three ways to add CSS: external for reusability, internal for local styles, and inline for direct element styling.', 'Covers utilization of three style sheets in CSS, providing a basic understanding of their usage.', 'Overview of various CSS selectors: element, ID, class, universal, and group selectors.', "Two ways of hiding elements in CSS: 'display none' is recommended over 'visibility hidden'.", 'Introduces the important property in CSS to add more importance to a particular property.']}, {'end': 5096.067, 'segs': [{'end': 4508.981, 'src': 'embed', 'start': 4454.175, 'weight': 0, 'content': [{'end': 4465.008, 'text': 'okay, i say like this, but if i just make it as a what important and i use it as i call what green yellow,', 'start': 4454.175, 'duration': 10.833}, {'end': 4469.33, 'text': 'so you can see it will apply the green yellow to everywhere.', 'start': 4465.008, 'duration': 4.322}, {'end': 4470.71, 'text': 'okay, so that is an important problem.', 'start': 4469.33, 'duration': 1.38}, {'end': 4473.151, 'text': "let's override all the previous rules.", 'start': 4470.71, 'duration': 2.441}, {'end': 4475.732, 'text': "that's how the css is.", 'start': 4473.151, 'duration': 2.581}, {'end': 4476.412, 'text': 'okay, everyone.', 'start': 4475.732, 'duration': 0.68}, {'end': 4483.235, 'text': 'so our next example is towards focus on javascript interview questions.', 'start': 4476.412, 'duration': 6.823}, {'end': 4488.336, 'text': 'now here we have few questions that are available, like what are the various data types in javascript?', 'start': 4483.235, 'duration': 5.101}, {'end': 4499.345, 'text': 'so javascript contains different type of javascript data types, like, if you think about All different types which are there, generally byte, short,', 'start': 4488.336, 'duration': 11.009}, {'end': 4503.452, 'text': 'int, long float, double character, boolean.', 'start': 4499.345, 'duration': 4.107}, {'end': 4508.981, 'text': 'these are all different type of data types are supported inside a JavaScript.', 'start': 4503.452, 'duration': 5.529}], 'summary': 'Discussing css and javascript data types, emphasizing importance of rules and questions', 'duration': 54.806, 'max_score': 4454.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4454175.jpg'}, {'end': 4563.681, 'src': 'embed', 'start': 4535.881, 'weight': 4, 'content': [{'end': 4545.788, 'text': 'because the javascript is known to be called non-blocking, which never wait for the code to finish, it continues to move on and due to some reason,', 'start': 4535.881, 'duration': 9.907}, {'end': 4556.676, 'text': "if your function it's taking some time to you know, execute, so javascript won't wait for that particular function to finish.", 'start': 4545.788, 'duration': 10.888}, {'end': 4559.538, 'text': 'so you use callback to prevent such behavior.', 'start': 4556.676, 'duration': 2.862}, {'end': 4563.681, 'text': "okay, that's called a javascript callback.", 'start': 4560.439, 'duration': 3.242}], 'summary': 'Javascript uses non-blocking callbacks to prevent waiting for function execution.', 'duration': 27.8, 'max_score': 4535.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4535881.jpg'}, {'end': 4638.473, 'src': 'heatmap', 'start': 4454.175, 'weight': 3, 'content': [{'end': 4465.008, 'text': 'okay, i say like this, but if i just make it as a what important and i use it as i call what green yellow,', 'start': 4454.175, 'duration': 10.833}, {'end': 4469.33, 'text': 'so you can see it will apply the green yellow to everywhere.', 'start': 4465.008, 'duration': 4.322}, {'end': 4470.71, 'text': 'okay, so that is an important problem.', 'start': 4469.33, 'duration': 1.38}, {'end': 4473.151, 'text': "let's override all the previous rules.", 'start': 4470.71, 'duration': 2.441}, {'end': 4475.732, 'text': "that's how the css is.", 'start': 4473.151, 'duration': 2.581}, {'end': 4476.412, 'text': 'okay, everyone.', 'start': 4475.732, 'duration': 0.68}, {'end': 4483.235, 'text': 'so our next example is towards focus on javascript interview questions.', 'start': 4476.412, 'duration': 6.823}, {'end': 4488.336, 'text': 'now here we have few questions that are available, like what are the various data types in javascript?', 'start': 4483.235, 'duration': 5.101}, {'end': 4499.345, 'text': 'so javascript contains different type of javascript data types, like, if you think about All different types which are there, generally byte, short,', 'start': 4488.336, 'duration': 11.009}, {'end': 4503.452, 'text': 'int, long float, double character, boolean.', 'start': 4499.345, 'duration': 4.107}, {'end': 4508.981, 'text': 'these are all different type of data types are supported inside a JavaScript.', 'start': 4503.452, 'duration': 5.529}, {'end': 4515.433, 'text': 'okay. now, going ahead, what is the callback in JavaScript?', 'start': 4510.45, 'duration': 4.983}, {'end': 4523.698, 'text': 'so the callback means is a function okay, that is passed with another function as an argument on a parameter?', 'start': 4515.433, 'duration': 8.265}, {'end': 4525.238, 'text': 'okay. so what is the callback?', 'start': 4523.698, 'duration': 1.54}, {'end': 4525.959, 'text': 'callback means?', 'start': 4525.238, 'duration': 0.721}, {'end': 4528.78, 'text': "don't call me, I will call you clear.", 'start': 4525.959, 'duration': 2.821}, {'end': 4535.881, 'text': 'so the idea is like you are passing the function itself is a parameter to the another function,', 'start': 4528.78, 'duration': 7.101}, {'end': 4545.788, 'text': 'because the javascript is known to be called non-blocking, which never wait for the code to finish, it continues to move on and due to some reason,', 'start': 4535.881, 'duration': 9.907}, {'end': 4556.676, 'text': "if your function it's taking some time to you know, execute, so javascript won't wait for that particular function to finish.", 'start': 4545.788, 'duration': 10.888}, {'end': 4559.538, 'text': 'so you use callback to prevent such behavior.', 'start': 4556.676, 'duration': 2.862}, {'end': 4563.681, 'text': "okay, that's called a javascript callback.", 'start': 4560.439, 'duration': 3.242}, {'end': 4567.543, 'text': 'now, what is the difference between function declaration and function expression?', 'start': 4563.681, 'duration': 3.862}, {'end': 4574.867, 'text': 'see, this is called function declaration and you talk about a function expression.', 'start': 4567.543, 'duration': 7.324}, {'end': 4587.084, 'text': 'function declaration is just to declare a separate statement within a main javascript code and you can be called before the function is defined.', 'start': 4574.867, 'duration': 12.217}, {'end': 4593.346, 'text': 'okay, it gives you the better readability where the function expression are always created inside expression.', 'start': 4587.084, 'duration': 6.262}, {'end': 4599.469, 'text': 'okay, and it is created when the execution point reaches it are we clear?', 'start': 4593.346, 'duration': 6.123}, {'end': 4604.911, 'text': 'and it is used when there is a need of for a conditional declaration of a particular function.', 'start': 4599.469, 'duration': 5.442}, {'end': 4609.082, 'text': 'What do you understand about the cookies in a JavaScript?', 'start': 4606.861, 'duration': 2.221}, {'end': 4611.303, 'text': 'So it is one of the very, very common question.', 'start': 4609.122, 'duration': 2.181}, {'end': 4620.588, 'text': 'Cookies are the one which is created by the server, stored in a client side, Which is responsible to store all the necessary? Client activities,', 'start': 4611.303, 'duration': 9.285}, {'end': 4626.071, 'text': 'so that the browser or the application give the better recommendation to the user.', 'start': 4620.588, 'duration': 5.483}, {'end': 4634.255, 'text': 'okay, so it is just a Small text file which is stored in a browser itself.', 'start': 4626.071, 'duration': 8.184}, {'end': 4638.473, 'text': "Okay, it won't to record something about a user activity.", 'start': 4634.255, 'duration': 4.218}], 'summary': 'The transcript covers javascript interview questions, including data types, callbacks, function declaration vs expression, and cookies.', 'duration': 27.17, 'max_score': 4454.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4454175.jpg'}, {'end': 4686.66, 'src': 'embed', 'start': 4662.829, 'weight': 5, 'content': [{'end': 4670.873, 'text': 'the JavaScript is a feature where the inner function has an access to outer functions, variables and the properties.', 'start': 4662.829, 'duration': 8.044}, {'end': 4675.375, 'text': 'Okay, so you can consider a closure has a three scope chains number one.', 'start': 4670.873, 'duration': 4.502}, {'end': 4681.077, 'text': 'It has an access to its own scope That is defined within its curly braces.', 'start': 4675.795, 'duration': 5.282}, {'end': 4686.66, 'text': 'second, it has an access to the variable of the outer function and also has an access to the global variables.', 'start': 4681.077, 'duration': 5.583}], 'summary': 'Javascript closures have access to 3 scope chains: own, outer function, and global variables.', 'duration': 23.831, 'max_score': 4662.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4662829.jpg'}, {'end': 4738.868, 'src': 'embed', 'start': 4710.563, 'weight': 2, 'content': [{'end': 4713.525, 'text': 'Now, what are the imports and export in JavaScript?', 'start': 4710.563, 'duration': 2.962}, {'end': 4717.267, 'text': 'So import and export in a JavaScript is a very, very common way.', 'start': 4713.545, 'duration': 3.722}, {'end': 4721.169, 'text': 'how, in Java, you use the term name, call import a package.', 'start': 4717.267, 'duration': 3.902}, {'end': 4724.03, 'text': 'But in JavaScript, it is a little different.', 'start': 4721.989, 'duration': 2.041}, {'end': 4726.652, 'text': "Unless you export something, you can't import it.", 'start': 4724.551, 'duration': 2.101}, {'end': 4738.868, 'text': 'okay. so if you want to access any of your files, properties or methods outside of your file, you always use the statement of import and export.', 'start': 4727.865, 'duration': 11.003}], 'summary': 'Javascript imports and exports enable access to files, properties, and methods outside the file.', 'duration': 28.305, 'max_score': 4710.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4710563.jpg'}, {'end': 4801.04, 'src': 'embed', 'start': 4771.914, 'weight': 6, 'content': [{'end': 4774.736, 'text': 'Undeclared means like it is a null.', 'start': 4771.914, 'duration': 2.822}, {'end': 4776.678, 'text': 'First of all, we talk about null.', 'start': 4775.397, 'duration': 1.281}, {'end': 4782.942, 'text': 'Null means it is an assignment value that we can assign to any variable that is meant to contain no value.', 'start': 4776.878, 'duration': 6.064}, {'end': 4787.285, 'text': 'And undeclared means the variables are not declared and do not exist in the program.', 'start': 4783.463, 'duration': 3.822}, {'end': 4795.794, 'text': 'okay, that is called what un-declared how to remove the duplication from the javascript array.', 'start': 4788.326, 'duration': 7.468}, {'end': 4801.04, 'text': 'so you basically needs to use the standard filter methods.', 'start': 4795.794, 'duration': 5.246}], 'summary': 'Undeclared variables have no value, can be used in javascript arrays to remove duplication using filter methods.', 'duration': 29.126, 'max_score': 4771.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4771914.jpg'}], 'start': 4454.175, 'title': 'Javascript and css concepts', 'summary': 'Covers the importance of css overrides and introduces various javascript data types such as byte, short, int, long, float, double, character, and boolean. it also delves into javascript concepts including callbacks, function declaration vs. expression, cookies, closures, imports and exports, and also explains the difference between undefined, undeclared, and null with examples.', 'chapters': [{'end': 4508.981, 'start': 4454.175, 'title': 'Css overrides and javascript data types', 'summary': 'Discusses the importance of css overrides and introduces various javascript data types, including byte, short, int, long, float, double, character, and boolean.', 'duration': 54.806, 'highlights': ["The chapter emphasizes the significance of CSS overrides, illustrating the impact of applying 'green yellow' universally.", 'JavaScript data types are introduced, including byte, short, int, long, float, double, character, and boolean.']}, {'end': 5096.067, 'start': 4510.45, 'title': 'Javascript concepts overview', 'summary': 'Covers javascript concepts including callbacks, function declaration vs. expression, cookies, closures, imports and exports, and the difference between undefined, undeclared, and null, with examples and explanations.', 'duration': 585.617, 'highlights': ['Callbacks in JavaScript Callbacks are functions passed as parameters to another function, used to prevent non-blocking behavior in JavaScript.', "Closures in JavaScript Closures allow inner functions to access outer function's variables and properties, with access to its own scope, outer function variables, and global variables.", 'Imports and Exports in JavaScript Import and export statements are used to access properties or methods outside of a file, allowing for modular code organization in JavaScript.', 'Cookies in JavaScript Cookies store client activities to provide better recommendations, can define expiry time, and are created by the server and stored in the browser as small text files.', 'Difference between undefined, undeclared, and null in JavaScript Undefined means a declared variable without a value, null is an assignment value for no value, and undeclared variables do not exist in the program.']}], 'duration': 641.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E4454175.jpg', 'highlights': ['JavaScript data types are introduced, including byte, short, int, long, float, double, character, and boolean.', "The chapter emphasizes the significance of CSS overrides, illustrating the impact of applying 'green yellow' universally.", 'Imports and Exports in JavaScript Import and export statements are used to access properties or methods outside of a file, allowing for modular code organization in JavaScript.', 'Cookies in JavaScript Cookies store client activities to provide better recommendations, can define expiry time, and are created by the server and stored in the browser as small text files.', 'Callbacks in JavaScript Callbacks are functions passed as parameters to another function, used to prevent non-blocking behavior in JavaScript.', "Closures in JavaScript Closures allow inner functions to access outer function's variables and properties, with access to its own scope, outer function variables, and global variables.", 'Difference between undefined, undeclared, and null in JavaScript Undefined means a declared variable without a value, null is an assignment value for no value, and undeclared variables do not exist in the program.']}, {'end': 5749.165, 'segs': [{'end': 5201.764, 'src': 'embed', 'start': 5177.994, 'weight': 0, 'content': [{'end': 5185.039, 'text': 'Okay So, as I said, the function expression loads only when the interpreter reaches that line of code.', 'start': 5177.994, 'duration': 7.045}, {'end': 5191.299, 'text': 'OK, so once again I repeat the difference function declaration loads before any code is executed.', 'start': 5186.337, 'duration': 4.962}, {'end': 5196.321, 'text': 'However, the function expression loads only when the interpreter reaches that line of code.', 'start': 5191.819, 'duration': 4.502}, {'end': 5201.764, 'text': 'If you try to call function expression before it is loaded, you will get another for sure.', 'start': 5197.282, 'duration': 4.482}], 'summary': 'Function declaration loads before any code, function expression loads when interpreter reaches the line.', 'duration': 23.77, 'max_score': 5177.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E5177994.jpg'}, {'end': 5416.569, 'src': 'embed', 'start': 5378.309, 'weight': 1, 'content': [{'end': 5382.77, 'text': 'See, the idea behind a closure is very important because it is a core concept of JavaScript.', 'start': 5378.309, 'duration': 4.461}, {'end': 5389.731, 'text': 'The idea behind a closure means that the inner function, okay, you have an outer function, you have a inner function.', 'start': 5383.63, 'duration': 6.101}, {'end': 5398.073, 'text': 'Inner function always have an access to the variables and the parameter of its outer function, even after the outer function has returned.', 'start': 5390.271, 'duration': 7.802}, {'end': 5403.513, 'text': "Okay Now, let's see how we're going to declare this.", 'start': 5400.133, 'duration': 3.38}, {'end': 5416.569, 'text': 'In this example, if I define one function, okay, this function is called outer okay.', 'start': 5404.394, 'duration': 12.175}], 'summary': 'Closure in javascript gives inner functions access to outer function variables and parameters even after it has returned.', 'duration': 38.26, 'max_score': 5378.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E5378309.jpg'}, {'end': 5644.679, 'src': 'embed', 'start': 5616.457, 'weight': 2, 'content': [{'end': 5620.78, 'text': 'it can be assigned to a variable to represent no value.', 'start': 5616.457, 'duration': 4.323}, {'end': 5626.143, 'text': 'that is called null, and undeclared means what undeclared means if a variable is not declared,', 'start': 5620.78, 'duration': 5.363}, {'end': 5630.005, 'text': 'then the browser throws an error here at least to define, declare a variable,', 'start': 5626.143, 'duration': 3.862}, {'end': 5641.098, 'text': "but you haven't defined the value and here i'll be showing what log and here, if i just say demo.", 'start': 5630.005, 'duration': 11.093}, {'end': 5643.578, 'text': 'so this is certainly a what.', 'start': 5641.098, 'duration': 2.48}, {'end': 5644.679, 'text': 'come on undeclared.', 'start': 5643.578, 'duration': 1.101}], 'summary': 'Explaining null and undeclared variables in javascript.', 'duration': 28.222, 'max_score': 5616.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E5616457.jpg'}], 'start': 5096.067, 'title': 'Javascript functions', 'summary': 'Explains the difference between function declaration and expression, highlighting the behavior of each with examples. it also covers function expressions, closures, variable types, and array operations in javascript.', 'chapters': [{'end': 5352.122, 'start': 5096.067, 'title': 'Function declaration vs. expression', 'summary': 'Explains the difference between function expression and function declaration, highlighting that function declaration loads before any code is executed, while function expression loads only when the interpreter reaches the line of code, and provides examples demonstrating the error in calling function expressions before they are loaded.', 'duration': 256.055, 'highlights': ['Function declaration loads before any code is executed, while function expression loads only when the interpreter reaches the line of code, as explained by the instructor.', 'The instructor provides a clear example of the error in calling a function expression before it is loaded, emphasizing the difference and implications in the code execution.', 'The concept of callback is introduced, where a function is passed as a parameter to another function, showcasing its relevance in JavaScript programming.', 'The instructor emphasizes the similarity in calling function expressions and function declarations, highlighting the importance of understanding how the browser loads them into the execution context.']}, {'end': 5749.165, 'start': 5352.122, 'title': 'Javascript functions, closures, and variable types', 'summary': 'Covers function expressions, closures, differences between null, undefined, and undeclared, and removing duplicate values from arrays in javascript.', 'duration': 397.043, 'highlights': ['Understanding closures in JavaScript Closures in JavaScript allow inner functions to access variables and parameters of their outer function, even after the outer function has returned.', 'Differences between undefined, null, and undeclared variables Undefined variables have been declared but not assigned a value, null variables represent no value, and undeclared variables have not been declared, leading to a browser error.', 'Removing duplicate values from arrays in JavaScript To remove duplicate elements from an array in JavaScript, the filter function can be used to eliminate repeated values based on their index.']}], 'duration': 653.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E5096067.jpg', 'highlights': ['Function declaration loads before any code is executed, while function expression loads only when the interpreter reaches the line of code, as explained by the instructor.', 'Understanding closures in JavaScript Closures in JavaScript allow inner functions to access variables and parameters of their outer function, even after the outer function has returned.', 'Differences between undefined, null, and undeclared variables Undefined variables have been declared but not assigned a value, null variables represent no value, and undeclared variables have not been declared, leading to a browser error.', 'The concept of callback is introduced, where a function is passed as a parameter to another function, showcasing its relevance in JavaScript programming.']}, {'end': 8246.258, 'segs': [{'end': 5848.236, 'src': 'embed', 'start': 5793.87, 'weight': 2, 'content': [{'end': 5802.436, 'text': "now let me add another one that is called b again, but here you see, it's still having what the same value.", 'start': 5793.87, 'duration': 8.566}, {'end': 5809.341, 'text': 'so this is how, the way you remove the duplicate elements from here, from the array.', 'start': 5802.436, 'duration': 6.905}, {'end': 5813.324, 'text': 'very simple and straightforward utilization of the filter function.', 'start': 5809.341, 'duration': 3.983}, {'end': 5816.326, 'text': 'okay, thank you.', 'start': 5813.324, 'duration': 3.002}, {'end': 5822.571, 'text': "well, let's go ahead with the next area, that is called working with react js interview questions.", 'start': 5816.326, 'duration': 6.245}, {'end': 5829.261, 'text': "now, as we know it, react js is as important as like in other tools which you've already seen.", 'start': 5822.571, 'duration': 6.69}, {'end': 5830.722, 'text': 'so what is the jsx here?', 'start': 5829.261, 'duration': 1.461}, {'end': 5833.044, 'text': 'jsx called javascript syntax extension.', 'start': 5830.722, 'duration': 2.322}, {'end': 5848.236, 'text': 'Okay, so this syntax extension to the JavaScript in ReactJS is in the way how you express to bind JS and HTML together to result a JSX content.', 'start': 5834.631, 'duration': 13.605}], 'summary': 'Removing duplicate elements from an array using filter function. exploring jsx in reactjs for binding js and html together.', 'duration': 54.366, 'max_score': 5793.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E5793870.jpg'}, {'end': 5914.072, 'src': 'embed', 'start': 5892.798, 'weight': 8, 'content': [{'end': 5902.804, 'text': 'so when the state change, virtual dom changes and only the objects which are in real dom, okay, update instead of updating the entire object,', 'start': 5892.798, 'duration': 10.006}, {'end': 5906.307, 'text': 'so that makes your page to be load far more faster.', 'start': 5902.804, 'duration': 3.503}, {'end': 5907.968, 'text': 'okay, so in virtual dom, what happens?', 'start': 5906.307, 'duration': 1.661}, {'end': 5908.808, 'text': 'this is the real dom.', 'start': 5907.968, 'duration': 0.84}, {'end': 5909.689, 'text': 'this is a virtual dom.', 'start': 5908.808, 'duration': 0.881}, {'end': 5914.072, 'text': "so the orange color portions which you're seeing, that is basically the changes which have been made.", 'start': 5909.689, 'duration': 4.383}], 'summary': 'Virtual dom updates only specific objects, making pages load faster.', 'duration': 21.274, 'max_score': 5892.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E5892798.jpg'}, {'end': 6058.59, 'src': 'embed', 'start': 6030.282, 'weight': 6, 'content': [{'end': 6035.965, 'text': 'so in angular and react, in both areas the word component is Very much used.', 'start': 6030.282, 'duration': 5.683}, {'end': 6037.806, 'text': 'so the component meaning is very simple.', 'start': 6035.965, 'duration': 1.841}, {'end': 6041.026, 'text': 'you talk about a view.', 'start': 6037.806, 'duration': 3.22}, {'end': 6042.427, 'text': 'So what is the state in a react?', 'start': 6041.026, 'duration': 1.401}, {'end': 6050.748, 'text': 'so state is react is nothing, but is the one which Identify what was and what is now?', 'start': 6042.427, 'duration': 8.321}, {'end': 6058.59, 'text': 'Okay, which stores the value for the specific period of time which changes and react, is basically detecting those.', 'start': 6051.508, 'duration': 7.082}], 'summary': "Angular and react heavily use the word 'component' to refer to views, with state in react representing the past and present values for a specific period of time.", 'duration': 28.308, 'max_score': 6030.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E6030282.jpg'}, {'end': 6200.998, 'src': 'embed', 'start': 6174.891, 'weight': 0, 'content': [{'end': 6185.074, 'text': 'so the implemented react routing, react routing also comes with inbuilt react modules and that particular module need to import it.', 'start': 6174.891, 'duration': 10.183}, {'end': 6191.997, 'text': 'so here we define the react modules by offering the route path where you have a call.', 'start': 6185.074, 'duration': 6.923}, {'end': 6197.459, 'text': 'left hand side is the name and the right hand side is a component which you would like to deliver it now.', 'start': 6191.997, 'duration': 5.462}, {'end': 6200.998, 'text': "okay, that's how you define it.", 'start': 6198.996, 'duration': 2.002}], 'summary': 'Implemented react routing with inbuilt modules for defining routes.', 'duration': 26.107, 'max_score': 6174.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E6174891.jpg'}, {'end': 6426.531, 'src': 'embed', 'start': 6396.217, 'weight': 7, 'content': [{'end': 6401.979, 'text': 'So you can see this is a very simple example of how the components are created in your application.', 'start': 6396.217, 'duration': 5.762}, {'end': 6403.819, 'text': "That's the one thing.", 'start': 6403.159, 'duration': 0.66}, {'end': 6412.342, 'text': 'Now the next thing is like how to basically go and create an event, how to go to launch or trigger an event in React application.', 'start': 6404.62, 'duration': 7.722}, {'end': 6416.284, 'text': 'See friends, triggering an event in React is very, very simple.', 'start': 6413.043, 'duration': 3.241}, {'end': 6426.531, 'text': "What I will do is here I'm going to write one very simple function call call app Let me put it under here.", 'start': 6417.064, 'duration': 9.467}], 'summary': 'React application components and event triggering explained simply.', 'duration': 30.314, 'max_score': 6396.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E6396217.jpg'}, {'end': 7031.478, 'src': 'embed', 'start': 7004.286, 'weight': 5, 'content': [{'end': 7009.268, 'text': "Now, next step is like how you're going to be performing this navigation inside the React application.", 'start': 7004.286, 'duration': 4.982}, {'end': 7014.27, 'text': 'So friends, when you talk about like a navigation, we have a very straightforward demonstrations.', 'start': 7010.269, 'duration': 4.001}, {'end': 7028.817, 'text': 'Here. first of all, in case, if you want to perform the navigation, you need to have the new dependencies to be get added by saying npm i react-router-dom.', 'start': 7015.371, 'duration': 13.446}, {'end': 7031.478, 'text': "That's the first dependency you need to have it.", 'start': 7029.817, 'duration': 1.661}], 'summary': 'To perform navigation in a react application, add the dependency react-router-dom using npm i.', 'duration': 27.192, 'max_score': 7004.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E7004286.jpg'}, {'end': 7450.745, 'src': 'embed', 'start': 7421.184, 'weight': 9, 'content': [{'end': 7424.708, 'text': 'use when you say ng build.', 'start': 7421.184, 'duration': 3.524}, {'end': 7426.35, 'text': 'Next, what are the pipes in angular??', 'start': 7424.708, 'duration': 1.642}, {'end': 7427.23, 'text': 'So pipes means it.', 'start': 7426.39, 'duration': 0.84}, {'end': 7428.232, 'text': 'they are the decorators.', 'start': 7427.23, 'duration': 1.002}, {'end': 7434.939, 'text': 'They never change their default value, but just for the representation purpose.', 'start': 7428.992, 'duration': 5.947}, {'end': 7440.845, 'text': 'they change the values to look more better, the way they always want.', 'start': 7434.939, 'duration': 5.906}, {'end': 7450.745, 'text': 'okay. so pipes are ready-made or else it can be customized, created angular also comes with lot many predefined pipes.', 'start': 7442.023, 'duration': 8.722}], 'summary': 'Angular pipes change values for better representation, with many predefined options.', 'duration': 29.561, 'max_score': 7421.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E7421184.jpg'}, {'end': 7681.624, 'src': 'embed', 'start': 7644.821, 'weight': 1, 'content': [{'end': 7647.604, 'text': 'what is the eager and what is the lazy loading?', 'start': 7644.821, 'duration': 2.783}, {'end': 7654.209, 'text': 'okay, so eager loading means what it is a default module loading strategy followed in an angular.', 'start': 7647.604, 'duration': 6.605}, {'end': 7657.492, 'text': 'eager loadings are used before the application starts.', 'start': 7654.209, 'duration': 3.283}, {'end': 7661.276, 'text': 'these are typically useful for the small scale applications.', 'start': 7657.492, 'duration': 3.784}, {'end': 7666.941, 'text': 'lazy loading, however, is designed for dynamic loads of features only on demand.', 'start': 7661.276, 'duration': 5.665}, {'end': 7669.981, 'text': 'this makes your application far more faster.', 'start': 7667.64, 'duration': 2.341}, {'end': 7681.624, 'text': "so in a bigger application we really don't make easy eager loading because it hamper the performance and you want only when the client asks you want to use lazy loading.", 'start': 7669.981, 'duration': 11.643}], 'summary': 'Eager loading is default in angular, used before app start, while lazy loading is for dynamic loads on demand, making app faster.', 'duration': 36.803, 'max_score': 7644.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E7644821.jpg'}], 'start': 5749.165, 'title': 'Web development concepts', 'summary': 'Covers javascript array manipulation, reactjs basics, state management, react application navigation, and angular loading strategies and string interpolation, emphasizing their importance and practical applications in web development.', 'chapters': [{'end': 5822.571, 'start': 5749.165, 'title': 'Removing duplicate elements in javascript arrays', 'summary': 'Explains a simple and straightforward method of removing duplicate elements from a javascript array using the filter function, with a demonstration of the process and its effectiveness in maintaining uniqueness of elements.', 'duration': 73.406, 'highlights': ['The demonstration shows how the filter function is used to remove duplicate elements from a JavaScript array, ensuring the array maintains uniqueness of elements.', 'The speaker emphasizes the simplicity and straightforwardness of the method, highlighting its ease of use for this purpose.', 'The example provided illustrates the effectiveness of the filter function in maintaining the uniqueness of elements within the array.']}, {'end': 6567.73, 'start': 5822.571, 'title': 'Understanding reactjs basics', 'summary': 'Delves into the basics of reactjs, highlighting the importance of jsx for binding javascript and html, the efficiency of virtual dom in speeding up page loading, the significance of react extensions, simplicity of event handling, the concept of components, the role of state in tracking and updating data, the purpose of higher order and pure components, and the implementation of react routing.', 'duration': 745.159, 'highlights': ["Importance of JSX in ReactJS JSX is a syntax extension to bind JS and HTML together, making code more understandable and innovative, thus contributing to ReactJS's popularity in the market.", 'Efficiency of Virtual DOM Virtual DOM, representing a DOM in memory, speeds up page loading by comparing previous and current states to determine necessary updates, resulting in faster page loads.', 'React Extensions and Tools Various React extensions such as Flux and React Native, along with tools for architectural support and server-side rendering, contribute to the versatility of React.', "Simplicity of Event Handling React simplifies event handling, making it easy to trigger events like clicking or mouse movements by using functions like 'Alert' and 'on click'.", 'Role of Components in React React components split complex UI into independent, reusable views, allowing for better code organization and development.', 'Significance of State in React State in React identifies and tracks changes, detecting actions taken by users or applications and updating the value for a specific period, contributing to data rendering on the web page.', 'Purpose of Higher Order and Pure Components Higher order components add functionality to existing components, while pure components perform shallow comparison of props and state, designed for reusability and receiving data based on changes.', 'Implementation of React Routing React routing involves importing inbuilt modules and defining route paths to link components, facilitating the navigation and delivery of components within the application.']}, {'end': 7002.153, 'start': 6568.789, 'title': 'React state management', 'summary': 'Discusses the implementation of stateless functional components and higher order components, along with a detailed example of state management where the initial state is set to zero and then incremented using the setstate function.', 'duration': 433.364, 'highlights': ['The chapter discusses higher order components, which take input in the form of a component and return another component with a changed value. Higher order components are exemplified, which take input as a component and return a modified component, showcasing the concept of passing a component to another using the with admin warning.', 'The transcript provides a detailed example of state management, where the initial state is set to zero and then incremented using the setState function. A comprehensive example of state management is presented, where the initial state is set to zero and then incremented using the setState function, demonstrating the process of initializing and updating the state.', 'The implementation of stateless functional components is discussed, highlighting the removal of unnecessary components and the creation of div, h1, h2, and paragraph tags. The implementation of stateless functional components is explained, emphasizing the removal of unnecessary components and the creation of div, h1, h2, and paragraph tags within the application.']}, {'end': 7643.579, 'start': 7004.286, 'title': 'React application navigation with react-router-dom', 'summary': 'Covers the process of setting up navigation in a react application using react-router-dom, creating components, defining routes, and demonstrating the navigation behavior, as well as discussing popular interview questions related to angular, such as data binding, typescript, aot compilation, pipes, promises, observables, form controls, and form groups.', 'duration': 639.293, 'highlights': ['The chapter covers the process of setting up navigation in a React application using react-router-dom. The transcript provides a step-by-step explanation of setting up navigation in a React application using react-router-dom, including installing dependencies and defining routes.', 'Discussion of popular interview questions related to Angular, such as data binding, TypeScript, AOT compilation, pipes, promises, observables, form controls, and form groups. The transcript delves into popular interview questions related to Angular, providing explanations and examples for topics such as data binding, TypeScript, AOT compilation, pipes, promises, observables, form controls, and form groups.']}, {'end': 8246.258, 'start': 7644.821, 'title': 'Angular loading strategies and string interpolation', 'summary': 'Explains the concepts of eager loading and lazy loading in angular, emphasizing the benefits of lazy loading for larger applications and the use of string interpolation for one-way data binding from typescript to the browser. it also covers the usage of pipes for formatting and includes insights on typescript advantages, web developer roles, and page performance optimization.', 'duration': 601.437, 'highlights': ['Lazy loading is designed for dynamic loads of features only on demand, making the application faster. Lazy loading is emphasized for larger applications as it allows dynamic loading of features only when needed, leading to improved application performance.', 'Eager loading is the default module loading strategy in Angular, used before the application starts, beneficial for small scale applications. Eager loading is the default module loading strategy in Angular, suitable for small scale applications, and is used before the application starts.', 'String interpolation in Angular involves one-way binding to display data from TypeScript classes directly in the browser using double curly braces. String interpolation in Angular facilitates one-way binding, enabling the display of data from TypeScript classes directly in the browser through the use of double curly braces.', 'Pipes in Angular are used for formatting purposes without altering the core values, offering predefined pipes for tasks such as uppercase, date formatting, and currency display. Pipes in Angular are utilized for formatting without changing the core values, providing predefined pipes for tasks like uppercase, date formatting, and currency display.', 'TypeScript offers advantages over JavaScript as a superset, providing better understanding, faster performance, features like interfaces and generics. TypeScript, as a superset of JavaScript, offers advantages such as better understanding, faster performance, and features like interfaces and generics.', 'Backend developers focus on server-side application development, writing APIs, ensuring data integrity, and involving scripting for communication with databases. Backend developers concentrate on server-side application development, including API writing, ensuring data integrity, and using scripting for communication with databases.', 'Optimizing page performance involves cleaning up HTML documents, minimizing external HTTP requests, including compressed images, and optimizing CSS, JavaScript, and HTML caching on CDNs. To optimize page performance, actions such as cleaning up HTML documents, minimizing external HTTP requests, including compressed images, and optimizing CSS, JavaScript, and HTML caching on CDNs are essential.']}], 'duration': 2497.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7mTNt3mzC6E/pics/7mTNt3mzC6E5749165.jpg', 'highlights': ['React routing involves importing inbuilt modules and defining route paths to link components, facilitating the navigation and delivery of components within the application.', 'Lazy loading is emphasized for larger applications as it allows dynamic loading of features only when needed, leading to improved application performance.', 'The demonstration shows how the filter function is used to remove duplicate elements from a JavaScript array, ensuring the array maintains uniqueness of elements.', "Importance of JSX in ReactJS JSX is a syntax extension to bind JS and HTML together, making code more understandable and innovative, thus contributing to ReactJS's popularity in the market.", 'Eager loading is the default module loading strategy in Angular, suitable for small scale applications, and is used before the application starts.', 'The chapter covers the process of setting up navigation in a React application using react-router-dom, including installing dependencies and defining routes.', 'State in React identifies and tracks changes, detecting actions taken by users or applications and updating the value for a specific period, contributing to data rendering on the web page.', 'The speaker emphasizes the simplicity and straightforwardness of the method, highlighting its ease of use for this purpose.', 'Efficiency of Virtual DOM Virtual DOM, representing a DOM in memory, speeds up page loading by comparing previous and current states to determine necessary updates, resulting in faster page loads.', 'Pipes in Angular are utilized for formatting without changing the core values, providing predefined pipes for tasks like uppercase, date formatting, and currency display.']}], 'highlights': ['The chapter emphasizes the importance of version control systems in enabling teams to store their work in a centralized repository and keep track of changes, ensuring that everyone works on the most recent system while taking care of necessary updates.', 'The chapter covers common frontend interview questions in web development, including Git, HTML5, CSS3, JavaScript, ReactJS, Angular, and generic interview questions.', 'The chapter provides answers to common interview questions to help participants prepare for frontend interviews.', 'SVGs are high quality graphics written in XML language that do not pixelate when zoomed, ensuring accurate content at any level.', 'The chapter introduces SVG in HTML 5.0 and demonstrates the creation of a circle with properties like stroke, fill color, and the ability to maintain quality at different zoom levels.', 'HTML5 semantics feature is designed to help with search engine optimization and make it easier for developers to understand the contents.', 'Tags like header, footer, nav, and article are used to arrange and separate the sections of an HTML page for better organization and readability.', 'The chapter discusses the box sizing property and its types: content box, padding box, and border box, which determine the calculation of height and width of the box elements.', 'CSS sprites minimize web page loading time by combining multiple pictures into a single image, reducing server requests.', 'JavaScript data types are introduced, including byte, short, int, long, float, double, character, and boolean.', 'Cookies in JavaScript store client activities to provide better recommendations, can define expiry time, and are created by the server and stored in the browser as small text files.', 'Function declaration loads before any code is executed, while function expression loads only when the interpreter reaches the line of code, as explained by the instructor.', 'React routing involves importing inbuilt modules and defining route paths to link components, facilitating the navigation and delivery of components within the application.', 'Lazy loading is emphasized for larger applications as it allows dynamic loading of features only when needed, leading to improved application performance.', 'The demonstration shows how the filter function is used to remove duplicate elements from a JavaScript array, ensuring the array maintains uniqueness of elements.', "JSX in ReactJS is a syntax extension to bind JS and HTML together, making code more understandable and innovative, thus contributing to ReactJS's popularity in the market."]}