landing-page.html

---
layout: base
permalink: /
---

{% comment %} Get the next stream. {% endcomment %}
{% include 1-tools/sort-videos.html videos=site.Streams future=true reverse=true %}
{% assign nextStream = out_sortedVideos | where_exp: 'stream', 'stream.date >= site.time' | first %}

{% comment %} Get latest coding challenges, coding in the cabana and teachable machine video. {% endcomment %}
{% assign featuredSeries = site.challenges | concat: site.CodingChallenges | concat: site.TeachableMachine %}
{% include 1-tools/sort-videos.html videos=featuredSeries sortByDate=true reverse=true %}

{% comment %} Use the latest coding challenge, coding in the cabana or teachable machine video if a stream hasn't been scheduled yet. {% endcomment %}
{% if nextStream == null %}
  {% assign offset = 1 %}
  {% assign nextStream = out_sortedVideos | first %}
{% else %}
  {% assign offset = 0 %}
{% endif %}

{% assign featuredVideos = '' | split: '' %}

{% comment %} Add latest coding challenges, coding in the cabana or teachable machine video to featured videos array. {% endcomment %}
{% for challengeCabanaOrTM in out_sortedVideos limit:3 offset:offset %}
  {% assign featuredVideos = featuredVideos | push: challengeCabanaOrTM %}
{% endfor %}

<div class="landing-page">
  <div class="welcome-message">
    <div class="learn-to-code">
      <h1>Choo choo!</h1>
      <p>All aboard the Coding Train with Daniel Shiffman, a YouTube channel dedicated to beginner-friendly creative
        coding tutorials and challenges.</p>
      <div class="ctas">
        <div><a href="{{ site.links.youtube }}?sub_confirmation=1" target="_blank" rel="noopener noreferrer" class="youtube">Subscribe on
          YouTube</a></div>
        <div><a href="{{ site.links.youtube }}join" target="_blank" rel="noopener noreferrer" class="patreon">Become a Member</a></div>
        <div><a href="{{ site.links.discord }}" target="_blank" rel="noopener noreferrer" class="discord">Join the Discord</a></div>
      </div>
    </div>

    {% include 3-modules/video-card.html video=nextStream %}

  </div>

  <h2>Latest Videos</h2>
  <div class="featured-videos">
    {% include 3-modules/video-list.html sortedVideos=featuredVideos %}
    <a href="{{ site.links.youtube }}" target="_blank" rel="noopener noreferrer" class="more-videos">Watch more videos</a>
  </div>

  <h2>Support The Coding Train</h2>
  <div class="support">
    {% capture memberLogo %}{% include 4-vector-graphics/squarebrackets.svg %}{% endcapture %}
    {% include 3-modules/hero-item.html image=memberLogo title='Consider supporting?' content='Join the Coding Train
    community with a YouTube membership or Patreon subscription!' url=site.links.youtube cta='Become a Member' class='patreon' %}

    {% capture merchStoreImage %}<img alt='The Coding Train Merchandise Store' src="{{ '/assets/images/standardtv-store.jpg' | relative_url }}" style="border-radius: 50%;"/>{%
    endcapture %}
    {% include 3-modules/hero-item.html image=merchStoreImage title='Coding Train Store'
    content='Visit the Coding Train store with a small selection of high quality items' url=site.links.merch cta='Shop for Merchandise' class='merch-store' %}

    {% capture amazonStoreImage %}<img alt='The Coding Train Amazon Store' src="{{ '/assets/images/amazon-store.png' | relative_url }}" />{%
    endcapture %}
    {% include 3-modules/hero-item.html image=amazonStoreImage title="Love to read?" content='Find
    books and other products featured on The Coding Train!' url=site.links.amazon cta='Shop for Books and more'
    class='amazon-store' %}
  </div>
</div>