<commit_before>---
layout: course-inside
no_wrapper: true
skip_links: |
  <li><a href="#steps">Skip to lesson steps</a></li>
---

{% include metadata/thomasjbradley.html %}

<div itemscope itemtype="http://schema.org/HowTo">
  {% include metadata/article-lesson.html %}
  <meta itemprop="performTime" content="PT1H">
  <meta itemprop="prepTime" content="PT5M">
  <meta itemprop="educationalUse" content="Lesson">
  <meta itemprop="interactivityType" content="active">
  <meta itemprop="learningResourceType" content="Lesson">
  <meta itemprop="image" content="https://learn-the-web.algonquindesign.ca/images/lesson-thumbnail.png">

  <div class="lesson-desc">
    <div class="grid gutter-1-2 pad-t-1-2 pad-b-1-2 {% unless layout.no_wrapper %}wrapper{% endunless %}">
      <p class="unit [ xs-1 ] unit-push-l-1-5 lesson-intro push-0 giga" itemprop="description">{{page.desc}}</p>
    </div>
  </div>

  <main>
    {% if page.video or page.playlist %}
      <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
        <meta itemprop="name" content="{{page.title}}">
        <meta itemprop="description" content="{{page.desc}}">
        <meta itemprop="thumbnailUrl" content="https://learn-the-web.algonquindesign.ca/images/video-thumbnail.png">
        <meta itemprop="uploadDate" content="{% capture lastmod_date %}{% last_modified {{ page.path }} %}{% endcapture %}{{ lastmod_date | date_to_xmlschema }}">
        <meta itemprop="author" itemscope itemtype="http://schema.org/Person" itemref="thomasjbradley">

        <section class="lesson-step lesson-video grid grid-middle no-print">
          <div class="lesson-body video-container unit [ xs-1 m-2-3 ]">
            {% if page.video %}
              <a class="play-btn link-box link-box-no-mark" href="https://www.youtube.com/watch?v={{page.video}}" data-video="{{page.video}}" itemprop="embedUrl">
                <i class="icon play-icon"><svg><use xlink:href="#icon-play"/></svg></i>
                <strong class="giga icon-label play-icon-text">Watch the video</strong>
              </a>
            {% endif %}
            {% if page.playlist %}
              <a class="play-btn link-box link-box-no-mark" href="https://www.youtube.com/playlist?list={{page.playlist}}" data-playlist="{{page.playlist}}">
                <i class="icon play-icon"><svg><use xlink:href="#icon-play"/></svg></i>
                <strong class="giga icon-label play-icon-text">Watch the video playlist</strong>
              </a>
            {% endif %}
            <div class="embed embed--5by1 video-embed"></div>
          </div>
          <div class="lesson-notes lesson-notes-video unit [ xs-1 m-1-3 ]">
           <ol class="lesson-note-list list-group push-0">
              <li class="lesson-note">
                <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">Video or tutorial</h3>
                <div class="gutter-1-2 italic">
                  <p class="push-0">You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.</p>
                </div>
              </li>
            </ol>
          </div>
        </section>
      </div>
    {% endif %}

    <div itemprop="steps" id="steps">
      {% if page.goal %}
        <section class="lesson-step grid grid-stretch">
          <div class="lesson-body unit [ xs-1 m-2-3 ] pad-t-1-2 {% if page.important %}lesson-body-no-border{% endif %}">
            <h2 class="lesson-title zetta push-1-4" id="step-goal" data-step-jump="step-goal" tabindex="0">
              <i class="lesson-step-num icon i-48"><svg><use xlink:href="#icon-victory" /></svg></i>
              Goal
            </h2>
            <div class="mega gutter-1-4 lesson-body-text">
              {% if page.goal.before %}
                {{page.goal.before | markdownify}}
                {% unless page.goal.no_image %}
                  <p><em>This is what it should look like when it’s done:</em></p>
                {% endunless %}
                {% if page.goal.video %}
                  <p><em>This is what it should look like when it’s done:</em></p>
                {% endif %}
              {% endif %}
              {% unless page.goal.no_image %}
                <img itemprop="image" src="{{page.goal.image | default: 'goal.jpg' }}" alt="">
              {% endunless %}
              {% if page.goal.video %}
                <video {% if page.goal.video_poster %}poster="{{page.goal.video_poster}}"{% endif %} controls muted loop class="push" preload="metadata" playsinline>
                  <source src="{{page.goal.video}}" type="video/mp4">
                  {% if page.goal.video_poster %}<img src="{{page.goal.video_poster}}" alt="">{% endif %}
                </video>
              {% endif %}
            </div>
          </div>
          <div class="lesson-notes unit [ xs-1 m-1-3 ] {% if page.important %}lesson-notes-no-border{% endif %}">
            {% if page.goal.notes %}
              <ol class="lesson-note-list list-group">
                {% for note in page.goal.notes %}
                  <li class="lesson-note">
                    <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">{{note.label}}</h3>
                    <div class="gutter-1-2 italic">{{note.text | markdownify}}</div>
                  </li>
                {% endfor %}
              </ol>
            {% endif %}
          </div>
        </section>
      {% endif %}

      {% if page.important %}
        <aside class="lesson-step lesson-step-final grid grid-stretch">
          <div class="lesson-body lesson-body-final unit [ xs-1 m-2-3 ] pad-t-1-2">
            <h2 class="lesson-title zetta push-1-4" id="step-important" data-step-jump="step-important" tabindex="0">
              <i class="lesson-step-num icon i-48">
                <svg id="Layer_1" width="256" height="256" viewBox="0 0 256 256">
                  <path d="M226.8 167.2L135.9 9.5a9.1 9.1 0 0 0-15.7-.1l-91 157.8a9.2 9.2 0 0 0 7.9 13.8h181.8a9.2 9.2 0 0 0 7.9-13.8z"/>
                  <polygon fill="#fff" points="139.9 67 139.1 87.4 135.8 123 120.2 123 116.9 87.4 116.1 67 139.9 67"/>
                  <path fill="#fff" d="M128 160.8c-8.9 0-15.3-6.5-15.3-15.4s6.4-15.1 15.3-15.1 15.3 6.2 15.3 15.1-6.4 15.4-15.3 15.4z"/>
                </svg>
              </i>
              {{page.important.title}}
            </h2>
            <div class="mega lesson-body-text">{{page.important.text | markdownify}}</div>
          </div>
          <div class="lesson-notes lesson-notes-final unit [ xs-1 m-1-3 ]">
            <ol class="lesson-note-list list-group">
              <li class="lesson-note">
                <h3 class="lesson-note-label lesson-note-label-final kilo push-0 inline-block gutter-1-2 yellow-sticky">Important</h3>
                <div class="gutter-1-2 italic">Read this stuff—it’s like totally important.</div>
              </li>
            </ol>
          </div>
        </aside>
      {% endif %}

      {% if page.fork %}
        <section class="lesson-step grid grid-stretch">
          <div class="lesson-body unit [ xs-1 m-2-3 ] pad-t-1-2">
            <h2 class="lesson-title zetta push-1-4" id="step-fork" data-step-jump="step-fork" tabindex="0">
              <i class="lesson-step-num icon i-48">
                <svg width="256" height="256" viewBox="0 0 256 256">
                  <circle cx="128" cy="110" r="110"/>
                  <polyline fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17" points="127.5 181 127.5 143.3 84.9 116.1 84.9 75"/>
                  <polyline fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17" points="127.5 181 127.5 143.3 170.1 116.1 170.1 75"/>
                  <circle cx="86" cy="70.9" r="21" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>
                  <circle cx="170" cy="70.9" r="21" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>
                  <circle cx="127.8" cy="165.1" r="21" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>
                </svg>
              </i>
              Fork &amp; clone
            </h2>
            <div class="mega gutter-1-4 lesson-body-text">
              <p>Start the lesson by forking and cloning the <code>{% if page.fork.repo %}{{page.fork.repo}}{% else %}{{page.slug}}{% endif %}</code> repository.</p>
              <p class="tera"><strong><a href="{{page.fork.url}}{% unless page.fork.url contains '/fork' %}/fork{% endunless %}">Fork &amp; clone the “{% if page.fork.repo %}{{page.fork.repo}}{% else %}{{page.slug}}{% endif %}” repo.</a></strong></p>
              <p><em>The repository will have some starter files to get you on your way{% unless page.hide_markbot %} and include requirements for Markbot so you can be sure you’ve completed the lesson{% endunless %}.</em></p>
            </div>
          </div>
          <div class="lesson-notes unit [ xs-1 m-1-3 ]">
            <ol class="lesson-note-list list-group">
              <li class="lesson-note">
                <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">{% unless page.hide_markbot %}Fork, clone &amp; Markbot{% else %}Fork &amp; clone{% endunless %}</h3>
                <div class="gutter-1-2 italic">
                  <p>This includes some starter code that you can get by forking and cloning the repository.{% unless page.hide_markbot %} You’ll use Markbot to double check everything is done properly.{% endunless %}</p>
                </div>
              </li>
              {% if page.fork.notes %}
                {% for note in page.fork.notes %}
                  <li class="lesson-note">
                    <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">{{note.label}}</h3>
                    <div class="gutter-1-2 italic">{{note.text | markdownify}}</div>
                  </li>
                {% endfor %}
              {% endif %}
            </ol><commit_msg>Remove duplicate slashes from the fork URL<commit_after>---
layout: course-inside
no_wrapper: true
skip_links: |
  <li><a href="#steps">Skip to lesson steps</a></li>
---

{% include metadata/thomasjbradley.html %}

<div itemscope itemtype="http://schema.org/HowTo">
  {% include metadata/article-lesson.html %}
  <meta itemprop="performTime" content="PT1H">
  <meta itemprop="prepTime" content="PT5M">
  <meta itemprop="educationalUse" content="Lesson">
  <meta itemprop="interactivityType" content="active">
  <meta itemprop="learningResourceType" content="Lesson">
  <meta itemprop="image" content="https://learn-the-web.algonquindesign.ca/images/lesson-thumbnail.png">

  <div class="lesson-desc">
    <div class="grid gutter-1-2 pad-t-1-2 pad-b-1-2 {% unless layout.no_wrapper %}wrapper{% endunless %}">
      <p class="unit [ xs-1 ] unit-push-l-1-5 lesson-intro push-0 giga" itemprop="description">{{page.desc}}</p>
    </div>
  </div>

  <main>
    {% if page.video or page.playlist %}
      <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
        <meta itemprop="name" content="{{page.title}}">
        <meta itemprop="description" content="{{page.desc}}">
        <meta itemprop="thumbnailUrl" content="https://learn-the-web.algonquindesign.ca/images/video-thumbnail.png">
        <meta itemprop="uploadDate" content="{% capture lastmod_date %}{% last_modified {{ page.path }} %}{% endcapture %}{{ lastmod_date | date_to_xmlschema }}">
        <meta itemprop="author" itemscope itemtype="http://schema.org/Person" itemref="thomasjbradley">

        <section class="lesson-step lesson-video grid grid-middle no-print">
          <div class="lesson-body video-container unit [ xs-1 m-2-3 ]">
            {% if page.video %}
              <a class="play-btn link-box link-box-no-mark" href="https://www.youtube.com/watch?v={{page.video}}" data-video="{{page.video}}" itemprop="embedUrl">
                <i class="icon play-icon"><svg><use xlink:href="#icon-play"/></svg></i>
                <strong class="giga icon-label play-icon-text">Watch the video</strong>
              </a>
            {% endif %}
            {% if page.playlist %}
              <a class="play-btn link-box link-box-no-mark" href="https://www.youtube.com/playlist?list={{page.playlist}}" data-playlist="{{page.playlist}}">
                <i class="icon play-icon"><svg><use xlink:href="#icon-play"/></svg></i>
                <strong class="giga icon-label play-icon-text">Watch the video playlist</strong>
              </a>
            {% endif %}
            <div class="embed embed--5by1 video-embed"></div>
          </div>
          <div class="lesson-notes lesson-notes-video unit [ xs-1 m-1-3 ]">
           <ol class="lesson-note-list list-group push-0">
              <li class="lesson-note">
                <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">Video or tutorial</h3>
                <div class="gutter-1-2 italic">
                  <p class="push-0">You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.</p>
                </div>
              </li>
            </ol>
          </div>
        </section>
      </div>
    {% endif %}

    <div itemprop="steps" id="steps">
      {% if page.goal %}
        <section class="lesson-step grid grid-stretch">
          <div class="lesson-body unit [ xs-1 m-2-3 ] pad-t-1-2 {% if page.important %}lesson-body-no-border{% endif %}">
            <h2 class="lesson-title zetta push-1-4" id="step-goal" data-step-jump="step-goal" tabindex="0">
              <i class="lesson-step-num icon i-48"><svg><use xlink:href="#icon-victory" /></svg></i>
              Goal
            </h2>
            <div class="mega gutter-1-4 lesson-body-text">
              {% if page.goal.before %}
                {{page.goal.before | markdownify}}
                {% unless page.goal.no_image %}
                  <p><em>This is what it should look like when it’s done:</em></p>
                {% endunless %}
                {% if page.goal.video %}
                  <p><em>This is what it should look like when it’s done:</em></p>
                {% endif %}
              {% endif %}
              {% unless page.goal.no_image %}
                <img itemprop="image" src="{{page.goal.image | default: 'goal.jpg' }}" alt="">
              {% endunless %}
              {% if page.goal.video %}
                <video {% if page.goal.video_poster %}poster="{{page.goal.video_poster}}"{% endif %} controls muted loop class="push" preload="metadata" playsinline>
                  <source src="{{page.goal.video}}" type="video/mp4">
                  {% if page.goal.video_poster %}<img src="{{page.goal.video_poster}}" alt="">{% endif %}
                </video>
              {% endif %}
            </div>
          </div>
          <div class="lesson-notes unit [ xs-1 m-1-3 ] {% if page.important %}lesson-notes-no-border{% endif %}">
            {% if page.goal.notes %}
              <ol class="lesson-note-list list-group">
                {% for note in page.goal.notes %}
                  <li class="lesson-note">
                    <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">{{note.label}}</h3>
                    <div class="gutter-1-2 italic">{{note.text | markdownify}}</div>
                  </li>
                {% endfor %}
              </ol>
            {% endif %}
          </div>
        </section>
      {% endif %}

      {% if page.important %}
        <aside class="lesson-step lesson-step-final grid grid-stretch">
          <div class="lesson-body lesson-body-final unit [ xs-1 m-2-3 ] pad-t-1-2">
            <h2 class="lesson-title zetta push-1-4" id="step-important" data-step-jump="step-important" tabindex="0">
              <i class="lesson-step-num icon i-48">
                <svg id="Layer_1" width="256" height="256" viewBox="0 0 256 256">
                  <path d="M226.8 167.2L135.9 9.5a9.1 9.1 0 0 0-15.7-.1l-91 157.8a9.2 9.2 0 0 0 7.9 13.8h181.8a9.2 9.2 0 0 0 7.9-13.8z"/>
                  <polygon fill="#fff" points="139.9 67 139.1 87.4 135.8 123 120.2 123 116.9 87.4 116.1 67 139.9 67"/>
                  <path fill="#fff" d="M128 160.8c-8.9 0-15.3-6.5-15.3-15.4s6.4-15.1 15.3-15.1 15.3 6.2 15.3 15.1-6.4 15.4-15.3 15.4z"/>
                </svg>
              </i>
              {{page.important.title}}
            </h2>
            <div class="mega lesson-body-text">{{page.important.text | markdownify}}</div>
          </div>
          <div class="lesson-notes lesson-notes-final unit [ xs-1 m-1-3 ]">
            <ol class="lesson-note-list list-group">
              <li class="lesson-note">
                <h3 class="lesson-note-label lesson-note-label-final kilo push-0 inline-block gutter-1-2 yellow-sticky">Important</h3>
                <div class="gutter-1-2 italic">Read this stuff—it’s like totally important.</div>
              </li>
            </ol>
          </div>
        </aside>
      {% endif %}

      {% if page.fork %}
        {% capture the_fork_url %}{{page.fork.url}}{% unless page.fork.url contains '/fork' %}/fork{% endunless %}{% endcapture %}
        <section class="lesson-step grid grid-stretch">
          <div class="lesson-body unit [ xs-1 m-2-3 ] pad-t-1-2">
            <h2 class="lesson-title zetta push-1-4" id="step-fork" data-step-jump="step-fork" tabindex="0">
              <i class="lesson-step-num icon i-48">
                <svg width="256" height="256" viewBox="0 0 256 256">
                  <circle cx="128" cy="110" r="110"/>
                  <polyline fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17" points="127.5 181 127.5 143.3 84.9 116.1 84.9 75"/>
                  <polyline fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="17" points="127.5 181 127.5 143.3 170.1 116.1 170.1 75"/>
                  <circle cx="86" cy="70.9" r="21" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>
                  <circle cx="170" cy="70.9" r="21" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>
                  <circle cx="127.8" cy="165.1" r="21" stroke="#fff" stroke-miterlimit="10" stroke-width="17"/>
                </svg>
              </i>
              Fork &amp; clone
            </h2>
            <div class="mega gutter-1-4 lesson-body-text">
              <p>Start the lesson by forking and cloning the <code>{% if page.fork.repo %}{{page.fork.repo}}{% else %}{{page.slug}}{% endif %}</code> repository.</p>
              <p class="tera"><strong><a href="{{the_fork_url | replace:'//fork', '/fork'}}">Fork &amp; clone the “{% if page.fork.repo %}{{page.fork.repo}}{% else %}{{page.slug}}{% endif %}” repo.</a></strong></p>
              <p><em>The repository will have some starter files to get you on your way{% unless page.hide_markbot %} and include requirements for Markbot so you can be sure you’ve completed the lesson{% endunless %}.</em></p>
            </div>
          </div>
          <div class="lesson-notes unit [ xs-1 m-1-3 ]">
            <ol class="lesson-note-list list-group">
              <li class="lesson-note">
                <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">{% unless page.hide_markbot %}Fork, clone &amp; Markbot{% else %}Fork &amp; clone{% endunless %}</h3>
                <div class="gutter-1-2 italic">
                  <p>This includes some starter code that you can get by forking and cloning the repository.{% unless page.hide_markbot %} You’ll use Markbot to double check everything is done properly.{% endunless %}</p>
                </div>
              </li>
              {% if page.fork.notes %}
                {% for note in page.fork.notes %}
                  <li class="lesson-note">
                    <h3 class="lesson-note-label kilo push-0 inline-block gutter-1-2">{{note.label}}</h3>
                    <div class="gutter-1-2 italic">{{note.text | markdownify}}</div>
                  </li>
                {% endfor %}
              {% endif %}
            </ol>
{'fraction_non_alphanumeric': 0.17448124501197126, 'fraction_numerical': 0.040403032721468474, 'mean_word_length': 2.056715962799207, 'pattern_counts': {'":': 0, '<': 345, '<?xml version=': 0, '>': 345, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4398688', 'n_tokens_mistral': 7158, 'n_tokens_neox': 6298, 'n_words': 1422}