---
# 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: sidebar_narrow
menu_section: tutorials
---
<div class="section-menu section-menu--getting-started section-menu--dark">
  <div class="section-menu__header">
    <h3><a href="/tutorials/">Tutorials</a></h3>
  </div>
  <ul>
    <li class="section-menu__item{% if page.tutorial == 'watchface' %} open{% endif %}"><a href="/tutorials/watchface-tutorial/part1/">Build a Watchface in C</a>
      <ul>
        <li class="section-menu__subitem{% if page.tutorial_part == 1 %} active{% endif %}"><a href="/tutorials/watchface-tutorial/part1/"><span>Part 1 - Displaying the Time</span></a></li>
        <li class="section-menu__subitem{% if page.tutorial_part == 2 %} active{% endif %}"><a href="/tutorials/watchface-tutorial/part2/"><span>Part 2 - Customizing the Watchface</span></a></li>
        <li class="section-menu__subitem{% if page.tutorial_part == 3 %} active{% endif %}"><a href="/tutorials/watchface-tutorial/part3/"><span>Part 3 - Adding Web Content</a></li>
        <li class="section-menu__subitem{% if page.tutorial_part == 4 %} active{% endif %}"><a href="/tutorials/watchface-tutorial/part4/"><span>Part 4 - Adding a Battery Bar</span></a></li>
        <li class="section-menu__subitem{% if page.tutorial_part == 5 %} active{% endif %}"><a href="/tutorials/watchface-tutorial/part5/"><span>Part 5 - Vibrate on Disconnect</span></a></li>
      </ul>
    </li>

    <li class="section-menu__item{% if page.tutorial == 'js-watchface' %} open{% endif %}"><a href="/tutorials/js-watchface-tutorial/part1/">Build a Watchface in JS</a>
      <ul>
        <li class="section-menu__subitem{% if page.tutorial_part == 1 %} active{% endif %}"><a href="/tutorials/js-watchface-tutorial/part1/"><span>Part 1 - Displaying the Time</span></a></li>
        <li class="section-menu__subitem{% if page.tutorial_part == 2 %} active{% endif %}"><a href="/tutorials/js-watchface-tutorial/part2/"><span>Part 2 - Adding Web Content</span></a></li>
      </ul>
    </li>

    <li class="section-menu__item{% if page.tutorial == 'advanced' %} open{% endif %}"><a href="/tutorials/advanced/vector-animations/">Advanced Tutorials</a>
      <ul>
        <li class="section-menu__subitem{% if page.tutorial_part == 1 %} active{% endif %}"><a href="/tutorials/advanced/vector-animations/"><span>Vector Animations</span></a></li>
      </ul>
    </li>
  </ul>
</div>
</div><!-- sidebar__wrapper -->
<div class="content content--section-menu">
  {% include search.html %}
  {{ content }}
</div>