Learning App Building with Vanilla JavaScript Online Class | LinkedIn Learning, formerly Lynda.com

<!DOCTYPE html> <html lang="en"> <head> <meta name="pageKey" content="d_learning_course_guest">  <meta name="locale" content="en_US"> <meta id="config" data-app-version="2.0.2217" data-call-tree-id="AAYn2RtUFMjz2W/hDl8gbw==" data-multiproduct-name="learning-guest-frontend" data-service-name="learning-guest-frontend" data-browser-id="308fc032-15f0-40ee-8a1e-d8ebbb2f0cae" data-enable-page-view-heartbeat-tracking data-page-instance="urn:li:page:learning_course_guest;ykJpYo7RQD6VMxlK8W8pPw==" data-disable-jsbeacon-pagekey-suffix="false" data-member-id="0"> <link rel="canonical" href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript">     <link rel="manifest" href="/homepage-guest/manifest.json" crossorigin="use-credentials">  <script> function getDfd() {let yFn,nFn;const p=new Promise(function(y, n){yFn=y;nFn=n;});p.resolve=yFn;p.reject=nFn;return p;} window.lazyloader = getDfd(); window.tracking = getDfd(); window.impressionTracking = getDfd(); window.ingraphTracking = getDfd(); window.appDetection = getDfd(); window.pemTracking = getDfd(); </script>  <link rel="icon" href="https://static.licdn.com/aero-v1/sc/h/444zstxv7s91nepfm5et6ofge"> <title>Learning App Building with Vanilla JavaScript Online Class | LinkedIn Learning, formerly Lynda.com</title> <meta name="robots" content="noarchive, max-image-preview:large"> <meta name="description" content="Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience."> <meta property="og:site_name" content="LinkedIn"> <meta name="twitter:site" content="@LI_Learning"> <meta name="twitter:card" content="summary"> <meta name="litmsProfileName" content="learning-guest-frontend"> <meta property="og:title" content="Learning App Building with Vanilla JavaScript Online Class | LinkedIn Learning, formerly Lynda.com"> <meta name="twitter:title" content="Learning App Building with Vanilla JavaScript Online Class | LinkedIn Learning, formerly Lynda.com"> <meta property="og:description" content="Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience."> <meta name="twitter:description" content="Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience."> <meta property="og:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE"> <meta name="twitter:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE">  <meta property="og:url" content="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript"> <meta property="og:type" content="website"> <meta name="clientSideIngraphs" content="1" data-gauge-metric-endpoint="/learning-guest/api/ingraphs/gauge" data-counter-metric-endpoint="/learning-guest/api/ingraphs/counter"> <link rel="stylesheet" href="https://static.licdn.com/aero-v1/sc/h/ccepec31u8riooiwchbtig8m0"> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"Course","provider":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"publisher":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"hasCourseInstance":{"@type":"CourseInstance","courseMode":"online","courseWorkload":"PT1H44M47S","instructor":[{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"}]},"inLanguage":"en","name":"Learning App Building with Vanilla JavaScript","offers":[{"@type":"Offer","category":"Subscription"},{"@type":"Offer","category":"Paid","price":"249.99","priceCurrency":"HKD"}],"description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","image":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","creator":[{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"}],"author":[{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"}],"dateCreated":"2017-10-11","datePublished":"2017-10-11","thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","timeRequired":"PT1H44M47S","totalHistoricalEnrollment":99508,"url":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript","about":[{"@type":"Thing","url":"https://www.linkedin.com/learning/search?keywords=Vanilla","name":"Vanilla"},{"@type":"Thing","url":"https://www.linkedin.com/learning/topics/javascript","name":"JavaScript"}],"hasPart":[[{"@type":"VideoObject","name":"Welcome - Introduction","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT1M2S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/welcome"},{"@type":"VideoObject","name":"What you should know - Introduction","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT48S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/what-you-should-know"},{"@type":"VideoObject","name":"Exercise files - Introduction","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT54S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/exercise-files"}],[{"@type":"VideoObject","name":"Libraries, frameworks, and vanilla JavaScript - 1. Overview of Vanilla JS","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M43S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/libraries-frameworks-and-vanilla-javascript"},{"@type":"VideoObject","name":"Identify when to replace frameworks and libraries - 1. Overview of Vanilla JS","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M20S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/identify-when-to-replace-frameworks-and-libraries"}],[{"@type":"VideoObject","name":"Application architecture - 2. Project Overview","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M3S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/application-architecture"}],[{"@type":"VideoObject","name":"Environment setup - 3. Environment Setup","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M1S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/environment-setup"},{"@type":"VideoObject","name":"Getting your API key - 3. Environment Setup","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M2S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/getting-your-api-key"}],[{"@type":"VideoObject","name":"Fetch API - 4. Replace Ajax","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT1M51S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/fetch-api"},{"@type":"VideoObject","name":"Create an Ajax request with Fetch - 4. Replace Ajax","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT6M28S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/create-an-ajax-request-with-fetch"}],[{"@type":"VideoObject","name":"Element selection with vanilla JavaScript - 5. Select and Modify DOM Elements","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT2M49S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/element-selection-with-vanilla-javascript"},{"@type":"VideoObject","name":"Select and modify elements with querySelector - 5. Select and Modify DOM Elements","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT6M1S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/select-and-modify-elements-with-queryselector"},{"@type":"VideoObject","name":"Select and modify elements with querySelectorAll - 5. Select and Modify DOM Elements","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M15S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/select-and-modify-elements-with-queryselectorall"}],[{"@type":"VideoObject","name":"JavaScript events - 6. Replace Event Listeners","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT4M46S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/javascript-events"},{"@type":"VideoObject","name":"Add event listeners with vanilla JavaScript - 6. Replace Event Listeners","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT4M28S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/add-event-listeners-with-vanilla-javascript"},{"@type":"VideoObject","name":"Work with the event object - 6. Replace Event Listeners","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT4M5S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/work-with-the-event-object"}],[{"@type":"VideoObject","name":"Data binding - 7. Implement Data Binding","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT4M12S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/data-binding"},{"@type":"VideoObject","name":"Create elements with vanilla JavaScript - 7. Implement Data Binding","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT7M25S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/create-elements-with-vanilla-javascript"},{"@type":"VideoObject","name":"Add and modify properties with vanilla JavaScript - 7. Implement Data Binding","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT9M34S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/add-and-modify-properties-with-vanilla-javascript"},{"@type":"VideoObject","name":"Append elements with vanilla JavaScript - 7. Implement Data Binding","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT6M51S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/append-elements-with-vanilla-javascript"},{"@type":"VideoObject","name":"Template literals to build DOM content - 7. Implement Data Binding","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M28S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/template-literals-to-build-dom-content"}],[{"@type":"VideoObject","name":"Animation with vanilla JavaScript - 8. Replace Simple Animations","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT2M15S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/animation-with-vanilla-javascript"},{"@type":"VideoObject","name":"Show and hide elements using vanilla JavaScript - 8. Replace Simple Animations","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M23S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/show-and-hide-elements-using-vanilla-javascript"},{"@type":"VideoObject","name":"Transition element appearance using CSS - 8. Replace Simple Animations","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT3M13S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/transition-element-appearance-using-css"}],[{"@type":"VideoObject","name":"Backward compatibility for vanilla JavaScript - 9. Ensure Backward Compatibility","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT2M54S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/backward-compatibility-for-vanilla-javascript"},{"@type":"VideoObject","name":"Transpile vanilla JavaScript - 9. Ensure Backward Compatibility","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT8M15S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/transpile-vanilla-javascript"}],[{"@type":"VideoObject","name":"Next steps - Conclusion","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT41S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/next-steps"}]],"syllabusSections":[{"@type":"Syllabus","name":"Welcome","timeRequired":"PT1M2S","description":"Building apps with vanilla JavaScript alone—without libraries or frameworks—can provide better load times and better overall performance, without giving up modern features like data binding and animation. In this course, convert an app that uses a framework and a library to an app with the same features and functionality using vanilla JavaScript alone."},{"@type":"Syllabus","name":"What you should know","timeRequired":"PT48S","description":"This is an intermediate course. You should understand the basic syntax of HTML and CSS, and how CSS style rules are applied to DOM elements. You should also have basic experience coding and building apps in JavaScript."},{"@type":"Syllabus","name":"Exercise files","timeRequired":"PT54S","description":"You can learn app building with Vanilla JavaScript in this course by working through the provided exercise files. Both starting files and solution files are provided for each video. By opening the starting file in your code editor, you can follow along with the video and produce the same result that is in the video."},{"@type":"Syllabus","name":"Libraries, frameworks, and vanilla JavaScript","timeRequired":"PT3M43S","description":"You can write vanilla JavaScript code on its own, or in an app that uses libraries and/or frameworks—any combination of these can coexist in the same codebase. In this video, review the differences between libraries and frameworks, and look at some of the advantages of writing an app solely using vanilla JavaScript."},{"@type":"Syllabus","name":"Identify when to replace frameworks and libraries","timeRequired":"PT3M20S","description":"There are a few factors to consider before deciding whether to replace libraries or frameworks in your existing code with Vanilla JavaScript. In this video, look at situations when it makes sense to look at removing a library or framework, as well as when it may make sense to leave your current front-end stack in place."},{"@type":"Syllabus","name":"Application architecture","timeRequired":"PT3M3S","description":"Start with an existing app that uses jQuery and React and refactor that app to use Vanilla JavaScript. In this video, dig into the structure of the code for this app and visualize the flow of data through the app."},{"@type":"Syllabus","name":"Environment setup","timeRequired":"PT3M1S","description":"The videos in this course require a web browser, a code editor, and an HTTP server. This video provides an overview of some popular choices."},{"@type":"Syllabus","name":"Getting your API key","timeRequired":"PT3M2S","description":"The project for this course uses data from an API that requires use of an API key to receive data. This video walks through how to sign up for a free account for the service, obtain an API key, and store it in a convenient place for use while coding."},{"@type":"Syllabus","name":"Fetch API","timeRequired":"PT1M51S","description":"Modern browsers support the Fetch API, which is a successor to the XMLHttpRequest object and is built on promises. In this video, review the differences between XHR and Fetch, as well as similarities between Fetch and the convenience methods commonly found in modern frameworks and libraries."},{"@type":"Syllabus","name":"Create an Ajax request with Fetch","timeRequired":"PT6M28S","description":"Our existing app uses jQuery for Ajax requests. In this video, replace the existing jQuery Ajax code with a Fetch request."},{"@type":"Syllabus","name":"Element selection with vanilla JavaScript","timeRequired":"PT2M49S","description":"Vanilla JavaScript supports numerous different ways of selecting elements, both single and collections. In this video, take a look at the most convenient vanilla JavaScript methods for selecting elements and dig into their differences with jQuery selectors."},{"@type":"Syllabus","name":"Select and modify elements with querySelector","timeRequired":"PT6M1S","description":"The Vanilla JavaScript querySelector method enables you to select a single DOM element. In this video, replace a number of jQuery element selectors with the querySelector method."},{"@type":"Syllabus","name":"Select and modify elements with querySelectorAll","timeRequired":"PT3M15S","description":"The Vanilla JavaScript querySelectorAll method lets you select multiple DOM elements. In this video, replace a jQuery element selector with the querySelectorAll method."},{"@type":"Syllabus","name":"JavaScript events","timeRequired":"PT4M46S","description":"Vanilla JavaScript supports a few different ways to specify code to respond to an event on a specific element, but the best way to do this is using an event listener. In this video, take a look at three ways to connect events to elements using Vanilla JavaScript and examine why using event listeners is a best practice."},{"@type":"Syllabus","name":"Add event listeners with vanilla JavaScript","timeRequired":"PT4M28S","description":"The existing app uses jQuery to specify event handlers. In this video, replace the jQuery event handler code with event listeners."},{"@type":"Syllabus","name":"Work with the event object","timeRequired":"PT4M5S","description":"Vanilla JavaScript supports an event object that provides information about the event being handled, including its source. In this video, use references to the event object to replace instances of the jQuery $(this) keyword."},{"@type":"Syllabus","name":"Data binding","timeRequired":"PT4M12S","description":"When building out a UI yourself with Vanilla JavaScript, it’s important to understand how data binding works so you can create a fully functional solution that doesn’t suffer from performance issues. In this video, examine the importance of tracking state and the virtual DOM in data binding."},{"@type":"Syllabus","name":"Create elements with vanilla JavaScript","timeRequired":"PT7M25S","description":"To replace the React components in the existing app, start by creating DOM elements. In this video, use the createElement method to begin building out a virtual DOM."},{"@type":"Syllabus","name":"Add and modify properties with vanilla JavaScript","timeRequired":"PT9M34S","description":"JavaScript allows you to access a number of properties and methods of DOM elements, which you can use to customize the elements. In this video, create attributes using the setAttribute method, and specify text content using the textContent property."},{"@type":"Syllabus","name":"Append elements with vanilla JavaScript","timeRequired":"PT6M51S","description":"To connect up the elements created, you need to write code that appends elements to other elements. In this video, use the appendChild method to create parent-child relationships between the elements and attributes created, and to append the virtual DOM to the DOM tree."},{"@type":"Syllabus","name":"Template literals to build DOM content","timeRequired":"PT3M28S","description":"Vanilla JavaScript allows you to incorporate variable values with literal content in a single string, known as a template literal. In this video, replace a value that uses string concatenation with a template literal."},{"@type":"Syllabus","name":"Animation with vanilla JavaScript","timeRequired":"PT2M15S","description":"For simple animations, you can recreate the scripted behavior of jQuery with just a single line of Vanilla JavaScript, along with some CSS code. In this video, take a look at JavaScript and CSS techniques that let you build out basic animation, as well as other techniques used for more complex visual transformations."},{"@type":"Syllabus","name":"Show and hide elements using vanilla JavaScript","timeRequired":"PT3M23S","description":"You can toggle the display of an element in Vanilla JavaScript by creating a new class and adding or removing it to an element. In this video, create a new CSS class and write JavaScript that applies to interactively show an element in the browser window."},{"@type":"Syllabus","name":"Transition element appearance using CSS","timeRequired":"PT3M13S","description":"You can recreate gradual animations using the CSS transition property. In this video, add a transition to the CSS code to recreate the effect of the jQuery slideDown method."},{"@type":"Syllabus","name":"Backward compatibility for vanilla JavaScript","timeRequired":"PT2M54S","description":"To ensure that your app is usable by the widest possible set of users, it’s a best practice to convert, or transpile, code written with newer features into an older, more verbose version of JavaScript that runs on a much wider set of browsers. In this video, take a look at different ways to transpile code and the tool that's commonly used for transpiling."},{"@type":"Syllabus","name":"Transpile vanilla JavaScript","timeRequired":"PT8M15S","description":"The app is now written totally in Vanilla JavaScript. In this video, remove the script elements for the library and framework, and transpile the Vanilla JavaScript to make it compatible with a wider set of browsers."},{"@type":"Syllabus","name":"Next steps","timeRequired":"PT41S"}],"aggregateRating":{"@type":"AggregateRating","ratingCount":183,"ratingValue":4.6,"bestRating":5,"worstRating":1},"review":[{"@type":"Review","author":{"@type":"Person","name":"Howard Page","jobTitle":"Software Architect at VUDU - a Walmart company","url":"https://www.linkedin.com/in/howard-page-9738bb3"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"Useful.","datePublished":"2024-04-25T16:35:01.691Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1},{"@type":"Review","author":{"@type":"Person","name":"Abasi-ono Udoh","jobTitle":"Full Stack Engineer | Software Engineer | Backend Development | Frontend Development ","url":"https://ng.linkedin.com/in/abasi-ono-udoh-69564420b"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"Nice course","datePublished":"2023-01-12T13:17:03.780Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1},{"@type":"Review","author":{"@type":"Person","name":"Robert Gove","jobTitle":"Founder and CTO at DigiWaters LLC","url":"https://www.linkedin.com/in/robertgove"},"reviewRating":{"@type":"Rating","ratingValue":4},"reviewBody":"Solid so far.","datePublished":"2023-01-10T21:10:47.118Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1}],"video":{"@type":"VideoObject","name":"Welcome - Learning App Building with Vanilla JavaScript","author":{"@type":"Person","name":"Sasha Vodnik","description":"Principal Technical Course Developer at Docusign ","jobTitle":"Principal Technical Course Developer at Docusign ","url":"https://www.linkedin.com/in/sashavodnik","image":"https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE","description":"Replace jQuery and React with vanilla JavaScript to improve site speed without impacting the user experience.","duration":"PT1M2S","datePublished":"2017-10-11","uploadDate":"2017-10-11","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/welcome"},"educationalLevel":"Intermediate","educationalCredentialAwarded":[{"@type":"EducationalOccupationalCredential","name":"LinkedIn Learning Certificate of Completion","url":"https://www.linkedin.com/help/learning/answer/a598944/learning-certificates-of-completion-faqs","credentialCategory":"Certificate","offers":[{"@type":"Offer","category":"Subscription"}]}]} </script>  </head> <body dir="ltr">   <a href="#main-content" class="skip-link btn-md btn-primary absolute z-11 -top-[100vh] focus:top-0"> Skip to main content </a> <header class="header base-detail-page__header px-mobile-container-padding bg-color-background-container global-alert-offset sticky-header"> <nav class="nav pt-1.5 pb-2 flex items-center justify-between relative flex-nowrap babymamabear:py-1.5 nav--minified-mobile " aria-label="Primary"> <a href="https://www.linkedin.com/learning/?trk=learning-course_nav-header-logo" class="nav__logo-link link-no-visited-state z-1 mr-auto min-h-[52px] flex items-center babybear:z-0 hover:no-underline focus:no-underline active:no-underline babymamabear:mr-3" data-tracking-control-name="learning-course_nav-header-logo" data-tracking-will-navigate> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> </a> <section class="search-bar relative flex flex-grow h-[40px] bg-cool-gray-20 min-w-0 max-w-full mx-4 rounded-sm babymamabear:mx-0 babymamabear:mb-1.5 babymamabear:bg-color-transparent babymamabear:w-full babymamabear:flex babymamabear:flex-wrap search-bar--minified-mobile" data-current-search-type="LEARNING"> <button class="search-bar__placeholder papabear:hidden text-input w-full mt-1.5 !pl-[14px] border-1 border-solid border-color-border-faint rounded-[2px] h-[40px] max-h-[40px] flex items-center overflow-hidden cursor-text" data-tracking-control-name="learning-course_search-switcher-opener"> <icon class="text-color-icon w-3 h-3 mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/397vrsk6op88l4981ji1xe1qt"></icon> <div class="search-bar__full-placeholder font-sans text-md text-color-text max-w-[calc(100%-40px)] text-left whitespace-nowrap overflow-hidden text-ellipsis">  Search skills, subjects, or software  </div> <span class="sr-only">Expand search</span> </button> <div class="switcher-tabs__trigger-and-tabs babymamabear:flex"> <button aria-expanded="false" class="switcher-tabs__placeholder flex !h-full !py-0 !pl-2 !pr-1.5 border-r-1 border-solid border-r-color-border-faint babymamabear:hidden tab-md papabear:tab-vertical papabear:justify-start cursor-pointer" data-tracking-control-name="learning-course_switcher-tabs-placeholder" aria-describedby="switcher-description"> <span class="switcher-tabs__placeholder-text m-auto"></span> <icon class="switcher-tabs__caret-down-filled onload pointer-events-none block my-auto min-h-[24px] min-w-[24px] h-[24px] babymamabear:hidden" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7asbl4deqijhoy3z2ivveispv"></icon> </button> <div id="switcher-description" class="hidden">This button displays the currently selected search type. When expanded it provides a list of search options that will switch the search inputs to match the current selection. </div>  <div class="switcher-tabs hidden z-[1] w-auto min-w-[160px] mb-1.5 py-1 absolute top-[48px] left-0 border-solid border-1 border-color-border-faint papabear:container-raised babymamabear:static babymamabear:w-[100vw] babymamabear:h-[48px] babymamabear:p-0 overflow-y-hidden overflow-x-auto md:overflow-x-hidden"> <ul class="switcher-tabs__list flex flex-1 items-stretch papabear:flex-col" role="tablist"> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="jobs-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="JOBS" data-tracking-control-name="learning-course_switcher-tabs-jobs-search-switcher" id="job-switcher-tab" role="tab"> Jobs </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="people-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="PEOPLE" data-tracking-control-name="learning-course_switcher-tabs-people-search-switcher" id="people-switcher-tab" role="tab"> People </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="learning-search-panel" aria-selected="true" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer tab-selected" data-switcher-type="LEARNING" data-tracking-control-name="learning-course_switcher-tabs-learning-search-switcher" id="learning-switcher-tab" role="tab"> Learning </button> </li> </ul> <button aria-label="Close" class="switcher-tabs__cancel-btn papabear:hidden block w-6 h-6 m-auto text-color-text-low-emphasis" data-tracking-control-name="learning-course_switcher-tabs-cancel-search-switcher" type="button"> <icon class="switcher-tabs__cancel-icon block w-3 h-3 m-auto onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </div> </div> <section class="base-search-bar w-full h-full" data-searchbar-type="PEOPLE" aria-labelledby="people-switcher-tab" id="people-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/pub/dir" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="First Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input" maxlength="500" name="firstName" placeholder="First Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Last Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input" maxlength="500" name="lastName" placeholder="Last Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="trk" value="learning-course_people-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="JOBS" aria-labelledby="job-switcher-tab" id="jobs-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/jobs/search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-form"> <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input keywords-typeahead-input text-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-keywords-typeahead-list" aria-haspopup="listbox" aria-label="Search job titles or companies" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-keywords" maxlength="500" name="keywords" placeholder="Search job titles or companies" role="combobox" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-keywords-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section>  <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input location-typeahead-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-location-typeahead-list" aria-haspopup="listbox" aria-label="Location" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-location" maxlength="500" name="location" placeholder="Location" role="combobox" value="Hong Kong" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-location-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="geoId" value="102817007" type="hidden"> <input name="trk" value="learning-course_jobs-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="LEARNING" aria-labelledby="learning-switcher-tab" id="learning-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/learning/search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Search skills, subjects, or software" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input" maxlength="500" name="keywords" placeholder="Search skills, subjects, or software" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input class="nav__search-uoo" name="upsellOrderOrigin" type="hidden"> <input name="trk" value="learning-course_learning-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section>  <div aria-live="polite" class="search-bar__live-text sr-only" role="status"></div> </section>  <div class="nav__cta-container order-3 flex gap-x-1 justify-end min-w-[100px] flex-nowrap flex-shrink-0 babybear:flex-wrap flex-2 babymamabear:min-w-[50px] "> <a class="nav__button-tertiary btn-md btn-tertiary" href="http://www.linkedin.com/learning/subscription/products?courseSlug=learning-app-building-with-vanilla-javascript&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript&trk=learning-course_nav-header-join&upsellTrk=lil_upsell_nav_subscription&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses" data-tracking-control-name="lil_upsell_nav_subscription" data-tracking-impression-name="lil_upsell_nav_subscription" data-test-live-nav-primary-cta data-tracking-will-navigate> Start free trial </a> <a class="nav__button-secondary btn-md btn-secondary-emphasis" href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses&trk=learning-course_nav-header-signin" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate> Sign in </a> <a aria-label="Sign in" class="nav__link-person papabear:hidden mamabear:hidden" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses&trk=learning-course_nav-header-signin"> <img class="inline-block relative rounded-[50%] w-4 h-4 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt> </a> </div>   </nav> </header>  <div class="cta-banner "> <div class="enterprise-nav"> <div class="enterprise-nav__content-wrapper"> <p id="enterprise-nav-solutions" class="enterprise-nav__content" tabindex="-1"> Solutions for: </p> <a href="https://learning.linkedin.com/for-entire-companies?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-business" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-business">Business</a> <a href="https://learning.linkedin.com/for-higher-education?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-education" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-education">Higher Education</a> <a href="https://learning.linkedin.com/for-governments?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-government" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-government">Government</a> <a href="/learning/subscription/teams?veh=lil_upx&src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-buy" class="enterprise-nav__content" data-test-live-enterprise-upsell="true" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" data-tracking-impression-name="lil_upsell_learning-course_enterprise-nav_teambuy" id="business-nav-buy">Buy for my team</a> </div> </div>   </div> <main class="main papabear:flex papabear:w-content-max-w papabear:mx-auto papabear:pt-desktop-content-top-margin mamabear:pt-desktop-content-top-margin " id="main-content" role="main"> <section class="core-rail mx-auto papabear:w-core-rail-width mamabear:max-w-[790px] babybear:max-w-[790px]"> <ol class="breadcrumb__list"> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/browse?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>All topics</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/technology?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Technology</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/software-development?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Software Development</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/programming-languages?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Programming Languages</a> </li> </ol> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"All topics","item":"https://www.linkedin.com/learning/browse"},{"@type":"ListItem","position":2,"name":"Technology","item":"https://www.linkedin.com/learning/topics/technology"},{"@type":"ListItem","position":3,"name":"Software Development","item":"https://www.linkedin.com/learning/topics/software-development"},{"@type":"ListItem","position":4,"name":"Programming Languages","item":"https://www.linkedin.com/learning/topics/programming-languages"}]} </script> <section class="top-card-layout container-lined overflow-hidden babybear:rounded-[0px]"> <section class="top-card__image-container"> <img class="top-card__image" alt="Learning App Building with Vanilla JavaScript" data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQFOZxWc6nErRg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1567118219619?e=2147483647&v=beta&t=7O-1IBj_oFEwB4zKYZScGTd2MzxX0i4NWHzUip-zmqE"> <a class="top-card__overlay-button" data-tracking-control-name="course_preview" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/welcome?autoplay=true&trk=course_preview"> <span class="top-card__preview-cta "> <icon class="top-card__preview-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l"> </icon> <span class="top-card__preview-cta-text">Preview</span> </span>  </a> </section> <div class="top-card-layout__card relative p-2 papabear:p-details-container-padding"> <div class="top-card-layout__entity-info-container flex flex-wrap papabear:flex-nowrap"> <div class="top-card-layout__entity-info flex-grow flex-shrink-0 basis-0 babybear:flex-none babybear:w-full babybear:flex-none babybear:w-full"> <h1 class="top-card-layout__title font-sans text-lg papabear:text-xl font-bold leading-open text-color-text mb-0"> Learning App Building with Vanilla JavaScript </h1> <h2 class="top-card-layout__headline break-words font-sans text-md leading-open text-color-text"> <div class="top-card__headline-row"> <span class="top-card__headline-row-item top-card__headline-row-item--large">With Sasha Vodnik</span> <span class="top-card__headline-row-item">Liked by 3,254 users</span> </div> <div class="top-card__headline-row"> <span class="top-card__headline-row-item">Duration: 1h 44m</span> <span class="top-card__headline-row-item">Skill level: Intermediate</span> <span class="top-card__headline-row-item">Released: 10/11/2017</span> </div> </h2>   <div class="top-card-layout__cta-container flex flex-wrap mt-0.5 papabear:mt-0 ml-[-12px]"> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=learning-app-building-with-vanilla-javascript&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript&trk=course_info&upsellTrk=lil_upsell_course_info_subscription" data-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-impression-name="lil_upsell_course_info_subscription" data-litms-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-will-navigate class="top-card__upsell-link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--primary btn-md btn-primary" data-test-live-course-sub-upsell> Start my 1-month free trial </a> <a class="buy-for-your-team-cta__link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--secondary btn-md btn-secondary" href="/learning/subscription/teams?veh=lil_upx&src=li-lil-upsell&trk=learning-course_buy-for-your-team-cta" data-tracking-control-name="learning-course_buy-for-your-team-cta" data-tracking-impression-name="lil_upsell_learning-course_buy-for-your-team-cta_teambuy" data-test-live-buy-for-your-team-upsell data-tracking-will-navigate> Buy for my team </a> </div> </div>  </div>   </div> </section> <div class="details mx-details-container-padding"> <section class="core-section-container my-3 course-details">  <h2 class="core-section-container__title section-title"> Course details </h2>  <div class="core-section-container__content break-words"> <section class="show-more-less-html course-details__description" data-max-lines="4"> <div class="show-more-less-html__markup show-more-less-html__markup--clamp-after-4 relative overflow-hidden"> JavaScript libraries like jQuery and frameworks like React have a lot of benefits to offer, but performance can be a tradeoff. Removing jQuery and React can improve site speed without impacting user experience. But many developers have never learned the equivalent code in JavaScript. This course teaches you how to program the same features and functionality with vanilla JavaScript.<br><br> Instructor Sasha Vodnik starts with an app built with jQuery and React and replaces it piece by piece with vanilla JavaScript. He removes the dependencies and shows that the app still works, conducting performance tests to compare the start and end code. Topics include replacing DOM manipulation, replacing Ajax, replacing event listeners, and replacing simple animations, like show, hide, and toggle. The end result is a pure JavaScript app that is backwards and cross-browser compatible—no libraries necessary! </div> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--more ml-0.5" data-tracking-control-name="learning-course_show-more-html-btn" aria-label="i18n_show_more" aria-expanded="false">  Show more <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--less ml-0.5" data-tracking-control-name="learning-course_show-less-html-btn" aria-label="i18n_show_less" aria-expanded="true">  Show less <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button>  </section> </div> </section> <section class="core-section-container my-3 course-skills">  <h2 class="core-section-container__title section-title"> Skills you’ll gain </h2>  <div class="core-section-container__content break-words"> <ul class="course-skills__skill-list"> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/search?keywords=Vanilla&trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> Vanilla </a> </li> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/topics/javascript?trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> JavaScript </a> </li> </ul> </div> </section> <section class="core-section-container my-3">  <h2 class="core-section-container__title section-title"> Earn a sharable certificate </h2>  <div class="core-section-container__content break-words"> <p class="course-certificate__body-paragraph">Share what you’ve learned, and be a standout professional in your desired industry with a certificate showcasing your knowledge gained from the course.</p> <div class="course-certificate__image-container"> <img class="course-certificate__certificate-image" alt="Sample certificate" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/52nu8qc7cfcn7vrftr7ttceqt"> <div> <h3 class="course-certificate__detail-list-heading"> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text learning-logo__text--show-on-mobile" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> <span>Certificate of Completion</span> </h3> <ul> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Showcase on your LinkedIn profile under “Licenses and Certificate” section</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Download or print out as PDF to share with others</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Share as image online to demonstrate your skill</p> </li> </ul> </div> </div> </div> </section> <section class="core-section-container my-3 course-instructors">  <h2 class="core-section-container__title section-title"> Meet the instructor </h2>  <div class="core-section-container__content break-words"> <ul class="course-instructors__list"> <li class="course-instructors__list-item"> <a href="https://www.linkedin.com/in/sashavodnik?trk=learning-course_instructor" target="_self" data-tracking-control-name="learning-course_instructor" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link">  <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C5603AQEzqi9fJCEhmA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1572483159547?e=2147483647&v=beta&t=OrtGCthB7QkpUX8R-roL-zrDpj9E-YzGK72vgUz6gJI" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Click here to view Sasha Vodnik’s instructor page"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Sasha Vodnik </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Principal Technical Course Developer at Docusign </h4>   </div>  </a> </li> </ul> </div> </section> <section class="core-section-container my-3 reviews-feed">  <h2 class="core-section-container__title section-title"> Learner reviews </h2>  <div class="core-section-container__content break-words"> <div class="reviews-feed__ratings-summary"> <section class="ratings-summary"> <div class="ratings-summary__overall-rating"> <h3 class="ratings-summary__header"><span class="ratings-summary__rating-average">4.6</span> <span class="ratings-summary__rating-max">out of 5</span></h3> <figure class="ratings-summary__figure"> <span class="star-rating" role="img" aria-label="Rating: 4.6 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7dacecy4xq1otzk8pae2g0hxd"></icon> </span> </span> <figcaption class="ratings-summary__ratings-total">183 ratings</figcaption> </figure> </div> <div class="ratings-summary__breakdown"> <div class="ratings-summary__disclaimer"> <div class="tooltip"> <button class="tooltip__trigger ratings-summary__disclaimer-trigger" data-tracking-control-name="toggle_disclaimer" type="button"> <icon class="ratings-summary__disclaimer-icon" data-svg-class-name="ratings-summary__disclaimer-icon-svg" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/g8uts9v3k83n9e3iyvcxit0k"> </icon> <span class="ratings-summary__disclaimer-text">How are ratings calculated?</span> </button> <span role="tooltip" class="tooltip__popup" aria-hidden="true"> The overall rating is calculated using the average of submitted ratings. Ratings and reviews can only be submitted when non-anonymous learners complete at least 40% of the course. This helps us avoid fake reviews and spam. </span> </div> </div> <ul> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 5 star </figcaption> <progress class="ratings-summary__progress-bar" max="183" value="129" aria-valuemin="0" aria-valuenow="129" aria-valuemax="183"> Current value: 129 </progress> <span class="ratings-summary__rating-count-percent"> 70% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 4 star </figcaption> <progress class="ratings-summary__progress-bar" max="183" value="43" aria-valuemin="0" aria-valuenow="43" aria-valuemax="183"> Current value: 43 </progress> <span class="ratings-summary__rating-count-percent"> 23% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 3 star </figcaption> <progress class="ratings-summary__progress-bar" max="183" value="9" aria-valuemin="0" aria-valuenow="9" aria-valuemax="183"> Current value: 9 </progress> <span class="ratings-summary__rating-count-percent"> 5% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 2 star </figcaption> <progress class="ratings-summary__progress-bar" max="183" value="1" aria-valuemin="0" aria-valuenow="1" aria-valuemax="183"> Current value: 1 </progress> <span class="ratings-summary__rating-count-percent"> <1% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 1 star </figcaption> <progress class="ratings-summary__progress-bar" max="183" value="1" aria-valuemin="0" aria-valuenow="1" aria-valuemax="183"> Current value: 1 </progress> <span class="ratings-summary__rating-count-percent"> <1% </span> </figure> </li> </ul> </div> </section> </div> <ul class="reviews-feed__reviews-list"> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://www.linkedin.com/in/howard-page-9738bb3?trk=learning-course" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Howard Page  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Howard Page"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Howard Page  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Software Architect at VUDU - a Walmart company </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> April 25, 2024 </span> </div> <div class="review-card__text"> Useful. </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Howard Page’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Howard Page’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div> </div>  </div> </div> </li> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://ng.linkedin.com/in/abasi-ono-udoh-69564420b?trk=learning-course" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Abasi-ono Udoh  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/D4D03AQHwGpflbBLqrw/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1705922561245?e=2147483647&v=beta&t=UfftDivJJ5W0kMGrDKSDri4RDJxH_7knMNV7IPNZ9ww" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Abasi-ono Udoh"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Abasi-ono Udoh  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Full Stack Engineer | Software Engineer | Backend Development | Frontend Development </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> January 12, 2023 </span> </div> <div class="review-card__text"> Nice course </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Abasi-ono Udoh’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Abasi-ono Udoh’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div> </div>  </div> </div> </li> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://www.linkedin.com/in/robertgove?trk=learning-course" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Robert Gove  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C5603AQG76NC7peubaw/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1516253910975?e=2147483647&v=beta&t=9U6WAh1NrYAA0qFgysmtgoyEgstm0EnOco-VpHtQggM" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Robert Gove"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full"> <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Robert Gove  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden"> Founder and CTO at DigiWaters LLC </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 4 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/e0hq4l058yoqerjsrssp5pbr0"></icon> </span> </span> </div> <span class="review-card__rating"> 4/5 </span> <span class="review-card__date"> January 10, 2023 </span> </div> <div class="review-card__text"> Solid so far. </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Robert Gove’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Robert Gove’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Flearning-app-building-with-vanilla-javascript%3Ftrk%3Dlearning-course_similar-courses%26trk%3Dlearning-course_similar-courses&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div> </div>  </div> </div> </li> </ul> </div> </section> </div> </section> <section class="right-rail papabear:w-right-rail-width papabear:ml-column-gutter mamabear:max-w-[790px] mamabear:px-mobile-container-padding babybear:max-w-[790px] babybear:px-mobile-container-padding"> <section class="table-of-contents mb-4 table-of-contents--with-max-height"> <h2 class="table-of-contents__header"> Contents </h2> <ul class="table-of-contents__list"> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/welcome?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Welcome </div> <div class="table-of-contents__item-duration"> 1m 2s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/what-you-should-know?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> What you should know </div> <div class="table-of-contents__item-duration"> 48s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/exercise-files?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Exercise files </div> <div class="table-of-contents__item-duration"> 54s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Overview of Vanilla JS <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Overview of Vanilla JS <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/libraries-frameworks-and-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Libraries, frameworks, and vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 3m 43s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/identify-when-to-replace-frameworks-and-libraries?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Identify when to replace frameworks and libraries </div> <div class="table-of-contents__item-duration"> 3m 20s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Project Overview <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Project Overview <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/application-architecture?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Application architecture </div> <div class="table-of-contents__item-duration"> 3m 3s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Environment Setup <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Environment Setup <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/environment-setup?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Environment setup </div> <div class="table-of-contents__item-duration"> 3m 1s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/getting-your-api-key?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Getting your API key </div> <div class="table-of-contents__item-duration"> 3m 2s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Replace Ajax <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Replace Ajax <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/fetch-api?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Fetch API </div> <div class="table-of-contents__item-duration"> 1m 51s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/create-an-ajax-request-with-fetch?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Create an Ajax request with Fetch </div> <div class="table-of-contents__item-duration"> 6m 28s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Select and Modify DOM Elements <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Select and Modify DOM Elements <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/element-selection-with-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Element selection with vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 2m 49s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/select-and-modify-elements-with-queryselector?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Select and modify elements with querySelector </div> <div class="table-of-contents__item-duration"> 6m 1s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/select-and-modify-elements-with-queryselectorall?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Select and modify elements with querySelectorAll </div> <div class="table-of-contents__item-duration"> 3m 15s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Replace Event Listeners <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Replace Event Listeners <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/javascript-events?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> JavaScript events </div> <div class="table-of-contents__item-duration"> 4m 46s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/add-event-listeners-with-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Add event listeners with vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 4m 28s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/work-with-the-event-object?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Work with the event object </div> <div class="table-of-contents__item-duration"> 4m 5s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. Implement Data Binding <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. Implement Data Binding <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/data-binding?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Data binding </div> <div class="table-of-contents__item-duration"> 4m 12s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/create-elements-with-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Create elements with vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 7m 25s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/add-and-modify-properties-with-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Add and modify properties with vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 9m 34s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/append-elements-with-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Append elements with vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 6m 51s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/template-literals-to-build-dom-content?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Template literals to build DOM content </div> <div class="table-of-contents__item-duration"> 3m 28s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 8. Replace Simple Animations <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 8. Replace Simple Animations <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/animation-with-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Animation with vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 2m 15s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/show-and-hide-elements-using-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Show and hide elements using vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 3m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/transition-element-appearance-using-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Transition element appearance using CSS </div> <div class="table-of-contents__item-duration"> 3m 13s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 9. Ensure Backward Compatibility <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 9. Ensure Backward Compatibility <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/backward-compatibility-for-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Backward compatibility for vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 2m 54s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/transpile-vanilla-javascript?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Transpile vanilla JavaScript </div> <div class="table-of-contents__item-duration"> 8m 15s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/learning-app-building-with-vanilla-javascript/next-steps?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Next steps </div> <div class="table-of-contents__item-duration"> 41s </div> </div> </a> </li> </ul>  </div> </li> </ul> </section> <section class="aside-section-container mb-4 subscription-value-props-aside-section"> <h2 class="aside-section-container__title section-title"> What’s included </h2>  <div class="aside-section-container__content break-words"> <ul> <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Practice while you learn</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">1 exercise file</span> </li> <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Test your knowledge</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">7 quizzes</span> </li> <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Learn on the go</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">Access on tablet and phone</span> </li>  </ul> </div> </section>  <section class="aside-section-container mb-4"> <h2 class="aside-section-container__title section-title"> Download courses </h2>  <div class="aside-section-container__content break-words"> <p>Use your iOS or Android LinkedIn Learning app, and watch courses on your mobile device without an internet connection.</p> <div class="app-links-aside-section__link-container"> <a class="app-links-aside-section__link" href="https://itunes.apple.com/app/apple-store/id1084807225?ls=1&pt=10746&mt=8&ct=learning_course_app_links&trk=learning-course_apple-app-store" data-tracking-control-name="learning-course_apple-app-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Download on the App Store" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/emczv26hz24woii2j4aleyry" height="42px" width="142px"> </a> <a class="app-links-aside-section__link" href="https://play.google.com/store/apps/details?id=com.linkedin.android.learning&referrer=utm_source%3Dlinkedinlearning%26utm_medium%3DmobileWeb%26utm_campaign%3Dlearning_guest&ct=learning_course_app_links&trk=learning-course_google-play-store" data-tracking-control-name="learning-course_google-play-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Get it on Google Play" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/535kqf5rsexfx0lucb3t6palb" height="42px" width="142px"> </a> </div> </div> </section> </section> </main> <div class="pre-footer "> <section class="core-section-container my-3 price-disclaimer">    <div class="core-section-container__content break-words"> <p class="price-disclaimer__copy"> <sup class="price-disclaimer__copy--sup">*</sup>Price may change based on profile and billing country information entered during Sign In or Registration </p> </div> </section> <section class="tw-linkster bg-cool-gray-20 browse-map" data-impression-id="learning-course_linkster" data-js-module-id="linkster"> <div class="max-w-screen-content-max-w w-full flex justify-between my-0 mx-auto mamabear:px-3 babybear:px-2 babybear:flex-col"> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Business Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-analysis-and-strategy?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Analysis and Strategy </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-software-and-tools?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Software and Tools </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/career-development-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Career Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/customer-service-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Customer Service </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/diversity-equity-and-inclusion-dei?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Diversity, Equity, and Inclusion (DEI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/finance-and-accounting?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Finance and Accounting </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/human-resources-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Human Resources </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/leadership-and-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Leadership and Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/marketing-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Marketing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/professional-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Professional Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/project-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Project Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/sales-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Sales </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/small-business-and-entrepreneurship?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Small Business and Entrepreneurship </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/training-and-education?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Training and Education </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all business courses" href="https://www.linkedin.com/learning/topics/business?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Creative Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/aec?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> AEC </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/animation-and-illustration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Animation and Illustration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/audio-and-music?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Audio and Music </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/graphic-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Graphic Design </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/motion-graphics-and-vfx?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Motion Graphics and VFX </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/photography-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Photography </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/product-and-manufacturing?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Product and Manufacturing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/user-experience?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> User Experience </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/2015-54?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Video </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/visualization-and-real-time?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Visualization and Real-Time </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Design </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all creative courses" href="https://www.linkedin.com/learning/topics/creative?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Technology Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/artificial-intelligence?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Artificial Intelligence (AI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/cloud-computing-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cloud Computing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/security-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cybersecurity </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/data-science?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Data Science </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/database-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Database Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/devops?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> DevOps </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/hardware?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Hardware </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/it-help-desk-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT Help Desk </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/mobile-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Mobile Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/network-and-system-administration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Network and System Administration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/software-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Software Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Development </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all technology courses" href="https://www.linkedin.com/learning/topics/technology?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> </div> </section> </div> <footer class="li-footer bg-transparent w-full "> <ul class="li-footer__list flex flex-wrap flex-row items-start justify-start w-full h-auto min-h-[50px] my-[0px] mx-auto py-3 px-2 papabear:w-[1128px] papabear:p-0"> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <span class="sr-only">LinkedIn</span> <icon class="li-footer__copy-logo text-color-logo-brand-alt inline-block self-center h-[14px] w-[56px] mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/e12h2cd8ac580qen9qdd0qks8"></icon> <span class="li-footer__copy-text flex items-center">© 2024</span> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://about.linkedin.com?trk=d_learning_course_guest_footer-about" data-tracking-control-name="d_learning_course_guest_footer-about" data-tracking-will-navigate> About </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/accessibility?trk=d_learning_course_guest_footer-accessibility" data-tracking-control-name="d_learning_course_guest_footer-accessibility" data-tracking-will-navigate> Accessibility </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/user-agreement?trk=d_learning_course_guest_footer-user-agreement" data-tracking-control-name="d_learning_course_guest_footer-user-agreement" data-tracking-will-navigate> User Agreement </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/privacy-policy?trk=d_learning_course_guest_footer-privacy-policy" data-tracking-control-name="d_learning_course_guest_footer-privacy-policy" data-tracking-will-navigate> Privacy Policy </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/cookie-policy?trk=d_learning_course_guest_footer-cookie-policy" data-tracking-control-name="d_learning_course_guest_footer-cookie-policy" data-tracking-will-navigate> Cookie Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/copyright-policy?trk=d_learning_course_guest_footer-copyright-policy" data-tracking-control-name="d_learning_course_guest_footer-copyright-policy" data-tracking-will-navigate> Copyright Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://brand.linkedin.com/policies?trk=d_learning_course_guest_footer-brand-policy" data-tracking-control-name="d_learning_course_guest_footer-brand-policy" data-tracking-will-navigate> Brand Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/psettings/guest-controls?trk=d_learning_course_guest_footer-guest-controls" data-tracking-control-name="d_learning_course_guest_footer-guest-controls" data-tracking-will-navigate> Guest Controls </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/professional-community-policies?trk=d_learning_course_guest_footer-community-guide" data-tracking-control-name="d_learning_course_guest_footer-community-guide" data-tracking-will-navigate> Community Guidelines </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <div class="collapsible-dropdown collapsible-dropdown--footer collapsible-dropdown--up flex items-center relative hyphens-auto language-selector z-2">  <ul class="collapsible-dropdown__list hidden container-raised absolute w-auto overflow-y-auto flex-col items-stretch z-1 bottom-[100%] top-auto" role="menu" tabindex="-1"> <li class="language-selector__item" role="presentation">  <button aria-label="العربية (Arabic)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ar_AE" data-locale="ar_AE" role="menuitem" lang="ar_AE"> العربية (Arabic) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="বাংলা (Bangla)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-bn_IN" data-locale="bn_IN" role="menuitem" lang="bn_IN"> বাংলা (Bangla) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Čeština (Czech)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-cs_CZ" data-locale="cs_CZ" role="menuitem" lang="cs_CZ"> Čeština (Czech) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Dansk (Danish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-da_DK" data-locale="da_DK" role="menuitem" lang="da_DK"> Dansk (Danish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Deutsch (German)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-de_DE" data-locale="de_DE" role="menuitem" lang="de_DE"> Deutsch (German) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Ελληνικά (Greek)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-el_GR" data-locale="el_GR" role="menuitem" lang="el_GR"> Ελληνικά (Greek) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="English (English) selected" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link--selected" data-tracking-control-name="language-selector-en_US" data-locale="en_US" role="menuitem" lang="en_US"> <strong>English (English)</strong> </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Español (Spanish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-es_ES" data-locale="es_ES" role="menuitem" lang="es_ES"> Español (Spanish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="فارسی (Persian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fa_IR" data-locale="fa_IR" role="menuitem" lang="fa_IR"> فارسی (Persian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Suomi (Finnish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fi_FI" data-locale="fi_FI" role="menuitem" lang="fi_FI"> Suomi (Finnish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Français (French)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fr_FR" data-locale="fr_FR" role="menuitem" lang="fr_FR"> Français (French) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="हिंदी (Hindi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hi_IN" data-locale="hi_IN" role="menuitem" lang="hi_IN"> हिंदी (Hindi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Magyar (Hungarian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hu_HU" data-locale="hu_HU" role="menuitem" lang="hu_HU"> Magyar (Hungarian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Indonesia (Indonesian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-in_ID" data-locale="in_ID" role="menuitem" lang="in_ID"> Bahasa Indonesia (Indonesian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Italiano (Italian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-it_IT" data-locale="it_IT" role="menuitem" lang="it_IT"> Italiano (Italian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="עברית (Hebrew)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-iw_IL" data-locale="iw_IL" role="menuitem" lang="iw_IL"> עברית (Hebrew) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="日本語 (Japanese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ja_JP" data-locale="ja_JP" role="menuitem" lang="ja_JP"> 日本語 (Japanese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="한국어 (Korean)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ko_KR" data-locale="ko_KR" role="menuitem" lang="ko_KR"> 한국어 (Korean) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="मराठी (Marathi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-mr_IN" data-locale="mr_IN" role="menuitem" lang="mr_IN"> मराठी (Marathi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Malaysia (Malay)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ms_MY" data-locale="ms_MY" role="menuitem" lang="ms_MY"> Bahasa Malaysia (Malay) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Nederlands (Dutch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-nl_NL" data-locale="nl_NL" role="menuitem" lang="nl_NL"> Nederlands (Dutch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Norsk (Norwegian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-no_NO" data-locale="no_NO" role="menuitem" lang="no_NO"> Norsk (Norwegian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ਪੰਜਾਬੀ (Punjabi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pa_IN" data-locale="pa_IN" role="menuitem" lang="pa_IN"> ਪੰਜਾਬੀ (Punjabi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Polski (Polish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pl_PL" data-locale="pl_PL" role="menuitem" lang="pl_PL"> Polski (Polish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Português (Portuguese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pt_BR" data-locale="pt_BR" role="menuitem" lang="pt_BR"> Português (Portuguese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Română (Romanian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ro_RO" data-locale="ro_RO" role="menuitem" lang="ro_RO"> Română (Romanian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Русский (Russian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ru_RU" data-locale="ru_RU" role="menuitem" lang="ru_RU"> Русский (Russian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Svenska (Swedish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-sv_SE" data-locale="sv_SE" role="menuitem" lang="sv_SE"> Svenska (Swedish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="తెలుగు (Telugu)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-te_IN" data-locale="te_IN" role="menuitem" lang="te_IN"> తెలుగు (Telugu) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ภาษาไทย (Thai)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-th_TH" data-locale="th_TH" role="menuitem" lang="th_TH"> ภาษาไทย (Thai) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tagalog (Tagalog)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tl_PH" data-locale="tl_PH" role="menuitem" lang="tl_PH"> Tagalog (Tagalog) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Türkçe (Turkish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tr_TR" data-locale="tr_TR" role="menuitem" lang="tr_TR"> Türkçe (Turkish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Українська (Ukrainian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-uk_UA" data-locale="uk_UA" role="menuitem" lang="uk_UA"> Українська (Ukrainian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tiếng Việt (Vietnamese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-vi_VN" data-locale="vi_VN" role="menuitem" lang="vi_VN"> Tiếng Việt (Vietnamese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="简体中文 (Chinese (Simplified))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_CN" data-locale="zh_CN" role="menuitem" lang="zh_CN"> 简体中文 (Chinese (Simplified)) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="正體中文 (Chinese (Traditional))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_TW" data-locale="zh_TW" role="menuitem" lang="zh_TW"> 正體中文 (Chinese (Traditional)) </button> </li>  </ul> <button class="language-selector__button select-none relative pr-2 font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover hover:cursor-pointer focus:text-color-link-focus focus:outline-dotted focus:outline-1" aria-expanded="false" data-tracking-control-name="footer-lang-dropdown_trigger"> <span class="language-selector__label-text mr-0.5 break-words"> Language </span> <icon class="language-selector__label-chevron w-2 h-2 absolute top-0 right-0" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> </div> </li> </ul>  </footer> <script src="https://static.licdn.com/aero-v1/sc/h/eh08muqvrde4h3hc6koyij5ti" async></script>  <script src="https://static.licdn.com/aero-v1/sc/h/awgwgu3fg49q0tcvd24ku87qq" async defer></script> <script data-delayed-url="https://static.licdn.com/aero-v1/sc/h/81wy0f4hfrhoilx9eqdwg202z" data-module-id="media-player"></script> <code id="trackingData" style="display: none"></code> <code id="alcOnlyData" style="display: none"></code> </body> </html>

CINXE.COM

Learning App Building with Vanilla JavaScript Online Class | LinkedIn Learning, formerly Lynda.com