index.html

---
layout: landing
title: OpenTechSchool
rss_feed: full
---

<div class="bg_full">
  <div class="container container_narrow">

    <h2>The OpenTechSchool initiative</h2>
    <p>Hi, we are OpenTechSchool, a distributed community initiative organising <b>welcoming and inclusive code learning</b> happenings with real people in the real world. Our offers are for technology enthusiasts of all ages, genders, backgrounds, and experience levels. On top, we invite anyone to become an organiser themselves, set up their own <a href="/locator/">local chapter</a> and <a href="https://discourse.opentechschool.org/">join our community</a> of coaches everywhere in creating original teaching materials under the open <a href="https://creativecommons.org/licenses/by-sa/3.0/deed.en_US" target="_blank">Creative Commons Licence</a>.
    </p>
    <p><a href="{{site.baseurl}}/about.html">More about OpenTechSchool</a></p>
    <a class="ots_action" href="http://eepurl.com/bGlqw9" style="float: right">✉ Subscribe to our newsletter</a>
  </div>
</div>

<div class="bg_full bg_full_white">
  <div class="container clearfix">
    <div class="a-third blocky green">
      <h3 class="head">More about OTS</h3>
      <p>Go to <a href="/about.html">about</a> to learn more about what OpenTechSchool is, what we do, the values and the history of the movement.
      </p>
      <p>You might also want to learn more about <a href="/foundation/">the foundation</a> behind it and what some of the learners, coaches and organisers <a href="testimonials.html">say about OpenTechSchool</a>.</p>

    </div>
    <div class="a-third blocky violet">
      <h3 class="head">Start learning</h3>
      <p>If you are looking to learn coding/about tech yourself, you probably want to find out <a href="/locator/">where and when the next events</a> takes place near you.</p>
      <p>In any case make sure you <a href="#stay-connected" class="stay-connected">stay connected</a> to receive updates about whats going on.</p>
    </div>

    <div class="a-third blocky orange">
      <h3 class="head">Join the movement</h3>
      <p>Just reach out to the <a href="/locator/">next chapter close to you</a> and help organising, coaching or with general support.</p>

      <p>You might also want to join the <a href="/foundation/">Foundation as a Member</a> and <a href="https://discourse.opentechschool.org">join our online community</a> of coaches, organisers and volunteers, <a href="http://eepurl.com/bGlqw9">subscribe to our newsletter</a>, or <a href="#stay-connected" class="stay-connected">stay connected</a>.</p>
    </div>

  </div>

  <div class="container clearfix">

    <div class="blocky col_left">
      <h3 class="head">Upcoming events <a href="/locator/" class="tiny_button">&raquo; find closest to me</a></h3>
      <div id="upcomingEvents"></div>
    </div>

    <div class="blocky col_right">
      <h3 class="head">News
        <a href="https://blog.opentechschool.org/" class="tiny_button">&raquo; More</a>
        <a href="https://blog.opentechschool.org/feeds/{{page.rss_feed}}.xml" class="tiny_button right_floated_button">&raquo; rss</a>
      </h3>

      <section id="blog-posts">
        <div id="js-blog-posts-list"> </div>
      </section>

      <script type="text/x-template" data-template="blog-post">
        <article>
          <h3 class="post_title"><a href="https://blog.opentechschool.org${link}">${title}</a></h3>
          <p>${date}</p>
        </article>
      </script>
    </div>

  </div>

  <div class="blocky discussion">
    <h3 class="head">Discussion <a href="https://discourse.opentechschool.org/latest/" class="tiny_button">&raquo; all topics</a></h3>
    <div id="currentTopics"></div>
  </div>

</div>


<div class="bg_full">
  <div class="container container_narrow">

    <h2>Testimonials</h2>

    <div class="testimonials_teaser">
      <img src="images/testimonials_teaser.jpg" alt="Testimonials">
    </div>

    <p>A learner, a coach, and a learner-to-be talk about OpenTechSchool. What do they say? <a href="{{site.baseurl}}/testimonials.html">&raquo; Read more</a>
    </p>

  </div>
</div>

<div class="modal-backdrop"></div>

<div class="modal">
  <div class="modal-outer-container">
    <div class="modal-middle-container">
      <div class="modal-inner-container">
        <div class="modal-header">
          <h3>Stay connected with OpenTechSchool <span class="close" title="close">x</span></h3>
        </div>
        <div class="modal-body clearfix">
          <h4>Follow us on</h4>
          <div class="clearfix">
            <a href="https://www.twitter.com/OpenTechSchool" class="btn"><span class="ots_icon twitter"></span> Twitter</a>
            <a href="https://www.facebook.com/OpenTechSchool" class="btn"><span class="ots_icon facebook"></span> Facebook</a>
          </div>
          <h4>and</h4>
          <div class="clearfix">
            <a href="https://blog.opentechschool.org/" class="btn">Read the Blog</a>
            <a href="https://discourse.opentechschool.org/" class="btn"><span class="ots_icon discourse"></span> Join the Forum</a>
            <a href="https://github.com/OpenTechSchool" class="btn"><span class="ots_icon github"></span> Github</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
<script src="/scripts/widgets.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
   $(function() {
    var eventChapterNames = [];
    for (var name in OTS.config.chapters) {
      if (OTS.config.chapters[name].isActive) {
        eventChapterNames.push(name);
      }
    }
    React.renderComponent(
      OTS.Widgets.UpcomingEventsPreview({
        teams: OTS.config.chapters,
        chapterNames: eventChapterNames,
        page: 5
      }),
      document.getElementById('upcomingEvents')
    );
    React.renderComponent(
      OTS.Widgets.LatestConversations({
        path: "/latest.json"
      }),
      document.getElementById('currentTopics')
    );

    $(".stay-connected").click(function() {
      $('body').addClass("show-modal");
    });
    $(".modal .close").click(function() {
      $('body').removeClass("show-modal");
    });
    $(document).keypress(function(ev){
      if (ev.keyCode === 27){ // ESCAPE
       $('body').removeClass("show-modal");
      }
    });
   });
</script>