index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta property="og:type"   content="website" />
<meta property="og:url"    content="https://codenext.withgoogle.com" />
<meta property="og:title"  content="Code Next" />
<meta property="og:image"  content="https://lh3.googleusercontent.com/qEuFfUXWb0GxKOw1kg2DYZtIIr0AmQmIFYUbJMdJAmCnQbsnpCeODqTst79uoZRmzhDXeMBfshF3PwK_MTaLlTzCvh-dQs9D3CWL=h720" />
<meta property="og:description"  content="Google&#39;s Code Next program works with high schoolers to cultivate the next generation of Black and Latinx tech leaders." />

<title>Code Next</title>
<link rel="icon" type="image/png" href="https://lh3.googleusercontent.com/XyDc3_jWOogJZiMHDQAzhYIVeVg3agU_BkqulGenKWWNzyTWr2CocRzNPhkYJrUhP-W1Qqufhbax06faNtvSi9WZIXB57fJOm_zev3Q">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500" rel="stylesheet">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127335383-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-127335383-1');
  </script>

<script type="text/javascript">
  window.OVERLAY_VIDEO_YOUTUBE_ID =
      'two3sIHsj64';
</script>


<div class="header">
  <div tabindex="0" class="menu-button icon-button" role="button">
    <img src="/static/images/menu.svg?cache=e07362c" />
  </div>

  <div tabindex="0" class="header-logo">
    <img src="https://lh3.googleusercontent.com/XyDc3_jWOogJZiMHDQAzhYIVeVg3agU_BkqulGenKWWNzyTWr2CocRzNPhkYJrUhP-W1Qqufhbax06faNtvSi9WZIXB57fJOm_zev3Q" />
    <label>Code Next</label>
  </div>

  <div class="header-nav">
      <a  href="#intro"
          class="mdc-button">
        What is Code Next?
      </a>
      <a  href="#program"
          class="mdc-button">
        What We Offer
      </a>
      <a  href="#team"
          class="mdc-button">
        Team + Partners
      </a>
  </div>

  <a href="#sign-up" id="get-button" class="sign-up-button mdc-button mdc-button--raised">
    Get Updates
  </a>
</div>
<div class="header-spacer"></div>

<div class="drawer-open-scrim"></div>
<aside class="nav-drawer">
    <a href="#intro">What is Code Next?</a>
    <a href="#program">What We Offer</a>
    <a href="#team">Team + Partners</a>

  <div class="flex-spacer"></div>
  <div class="drawer-sign-up-container">
    <a  href="#sign-up"
        class="sign-up-button mdc-button mdc-button--raised">
      Get Updates
    </a>
  </div>
</aside>

<div id="video-banner" class="banner top-section-banner autoplaying">
    <video class="top-banner-anim" autoplay loop muted>
      <source src="/static/images/top_banner_anim.mp4?cache=e0d3c1c" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  <img class="banner-image top-banner-still"
        src="https://lh3.googleusercontent.com/erw1egeCmOT7WnG_utNDyHlZlHsHDhd13ZIm0s5GYkJk88p7Vzih1-Y-v5a8hnIcVpHRGYkWvxxHeTV1ikIg2E2pUQMaP84klXb0-A=h720"
        alt="Young black male looks proudly into camera with city skyline in the background." />
  <div id="top-banner" class="banner-content">
    <div id="code-next-title" class="banner-text-title">
      Code Next
    </div>
    <div class="banner-text-subtext">
        Google&#39;s Code Next program works with high schoolers to cultivate the next generation of Black and Latinx tech leaders.
    </div>
    <div tabindex="0" class="play-button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFFFF">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path>
      </svg>
    </div>
  </div>
</div>

<div class="video-overlay">
  <div tabindex="0" class="close-video-overlay-button icon-button dark-bg">
    <img src="/static/images/close_white.svg?cache=84c22ec" />
  </div>
  <div class="video-container"></div>
</div>

<h1>How does {Code Next} work?</h1>

<div class="top-section">
    <div class="top-section-item">
      <img id="think-icon" src="https://lh3.googleusercontent.com/QCWMpfyqVz4_RzefjykLUmvWR2dhTZqEKMz99rexQK5BrNO0qSnhDXDblqlVL78Af9oTgEEaguun5JqYErPQtzf80osjIYz6cnlyNA">
      <label class="section-header">Think</label>
      <p class="section-body">Code Next students come into our physical labs after school and on the weekends to learn about computer science and problem solving. They become creative, computational thinkers.</p>
    </div>
    <div class="top-section-item">
      <img id="make-icon" src="https://lh3.googleusercontent.com/o47uow2syWeT2EgQfm6dVx9oROmWXsfPFwvvfBA_MlQriF0G1aaUxF3c6F1w9OBIV4DD65fFHMzT2WYV82E1IL6ErCn9i7OOAmwi_w">
      <label class="section-header">Make</label>
      <p class="section-body">Students develop into confident, purposeful makers as they engage in both solo and team projects. They produce websites, programs, and other demonstrations of their learning and interests.</p>
    </div>
    <div class="top-section-item">
      <img id="lead-icon" src="https://lh3.googleusercontent.com/GW_6IWLQRnFijni_wL2UlzQNjZHT9BZ5AQpiVIOTzaxrr3OrnC_zBVOAmzBn-kbYxNtUPjpnjVS3FV4xysTSdRyRpnEgW0LENMANryo">
      <label class="section-header">Lead</label>
      <p class="section-body">Through community relationships, mentor-mentee relationships with real Googlers, and leadership courses, Code Next students mature into effective and ethical leaders.</p>
    </div>
</div>

<div id="intro" class="banner intro-section-banner fragment-section-top-element">
  <img class="banner-image"
       src="https://lh3.googleusercontent.com/qEuFfUXWb0GxKOw1kg2DYZtIIr0AmQmIFYUbJMdJAmCnQbsnpCeODqTst79uoZRmzhDXeMBfshF3PwK_MTaLlTzCvh-dQs9D3CWL=h720"
       alt="Black female student engages with technology." />
  <div class="banner-content">
    <div class="banner-text-subtext">

    </div>
    <div class="banner-text-title">
      What is Code Next?
    </div>
  </div>
</div>

<div class="intro-section-summary">
   <p>Code Next is a <strong>free, computer science education program</strong> that meets Black and Latinx high school students in their own communities and provides the skills and inspiration they need for long and rewarding careers in computer science-related fields.</p>
</div>

<div class="intro-section-grid">
    <div class="intro-section-label">
      <label>What do students get out of the program?</label>
    </div>
    <div class="intro-section-content">
      <p>
          So much! Participants engage in curriculum, learn from coaches, and drive their own projects–such as designing and programming a robot and 3D printing an Android chess set. After months of learning, students become creators of technology that they can share with their community. They also gain access to Google mentors, tech experts, and the latest in technologies, from laptops to virtual and augmented reality.
          <a href="" target="_blank">

          </a>
      </p>
    </div>
    <div class="intro-section-label">
      <label>Is Code Next online or in-person?</label>
    </div>
    <div class="intro-section-content">
      <p>
          Currently, Code Next is completely in-person. At the moment, we have three labs, located in 1) Oakland, California, 2) Manhattan, New York, and 3) Harlem, New York. The Oakland and Manhattan labs are run and managed by Google. The Harlem lab is based at the Boys and Girls Club of Harlem, run and managed in partnership with the New York Urban League and Emerging Leaders in Technology and Engineering (ELiTE).<br><br>In the future, we plan on releasing the Code Next curriculum online.
          <a href="https://docs.google.com/forms/d/e/1FAIpQLSf777GnBI5haLXgT__z27or_ZtiaKgIuU4j_SgCixHOm6bGCA/viewform" target="_blank">
            Sign up here to get updates on that curriculum.
          </a>
      </p>
    </div>
</div>

<div id="program" class="banner program-section-banner fragment-section-top-element">
  <img class="banner-image"
       src="https://lh3.googleusercontent.com/e3v9XWOy-9lMW95mKHIGYJiqnZRdGusk2ewMEIHKgtDvS4CKi9EfIiy5yk5FUWzWauGfcXX7onB_Uw537podFy7iGBaAGYdgkMFfVw=h720"
       alt="Diverse set of high school students hang out at the community center." />
  <div class="banner-content">
    <div class="banner-text-title">
      What We Currently Offer
    </div>
  </div>
</div>

<div class="program-section">
      <div class="program-section-image">
        <img src="https://lh3.googleusercontent.com/8yUWoP_4YZr9sREdFtkuL6pFhyNjg0EGDmcqVOZ4Bc_1Juw59E9C8RZBR7Isyl5eXh67zgbJje-mf9rstpaDJiQX4QvrzK0okVJyKaE" />
      </div>
      <div class="program-section-content">
        <h2>Community Workshops</h2>
        <p>Making and design workshops for 8th graders. These introduce students to computational thinking and dispel misconceptions about CS.</p>
      </div>
      <div class="program-section-image even-row before-content">
        <img src="https://lh3.googleusercontent.com/qe153cz8o-TQRfRzyMfCOaG_ii_7bVze7TkzcvonRNt_Pgo8Qx0AyA6pLRvWLGteyAg2e7W-6WB19joQCjV39UaCMNXBpkkk2lMU" />
      </div>
      <div class="program-section-content">
        <h2>Foundations</h2>
        <p>Our flagship, project-based CS exposure program for incoming 9th graders. This program includes two modules–CS and academic enrichment.</p>
      </div>
      <div class="program-section-image even-row after-content">
        <img src="https://lh3.googleusercontent.com/qe153cz8o-TQRfRzyMfCOaG_ii_7bVze7TkzcvonRNt_Pgo8Qx0AyA6pLRvWLGteyAg2e7W-6WB19joQCjV39UaCMNXBpkkk2lMU" />
      </div>
      <div class="program-section-image">
        <img src="https://lh3.googleusercontent.com/Ihxcr82RpYvA95OYmRBOSYJU4XZBSE83UyItQQ00LqXbSpGN5e_lIkRBSydFixDVrOgLoa_PNMRDfQVqv9E_YF_gB4uaR19zBWvrsQ" />
      </div>
      <div class="program-section-content">
        <h2>Team Edge</h2>
        <p>A rigorous high school program for 9th and 10th graders that includes CS, academic enrichment, leadership development, and navigating the college application/college-going experience for students and their families. Each Team Edge student receives a Google mentor in their 10th grade year.</p>
      </div>
      <div class="program-section-image even-row before-content">
        <img src="https://lh3.googleusercontent.com/UtRSGbMzYzF5RMepnjs3BTr9BhuRpq_E4j3z_lkuhcwd_raqClmXT9czTRdCJCdyg-wl8hfLZstSZl6XHJi5QRGyx1GiYQFSDeYc6w" />
      </div>
      <div class="program-section-content">
        <h2>Launch</h2>
        <p>Launch is a program for 11th and 12th graders that builds on the foundations established in Team Edge. Launch combines immersive experiences with emphasis on entrepreneurship, product development, and preparation for a post-secondary pathway in tech.</p>
      </div>
      <div class="program-section-image even-row after-content">
        <img src="https://lh3.googleusercontent.com/UtRSGbMzYzF5RMepnjs3BTr9BhuRpq_E4j3z_lkuhcwd_raqClmXT9czTRdCJCdyg-wl8hfLZstSZl6XHJi5QRGyx1GiYQFSDeYc6w" />
      </div>
      <div class="program-section-image">
        <img src="https://lh3.googleusercontent.com/dLh1bPAnqNXkPyd9BpRQy85qUgi_hecnl4wKTrrY80go-fOL2UUNLPMOIMARrwNQRWM-H6m7IU1CUUgK4BXPs_TCNcvuF6xDPvI_0A" />
      </div>
      <div class="program-section-content">
        <h2>Clubs</h2>
        <p>These once-a-week meet-ups for 9th through 12th graders are perfect for students either in Team Edge or simply interested in STEM-related subjects. Clubs cover topics from tinkering to automation to virtual reality.</p>
      </div>
</div>

<div id="team" class="banner team-section-banner fragment-section-top-element">
  <img class="banner-image"
       src="https://lh3.googleusercontent.com/a3Nh70LT_T4GRMP5mL1WXsALw9OPq-JG17j6fXOLFlewchWFldh1J-A2WY9eq6jEqndM9y7wT4ZceaC94-HGyBYc2wrwX0pbrlfHpJ8=h720"
       alt="Our team and the community celebrates a milestone of a community adult learning coding skills in the center." />
  <div class="banner-content">
    <div class="banner-text-title">
      Our Team and Partners
    </div>
  </div>
</div>

<div class="team-section">
    <h4>OUR TEAM</h4>
    <p>
      The Code Next staff brings together coaches experienced in education, computer science, and engineering. Coaches represent our students&#39; backgrounds and work to create a culture of inclusion, where everyone feels respected and connected to one another.
        <a href="" target="_blank">

        </a>
    </p>
    <h4>OUR PARTNERS</h4>
    <p>
      This work isn’t possible without our partners, who do incredible work in our students’ communities. Below represents a small sampling of the nonprofits, research organizations, and schools that we work with.
        <a href="" target="_blank">

        </a>
    </p>
</div>

<div class="partner-logos">
      <a href="https://www.nyul.org/" target="_blank">
        <img src="https://lh3.googleusercontent.com/gb6RhOSMldwq13LjrMrQejwxqAS3ApfbUt04_0K3U40D_tLB4nbDbijyie_nhnXiaNfXuEZc3meUWla5c0QWxbEKJ0WiLtRPsIHoCX0=s200" alt="Logo for New York Urban League." />
      </a>
      <a href="https://unitycouncil.org/" target="_blank">
        <img src="https://lh3.googleusercontent.com/-qyOkluwMLTq5lZ8zXrpB64ujTztOQweo7-bfCvjID57Ic0tlcKEE6XDHIwjxSLGqoJAtbvaWN0bi20iuPFAO0-LB34-rooa3usQ=s200" alt="Logo for The Unity Council." />
      </a>
      <a href="https://www.media.mit.edu/" target="_blank">
        <img src="https://lh3.googleusercontent.com/OJaZ2kIcBRBmgfKbYWTnHhON3DaY7YoqV44eAaAcp3EP0zc2NqtS6wxKpJG27B1vjnARwnXeuCfHrWXnj4G8szoFxAiveTSIzDHpJA=s200" alt="Logo for the MIT Media Lab." />
      </a>
      <a href="https://www.bgcharlem.org/" target="_blank">
        <img src="https://lh3.googleusercontent.com/3MYukgHFXy9PNq2pvGhO5niJ8aULQV7IoeeREO2OoMUGZhNayc0tnUiTuZDKqiA0JuVerh_KnpIjk6v5YcVOM0KVgAssb7EL4IQFOw=s200" alt="Logo for the Boys and Girls Club." />
      </a>
      <a href="http://www.elite-education.org/" target="_blank">
        <img src="https://lh3.googleusercontent.com/MbouSpYJPJ1yc_VcZNfev105qk6u0GQd-pZqSaCWvzPjhxaam1WU9BgSzm9qwsABf0VrzPm45rmH_sODvzT_jOIGGFdqMUnTWFJgUQ=s200" alt="Logo for a ELiTE Education." />
      </a>
      <a href="https://www.edc.org/" target="_blank">
        <img src="https://lh3.googleusercontent.com/bEOeZHEb3slLletsbSt34gr1VPFb5csS-Ltee3z8LqnNoVs5w2TwVggx372p-cmWjpofrvm8gqelDQNAnCpxlEApE3V4R9U4X6Fl-g=s200" alt="Logo for Education Development Center." />
      </a>
      <a href="http://www.langstonleague.org/" target="_blank">
        <img src="https://lh3.googleusercontent.com/VpzsHFIUQs_74dO1TmABI9M3KWKf5AdQbVeH1DVREDOxlKX54REtJQM96RmAOOLTE9UP82nS-g4SOSnzhCXSmL9CMczM0sJyjUjNbg=s200" alt="Logo for Langston League." />
      </a>
</div>

<div id="sign-up" class="sign-up-form">
    <p>Looking to get regular updates on the Code Next program and computer science education news? Curious as to when spots open up for new students?</p>
    <p><strong>Sign up</strong> for our quarterly newsletter below!</p>
  <input class="sign-up-email"
         type="text"
         placeholder="Email address"
         aria-label="Email address">
  <select class="sign-up-language">
    <option value="" disabled selected>Preferred language</option>
      <option>English (Inglés)</option>
      <option>Spanish (Español)</option>
  </select>
  <select class="sign-up-role">
    <option value="" disabled selected>Role</option>
      <option>Student (Estudiante)</option>
      <option>Parent or Guardian (Tutor Legal)</option>
      <option>Educator (Educador)</option>
      <option>Nonprofit (Organización Sin Ánimo de Lucro)</option>
      <option>Corporation (Corporación)</option>
      <option>Other (Otro)</option>
  </select>
  <p class="sign-up-success">Thanks for signing up! You will hear from us soon!</p>
  <p class="sign-up-failure">There was an error submitting your information. Please try again later.</p>
  <div tabindex="0" class="sign-up-submit-button mdc-button mdc-button--raised">
    Get updates
  </div>
</div>

<div class="footer">
  <div class="footer-content">
    <div class="footer-content-left">
      <a class="footer-logo" href="https://www.google.com" target="_blank">
        Google
      </a>
        <a href="https://policies.google.com/privacy" target="_blank">
          Privacy
        </a>
        <a href="https://policies.google.com/terms" target="_blank">
          Terms
        </a>
        <a href="https://www.google.com/about" target="_blank">
          About Google
        </a>
        <a href="https://diversity.google/" target="_blank">
          Google Diversity
        </a>
    </div>

    <div class="footer-content-right">
      <a class="help-link" href="https://support.google.com/" target="_blank">
        <img class="help-icon" src="https://lh3.googleusercontent.com/F4Eys32_fTijvLIxxbmdd6_RxY7a4QFqJT6LDAJ2rOjLFJQOJhxwIJB1zK0u1s9F0kfS1kdXZe-wpqXtoNUkB51swzdmXmoAYKhg" />
        Help
      </a>
      <select class="language-select">
        <option value="" disabled="" selected="">Preferred language</option>
        <option value="">
          English (Inglés)
        </option>
        <option value="es">
          Spanish (Español)
        </option>
      </select>
    </div>
  </div>
</div>

<script src="script.js"></script>