index.html

---
layout: base
title: Sugar Labs
---
{% include nav.html %}

<!-- Loader -->
<div id="loaderDiv" class="loader" >
    <div class="loader2">
        <div id="animationPart1" class="inner one"></div>
        <div id="animationPart2" class="inner two"></div>
        <div id="animationPart3" class="inner three"></div>
    </div>
</div>

<!-- Introduction page -->
<section id="slider">
  <div class="container">
    <div class="row">
      <div class="col-md-12" >
        <div class="row justify-content-center">
          <div class="col-md-10 col-md-push-1">
            <div class="block">
              <h2 style=" text-transform: uppercase;">Sugar Labs</h2>
              <p>
                Whether you're a young learner,
                teacher, or a budding developer, we
                believe Sugar Labs has something for
                you. Read on to learn more about our
                award-winning Sugar Learning Platform
                and how to join our diverse community
                of teachers and learners.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Sugar Labs mission section -->
<section id="intro" class="zeroMarPadBtm">
    <div class="container">
        <div class="row">
            <div class="col-md-12" >
                <div class="row justify-content-center">
                    <div class="col-md-10 col-md-push-1">
                        <div class="block">
                            <div class="section-title">
                                <h2>Our mission: Authentic problem solving</h2>
                                <p>The world needs more tools and communities for learn-by-doing education</p>
                            </div>
                            <p class="customColor">
			    Learners and teachers already have plenty
                            of tools to help them with
                            <em>instruction-based learning</em>. And despite
                            the known benefits, there are very few
                            tools and communities that encourage
                            <em>project-based learning</em>. Sugar
                            Labs's unique mission is to cultivate a
                            community of teachers and learners engaged
                            in <em>learn by doing</em> and,
                            collaboratively, create tools explicitly
                            made for <em>authentic problem
                            solving</em>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- "A glimpse of Sugar" slideshow -->
<section class="intro_img customImageStyle img_slider" >
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-md-offset-2">
	<div class="container customMargin7">
	  <div class="section-title">
            <h2 class="text-center customMargin1">Challenging and fun: It's hard fun!</h2>
	  </div>
	</div>
        <div>
          <img id="imgrflt" src="{{ site.baseurl }}/assets/DSC06422.jpg" alt="Parent with smiling child, in front of a computer. The Music Blocks logo is visible as a sticker on the computer." width="100%">
          <p><br>Learning isn't easy, but it should be fun. The Sugar Labs community works hard to make tools that are both challenging and fun. Hard fun is the <b>sweet spot!</b></p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Newsletter CTA section -->
<section id="call-to-action">
  <div class="container">
    <div class="row">
      <div class="col-md-12" >
        <div class="row justify-content-center">
          <div class="col-md-6 col-md-push-3" >
            <h2 >EXCITED?</h2>
            <p>The simplest way to get involved is to join our newsletter.</p>
	    <br>
	    <form action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs" method="post" class="embeddable-buttondown-form">
	      <p>Sign up for our mailing list to receive regular
		news and updates from Sugar Labs.</p>
	      <label for="email">Email</label>
	      <input type="email" name="email" placeholder="you@example.com" />
	      <input type="hidden" value="1" name="embed" />
	      <input type="submit" value="Subscribe" />
	    </form>
	    <br>
	  </div>
	</div>
      </div>
    </div>
  </div>
</section>

<!-- By the numbers -->
<section id="testimonial" class="customPadding5">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row justify-content-center">
          <div class="col-md-8 col-md-push-2">
            <div class="section-title text-center">
              <h2>Sugar Labs by the numbers</h2>
              <p class="customParagraphStyle">Sugar Labs, founded in 2008, has had an impact on the lives of many. Here are some of the statistics we are tracking.</p>
            </div>
          </div>
        </div>
        <div class="row justify-content-around">
          <div class="col-md-5 col-md-push-1">
            <div class="block">
              <ul class="counter-box clearfix" style="display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none;">
                <li style="flex-basis: 45%; margin-bottom: 20px;">
                  <div class="block" style="text-align: center;">
                    <h4 data-target="55" class="count">0</h4>
                    <span>Mentors helping youth learn in programs like Google Code-In (GCI) and Google Summer of Code</span>
                  </div>
                </li>
                <li style="flex-basis: 45%; margin-bottom: 20px;">
                  <div class="block" style="text-align: center;">
                    <h4 data-target="1450" class="count">0</h4>
                    <span>Problem-solving tasks completed by students ages 13-17.</span>
                  </div>
                </li>
                <li style="flex-basis: 45%; margin-bottom: 20px;">
                  <div class="block" style="text-align: center;">
                    <h4 data-target="344" class="count">0</h4>
                    <span>Projects for teaching and learning created by Sugar Labs students and teachers.</span>
                  </div>
                </li>
                <li style="flex-basis: 45%; margin-bottom: 20px;">
                  <div class="block" style="text-align: center;">
                    <h4 data-target="11531321" class="count">0</h4>
                    <span>Activities Downloaded</span>
                  </div>
                </li>
                <li style="flex-basis: 45%; margin-bottom: 20px;">
                  <div class="block" style="text-align: center;">
                    <h4 data-target="3000000" class="count">0</h4>
                   <span>Kids whose lives have been enriched by using the Sugar Learning Platform</span>
                  </div>
                </li>
                <li style="flex-basis: 45%; margin-bottom: 20px;">
                  <div class="block" style="text-align: center;">
                    <h4 data-target="170" class="count">0</h4> 
                    <span>Languages our educational software has been translated into</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Testimonials -->
<section id="call-to-action">
  <div class="container customMargin3">
    <div class="row">
      <div class="col-md-12" >
        <div class="row justify-content-center">
          <div class="col-md-8 col-md-push-2" >
            <div class="section-title text-center">
              <h2>What we hear</h2>
	    </div>
	    <div>
              <p>This is what we've heard about Sugar Labs from students, teachers, parents, and growing developers.</p>
	    </div>
          </div>
        </div>
        <div class="row justify-content-around">
          <div class="col-md-5 col-md-push-1 customPadding4" >
            <div class="testimonial-carousel customPadding4 borderNone">
              <div id="testimonial-slider2" class="owl-carousel customPadding4">
                <div>
                  <p class="leftAlign">"This summer
                    was super fun and filled with
                    learning! I enjoyed testing over
                    60+ activities with kids to get
                    first-hand feedback which had a
                    positive impact in the way they
                    approach problems. The fact that
                    these activities are used by kids
                    as a tool of learning motivates me
                    to contribute more and more. I'm
                    going to continue to contribute
                    and be a part of Sugar
                    Labs."</p>
                  <div class="user">
                    <p><span>Sourabha G., </span>GSoC 2021 student</p>
                  </div>
                </div>
		<div>
                  <p class="leftAlign">"I would like
                    to thank my mentors Walter Bender
                    and Devin Ulibarri for their
                    constant guidance and
                    motivation. A big thanks to Sugar
                    Labs community and Google Summer
                    of Code (GSoC) for providing such
                    a wonderful opportunity for
                    learning and helping me to be an
                    active member of Open Source
                    Community."</p>
                  <div class="user">
                    <p><span>Riya Lohia, </span>GSoC 2018 student</p>
                  </div>
                </div>
		<div>
                  <p class="leftAlign">"I think
                    Music Blocks will inspire many
                    young folks to become programmers,
                    mathematicians, composers, and
                    music theorists. It will also
                    provide important experiences to
                    other young folk who pursue other
                    fields. You are to be
                    congratulated on your
                    efforts."</p> <!-- Move Hermann to MB and give Alan Kay's quote more context somewhere else.
                                       <div class="user">
                                         <p><span>Richard Hermann, PhD, </span>Prof. of Music Theory and Composition, University of New Mexico</p>
                                       </div>
                </div>
                <div>
                  <p class="leftAlign">"A successful technology creates problems that only it can solve."</p>
                  <div class="user">
                    <p><span>Alan Kay</span></p>
                  </div>
                </div>-->
                <div>
                  <p class="leftAlign">"Fedora-Based Sugar on a Stick Is One Sweet Desktop."</p>
                  <div class="user">
                    <p><span>LinuxInsider</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- "About us" page redirect section -->
<section id="intro">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <a href="{{ site.baseurl }}/about-us"><button type="button" class="btn bt-raised btn-custom bt">Read more about Sugar Labs</button></a>
      </div>
    </div>
  </div>
</section>

<!-- CTA for newsletter -->
<!--
    <section id="intro" class="customPadding3 sugar_in_browser_try_now ">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <h3>Sign up for our newsletter</h3>
	    <form action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs" method="post" class="embeddable-buttondown-form">
	      <p>Receive regular news and updates from Sugar Labs</p>
	      <label for="email">Email</label>
	      <input type="email" name="email" placeholder="you@example.com" />
	      <input type="hidden" value="1" name="embed" />
	      <input type="submit" value="Subscribe" />
	    </form>
          </div>
        </div>
      </div>
    </section>-->

<!-- Download section -->

<section id="call-to-action">
  <div class="container customMargin3">
    <div class="row">
      <div class="col-md-12">
        <h2 id="try">EXPERIENCE SUGAR</h2>
        <p><i>Our educational tools can be experienced in a number of ways. Try the one that's best for you.</i></p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="border-box boxDownload">
          <h3 class="customHeaderStyle">Music Blocks</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/mb_logo_ja_alt_2.svg" class="span1 customLogoImageStyle" alt="Music Blocks logo">
          </figure>
          <p>Create musical code with the browser-based visual programming language Music Blocks.</p>
          <ul >
	    <br>
            <a href="{{ site.baseurl }}/music-blocks"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Learn about Music Blocks</button></a>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
        <div class="border-box boxDownload">
          <h3 class="customHeaderStyle">Turtle Blocks</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/turtle.svg" class="span1 customLogoImageStyle" alt="Turtle Blocks logo">
          </figure>
          <p>Explore math and computation through beautiful, artful geometry.</p>
          <ul >
	    <br>
            <a href="{{ site.baseurl }}/turtle-blocks-js"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Learn about Turtle Blocks</button></a>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
        <div class="border-box boxDownload">
          <h3 class="customHeaderStyle">Try now on any device with Sugarizer</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/sugarizer.svg" class="span1 customLogoImageStyle" alt="Sugarizer svg">
          </figure>
          <p>Get a taste of Sugar with Sugarizer, which opens in your browser with no installation. Alternatively, you may install Sugarizer onto your mobile or desktop device via Google Play or F-Droid (Android), the App Store (iOS), and the Microsoft Store (Windows).</p>
          <ul >
	    <br>
            <a href="{{ site.baseurl }}/sugarizer"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Learn more about Sugarizer</button></a>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="border-box boxDownload">
          <h3 class="customHeaderStyle">Desktop/laptop bootable drive</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/soas.svg" class="span1 customLogoImageStyle" alt="SOAS svg">
          </figure>
          <p>With Sugar on a Stick (SOAS), you can experience the full Sugar Learning Platform on
            any computer at any time from a bootable thumb drive.</p>
          <ul >
	    <br>
            <a href="{{ site.baseurl }}/booting-soas"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Create bootable drive</button></a>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
        <div class="border-box boxDownload">
          <h3 class="customHeaderStyle">Desktop/laptop installation</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/computer.svg" class="span1 customLogoImageStyle" alt="computer svg">
          </figure>
          <p>Sugar Learning Platform can be
            installed as a full operating system on most desktop and laptop computers.</p>
          <ul >
	    <br>
            <a href="{{ site.baseurl }}/booting-soas"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Learn about installation</button></a>
          </ul>
        </div>
      </div>
      <div class="col-md-4">
	<div class="border-box boxDownload"  >
          <h3 class="customHeaderStyle">Try Trisquel for full freedom</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/Trisquel-logo.png" class="span1 customLogoImageStyle" alt="Trisquel logo">
          </figure>
	  <p>Get all the benefits of a bootable/installation drive on the fully free and well maintained Trisquel distro.</p>
	  <br>
          <a href="{{ site.baseurl }}/trisquel"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Learn about Sugar+Trisquel</button></a>
	</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
	<div class="border-box boxDownload"  >
          <h3 class="customHeaderStyle">Try Sugar on Raspberry Pi</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/raspberry-pi.svg" class="span1 customLogoImageStyle" alt="Raspberry Pi logo">
          </figure>
          <p>The full Sugar environment on a Raspberry Pi (RPi).</p>
	  <br>
          <a href="{{ site.baseurl }}/sugar-for-raspberry-pi"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Learn about Sugar on RPi</button></a>
	</div>
      </div>
      <div class="col-md-4">
	<div class="border-box boxDownload"  >
          <h3 class="customHeaderStyle">Convenient installation via Flatpak</h3>
          <figure>
            <img src="{{ site.baseurl }}/assets/flatpak.svg" class="span1 customLogoImageStyle" alt="Flatpak logo">
          </figure>
          <p>Do you use a GNU/Linux? Available for any distribution, individual Sugar activities can be conveniently installed via Flatpak.</p>
	  <br>
          <a href="https://flathub.org/apps/search?q=sugar%20labs"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Search Sugar Activities on Flatpak</button></a> <!--TODO: Create a new page for more info page for Sugar Activities on Flatpak. -->
	</div>
      </div>
    </div>
    <!-- If we keep this, it should probably be a "Can't decide?" type button where we walk the user through some sort of decision making process.-->
    <!--
        <div class="row">
          <div class="col-md-12" >
            <h3 class="text-center">For more details, click the link below!</h3>
            <a href="https://wiki.sugarlabs.org/go/Get_sugar" ><button type="button" class="btn bt-raised btn-custom bt">
                <span class="text-center">Get Sugar</span></button></a>
          </div>
        </div>-->
	<div>
	  <br>
	  <a href="https://v4.activities.sugarlabs.org/"><button type="button" class="btn bt-raised btn-custom bt">Sugar Activity Library</button>
          </a>
	</div>
  </div>
</section>

<!-- Activities Start -- was "Service" -->
<!-- Note: If these activities are only available for GNU/Linux, we should say so. In fact, we may need to move this to another page if that's the case...-->
<section id="service">
  <div class="container">
    <div class="row">
      <div class="section-title">
        <h2>Already using Sugar? We have many activities for you!</h2>
        <p>The Sugar Learning Platform is a complete environment for teaching and learning, which includes individual activities. If you're already using the Sugar Desktop Environment, then you can install from the activities below, which has links to some of our most popular activities.</p>
      </div>
    </div>
    <div class="row "><!-- This is one too many for this 4x2 grid and the SVG -- and only this SVG -- renders too large
      <div class="col-sm-6 col-md-3">
        <div class="service-item">
	  <img class="span1" src='{{ site.baseurl }}/assets/activity-numbers.svg' alt="Numbers activity svg">
          <br>
          <h4>Numbers</h4>
          <p>Play with numbers</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4336"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Get Numbers</button></a>
        </div>
      </div>-->
      <div class="col-sm-6 col-md-3">
	<div class="service-item">
          <img class="span1" src='{{ site.baseurl }}/assets/activity-finance.svg' alt="Finance activity svg">
          <br>
	  <h4>Finance</h4>
          <p>Roleplay with money</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4040"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Finance</button></a>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
	<div class="service-item" >
          <img class="span1" src='{{ site.baseurl }}/assets/activity-maze.svg' alt="Maze Web activity svg">
          <br>
	  <h4>Maze</h4>
          <p>Have fun with progressive challenges</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4727"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Maze Web</button></a>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
	<div class="service-item">
          <img class="span1" src='{{ site.baseurl }}/assets/activity-measure.svg' alt="Measure activity svg">
          <br>
	  <h4>Measure</h4>
          <p>Use your computer to measure things in the physical world</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4197"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Measure</button></a>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
	<div class="service-item">
          <img class="span1" src='{{ site.baseurl }}/assets/activity-turtle3d.svg' alt="TurtleBlocks3D activity svg">
          <br>
	  <h4>TurtleBlocks3D</h4>
          <p>Are you already using TurtleBlocks? Try it in three dimensions!</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4757"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get TurtleBlocks3D</button></a>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="service-item">
          <img class="span1" src='{{ site.baseurl }}/assets/activity-words.svg' alt="Words activity svg">
          <br>
	  <h4>Words</h4>
          <p>Compose and share your ideas</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4315"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Words</button></a>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
	<div class="service-item">
          <img class="span1" src='{{ site.baseurl }}/assets/activity-ruler.svg' alt="Ruler activity svg">
          <br>
	  <h4>Ruler</h4>
          <p>Measure and explore math</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4192"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Ruler</button></a>
	</div>
      </div>
      <div class="col-sm-6 col-md-3">
	<div class="service-item">
          <img class="span1" src='{{ site.baseurl }}/assets/activity-star-chart.svg' alt="StarChart activity svg">
          <br>
	  <h4>StarChart</h4>
          <p>Explore numbers and information in charts</p>
          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4300"><button type="button" class="btn bt-raised btn-custom bt customMargin4">StarChart</button></a>
	</div>
      </div>
      <div class="col-sm-6 col-md-3">
	<div class="service-item">
          <img class="span1" src='{{ site.baseurl }}/assets/activity-recall.svg' alt="Recall activity svg">
          <br>
	  <h4>Recall</h4>
          <p>Test your memory with this fun game</p>
          <a href="https://v4.activities.sugarlabs.org/app/org.sugarlabs.RecallActivity.html"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Get Recall</button></a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Activites website redirect section -->
<section id="call-to-action">
  <div class="container customMargin3">
    <div class="row">
      <div class="col-md-12 text-center">
        <h3>Check out the remaining hundreds of activities!</h3>
	<p>We have hundreds of activities to explore.</p>
        <a href="https://v4.activities.sugarlabs.org/"><button type="button" class="btn bt-raised btn-custom bt">Go to Sugar Activity Library</button></a><br><br>
	<p><em>Important: Please know that in order to install and try them, you need to be running the Sugar Desktop Environment. If you don't have that already, please consider your other options</a> to explore Sugar: <a class="footerHeaderStyle" href="{{ site.baseurl }}/#try">Try Sugar!</a></em></p>
      </div>
    </div>
  </div>
</section>

<!-- Donate -->
<section id="donation">
  <div class="container">
    <div class="text-center">
      <h1>INTERESTED IN MAKING A DONATION?</h2>
      <h6>Are you able to make a one-time or recurring (tax-deductible) donation?</h3>
      <form action="https://www.paypal.com/donate" method="post" target="_top">
        <input type="hidden" name="hosted_button_id" value="V9SNCQGVEFM2Q"/>
        <div className="donate-container" style="margin-bottom: 2rem;">
          <button>Donate</button>
          <div className="payment-methods-text">Accepted payment methods:</div>
          <div className="credit-cards">
            <Image
              src="/assets/paypal.svg?height=30&width=48"
              alt="Visa"
              id="credit-card-image"
            />
            <Image
              src="/assets/visa.svg?height=30&width=48"
              alt="visa"
              id="credit-card-image"
            />
            <Image
              src="/assets/mastercard.svg?height=30&width=48"
              alt="American Express"
              id="credit-card-image"
            />
            <Image
              src="/assets/amex.svg?height=30&width=48"
              alt="Discover"
              id="credit-card-image"
            />
          </div>
        </div>

      </form>
      <p>
        Want to read more about what your donation means? 
        <a href="{{ site.baseurl }}/donate">Learn more on our donate page.</a>
      </p>
    </div>
  </div>
</section>

<!-- "Integration and inquiry" section --><!-- Change this to "contact us now"???-->
<!--
<section id="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 >INTEGRATION AND INQUIRY</h2>
                <p>See how Sugar integrates into your classroom.</p>
                <a href="{{ site.baseurl }}/inquiry">
                    <button type="button" class="btn bt-raised btn-custom bt">Find out now!</button>
                </a>
            </div>
        </div>
    </div>
</section>-->

{% include footer.html %}