CINXE.COM
Coding Courses & Computer Science Curriculum - CS First
<!DOCTYPE html> <html lang="en"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("http://web.archive.org/web"); __wm.wombat("https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html","20220809111255","http://web.archive.org/","web","/_static/", "1660043575"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" /> <!-- End Wayback Rewrite JS Include --> <script src="http://web.archive.org/web/20220809111255js_/https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <meta name="analytics-data" content="{"domain": "csfirst.withgoogle.com", "ga_id": "UA-47098937-4", "ga_optimize_id": null, "gtm_id": "GTM-PS6PHFL", "audiences": "", "language": "en"} "> <script> window.dataLayer = window.dataLayer || []; $.ajaxSetup({ dataFilter: function(s) { return s.replace(/^\)\]\}\'/, ''); } }); $.get('/apps/user/meta', function(userData) { const trackingDataStr = document.getElementsByName('analytics-data')[0].getAttribute('content'); const trackingData = JSON.parse(trackingDataStr); const analyticsData = userData['analytics_data']; var data = { 'role': analyticsData['specific_role'] }; if (analyticsData['role'] == 'teacher') { data['teacher'] = { 'classCount': analyticsData['class_count'], 'maxStudentCount': analyticsData['max_student_count'], 'studentCountList': analyticsData['student_count_list'] }; } if (analyticsData['remarketing_enabled']) { data['remarketingEnabled'] = 'true'; } if (trackingData['domain'] == 'applieddigitalskills.withgoogle.com') { if ('audiences' in trackingData && trackingData['language'] == 'en') { data['lesson'] = { 'audience': trackingData['audiences'] }; } if ('one_hour_plus' in trackingData) { data['lesson'] = data['lesson'] || {}; data['lesson']['oneHourFlag'] = trackingData['one_hour_plus'].toString().toLowerCase(); } } window.dataLayer.push(data); if (trackingData['domain'] == 'applieddigitalskills.withgoogle.com') { // Modified Analytics tracking code with Optimize plugin (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','http://web.archive.org/web/20220809111255/https://www.google-analytics.com/analytics.js','gtmua'); gtmua('create', trackingData['ga_id'], 'auto', {'allowLinker':true}); gtmua('require', trackingData['ga_optimize_id']); } // Google Tag Manager (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'http://web.archive.org/web/20220809111255/https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer',trackingData['gtm_id']); var pageViewData = { 'event' : 'trackPageview', }; // The 'undefined' is due to an old bug which we should fix at some point, but for now the // goal is to preserve the metrics values as they are exactly. const dimensionRole = 'undefined ' + analyticsData['role']; const dimensionLanguage = document.documentElement.getAttribute('lang'); const dimensionNumStudents = analyticsData['role'] == 'teacher' ? analyticsData['num_students'] : undefined; if (trackingData['domain'] == 'applieddigitalskills.withgoogle.com') { pageViewData['pageName'] = document.location.pathname; pageViewData['dimension1'] = dimensionRole; pageViewData['dimension2'] = dimensionLanguage; pageViewData['dimension3'] = dimensionNumStudents; } else if (trackingData['domain'] == 'csfirst.withgoogle.com') { pageViewData['dimension1'] = dimensionLanguage; pageViewData['dimension4'] = dimensionRole; pageViewData['dimension5'] = analyticsData['account_type']; } window.dataLayer.push(pageViewData); }); </script> <meta charset="UTF-8"> <meta name="description" content="Find coding courses and computer science lessons to use with your students. All of the materials in the computer science curriculum are free and easy to use."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coding Courses & Computer Science Curriculum - CS First</title> <link rel="canonical" href="http://web.archive.org/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html"> <link rel="icon" type="image/png" href="http://web.archive.org/web/20220809111255im_/https://google.com/favicon.ico"> <!-- Hercules CDN --> <link href="//web.archive.org/web/20220809111255cs_/https://www.gstatic.com/glue/v20_0/glue.min.css" rel="stylesheet"> <link href="//web.archive.org/web/20220809111255cs_/https://www.gstatic.com/glue/v20_0/hercules.min.css" rel="stylesheet"> <script src="//web.archive.org/web/20220809111255js_/https://www.gstatic.com/glue/v20_0/glue-detect.min.js"></script> <link href="/web/20220809111255cs_/https://csfirst.withgoogle.com/static/css/nav.min.css?cache=080a67e" rel="stylesheet"> <link rel="stylesheet" href="/web/20220809111255cs_/https://csfirst.withgoogle.com/static/preview/csfirst/css/dropdown.css"> <link rel="stylesheet" href="/web/20220809111255cs_/https://csfirst.withgoogle.com/static/preview/csfirst/css/cms.css"> <link href="/web/20220809111255cs_/https://csfirst.withgoogle.com/css/cookies-disclaimer.css" rel="stylesheet"> <link rel="stylesheet" href="/web/20220809111255cs_/https://csfirst.withgoogle.com/static/preview/csfirst/css/card.css"> <link rel="stylesheet" href="/web/20220809111255cs_/https://csfirst.withgoogle.com/static/css/preview_module.css"> <script src="http://web.archive.org/web/20220809111255js_/https://apis.google.com/js/platform.js" async defer></script> <script>CLOSURE_NO_DEPS = true;</script> <script src="/web/20220809111255js_/https://csfirst.withgoogle.com/js/src.js"></script> <script> window.WIZ_global_data = {}; window.WIZ_global_data.sbdAUe = 'W1siQ1MgRmlyc3QiLDIsIi9jL2NzLWZpcnN0IixbImh0dHBzOi8vc3VwcG9ydC5nb29nbGUuY29tL2NzZmlyc3QvYW5zd2VyLzEwMTkxNzMzI0dDX3N0dWRlbnRfSW5zdHJ1Y3Rpb25zIiwiaHR0cHM6Ly9zdXBwb3J0Lmdvb2dsZS5jb20vY3NmaXJzdC9hbnN3ZXIvMTAwOTg1ODAiXSwiZy5jby9jc2ZpcnN0IiwibmFtZXNwYWNlcy9nb29nbGUuZW5nZWR1LmNzZmlyc3QiLCJ2aGdHNlhaV0Iwa1RkYzQyak5YME51YmZlek5GIiwiY3NmaXJzdC53aXRoZ29vZ2xlLmNvbSIsIlVBLTQ3MDk4OTM3LTQiLG51bGwsIkdUTS1QUzZQSEZMIl0sW251bGwsMSwxLG51bGwsMSxudWxsLG51bGwsbnVsbCxudWxsLDFdXQ=='; window.WIZ_global_data.aSnGWd = { VFQph: 'csfirst', }; window.WIZ_global_data.nQyAE = {}; </script> <style> </style> <link rel="stylesheet" href="http://web.archive.org/web/20220809111255cs_/https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Extended|Material+Icons+Outlined|Google+Sans:400,500|Product+Sans|Roboto:400,500&lang=en&display=swap"> <script src="/web/20220809111255js_/https://csfirst.withgoogle.com/static/preview/csfirst/js/cms.js"></script> <script src="/web/20220809111255js_/https://csfirst.withgoogle.com/static/js/preview_component.js"></script> <script> function classroomFooterShareStart() { dataLayer.push({ 'event': 'social', 'socialNetwork': 'Classroom', 'socialAction': 'share', 'socialTarget': 'Footer share started for https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html' }); }; function classroomFooterShareComplete() { dataLayer.push({ 'event': 'social', 'socialNetwork': 'Classroom', 'socialAction': 'share', 'socialTarget': 'Footer share completed for https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html' }); }; function trackFooterFBShare() { dataLayer.push({ 'event': 'social', 'socialNetwork': 'Facebook', 'socialAction': 'share', 'socialTarget': 'Footer share for https://csfirst.withgoogle.com/s/en/home' }); }; function trackFooterTwitterShare() { dataLayer.push({ 'event': 'social', 'socialNetwork': 'Twitter', 'socialAction': 'share', 'socialTarget': 'Footer share for https://csfirst.withgoogle.com/s/en/home' }); }; </script> </head> <body id="wizViewportRootId" class="elms-app elms-app-csfirst csf-cms page-curriculum"> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="http://web.archive.org/web/20220809111255if_/https://www.googletagmanager.com/ns.html?id=GTM-PS6PHFL" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- End Google Tag Manager (noscript) --> <div class="content-wrapper"> <header class="glue-header h-c-header h-c-header--product-initiative" glue-header-vertical-scroll-threshold="100" glue-header-throttle-timeout="250"> <!-- desktop header --> <div class="h-c-header__bar cs-header-bigscreen" role="menubar"> <div class="h-c-header__hamburger h-c-header__hamburger--first-tier"> <div class="h-c-header__hamburger-wrapper"> <button type="button" class="h-c-header__hamburger-link" aria-controls="h-js-header__drawer" aria-expanded="false" title="Open the navigation drawer"> <svg role="img" aria-label="Navigation" class="h-c-header__hamburger-img h-c-header__hamburger-img--standard"> <use xlink:href="/web/20220809111255im_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html#h-burger"></use> </svg> </button> </div> </div> <div class="h-c-header__lockup"> <div class="h-c-header__company-logo"> <div class="h-c-header__company-logo-link" title="Google"> <svg role="img" aria-label="Google" class="h-c-header__company-logo-img h-c-header__company-logo-img--standard"> <title>Google</title> <use xlink:href="/web/20220809111255im_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html#h-color-google-logo"></use> </svg> </div> </div> <div class="h-c-header__product-logo"> <div class="h-c-header__product-logo-link"> <span class="h-c-header__product-logo-text">for Education</span> </div> </div> <a href="#jump-content" class="h-c-header__jump-to-content" data-glue-jump-link=""> <span class="h-c-header__jump-to-content-text"> Skip to content </span> </a> </div> <div class="h-c-header__hamburger h-c-header__hamburger--second-tier"> <div class="h-c-header__hamburger-wrapper"> <button type="button" class="h-js-header__drawer-toggle-link h-c-header__hamburger-link" aria-controls="h-js-header__drawer" aria-expanded="false" title="Open the navigation drawer"> <svg role="img" aria-label="Navigation" class="h-c-header__hamburger-img h-c-header__hamburger-img--standard"> <use xlink:href="/web/20220809111255im_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html#h-burger"></use> </svg> </button> </div> </div> <div class="h-c-header__initiative-logo"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/" class="h-c-header__initiative-logo-link"> <span class="h-c-header__initiative-logo-text"> CS First </span> </a> </div> <nav class="h-c-header__nav"> <ul class="h-c-header__nav-list cs-header" role="menu"> <li class="h-c-header__nav-li" aria-level="1"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html" role="menuitem" class="h-c-header__nav-li-link"> Curriculum </a> </li> <li class="h-c-header__nav-li curriculum-nav" aria-level="1"> <a class="h-c-header__nav-li-link" id="curriculum-dropdown" role="button" href="#" aria-owns="curriculum-dropdown-content" aria-controls="curriculum-dropdown-content" aria-expanded="false"> Lessons & badges <i class="material-icons-extended" aria-hidden="true">keyboard_arrow_down</i> </a> </li> <li class="h-c-header__nav-li teacher-support nav-resources" aria-level="1"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/s/en/teachers" role="menuitem" class="h-c-header__nav-li-link"> Resources </a> </li> <li class="h-c-header__nav-li teacher-support nav-about" aria-level="1"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/s/en/about" role="menuitem" class="h-c-header__nav-li-link"> About </a> </li> </ul> </nav> <nav class="h-c-header__cta"> <ul class="h-c-header__cta-list" role="menu"> <li class="h-c-header__nav-li h-c-header__cta-li--icon-link signed-out__only"> <button class="h-c-link h-c-header__nav-li-link icon-link dropdown-toggle" aria-label="Help" title="Help" id="help-nav" aria-controls="help-dropdown-content" aria-haspopup="menu" aria-expanded="false"> <i class="material-icons material-icons-outlined" aria-hidden="true">help_outline</i> </button> <!-- Help dropdown for desktop --> <ul class="dropdown-menu help-dropdown" id="help-dropdown-content" role="menu"> <li> <a class="dropdown-menu__link" target="_blank" role="menuitem" href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst?hl=en"> <i class="material-icons" aria-hidden="true">help_outline</i> Help center </a> </li> <li> <button class="h-c-link dropdown-menu__link" id="feedbackLink" role="menuitem" data-locale="en"> <i class="material-icons" aria-hidden="true">info_outline</i> Report issues </button> </li> </ul> </li> <span class="ajax-nav h-c-header__cta-list" id="header-cta-in"> <li class="h-c-header__cta-li h-c-header__cta-li--secondary"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/dashboard" class="h-c-header__cta-li-link h-c-header__cta-li-link--primary btn-dashboard"> My dashboard </a> </li> <li class="h-c-header__cta-li h-c-header__cta-li--primary user-nav"> <button class="h-c-header__cta-li-link h-c-header__cta-li-link--primary dropdown-toggle btn-profile user-nav__avatar" id="user-nav" aria-label="User menu - account type: " data-type-teacher="Teacher" data-type-student="Student" aria-controls="user-dropdown-content" aria-haspopup="menu" aria-expanded="false"> <i class="material-icons material-icons-outlined profile-icon" aria-hidden="true">account_circle</i> <span class="user-type"></span> <i class="material-icons arrow-drop-down" aria-hidden="true">arrow_drop_down</i> </button> <!-- User dropdown for desktop --> <ul class="dropdown-menu user-dropdown" id="user-dropdown-content" role="menu"> <li class="dropdown-menu__banner"> <span class="role-dependent-visibility student student__only"> Student account. <a href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst/answer/7476833?hl=en" target="_blank"> Learn more </a> </span> <span class="role-dependent-visibility teacher teacher__only"> Teaching account. <a href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst/answer/7476833?hl=en" target="_blank"> Learn more </a> </span> </li> <li class="dropdown-menu__header"> <span class="user-nav__avatar"> <i class="material-icons-outlined profile-icon" aria-hidden="true">account_circle</i> </span> <span> <span class="username"><i class="hidden">Username: </i><b></b></span> <span class="text-light email"></span> </span> </li> <hr> <li class="user-nav__item"> <a class="dropdown-menu__link" href="/web/20220809111255/https://csfirst.withgoogle.com/dashboard/profile" role="menuitem"> <i class="material-icons-outlined" aria-hidden="true">account_circle</i> Profile </a> </li> <li class="user-nav__item"> <a href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst?hl=en" class="dropdown-menu__link" role="menuitem" target="_blank"> <i class="material-icons" aria-hidden="true">help_outline</i> Help center </a> </li> <li class="role-dependent-visibility teacher__only"> <button class="h-c-link dropdown-menu__link" id="feedbackLink" role="menuitem" data-locale="en"> <i class="material-icons" aria-hidden="true">info_outline</i> Report issues </button> </li> <li class="user-nav__item"> <a class="dropdown-menu__link" href="/web/20220809111255/https://csfirst.withgoogle.com/logout" role="menuitem"> <i class="material-icons" aria-hidden="true">logout</i> Sign out </a> </li> <hr> <li class="privacy-tos"> <a href="http://web.archive.org/web/20220809111255/https://policies.google.com/privacy?hl=en" target="_blank" role="menuitem" class="dropdown-menu__link user-dropdown__item"> Privacy </a> • <a href="http://web.archive.org/web/20220809111255/https://policies.google.com/terms?hl=en" target="_blank" role="menuitem" class="dropdown-menu__link user-dropdown__item"> Terms </a> </li> </ul> </li> </span> <span class="ajax-nav h-c-header__cta-list" id="header-cta-out"> <li class="h-c-header__cta-li h-c-header__cta-li--primary"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/signin-front" class="h-c-header__cta-li-link h-c-header__cta-li-link--primary"> Sign in </a> </li> </span> </ul> </nav> <div class="h-c-header__bar-underside"></div> </div> <!-- mobile header --> <nav id="h-js-header__drawer" class="h-c-header__drawer mobile-nav" tabindex="0" aria-label="Navigation drawer" role="dialog"> <div class="h-c-header__drawer-content"> <div class="h-c-header__drawer-bar"> <div class="h-c-header__drawer-lockup"> <div class="h-c-header__drawer-company-logo"> <div class="h-c-header__drawer-company-logo-link" title="Google"> <svg role="img" class="h-c-header__drawer-company-logo-img"> <title>Google</title> <use xlink:href="/web/20220809111255im_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html#h-color-google-logo"></use> </svg> </div> </div> <div class="h-c-header__drawer-product-logo"> <div class="h-c-header__drawer-product-logo-link"> <span class="h-c-header__drawer-product-logo-text">for Education</span> </div> </div> </div> <div class="h-c-header__drawer-initiative-logo"> <div class="h-c-header__drawer-initiative-logo-link"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/" class="h-c-header__initiative-logo-link"> <span class="h-c-header__drawer-initiative-logo-text"> CS First </span> </a> </div> </div> </div> <nav class="h-c-header__drawer-nav"> <ul class="h-c-header__drawer-nav-list" role="menu"> <li class="h-c-header__drawer-nav-li" aria-level="1"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html" role="menuitem" class="h-c-header__drawer-nav-li-link"> Curriculum </a> </li> <li class="h-c-header__drawer-nav-li curriculum-nav" aria-level="1"> <a class="h-c-header__drawer-nav-li-link"> <div class="mobile-nav__link">Lessons & badges <i class="material-icons-extended">keyboard_arrow_right</i></div> </a> </li> <li class="h-c-header__drawer-nav-li teacher-support nav-resources" aria-level="1"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/s/en/teachers" role="menuitem" class="h-c-header__drawer-nav-li-link"> Resources </a> </li> <li class="h-c-header__drawer-nav-li teacher-support nav-about" aria-level="1"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/s/en/about" role="menuitem" class="h-c-header__drawer-nav-li-link"> About </a> </li> <hr> <li class="h-c-header__drawer-nav-li help" aria-level="1"> <a href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst?hl=en" role="menuitem" class="h-c-header__drawer-nav-li-link"> Help center </a> </li> </ul> </nav> </div> <div class="h-c-header__drawer-cta"> <ul class="h-c-header__drawer-cta-list ajax-nav" role="menu" id="drawer-cta-in"> <li class="h-c-header__drawer-cta-li h-c-header__drawer-cta-li--secondary"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/logout" role="menuitem" class="h-c-header__drawer-cta-li-link h-c-header__drawer-cta-li-link--secondary" role="menuitem"> Sign out </a> </li> <li class="h-c-header__drawer-cta-li h-c-header__drawer-cta-li--primary"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/dashboard" role="menuitem" class="h-c-header__drawer-cta-li-link h-c-header__drawer-cta-li-link--primary"> My dashboard </a> </li> </ul> <ul class="h-c-header__drawer-cta-list ajax-nav" role="menu" id="drawer-cta-out"> <li class="h-c-header__drawer-cta-li h-c-header__drawer-cta-li--primary"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/signin-front" role="menuitem" class="h-c-header__drawer-cta-li-link h-c-header__drawer-cta-li-link--primary"> Sign in </a> </li> </ul> </div> </nav> <div id="h-js-header__drawer-backdrop" class="h-c-header__drawer-backdrop mobile-nav-backdrop"></div> <div id="h-js-header__drawer-close-btn"></div> <div id="curriculum-dropdown-content" class="curriculum-dropdown" data-path="/c/cs-first/en/storytelling/curriculum_nav.html" tabindex="-1" aria-hidden="true" role="menu"> <div id="curriculum-dropdown-spinner" class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"> </div> </div> </header> <div class="butter-bar hidden" id="browser-version-butterbar"> <span> You are currently using an older browser. Please update to the latest browser to ensure features and pages work properly. <a href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst/answer/7630960" target="_blank">Learn more</a> </span> </div> <main id="jump-content" class="csf-main"> <section class="hero" role="banner"> <div class="h-c-page h-u-text-center"> <div class="h-c-grid"> <div class="h-c-grid__col h-c-grid__col-l--6 h-c-grid__col-l--offset-3 h-c-grid__col--10 h-c-grid__col--offset-1"> <p class="h-c-eyebrow h-c-headline h-c-headline--four h-has-top-bottom-margin"> Curriculum</p> <h2 class="h-c-headline h-c-headline--two h-has-top-bottom-margin h-u-text-center"> Hands-on lessons with instructional videos </h2> </div> <div class="h-c-grid__col h-c-grid__col--6 h-c-grid__col--offset-3"> <p class="curriculum-wizard"> Not sure which lesson to start with? <br> <a class="h-c-link" href="/web/20220809111255/https://csfirst.withgoogle.com/content-suggestion"> <i class="material-icons">explore</i> Get help here with the curriculum finder </a> </p> </div> <p class="img-box"> <img src="/web/20220809111255im_/https://csfirst.withgoogle.com/static/preview/csfirst/img/block.png" height="80px" alt="block.png"/> </p> </div> </div> </section> <section id="preview-units" class="themes teacher-only" jsmodel="WrP3Hc TEWjJb"> <div class="h-c-page curriculum"> <div class="h-c-grid"> <div class="h-c-grid__col h-c-grid__col--6"> <h3 class="h-c-headline h-c-headline--three h-has-top-bottom-margin h-u-text-center"> Test our newest unit </h3> <h4 class="h-c-headline h-c-headline--four h-has-top-bottom-margin h-u-text-center"> Coding instructions like hints, highlights, and text-to-speech live inside the <i>Scratch for CS First</i> editor. Share your feedback to help us finalize this unit. </h4> <p class="h-u-text-center"> <a class="h-c-link" href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst/answer/12111443" aria-label="Learn more about preview mode."> Learn more </a> </p> <div class="curriculum-cards"> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/welcome-to-cs-first/overview.html" class="overview-link" aria-label="View lesson/unit: Welcome to CS First"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/unit0/assets/unit0-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Welcome to CS First <div jscontroller="DI1xRd" jsaction="rcuQ6b:WYd; click:DHu7if" jsdata="" data-indicator="unconditional-badge" class="engeduElmsLmsUtilsPreviewBadgeContainer"> </div> </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 4 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>4-6 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students go on a first journey through Scratch for CS First with four fun projects that introduce the core elements of Scratch and foundational coding skills.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Welcome to CS First" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/welcome-to-cs-first/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Welcome to CS First" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-176054806489916964098365488504255176709&has_materials=False&preview=True"> Add to class </a> </span> </div> </div> </div> </div> <div class="h-c-grid__col h-c-grid__col--6"> <img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/unit0/assets/under-construction.png" alt=""> </div> </div> </div> </section> <section id="one-hour-activities" class="themes"> <div class="h-c-page curriculum"> <div class="h-c-grid"> <div class="h-c-grid__col h-c-grid__col--8 h-c-grid__col--offset-2"> <h3 class="h-c-headline h-c-headline--three h-has-top-bottom-margin h-u-text-center"> One-Hour Lessons </h3> <h4 class="h-c-headline h-c-headline--four h-has-top-bottom-margin h-u-text-center"> Start coding with a single lesson. </h4> </div> <div class="h-c-grid__col h-c-grid__col--12"> <div class="flex row wrap curriculum-cards"> <p class="subject uppercase">Subject Specific</p> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/characterization/overview.html" class="overview-link" aria-label="View lesson/unit: Characterization"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Characterization/Characterization_theme%20icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Characterization </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1 hour</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> <i class="material-icons" aria-hidden="true">check_circle_outline</i> <span>Supports ELA</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students provide details about a character who is missing a school assignment and use code to describe the character's actions, thoughts, and words.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Characterization" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/characterization/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Characterization" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-173642286163505135651559759538183793872&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/interactive-presentation/overview.html" class="overview-link" aria-label="View lesson/unit: Interactive Presentation"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Interactive%20Presentation/Interactive%20Presentation_theme%20icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Interactive Presentation </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1 hour</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> <i class="material-icons" aria-hidden="true">check_circle_outline</i> <span>Supports ELA</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students create a new presentation, or take an existing one, and make it interactive.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Interactive Presentation" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/interactive-presentation/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Interactive Presentation" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-71332192311702310184366444416741718082&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/dialogue/overview.html" class="overview-link" aria-label="View lesson/unit: Dialogue"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Dialogue/Dialogue_theme%20icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Dialogue </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1 hour</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> <i class="material-icons" aria-hidden="true">check_circle_outline</i> <span>Supports ELA</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students program a conversation between two characters to explore the role of dialogue in storytelling.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Dialogue" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/dialogue/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Dialogue" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-175074638097559932883666428096439681130&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/narration/overview.html" class="overview-link" aria-label="View lesson/unit: Narration"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Narration/Narration_theme%20icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Narration </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Intermediate</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1 hour</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> <i class="material-icons" aria-hidden="true">check_circle_outline</i> <span>Supports ELA</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students take an existing story and explore first and third person point of view.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Narration" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/narration/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Narration" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-15424818727656437169495513858626967755&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/figurative-language/overview.html" class="overview-link" aria-label="View lesson/unit: Figurative Language"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Figurative%20Language/FL_Theme%20Icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Figurative Language </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Intermediate</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1 hour</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> <i class="material-icons" aria-hidden="true">check_circle_outline</i> <span>Supports ELA</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students explore Figurative Language with an emphasis on metaphors, similes, personification, hyperbole, and idioms.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Figurative Language" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/figurative-language/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Figurative Language" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-283901054567630684085252523067262310591&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> </div> <div class="flex row wrap curriculum-cards"> <p class="subject uppercase">Hour of Code</p> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/cs-first-unplugged/overview.html" class="overview-link" aria-label="View lesson/unit: CS First Unplugged"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Unplugged/Activity_Icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> CS First Unplugged </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> <i class="material-icons" aria-hidden="true">desktop_access_disabled</i> <span>Unplugged</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students complete a set of offline, unplugged activities introducing computer science concepts that show how technology keeps us connected.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: CS First Unplugged" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/cs-first-unplugged/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: CS First Unplugged" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-225957998875244748558816221334222830353&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/code-your-hero/overview.html" class="overview-link" aria-label="View lesson/unit: Code Your Hero"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Code%20Your%20Hero/HOC_Code%20Your%20Hero%20-%20activity%20icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Code Your Hero </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students will choose an everyday hero from their own life and build a story or game using code that gives their hero superpowers.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Code Your Hero" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/code-your-hero/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Code Your Hero" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-67461613751558942433599914868293717937&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/pitch-your-passion/overview.html" class="overview-link" aria-label="View lesson/unit: Pitch Your Passion"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/Pitch%20Your%20Passion/NYSD%20-%20Pitch%20Your%20Passion%20-%20Theme%20Icon.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Pitch Your Passion </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 4 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students will build a project about an idea, activity, item, or cause they feel strongly about.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Pitch Your Passion" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/pitch-your-passion/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Pitch Your Passion" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-228833042642920732501184795250133486470&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/an-unusual-discovery/overview.html" class="overview-link" aria-label="View lesson/unit: An Unusual Discovery"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/discovery/discovery-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> An Unusual Discovery </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Two characters meet in a world and discover a surprising object. Students get to decide what happens next by creating a story with code.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: An Unusual Discovery" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/an-unusual-discovery/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: An Unusual Discovery" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-233688564929175359115546578916179444247&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/animate-a-name/overview.html" class="overview-link" aria-label="View lesson/unit: Animate a Name"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/animate_a_name/name-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Animate a Name </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 2 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> <i class="material-icons" aria-hidden="true">language</i> <span class="shoutout">¡Disponible en español!</span> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students pick a name or word and bring the letters to life through animation, sound, and music.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Animate a Name" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/animate-a-name/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Animate a Name" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-157481727534419714904655329322524260840&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/create-your-own-google-logo/overview.html" class="overview-link" aria-label="View lesson/unit: Create your own Google logo"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/hoc/logo-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Create your own Google logo </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 3 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students bring the Google logo to life using code, utilizing programming and design.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Create your own Google logo" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/create-your-own-google-logo/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Create your own Google logo" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-35108339143584025052098057194112815682&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/adventure-on-the-high-seas/overview.html" class="overview-link" aria-label="View lesson/unit: Adventure on the High Seas"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/sample/highseas-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Adventure on the High Seas </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 1 lesson </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students animate an ocean wave, then tell a story that takes place on the high seas.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Adventure on the High Seas" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/adventure-on-the-high-seas/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Adventure on the High Seas" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-46997727050926343598098353069242239726&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/gumballs-coding-adventure/overview.html" class="overview-link" aria-label="View lesson/unit: Gumball's Coding Adventure"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/gumball/gumball-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Gumball's Coding Adventure </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Intermediate</span> <i class="material-icons" aria-hidden="true">list</i> <span> 1 lesson </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>1-2 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> In this collaboration between Cartoon Network and CS First, students tell a story using the characters from “The Amazing World of Gumball.”</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Gumball's Coding Adventure" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/gumballs-coding-adventure/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Gumball's Coding Adventure" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-84228556053781830479316056907486986219&has_materials=False&preview=None"> Add to class </a> </span> </div> </div> </div> </div> </div> </div> </section> <section id="multi-day-activities" class="themes" tabindex="2"> <div class="h-c-page curriculum"> <div class="h-c-grid h-u-text-center"> <div class="h-c-grid__col h-c-grid__col--8 h-c-grid__col--offset-2"> <h3 class="h-c-headline h-c-headline--three h-has-top-bottom-margin h-u-text-center"> Multi-Day Units </h3> <h4 class="h-c-headline h-c-headline--four h-has-top-bottom-margin h-u-text-center"> Teach coding with units that include eight lessons aligned with student passions. </h4> </div> <div class="h-c-grid__col h-c-grid__col--12"> <div class="flex row wrap curriculum-cards"> <p class="subject uppercase">Introductory</p> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/storytelling/overview.html" class="overview-link" aria-label="View lesson/unit: Storytelling"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/storytelling/storytelling-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Storytelling </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 8 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>8-12 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students use code to tell fun and interactive stories. Storytelling emphasizes creativity by encouraging students to tell a unique story each day.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Storytelling" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/storytelling/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Storytelling" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-176890690406368968635224550078309067572&has_materials=True&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/music-and-sound/overview.html" class="overview-link" aria-label="View lesson/unit: Music & Sound"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/music-sound/music-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Music & Sound </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Introductory</span> <i class="material-icons" aria-hidden="true">list</i> <span> 8 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>8-12 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students play musical notes, create a music video, and build an interactive music display.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Music & Sound" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/music-and-sound/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Music & Sound" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-41034900334641584459867255920772837726&has_materials=True&preview=None"> Add to class </a> </span> </div> </div> </div> <div class="flex row wrap curriculum-cards"> <p class="subject uppercase">Intermediate</p> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/friends/overview.html" class="overview-link" aria-label="View lesson/unit: Friends"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/friends/friends-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Friends </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Intermediate</span> <i class="material-icons" aria-hidden="true">list</i> <span> 8 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>8-12 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students work in pairs, tell the story of how their friendship started, and imagine a company together.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Friends" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/friends/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Friends" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-166229684410610518170000099158012978211&has_materials=True&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/fashion-and-design/overview.html" class="overview-link" aria-label="View lesson/unit: Fashion & Design"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/fashion/fashion-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Fashion & Design </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Intermediate</span> <i class="material-icons" aria-hidden="true">list</i> <span> 8 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>8-12 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students build fashion-themed programs including a fashion walk, a stylist tool, and a pattern maker.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Fashion & Design" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/fashion-and-design/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Fashion & Design" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-120226794101723349019996511603774555535&has_materials=True&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/art/overview.html" class="overview-link" aria-label="View lesson/unit: Art"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/art/art-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Art </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Intermediate</span> <i class="material-icons" aria-hidden="true">list</i> <span> 8 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>8-12 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students create animations, interactive artwork, photograph filters, and other exciting, artistic projects using code.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Art" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/art/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Art" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-32369301013785304114832418846413103653&has_materials=True&preview=None"> Add to class </a> </span> </div> </div> </div> <div class="flex row wrap curriculum-cards"> <p class="subject uppercase">Advanced</p> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/sports/overview.html" class="overview-link" aria-label="View lesson/unit: Sports"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/sports/sports-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Sports </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Advanced</span> <i class="material-icons" aria-hidden="true">list</i> <span> 8 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>8-12 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students use computer science to simulate extreme sports, make their own commercial, and create commentary for a sporting event.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Sports" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/sports/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Sports" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-52922359565987660726137822912177878303&has_materials=True&preview=None"> Add to class </a> </span> </div> </div> <div class="card curriculum-card"> <a href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/game-design/overview.html" class="overview-link" aria-label="View lesson/unit: Game Design"> <div class="head-row"> <div class="left"><img src="http://web.archive.org/web/20220809111255im_/https://storage.googleapis.com/files.cs-first.com/game-design/game-icon%402x.png" alt=""></div> <div class="right"> <div class="h-c-headline h-c-headline--four h-has-top-bottom-margin"> Game Design </div> <p class="detail text-light flex left"> <i class="material-icons" title="Difficulty" aria-hidden="true">outlined_flag</i> <span>Advanced</span> <i class="material-icons" aria-hidden="true">list</i> <span> 8 lessons </span> <i class="material-icons" aria-hidden="true">access_time</i> <span>8-12 hours</span> </p> <p class="detail text-light flex left"> </p> </div> </div> <p class="desc h-c-tile__description h-u-font-weight-regular text-light"> Students learn basic video game coding concepts by making different types of games, including racing, platform, and launching.</p> </a> <div class="elms"> <a class="h-c-button h-c-button--primary left" aria-label="View lesson/unit: Game Design" href="/web/20220809111255/https://csfirst.withgoogle.com/c/cs-first/en/game-design/overview.html"> View </a> <span class="add-to-class"> <a class="h-c-button h-c-button--secondary" aria-label="Add lesson/unit to class: Game Design" href="/web/20220809111255/https://csfirst.withgoogle.com/apps/add-to-class?lesson=Unit-77645878194981134633720770579758310867&has_materials=True&preview=None"> Add to class </a> </span> </div> </div> </div> </div> </div> </div> </section> <section class="h-c-page start-cta sign-in"> <div class="h-c-grid h-u-text-center"> <div class="h-c-grid__col h-c-grid__col--8 h-c-grid__col--offset-2"> <h3 class="h-c-headline h-c-headline--three h-has-bottom-margin h-u-text-center"> Start teaching computer science </h3> </div> <div class="h-c-grid__col h-c-grid__col--8 h-c-grid__col--offset-2"> <h5 class="h-c-headline h-c-headline--five h-has-bottom-margin h-u-text-center text-light"> Sign in to manage student progress with your dashboard, save your students' work, and schedule your first class. </h5> <p class="h-u-text-center major-cta"> <a class="h-c-button h-c-button--primary" href="/web/20220809111255/https://csfirst.withgoogle.com/signin-front"> Get started </a> </p> </div> </div> </section> </main> <footer class="h-c-footer h-c-footer--topmargin h-c-footer--standard"> <section class="standards"> <h5 class="h-c-headline h-c-headline--four h-has-top-bottom-margin text-light h-u-text-center"> CS First is aligned to education standards. </h5> <div class="center-flex"> <a href="http://web.archive.org/web/20220809111255/https://docs.google.com/spreadsheets/d/1QvcPEGlQnTOgIV5tyRacGSbcqALSTJTgP3zpYxqKGVk/edit#gid=812340606" target="_blank" title="CSTA"> <img src="http://web.archive.org/web/20220809111255im_/https://lh3.googleusercontent.com/HM5GPTHmyj6VQfE0RNg8mJoKcg7kFhWNgbnpLSst36ozTQ_tCDwjJOFZbESj8-GSWmkIcPoByQf5L72v__MQKUq-c-IyWTy7_jxuzA" alt="CSTA"></a> <a href="http://web.archive.org/web/20220809111255/https://www.iste.org/standards/seal-of-alignment/google-cs-first" target="_blank" title="ISTE"> <img src="http://web.archive.org/web/20220809111255im_/https://lh3.googleusercontent.com/4PV7j5zj7vpcIaalw7UoKYWSJ4ceiie4DZKUe8Wmgyo9Jh86pKrBbbXBmlfj9x1zVIha_r-XeW9zRVQ2Pw_ORtlU-Pdoe1Rx11hB8Eg" alt="ISTE"></a> </div> </section> <section class="h-c-footer__upper disclaimer"> <p> CS First is one of many Google initiatives focused on computer science education. Visit <a href="http://web.archive.org/web/20220809111255/https://edu.google.com/code-with-google/" target="_blank">Code with Google</a> to learn about other programs that may be of interest to you. </p> <p> Except as otherwise <a href="http://web.archive.org/web/20220809111255/https://creativecommons.org/policies#license" target="_blank">noted</a>, the contents on this site are licensed under a <a rel="license" href="http://web.archive.org/web/20220809111255/https://creativecommons.org/licenses/by-sa/4.0/deed.en" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>. </p> <p> Scratch is a project of the Scratch Foundation in collaboration with the Lifelong Kindergarten group at the MIT Media Lab. It is available at <a href="http://web.archive.org/web/20220809111255/https://scratch.mit.edu/" rel="noopener" target="_blank">https://scratch.mit.edu</a>. Use of the Scratch website is subject to its <a href="http://web.archive.org/web/20220809111255/https://scratch.mit.edu/terms_of_use" rel="noopener" target="_blank">terms of use</a> and <a href="http://web.archive.org/web/20220809111255/https://scratch.mit.edu/privacy_policy" rel="noopener" target="_blank">privacy policy</a>. </p> </section> <section class="h-c-footer__upper"> <section class="h-c-social"> <div class="h-c-social__group"> <p class="h-c-social__title h-c-social__title--inline uppercase">Share</p> <ul class="h-c-social__list h-no-bullet"> <li class="h-c-social__item"> <div class="g-sharetoclassroom" data-size="25" data-theme="dark" data-url="http://web.archive.org/web/20220809111255oe_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html" data-onsharestart="classroomFooterShareStart" data-onsharecomplete="classroomFooterShareComplete"></div> </li> <li class="h-c-social__item"> <a href="http://web.archive.org/web/20220809111255/https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcsfirst.withgoogle.com/s/en/home" aria-label="Share on Facebook" onclick="javascript:window.open(this.href,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');trackFooterFBShare();return false;"> <!-- Facebook icon --> <svg role="img" class="h-c-icon h-c-icon--social h-c-icon--no-padding h-c-icon--24px"> <title>Share on Facebook</title> <use xlink:href="/web/20220809111255im_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html#social-facebook"></use> </svg> </a> </li> <li class="h-c-social__item"> <a href="http://web.archive.org/web/20220809111255/https://twitter.com/intent/tweet?text=%23CSFirst%20by%20Google%20is%20a%20fun%20way%20for%20students%20to%20learn%20code.%20Join%20thousands%20teaching%20computer%20science%20now%3A%20g.co%2Fcsfirst" aria-label="Share on Twitter" onclick="javascript:window.open(this.href,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');trackFooterTwitterShare();return false;"> <!-- Twitter icon --> <svg role="img" class="h-c-icon h-c-icon--social h-c-icon--no-padding h-c-icon--24px"> <title>Share on Twitter</title> <use xlink:href="/web/20220809111255im_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html#social-twitter"></use> </svg> </a> </li> </ul> </div> </section> </section> <!-- TODO(hlm): Revamp this section to use placeholders to improve translation. --> <section class="h-c-footer__global"> <div class="h-c-footer__logo text-light"> <span class="uppercase"> A </span> <a href="http://web.archive.org/web/20220809111255/https://edu.google.com/code-with-google" target="_blank"> <span class="text-large">Code with</span> <svg role="img" class="h-c-footer__logo-img"> <title>Google</title> <use xlink:href="/web/20220809111255im_/https://csfirst.withgoogle.com/c/cs-first/en/curriculum.html#google-logo"></use> </svg> </a> <span class="uppercase"> Program </span> </div> <ul class="h-c-footer__global-links h-no-bullet"> <li class="h-c-footer__global-links-list-item"> <a href="http://web.archive.org/web/20220809111255/https://www.google.com/intl/en/policies/privacy/" class="h-c-footer__link"> Privacy</a></li> <li class="h-c-footer__global-links-list-item"> <a href="http://web.archive.org/web/20220809111255/https://workspace.google.com/terms/education_privacy.html" class="h-c-footer__link"> Privacy Notice for Workspace for Education Users</a></li> <li class="h-c-footer__global-links-list-item"> <a href="http://web.archive.org/web/20220809111255/https://www.google.com/intl/en/policies/terms/" class="h-c-footer__link"> Terms</a></li> <li class="h-c-footer__global-links-list-item"> <a href="http://web.archive.org/web/20220809111255/https://www.google.com/intl/en/about/" class="h-c-footer__link"> About Google</a></li> <li class="h-c-footer__global-links-list-item"> <a href="http://web.archive.org/web/20220809111255/https://www.google.com/about/products/?hl=en" class="h-c-footer__link"> Google Products</a></li> </ul> <ul class="h-c-footer__global-links h-c-footer__global-links--extra h-no-bullet"> <li class="h-c-footer__global-links-list-item h-c-footer__global-links-list-item--extra"> <a class="h-c-footer__link help-link" target="_blank" href="http://web.archive.org/web/20220809111255/https://support.google.com/csfirst?hl=en"> <i class="material-icons" aria-hidden="true">help_outline</i> Help </a> </li> <li class="h-c-footer__global-links-list-item h-c-footer__global-links-list-item--extra footer-lang"> <label for="lang-selector" class="visually-hidden">Change language or region</label> <select name="lang-selector" id="lang-selector" class="lang-dropdown h-c-form__dropdown h-c-footer__lang-dropdown"> <option value="de">Deutsch</option> <option value="en" selected="selected">English</option> <option value="es">Español (España)</option> <option value="fr">Français</option> <option value="it">Italiano</option> <option value="ja">日本語</option> <!-- additional options as needed --> </select> </li> </ul> </section> <div class="cookie-disclaimer"> <span class="text"> <span> This site uses cookies from Google to deliver its services and to analyze traffic. <a href="http://web.archive.org/web/20220809111255/https://policies.google.com/technologies/cookies?hl=en" target="_blank">Learn more</a>. </span> </span> <a href="#" aria-label="Dismiss" class="dismiss h-c-button h-c-button--primary"> OK, got it </a> </div> </footer> </div> <div id="js" data-unit="Unit-176890690406368968635224550078309067572"> </div> <svg class="svg-assets" xmlns="http://www.w3.org/2000/svg"> <!-- material design icons --> <symbol id="mi-arrow-forward" viewbox="0 0 18 18"> <path d="M9,1.5C4.8,1.5,1.5,4.8,1.5,9s3.3,7.5,7.5,7.5s7.5-3.3,7.5-7.5S13.2,1.5,9,1.5z M9,14.5l-1-1 l3.8-3.8H3.5V8.3h8.4L8.1,4.5L9,3.5L14.5,9L9,14.5z"></path> </symbol> <symbol id="mi-access-time" viewbox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm4.49-3.64L11 13.07V6.42h2v5.51l4.51 2.71z"/> </symbol> <symbol id="mi-help" viewbox="0 0 48 48"> <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 34h-4v-4h4v4zm4.13-15.49l-1.79 1.84C26.9 25.79 26 27 26 30h-4v-1c0-2.21.9-4.21 2.34-5.66l2.49-2.52C27.55 20.1 28 19.1 28 18c0-2.21-1.79-4-4-4s-4 1.79-4 4h-4c0-4.42 3.58-8 8-8s8 3.58 8 8c0 1.76-.71 3.35-1.87 4.51z"></path> </symbol> <symbol id="mi-account-circle" viewbox="0 0 24 24"> <path fill="none" d="M0 0h24v24H0V0z"/> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"/> </symbol> <symbol id="mi-arrow-sort" viewbox="0 0 24 24"> <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path> </symbol> <symbol id="mi-arrow-forward-no-bg" viewbox="0 0 32 32"> <polygon points="16,0 13.2,2.8 24.3,14 0,14 0,18 24.3,18 13.2,29.2 16,32 32,16"></polygon> </symbol> <symbol id="mi-arrow-circle" viewbox="0 0 16 16"> <path d="M0,8c0,4.4,3.6,8,8,8s8-3.6,8-8s-3.6-8-8-8S0,3.6,0,8z M4.2,6.1L8,9.9l3.8-3.8L13,7.3 l-5,5l-5-5L4.2,6.1z"></path> </symbol> <symbol id="mi-arrow-item" viewbox="0 0 16 10"> <polygon points="1.8,0 7.8,5.9 13.7,0 15.5,1.8 7.8,9.6 0,1.8"></polygon> </symbol> <symbol id="mi-keyboard-arrow-right" viewbox="0 0 24 24"> <path d="M9.546 6.5l5.443 5.532L9.5 17.5"></path> </symbol> <symbol id="mi-chevron" viewbox="0 0 12 8"> <path d="M10.6,8L6,3.4L1.4,8L0,6.6l6-6l6,6L10.6,8z"></path> </symbol> <symbol id="mi-youtube-icon" viewbox="0 0 86 60"> <path d="M83.37 9.387c-.967-3.677-3.87-6.58-7.547-7.597C69.193 0 42.58 0 42.58 0S15.97 0 9.29 1.79c-3.677.968-6.532 3.87-7.548 7.597C0 16.065 0 30 0 30s0 13.935 1.79 20.613c.968 3.677 3.87 6.58 7.55 7.597C15.967 60 42.58 60 42.58 60s26.614 0 33.29-1.79c3.678-.968 6.533-3.87 7.55-7.597C85.16 43.935 85.16 30 85.16 30s0-13.935-1.79-20.613zm-49.5 33.29V17.323L56.13 30 33.87 42.677z" fill-rule="nonzero"></path> </symbol> <symbol id="mi-youtube-icon-white"> <path d="M83.37 9.387c-.967-3.677-3.87-6.58-7.547-7.597C69.193 0 42.58 0 42.58 0S15.97 0 9.29 1.79c-3.677.968-6.532 3.87-7.548 7.597C0 16.065 0 30 0 30s0 13.935 1.79 20.613c.968 3.677 3.87 6.58 7.55 7.597C15.967 60 42.58 60 42.58 60s26.614 0 33.29-1.79c3.678-.968 6.533-3.87 7.55-7.597C85.16 43.935 85.16 30 85.16 30s0-13.935-1.79-20.613zm-49.5 33.29V17.323L56.13 30 33.87 42.677z" fill-rule="nonzero" fill="#FFF"></path> </symbol> <symbol id="mi-youtube-icon-red"> <g fill-rule="nonzero" fill="none"> <path d="M83.37 9.387c-.967-3.677-3.87-6.58-7.547-7.597C69.193 0 42.58 0 42.58 0S15.97 0 9.29 1.79c-3.677.968-6.532 3.87-7.548 7.597C0 16.065 0 30 0 30s0 13.935 1.79 20.613c.968 3.677 3.87 6.58 7.55 7.597C15.967 60 42.58 60 42.58 60s26.614 0 33.29-1.79c3.678-.968 6.533-3.87 7.55-7.597C85.16 43.935 85.16 30 85.16 30s0-13.935-1.79-20.613z" fill="#F00"></path> <path fill="#FFF" d="M33.87 42.677L56.13 30 33.87 17.323"></path> </g> </symbol> <symbol id="mi-youtube-icon-black"> <g fill-rule="nonzero" fill="none"> <path d="M83.37 9.387c-.967-3.677-3.87-6.58-7.547-7.597C69.193 0 42.58 0 42.58 0S15.97 0 9.29 1.79c-3.677.968-6.532 3.87-7.548 7.597C0 16.065 0 30 0 30s0 13.935 1.79 20.613c.968 3.677 3.87 6.58 7.55 7.597C15.967 60 42.58 60 42.58 60s26.614 0 33.29-1.79c3.678-.968 6.533-3.87 7.55-7.597C85.16 43.935 85.16 30 85.16 30s0-13.935-1.79-20.613z" fill="#282828"></path> <path fill="#FFF" d="M33.87 42.677L56.13 30 33.87 17.323"></path> </g> </symbol> <symbol id="mi-pdf-icon" viewbox="0 0 24 24"> <path d="M7 11.5h1v-1H7v1zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9.5 8.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm10-1H17v1h1.5V13H17v2h-1.5V9h4v1.5zm-5 3c0 .83-.67 1.5-1.5 1.5h-2.5V9H13c.83 0 1.5.67 1.5 1.5v3zm-2.5 0h1v-3h-1v3z"></path> </symbol> <symbol id="mi-arrow-dropdown" viewbox="0 0 24 24"> <path d="M7 10l5 5 5-5z"></path> </symbol> <symbol id="mi-search" viewbox="0 0 24 22"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </symbol> <symbol id="mi-expand" viewbox="0 0 24 24"> <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path> </symbol> <symbol id="mi-mail" viewbox="0 0 24 24"> <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"></path> </symbol> <symbol id="mi-close" viewbox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path> </symbol> <symbol id="mi-google-g" viewbox="0 0 24 24"> <path xmlns="http://www.w3.org/2000/svg" d="M12 13.9v-3.72h9.36c.14.63.25 1.22.25 2.05 0 5.71-3.83 9.77-9.6 9.77C6.48 22 2 17.52 2 12S6.48 2 12 2c2.7 0 4.96.99 6.69 2.61l-2.84 2.76c-.72-.68-1.97-1.49-3.85-1.49-3.31 0-6.01 2.75-6.01 6.12s2.7 6.12 6.01 6.12c3.83 0 5.24-2.65 5.5-4.22H12z"/> </symbol> <symbol id="mi-buttons" viewbox="0 0 24 24"> <path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M13,7h-2v4H7v2h4v4h2v-4h4v-2h-4V7z"></path> </symbol> <symbol id="mi-assignment" viewbox="0 0 24 24"> <path d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"/> </symbol> <!-- Social icons --> <symbol id="social-blogger" viewbox="2 2 20 20"> <path d="M20,2 L4,2 C2.895,2 2.01,2.895 2.01,4 L2,20 C2,21.105 2.895,22 4,22 L20,22 C21.105,22 22,21.105 22,20 L22,4 C22,2.895 21.105,2 20,2 L20,2 Z M16,9 L16,10 C16,10.555 16.445,11 17,11 C17.555,11 18,11.445 18,12 L18,15 C18,16.655 16.655,18 15,18 L9,18 C7.345,18 6,16.655 6,15 L6,8 C6,6.345 7.345,5 9,5 L13,5 C14.655,5 16,6.345 16,8 L16,9 L16,9 Z M9.95,10 L12.55,10 C13.105,10 13.55,9.555 13.55,9 C13.55,8.445 13.105,8 12.55,8 L9.95,8 C9.395,8 8.95,8.445 8.95,9 C8.95,9.555 9.4,10 9.95,10 L9.95,10 Z M14,13 L9.95,13 C9.395,13 8.95,13.445 8.95,14 C8.95,14.555 9.395,15 9.95,15 L14,15 C14.555,15 15,14.555 15,14 C15,13.445 14.555,13 14,13 L14,13 Z"></path> </symbol> <symbol id="social-facebook" viewbox="0 0 20 21"> <path d="M18.9,0H1.1C0.5,0,0,0.5,0,1.1v17.8C0,19.5,0.5,20,1.1,20h9.6v-7.7H8.1v-3h2.6V7c0-2.6,1.6-4,3.9-4c1.1,0,2.1,0.1,2.3,0.1 v2.7l-1.6,0c-1.3,0-1.5,0.6-1.5,1.5v1.9h3l-0.4,3h-2.6V20h5.1c0.6,0,1.1-0.5,1.1-1.1V1.1C20,0.5,19.5,0,18.9,0z"> </path> </symbol> <symbol id="social-gplus" viewbox="0 0 24 24"> <path d="M8.5,10.745 L8.5,13.43 L12.3,13.43 C12,15.065 10.58,16.25 8.5,16.25 C6.195,16.25 4.33,14.305 4.33,12 C4.33,9.695 6.195,7.75 8.5,7.75 C9.535,7.75 10.465,8.105 11.2,8.805 L11.2,8.81 L13.185,6.825 C11.97,5.695 10.39,5 8.5,5 C4.635,5 1.5,8.135 1.5,12 C1.5,15.865 4.635,19 8.5,19 C12.545,19 15.22,16.16 15.22,12.16 C15.22,11.67 15.175,11.195 15.1,10.745 L8.5,10.745 L8.5,10.745 Z"></path> <polygon points="22.5 11 20.5 11 20.5 9 19 9 19 11 17 11 17 12.5 19 12.5 19 14.5 20.5 14.5 20.5 12.5 22.5 12.5"></polygon> </symbol> <symbol id="social-instagram" viewbox="2 2 20 20"> <path d="M12,3.80440476 C14.6692857,3.80440476 14.9854365,3.81456349 16.0395635,3.86265873 C17.014246,3.90714286 17.5435714,4.07 17.895873,4.20686508 C18.3624603,4.38821429 18.6955159,4.60488095 19.0453175,4.95468254 C19.395119,5.30448413 19.6117857,5.63753968 19.7930952,6.10412698 C19.93,6.45642857 20.0928571,6.98575397 20.1373413,7.96039683 C20.1854365,9.01456349 20.1955952,9.33071429 20.1955952,12 C20.1955952,14.6692857 20.1854365,14.9854365 20.1373413,16.0395635 C20.0928571,17.014246 19.93,17.5435714 19.7930952,17.895873 C19.6117857,18.3624603 19.395119,18.6955159 19.0453175,19.0453175 C18.6955159,19.395119 18.3624603,19.6117857 17.895873,19.7930952 C17.5435714,19.93 17.014246,20.0928571 16.0395635,20.1373413 C14.9855952,20.1854365 14.6694444,20.1955952 12,20.1955952 C9.33055556,20.1955952 9.01440476,20.1854365 7.96043651,20.1373413 C6.98575397,20.0928571 6.45642857,19.93 6.10416667,19.7930952 C5.63753968,19.6117857 5.30448413,19.395119 4.95468254,19.0453175 C4.60488095,18.6955159 4.38821429,18.3624603 4.20690476,17.895873 C4.07,17.5435714 3.90714286,17.014246 3.86265873,16.0396032 C3.81456349,14.9854365 3.80440476,14.6692857 3.80440476,12 C3.80440476,9.33071429 3.81456349,9.01456349 3.86265873,7.96043651 C3.90714286,6.98575397 4.07,6.45642857 4.20690476,6.10412698 C4.38821429,5.63753968 4.60488095,5.30448413 4.95468254,4.95468254 C5.30448413,4.60488095 5.63753968,4.38821429 6.10416667,4.20686508 C6.45642857,4.07 6.98575397,3.90714286 7.96039683,3.86265873 C9.01456349,3.81456349 9.33071429,3.80440476 12,3.80440476 M12,2.00313492 C9.285,2.00313492 8.94460317,2.01464286 7.87833333,2.06329365 C6.81424603,2.11186508 6.08757937,2.28083333 5.45166667,2.52797619 C4.79428571,2.78345238 4.23678571,3.12527778 3.68103175,3.68103175 C3.12527778,4.23678571 2.78345238,4.79428571 2.52797619,5.45166667 C2.28083333,6.08757937 2.11186508,6.81424603 2.06329365,7.87833333 C2.01464286,8.94456349 2.0031746,9.285 2.0031746,12 C2.0031746,14.715 2.01464286,15.0554365 2.06329365,16.1216667 C2.11186508,17.185754 2.28083333,17.9124206 2.52797619,18.5483333 C2.78345238,19.2056746 3.12527778,19.7632143 3.68103175,20.3189683 C4.23678571,20.8747222 4.79428571,21.2165476 5.45166667,21.4720238 C6.08757937,21.7191667 6.81424603,21.8881349 7.87833333,21.9367063 C8.94460317,21.9853571 9.285,21.9968254 12,21.9968254 C14.715,21.9968254 15.0554365,21.9853571 16.1216667,21.9367063 C17.185754,21.8881349 17.9124206,21.7191667 18.5483333,21.4720238 C19.2057143,21.2165476 19.7632143,20.8747222 20.3189683,20.3189683 C20.8747222,19.7632143 21.2165476,19.2057143 21.4720238,18.5483333 C21.7191667,17.9124206 21.8881349,17.185754 21.9367063,16.1216667 C21.9853571,15.0554365 21.9968651,14.715 21.9968651,12 C21.9968651,9.285 21.9853571,8.94456349 21.9367063,7.87833333 C21.8881349,6.81424603 21.7191667,6.08757937 21.4720238,5.45166667 C21.2165476,4.79428571 20.8747222,4.23678571 20.3189683,3.68103175 C19.7632143,3.12527778 19.2057143,2.78345238 18.5483333,2.52797619 C17.9124206,2.28083333 17.185754,2.11186508 16.1216667,2.06329365 C15.0554365,2.01464286 14.715,2.00313492 12,2.00313492"></path> <path d="M12,6.86646825 C9.16484127,6.86646825 6.86646825,9.16484127 6.86646825,12 C6.86646825,14.8351587 9.16484127,17.1335317 12,17.1335317 C14.8351587,17.1335317 17.1335317,14.8351587 17.1335317,12 C17.1335317,9.16484127 14.8351587,6.86646825 12,6.86646825 Z M12,15.3323016 C10.1596429,15.3323016 8.66769841,13.8403571 8.66769841,12 C8.66769841,10.1596429 10.1596429,8.66769841 12,8.66769841 C13.8403571,8.66769841 15.3323016,10.1596429 15.3323016,12 C15.3323016,13.8403571 13.8403571,15.3323016 12,15.3323016 L12,15.3323016 Z"></path> <path d="M18.5359524,6.66365079 C18.5359524,7.32619048 17.9988889,7.86329365 17.3363492,7.86329365 C16.6738095,7.86329365 16.1367063,7.32619048 16.1367063,6.66365079 C16.1367063,6.00111111 16.6738095,5.46404762 17.3363492,5.46404762 C17.9988889,5.46404762 18.5359524,6.00111111 18.5359524,6.66365079"></path> </symbol> <symbol id="social-link" viewbox="2 7 20 11"> <path d="M3.9,12 C3.9,10.29 5.29,8.9 7,8.9 L11,8.9 L11,7 L7,7 C4.24,7 2,9.24 2,12 C2,14.76 4.24,17 7,17 L11,17 L11,15.1 L7,15.1 C5.29,15.1 3.9,13.71 3.9,12 L3.9,12 Z M8,13 L16,13 L16,11 L8,11 L8,13 L8,13 Z M17,7 L13,7 L13,8.9 L17,8.9 C18.71,8.9 20.1,10.29 20.1,12 C20.1,13.71 18.71,15.1 17,15.1 L13,15.1 L13,17 L17,17 C19.76,17 22,14.76 22,12 C22,9.24 19.76,7 17,7 L17,7 Z"> </path> </symbol> <symbol id="social-linkedin" viewbox="0 0 20 20"> <path d="M17.3247508,17.0422222 L14.3116279,17.0422222 L14.3116279,12.4011111 C14.3116279,11.2944444 14.2901661,9.87055556 12.7443522,9.87055556 C11.1748173,9.87055556 10.9353488,11.0755556 10.9353488,12.3211111 L10.9353488,17.0422222 L7.92335548,17.0422222 L7.92335548,7.49833333 L10.8139203,7.49833333 L10.8139203,8.80222222 L10.8557143,8.80222222 C11.2578405,8.05166667 12.2422591,7.26055556 13.7090033,7.26055556 C16.7605316,7.26055556 17.3247508,9.23666667 17.3247508,11.8072222 L17.3247508,17.0422222 L17.3247508,17.0422222 Z M4.52335548,6.19277778 C3.55418605,6.19277778 2.77365449,5.42222222 2.77365449,4.47277778 C2.77365449,3.52444444 3.55418605,2.75333333 4.52335548,2.75333333 C5.48800664,2.75333333 6.27136213,3.52444444 6.27136213,4.47277778 C6.27136213,5.42222222 5.48800664,6.19277778 4.52335548,6.19277778 L4.52335548,6.19277778 Z M3.01312292,7.49833333 L6.03189369,7.49833333 L6.03189369,17.0422222 L3.01312292,17.0422222 L3.01312292,7.49833333 Z M18.5183745,0 L1.47495903,0 C0.661092747,0 0,0.645555556 0,1.44111111 L0,18.5566667 C0,19.3533333 0.661092747,20 1.47495903,20 L18.5183745,20 C19.3339074,20 20,19.3533333 20,18.5566667 L20,1.44111111 C20,0.645555556 19.3339074,0 18.5183745,0 L18.5183745,0 Z"></path> </symbol> <symbol id="social-mail" viewbox="2 4 20 16"> <path d="M20,4 L4,4 C2.9,4 2.01,4.9 2.01,6 L2,18 C2,19.1 2.9,20 4,20 L20,20 C21.1,20 22,19.1 22,18 L22,6 C22,4.9 21.1,4 20,4 Z M20,18 L4,18 L4,8 L12,13 L20,8 L20,18 Z M12,11 L4,6 L20,6 L12,11 Z"></path> </symbol> <symbol id="social-twitter" viewbox="2 4 20 17"> <path d="M21.9998024,5.94850271 C21.2639378,6.27899473 20.4732072,6.50243431 19.6431192,6.60281913 C20.4903254,6.08859695 21.1409646,5.27418342 21.4472639,4.3038956 C20.6544849,4.7801123 19.7764073,5.12586577 18.8417079,5.31226298 C18.0932607,4.50466524 17.0268825,4 15.8467486,4 C13.5805579,4 11.7434203,5.86056413 11.7434203,8.15526483 C11.7434203,8.48101542 11.7797051,8.7980981 11.8496412,9.10221596 C8.43952817,8.92893175 5.41611168,7.27461954 3.39235612,4.76062801 C3.03916454,5.37434599 2.83681824,6.08815245 2.83681824,6.84966948 C2.83681824,8.29128441 3.5611975,9.5631712 4.66217788,10.3083896 C3.98959225,10.2868309 3.35687602,10.099841 2.8036791,9.78861106 C2.80338648,9.80594689 2.80331333,9.8233568 2.80331333,9.8408408 C2.80331333,11.8541677 4.21768905,13.5336687 6.09476916,13.9154273 C5.75042931,14.0103299 5.38794707,14.0610779 5.01376005,14.0610779 C4.74930529,14.0610779 4.49231233,14.0350742 4.241757,13.9865487 C4.76393626,15.637453 6.27926567,16.8388111 8.07477813,16.8724456 C6.67042461,17.9869023 4.9012479,18.6511461 2.97881179,18.6511461 C2.64763982,18.6511461 2.32100345,18.6315136 2,18.5931378 C3.81592266,19.7721223 5.97267373,20.4599991 8.28985336,20.4599991 C15.8371653,20.4599991 19.9642689,14.1282728 19.9642689,8.63711197 C19.9642689,8.45693788 19.9602454,8.2777269 19.9524178,8.0995531 C20.7540486,7.51369099 21.449678,6.78180786 21.9998024,5.94850271"></path> </symbol> <symbol id="social-youtube" viewbox="0 4 24 18"> <path d="M23.74,7.6062 C23.74,7.6062 23.51,5.9562 22.79,5.2362 C21.88,4.2762 20.86,4.2762 20.39,4.2162 C17.04,3.9712 12,4.0012 12,4.0012 C12,4.0012 6.98,3.9712 3.63,4.2112 C3.17,4.2712 2.15,4.2712 1.24,5.2312 C0.52,5.9512 0.28,7.6012 0.28,7.6012 C0.28,7.6012 0.04,9.5462 0,11.4812 L0,13.5062 C0.04,15.4462 0.28,17.3812 0.28,17.3812 C0.28,17.3812 0.52,19.0312 1.24,19.7612 C2.15,20.7112 3.34,20.6812 3.88,20.7812 C5.76,20.9612 11.79,21.0012 12,21.0012 C12,21.0012 17.05,21.0112 20.4,20.7712 C20.86,20.7112 21.88,20.7112 22.79,19.7512 C23.51,19.0312 23.75,17.3812 23.75,17.3812 C23.75,17.3812 23.99,15.4412 24,13.5062 L24,11.4812 C23.98,9.5462 23.74,7.6062 23.74,7.6062 L23.74,7.6062 Z M9.57,16.0012 L9.57,8.9912 L16,12.6312 L9.57,16.0012 L9.57,16.0012 Z"></path> </symbol> <symbol id="google-logo" viewbox="0 0 396 130"> <path d="M51.0745265,101.038701 C23.3283097,101.038701 9.65724009e-07,78.4212338 9.65724009e-07,50.645974 C-0.00548030982,22.8707143 23.3228284,0.253246753 51.0745265,0.253246753 C66.4220981,0.253246753 77.3517615,6.27798701 85.5736748,14.1408766 L75.8718171,23.8528896 C69.9794459,18.3219805 61.9987087,14.0201623 51.0690452,14.0201623 C30.8102508,14.0201623 14.9693645,30.365974 14.9693645,50.645974 C14.9693645,70.925974 30.8102508,87.2717857 51.0690452,87.2717857 C64.2076627,87.2717857 71.6950851,81.9877922 76.48572,77.1921429 C80.4157945,73.2579545 82.991994,67.6063312 83.9731424,59.8641558 L51.0745265,59.8641558 L51.0745265,46.1027273 L97.3638985,46.1027273 C97.8572133,48.5609091 98.0983894,51.5129221 98.0983894,54.7063636 C98.0983894,65.0329221 95.2755325,77.8121753 86.1875777,86.9096429 C77.3462802,96.1223377 66.0548526,101.038701 51.0745265,101.038701 L51.0745265,101.038701 Z"></path> <path d="M167.573556,68.369026 C167.573556,87.0523052 152.965957,100.813734 135.036704,100.813734 C117.112933,100.813734 102.499853,87.0468182 102.499853,68.369026 C102.499853,49.5650325 117.112933,35.9188312 135.036704,35.9188312 C152.965957,35.9188312 167.573556,49.5650325 167.573556,68.369026 L167.573556,68.369026 Z M153.333202,68.369026 C153.333202,56.6926623 144.85915,48.7035714 135.036704,48.7035714 C125.214259,48.7035714 116.740207,56.6926623 116.740207,68.369026 C116.740207,79.9191883 125.214259,88.0344805 135.036704,88.0344805 C144.85915,88.0344805 153.333202,79.9191883 153.333202,68.369026 L153.333202,68.369026 Z"></path> <path d="M238.282011,68.369026 C238.282011,87.0523052 223.674411,100.813734 205.745159,100.813734 C187.821388,100.813734 173.208307,87.0468182 173.208307,68.369026 C173.208307,49.5650325 187.821388,35.9188312 205.745159,35.9188312 C223.674411,35.9188312 238.282011,49.5650325 238.282011,68.369026 L238.282011,68.369026 Z M224.041657,68.369026 C224.041657,56.6926623 215.567605,48.7035714 205.745159,48.7035714 C195.922713,48.7035714 187.448661,56.6926623 187.448661,68.369026 C187.448661,79.9191883 195.922713,88.0344805 205.745159,88.0344805 C215.567605,88.0344805 224.041657,79.9191883 224.041657,68.369026 L224.041657,68.369026 Z"></path> <path d="M306.04702,37.943539 L306.04702,96.1442857 C306.04702,120.111558 291.927254,129.944286 275.231289,129.944286 C259.516472,129.944286 250.061272,119.376299 246.498443,110.772662 L258.897088,105.609383 C261.106042,110.893377 266.51058,117.159545 275.225808,117.159545 C285.908814,117.159545 292.535676,110.52026 292.535676,98.1086364 L292.535676,93.4391883 L292.047842,93.4391883 C288.85774,97.3733766 282.71323,100.813734 274.97915,100.813734 C258.771019,100.813734 243.916762,86.6791883 243.916762,68.4897403 C243.916762,50.1740909 258.771019,35.9188312 274.97915,35.9188312 C282.71323,35.9188312 288.852259,39.3591883 292.047842,43.1726623 L292.535676,43.1726623 L292.535676,37.943539 L306.04702,37.943539 L306.04702,37.943539 Z M293.522306,68.4897403 C293.522306,57.0602922 285.908814,48.7035714 276.212437,48.7035714 C266.389992,48.7035714 258.162597,57.0602922 258.162597,68.4897403 C258.162597,79.798474 266.389992,88.0344805 276.212437,88.0344805 C285.908814,88.0344805 293.522306,79.798474 293.522306,68.4897403 L293.522306,68.4897403 Z"></path> <path d="M329.961825,3.54545455 L329.961825,98.9207143 L315.721472,98.9207143 L315.721472,3.54545455 L329.961825,3.54545455 L329.961825,3.54545455 Z"></path> <path d="M383.755064,79.0577273 L394.805315,86.4322727 C391.242486,91.7162662 382.647846,100.813734 367.793589,100.813734 C349.376503,100.813734 336.002191,86.558474 336.002191,68.369026 C336.002191,49.0712013 349.497091,35.9188312 366.198538,35.9188312 C383.020573,35.9188312 391.247967,49.3181169 393.944755,56.566461 L395.419218,60.2537338 L352.078772,78.1962662 C355.394944,84.7093506 360.552824,88.0289935 367.793589,88.0289935 C375.039836,88.0289935 380.071647,84.4624351 383.755064,79.0577273 L383.755064,79.0577273 Z M349.743749,67.3813636 L378.717771,55.3373701 C377.12272,51.2824675 372.332085,48.4566558 366.686372,48.4566558 C359.445607,48.4511688 349.376503,54.843539 349.743749,67.3813636 L349.743749,67.3813636 Z"></path> </symbol> <symbol id="social-share-triangle" viewbox="0 0 24 24"> <path d="M18,16.08 C17.24,16.08 16.56,16.38 16.04,16.85 L8.91,12.7 C8.96,12.47 9,12.24 9,12 C9,11.76 8.96,11.53 8.91,11.3 L15.96,7.19 C16.5,7.69 17.21,8 18,8 C19.66,8 21,6.66 21,5 C21,3.34 19.66,2 18,2 C16.34,2 15,3.34 15,5 C15,5.24 15.04,5.47 15.09,5.7 L8.04,9.81 C7.5,9.31 6.79,9 6,9 C4.34,9 3,10.34 3,12 C3,13.66 4.34,15 6,15 C6.79,15 7.5,14.69 8.04,14.19 L15.16,18.35 C15.11,18.56 15.08,18.78 15.08,19 C15.08,20.61 16.39,21.92 18,21.92 C19.61,21.92 20.92,20.61 20.92,19 C20.92,17.39 19.61,16.08 18,16.08 L18,16.08 Z"></path> </symbol> <!-- hercules icons --> <symbol id="h-color-google-logo" viewbox="0 0 74 24"> <path fill="#4285F4" d="M9.24 8.19v2.46h5.88c-.18 1.38-.64 2.39-1.34 3.1-.86.86-2.2 1.8-4.54 1.8-3.62 0-6.45-2.92-6.45-6.54s2.83-6.54 6.45-6.54c1.95 0 3.38.77 4.43 1.76L15.4 2.5C13.94 1.08 11.98 0 9.24 0 4.28 0 .11 4.04.11 9s4.17 9 9.13 9c2.68 0 4.7-.88 6.28-2.52 1.62-1.62 2.13-3.91 2.13-5.75 0-.57-.04-1.1-.13-1.54H9.24z"></path> <path fill="#EA4335" d="M25 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52z"></path> <path fill="#4285F4" d="M53.58 7.49h-.09c-.57-.68-1.67-1.3-3.06-1.3C47.53 6.19 45 8.72 45 12c0 3.26 2.53 5.81 5.43 5.81 1.39 0 2.49-.62 3.06-1.32h.09v.81c0 2.22-1.19 3.41-3.1 3.41-1.56 0-2.53-1.12-2.93-2.07l-2.22.92c.64 1.54 2.33 3.43 5.15 3.43 2.99 0 5.52-1.76 5.52-6.05V6.49h-2.42v1zm-2.93 8.03c-1.76 0-3.1-1.5-3.1-3.52 0-2.05 1.34-3.52 3.1-3.52 1.74 0 3.1 1.5 3.1 3.54.01 2.03-1.36 3.5-3.1 3.5z"></path> <path fill="#FBBC05" d="M38 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52z"></path> <path fill="#34A853" d="M58 .24h2.51v17.57H58z"></path> <path fill="#EA4335" d="M68.26 15.52c-1.3 0-2.22-.59-2.82-1.76l7.77-3.21-.26-.66c-.48-1.3-1.96-3.7-4.97-3.7-2.99 0-5.48 2.35-5.48 5.81 0 3.26 2.46 5.81 5.76 5.81 2.66 0 4.2-1.63 4.84-2.57l-1.98-1.32c-.66.96-1.56 1.6-2.86 1.6zm-.18-7.15c1.03 0 1.91.53 2.2 1.28l-5.25 2.17c0-2.44 1.73-3.45 3.05-3.45z"></path> </symbol> <symbol id="h-white-google-logo" viewbox="0 0 74 24"> <path d="M9.24 8.19v2.46h5.88c-.18 1.38-.64 2.39-1.34 3.1-.86.86-2.2 1.8-4.54 1.8-3.62 0-6.45-2.92-6.45-6.54s2.83-6.54 6.45-6.54c1.95 0 3.38.77 4.43 1.76L15.4 2.5C13.94 1.08 11.98 0 9.24 0 4.28 0 .11 4.04.11 9s4.17 9 9.13 9c2.68 0 4.7-.88 6.28-2.52 1.62-1.62 2.13-3.91 2.13-5.75 0-.57-.04-1.1-.13-1.54H9.24zm15.76-2c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52zm28.58-8.03h-.09c-.57-.68-1.67-1.3-3.06-1.3C47.53 6.19 45 8.72 45 12c0 3.26 2.53 5.81 5.43 5.81 1.39 0 2.49-.62 3.06-1.32h.09v.81c0 2.22-1.19 3.41-3.1 3.41-1.56 0-2.53-1.12-2.93-2.07l-2.22.92c.64 1.54 2.33 3.43 5.15 3.43 2.99 0 5.52-1.76 5.52-6.05V6.49h-2.42v1zm-2.93 8.03c-1.76 0-3.1-1.5-3.1-3.52 0-2.05 1.34-3.52 3.1-3.52 1.74 0 3.1 1.5 3.1 3.54.01 2.03-1.36 3.5-3.1 3.5zM38 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52zM58 .24h2.51v17.57H58zm10.26 15.28c-1.3 0-2.22-.59-2.82-1.76l7.77-3.21-.26-.66c-.48-1.3-1.96-3.7-4.97-3.7-2.99 0-5.48 2.35-5.48 5.81 0 3.26 2.46 5.81 5.76 5.81 2.66 0 4.2-1.63 4.84-2.57l-1.98-1.32c-.66.96-1.56 1.6-2.86 1.6zm-.18-7.15c1.03 0 1.91.53 2.2 1.28l-5.25 2.17c0-2.44 1.73-3.45 3.05-3.45z"></path> </symbol> <symbol id="h-burger" viewbox="0 0 24 24"> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path> </symbol> </svg> <!-- Include Hammer module--> <script src="http://web.archive.org/web/20220809111255js_/https://www.gstatic.com/external_hosted/hammerjs/v2_0_2/hammer.min.js"></script> <!-- Add Hercules and Glue CDN before body close tag --> <script src="//web.archive.org/web/20220809111255js_/https://www.gstatic.com/glue/v20_0/glue-vanilla.min.js"></script> <script src="/web/20220809111255js_/https://csfirst.withgoogle.com/static/js/nav_dropdown.js"></script> <script src="http://web.archive.org/web/20220809111255js_/https://support.google.com/inapp/api.js"></script> <script> glue.app.ready(); for (const header of document.querySelectorAll('.glue-header')) { glue.ui.header.Header.attachTo(header); } // Initialize the feeback button document.addEventListener('click', function(e) { if (e.target.id === 'feedbackLink' && userfeedback ) { const locale = e.target.getAttribute('data-locale'); userfeedback.api.startFeedback({'productId': '5088297', 'locale': locale}); } }); </script> </body> </html> <!-- FILE ARCHIVED ON 11:12:55 Aug 09, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 06:50:47 Nov 26, 2024. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). --> <!-- playback timings (ms): captures_list: 0.531 exclusion.robots: 0.027 exclusion.robots.policy: 0.017 esindex: 0.01 cdx.remote: 7.666 LoadShardBlock: 239.451 (3) PetaboxLoader3.resolve: 221.204 (3) PetaboxLoader3.datanode: 136.518 (5) load_resource: 167.261 loaddict: 33.996 -->