pebble/devsite/source/tutorials/index.html

---
# Copyright 2025 Google LLC
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

layout: default
title: Tutorials
description: |
  Get started with Pebble development!
menu_section: tutorials
---
<div class="row no-gutter full-height--m full-height--l getting-started">
  <div class="col-m-7 full-height">

    <div class="bigbox bigbox--green bigbox--half">
      <div class="row full-height">

        <div class="col-m-4 hidden-xs hidden-s title-image watchface-image"></div>
        <div class="col-m-8 col-s-12 full-height">
          <div class="vcenter--wrapper">
            <div class="vcenter">
              <h3>Build a Watchface</h3>
              <p>Learn how to create your first watchface. This tutorial will cover basic Pebble concepts, and is the recommended starting point for new developers.</p>
              <a href="/tutorials/js-watchface-tutorial/" target="_blank" class="btn btn--fg-green btn--bg-white">Build with JS</a>
              <a href="/tutorials/watchface-tutorial/" target="_blank" class="btn btn--fg-green btn--bg-white">Build with C</a>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="bigbox bigbox--dark-blue bigbox--half">
      <div class="row full-height">

        <div class="col-m-8 col-s-12 full-height">
          <div class="vcenter--wrapper">
            <div class="vcenter">
              <h3>Build a One Click Action</h3>
              <p>Learn how to create your first one click action watchapp. This guide explains how to create a watchapp that will makes a web request upon launch and display the result.</p>
              <a href="/guides/design-and-interaction/one-click-actions/" target="_blank" class="btn btn--fg-lightblue btn--bg-white">Build with C</a>
            </div>
          </div>
        </div>
        <div class="col-m-4 hidden-xs hidden-s title-image one-click-action-image"></div>

      </div>
    </div>

  </div>

  <div class="col-m-5 full-height">

    <div class="bigbox bigbox--darkgray bigbox--third">
      <div class="vcenter--wrapper">
        <div class="vcenter">
          <h3>Learn C with Pebble</h3>
          <p>A community driven, open source textbook that teaches the fundamentals of C through the scope of Pebble application development.</p>
          <a href="https://pebble.gitbooks.io/learning-c-with-pebble/content/" target="_blank" class="btn btn--fg-gray-02 btn--bg-white">Read the Book</a>
        </div>
      </div>
    </div>

    <div class="bigbox bigbox--lightgray bigbox--third">
      <div class="vcenter--wrapper">
        <div class="vcenter">
          <h3>Publish Your App</h3>
          <p>Learn how to publish your watchface or watchapp on Pebble's appstore.</p>
          <a href="/guides/appstore-publishing/publishing-an-app" target="_blank" class="btn btn--fg-lightblue btn--bg-dawk">Publish an App</a>
        </div>
      </div>
    </div>

    <div class="bigbox bigbox--darkgray bigbox--third">
      <div class="vcenter--wrapper">
        <div class="vcenter">
          <h3>Go Beyond</h3>
          <p>If you're looking to take the next step with your Pebble development, we encourage you to checkout the following resources:</p>
          <p>
            <ul style="align: left">
              <li><a href="/tutorials/advanced/">Advanced Tutorials</a></li>
              <li><a href="/guides/pebble-packages/creating-packages/">Create and Publish a Pebble Packages</a></li>
              <li><a href="/guides/pebble-packages/using-packages/">Integrate Pebble Packages into your project</a></li>
              <li><a href="/guides/events-and-services/health/">Integrate with Pebble Health</a></li>
              <li><a href="/guides/events-and-services/dictation/">Use Pebble Dictation Service</a></li>
              <li><a href="/guides/user-interfaces/app-configuration/">Create Configuration Pages</a></li>
              <li><a href="/guides/communication/using-pebblekit-android/">Build an Android Companion Apps</a></li>
              <li><a href="/guides/communication/using-pebblekit-ios/">Build an iOS Companion Apps</a></li>
            </ul>
          </p>
        </div>
      </div>
    </div>

  </div>
</div>