Workshop 1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Workshop 1 — Getting Started with Python</title>
<style>
  :root {
    --bg: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --accent: #0071e3;
    --code-bg: #f5f5f7;
    --divider: #d2d2d7;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
    overflow: hidden;
  }
  .slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vh 9vw;
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
  .slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .slide { transition: none; }
  }

  .slide.split {
    flex-direction: row;
    align-items: center;
    gap: 6vw;
  }
  .split .content-col {
    flex: 0 0 auto;
    width: 34vw;
  }
  .split .visual-col {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .title-slide {
    background: radial-gradient(ellipse at 30% 30%, rgba(0, 113, 227, 0.08), transparent 60%);
  }
  .eyebrow {
    font-size: 20px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 20px;
  }
  h1 {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  h2 {
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin-bottom: 28px;
  }
  p.body {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.5;
    max-width: 34ch;
  }
  p.body b {
    font-weight: 600;
  }
  code.inline {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    background: var(--code-bg);
    padding: 0.1em 0.4em;
    border-radius: 6px;
    font-size: 0.85em;
  }

  pre {
    background: var(--code-bg);
    border-radius: 18px;
    padding: 2em 2.2em;
    width: fit-content;
    max-width: 46vw;
    font-size: clamp(17px, 1.5vw, 23px);
    overflow-x: auto;
  }
  pre code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: inherit;
    line-height: 1.65;
    color: var(--text-primary);
    white-space: pre;
  }

  table {
    border-collapse: collapse;
  }
  th, td {
    text-align: left;
    padding: 14px 30px 14px 0;
    font-size: clamp(17px, 1.5vw, 23px);
    border-bottom: 1px solid var(--divider);
  }
  th {
    color: var(--text-secondary);
    font-weight: 500;
  }
  td code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  }

  /* Fetch / decode / execute stage pills (How does a computer work?) */
  .stages {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .stage {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .stage .pill {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 600;
    background: var(--code-bg);
    border-radius: 999px;
    padding: 18px 36px;
    min-width: 220px;
    text-align: center;
  }
  .stage .arrow {
    color: var(--divider);
    font-size: 28px;
  }
  .stage:last-child .arrow { visibility: hidden; }

  /* Pipeline (What is programming?) */
  .pipeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pipeline .step {
    font-size: clamp(18px, 1.6vw, 24px);
    color: var(--text-secondary);
    padding: 14px 0;
  }
  .pipeline .step.emphasis {
    color: var(--text-primary);
    font-weight: 600;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  }
  .pipeline .down {
    color: var(--divider);
    font-size: 22px;
    padding-left: 2px;
  }

  /* Trait pills (What is Python?) */
  .traits {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .trait {
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 600;
    border-left: 3px solid var(--accent);
    padding: 6px 0 6px 22px;
  }

  #dots {
    position: fixed;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    height: 7px;
  }
  .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--divider);
  }
  #liquid {
    position: absolute;
    top: 0;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    pointer-events: none;
  }
</style>
</head>
<body>

<section class="slide active title-slide">
  <div class="eyebrow">Workshop 1</div>
  <h1>Getting Started<br>with Python</h1>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>How does a computer work?</h2>
    <p class="body">The CPU repeats one cycle, millions of times a second.</p>
  </div>
  <div class="visual-col">
    <div class="stages">
      <div class="stage"><div class="pill">Fetch</div><div class="arrow">↓</div></div>
      <div class="stage"><div class="pill">Decode</div><div class="arrow">↓</div></div>
      <div class="stage"><div class="pill">Execute</div><div class="arrow">↓</div></div>
    </div>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>What is programming?</h2>
    <p class="body">A computer only understands very simple instructions. We write <b>source code</b> in a language people can read.</p>
  </div>
  <div class="visual-col">
    <div class="pipeline">
      <div class="step">Human language</div>
      <div class="down">↓</div>
      <div class="step emphasis">source code</div>
      <div class="down">↓</div>
      <div class="step">Machine instructions</div>
    </div>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>What is Python?</h2>
    <p class="body">A general-purpose programming language that hides hardware details and runs your code directly, with no separate compile step.</p>
  </div>
  <div class="visual-col">
    <div class="traits">
      <div class="trait">High-level</div>
      <div class="trait">Interpreted</div>
      <div class="trait">General-purpose</div>
    </div>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>Your first program</h2>
    <p class="body"><code class="inline">print(...)</code> writes to the console. A <code class="inline">#</code> starts a comment.</p>
  </div>
  <div class="visual-col">
    <pre><code># This line prints a greeting
print("Hello, World!")</code></pre>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>The console</h2>
    <p class="body">A text-based way to run programs, instead of clicking through a graphical interface.</p>
  </div>
  <div class="visual-col">
    <pre><code>python3 workshop_1/calc.py</code></pre>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>Variables</h2>
    <p class="body">A name that refers to a value stored in memory.</p>
  </div>
  <div class="visual-col">
    <pre><code>age = 25
name = "Ada"</code></pre>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>Data types</h2>
    <p class="body">Every value in Python has a type.</p>
  </div>
  <div class="visual-col">
    <table>
      <tr><th>Type</th><th>Meaning</th><th>Example</th></tr>
      <tr><td><code>int</code></td><td>whole number</td><td><code>42</code></td></tr>
      <tr><td><code>float</code></td><td>decimal number</td><td><code>3.14</code></td></tr>
      <tr><td><code>str</code></td><td>text</td><td><code>"hello"</code></td></tr>
      <tr><td><code>bool</code></td><td>true/false</td><td><code>True</code></td></tr>
    </table>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>Why data types matter</h2>
    <p class="body">Python won't silently guess what you meant when combining a <code class="inline">str</code> and an <code class="inline">int</code>.</p>
  </div>
  <div class="visual-col">
    <pre><code>age = 25
print("Age: " + age)
# TypeError: can only concatenate str
# (not "int") to str</code></pre>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>Type casting</h2>
    <p class="body">Convert between types explicitly, and Python stops guessing.</p>
  </div>
  <div class="visual-col">
    <pre><code>age = 25
print("Age: " + str(age))  # works</code></pre>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>f-strings</h2>
    <p class="body">Build a string from variables without casting and concatenating by hand.</p>
  </div>
  <div class="visual-col">
    <pre><code>name = "Ada"
age = 25
print(f"{name} is {age} years old")
# Ada is 25 years old</code></pre>
  </div>
</section>

<section class="slide split">
  <div class="content-col">
    <h2>Operators</h2>
    <p class="body">Arithmetic and comparison, same as you'd expect from math class.</p>
  </div>
  <div class="visual-col">
    <table>
      <tr><th>Operator</th><th>Meaning</th><th>Example</th><th>Result</th></tr>
      <tr><td><code>/</code></td><td>division</td><td><code>7 / 2</code></td><td><code>3.5</code></td></tr>
      <tr><td><code>//</code></td><td>floor division</td><td><code>7 // 2</code></td><td><code>3</code></td></tr>
      <tr><td><code>%</code></td><td>modulo</td><td><code>7 % 2</code></td><td><code>1</code></td></tr>
      <tr><td><code>**</code></td><td>exponent</td><td><code>2 ** 3</code></td><td><code>8</code></td></tr>
      <tr><td><code>==</code></td><td>equal</td><td><code>3 == 3</code></td><td><code>True</code></td></tr>
    </table>
  </div>
</section>

<section class="slide">
  <h2>Next up</h2>
  <p class="body">Run the examples in <code class="inline">workshop_1/</code>. Your homework is in <code class="inline">python-127-homework-1</code>.</p>
</section>

<div id="dots"></div>

<script>
  const slides = document.querySelectorAll('.slide');
  const dotsContainer = document.getElementById('dots');
  let current = 0;

  slides.forEach(() => {
    const dot = document.createElement('div');
    dot.className = 'dot';
    dotsContainer.appendChild(dot);
  });
  const dots = document.querySelectorAll('.dot');

  const DOT_SIZE = 7;
  const liquid = document.createElement('div');
  liquid.id = 'liquid';
  dotsContainer.appendChild(liquid);

  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  let liquidTimer = null;

  function dotLeft(i) {
    return dots[i].offsetLeft;
  }

  function placeLiquid(i, animate) {
    const targetLeft = dotLeft(i);

    // Cancel any pending Phase 2 from an interrupted transition — otherwise
    // it fires later and snaps the indicator back to a stale target.
    if (liquidTimer !== null) {
      window.clearTimeout(liquidTimer);
      liquidTimer = null;
    }

    if (!animate || reduceMotion) {
      liquid.style.transition = 'none';
      liquid.style.left = targetLeft + 'px';
      liquid.style.width = DOT_SIZE + 'px';
      liquid.offsetHeight; // flush the style change before re-enabling transitions
      liquid.style.transition = '';
      return;
    }

    // Phase 1: stretch into a liquid bridge spanning the old and new positions.
    // Read the liquid's own live position rather than the `current` index, so an
    // interrupted transition bridges from where the blob actually is on screen.
    const fromLeft = parseFloat(getComputedStyle(liquid).left) || dotLeft(current);
    const bridgeLeft = Math.min(fromLeft, targetLeft);
    const bridgeWidth = Math.abs(targetLeft - fromLeft) + DOT_SIZE;

    liquid.style.transition = 'left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1)';
    liquid.style.left = bridgeLeft + 'px';
    liquid.style.width = bridgeWidth + 'px';

    // Phase 2: spring back into a droplet at the new dot.
    liquidTimer = window.setTimeout(() => {
      liquidTimer = null;
      liquid.style.transition = 'left 0.3s cubic-bezier(0.34,1.56,0.64,1), width 0.3s cubic-bezier(0.34,1.56,0.64,1)';
      liquid.style.left = targetLeft + 'px';
      liquid.style.width = DOT_SIZE + 'px';
    }, 220);
  }

  function show(i) {
    slides[current].classList.remove('active');
    const next = (i + slides.length) % slides.length;
    placeLiquid(next, true);
    current = next;
    slides[current].classList.add('active');
  }

  placeLiquid(0, false);

  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight' || e.key === ' ') show(current + 1);
    if (e.key === 'ArrowLeft') show(current - 1);
  });
  document.addEventListener('click', () => show(current + 1));
</script>

</body>
</html>