index.html

---
layout: default
title: The Beauty and Joy of Computing
---

<div class="jumbotron homepage">
  <div class="background-overlay"></div>
  <div class="container">
    <h1>The Beauty and Joy of Computing</h1>
    <p>An AP CS Principles Curriculum</p>
    <a href="https://bjc.edc.org" target="_blank" class="btn">
      Try BJC CS Principles
    </a>
    <a href="{{ site.baseurl }}/sparks/" class="btn">Try BJC Sparks</a>
    <!-- <a href="{{ site.baseurl }}/summer-pd/" class="btn">Join PD Summer 2024</a> -->
  </div>
</div>

<section class="section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-10 col-sm-offset-1 text-center">
        <img src="{{ site.baseurl }}/assets/img/bjc.png" class="bjc-logo" alt="BJC Logo">
        <p class="lead">
          <strong>The Beauty and Joy of Computing (BJC)</strong> is an introductory computer
          science curriculum developed at the University of California, Berkeley,
          intended for non-CS majors at the high school junior through undergraduate
          freshman level.  It was one of the five initial pilot programs for the
          <a href="https://csprinciples.org">AP CS Principles</a> course being
          developed by the College Board and the National Science Foundation.
          We offer it as <a href="https://cs10.org/">CS10</a> at Berkeley.
        </p>
        <a href="{{ site.baseurl }}/curriculum" class="btn">
          How is BJC Special?
        </a>
      </div>
    </div>
  </div>
  <div class="trapezoid"></div>
</section> <!-- /. section -->

<div class="jumbotron headlines">
  <div class="background-overlay"></div>
  <div class="container">
    <h2><a href="{{ site.baseurl }}{% post_url 2015-01-01-bjc-for-new-york %}">We're bringing BJC to New York City!</a></h2>
    <a href="{{ site.baseurl }}{% post_url 2015-01-01-bjc-for-new-york %}" class="btn">Learn More</a>
  </div>
</div>

<div class="section homepage">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4">
        {% include front-page/left-panel.html %}
      </div>
      <div class="col-sm-4">
        {% include front-page/center-panel.html %}
      </div>
      <div class="col-sm-4">
        {% include front-page/right-panel.html %}
      </div>
    </div>
  </div>
  <div class="trapezoid"></div>
</div> <!-- /. section -->